技术学习

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

效果如下

文本格式化标签

效果 标签名 缩写
加粗 strong b
倾斜 em i
下划线 ins u
删除线 del s

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

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>

效果如下

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

Result Description Entity Name Entity Number
non-breaking space &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
Powered by Twikoo v1.6.39