HTML:Hyper Text Markup Language超文本标记语言,是一种专门用于创建Web超文本文档的编程语言,它能告诉Web浏览程序如何显示Web文档(即网页)的信息,如何链接各种信息。
1.html基本结构
<html>
<head>
<title>我的第一个网页</title>
</head>
<body>
我的第一个网页
</body>
</html>
<head></head>中主要包括网页的基本信息
网页标题
元数据标签
<body></body>中主要包括网页内容
2.网页基本信息
a.DOCTYPE声明
<!DOCTYPE html">
<html>
?<head> ??<meta charset=“utf-8" /> ??<title>无标题文档</title>
</head>
<body>
??网页主体 ?</body></html>
<meta ?charset="gb2312”>
<meta name=“搜索关键字” content=“内容描述" />
二:HTML标签
1.标题标签
<h1>…</h1> <h2>…</h2> <h3>…</h3> <h4>…</h4> <h5>…</h5> <h6>…</h6>2.段落标签 <p>…</p>3.换行标签
<br/>
4.水平线标签
<hr/>
5.注释<!-- 注释内容 --> 特殊符号特殊符号 ???字符实体 ???示例空格 ????? ?????<a href="#">百度</a> | <a href="#">新浪</a>大于号(>) ?> ???????如果时间>晚上6点,就坐车回家小于号(<) ?< ???????如果时间<早上7点,就走路去上学引号(") ??????" ?????W3C规范中,HTML的属性值必须用成对的"引起来版权符号 ???© ?????© 6.图像标签 常见的图像格式
JPG
,GIF,
PNG,
BMP
<img src="path" alt="text" ??width="x" ?height="y" />
<img src="image/hetao.jpg" width="160" height="160" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/>7.链接标签 <a href="path" target="目标窗口位置">链接文本或图像</a> <a ?href="hetao.html" ?target="_blank">无漂白薄皮核桃</a>
<a ?href="hetao.html" ?target="_blank"><img src="image/hetao.jpg" alt="无漂白薄皮核桃" title="无漂白薄皮核桃"/></a>
超链接使用场合 ?1.页面间链接:
从一个页面链接到另外一个页面
2.功能性链接
三:HTML列表
1.无序列表
<ul> ?<li>桔子</li> ?<li>香蕉</li> ?<li>苹果</li> </ul> ul标签的type属性取值 ?disc ???项目符号显示为实体圆心,默认值 ?square ?项目符号显示为实体方心 ?circle ?项目符号显示为空心圆2.有序列表 ?<ol> ??????<li>桔子</li> ??????<li>香蕉</li> ??????<li>苹果</li> ?????</ol> ol标签的type取值 ?1 使用数字作为项目符号 ?A/a ??使用大写/小写字母作为项目符号 ?I/i ??使用大写/小写罗马数字作为项目符号3.定义列表 <dl> ?<dt>所属学院</dt> ???<dd>计算机应用</dd> ?<dt>所属专业</dt> ???<dd>计算机软件工程</dd>
</dl>
4.列表小结类型 ?????说明 ?????????????项目符号无序列表 ???1.以<ul>标签来实现 ???通过type属性设置项目符号
disc(默认)、square和circle
2.以<li>标签表示列表项
有序列表 ???1.以<ol>标签来实现 ???????通过type属性设置项目顺序
1(数字,默认)、A(大写字母)、a(小写字母)、I(大写罗马数字)和i(小写罗马数字)
2.
以<li>标签表示列表项
定义类表 ???1.以<dl>标签是实现
无项目符号和显示顺序
2.以<dt>标签定义列表项
???????3.以<dd>标签定义内容5.表格语法<table> ?<tr> ??<td>第1个单元格的内容</td> ??<td>第2个单元格的内容</td> ?????????…… ?</tr> ?<tr> ??<td>第1个单元格的内容</td> ??<td>第2个单元格的内容</td> ???????…… ?</tr></table>6.对齐方式表格对齐方式
默认对齐、居中对齐(align=center
)、左对齐、右对齐
单元格对齐方式
水平对齐方式、垂直对齐方式
属性 ?????????值 ??说明align
水平对齐方式 ?left ???左对齐
center ?居中对齐
right ??右对齐
valign
垂直对齐方式 ?top 顶端对齐
middle ?居中对齐
bottom ?底端对齐
baseline ???基线对齐
7.表格的跨列<table> <tr> ?<td colspan="n">单元格内容</td>
//n表示所跨的列数
</tr>
<tr> ?<td>单元格内容</td> ??????……</tr> ????......</table>表格的跨行<table ><tr> ?<td rowspan="n"> </td>//n表示所跨的行数 ?<td> </td></tr><tr> ?<td> </td></tr></table>
四:表单标签
表单(form)
是用来接收用户信息的标签
表单语法:<form ?method=“post” action=“请求服务器端路径"> ?????<p> ?名字:<input name=“username" type="text" > ?</p> ?????<p> ?密码:<input name=“pwd" type="password" > ?</p> ?????<p> ???????<input type="submit" ??value="提交"> ???????<input type=“reset” ?value=“重置"> ??????</p> ?????</form>表单元素格式:<input ?type="text" ?name="fname" value="text"> ???属性 ?????说明 ???type ???????指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button,默认为 text ???name ?????指定表单元素的名称。 ???value ?????元素的初始值。type 为 radio时必须指定一个值 ???size ????????指定表单元素的初始宽度。当 type 为 text 或 password时,表单元素的大小以字符为单位。对于其他类型,宽度以像素为单位maxlength ??type为text 或 password 时,输入的最大字符数 ???checked type为radio或checkbox时,指定按钮是否是被选中表单元素 ?文本框:<input ?type="text" ?name="userName" value="用户名" maxlength="20" > ?密码框:<input ?type="password " ?name="pass" ?size="20" > ?单选按钮:<input name="gen" type="radio" value=“boy" ?checked="checked" >男 ???????<input name="gen" type="radio" value=“girl" >女 ?复选框:<input type="checkbox" name="interest" value="sports">运动 ?????<input type="checkbox" name="interest" value="talk" checked="checked" >聊天 ?????<input type="checkbox" name="interest" value="play">玩游戏 ?下拉列表框:<select name="列表名称"> ???????<option value="选项的值" selected="selected">…</option > ???????<option value="选项的值">…</option > ?????????</select> ?按钮:<input ?type="reset" name="butReset" value="reset按钮"> ???<input ?type="submit" name="butSubmit" value="submit按钮"> ???<input ?type="button" name="butButton" value="button按钮"/> ???图片按钮:<input ?type="image" ?src="images/login.gif" /> ?多行文本域: ???<textarea ?name="showText" ?cols="x" ?rows="y"> ???????????文本内容 ?????????</textarea ?> ?文件域: ?????<form action="" method="post" enctype="multipart/form-data"> ?????<p><input type="file" name="files" /> ?????<input type="submit" name="upload" value="上传" /> ?????</p> ?????</form> ?表单元素高级属性:只读 readonly="true" ???????????????????????????????????????????????????????????????????禁用 disabled="true"
HTML概述
原文地址:http://blog.51cto.com/13507330/2085759