第二章：HTML的常用标签

一、标签

二、常用标签

1.排版标签

2.文本标签

3.图片标签img

4.列表

5.表格

6.表单

7.框架标签iframe

三、总结

一、标签

HTML是一种标记性语言，主要通过各种标签来呈现页面，不同标签有不同的语义和效果。注意：效果并不重要，标签最重要的是语义，所有的效果都可以通过css进行修改，主要是为了方便爬虫、盲人阅读器等等的读取。

二、常用标签

1.排版标签

排版标签主要是h1~h6标签，p标签，div标签。h1到h6分别代表一级标题，二级标题······六级标题。p标签表示段落。

div标签没有语义，在代码中通常用来包裹，打包代码块。

2.文本标签

em标签语义：要着重阅读的地方；

strong标签语义：十分重要的内容（语气比em强）；

span标签语义：没有没有语义，用来包裹代码片段。

另外还有很多不常用的文本标签，比如cite，del，sub等等很多，感兴趣的可以在W3C官网上查看。

3.图片标签img

该标签同过src属性来访问图片，src内部可以直接引入（相对路径：'./'表示当前文件下，‘../’表示往上跳一级），可以是在线地址（绝对路径），alt值代表图片的名字，便于搜索时可以搜到该图片。

另外可以通过width和height属性调整图片的宽和高。

4.超链接 a标签

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head><body><a href="#Wechat">看微信头像</a><!-- 超链接跳转页面 --><a href="https://search.jd.com/Search?keyword=%E6%89%8B%E6%9C%BA&enc=utf-8&wq=%E6%89%8B%E6%9C%BA&pvid=8858151673f941e9b1a4d2c7214b2b52"target="_blank"> 京东手机</a><!-- 超链接跳转文件 --><a href="./facivon.jpg" target="_blank">看图标</a><!-- 超链接跳转锚点 --><div><img src="./facivon.jpg" alt=""><img src="./facivon.jpg" alt=""><img src="./facivon.jpg" alt=""><img src="./facivon.jpg" alt=""><img src="./facivon.jpg" alt=""><img src="./facivon.jpg" alt=""><!-- <a name="Wechat"></a> --><p id="Wechat">这是一个微信头像</p><img width="200" src="../facivon.ico" alt=""></div><!-- <a href="../facivon.ico" target="_blank">微信头像</a> --><p>本节完了</p><a href="#">回到顶部</a><!-- 超链接唤起指定应用 --><div><!-- 电话 --><a href="tel:10086">电话联系</a><!-- 邮件 --><a href="mailto:Rocket@4399.com">邮件联系</a><!-- 短信 --><a href="sms:10086">短信联系</a></div>
</body></html>

超链接用来实现页面的跳转，通过href属性控制跳转的页面，里面可以是一个在线地址，也可以是一个锚点，通过锚点跳转页面的位置。

另外href里面还可以是电话，邮件，短信等等，用来唤起指定应用。

4.列表

列表分为有序列表ul，无序列表ol和自定义列表dl。

（1）有序列表

有序列表用ul表示，其中的每一步用li表示。

（2）无序列表

无序列表用ol表示，其中的每一条用li表示

（3）自定义列表

自定义列表用dl表示，每一条用dt表示，dd用来解释dt。

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><title>列表</title>
</head>
<body><!-- 有序列表 --><div><h2>把大象放进冰箱分几步？</h2><ol><li>打开冰箱门</li><li>把大象放进去</li><li>关上冰箱门</li></ol></div><!-- 无序列表 --><div><h2>我想去的几个城市</h2><ul><li>北京</li><li>上海</li><li>拉萨</li></ul></div><!-- 自定义列表 --><div><h2>如何学习</h2><dl><dt>预习</dt><dd>提前准备</dd><dt>做笔记</dt><dd>后期复习的帮手</dd><dt>多实操</dt><dd>自己写下的代码才是自己的</dd></dl></div>
</body>
</html>

注意：列表带有默认的样式，但是这并不重要，因为后期都是可以用css除去的。

5.表格

相关标签：table:表格；caption：表格标题；thead：表格头部；tbody：表格主体；tfoot：表格脚注。表格头部的列用th表示，表格主体和脚注的列用td表示，行都是用tr表示。行合并用rowspan="n"属性，列合并用colspan="n"。下面是示例代码：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>表格</title>
</head><body><div><table border="1" width="500" height="300" cellspacing="0"><!-- 表格标题 --><caption>学生信息</caption><!-- 表格头部 --><thead height="50" align="center" valign="middle"><tr height="100" align="center" valign="middle"><th width="50" height="100" align="right" valign="bottom">姓名</th><th>性别</th><th>年龄</th><th>民族</th><th>政治面貌</th></tr></thead><!-- 表格主体 --><tbody height="520" align="center" valign="middle"><tr><td>张三</td><td>男</td><td>18</td><td>汉族</td><td>团员</td></tr><tr><td>李四</td><td>女</td><td>20</td><td>满族</td><td>群众</td></tr><tr><td>王五</td><td>男</td><td>19</td><td>回族</td><td>党员</td></tr><tr><td>赵六</td><td>女</td><td>21</td><td>壮族</td><td>团员</td></tr></tbody><!-- 表格脚注 --><tfoot height="50" align="center" valign="middle"><tr><td></td><td></td><td></td><td></td><td>共计：4人</td></tr></tfoot></table></div><div><table border="1" width="500" height="300" cellspacing="0"><caption>课程表</caption><thead><tr><th>项目</th><th colspan="5">上课</th><th colspan="2">活动与休息</th></tr></thead><tbody><tr><td>星期</td><td>星期一</td><td>星期二</td><td>星期三</td><td>星期四</td><td>星期五</td><td>星期六</td><td>星期日</td></tr><tr><td rowspan="5">上午</td><td>2-2</td><td>2-3</td><td>2-4</td><td>2-5</td><td>2-6</td><td>2-7</td><td rowspan="5">休息</td></tr><tr>]<td>3-2</td><td>3-3</td><td>3-4</td><td>3-5</td><td>3-6</td><td>3-7</td></tr><tr><td>4-2</td><td>4-3</td><td>4-4</td><td>4-5</td><td>4-6</td><td>4-7</td></tr><tr>]<td>5-2</td><td>5-3</td><td>5-4</td><td>5-5</td><td>5-6</td><td>5-7</td></tr><tr>]<td>6-2</td><td>6-3</td><td>6-4</td><td>6-5</td><td>6-6</td><td>6-7</td></tr><tr>]<td rowspan="2">下午</td><td>7-2</td><td>7-3</td><td>7-4</td><td>7-5</td><td>7-6</td><td>7-7</td><td rowspan="2">休息</td></tr><tr>]<td>8-2</td><td>8-3</td><td>8-4</td><td>8-5</td><td>8-6</td><td>8-7</td></tr></tbody></table></div>
</body></html>

6.表单

表单标签是form，表单包括的标签有很多，比如文本框，密码框，单选框，复选框，隐藏域，文本域，下拉框，按钮等等。

值得注意的是：隐藏域主要用来保护网页，防攻击。按钮又分为普通按钮（检测账户是否被注册），确认按钮，重置按钮，通过属性type来控制。

注意表单的value值，只是提交的内容，后期用来确认账户。

表单禁用控价：disabled，该属性可以禁用表单。

具体使用代码如下：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>表单</title>
</head><body><div><form action="https://www.baidu.com/s"><input type="text" name="wd"><button>搜索</button><hr></form><form action="https://search.jd.com/search" target="_blank"><input type="text" name="keyword"><button>搜索</button></form></div><form action="https://search.jd.com/search" target="_blank"><!-- 文本输入框 -->账户：<input type="text" ,name="account" value="张三" maxlength="10"><br><!-- 密码输入框 -->密码：<input type="password" ,name="pwd" value="123" maxlength="10"><br><!-- 单选框 -->性别：<input type="radio" name="gender" value="male">男<input type="radio" name="gender" value="female">女<br><!-- 多选框 -->爱好：<input type="checkbox" name="hobby" value="smoke">抽烟<input type="checkbox" name="hobby" value="drink">喝酒<input type="checkbox" name="hobby" value="perm">烫头<br><!-- 隐藏域 --><input type="hidden" name="abc" value="123"><br><!-- 文本域 -->其他：<textarea name="other" cols="30" rows="3"></textarea><br><!-- 下拉框 -->籍贯：<select name="place"><option value="黔">贵州</option><option value="云">云南</option><option value="川">四川</option><option value="粤">广东</option></select><br><!-- 确认（button和submit两种）与重置 --><input type="submit" value="确认"><!-- <button>确认</button> --><!-- <button type="reset">重置</button> --><input type="reset"><!-- 普通按钮 --><button type="button">检测账户是否被注册</button></form><form action="http://search.jd.com/search"><!-- 表单禁用控件 -->账户：<input disabled type="text" name="account" value="zahngsan" maxlength="10"></form>
</body></html>

7.框架标签iframe

之前的a标签跳转是跳转到新的页面，而使用框架标签可以让跳转的网页在当前页面显示。

具体代码如下：

<!DOCTYPE html>
<html lang="zh-CN"><head><meta charset="UTF-8"><title>框架标签</title>
</head><body><!-- <iframe src="http://www.baidu.com" width="900" height="300" frameboeder="1"></iframe> --><a href="http://www.baidu.com" target="tt">点我看百度</a><a href="http://www.taobao.com" target="tt">点我看淘宝</a><br><iframe name="tt" frameborder="0" width="900" height="300"></iframe>
</body></html>

值得注意的是，有的网页是不能这样跳转的，比如百度不能，淘宝可以。