引言
HTML 学习一 - 基础: https://blog.yexca.net/archives/146
HTML 学习二 - 列表、表格与表单: https://blog.yexca.net/archives/150
HTML 学习三 - 网页布局: https://blog.yexca.net/archives/195
基本骨架
1
2
3
4
5
6
7
8
<html>
<head>
<title>网页标题</title>
</head>
<body>
网页主体
</body>
</html>
一般有软件生成，例如在 VS Code 里可以新建 .html 文件后输入英文 ! 按 TAB 键自动生成
head 标签一般是面向浏览器，body 标签面向用户
注释
1
<!-- 注释内容 -->
在 VS Code 中可以选中该行，使用快捷键 Ctrl + / 一键注释
浏览器不会显示注释的内容
标题与段落
1
2
3
4
5
6
7
8
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<p>段落内容</p>
<p>段落内容</p>
标题标签显示会文字加粗，独占一行
段落标签内容独占一行，段落之间有空隙
换行与水平线
在段落标签中的内容换行并不会被显现，如需换行需使用换行标签
1
<br />
水平线标签代码如下
1
<hr />
效果如下
文本格式化标签
| 效果 | 标签名 | 缩写 |
|---|---|---|
| 加粗 | strong | b |
| 倾斜 | em | i |
| 下划线 | ins | u |
| del | s |
一般不推荐缩写，示例如下
1
2
3
4
<p>
你好，我是 <em>yexca</em>，<strong>欢迎</strong>访问<ins>此博客</ins><br />
<del>然后我该写什么呢？</del>
</p>
效果如下
你好，我是 yexca，欢迎访问此博客
然后我该写什么呢？
图像标签
图像标签需要在 src 属性中指定指定图像的位置
1
<img src="path" alt="图片不能加载时显示的内容" />
路径分为绝对路径和相对路径，假设当前路径为 (Linux 系统)
1
2
3
/home/yexca/code
index.html
photo.jpg
代码写在 index.html 文件，那么相对路径如下
1
<img src="./photo.jpg" />
绝对路径如下
1
<img src="/home/yexca/code/photo.jpg" />
超链接标签
1
<a href="目标页面" target="方式">链接文字</a>
此标题用于跳转网页，即网页中的链接，如果需要在新窗口打开网页，只需将 target 属性值为 _blank，例如以下代码
1
2
3
4
5
<p>
跳转至
<a href="https://yexca.net">yexca</a><br />
这个是新标签页：<a href="https://yexca.net">yexca</a>
</p>
效果如下
音视频标签
1
2
<audio src="path">音频标签</audio>
<video src="path">视频标签</video>
音频标签属性如下
| 属性 | 作用 | 说明 |
|---|---|---|
| src | 音频路径 | 必须属性，支持 mp3、ogg、wav |
| controls | 显示音频控制面板 | |
| loop | 循环播放 | |
| autoplay | 自动播放 | 浏览器一般禁止自动播放 |
视频标签属性如下
| 属性 | 作用 | 说明 |
|---|---|---|
| src | 视频路径 | 必须属性，支持 mp4、webm、ogg |
| controls | 显示视频控制面板 | |
| loop | 循环播放 | |
| muted | 静音播放 | |
| autoplay | 自动播放 | 浏览器支持在静音状态下自动播放 |
假设当前路径如下
1
2
3
4
/home/yexca/code
index.html
audio.mp3
video.mp4
例如以下代码
1
2
3
4
5
6
7
8
<audio src="./audio.mp3" controls loop></audio>
<!-- 显示控制，播完回到开始循环播放 -->
<video src="./video.mp4" controls loop></video>
<!-- 显示控制，播完回到开始循环播放 -->
<video src="./video.mp4" controls muted autoplay></video>
<!-- 此代码会自动播放 -->
<video src="./video.mp4" controls autoplay></video>
<!-- 此代码不会自动播放 -->
布局标签
没有实义的用于布局网页的标签，划分区域或摆放内容
- div: 独占一行
- span: 不换行
例如以下代码
1
2
3
4
5
6
7
8
<div>
div1
</div>
<div>
div2
</div>
<span>span1</span>
<span>span2</span>
效果如下
div1
div2
span1
span2
字符转换
用于在网页中显示预留字符。例如显示空格、<、>
| Result | Description | Entity Name | Entity Number |
|---|---|---|---|
| non-breaking | space | |
  |
| < | less than | < |
< |
| > | greater than | > |
> |
| & | ampersand | & |
& |
| “ | double quotation mark | " |
" |
| ‘ | single quotation mark (apostrophe) | ' |
' |
| ¢ | cent | ¢ |
¢ |
| £ | pound | £ |
£ |
| ¥ | yen | ¥ |
¥ |
| € | euro | € |
€ |
| © | copyright | © |
© |
| ® | registered trademark | ® |
® |
例如显示 <p>
1
2
3
<p>
<p>
</p>
参考：HTML字元符號 &Nbsp; &Ensp; &Emsp; 的差異