技术学习

HTML 学习一 - 基础

引言

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 />

效果如下

文本格式化标签

效果标签名缩写
加粗strongb
倾斜emi
下划线insu
删除线dels

一般不推荐缩写，示例如下

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>

效果如下

跳转至 yexca
这个是新标签页：yexca

音视频标签

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
## 字符转换

用于在网页中显示预留字符。例如显示空格、<、>

ResultDescriptionEntity NameEntity Number
non-breakingspace&nbsp;&#160;
<less than&lt;&#60;
>greater than&gt;&#62;
&ampersand&amp;&#38;
“double quotation mark&quot;&#34;
‘single quotation mark (apostrophe)&apos;&#39;
¢cent&cent;&#162;
£pound&pound;&#163;
¥yen&yen;&#165;
€euro&euro;&#8364;
©copyright&copy;&#169;
®registered trademark&reg;&#174;

例如显示 <p>

1
2
3

<p>
    &lt;p&gt;
</p>

参考： HTML字元符號 &Nbsp; &Ensp; &Emsp; 的差異