基本骨架
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>
效果如下
字符转换
用于在网页中显示预留字符。例如显示空格、<
、>
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; 的差異