标记语言：HTML1. 了解HTML（5） 1.1. 基本概念 HTML，一种用于创建网页结构和内容的标记语言，由一系列

1. 了解HTML（5）

1.1. 基本概念

HTML，一种用于创建网页结构和内容的标记语言，由一系列的标签元素构成网页的骨架，通过一些特性的标签和属性能够在网页上展示一些文本。

HTML5，HTML最新修订的版本，也是我们目前开发过程中使用的一种规范。

一些名词的解释：

标签，使用< >包裹的标签来定义网页中的元素，一般成对出现<p></p>，个别为单标签 <img />
元素，由标签+内容构建的是一个元素。如<p>Hello World!</p>，这是一个段落元素
属性，标签可以携带属性，如<p class=""></p>，class就是p标签的一个属性
文本内容，被标签包裹的文字，如上述的Hello World!
结构，由<html>、<head>、<body>等标签包裹的代码
链接，由<a>标签构成的元素
图像，由<img>标签构成的元素
表格，由<table>标签构成的元素
表单，由<form>标签构成的元素

1.2. html基础结构

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>基础结构</title>
</head>

<body>
    <p>Hello World!</p>
</body>

</html>

这是一个最基本的HTML数据结构，具体的说明如下：

1.2.1. `<!DOCTYPE html>`

这是一段文本声明的代码，表示当前的文档采用的是HTML5标准的格式进行编码的

我们通过HTML4.1 & HTML1.0标准可以看到，仅是在首行代码上有些许差异，为了更好的兼容性的话，我们还是尽量使用最新版本的，既HTML5

HTML4.0 & HTML1.0声明方式（仅作为了解）

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>页面标题</title>
</head>

<body>
    <!-- 这里是网页的内容 -->
</body>

</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>页面标题</title>
</head>

<body>
    <!-- 这里是网页的内容 -->
</body>

</html>

1.2.2. `<html>...</html>`

html文档的根元素，包含整个网页中的所有元素

1.2.3. `<head>...</head>`

网页的头部内容不会在页面中显示，一般放置网页头部标题、字符编码格式、自适应配置、css样式、js脚本等...

<meta charset="UTF-8">设置文档编码格式

<title>基础结构</title>设置网页的标题，在浏览器的标题栏或者选项卡上显示

1.2.4. `<body>...</body>`

定义HTML文档的主体内容，包括文字、图片、链接、表单等。这部分的内容会在网页上显示出来

2. 常见的标签及元素

「标签」

HTML中用<h1></h1>来表示标签，标签一般包括一个开始标签<h1>，及一个结束标签</h1>。部分标签也可以写成单闭合标签<img />

「元素」

元素是由开始标签、结束标签及内部的元素组成的。可以相互嵌套 <h1>Hello HTML！</h1>

2.1. 标题和段落

<!-- 标题标签 -->
<h1>我是h1标签</h1>
<h2>我是h2标签</h2>
<h3>我是h3标签</h3>
<h4>我是h4标签</h4>
<h5>我是h5标签</h5>
<h6>我是h6标签</h6>

<!-- 段落标签 -->
<div>我是div标签</div>
<p>我是p标签</p>
<span>我是span标签</span>

其中，

h[1~6]、div、p为块级别元素，独占一行，一般用来声明段落；

span标签与下面的文本格式化标签属于内联元素，一般存放文本

除此之外还有以下标签可以作为段落标签：<hr /> & <br />分割线 & 换行

2.2. 文本格式化

<strong>我是strong</strong>
<b>我是b标签</b>

<em>我是em标签</em>
<i>我是i标签</i>

<u>我是u标签</u>

<strong>、<b>两者可以使文本加粗

<em>、<i>两者可以使文本倾斜

<u>给文本添加下划线

2.3. 超链接

<a href="跳转地址" target="在哪里打开，打开的方式" title="鼠标放上的悬停文字"></a>

超链接使用<a></a>标签来实现，一般常用的属性包含：href、target

target包含四个属性：

_blank 新窗口打开URL
_parent 在父窗口打开URL
_self 当前页面跳转
_top 在当前窗体打开并替换当前的整个窗体，也就是原来的页面会整个被替换成新的页面

2.4. 列表

2.4.1. 无序列表

通过<ul>、<li>标签构建无需列表，默认小圆点为序号

<ul>
  <li>无序列表1</li>
  <li>无序列表2</li>
  <li>无序列表3</li>
</ul>

2.4.2. 有序列表

通过<ol>、<li>标签构建无需列表，以阿拉伯数字进行排序，属性 start="20"来设置开始序号

<ol>
  <li>有序列表1</li>
  <li>有序列表2</li>
  <li>有序列表3</li>
</ol>

2.4.3. 自定义列表

除此之外，html也支持自定义列表的方式，但是这种方式一般很少使用，具体使用方式如下：

<dl>
  <dt>自定义列表</dt>
  <dd>+ 自定义列表内容</dd>
  <dt>自定义列表1</dt>
  <dd>- 自定义列表内容1</dd>
</dl>

2.5. 图片

<img src="" alt="">

可以通过 <img>标签创建一个图片元素，常用的属性为

src 图片的地址，可以是一个远程地址，也可以是本地的绝对路径或者相对路径
alt 图片资源无法显示的时候，此处显示的文字内容

2.6. 表格

我们可以通过<table>、<tr>、<th>、<td>标签在网页上构建出来一个表格

「标签」

tr 表示创建一行
th 表示创建表格的标题部分
td 表示创建表格的单元格部分，一个td元素对应一个单元格

「属性」

border="1" 设置表格的边框（不添加此属性，表格默认是无边框的状态）
cellspacing="0" cellpadding="0"（表格边框默认有内外边距，可以使用该属性去除）
rowspan="2" 合并单元格的行（垂直方向）2表示在当前列下合并几行
colspan="2" 合并单元格的列（水平方向）2表示在当前行下合并几列
除了上述的基本属性之外我们也可以给表格添加其他属性，如「width、height」等等...

<table border="1" cellspacing="0" cellpadding="0">
    <tr>
        <th>标题1</th>
        <th>标题2</th>
        <th>标题2</th>
    </tr>
    <tr>
        <td rowspan="2">数据1</td>
        <td>数据2</td>
        <td>数据3</td>
    </tr>
    <tr>
        <td colspan="2">数据6</td>
    </tr>
</table>

2.7. 表单

<form action="提交的地址" method="请求的方式「GET/POST」"></form>

在html中通过上述标签包裹的代码块称之为表单

一个完整的表单应包括以下的元素「非必需都存在」

2.7.1. label标签

<label>标签，用来定义表单字段的标签，一般结合input、select、textarea标签使用

<form>
    <label for="name">name: </label>
</form>

「属性」

for对应绑定的input、select、textarea标签

2.7.2. input标签

用来接收用户键入的数据，包含以下类型

<form>
    <input type="text" name="" id="">			<!-- 文本 -->
    <input type="password" name="" id=""> <!-- 密码输入框 -->
    <input type="radio" name="" id="">		<!-- 单选框 -->
    <input type="checkbox" name="" id="">	<!-- 复选框 -->
    <input type="button" value="">				<!-- 按钮 -->
    <input type="submit" value="">				<!-- 提交 -->
</form>

在HTML5中对input的类型进行了一些增强，具体可以参考「👉 HTML5表单增强」

「属性」

type 输入框接收参数的类型
name 与label中的for相关联
id 唯一标识
value 当前输入框的值

2.7.3. select标签

通过<select>...<option>...标签构建一个下拉选项框，两者必须同时存在

option表示下拉选项的每一项

<form action="" method="">
    <select name="" id="">
        <option>北京</option>
        <option>上海</option>
    </select>
</form>

2.7.4. textarea标签

<textarea></textarea>标签可以构建出来一个文本域属于框，供用户输入较长的文本内容

<form action="" method="">
    <textarea name="" id="" cols="30" rows="10"></textarea>
</form>

「属性」

row 列，可以理解为文本域的高度
cols 行，可以理解为文本域的高度

3. HTML5新增属性

3.1. 语义化标签

在HTML5中新增了一些语义化「见名知意」标签，增加我们代码的可读性

header 定位文档的页眉，通常包含标题、导航等
nav 定义导航部分
main 定义主体部分
section 定义独立的块，通常包含章节、页脚等
article 定义独立的文章块
aside 定义主要部分可以独立，通常包含侧边栏
footer 定义页脚
figure 定义独立的图像、插画等
figcaption 定义figure元素中的说明文本

3.2. 表单增强

HTML5对于表单进行了一些增强，这些能够让我们更好更方便的对一些数据进行验证和限制

HTML5表单示例

<!DOCTYPE html>
<html>
<head>
  <title>HTML5 表单示例</title>
</head>
<body>
  <form>
    <label for="name">姓名：</label>
    <input type="text" id="name" name="name" required placeholder="请输入您的姓名"><br><br>

    <label for="email">邮箱：</label>
    <input type="email" id="email" name="email" required placeholder="请输入您的邮箱地址"><br><br>

    <label for="phone">电话：</label>
    <input type="tel" id="phone" name="phone" pattern="[0-9]{3}-[0-9]{3}-[0-9]{4}" placeholder="请输入格式为 xxx-xxx-xxxx 的电话号码"><br><br>

    <label for="age">年龄：</label>
    <input type="number" id="age" name="age" min="18" max="100" placeholder="请输入年龄（18-100）"><br><br>

    <label for="color">喜欢的颜色：</label>
    <input type="color" id="color" name="color"><br><br>

    <label for="bio">个人简介：</label><br>
    <textarea id="bio" name="bio" rows="4" cols="50" placeholder="请在这里输入个人简介"></textarea><br><br>

    <input type="submit" value="提交">
  </form>
</body>
</html>

在这个示例中，我们使用了以下 HTML5 新增的表单增强功能：

required 属性用于字段的必填验证。
placeholder 属性用于为输入字段提供占位符文本。
type="email" 属性用于验证邮箱地址格式。
type="tel" 属性和 pattern 属性用于验证电话号码格式。
type="number" 属性和 min、max 属性用于限制输入的数字范围。
type="color" 属性用于提供颜色选择器。
<textarea> 元素用于多行文本输入。
<input type="submit"> 元素用于提交表单。

3.2.1. 输入类型

email 邮箱格式
number 数字格式
date 日期选择器
time 时间选择器
color 颜色选择器
range 接受范围

3.2.2. 表单自动保存

<form autocomplete="on/off">

「属性」

on 表示表单有自动完成功能
off 表示表单无自动完成功能

何为自动完成功能？在表单获取焦点的时候，会弹出下拉框（选项为我们历次输入的内容）

3.2.3. 新增属性

HTML5针对于input、select、textarea增加了一些属性，完善了输入框的功能「占位、校验等」

required 是否必填
pattern 输入的内容校验，一般为正则表达式
min 最小值，针对数字
max 最大值，针对数字
minlength 最小输入长度
maxlength 最大输入长度
placeholder 占位符，输入框中无参数的时候显示

3.2.4. 进度条

<progress id="progress" value="0" max="100"></progress>

「属性」 value进度条开始为止，max进度条结束位置

<!DOCTYPE html>
<html>
<head>
  <title>Progress 表单示例</title>
</head>
<body>
  <label for="file">文件上传：</label>
  <input type="file" id="file" name="file"><br><br>

  <label for="progress">上传进度：</label>
  <progress id="progress" value="0" max="100"></progress><br><br>

  <button onclick="uploadFile()">开始上传</button>

  <script>
    function uploadFile() {
      var progressBar = document.getElementById("progress");
      var fileInput = document.getElementById("file");

      var file = fileInput.files[0];
      var fileSize = file.size;
      var chunkSize = 1024 * 1024; // 每次上传的块大小为 1MB
      var currentByte = 0;

      var uploadChunk = function() {
        if (currentByte >= fileSize) {
          console.log("上传完成！");
          return;
        }

        var chunk = file.slice(currentByte, currentByte + chunkSize);

        // 模拟上传延迟
        setTimeout(function() {
          currentByte += chunkSize;
          var progress = Math.min((currentByte / fileSize) * 100, 100);
          progressBar.value = progress;

          uploadChunk();
        }, 1000);
      };

      uploadChunk();
    }
  </script>
</body>
</html>

3.3. 媒体元素

3.3.1. audio

用于嵌入音频内容

<audio src="video.mp3" controls></audio>

3.3.2. video

用于嵌入视频内容

<video src="video.mp4" controls></video>

3.3.3. source

是audio & video的一个字元素，在我们要指定多个媒体源的话，浏览器会根据其支持的源进行播放

<audio controls>
  <source src="audio.mp3" type="audio/mpeg" />
  <source src="audio.ogg" type="audio/ogg" />
</audio>

3.3.4. iframe

我们可以在<iframe>标签中嵌入其他网页或媒体的内容

不过该方法目前基本上很少使用，chrome已经取消了对其的兼容性，建议少用

<iframe src="https://www.youtube.com/embed/dQw4w9WgXcQ" width="560" height="315"></iframe>

3.3.5. 音视频的属性

下边列举一些常见的属性，如果你需要更多的配置可以参考：视频音频

src 播放音/视频的地址
controls 在音/视频上添加浏览器默认的控制面板，包括暂停、音量调节等
autoplay 设置音/视频自动播放
preload 设置音/视频在页面加载的时候的加载方式

- none - 不进预加载，默认值
- metadata - 仅加载元数据，如标题、时常等
- auto - 完全预加载整个音/视频内容

loop 设置音/视频循环播放
volume 设置音/视频进入时候音量去值范围「0 ～ 1.0」

3.4. Canvas绘图

此处为语雀内容卡片，点击链接查看：www.yuque.com/hanxiaoqiya…

3.5. 本地储存

不要储存一些敏感的数据，防止被用户修改或者被恶意代码访问

3.5.1. localStorage

「生命周期」无过期时间，除非手动删除或者是浏览器清除缓存

「作用域」数据储存在整个源中，在同一协议、主机和端口下的所有页面都可以访问到

// 将数据存储到localStorage中
localStorage.setItem('key', 'value');

// 从localStorage中读取数据
var value = localStorage.getItem('key');

// 删除localStorage中的数据
localStorage.removeItem('key');

// 清除localStorage中的所有数据
localStorage.clear();

3.5.2. sessionStorage

「生命周期」当前会话结束之后会被清除，包括关闭浏览器或者标签

「作用域」仅在当前会话中有效，在同一标签或者窗口下的不同页面之间可以访问到

// 将数据存储到sessionStorage中
sessionStorage.setItem('key', 'value');

// 从sessionStorage中读取数据
var value = sessionStorage.getItem('key');

// 删除sessionStorage中的数据
sessionStorage.removeItem('key');

// 清除sessionStorage中的所有数据
sessionStorage.clear();

3.5.3. IndexedDB

此处为语雀内容卡片，点击链接查看：www.yuque.com/hanxiaoqiya…

3.6. 地理定位API

此处为语雀内容卡片，点击链接查看：www.yuque.com/hanxiaoqiya…

3.7. WebSocket协议

此处为语雀内容卡片，点击链接查看：www.yuque.com/hanxiaoqiya…

3.8. Web Workers

此处为语雀内容卡片，点击链接查看：www.yuque.com/hanxiaoqiya…

3.9. 新增标签和属性

新增的标签一般常用的基本上是HTML5新增的语义化标签，以及表单增强中的一些属性。

除了这些之外还有一些常用的属性如：

contenteditable 元素是否可以编辑「true、false」

hidden 指定元素是否隐藏，不占用布局空间

draggable 元素是否可以拖拽，一般可用于实现元素拖拽排序这种场景

download 一般结合a标签使用，告诉浏览器是下载，不是在浏览器中打开

<div contenteditable>元素是否可以编辑</div>
<div hidden>隐藏</div>
<div draggable>拖拽</div>
<a href="下载地址" download>download</a>

这里补充一个知识点：

当我们在设置属性的时候，如果这些属性的可选值为「true 或 false」的时候，这两种写法是相等的

<div hidden>隐藏</div> 等于 <div hidden="true">隐藏</div>

上述只是罗列了一些常用到的元素，HTML5中还有一些其他新增的标签和属性，你可以更深的去探索。

4. 其他

4.1. 注解方式

在HTML中使用可以使用 进行注解，在不会在网页浏览器上显示出来，但可以在控制台中看到

5. 参考文档

Web APIs | MDN

HTML 教程 | 菜鸟教程

HTML5 教程 | 菜鸟教程

标记语言：HTML

1. 了解HTML（5）

1.1. 基本概念

1.2. html基础结构

1.2.1. <!DOCTYPE html>

1.2.2. <html>...</html>

1.2.3. <head>...</head>

1.2.4. <body>...</body>

2. 常见的标签及元素

2.1. 标题和段落

2.2. 文本格式化

2.3. 超链接

2.4. 列表

2.4.1. 无序列表

2.4.2. 有序列表

2.4.3. 自定义列表

2.5. 图片

2.6. 表格

2.7. 表单

2.7.1. label标签

2.7.2. input标签

2.7.3. select标签

2.7.4. textarea标签

3. HTML5新增属性

3.1. 语义化标签

3.2. 表单增强

3.2.1. 输入类型

3.2.2. 表单自动保存

3.2.3. 新增属性

3.2.4. 进度条

3.3. 媒体元素

3.3.1. audio

3.3.2. video

3.3.3. source

3.3.4. iframe

3.3.5. 音视频的属性

3.4. Canvas绘图

3.5. 本地储存

3.5.1. localStorage

3.5.2. sessionStorage

3.5.3. IndexedDB

3.6. 地理定位API

3.7. WebSocket协议

3.8. Web Workers

3.9. 新增标签和属性

4. 其他

4.1. 注解方式

5. 参考文档

1.2.1. `<!DOCTYPE html>`

1.2.2. `<html>...</html>`

1.2.3. `<head>...</head>`

1.2.4. `<body>...</body>`