【前端基础】1 - 1 HTML 快速入门
§1-1 HTML 快速入门
1-1.1 何为 HTML
HTML, Hyper Text Markup Language，即超文本标记语言，用于创建功能性页面。当前绝大多数网站都使用这种语言编写。此外，我们还会结合使用 CSS 美化 HTML 页面，即现在常见的 HTML5 + CSS3 组合。
HTML 最早由 Tim Berners-Lee, Robert Cailliau 与其他人于 1989 年创立。其名字当中的超文本指的是，文档中含有允许用户跳转到文档中其他地方或其他文档的链接。超文本可以为文字、图片、音视频、动画等。标记就是 HTML 文档中所使用的标签，又称元素。HTML 已迭代了多个不同的版本，当前最新的版本为 HTML 5，也是目前网页中最常用的版本。
HTML 5 提供了一些新元素和一些有趣的新特性，同时也建立了一些新的规则。这些元素、特性和规则，提供了许多新的网页功能，如使用网页实现动态渲染图形、图表、图像和动画，以及不需要安装任何插件直接使用网页播放视频等。
万维网联盟（W3C, World Wide Web Consortium），成立于 1994 年，是 Web 技术领域最权威和最具影响力的国际中立技术标准机构。其发布的 W3C 标准包括：
- 结构化标准语言：HTML, XML
- 表现标准语言：CSS
- 行为标准：DOM、ECMAScript
本文仅能列出常用标签及其常用属性。详情可见 H5 元素周期表。
1-1.2 网页基本骨架与基本标签
在 IntelliJ IDEA 中新建主语言为 HTML 的项目，在项目区域新建目录 hmtls，并在该目录下新建一个 HTML 文件，得到一个最简单的 HTML 文档。我们希望在网页中显示 Hello world!：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
Hello world!
</body>
</html>
可以看到，HTML 文档具有一定结构。其中，像 <head> 和 </head> 这样成对出现的标签分别成为开放标签和闭合标签，中间包裹内容。单独呈现的标签（空元素），如 <hr/> 为自闭合标签，意为使用 / 关闭空元素。
1-1.2.1 基本骨架
上述文档具有一定的结构，说明如下：
<!-- 文档类型：告诉浏览器浏览的文件类型-->
<!-- 可留空，默认为HTML -->
<!DOCTYPE html>
<!-- HTML 文档根标签，所有要显示的元素必须定义在该标签内 -->
<html lang="zh-CN">
<!-- 网页头部 -->
<head>
<!-- 元数据，用于提供网页的描述信息-->
<!-- 若要显示中文网页，必须手动设置字符编码为 UTF-8 -->
<meta charset="UTF-8">
<!-- 该标签还可用于搜索引擎优化-->
<meta name="keywords" content="Zebt, HTML, 第一个网页">
<meta name="description" content="这是我的第一个网页">
<title>我的第一个网页嘞</title>
</head>
<!-- 网页主体：浏览器实际渲染的部分 -->
<body>
Hello world!
</body>
</html>
1-1.2.2 基本标签
下面就以一个 HTML 文档快速入门基本标签：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>基本标签</title>
</head>
<body>
<!-- 标题 -->
<h1>一级标签</h1>
<h2>二级标签</h2>
<h3>三级标签</h3>
<h4>四级标签</h4>
<h5>五级标签</h5>
<h6>六级标签</h6>
<!-- 水平分割线 -->
<hr/>
<!-- 段落标签 -->
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快。</p>
<p>一只没有耳朵，一只没有尾巴，</p>
<p>真奇怪，真奇怪。</p>
<hr/>
<!-- 换行标签：隶属同一段落，更紧凑 -->
两只老虎，两只老虎，<br/>
跑得快，跑得快。<br/>
一直没有耳朵，一直没有尾巴，<br/>
真奇怪，真奇怪。<br/>
<hr/>
<!-- 字体样式标签 -->
<p>
粗体：<b>b 是粗体标签。</b> <br/>
粗体：<strong>strong 也是粗体标签（推荐）。</strong> <br/>
</p>
<p>
斜体：<i>i 是斜体标签。</i> <br/>
斜体：<em>em 也是斜体标签（推荐）。</em> <br/>
</p>
<p>
删除线：<s>s 是删除线标签。</s> <br/>
删除线：<del>del 也是删除线标签（推荐）。</del> <br/>
</p>
<p>
下划线：<u>u 是下划线标签。</u> <br/>
</p>
<p>
斜体与下划线组合使用：<em> <u>伪装成一个链接。</u> </em> <br/>
粗体与删除线组合使用：<strong> <del> 我被划掉了。 </del> </strong>
</p>
<hr/>
<!-- 特殊字符转义：必要时灵活使用搜索引擎查找 -->
空格：长长的空 格 <br/>
大于小于符号：> < <br/>
版权符号：© <br/>
商标符号：™ <br/>
注册符号：® <br/>
<hr/>
</body>
</html>
预览效果：
一级标签
二级标签
三级标签
四级标签
五级标签
六级标签
两只老虎，两只老虎，
跑得快，跑得快。
一只没有耳朵，一只没有尾巴，
真奇怪，真奇怪。
两只老虎，两只老虎，
跑得快，跑得快。
一直没有耳朵，一直没有尾巴，
真奇怪，真奇怪。
粗体：b 是粗体标签。
粗体：strong 也是粗体标签（推荐）。
斜体：i 是斜体标签。
斜体：em 也是斜体标签（推荐）。
删除线：s 是删除线标签。
删除线：del 也是删除线标签（推荐）。
下划线：u 是下划线标签。
斜体与下划线组合使用： 伪装成一个链接。
粗体与删除线组合使用： 我被划掉了。
空格：长长的空 格
大于小于符号：> <
版权符号：©
商标符号：™
注册符号：®
其中，像 p, h1, h2, h3, h4, h5, h6 这样的标签，其中内容无论多少，该元素独占一行，称为块元素。
像 a, strong, em 等标签，内容撑开宽度，左右都是行内元素的可以排在一行，称为行内元素（内联元素）。
内联元素可以被包含于块元素中，但块级元素不能被包含于内联元素中。
此外，还有行内块的元素等级。元素的等级可以通过 CSS 的 display 修改。
1-1.3 图像标签
图像标签的格式：
<img src="" alt="" title="" width="" height="">
<!--
img：图像标签
src（必填）：图片地址，可填相对地址（推荐）或绝对地址（不推荐）。其中相对地址使用 ../ 表示上一级
alt（可选）：图片加载失败时的替代文字
title（可选）：鼠标悬停文字
width（可选）、height（可选）：图片宽高
以及其它信息...
-->
示例：
<img src="源地址" alt="替代文字" title="悬停文字" width="128" height="128"> <br/>
1-1.4 超链接标签
一个普通超链接标签的格式：
<!--
a 普通超链接
href（必填）：超链接地址
target：链接在哪里打开
_blank：新标签页打开
_self：当前标签页打开（默认）
_parent：
-->
<a href="我的第一个网页.html" target="_self">点击我跳转到我的第一个网页</a> <br/>
<a href="https://www.bing.com" target="_blank">点击我跳转到必应</a> <br/>
锚链接：跳转到页面指定位置
<!--
锚链接
使用 id 属性
-->
<a id="top"></a>
<!-- 调用锚链接 -->
<a href="#top">回到顶部</a>
<a href="超链接标签.html#top"></a>
功能性链接：
<!-- 功能性链接 -->
<a href="mailto:somebody@example.org">邮箱</a>
1-1.5 列表标签
有序列表：
<ol>
<li>C/C++</li>
<li>Java</li>
<li>Python</li>
<li>Linux</li>
</ol>
预览：
- C/C++
- Java
- Python
- Linux
无序列表：
<ul>
<li>C/C++</li>
<li>Java</li>
<li>Python</li>
<li>Linux</li>
</ul>
预览：
- C/C++
- Java
- Python
- Linux
<!--
dl 自定义描述性列表
dt 列表标题
dd 列表内容
-->
<dl>
<dt>语言</dt>
<dd>C/C++</dd>
<dd>Java</dd>
<dd>C#</dd>
<dd>Python</dd>
<dt>学科</dt>
<dd>C语言程序设计</dd>
<dd>面向对象程序设计</dd>
<dd>数据结构与算法</dd>
<dd>数字逻辑与计算机组成原理</dd>
<dd>操作系统</dd>
<dd>计算机网络</dd>
<dd>数据库</dd>
<dd>人工智能原理</dd>
</dl>
预览：
- 语言
- C/C++
- Java
- C#
- Python
- 学科
- C语言程序设计
- 面向对象程序设计
- 数据结构与算法
- 数字逻辑与计算机组成原理
- 操作系统
- 计算机网络
- 数据库
- 人工智能原理
1-1.6 表格标签
格式：
<!--
table 引入表格
caption 标题
tr 行
rd 列
colspan 跨列
rowspan 跨行
-->
<table>
<!-- 表格标题 -->
<caption>学生成绩表</caption>
<!-- 表格头 -->
<thead>
<!-- 表格行 -->
<tr>
<!-- 行中标题，scope 指定关联的单元格（row/col/rowgroup/colgroup） -->
<th scope="col">姓名</th>
<th scope="col">科目</th>
<th scope="col">得分</th>
</tr>
</thead>
<!-- 表格体 -->
<tbody>
<!-- 表格行 -->
<tr>
<!-- rowspan 跨行 -->
<th scope="rowgroup" rowspan="2">张三</th>
<!-- 数据单元格 -->
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
<!-- 表格行 -->
<tr>
<th scope="rowgroup" rowspan="2">李四</th>
<td>语文</td>
<td>100</td>
</tr>
<tr>
<td>数学</td>
<td>100</td>
</tr>
</tbody>
<!-- 表格尾 -->
<tfoot>
<tr>
<!-- colspan 跨列 -->
<th scope="col" colspan="2">班级均分</th>
<td>100</td>
</tr>
</tfoot>
</table>
预览：
| 姓名 | 科目 | 得分 |
|---|---|---|
| 张三 | 语文 | 100 |
| 数学 | 100 | |
| 李四 | 语文 | 100 |
| 数学 | 100 | |
| 班级均分 | 100 | |
1-1.7 媒体元素
视频元素：
<video src="源地址" controls autoplay></video>
音频元素：
<audio src="源地址" controls autoplay></audio>
其中，controls 开启控件（暂停/继续、进度条、全屏等），autoplay 开启自动播放（不推荐，可能破坏体验）。
1-1.8 页面结构
一个 HTML 页面往往具有以下结构：
| 元素名 | 说明 |
|---|---|
header |
标题头部区域内容，用于页面或页面中的一块区域 |
footer |
标记脚部区域内容，用于整个页面或页面的一块区域 |
section |
Web 页面中一块独立的区域 |
article |
独立的文章内容 |
aside |
相关内容或应用（常用于侧边栏） |
nav |
导航类辅助内容 |
1-1.9 iframe 内联框架
可以使用内联框架在同一页面中加载多个不同源的页面。
格式：
<iframe src="网页资源地址" frameborder="框架边框（弃用，使用 CSS 美化）"
width="宽度" height="高度"
title="边框标题" name="边框名称">
</iframe>
其中，属性 name 可以与超链接 a 联动：
<a href="https://www.baidu.com" target="边框名称"></a>
这样就可以在指定框架内加载指定链接。
1-1.10 提交表单
提交表单是一种常见的操作，常发生在用户登录填写用户名和密码时。
格式：
<!--
action：表达所提交的位置
method：提交方法
get（默认，表单参数包含在URL中），高效但不安全，无法传输大文件
post（使用request body发送数据），安全，可以传输大文件
dialog（form 位于 dialog 标签中生效，关闭对话框
autocomplete：浏览器是否自动补全，值为 off 或 on
-->
<form action="提交位置" method="post" autocomplete="on">
<!-- 使用其他标签作为表单填写的内容 -->
</form>
使用 post 的发送方式时，可在浏览器开发人员工具 -> 网络中监听提交数据时的网络波动。这时就可以发现所发送的请求，查看该请求的负荷，就能够看到请求当中所包含的表单数据。通常使用一些加密技术防止表单数据以明文形式发送。
表单中应当含有用户可填写/选择的内容。这部分内容有文本框、文本域、按钮、图片按钮（提交）、提交按钮、重置按钮、电话、邮箱、URL、单选框、复选框、滑块、数字、下拉菜单。
填写的内容最终以键值对的数据形式发送到服务端。键值对的键名由标签的 name 属性定义。
1-1.10.1 input 输入标签
其中，除了下拉菜单和文本域外，剩余的类型都定义在 input 标签中，由其属性 type 指定输入类型。
<!--
input 的 type 属性值有：
text：文本。该类型输入支持属性 value 定义默认初值，maxlength 定义最大字符串长度，minlength 定义最小字符串长度，size 定义文本框长度，placeholder 定义占位符。
password：密码。该类型输入同样支持 text 型的属性。
tel：电话。
url：URL。
email：邮箱。
date：日期。使用属性 value 定义初值，min 最早日期，max 最晚日期，step 步长。
datetime-local：日期与时间。支持同 date 属性。
time：时间。支持同 date 属性。
month：年月。支持同 date 属性。
hidden：隐藏。但其包含的数据仍然会被发送。
search：搜索框。
number：数字。具有属性 min 定义最小值，max 定义最大值，step 定义步长。
range：滑块。同样支持 number 所具有的属性。
radio：单选框。同一组单选框应当具有相同的 name 属性值，每一个单选选项都需要 value 定义值，checked 属性表示已勾选
checkbox：复选框。同一组复选框应当具有相同的 name 属性值，每一个选项都需要 value 定义值，checked 属性表示已勾选
file：选择文件。
button：按钮。属性 value 定义按钮显示文本。
submit：提交。使用指定的 method 和 action 提交数据。
reset：重置。充值上述表单数据为初始状态。
image：图片按钮。点击触发提交动作。
-->
<input type="类型"/>
<!-- 使用 label 标签包围 input 可帮助用户使用鼠标单击标签选中输入框。 -->
<!-- id 必须唯一 -->
<label for="username">用户名：</label>
<input type="text" name="username" id="username" placeholder="用户名" maxlength="20" required/>
<label>
密码：
<input type="password" name="pwd" placeholder="密码" minlength="8" maxlength="16" required/>
</label>
1-1.10.2 select 下拉菜单
使用 select 设置下拉菜单：
<!--
select 的属性值：
name：下拉列表名称。
下拉选项由 option 子标签定义。标签文本内容为所显示的选项名称。
value：选项的值
selected：已选中
-->
<label for="pet-select">Choose a pet:</label>
<select name="pets" id="pet-select">
<option value="">--Please choose an option--</option>
<option value="dog">Dog</option>
<option value="cat">Cat</option>
<option value="hamster">Hamster</option>
<option value="parrot">Parrot</option>
<option value="spider">Spider</option>
<option value="goldfish">Goldfish</option>
</select>
1-1.10.3 textarea 文本域
文本域：
<!--
可使用同 text 的属性。
cols：定义文本框列数。
rows：定义文本框行数。
-->
<label>
<strong>Feedback:</strong>
<textarea name="feedback" placeholder="Please write us your feedback." cols="30" rows="10"></textarea>
</label>
1-1.10.4 表单初级验证
我们可以使用一些属性在前端对数据提前做一些简单的初级验证。这样做可以尽可能地减少服务器的运行压力。
可使用标签 required 指定必填项，disabled 禁用指定项，readonly 设定只读项，使用 pattern 结合正则表达式匹配数据。
不同的输入类型也可以通过属性对数据的内容做简单的限制和验证。
