共计 6910 个字符，预计需要花费 18 分钟才能阅读完成。
HTML 语法
一、HTML网页文件基本结构
1.HTML标签
1.HTML 标签是由 尖括号包围的关键词 例：<html>
2.HTML 标签通常成对出现，例： <html></html>，称为 双标签。第一个标签为开始标签，第二个为结束标签。
3.有些特殊标签是单个标签，例：<br /> 称为 单标签。
2.标签关系
双标签关系分为两类：包含关系 和 并列关系。
包含关系
<head>
<title></title>
</head>并列关系
<head></head>
<body></body>二、HTML基本结构标签
1.HTML网页
每个网页都会有一个基本的结构标签（骨架标签），页面内容也是在这个基本标签上书写。
<html>
<head>
<title>这是一个页面</title>
</head>
<body>
Hello HTML
</body>
</html>| 标签名 | 定义 | 说明 |
|---|---|---|
<html></html> |
HTML标签 | 页面中最大的标签，称为 根标签 |
<head></head> |
文档的头部 | 在<head>标签中必须设置<title>标签 |
<title></title> |
文档的标题 | 让页面拥有一个网页标题 |
<body></body> |
文档的主题 | 元素包含文档的所有内容，页面内容基本都放在<body> 里 |
三、网页开发工具
1.VSCode 工具生成骨架标签新增代码
在 vscode 中在第一行输入 ！ 后可以快捷显示所需骨架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOCUMENT</title>
</head>
<body>
</body>
</html><!DOCTYPE>标签 <!DOCTYPE html>告知浏览器使用的是HTML5版本来显示网页(必须写在第一行)是一个文档类型声明标签，不属于html- lang 语言种类 <html lang=”zh-CN”>
</html>用来定义当前文档显示的语言：- en 定义语言为英语
- zh-CN 定义语言为中文定义任何语言都 不造成影响，只作为警示和其他作用（例如谷歌浏览器的翻译）
- charset 字符集 <head>
<meta charset=”UTF-8″>
</head>字符集（Character set) 是多个字符的集合，以便计算机识别和存储各种文字。在<head>标签内，可以通过<meat>标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码。常用值：GB2312(简中)、BIG5（繁中）、GBK（简/繁中） 和 UTF-8(万国码)。
四、HTML 中的注释和特殊字符
1.注释
HTML 中的注释以 “<!–” 开头，以 “–>” 结束。
<!-- 注释语句 --> 快捷键：ctrl + /2.特殊字符
在 HTML 页面中，一些特殊符号很难或不方便直接使用，此时可以使用特殊字符替代。
| 特殊字符 | 描述 | 字符代码 |
|---|---|---|
| 空格 | |
|
| < | 小于号 | < |
| > | 大于号 | > |
| & | 和号 | & |
| ¥ | 人民币 | ¥ |
| © | 版权 | © |
| ® | 注册商标 | ® |
| ℃ | 摄氏度 | ° |
| ± | 正负号 | ± |
| × | 乘号 | × |
| ÷ | 除号 | ÷ |
| ² | 平方 | ² |
| ³ | 立方 | ³ |
五、HTML 常用标签
1.标签语义
即标签的含义，根据标签语义，在合适的地方添加合理的标签，可以让页面画面结构更清晰。
2.标题标签 <h1> – <h6>
<h1> 这是一级标题 </h1>标签语义：作为标题使用，并且依据重要性递减。
特点：
1.加了标题的文字会加粗并变大。
2.一个标题 独占 一行
3.段落和换行标签
<p> 这是一个段落 </p>在 HTML 标签中， <p> 标签用于定义段落，他可以将整个网页分为若干个段落。
特点 ：
1.文本在一个段落中会根据浏览器窗口的大小自动换行。
2.段落和段落之间保有空隙。
这是一个换行标签<br />在 HTML 中，一个段落的文字会从左到右排列，直到浏览器窗口的右端，然后才自动换行，若希望在某段文本强制
换行显示，就需要使用换行标签 <br />
特点 ：
1.<br /> 是一个 单标签。
2.区别于段落，换行不会有垂直间距。
4.文本格式化标签
有时需要将文字设置 粗体 、 斜体、和 下划线 等效果，这时就需要用到 HTML 中的文本格式化标签，使文字以特殊的方式显示。
| 语义 | 标签 |
|---|---|
| 加粗 | <strong></strong> 或者 <b></b> |
| 倾斜 | <em></em> 或者 <i></i> / 重点记加粗和倾斜 / |
| 删除线 | <del></del> 或者 <s></s> |
| 下划线 | <ins></ins> 或者 <u></u> / 都建议记忆第一列 / |
5.<div> 和 <span> 标签
<div> 这是头部 </div>
<span> 这是价格 </span>这两个标签都没有语义，就是一块区域用于装内容（布局）（例如图片和文字）。
div 为 division 缩写，意为分割、分区，span 意为跨度。
特点 :
1.<div> 一行只能放一个 <div> 区域较大，类似换行（横向区分）。
2.<span> 一行可以放多个，区域较小，类似空格（纵向区分）。
6.图像标签和路径
图像标签（单标签）
<img src="图像URL" />在 HTML 标签中，<img> 标签用于定义 HTML 页面中的图像。
其中 src 是 <img> 标签的 必须属性 ，它用于 指定图像文件的路径和文件名。
| 属性 | 属性值 | 说明 |
|---|---|---|
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本。图像显示不出来时，替换的文字 |
| title | 文本 | 提示文本。鼠标放到图像上时，显示的文字 |
| width | 像素 | 设置图像的宽度 |
| height | 像素 | 设置图像的高度 |
| border | 像素 | 设置图像的边框粗细 |
图像标签属性注意点 ：
1.图像标签可以拥有多个属性，但必须写在标签名（img）的后面。
2.属性之间不分先后顺序，标签名和属性、属性和属性之间均以空格分开。
3.属性采取键值对的格式，即 key= “value” 的格式，属性 = “属性值”。
路径
1.相对路径
图片相对于 HTML 页面的位置
| 相对路径分类 | 符号 | 说明 |
|---|---|---|
| 同一级路径 | 图像文件位于 HTML 文件同一级，如 <img src="baidu.gif"/> |
|
| 下一级路径 | / | 图像文件位于 HTML 文件下一级， 如 <img src="images/baidu.gif"/> |
| 上一级路径 | ../ | 图像文件位于 HTML 文件上一级， 如 <img src="../baidu.gif"/> |
2.绝对路径
指目录下的绝对路径，直接到达目标位置。
例： “D:\web\img\logo.gif” 或完整的网络地址 “http://www.itcast.cn/images/logo.gif”
7.超链接标签
在 HTML 中， <a> 标签用于定义超链接，作用是从一个页面链接到另一个页面。
链接的语法格式
<a href="跳转目标" target="目标窗口的弹出方式">文本或图像</a>| 属性 | 作用 |
|---|---|
| href | 用于指定链接目标的 url 地址，（必须属性）等为标签应用 href 属性时，它就具有了超链接功能 |
| target | 用于指定链接页面的打开方式，其中 _self 为默认值（当前窗口）， _blank 为在新窗口中打开方式 |
链接的分类
1.外部链接a
例如 <a href="http://www.baidu.com"> 百度</a> 。
2.内部链接
网站内部页面之间的相互链接（同一文件夹），直接链接内部页面名称即可，
例如 <a href="index.html"> 首页</a> 。
3.空链接
如果当时没有确定链接目标时， <a href="#"> 首页</a> 。
4.下载链接
如果 href 里面地址是一个文件或者压缩包，会下载这个文件。
5.网页元素链接
在网页中的各种网页元素，如文本、图像、表格、音频、视频等都可以添加超链接。
6.锚点链接
点击链接，可以快速定位到页面中的某个位置。
- 在链接文本的 href 属性中，设置属性值为 #名字 的形式，如
<a href="#two"> 第二集</a> - 找到目标位置标签，里面添加一个 id 属性 = 刚才的名字，如：
<h3 id="two">第二集介绍</h3>
8.表格标签
表格的主要作用
主要用于显示、展示数据
表格的基本语法
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>1.<table> 是用于定义表格的标签。
2.<tr></tr> 标签用于定义表格中的行，必须嵌套在 <table></table> 标签中。
<tr valign="top" /* 使表格中内容从顶端开始*/| 属性名 | 作用 |
|---|---|
| top | 内容顶端对齐 |
| middle | 内容居中对齐 |
| bottom | 内容底端对齐 |
| baseline | 基线对齐 |
3.<td></td> 用于定义表格中的单元格，必须嵌套在 <tr></tr> 中。
4.字母 td 指表格数据，即数据单元格的内容。
表头单元格标签 <th>
<table>
<tr>
<th>姓名</th>
...
</tr>
...
</table>一般表头单元格位于表格的第一行或第一列，表头单元格里面的文本内容会加粗居中显示
表格属性
// 实际开发不常用
| 属性名 | 属性值 | 描述 |
|---|---|---|
| align | left、center、right | 规定表格相对周围元素的对齐方式 |
| border | 1 或 “” | 规定表格单元是否拥有边框，默认为 “” ，表示没有边框 |
| cellpadding | 像素值 | 规定单元边沿与其内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 规定单元格之间的空白，默认2像素 |
| width | 像素值或百分比 | 规定表格的宽度 |
注意：这些属性要写到表格标签 <table> 里面
<table align="center">
</table>表格结构标签
为了更好的表示表格的语义，可以将表格分割成 表格头部 和 表格主题 两大部分。
1.<thead></thead> :用于定义表格的头部，内部必须拥有 <tr> 标签，一般是位于第一行。
2.<tbody></tbody> :用于定义表格的主体，主要用于放数据本体。
3.以上标签都是放在 <table></table> 标签中。
合并单元格
特殊情况下，可以将多个单元格合并为一个单元格
1.合并单元格的方式
- 跨行合并： rowspan=“合并单元格的个数” //目标为上侧的单元格(上跨下)
- 跨列合并： colspan=“合并单元格的个数” //目标为左侧的单元格(左跨右)
注意：记得删除多余的(被合并的)单元格。
9.列表标签
列表特点为整齐、整洁、有序，一般用于布局
无序列表
<ul>
<li>列表项</li>
<li>列表项</li>
<li>列表项</li>
...
</ul><ul> 标签表示 HTML 页面中项目的无序列表，而列表项用 <li> 标签定义
1.无序列表的各个列表项之间是并列的。
2.<ul></ul> 中只能嵌套 <li></li> 。
3.<li></li> 之间相当于一个容器，可以容纳所有的元素。
4.无序列表会带有自己的样式属性，在后面会用 CSS 来设置。
有序列表
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
...
</ol><ol> 标签用于定义有序列表，列表排序以数字俩显示，且使用 <li> 标签定义列表项
特点与无序列表类似
自定义列表
<dl>
<dt>名词1</dt>
<dd>名词1解释1</dd>
<dd>名词1解释2</dd>
...
</dl><dl> 标签用于定义描述列表，该标签会与 <dt> (定义项目/名字)和 <dd> (描述每一个项目/名字)一起使用
1.<dl></dl> 里面只能包含 <dt> 和 <dd>。
2.<dt> 和 <dd> 个数没有限制，经常是一个 <dt> 对应多个 <dd> 。
10.表单标签
在 HTML 中，一个完整的表单通常由 表单域、表单控件（也称为表单元素）和 提示信息 3个部分构成
表单域
<form action="url地址" method="提交方式" name="表单域名称">
各种表单元素控件
</form>表单域 是一个 包含表单元素的区域
在 HTML 标签中， <form> 标签用于定义表单域，以实现用户信息的收集和传递。
<form> 会把它范围内的表单元素信息提交给服务器
常用属性：
| 属性 | 属性值 | 作用 |
|---|---|---|
| action | url 地址 | 用于指定接收并处理表单数据的服务器程序的 url 地址 |
| method | get/post | 用于设置表单数据的提交方式，其取值为 get 或 post |
| name | 名称 | 用于指定表单的名称，以区分同一个页面中的多个表单域 |
表单控件
1. <input> 表单元素
<input type="属性值" /><input> 标签用于收集用户信息，在 <input> 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有很多种形式（文本字段、复选框、掩码后的文本控件、单选按钮等）
<input> 标签为 单标签
type属性：
| 属性值 | 描述 |
|---|---|
| button | 定义可点击按钮（多数下，用于通过 JavaScript 启动脚本） |
| checkbox | 定义复选框 |
| file | 定义输入字段和“浏览”按钮，供文件上传 |
| hidden | 定义隐藏的输入字段 |
| image | 定义图像形式的提交按钮 |
| password | 定义密码字段，该字段中的字符被掩码 |
| radio | 定义单选按钮 //要将每一个按钮取相同的 name 值才可实现单选 |
| reset | 定义重置按钮，重置按钮会清除表单中的所有数据 |
| submit | 定义提交按钮，提交按钮会把表单数据发送到服务器 |
| text | 定义单行的输入字段，用户可在其中输入文本，默认宽度为20个字符 |
其他属性：
| 属性 | 属性值 | 描述 |
|---|---|---|
| name | 由用户自定义 | 定义 input 元素的名称 |
| value | 由用户自定义 | 规定 input 元素的值 //为后台考虑 |
| checked | checked | 规定此 input 元素首次加载时应当被选中 |
| maxlength | 正整数 | 规定输入字段中的字符的最大长度 |
1.name 和 value 是每个表单元素都有的属性值，主要给后台人员使用。
2.name 是表单元素的名字，要求 单选按钮和复选框要有相同的 name 值。
3.checked 属性主要针对单选按钮和复选框，主要用于默认勾选某个表单元素。
4.maxlength 是用户可以在表单元素输入的最大字符数，一般较少使用。
总结？：
<!--1.有些表单元素想打开就默认显示几个文字怎么做？-->
用户名：<input type="text" value="请输入用户名" />
<!--2.页面中表单元素很多，如何区别？-->
用户名：<input type="text" value="请输入用户名" name="username" />
<!--name 属性后面的值是自定义的
radio(或者 checked)如果是一组，必须给他们命名相同的名字-->
<input type="radio" name="sex" />男
<input type="radio" name="sex" />女
<!--3.如果页面一打开就让某个单选框或者复选框是选中状态？-->
性别：
<input type="radio" name="sex" value="男" checked="checked" />男
<input type="radio" name="sex" value="女" />女<label> 标签
<label for="sex">男</label>
<input type="radio" name="sex" id="sex" /><label> 标签为 input 元素定义标注标签。
<label> 标签用于绑定一个表单元素，当点击 <label> 标签内的文本时，浏览器会自动将焦点（光标）转到或者选择对应的表单元素上，以此增加用户体验。
注意：<label> 标签的 for 属性应当与相关元素的 id 属性相同。
11.表单控件（表单元素）
<select> 下拉表单元素
<select>
<option value="">选项1</option>
<option>选项2</option>
<option selected="selected">选项3</option>
...=
</select>在页面中，如果有多个选项让用户选择，并且想要节约页面空间，可以使用 <select> 标签控件定义 下拉列表
1.<select> 中至少包含一对 <option> .
2.在 <option> 中定义 selected=“selected” 时，当前项目为默认选中项。
3.value 为发送到服务器的值
<textarea> 文本域元素
<textarea rows="3" cols="20">
文本内容
</textarea>当用户输入内容较多的情况下，可以使用 <textarea> 标签。
在表单元素中，<textarea> 标签是用于定义多行文本输入的控件。
使用多行文本输入控件，可以输入更多的文字，常用于留言板、评论。
1.cols=“每行中的字符数” rows=“显示的行数” //实际开发中一般用 CSS 来改变大小
