HTML 定义 HTML 指的是超文本标记语言（Hyper Text Markup Language），它是用来描述网页的一种语言。
Web 标准 主要包括结构（Structure）、表现（Presentation）和行为（Behavior）三个方面
- 结构：用于对网页元素进行整理和分类，HTML
- 表现：表现用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS
- 行为：行为是只网页模型的定义及交互的编写，主要指 Javascript
-
HTML 标签是由尖括号包围的关键词：例如
<html> -
HTML 标签通常是成对出现的，例如：
<html></html>，，我们称为双标签，第一个标签是开始标签，第二个标签是结束标签。 -
有些特殊的标签是单标签，例如
<br />
双标签关系可以分为两类：包含关系和并列关系
包含关系：
<head>
<title></title>
</head>
并列关系：
<head></head>
<body></body>
每一个网页都会有一个基本结构标签（也成为骨架标签），页面内容也是在这些基本标签上书写的，HTML页面又称为HTML文档。
HTML 基本结构：
<html>
<head>
<title>HTML基本结构</title>
</head>
<body>
网页内容
</body>
</html>
-
<html></html>HTML 标签，页面中最大的标签，我们称为根标签 -
<head></head>文档的头部，注意在 head 标签中我们必须要设置的标签是 title -
<title></title>文档的标题，让页面拥有一个属于自己网页的标题 -
<body></body>文档的主体，元素包含文档的所有内容，页面内容，基本都放在body里边的。
HTML 框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
</body>
</html>
<!DOCTYPE> 文档类型声明标签，告诉浏览器使用哪种 HTML 版本来显示网页
<!DOCTYPE html> // 使用最新版本的 HTML 来显示网页
必须写在最前边，处于 html 标签之前，它不是一个 HTML 标签，它只是一个文档类型声明标签
html 标签中可以加入 lang 语言种类
<html lang="en"> // 当前文档的显示语言，对搜索引擎有影响，但对文档内部无影响
<html lang="zh-CN"> // 当前页面主体为中文
字符集
在 head 标签中，可以通过 <meta> 标签的 charset 属性来规定 HTML 文档应该使用哪种字符编码
<meta charset="UTF-8"> // 以 UTF-8 字符集显示网页内容
charset 常用值有：GB2312（简单中文)、BIG5(繁体中文）、GBK（简体繁体全部中文字符）、和 UTF-8（国际通用字符集）
! // 使用叹号一键直接生成框架
<h1>我是一级标签</h1>
标题标签一共分为6个等级，重要度依次递减
在网页中，要把文字有条理地显示出来，就需要将这些文字分段显示。在HTML标签中，段落标签用于定义段落，一个文本内容定义一个段落，可以将整个网页分为若干个段落。
<p>我是一段文字</p>
<p>我是第二段文字</p>
如果希望某段文本强制换行，或者需要空行，需要使用 <br /> 标签。
<br />
<br />是一个单标签，与<p>标签的区别是，段落标签之间会插入一些垂直间距
网页中，有时候需要设置文字为粗体、斜体、下划线等效果，这时候需要用HTML中的文本格式化标签，使文字以特殊的方式显示。
<b>粗体</b>
<i>斜体</i>
<u>下划线</u>
<s>删除线</s>
<sub>下标记</sub>
<sup>上标记</sup>
带有语义的标签：
- strong - 粗体
- em - 斜体
- ins - 下划线
- del - 删除线
用法和普通标签一样，推荐使用，语义更加强烈，并且可以用CSS控制
没有任何语义，是一个容器标签
<div>这是一个盒子</div>
<span>这是一段文字</span>
div 标签独占一行（大盒子），span标签一行可显示多个元素（小盒子）
<img src="img.jpg" alt="图片描述" title="图标标题" width="500" height="500" border="15">
图像标签其他属性
src // 图片路径
alt // 文本（替换文本，当图像不能显示的时候，显示该文字）
title // 文本（提示文本，当鼠标放在图片上，显示的文字）
width // 图像的宽度
height // 图像的高度
border // 图像边框的粗细
一般只做 width 或者 height 其中一个，另一个会等比例压缩
路径
// 相对路径
<img src="logo.png" /> // 同级路径
<img src="./img/logo.png" /> // 同级路径
<img src="img/logo.png" /> // 下级路径
<img src="../img/logo.png" /> // 上级路径
// 绝对路径
<img src="http://www.baidu.com/logo.png" />
C:/appserv/www/images/logo.gif
/usr/local/apache/htdocs/www/logo.png
在 HTML 标签中，<a> 标签用于定义超链接，作用是从一个页面链接到另一个页面
<a href="跳转目标" target="目标的弹出方式">文本或图像</a>
target 参数：
_self 为默认值，在本页面打开新窗口
_blank 在新窗口打开
常用链接写法：
<a href="http://www.forece.net" target="_blank"></a> // 外部链接
<a href="index.html"><img src="logo.png" /></a> // 图片链接
<a href="admin/1.html"></a> // 内部链接
<a href="#"></a> // 空链接
锚点链接：
// 回到顶部
<a href="#top">回到顶部</a>
// 使用 id 设置锚点
<a href="#tag">第一课</a>
<h3 id="tag">第一课</h3>邮件链接：
<a href="mailto:xxx@xxx.com?subject=主题&内容&cc=抄送@xxx.com>给我留言</a>
在 HTML 中，标签和一些字符会被浏览器解析转义，并且空格也不会被解析。可以使用 pre 标签，将代码中的内容原原本本的还原出来，
<p>左 右</p>
<pre>左 右</pre><!-- 这是一段注释 -->
在 HTML 页面中，一些特殊的符号很难或者不方便直接使用，可以用HTML实体来替换
| 显示结果 | 描述 | 实体名称 | 实体编号 |
|---|---|---|---|
| 空格 | |||
| < | 小于号 | < | < |
| > | 大于号 | > | > |
| & | 和号 | & | & |
| " | 引号 | " | " |
| ' | 撇号 | ' (IE不支持) | ' |
| ￠ | 分 | ¢ | ¢ |
| £ | 镑 | £ | £ |
| ¥ | 日圆 | ¥ | ¥ |
| € | 欧元 | € | € |
| § | 小节 | § | § |
| © | 版权 | © | © |
| ® | 注册商标 | ® | ® |
| ™ | 商标 | ™ | ™ |
| × | 乘号 | × | × |
| ÷ | 除号 | ÷ | ÷ |
HTML中的表格一般是用来显示数据的，最好不要用表格走框架布局
<table>
<tr>
<td>单元格内文字</td>
</tr>
</table>
<table></table>是用于定义表格的标签<tr></tr>标签用于定义表格中的行，必须签到在 table 标签中<td></td>标签用于定义表格中的单元格，必须签到在 tr 标签中<caption></caption>表格标题标签
VSCODE 中可以快捷创建表格
table>tr*5>td*3（快速创建一个5行3列的表格）如果只生成td表格，用 td*3 即可
表头单元格 <th></th>
和 td 标签类似都是表格中的单元格，一般写在第一行 tr 标签中，用来当做表头
<table>
<tr><th>表头1</th><th>表头2</th></tr>
<tr><td>普通单元格1</td><td>普通单元格2</td></tr>
</table>
标签属性一般不常用，基本都是使用 CSS 来设置
align // 水平对齐方式（left, center, right），可以在 table, tr, td 中使用。对包含元素全部生效
valign // 垂直对齐方式（top, middle, bottom），table 没有该属性
border // 规定表格单元是否拥有边框（1 或者 ""），默认没有边框， td 没有 border 属性
bordercolor // 表格颜色
cellpadding // 规定单元边缘与内容之间的空白，默认1像素
cellspacing // 规定单元格之间的空白，默认2像素
width // 规定表格的宽度（像素值或百分比）
height // 表格的高度
例：
<table align="center", border="1", cellpading="20", cellspacing="0", width="500", height="250">
<thead></thead> // 表格头部区域
<tbody></tbody> // 表格主体区域
<table>
<!-- 表格头部区域 -->
<thead>
<tr>
<th>表头</th>
<th>表头</th>
</tr>
</thead>
<!-- 表格主体区域 -->
<tbody>
<tr>
<td>单元格</td>
<td>单元格</td>
</tr>
</tbody>
</table>
rowspan="合并单元格的个数" // 跨行合并（上下行合并），在上边的单元格添加属性
colspan="合并单元格的个数" // 跨列合并（左右列合并），在左侧的单元格添加属性
记得删除多余的单元格
<table align="center", border="1", cellpading="20", cellspacing="0", width="500", height="250">
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td colspan="2">123</td>
<td>123</td>
</tr>
<tr>
<td>4</td>
<td>4</td>
<td>4</td>
</tr>
<tr>
<td rowspan="2">5</td>
<td>6</td>
<td>7</td>
</tr>
<tr>
<td>8</td>
<td>8</td>
</tr>
</table>
列表标签在 HTML 中是用来布局的，根据使用情景不同，列表可以分为三大类：无序列表、有序列表和自定义列表
<ul> 标签是 HTML 页面中的无序列表，列表项使用 <li> 标签定义，列表项前边以原点显示。
<ul>
<li></li>
<li></li>
<li></li>
</ul>
ul 标签中只能签到 li 标签，不能放其他内容
li 标签中相当于一个容器，可以容纳所有其他元素
可以用 type 属性改变前边标志，如：
<ul type="square">
<li>第一条</li>
</ul>可以使用 disc, circle, squre 几种类型
<ol> 标签在 HTML 中式有序列表，列表排序以数字来显示，列表项用 <li> 标签。
有序列表也可以使用 type 指定显示标志，如：
<ol type="a">
<li>第一条</li>
</ol>类型：
-
1 - 1, 2, 3 默认
-
a - a, b, c
-
A - A, B, C
-
I - I, II, III
-
i - i, ii, iii
start 属性，可以指定序号从第几序号开始（只能是数字），如：
<ol type="1" start="2">
<li>项目</li>
<li>项目</li>
<li>项目</li>
<li>项目</li>
</ol>序号从2开始计数，2,3,4,5
一般用于 Footer，<dl> 标签用于定义描述列表（类似table），<dt> 用来定义项目名称，<dd> 用于列表项。
如小米底部设计：
<dl>
<dt>服务</dt>
<dd>售后</dd>
<dd>联系我们</dd>
</dl>
HTML 中，一个完整的表单通常由表单域、表单控件和提示信息3个部分构成
表单域是一个包含表单元素的区域，在 HTML 标签中，<form> 标签用于定义表单域，form 标签会把范围内的表单元素信息提交给服务器
<form action="url地址" method="提交方式" name="表单域名称">
表单元素控件
</form>
-
url // 表单递交到的网址
-
action // 用于指定接收并处理表单数据的url地址
-
method // 分为 get 和 post，表单数据的提交方式
-
name // 用于指定表单的名称，以区分同一个页面中的多个表单域
在表单域中可以定义各种表单元素，这些表单元素就是允许用户在表单输入或者选择的控件
<input> 表单元素
input 是输入的意思，在表单元素中 input 标签用于收集用户信息。在 input 标签中，包含一个 type 属性，根据不同的 type 属性值，输入字段拥有多种形式（文本框、复选框、单选框、按钮、掩码后的文本控件等）
<input type="属性值">
input 类型：
text 定义单行的输入字段，用户可以在其中输入文本，默认宽度为20个字符
password 定义密码字段，该字段中的字符被掩码
radio 定义单选按钮
checkbox 复选框
file 定义输入字段和“浏览”按钮，供文件上传
hidden 定义隐藏的输入字段
image 定义图像形式的提交按钮
submit 定义提交按钮，提交按钮会把表单数据发送到服务器
button 定义可点击按钮（多数情况下，用于通过js启动脚本）
reset 定义重置按钮，重置按钮会清除表单中的所有数据
<input type="text" name="username" value="文本框默认内容" placeholder="占位">其他属性：
- name
- 提交 GET 或 POST 的字段名
- value
- 文本框默认内容
- placeholder
- 占位符，当输入文字时，占位符消失。
<input type="password">radio 单选框必须 name 一致才可以实现单选效果
<form>
性别：
男 <input type="radio" name="sex" value="0">
女 <input type="radio" name="sex" value="1">
</form>只有加了 value 才可以通过 name 字段将值提交给后台
<form>
<input type="checkbox" name="furniture" id="" value="0">冰箱
<input type="checkbox" name="furniture" id="" value="1">电视
<input type="checkbox" name="furniture" id="" value="2">柜子
<input type="checkbox" name="furniture" id="" value="3">空调
</form>同组复选框，name 值需要统一，value 值用于提交数据
select 下拉表单元素
在页面中，如果有多个选项，可以使用 select 标签控件定义下拉列表
<select name="location" id="location">
<option value="">BJ</option>
<option value="">TJ</option>
<option value="" selected="selected">SH</option>
</select>默认选中可以用 selected 属性
多选分组
<form>
<select name="location">
<optgroup label="省份">
<option value="SD">山东省</option>
<option value="HB">河北省</option>
<option value="JL">吉林省</option>
</optgroup>
<optgroup label="行业">
<option>服务业</option>
<option>制造业</option>
<option>零售业</option>
</optgroup>
</select>
<input type="submit" value="提交">
</form>textarea 文本域标签
当用户输入文字较多的情况下，可以使用 textarea 标签，在表单元素中， textaera 标签是用于定义多行文本输入的控件，textarea 标签没有 value 属性。
<textarea name="" id="" cols="30" rows="10">文字</textarea><input type="file" name="file" id="">提交按钮
将表单中内容通过 GET 方式 或 POST 提交到服务端，提交按钮可以用 input 标签，也可以使用 button 标签，实现的效果是一样的。
<input type="submit">
<button>按钮</button>复位按钮
将表单内容复位，如果有 value 值，则复位为 value 值。
<input type="reset">普通按钮
无效果，一般用于绑定 js 事件实现特殊效果
<input type="button" value="点击按钮">name 定义 input 元素的名称，重要，GET 或 POST 的 key 值
value 定义 input 元素的默认值
checked 默认被选中
maxlength 规定输入字段中字符的最大长度
value 是表单元素的默认值
<form>
用户名： <input type="text" name="username" value="请输入用户名">
</form>
-
name 和 value 是每个表单元素都有的属性值，主要是给后台人员使用
-
name 表单元素的名字，要求单选按钮和复选框要有相同的 name 值
-
checked 属性主要针对于单选按钮和复选框，可以设置默认勾选某个表单元素
<label> 标签为 input 元素定义标注（标签）
label 标签用于绑定一个表单元素，当点击 label 标签内的文本时，浏览器就会自动将焦点转移到或者选择对应的表单元素上，用来增加用户体验
<label for="username">用户名： </label>
<input type="text" name="username" id="username" value="请输入用户名">
需要在 label 加上指定 id，input 标签也同样需要标记对应id
frameset 元素可定义一个框架集。它被用来组织多个窗口（框架）。每个框架存有独立的文档。在其最简单的应用中，frameset 元素仅仅会规定在框架集中存在多少列或多少行。您必须使用 cols 或 rows 属性。
**重要事项：**您不能与 <frameset></frameset> 标签一起使用 <body></body> 标签。如果您需要为不支持框架的浏览器添加一个 <noframes> 标签，请务必将此标签放置在 <body></body> 标签中！
将页面分为几个部分，分别调用不同的页面
- 左右结构用 cols 属性分割
- 上下结构用 rows 属性分割
<html>
<frameset cols="25%,50%,25%">
<frame src="/example/html/frame_a.html">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</html><html>
<frameset rows="25%,75%">
<frame src="/example/html/frame_a.html">
<frameset cols="25%, 75%">
<frame src="/example/html/frame_b.html">
<frame src="/example/html/frame_c.html">
</frameset>
</frameset>
</html><html>
<frameset rows="25%,75%">
<frame src="/example/html/frame_a.html" name="top">
<frameset cols="25%, 75%">
<frame src="/example/html/frame_b.html" name="left">
<frame src="/example/html/frame_c.html" name="right">
</frameset>
</frameset>
</html><a href="power.html" target="right">链接</a>当点击链接后，链接则会在右侧 frame 中打开。
将框架放在一个元素内部，如 div 内部：
<div>
<iframe src="a.html">
</iframe>
</div>头部声明更加简单，如 <!doctype html> ，以及字符集声明 <meta charset="utf-8">
可以省略结束标签
li, dt, dd, p, optgroup, option, tr, td, th
可以完全省略的标签
html, head, body
增加了很多标签，使标签更加有意义。
<header>头部<nav>导航栏<article>文章内容<section>网页中的一块区域<aside>侧边栏<footer>底部
- placeholder 占位显示
- required 必填
- autofocus 自动获取焦点
<form action="">
<input type="text" name="username" autofocus="autofocus" required="required" placeholder="请输入用户名">
<input type="submit">
</form>email 限制邮箱
date 日期
week 星期
month 月
time 时间
color 颜色
range 滑块范围
number 数量
以前网页中嵌入多媒体文件，需要使用 <embed></embed> 标签进行引用：
<embed src="video.mp4" type="">embed 属性：
- autostart = "true/false" 自动播放
- loop = "正整数/true/false" 循环播放
- hidden = "true" 设置多媒体控制面板是否隐藏
在 H5 中有了新的标签：
<audio><video>
<audio src="audio.mp3" controls autoplay></audio>- controls 控制面板
- autoplay 自动播放
- loop 循环播放
兼容性解决方案
<video controls autoplay>
<source src="video1.mkv">
<source src="video1.mp4"
</video>HTML 改变文字颜色和字体，建议用CSS改变任何样式
<font size="2" color="blue">This is some text!</font>
<font face="verdana" color="green">This is some text!</font>
<p style="color:#FF0000";>Red paragraph text</p>
<table bgcolor="red"></table>