参考:

HTML 基本结构

1
2
3
4
5
6
7
8
9
10
11
12
13
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 移动端视口标签,使视口宽度等于设备宽度(默认值980px) -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
主体
</body>
</html>

VsCode插件:

  • Open in Browser 给鼠标右键添加在浏览器打开快捷键

基本的标签

1
2
3
4
5
6
7
8
9
10
11
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>

<p>这是一个段落</p>
<br> (换行)
<hr> (水平线)
<!-- 这是注释 -->

文本格式化标签

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!-- 常用 -->
<strong>粗体文本(强调)</strong>
<em>倾斜文本(强调)</em>
<del>删除文本(强调)</del>
<ins>带下划线的文本(强调)</ins>

<small>小文本</small>
<mark>高亮文本</mark>
<sub>下标文本</sub>
<sup>上标文本</sup>

<!-- 不常用 -->
<dfn>定义项目</dfn>
<code>一段电脑代码 print("Hello World")</code>
<samp>计算机样本</samp>
<kbd>键盘输入</kbd>
<var>变量</var>

<!-- 废弃 -->
<b>粗体文本</b>
<i>斜体文本</i>
<s>删除文本</s>
<u>带下划线的文本</u>

链接

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
普通的链接:<a href="http://www.example.com/">链接文本</a>
带描述的链接:<a href="http://www.example.com/" title="描述文本">链接文本</a>
邮件链接: <a href="mailto:webmaster@example.com">发送e-mail</a>

在新的窗口打开链接
<a href="https://pblood.com/" target="_blank">在新窗口访问Pblood'Blog!</a>
在当前窗口打开链接
<a href="https://pblood.com/" target="_self">在当前窗口访问Pblood'Blog!</a>

锚文本:
<a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>

<!-- 当开发网站初期, 我们还不知道跳转地址的时候, href的值写#(空链接) -->
<a href="#">空链接</a>

图片

1
<img src="URL" title="标题" alt="替换文本" height="42" width="42">

音频/视频

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<audio src="./music.mp3" controls loop></audio>

<video src="./video.mp4" controls autoplay muted loop></video>
<!--
1、controls属性:显示控制组件
2、loop属性:循环播放
3、muted属性:静音播放
4、preload属性:页面加载在播放
5、width/heigth属性:视频的宽高
6、autoplay属性:自动播放 -->
<video width="100px" height="100px" onerror="fn()" controls >
<source src="movie.mp4" type="video/mp4">
<source src="#" type="">
Your brower does not support.
</video>

区块

1
2
3
4
<!-- 无语义,独占一行 -->
<div>文档中的块级元素</div>
<!-- 无语义,一行显示 -->
<span>文档中的内联元素</span>

样式

1
2
3
4
5
6
<style>
.div {
margin-top: 20px;
color: blue;
}
</style>

列表

无序列表

1
2
3
4
<ul>
<li>项目</li>
<li>项目</li>
</ul>

有序列表

1
2
3
4
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>

定义列表

1
2
3
4
5
6
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>

表格

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
<table border="1" width="400" height="400">
<!-- 表格整体的大标题 -->
<caption><h3>优秀学生信息表格</h3></caption>
<!-- 表格的头部 -->
<thead>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
</thead>
<!-- 表格的主体 -->
<tbody>
<tr>
<!-- 保留 -->
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<!-- 删除 -->
<!-- <td>高三</td> -->
<td>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
</tbody>
<!-- 表格的底部 -->
<tfoot>
<tr>
<td>评语</td>
<!-- 保留 -->
<td colspan="3">你们都很优秀</td>
<!-- 统统删除掉 -->
<!-- <td>你们都很优秀</td> -->
<!-- <td>你们都很优秀</td> -->
</tr>
</tfoot>
</table>
<!-- <thead>、<tbody> 和 <tfoot> 元素默认不会影响表格的布局,一般用于定义CSS样式,改变表格的局部外观。 -->

通过CSS实现细线边框效果

1
2
3
4
5
6
7
table {
border: 1px soild #000;
border-collapse: collapse;
}
th, td {
border: 1px soild #000;
}

框架

1
<iframe src="demo_iframe.htm"></iframe>

表单

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
<form action="demo_form.php" method="post/get" target="_blank/_self">

<!-- 输入框 -->
<input type="text" name="email" size="40" maxlength="50" placeholder="请输入文本内容">
<input type="password" placeholder="请输入密码">
<!-- 复选框 -->
<input type="checkbox" checked> <!-- 方形,默认选中 -->
<input type="radio" disabled> <!-- 圆形,默认禁用 -->
<!-- lable标签可将标签包裹的文本和input绑定,扩大选择范围,name值相同实现单选 -->
<label>
<input type="radio" name="sex">
</label>
<label>
<input type="radio" name="sex">
</label>
<!-- 提交、重置、input自定义按钮与button实现方法 -->
<input type="submit" value="提交"> || <button type="submit">提交</button>
<input type="reset" value="重置"> || <button type="reset">重置</button>
<input type="button" value="自定义按钮"> || <button>自定义按钮</button>
<!-- 上传文件(multiple多文件上传) -->
<input type="file" multiple>

<!-- 下拉框 -->
<select>
<option>苹果</option>
<option selected>香蕉</option>
<option>樱桃</option>
</select>

<!-- 文本域(输入多行文本,cols:宽度 rows:可见行数 maxlength:最大输入长度) -->
<textarea name="comment" cols="20" rows="60" maxlength="200"></textarea>

</form>

HTML 实体

1
2
3
4
&nbsp; 等同于`空格`
&lt; 等同于 <
&gt; 等同于 >
&#169; 等同于 ©