1.什么是HTML
HTML 语言用于描述网页。
- HTML 是指超文本标记语言: Hyper Text Markup Language
- HTML 不是一种编程语言，而是一种标记语言，标记语言是一套标记标签
- HTML 使用标记标签来描述网页
- HTML 文档包含了 HTML 标签及文本内容
- HTML 文档也叫做 web 页面
HTML实例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>页面标题</title>
</head>
<body>
<h1>一个标题</h1>
<p>一个段落。</p>
</body>
</html>
<!DOCTYPE html>声明为HTML5文档，<!DOCTYPE>是标准通用标记语言的文档类型声明，有助于在浏览器中正确地显示网页<html>元素是 HTML 页面的根元素<head>元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。<title>元素描述了文档的标题<body>元素包含了可见的页面内容
2.HTML基础
1.HTML标题
标题（Heading）是通过<h1>-<h6>标签进行定义的。<h1>定义最大的标题。<h6>定义最小的标题。
实例:
<h1>1号标题</h1>
<h2>2号标题</h2>
<h3>3号标题</h3>
<h4>4号标题</h4>
<h5>5号标题</h5>
<h6>6号标题</h6>
效果展示:
2.HTML段落
HTML 可以将文档分割为若干段落，段落是通过<p>标签定义的
实例：
<p>这是一个段落 </p>
<p>另一个段落</p>
不产生一个新段落的情况下进行换行，使用<br />
实例：
<p>啊啊啊啊啊啊<br/>啊啊啊啊啊啊<br/>演示分行的效果</p>
效果展示：
3.HTML文本格式化
| 标题 | 描述 | 标题 | 描述 |
|---|---|---|---|
<b /> | 定义粗体文本 | <sub> | 定义下标 |
<em> | 定义着重文字 | <sup> | 定义上标 |
<i> | 定义斜体 | <ins> | 定义插入字 |
<small> | 定义小号字 | <del> | 定义删除字 |
<strong> | 定义加重 |
实例：
<b>加粗文本</b><br />
<em>着重文字<em/><br />
<i>斜体文本</i><br />
<small>小号字</small><br />
<strong>加重字</strong><br />
<sub> 下标</sub> 和 <sup> 上标</sup><br />
<ins>插入字</ins><br />
<del>删除字</del>
效果展示：
4.HTML链接
HTML使用标签<a>来设置超文本链接，在标签<a>中使用了href属性来描述链接的地址。链接文本不必一定是文本，图片或其他 HTML 元素都可以成为链接。
实例：
<a href="https://www.baidu.com/">访问百度</a>
默认情况下，链接将以以下形式出现在浏览器中：
- 一个未访问过的链接显示为蓝色字体并带有下划线。
- 访问过的链接显示为紫色并带有下划线。
- 点击链接时，链接显示为红色并带有下划线。
5.HTML头部
1.<head>元素
<head>元素包含了所有的头部标签元素。在<head>元素中你可以插入脚本（script）, 样式文件（CSS），及各种meta信息。
可以添加在头部区域的元素标签为:<title>,<style>,<meta>,<link>,<script>，<noscript>和<base>。
2.<title>元素
<title>标签定义了不同文档的标题。在HTML/XHTML文档中是必需的。
- 定义了浏览器工具栏的标题
- 当网页添加到收藏夹时，显示在收藏夹中的标题
- 显示在搜索引擎结果页面的标题
3.<base>元素
<base>标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接
4.<link>元素
<link>标签定义了文档与外部资源之间的关系。通常用于链接到样式表
5.<style>元素
<style>标签定义了HTML文档的样式文件引用地址.在<style>元素中你也可以直接添加样式来渲染 HTML 文档
6.<meta>元素
<meta>标签描述了一些基本的元数据。元数据也显示在页面上，但会被浏览器解析。
META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。
<meta>一般放置于<head>区域
7.<script>元素
<script>标签用于加载脚本文件
6.HTML图像
图像由<img>标签定义
定义图像的语法是：
<img src="url" alt="xxx">
alt属性用来为图像定义一串预备的可替换的文本，在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息
height与width属性用于设置图像的高度与宽度
<img src="url" alt="xxx" width="100" height="50">
7.HTML表格
表格由<table>标签来定义。每个表格均有若干行<tr>，每行被分割为若干单元格<td>
实例：
<table>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
效果展示：
如果不定义边框属性，表格将不显示边框。使用边框属性来显示一个带有边框的表格：
<table border="1">
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
效果展示：
单元格边距用cellpadding属性设置
<table border="1" cellpadding="10">
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
效果展示：
单元格间距用cellspacing属性设置
<table border="1" cellspacing="10">
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
效果展示：
表格的表头使用<th>标签进行定义
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
效果展示：
表格的标题使用<caption>标签进行定义
<table border="1">
<caption>标题</caption>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>aaa</td>
<td>bbb</td>
<td>ccc</td>
</tr>
</table>
效果展示：
跨行或跨列的单元格，rowspan设置跨行的单元格数，colspan设置跨列的单元格数。
<p>单元格跨列</p>
<table border="1">
<tr>
<th>aaa</th>
<th colspan="2">bbb</th>
</tr>
<tr>
<td>111</td>
<td>222</td>
<td>333</td>
</tr>
</table>
<p>单元格跨行</p>
<table border="1">
<tr>
<th>aaa</th>
<td>111</td>
</tr>
<tr>
<th rowspan="2">bbb</th>
<td>222</td>
</tr>
<tr>
<td>333</td>
</tr>
</table>
效果展示：
8.HTML列表
1.无序列表使用粗体圆点进行标记
<ul>
<li>苹果</li>
<li>梨</li>
<li>香蕉</li>
</ul>
效果展示：
2.有序列表默认使用数字进行标记
<ol>
<li>苹果</li>
<li>梨</li>
<li>香蕉</li>
</ol>
效果展示：
要更换列表列表标记，在<ol>标签中添加type属性：
- 大写字母列表
<ol type="A"> - 小写字母列表
<ol type="a"> - 大写罗马数字列表
<ol type="I"> - 小写罗马字母列表
<ol type="i">
3.自定义列表自定义列表以<dl>标签开始，每个自定义列表项为<dt>，每个自定义列表项的定义为<dd>
<dl>
<dt>苹果</dt>
<dd>-红色</dd>
<dt>梨</dt>
<dd>-黄色</dd>
</dl>
效果展示：
4.嵌套列表
<ul>
<li>蔬菜</li>
<li>水果
<ul>
<li>红色</li>
<li>黄色
<ul>
<li>梨</li>
<li>香蕉</li>
</ul>
</li>
</ul>
</li>
<li>零食</li>
</ul>
效果展示：
9.HTML表单
用于收集用户的输入信息，包含交互控件，将用户收集到的信息发送到Web服务器。表单元素是允许用户在表单中输入内容，比如：文本域textarea、下拉列表select、单选框radio、复选框checkbox等等。
多数情况下被用到的表单标签是输入标签 <input>，输入类型是由 type 属性定义：
<form>
<input type="text" name="aaa"> //文本域
<input type="password" name="pwd"> //密码
<input type="radio" name="sex" value="male">男
<input type="radio" name="sex" value="female">女 //单选
<input type="checkbox" name="vehicle" value="aaa">xxxx
<input type="checkbox" name="vehicle" value="bbb">yyyy //复选框
<form>
<input type="submit"> 定义了提交按钮，当用户单击确认按钮时，表单的内容会被传送到服务器。表单的动作属性 action 定义了服务端的文件名
<form action="xxx" method="get">
Username: <input type="text" name="user">
<input type="submit" value="Submit">
</form>
点击提交按钮，输入数据会传送到 xxx 文件，该页面将显示出输入的结果。method 属性，用于定义表单数据的提交方式：
- get：默认值，指的是 HTTP GET 方法，表单数据会附加在 action 属性的 URL 中，并以
?作为分隔符，一般用于不敏感信息，如分页等。 - post：指的是 HTTP POST 方法，表单数据会包含在表单体内然后发送给服务器，用于提交敏感数据，如用户名与密码等。
HTML 表单标签
| 标签 | 描述 |
|---|---|
<form> | 定义供用户输入的表单 |
<input> | 定义输入域 |
<textarea> | 定义文本域 |
<label> | 定义了<input>元素的标签，一般为输入标题 |
<fieldset> | 定义了一组相关的表单元素，并使用外框包含起来 |
<legend> | 定义了<fieldset>元素的标题 |
<select> | 定义了下拉选项列表 |
<optgroup> | 定义选项组 |
<option> | 定义下拉列表中的选项 |
<button> | 定义一个点击按钮 |
<datalist> | 指定一个预先定义的输入控件选项列表 |
<output> | 定义一个计算结果 |
<textarea> 包含以下属性：
| 属性 | 值 | 描述 |
|---|---|---|
| cols | number | 规定文本区域宽度 |
| rows | number | 规定文本区域行数 |
| autofocus | autofocus | 页面加载时自动获得焦点 |
| disabled | disabled | 禁用文本区域 |
| name | text | 定义文本区域名称 |
| placeholder | text | 规定一个提示用于描述区域期望输入值 |
| form | form_id | 定义文本区域所属的一个或多个表单 |
| maxlength | number | 文本区域允许的最大字符数 |
| readonly | readonly | 规定文本区域为只读 |
| required | required | 规定文本域是必填的 |
| wrap | hard/soft | 当提交表单时文本域中的文本该怎么换行 |
<label> 标签为鼠标用户改进了可用性，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上，标签的 for 属性应当与相关元素的 id 属性相同。
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" value="male">
<label for="female">Female</label>
<input type="radio" name="sex" id="female" value="female">
</form>
<select> 标签包含以下属性：
| 属性 | 值 | 描述 |
|---|---|---|
| multiple | multiple | 属性为true时可多选 |
| size | number | 规定下拉列表可见选项数目 |
<optgroup> 用法如下：
<select>
<optgroup label="fruit">
<option value="1">apple</option>
<option value="2">banana</option>
</optgroup>
<optgroup label="vegetable">
<option value="3">carrot</option>
<option value="4">tomato</option>
</optgroup>
</select>
效果如下：
10.HTML框架
iframe语法:
height 和 width 属性用来定义iframe标签的高度与宽度，frameborder 属性用于定义iframe表示是否显示边框，设置属性值为 "0" 移除iframe的边框:
<iframe src="URL" width="x" height="xx" frameborder="0"></iframe>
iframe 可以显示一个目标链接的页面，目标链接的属性必须使用 iframe 的属性
<iframe name="iframe_a"></iframe>
<p><a href="https://juejin.cn" target="iframe_a">掘金</a></p>
点击前后效果展示：
