HTML5基础

标签语法

HTML 超文本标记语言 ——HyperText Markup Language 。

• 超文本：链接
• 标记：标签，带尖括号的文本

标签结构

• 标签要成对出现，中间包裹内容
• <>里面放英文字母（标签名）
• 结束标签比开始标签多 /
• 标签分类：双标签和单标签

 HTML骨架

• html：整个网页
• head：网页头部，用来存放给浏览器看的信息，例如 CSS
• title：网页标题
• body：网页主体，用来存放给用户看的信息，例如图片、文字

 标签的关系

• 父子关系（嵌套关系）：子级标签换行且缩进（Tab键）
• 父子关系（嵌套关系）：子级标签换行且缩进（Tab键）

 注释

• 概念：注释是对代码的解释和说明，能够提高程序的可读性，方便理解、查找代码。 注释不会在浏览器中显示。
• 在 VS Code 中，添加 / 删除注释的快捷键：Ctrl + /

 标题标签

<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>

显示特点：

• 文字加粗
• 字号逐渐减小
• 独占一行（换行）

段落标签

一般用在新闻段落、文章段落、产品描述信息等等。

<p>段落</p>

显示特点：

• 独占一行
• 段落之间存在间隙

 换行和水平线

<br>
<hr>

• 换行：br
• 水平线：hr

 文本格式化标签

作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。

标签名	效果
strong	加粗
em	倾斜
ins	下划线
del	删除线

标签名	效果
b	加粗
i	倾斜
u	下划线
s	删除线

 提示：strong、em、ins、del 标签自带强调含义（语义）。

图像标签

作用：在网页中插入图片

<img src="图片的 URL">

src 用于指定图像的位置和名称，是

的必须属性。

图像属性

属性	作用	说明
alt	替换文本	图片无法显示的时候现实的文字
title	提示文本	鼠标悬停在图片上的时候现实的文字
width	图片的宽度	值为数字，没有单位
height	图片的高度	值为数字，没有单位

属性语法

<img src = " 图片的 URL" >

属性名 =" 属性值 "

属性写在尖括号里面，标签名后面，标签名和属性之间用空格隔开，不区分先后顺序

路径

概念：路径指的是查找文件时，从 起点 到 终点 经历的 路线 。

路径分类：

• 相对路径：从当前文件位置出发查找目标文件
• 绝对路径：从盘符出发查找目标文件
• Windows 电脑从盘符出发
• Mac 电脑从根目出发

相对路径

查找方式：从 当前文件位置 出发查找目标文件

特殊符号：

• / 表示进入某个文件夹里面 → 文件夹名/
• . 表示当前文件所在文件夹 → ./
• .. 表示当前文件的上一级文件夹 → ../

绝对路径

查找方式： Windows 电脑从盘符出发； Mac 电脑从根目录（

/ ）出发

提示

 Windows 默认是 \ ，其他系统是 / ，建议统一写为 /

超链接标签

作用：点击跳转到其他页面。

<a href="https://www.baidu.com">跳转到百度</a>

href 属性值是跳转地址，是超链接的必须属性。

超链接默认是在当前窗口跳转页面，添加 target="_blank" 实现 新窗口 打开页面。

<img src = "C:\images\mao.jpg" >

<a href = "https://www.baidu.com" > 跳转到百度 </a> 拓展：开发初期，不确定跳转地址，则 href 属性值写为 # ，表示 空链接 ，页面不会跳转，在当前页面刷新一次。

音频

<audio src="音频的 URL"></audio>

属性	作用	特殊说明
src（必须属性）	音频URL	支持格式：MP3, Ogg，Wav
controls	显示音频控制面板
loop	循环播放
qutoplay	自动播放	为了提升用户体验，浏览器一般会禁用自动播放功能

拓展：书写 HTML5 属性时，如果属性名和属性值相同，可以简写为一个单词。

视频

<video src="视频的 URL"></video>

常用属性

属性	作用	特殊说明
src（必须属性）	视频URL	支持格式：mp4，文明，ogg
controls	显示视频控制面板
loop	循环播放
muted	静音播放
atuoplay	自动播放	为了提升用户体验，浏览器支持静音播放

<!-- 在浏览器中，想要自动播放，必须有 muted 属性 -->

<video src = "./media/vue.mp4" controls loop muted autoplay ></video>