1、HTML 语法规范
（1）基本语法概述
- HTML 标签是由尖括号包围的关键词，例如
<html>。 - HTML 标签通常是成对出现的，例如
<html>和</html>，我们称为双标签。标签对中的第一个标签是开始标签，第二个标签是结束标签。 - 有些特殊的标签必须是单个标签（极少情况），例如
<br />，我们称为单标签。
（2）标签关系
双标签关系可以分为两类：包含关系和并列关系。
🌲包含关系 :
<head> <title> </title> </head> • 1 • 2 • 3
🌲并列关系:
<head> </head> <body> </body> • 1 • 2
2、HTML 基本结构标签
每个网页都会有一个基本的结构标签（也称为骨架标签），页面内容也是在这些基本标签上书写。HTML页面也称为 HTML 文档。
<html> <head> <title>标题</title> </head> <body> 主体······ </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8
| 标签名 | 定义 | 说明 |
<html></html> |
HTML标签 | 页面中最大的标签，我们称为根标签 |
<head></head> |
文档的头部 | 注意在head标签中我们必须要设置的标签是title |
<titile></title> |
文档的标题 | 让页面拥有一个属于自己的网页标题 |
<body></body> |
文档的主体 | 元素包含文档的所有内容，页面内容基本都是放到body里面的 |
HTML 文档的的后缀名必须是 .html 或 .htm ，浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。
3、 网页开发工具
推荐使用VSCode
（1）使用方法
- 双击打开软件。
- 新建文件（Ctrl + N ）。
- 保存（Ctrl + S ）, 注意移动要保存为 .html 文件
- Ctrl + 加号键 ，Ctrl + 减号键 可以放大缩小视图
- 生成页面骨架结构。输入! 按下 Tab 键。
- 利用插件在浏览器中预览页面：单击鼠标右键，在弹出窗口中点击“Open In Default Browser”。
（2）VSCode 工具生成骨架标签新增代码
1、 <!DOCTYPE> 标签
<!DOCTYPE html>文档类型声明标签,告诉浏览器这个页面采取html5版本来显示页面.
2、 lang 语言
<html lang=“en”>告诉浏览器或者搜索引擎这是一个英文网站. 本页面采取英文来显示.
3、charset 字符集
<meta charset=“ UTF-8” />必须写. 采取 UTF-8来保存文字. 如果不写就会乱码.具体原理后面分析- charset 常用的值有：
GB2312、BIG5、GBK和UTF-8，其中 UTF-8 也被称为万国码，基本包含了全世界所有国家需要用到的字符. 注意：上面语法是必须要写的代码，否则可能引起乱码的情况。一般情况下，统一使用UTF-8编码，尽量统一写成标准的UTF-8，不要写成utf8或UTF8。
（3）关于VScode 实用插件
插件在扩展中搜索（快捷键：Ctrl+Shift+X）
- 中文语言包（Chinese）
此插件对英语看起来比较头疼的小伙伴非常友好，推荐使用，当然你也可以换成英文，熟悉熟悉也就OK啦。按Ctrl+Shift+P然后输入configure language就可以随意转换啦！ - HTML Snippets（代码提示）:HTML代码片段，该插件可为你提供html标签的代码提示，不用键入尖括号了
- Auto Rename Tag（自动闭合标签）
- Vetur（官方钦定Vue插件）:VScode官方钦定Vue插件，Vue开发者必备。内含语法高亮，智能提示，emmet，错误提示，格式化，自动补全，debugger等实用功能
- JavaScript (ES6) code snippets（智能提示与快速输入）
- Beautify(美化代码）
- Markdown All in One（书写Markdown）:可以在vscode里面快乐的书写Markdown，功能强大。丰富的快捷键，边写边看，轻松转化为html或pdf文件
4、 HTML 常用标签
（1） 标签语义
学习标签是有技巧的，重点是记住每个标签的语义。简单理解就是指标签的含义，即这个标签是用来干嘛的。
根据标签的语义，在合适的地方给一个最为合理的标签，可以让页面结构更清晰。
（2） 标题标签 <h1> - <h6>（重要）
为了使网页更具有语义化，我们经常会在页面中用到标题标签。HTML 提供了 6 个等级的网页标题， 即<h1> - <h6> 。
🌲如：
<h1> 一级标题 </h1> • 1
🌲特点：
- 加了标题的文字会变的加粗，字号也会依次变大。
- 一个标题独占一行。
🌲示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <h1>标题标签</h1> <h1>标题一共六级选,</h1> <h2>文字加粗一行显。</h2> <h3>由大到小依次减，</h3> <h4>从重到轻随之变。</h4> <h5>语法规范书写后，</h5> <h6>具体效果刷新见。</h6> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15 • 16 • 17 • 18 • 19
（3） 段落和换行标签（重要）
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在 HTML 标签中，<p>标签用于定义段
落，它可以将整个网页分为若干个段落。
🌲如：
<p> 一个段落标签 </p> • 1
p是单词 paragraph 的缩写，意为段落。
🌲特点：
- 文本在一个段落中会根据浏览器窗口的大小自动换行。
- 段落和段落之间保有空隙。
在 HTML 中，一个段落中的文字会从左到右依次排列，直到浏览器窗口的右端，然后才自动换行。如果希望
某段文本强制换行显示，就需要使用换行标签 <br />。
🌲 如：
<br /> <!--标签语义：强制换行。--> • 1
br为单词 break 的缩写，意为打断、换行。
🌲特点：
1. <br /> 是个单标签。
2. <br /> 标签只是简单地开始新的一行，跟段落不一样，段落之间会插入一些垂直的间距。
🌲示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <p>在中国IT教育行业发展的轨迹中，<br /> 能始终秉承着初心做教育的企业为数不多，而在李开复老师的心中，传智播客就是其中之一。在11年的风雨历程中，传智播客在中国IT教育行业留下了“为莘莘学子改变命运而讲课，为千万学生少走弯路而著书”的独特烙印。同时，传智播客也凭借着良好的口碑、更注重品质的教学及优秀的业绩增长成功吸引了众多知名投资者们的青睐，其中不乏创新工场、经纬、君度、蓝图、北城壹号等多个投资机构。</p> <p>不久前，传智播客新加入了几位知名股东，其中包括创投圈的大咖——创新工场的李开复老师。在中国，李开复老师至少影响了70和80后两代人，然而翻开他的履历，我们并没有看到诸如马云、马化腾那样堪称传奇的成功经历，我们看到的只是一位厚积薄发、深耕在世界IT互联网行业多年的“导师”：</p> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15
（4）文本格式化标签
在网页中，有时需要为文字设置粗体、斜体或下划线等效果，这时就需要用到 HTML 中的文本格式化标签，使
文字以特殊的方式显示。
标签语义: 突出重要性, 比普通文字更重要
| 语义 | 标签 | 说明 |
| 加粗 | <strong></strong>或者<b></b> |
更推荐使用<strong>标签加粗 语义更强烈 |
| 倾斜 | <em></em>或者<i></i> |
更推荐使用<em>标签加粗 语义更强烈 |
| 删除线 | <del></del>或者<s></s> |
更推荐使用<del>标签加粗语义更强烈 |
| 下划线 | <ins></ins>或者<u></u> |
更推荐使用<ins>标签加粗语义更强烈 |
🌲示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>文本格式化标签</title> </head> <body> 我是<strong>加粗</strong>的文字 我是<b>加粗</b>的文字 我是<em>倾斜</em>的文字 我是<i>倾斜</i>的文字 我是<del>删除线</del> 我是<s>删除线</s> 我是<ins>下划线</ins> 我是<u>下划线</u> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15 • 16 • 17 • 18 • 19
（5）<div> 和<span>标签
<div> 和 <span> 是没有语义的，它们就是一个盒子，用来装内容的。
🌲如：
<div> 这是头部 </div> <span> 今日价格 </span> • 1 • 2
div 是 division 的缩写，表示分割、分区。span 意为跨度、跨距。
🌲特点：
<div>标签用来布局，但是现在一行只能放一个<div>。 大盒子<span>标签用来布局，一行上可以多个<span>。小盒子
示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>div和span标签</title> </head> <body> <div>我是一个div标签我一个人单独占一行</div> <div>我是一个div标签我一个人单独占一行</div> <span>百度</span> <span>新浪</span> <span>搜狐</span> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15 • 16
（6）图像标签和路径 (重点）
🍂图像标签
在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。
🌲如：
<img src="图像URL" /> • 1
img为单词 image 的缩写，意为图像。
src 是<img>标签的必须属性，它用于指定图像文件的路径和文件名。
所谓属性：简单理解就是属于这个图像标签的特性。
🌲其他属性：
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像不能显示的文字 |
| title | 文本 | 提示文本。鼠标放到图像上，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
🌲图像标签属性注意点：
① 图像标签可以拥有多个属性，必须写在标签名的后面。
② 属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开。
③ 属性采取键值对的格式，即 key=“value" 的格式，属性 =“属性值”。
路径
目录文件夹和根目录
实际工作中，我们的文件不能随便乱放，否则用起来很难快速的找到他们，因此我们需要一个文件夹来管理他们
- 目录文件夹：就是普通文件夹，里面只不过存放了我们做页面所需要的相关素材，比如 html 文件、图片等。
- 根目录：打开目录文件夹的第一层就是根目录
VSCode打开目录文件夹
文件---- 打开文件夹 . 选择目录文件夹. 后期非常方便管理文件.
路径之相对路径
相对路径：以引用文件所在位置为参考基础，而建立出的目录路径。这里简单来说，图片相对于 HTML 页面的位置
| 相对路径分类 | 符号 | 说明 |
| 同一级路径 | 图像文件位于HTML文件同一级 如<img src="baidu.gif"/> |
|
| 下一级路径 | / | 图像文件位于HTML文件下一级 如<img src="images/baidu.gif"/> |
| 上一级路径 | …/ | 图像文件位于HTML文件上一级 如<img src="./baidu.gif"/> |
相对路径是从代码所在的这个文件出发，去寻找目标文件的，而我们这里所说的上一级 、下一级和同一级就是
图片相对于 HTML 页面的位置。
路径之绝对路径
绝对路径：是指目录下的绝对位置，直接到达目标位置，通常是从盘符开始的路径。
例如，“D:\web\img\logo.gif”或完整的网络地址“http://www.itcast.cn/images/logo.gif”
（7）超链接标签 (重点）
在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。
链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式"> 文本或图像 </a> • 1
🌲两个属性的作用：
| 属性 | 作用 |
| href | 用于指定链接目标的url地址，（必须属性）当为标签应用href属性时，它就具有了超链接的功能 |
| target | 用于指定链接页面的打开方式，其中_self为默认值，_blank为在新窗口中打开方式。 |
链接分类
1.外部链接: 例如 < a href="http:// www.baidu.com "> 百度</a >。
2. 内部链接:网站内部页面之间的相互链接. 直接链接内部页面名称即可，例如 < a href="index.html"> 首页 </a >。
3. 空链接: 如果当时没有确定链接目标时，< a href=“#”> 首页 。
4. 下载链接: 如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5. 网页元素链接: 在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接.
6. 锚点链接: 点我们点击链接,可以快速定位到页面中的某个位置.
- 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如
<a href="#two">第2集</a> - 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字 ，如：
<h3 id="two">第2集介绍</h3>
🌲示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>超链接标签</title> </head> <body> <h4>1.外部链接</h4> <a href="http://www.qq.com" target="_blank"> 腾讯</a> target 打开窗口的方式 默认的值是 _self 当前窗口打开页面 _blank 新窗口打开页面 <a href="http://www.itcast.cn" target="_blank">传智播客</a> <h4>2.内部链接: 网站内部页面之间的相互链接</h4> <a href="gongsijianjie.html" target="_blank">公司简介</a> <h4>3.空链接:#</h4> <a href="#">公司地址</a> <h4>4.下载链接: 地址链接的是 文件 .exe 或者是 zip 等压缩包形式</h4> <a href="img.zip">下载文件</a> <h4>5.网页元素的链接</h4> <a href="http://www.baidu.com"><img src="img.jpg"/></a> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15 • 16 • 17 • 18 • 19 • 20 • 21 • 22 • 23
5、HTML 中的注释和特殊字符
（1）注释
如果需要在 HTML 文档中添加一些便于阅读和理解但又不需要显示在页面中的注释文字，就需要使用注释标签。
HTML中的注释以“<!--”开头，以“ -->”结束。
<!-- 注释语句 --> 快捷键: ctrl + / • 1
（2）特殊字符
在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，此时我们就可以使用下面的字符来替代。
| 名称 | 代码 |
| 空格 |   ; |
| 大于号 | < ; |
| 小于号 | > ; |
| 和号& | & ; |
| 人民币¥ | ¥ ; |
| 版权©️ | © ; |
| 注册商标®️ | ® ; |
| 摄氏度o | ° ; |
| 正负号 | ± ; |
| 乘号✖️ | × ; |
| 除号➗ | ÷ ; |
| 平方（上标2） | ² ; |
| 立方（上标3） | ³ ; |
🌲示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <!-- 我想喝手磨咖啡 --> 讲 究 <!-- <p> 是一个段落标签 --> < p > 是一个段落标签 </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15
6、 表格标签
（1）表格的主要作用
表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。
（2） 表格的基本语法
<table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> • 1 • 2 • 3 • 4 • 5 • 6 • 7
🌲具体释义：
<table> </table>是用于定义表格的标签。<tr> </tr>标签用于定义表格中的行，必须嵌套在<table> </table>标签中。<td> </td>用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。- 字母 td 指表格数据（table data），即数据单元格的内容。
🌲具体示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <table> <tr><td>姓名</td> <td>性别</td> <td> 年龄 </td></tr> <tr><td>刘德华</td> <td>男</td> <td> 56 </td></tr> <tr><td>张学友</td> <td>男</td> <td> 58 </td></tr> <tr><td>郭富城</td> <td>男</td> <td> 51 </td></tr> <tr><td>黎明</td> <td>男</td> <td> 57 </td></tr> </table> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15 • 16 • 17 • 18
（3）表头单元格标签
🌲 表头标签的具体实现：
<table> <tr> <th>姓名</th> ... </tr> ... </table> • 1 • 2 • 3 • 4 • 5 • 6 • 7
🌲具体示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表格属性</title> </head> <body> <!-- 这些属性要写到表格标签table 里面去 --> <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="249"> <tr><th>姓名</th> <th>性别</th> <th> 年龄 </th></tr> <tr><td>刘德华</td> <td>男</td> <td> 56 </td></tr> <tr><td>张学友</td> <td>男</td> <td> 58 </td></tr> <tr><td>郭富城</td> <td>男</td> <td> 51 </td></tr> <tr><td>黎明</td> <td>男</td> <td> 57 </td></tr> </table> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15 • 16 • 17 • 18 • 19
- 一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容加粗居中显示，
<th>** 标签表示 HTML 表格的表头部分(table head 的缩写)**
（4）表格属性
表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置。
| 属性名 | 属性值 | 描述 |
| align | left、center、 right | 规定表格相对周围元素的对齐方式。 |
| border | 1或"" | 规定表格单元是否拥有边框，默认为”"，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素。 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素。 |
| width | 像素值或百分比 | 规定表格的宽度。 |
案例： 小说排行榜
思路：
- 先制作表格的结构.
- 第一行里面是 th 表头单元格
- 第二行开始里面是 td 普通单元格单元格，里面可以放任何元素
- 单元格里面可以放任何元素，文字链接图片等都可以
- 后书写表格属性
- cellpadding 和 cellspacing
- 表格浏览器中对齐 align
🌲代码：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>今日小说排行榜</title> </head> <body> <table align="center" width="500" height="249" border="1" cellspacing="0"> <thead> <tr> <th>排名</th> <th>关键词</th> <th>趋势</th> <th>进入搜索</th> <th>最近七日</th> <th>相关链接</th> </tr> </thead> <tbody> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>3</td> <td>西游记</td> <td><img src="up.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> <tr> <td>1</td> <td>鬼吹灯</td> <td><img src="down.jpg"></td> <td>456</td> <td>123</td> <td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td> </tr> </tbody> </table> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15 • 16 • 17 • 18 • 19 • 20 • 21 • 22 • 23 • 24 • 25 • 26 • 27 • 28 • 29 • 30 • 31 • 32 • 33 • 34 • 35 • 36 • 37 • 38 • 39 • 40 • 41 • 42 • 43 • 44 • 45 • 46 • 47 • 48 • 49 • 50 • 51 • 52 • 53 • 54 • 55 • 56 • 57 • 58 • 59 • 60 • 61 • 62 • 63 • 64 • 65 • 66 • 67 • 68 • 69 • 70 • 71 • 72 • 73 • 74
（5）表格结构标签
🌲使用场景：因为表格可能很长,为了更好的表示表格的语义，可以将表格分割成 表格头部和表格主体两大部分.
在表格标签中，分别用：<thead>标签表格的头部区域、<tbody>标签表格的主体区域. 这样可以更好的分清表格结构。
🌲总结:
1. <thead></thead>：用于定义表格的头部。<thead> 内部必须拥有 <tr> 标签。 一般是位于第一行。
2. <tbody></tbody>：用于定义表格的主体，主要用于放数据本体 。
3. 以上标签都是放在 <table></table> 标签中。
（6）合并单元格：
特殊情况下,可以把多个单元格合并为一个单元格
- 合并单元格方式
- 跨行合并：rowspan=“合并单元格的个数”
- 跨列合并：colspan=“合并单元格的个数”
- 目标单元格
- 跨行：最上侧单元格为目标单元格, 写合并代码。
- 跨列：最左侧单元格为目标单元格, 写合并代码。
- 合并单元格的步骤
- 先确定是跨行还是跨列合并。
- 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：
<td colspan=“2”></td>。 - 删除多余的单元格。
🌲示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>合并单元格</title> </head> <body> <table width="500" height="249" border="1" cellspacing="0"> <tr> <td></td> <td colspan="2"></td> </tr> <tr> <td rowspan="2"></td> <td></td> <td></td> </tr> <tr> <td></td> <td></td> </tr> </table> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15 • 16 • 17 • 18 • 19 • 20 • 21 • 22 • 23 • 24 • 25 • 26 • 27 • 28 • 29
7、列表标签
- 表格是用来显示数据的，那么列表就是用来
布局的。 - 列表最大的特点就是
整齐、整洁、有序，它作为布局会更加自由和方便。 - 根据使用情景不同，列表可以分为三大类：
无序列表、有序列表和自定义列表。
（1）无序列表
<ul> 标签表示 HTML 页面中项目的无序列表，一般会以项目符号呈现列表项，而列表项使用 <li> 标签定义。
无序列表的基本语法格式如下：
<ul> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ul> • 1 • 2 • 3 • 4 • 5 • 6
- 无序列表的各个列表项之间没有顺序级别之分，是并列的。
<ul></ul>中只能嵌套<li></li>，直接在<ul></ul>标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器，可以容纳所有元素。- 无序列表会带有自己的样式属性，但在实际使用时，我们会使用 CSS 来设置。
🌲示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>无序列表</title> </head> <body> <h4>您喜欢的食物?</h4> <ul> <li>榴莲</li> <li>臭豆腐</li> <li>鲱鱼罐头</li> <li> <p>123</p> </li> </ul> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15 • 16 • 17 • 18 • 19 • 20
（2）有序列表
有序列表即为有排列顺序的列表，其各个列表项会按照一定的顺序排列定义。在 HTML 标签中，<ol> 标签用于定义有序列表，列表排序以数字来显示，并且使用 <li> 标签来定义列表项。
🌲有序列表的基本语法格式如下：
<ol> <li>列表项1</li> <li>列表项2</li> <li>列表项3</li> ... </ol> • 1 • 2 • 3 • 4 • 5 • 6
<ol></ol>中只能嵌套<li></li>，直接在<ol></ol>标签中输入其他标签或者文字的做法是不被允许的。<li>与</li>之间相当于一个容器，可以容纳所有元素。- 有序列表会带有自己样式属性，但在实际使用时，我们会使用 CSS 来设置。
🌲示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>有序列表</title> </head> <body> <h4>粉丝排行榜</h4> <ol> <li>刘德华 10000</li> <li>刘若英 1000</li> </ol> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15 • 16
（3）自定义列表
自定义列表的使用场景:自定义列表常用于对术语或名词进行解释和描述，定义列表的列表项前没有任何项目符号。在 HTML 标签中，<dl> 标签用于定义描述列表（或定义列表），该标签会与 <dt>（定义项目/名字）和 <dd>（描述每一个项目/名字）一起使用。
🌲语法如下：
<dl> <dt>名词1</dt> <dd>名词1解释1</dd> <dd>名词1解释2</dd> </dl> • 1 • 2 • 3 • 4 • 5
1. <dl></dl> 里面只能包含 <dt> 和 <dd>。
2. <dt> 和 <dd>个数没有限制，经常是一个<dt> 对应多个<dd>。
🌲示例:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>自定义列表</title> </head> <body> <dl> <dt>关注我们</dt> <dd>新浪微博</dd> <dd>官方微信</dd> <dd>联系我们</dd> <dt>关注我们</dt> <dd>新浪微博</dd> <dd>官方微信</dd> <dd>联系我们</dd> </dl> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15 • 16 • 17 • 18 • 19 • 20 • 21
（4）列表总结
8、表单标签
🌲网页表单：
（1）为什么需要表单
- 使用表单目的是为了收集用户信息。
- 在我们网页中， 我们也需要跟用户进行交互，收集用户资料，此时就需要表单。
（2）表单的组成
在 HTML 中，一个完整的表单通常由表单域、表单控件（也称为表单元素）和 提示信息3个部分构成。
（3）表单域
表单域是一个包含表单元素的区域。
在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。 <form> 会把它范围内的表单元素信息提交给服务器。
🌲 实现代码：
<form action=“url地址” method=“提交方式” name=“表单域名称">各种表单元素控件 </form> • 1 • 2
常用属性：
记住两点:
- 在我们写表单元素之前,应该有个表单域把他们进行包含.
- 表单域是 form标签.
🌲示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>表单域</title> </head> <body> <form action="demo.php" method="POST" name="name1"> </form> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14
（4）表单控件(表单元素)
<input>表单元素
- 在英文单词中，input 是输入的意思，而在表单元素中
<input>标签用于收集用户信息。在<input>标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（可以是文本字段、复选框、掩码后的文本控件、单选按钮、按钮等）。
<input type="属性值" /> • 1
<input />标签为单标签.- type 属性设置不同的属性值用来指定不同的控件类型.
🌲type 属性的属性值及其描述如下：
🌲除 type 属性外，<input>标签还有其他很多属性，其常用属性如下：
- name 和value 是每个表单元素都有的属性值,主要给后台人员使用.
- name 表单元素的名字, 要求 单选按钮和复选框要有相同的name值.
- checked属性主要针对于单选按钮和复选框, 主要作用一打开页面,就要可以默认选中某个表单元素.
- maxlength 是用户可以在表单元素输入的最大字符数, 一般较少使用.
🌲示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>input 表单元素</title> </head> <body> <form action="xxx.php" method="get"> <!-- text 文本框 用户可以里面输入任何文字 --> 用户名: <input type="text" name="username" value="请输入用户名" maxlength="6"> <br> <!-- password 密码框 用户看不见输入的密码 --> 密码: <input type="password" name="pwd" > <br> <!-- radio 单选按钮 可以实现多选一 --> <!-- name 是表单元素名字 这里性别单选按钮必须有相同的名字name 才可以实现多选1 --> <!-- 单选按钮和复选框可以设置checked 属性, 当页面打开的时候就可以默认选中这个按钮 --> 性别: 男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女" checked="checked"> 人妖 <input type="radio" name="sex" value="人妖"> <br> <!-- checkbox 复选框 可以实现多选 --> 爱好: 吃饭 <input type="checkbox" name="hobby" value="吃饭"> 睡觉 <input type="checkbox" name="hobby"> 打豆豆 <input type="checkbox" name="hobby" checked="checked"> <br> <!-- 点击了提交按钮,可以把 表单域 form 里面的表单元素 里面的值 提交给后台服务器 --> <input type="submit" value="免费注册"> <!-- 重置按钮可以还原表单元素初始的默认状态 --> <input type="reset" value="重新填写"> <!-- 普通按钮 button 后期结合js 搭配使用--> <input type="button" value="获取短信验证码"> <br> <!-- 文件域 使用场景 上传文件使用的 --> 上传头像: <input type="file" > </form> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15 • 16 • 17 • 18 • 19 • 20 • 21 • 22 • 23 • 24 • 25 • 26 • 27 • 28 • 29 • 30 • 31 • 32
<label>标签
<label>标签为 input 元素定义标注（标签）。<label>标签用于绑定一个表单元素, 当点击<label>标签内的文本时，浏览器就会自动将焦点(光标)转到或者选择对应的表单元素上,用来增加用户体验.
🌲语法：
<label for="sex">男</label> <input type="radio" name="sex" id="sex" /> • 1 • 2
核心： 标签的 for 属性应当与相关元素的 id 属性相同。
🌲示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>label标签</title> </head> <body> <label for="text"> 用户名:</label> <input type="text" id="text" > <input type="radio" id="nan" name="sex"> <label for="nan">男</label> <input type="radio" id="nv" name="sex"> <label for="nv">女</label> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14
<select>表单元素
- 使用场景: 在页面中，如果有多个选项让用户选择，并且想要节约页面空间时，我们可以使用
<select>标签控件定义下拉列表。
🌲语法：
<select> <option>选项1</option> <option>选项2</option> <option>选项3</option> ... </select> • 1 • 2 • 3 • 4 • 5 • 6
<select>中至少包含一对<option>。- 在
<option>中定义 selected =“ selected " 时，当前项即为默认选中项。
🌲示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>select下拉表单</title> </head> <body> <form> 籍贯: <select> <option>山东</option> <option>北京</option> <option>天津</option> <option selected="selected">火星</option> </select> </form> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15 • 16 • 17 • 18 • 19 • 20
<textarea> 表单元素
- 使用场景: 当用户输入内容较多的情况下，我们就不能使用文本框表单了，此时我们可以使用
<textarea>标签。 - 在表单元素中，
<textarea>标签是用于定义多行文本输入的控件。 - 使用多行文本输入控件，可以输入更多的文字，该控件常见于留言板，评论。
🌲语法：
<textarea rows="3" cols="20"> 文本内容 </textarea> • 1 • 2 • 3
通过 <textarea> 标签可以轻松地创建多行文本输入框。cols=“每行中的字符数” ，rows=“显示的行数”
我们在实际开发中不会使用，都是用 CSS 来改变大小。
🌲示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>textarea 文本域</title> </head> <body> <form> 今日反馈: <textarea cols="50" rows="5">pink老师,我知道这个反馈留言是textarea来做的 </textarea> </form> </body> </html> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8 • 9 • 10 • 11 • 12 • 13 • 14 • 15
（5）总结
1、表单元素我们学习了三大组 input 输入表单元素select 下拉表单元素textarea 文本域表单元素.
2、这三组表单元素都应该包含在form表单域里面,并且有 name 属性.
🌲具体代码：
<form> <input type=“text " name=“username”> <select name=“jiguan”> <option>北京</option> </select> <textarea name= "message"> </textarea> </form> • 1 • 2 • 3 • 4 • 5 • 6 • 7 • 8
3、有三个名字非常相似的标签:
- 表单域 form 使用场景: 提交区域内表单元素给后台服务器
- 文件域 file 是input type 属性值 使用场景: 上传文件
- 文本域 textarea 使用场景: 可以输入多行文字, 比如留言板 网站介绍等…
9、综合案例：注册页面
🌲使用所学内容作出下边页面：
🌲示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>综合案例-注册页面</title> </head> <body> <h4>青春不常在，抓紧谈恋爱</h4> <table width="600" > <!-- 第一行 --> <tr> <td>性别:</td> <td> <input type="radio" name="sex" id="nan"> <label for="nan"> <img src="images/man.jpg" > 男 </label> <input type="radio" name="sex" id="nv"> <label for="nv"><img src="images/women.jpg" > 女</label> </td> </tr> <!-- 第二行 --> <tr> <td>生日:</td> <td> <select> <option>--请选择年份--</option> <option>2001</option> <option>2002</option> <option>2003</option> </select> <select> <option>--请选择月份--</option> <option>1</option> <option>2</option> <option>3</option> </select> <select> <option>--请选择日--</option> <option>1</option> <option>2</option> <option>3</option> </select> </td> </tr> <!-- 第三行 --> <tr> <td>所在地区</td> <td><input type="text" value="北京思密达"></td> </tr> <!-- 第四行 --> <tr> <td>婚姻状况:</td> <td> <input type="radio" name="marry" checked="checked">未婚 <input type="radio" name="marry"> 已婚 <input type="radio" name="marry"> 离婚 </td> </tr> <!-- 第五行 --> <tr> <td>学历:</td> <td><input type="text" value="博士后"></td> </tr> <!-- 第六行 --> <tr> <td>喜欢的类型:</td> <td> <input type="checkbox" name="love" > 妩媚的 <input type="checkbox" name="love" > 可爱的 <input type="checkbox" name="love" > 小鲜肉 <input type="checkbox" name="love" > 老腊肉 <input type="checkbox" name="love" checked="checked"> 都喜欢 </td> </tr> <!-- 第七行 --> <tr> <td>个人介绍</td> <td> <textarea>个人简介</textarea> </td> </tr> <!-- 第八行 --> <tr> <td></td> <td> <input type="submit" value="免费注册" > </td> </tr> <tr> <td></td> <td> <input type="checkbox" checked="checked"> 我同意注册条款和会员加入标准 </td> </tr> <tr> <td></td> <td> <a href="#" > 我是会员，立即登录</a> </td> </tr> <tr> <td></td> <td> <h5>我承诺</h5> <ul> <li>年满18岁、单身</li> <li>抱着严肃的态度</li> <li>真诚寻找另一半</li> </ul> </td> </tr> </table> </body> </html>
