黑马程序员web前端教程：02-HTML-内容标签笔记(下)

传智播客 前端与移动开发学院前端开发工程师、移动 HTML5 开发工程师、全栈开发培训HTMML5 基础课程—HTML-高级标签传智播客 前端与移动开发学院第1页目录目录 ........................................................................................................ 2 1.1 列表标签.................................................................................... 3 1.2 表格标签 table ........................................................................... 5 1.3 关于表格的合并单元格 .............................................................. 8 1.4 Div 和 span 标签 ......................................................................... 9 1.5 表单标签.................................................................................. 10 1.5.1 Form 标签 ....................................................................... 10 1.5.2 Input 标签 ....................................................................... 10 1.5.3 Select 标签 ..................................................................... 11 1.5.4 文本域标签 ..................................................................... 12 1.5.5 Fieldset 标签 ................................................................... 12 1.5.6 Lable 标签....................................................................... 13 1.5.7 表单总结 ........................................................................ 13 1.6 Iframe 标签............................................................................... 15 1.6.1 Mate 标签的补充 ............................................................. 15 1.7 字符实体.................................................................................. 16传智播客 前端与移动开发学院前端开发工程师、移动 HTML5 开发工程师、全栈开发培训1.1 列表标签表示：传智播客在全国开设分校的顺序列表： ① 北京 ② 上海 ③ 深圳 ④ 广州 ⑤ 郑州 ⑥ 武汉表示：我的个人爱好，无序的列表。

 足球  篮球  乒乓球  学习<!-- 无 序 列 表 --> <ul> <li><span> 北 京 </span><a href="#"> 你 好 </a></li> <li> 上 海 </li> <li> 成 都 </li>传智播客 前端与移动开发学院第3页<li> 武 汉 </li> </ul><!-- 有 序 列 表 order liss 已 经 拍 下 的 列 表 --> <ol> <li> 北 京 </li> <li> 上 海 </li> <li> 成 都 </li> <li> 武 汉 </li> </ol>传智播客 前端与移动开发学院前端开发工程师、移动 HTML5 开发工程师、全栈开发培训自定义列表 <dt> 关 于 我 们 </dt> <dd> 传 智 简 介 </dd> <dd> 联 系 方 式 </dd> <dd> 诚 聘 英 才 </dd> <dd> 人 才 服 务 </dd>1.2 表格标签 table快捷键： ctrl+{ 进行左缩进， ctrl+} 进行右缩进传智播客 前端与移动开发学院第5页<table border="1"> <tr> <td> 基 本 参 数 </td><td>1.4t 帕 萨 特 </td><td>1.8t 帕 萨 特 </td> </tr><tr> <td> 基 本 参 数 </td><td>1.4t 帕 萨 特 </td><td>1.8t 帕 萨 特 </td> </tr>传智播客 前端与移动开发学院前端开发工程师、移动 HTML5 开发工程师、全栈开发培训</table><table border="1"> <thead> <tr> <th> 姓 名 </th><th> 年 龄 </th><th> 成 绩 </th> </tr> </thead> <tbody> <tr> <td> 传 智 播 客 </td><td>14</td><td> 已 经 培 养 10 几 万 人 的 it 人 才 </td> </tr> <tr> <td> 黑 马 程 序 员 </td><td>6</td><td> 几 万 人 的 it 人 才 </td> </tr> </tbody> </table> < ！ - 表 格 头 部 --->传智播客 前端与移动开发学院第7页1.3 关于表格的合并单元格Rowspan 行方向上合并单元格 Column 列方向合并单元格 <table border="1"> <thead> <tr> <th> 姓 名 </th><th> 年 龄 </th><th> 成 绩 </th> </tr> </thead> <tbody> <tr> <!-- rowspan ： 一 个 单 元 格 占 用 两 行 进 行 显 示 --> <td rowspan="2"> 传 智 播 客 </td><!-<td>14</td> --><!-- colspan=2 将 一 行 中 的 一 个 单 元 格 占 用 两个列进行显示。

-->传智播客 前端与移动开发学院前端开发工程师、移动 HTML5 开发工程师、全栈开发培训<td colspan="2"> 已 经 培 养 10 几 万 人 的 it 人 才 </td> </tr> <tr> <!-- <td> 黑 马 程 序 员 </td> --><td>6</td><td> 几 万 人 的 it 人 才 </td> </tr> </tbody> </table>1.4 Div 和 span 标签Div 标签: <div></div> Span 标签: <span></span> 块级标签:独占行。

行级标签：可以跟其他的行内标签共用一行。

块：p，div，ul，ol，dl，li，dt，h1-h6 行：span，strong，em，文本相关的标签都是行内标签。

Div 多用于表示文档中的一个块或者是整个结构的小节。

Span 标签，多用于文本的一小节。

传智播客 前端与移动开发学院第9页1.5 表单标签1.5.1 Form 标签 Form 标签，表单的域标签，用于包裹整个表单的内容。

表单就是用户提交数据到后台的一个虚拟单子。

表单一般由 文本框、下拉列表、单选、多选、文本域等组成。

Action 属性，用于指定当前表单 提交的时候指向后台的地址。

1.5.2 Input 标签 Input 标签是文本框、单选、多选、按钮等。

Type 属性不同的取值决定了 input 标签的作用。

文本框：text 密码框：password 单选：radio 多选：checkbox 按钮：button 提交按钮：submit 重置按钮： reset Demo ： <input type="password"> <input type="radio" name="gender">传智播客 前端与移动开发学院前端开发工程师、移动 HTML5 开发工程师、全栈开发培训<input type="text">Input 标签的 checked 属性，属性值只有一个 checked，可以省略属性值，在 单选按钮和多选按钮中表示 此按钮被选中。