HTML5

文章发布时间:

最后更新时间:

文章总字数:
3.1k

预计阅读时间:
15 分钟

页面浏览: 加载中...

好久没有发博客了，过完年一直在走亲戚，开学了也东忙忙西忙忙呢~

一、简介

HTML5 是超文本标记语言（HTML）的第五次重大修订，于2014年正式成为国际标准。作为现代网页开发的核心技术，它不仅是HTML的升级，还整合了CSS3和JavaScript API，旨在提供更丰富的功能与更优的跨平台体验。

核心特性：

  1. 语义化标签：新增 <header>​, <article>​, <section>​ 等标签，提升内容结构化与SEO优化。
  2. 多媒体原生支持：直接嵌入 <video>​ 和 <audio>​ 元素，无需第三方插件。
  3. 图形与动画：通过 <canvas>​、SVG 和 WebGL 实现动态2D/3D图形渲染。
  4. 离线与存储：支持本地存储（localStorage）、IndexedDB 数据库及 Service Workers 实现离线应用。
  5. 设备兼容性：集成地理位置、摄像头、陀螺仪等硬件访问接口。
  6. 响应式设计：通过媒体查询（Media Queries）和弹性布局适配多端设备。
  7. 性能优化：Web Workers 多线程处理，减少主线程阻塞。

HTML5 简化了跨平台开发流程，推动Web应用接近原生体验，成为构建网站、移动应用、游戏及企业级系统的基石，并逐步取代Flash等传统技术。其开放标准由W3C与WHATWG共同维护，持续演进以满足现代互联网需求。

‍

二、HTML基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!-- DOCTYPE: 告诉浏览器，我们使用什么规范-->
<!DOCTYPE html>

<html lang="en">

<!-- head: 代表网页头部-->
<head>
    <!-- meta: 描述性标签，它用来描述我们网站的一些信息-->
    <!-- meta一般用来做SEO-->
    <meta charset="UTF-8">
    <meta name="keywords" content="重新开始HTML5">

    <!-- title: 网页标题-->
    <title>Title</title>
</head>

<!-- body: 代表网页主体-->
<body>
Hello,World!
</body>
</html>

‍

三、网页基本标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
<!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>

<!-- 段落标签-->
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有眼睛，一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>
<p>两只老虎，两只老虎，</p>
<p>跑得快，跑得快，</p>
<p>一只没有耳朵，一只没有尾巴，</p>
<p>真奇怪！真奇怪！</p>

<!-- 水平线标签-->
<hr/>

<!-- 换行标签-->
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有眼睛，一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>
两只老虎，两只老虎，<br/>
跑得快，跑得快，<br/>
一只没有耳朵，一只没有尾巴，<br/>
真奇怪！真奇怪！<br/>

<!-- 字体样式标签-->
<h1>字体样式标签</h1>
粗体: <strong>I love you</strong>
斜体: <em>I love you</em>

<!-- 特殊符号-->
空格: 空&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;格
版权: &copy;版权所有Mia
<p>还有很多......</p>

</body>
</html>

‍

四、图像标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>

<!-- img标签
src: 图片地址（相对地址、绝对地址）（必填）
alt: 图片名字（必填）
-->
<img src="../resources/image/Mia.png" alt="Mia头像" title="鼠标悬停文字" width="300" height="300">

</body>
</html>

‍

五、链接标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>链接标签</title>
</head>
<body>

<!-- 使用name作为锚标记-->
<a name="top">顶部</a>

<!-- a标签
href: 必填，表示要跳转到哪个页面
target: 表示窗口在哪里打开
    _blank 在新标签页中打开
    _self 在当前页面打开
-->
<a href="1.我的第一个网页.html" target="_blank">点击我跳转到页面一</a>
<a href="https://zfile.miamia.top" target="_self">点击我跳转到zfile</a>
<br>
<a href="https://home.miamia.top">
  <img src="../resources/image/Mia.png" alt="Mia头像" title="鼠标悬停文字">
</a>

<!-- 锚链接
1.需要一个锚标记
2.跳转到标记
-->
<a href="#top">回到顶部</a>

<!-- 功能性链接
邮件标签: maito:
-->
<a href="mailto:2472838573@qq.com">点击联系我</a>

</body>
</html>

‍

六、行内元素和块元素

  • 块元素

    1. 无论内容多少，该元素独占一行
    2. （p、h1-h6）

  • 行内元素

    1. 内容撑开宽度，左右都是行内元素的可以排在一行
    2. （a、strong、em … ）

‍

七、列表

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>列表</title>
</head>
<body>

<!-- 有序列表
应用范围: 试卷、问答
-->
<ol>
  <li>go</li>
  <li>python</li>
  <li>前端</li>
  <li>渗透</li>
  <li>应急</li>
  <li/>c/c++</li>
</ol>

<!-- 无序列表
应用范围: 导航、侧边栏
-->
<ul>
  <li>go</li>
  <li>python</li>
  <li>前端</li>
  <li>渗透</li>
  <li>应急</li>
  <li/>c/c++</li>
</ul>

<!-- 自定义序列表
dl: 标签
dt: 列表名称
dd: 列表内容
-->
<dl>
  <dt>学科</dt>
  <dd>go</dd>
  <dd>python</dd>
  <dd>前端</dd>
  <dd>渗透</dd>
  <dd>应急</dd>
  <dd>c/c++</dd>

  <dt>位置</dt>
  <dd>中国</dd>
  <dd>安徽省</dd>
  <dd>合肥市</dd>
</dl>

</body>
</html>

‍

八、表格

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格</title>
</head>
<body>

<!-- 表格table
行: tr
列: td
-->
<table border="1px">
  <tr>
    <!-- colspan 跨列-->
    <td colspan="4">1-1</td>
  </tr>
  <tr>
    <!-- rowspan 跨行-->
    <td rowspan="2">2-1</td>
    <td>2-2</td>
    <td>2-3</td>
    <td>2-4</td>
  </tr>
  <tr>
    <td>3-2</td>
    <td>3-3</td>
    <td>3-4</td>
  </tr>
</table>

</body>
</html>

‍

九、媒体

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>媒体</title>
</head>
<body>

<!-- 音频和视频
src: 资源路径
controls: 控制条
autoplay: 自动播放
-->
<video src="../resources/video/test.mp4" controls autoplay></video>
<audio src="../resources/audio/test.mp3" controls autoplay></audio>

</body>
</html>

‍

十、页面结构

元素名 描述
header 标题头部区域的内容(用于页面或页面中的一块区域)
footer 标记脚部区域的内容(用于整个页面或页面的一块区域)
section Web页面中的一块独立区域
article 独立的文章内容
aside 相关内容或应用(常用于侧边栏)
nav 导航类辅助内容

‍

十一、iframe内联框架

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>内联框架</title>
</head>
<body>

<!-- iframe内联框架
src: 地址
w-h: 宽度高度
-->
<iframe src="" name="Mia的主页" frameborder="0" width="1000px" height="800px"></iframe>
<a href="https://home.miamia.top" target="Mia的主页">点击跳转</a>

</body>
</html>

‍

十二、表单语法

属性 说明
type 指定元素的类型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button，默认为 text
name 指定表单元素的名称
value 元素的初始值。type 为radio时必须指定一个值
size 指定表单元素的初始宽度。当 type 为 text或 password时，表单元素的大小以字符为单位。对于其他类型，宽度以像素为单位
maxlength type为text 或 password 时，输入的最大字符数
checked type为radio或checkbox时，指定按钮是否是被选中 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表单</title>
</head>
<body>

<h1>注册</h1>

<!--表单form
action: 表单提交的位置，可以是网站，也可以是一个请求处理地址
method: post、get 提交方式
readonly: 只读
hidden: 隐藏
disabled: 禁用
-->
<form action="1.我的第一个网页.html" method="get">
  <!-- 文本输入框: input type="text"-->
  <p>名字: <input type="text" name="username" placeholder="请输入用户名" required/></p>
  <!-- 密码输入框: input type="password"-->
  <p>密码: <input type="password" name="pwd" hidden/></p>

  <!-- 单选框标签
  input type="radio"
  value: 单选框的值
  name: 表示组
  -->
  <p>性别:
    <input type="radio" value="boy" name="sex" checked disabled/>男
    <input type="radio" value="girl" name="sex"/>女
  </p>

  <!-- 多选框
  input type="checkbox"
  -->
  <p>爱好:
    <input type="checkbox" value="sleep" name="hobby"/>睡觉
    <input type="checkbox" value="code" name="hobby" checked/>代码
    <input type="checkbox" value="chat" name="hobby"/>聊天
    <input type="checkbox" value="game" name="hobby"/>游戏
  </p>
  
  <!-- 按钮
  input type="button"
  input type="image"
  input type="submit"
  input type="reset"
  -->
  <p>按钮:
    <input type="button" name="btn1" value="点击变长"/>
  <!--  <input type="image" src="../resources/image/Mia.png"/>-->
  </p>
  
  <!-- 下拉框，列表框-->
  <p>下拉框:
    <select name="列表名称">
      <option value="China">中国</option>
      <option value="US">美国</option>
      <option value="ETH" selected>瑞士</option>
      <option value="Hindu">印度</option>
    </select>
  </p>
  
  <!-- 文本域
    cols="50" rows="10"
  -->
  <p>反馈
    <textarea name="textarea" cols="50" rows="10">文本内容</textarea>
  </p>
  
  <!-- 文件域
  type="file" name="files"
  -->
  <p>
    <input type="file" name="files"/>
    <input type="button" value="上传" name="upload"/>
  </p>
  
  <!--邮箱验证-->
  <p>邮箱:
    <input type="email" name="email"/>
  </p>
  
  <!-- URL-->
  <p>URL:
    <input type="url" name="url"/>
  </p>
  
  <!-- 数字-->
  <p>数字:
    <input type="number" name="number" max="100" min="0" step="10"/>
  </p>
  
  <!-- 滑块
  input type="range"
  -->
  <p>滑块:
    <input type="range" name="voice" min="0" max="100" step="2"/>
  </p>
  
  <!-- 搜索框-->
  <p>搜索:
    <input type="search" name="search"/>
  </p>
  
  <!-- 增强鼠标可用性-->
  <p>
    <label for="mark">你点我试试</label>
    <input type="text" id="mark"/>
  </p>

  <p>自定义邮箱:
    <input type="text" name="diymail" pattern="^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$"/>
  </p>

  <p>
    <input type="submit"/>
    <input type="reset"/>
  </p>

</form>

</body>
</html>

‍

十三、总结

image

≡