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>

效果如下

图像标签

图像标签需要在 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>

效果如下

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

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; 的差異


Nickname
Email
Website
0/500
0 comments