三、基础标签的使用
3.1 h标签
h标题标签共有6级，从h1（最大）~h6（最小），h1标签会影响页面在搜索引擎中的排名，因此一个页面中最好只写一个h1标签。
使用h标签和在body中直接写文字并设置对应样式有什么区别吗？没有，只是代码规范的要求。
3.2 hr和br标签
hr标签可以在页面中生成一个分割线。
br标签表示换行标签。
注：以上两个标签均为单标签。
<!-- 标题 -->
<div class="title">
<!-- 使用h1显示标题名称 -->
<h1 style="text-align: center;color: green;">山西农业大学隆重举行<br>2024年毕业典礼暨学位授予仪式</h1>
</div>
<!-- 分割线 -->
<hr>3.3 p标签
p为段落标签，表示内容中的一个自然段，段与段之间会有一个间距。
这里介绍一个单位em，一个em即为一个标准文字的大小。
3.4 img标签
img为图片标签，其中src中填写图片地址，alt中填写图片加载失败时的提示信息。在设置宽度width、高度height时，如果只设置其中一项，浏览器在显示处理时会将其默认为等比例放大或缩小。
这里介绍一个单位px，即像素，像素大小是根据个人设备的分辨率而定的，对于相同的像素如50px，在1k分辨率的设备上的显示大小就会大于4k分辨率的设备上的显示大小，这是由于4k的像素点较1k多。
<!-- 内容 -->
<div class="content">
<!-- 文章 -->
<p style="text-indent: 2em;font-size: 25px;">
流苏飘扬，又是一年毕业季；浓情依依，又到一年离别时。6月18日上午，我校2024年毕业典礼暨学位授予仪式在太谷校区大操场举行。校党委书记廖允成，校党委副书记、校（院）长、校学位评定委员会主席张强等在校校领导，校学位评定委员会委员和导师代表出席仪式，浙江大学求是讲席教授、我校畜牧78级校友、我校生命科学学院学术院长李明定应邀出席仪式，校党委副书记李卫祥主持仪式。
</p>
<!-- 图片 -->
<div class="picture" style="text-align: center;">
<img style="width: 800px;" src="https://news.sxau.edu.cn/__local/5/E1/71/164C4AA76ED634EB748A562682B_0B95B4D1_A65B7.jpg" alt="图片加载失败">
</div>
</div>
注：由于alt在不同浏览器中的显示效果不同，因此为了避免该问题，我们现在已经少用原生标签来编写代码。如下图分别为Microsoft Edge和Firefox两个浏览器的显示效果。
3.5 a标签
a标签简单来说就是超链接，href中填写跳转的对应链接。在两个标签之间要有显示内容，用于跳转的点击，该内容可以是文字、图片等。有一个属性target，用于控制跳转页面是在当前页面刷新_self，还是打开一个新页面刷新_blank，默认值为_self；该属性可以在head中通过base标签来设置整个页面所有a标签的跳转方式。
<head>
<base target="_blank">
</head>a标签作用比较丰富，如下：
1.页面之间的跳转，跳转“外部链接路径-url”或者“内部文件路径-相对路径”。
<!-- 页面的跳转 -->
<!-- 外部链接路径url -->
<a href="http://www.baidu.com">百度一下</a>
<!-- 内部文件路径-相对路径 -->
<a target="_blank" href="./01-基础标签的使用.html">校园新闻</a>
<a target="_self" href="./01-基础标签的使用.html">
<img style="width: 800px;" src="https://news.sxau.edu.cn/__local/5/E1/71/164C4AA76ED634EB748A562682B_0B95B4D1_A65B7.jpg" alt="图片加载失败">
</a>2.发送邮件。如一些网站上的联系我们等功能。
| 参数 | 描述 |
| mailto:name@email.com | 电子邮件收件人地址 |
| cc=name@email.com | 抄送地址 |
| bcc=name@email.com | 密件抄送地址 |
| subject=邮件主题 | 邮件的主题 |
| body=邮件内容 | 邮件的内容 |
| ? | 第一个拼接符 |
| & | 第二及以后的拼接符 |
<!-- 发送邮件 -->
<a href="mailto:215369162@qq.com?cc=touser1@qq.com&subject=联系我们测试&body=联系我们测试内容">联系我们</a>
3.直接回到顶部#，没有过渡动画，不常用该方式。这里介绍另一个常用于测试的假链接javascript:，避免href为空造成的报错，可以将其视为占位符处理。
<!-- 假链接 -->
<!-- 回到顶部 -->
<a href="#">回到顶部</a>
<!-- 测试 -->
<a href="javascript:">测试</a>4.通过锚点跳转到指定位置，即通过独一无二的id值完成位置定位，可以跨页面跳转。
<div id="div50">这是第50个div</div>
<!-- 跳转到本页指定位置 -->
<a href="#div50">跳转到第50个div</a>
<!-- 跳转到其他页指定位置 -->
<a href="./01-基础标签的使用.html#title">跳转到第50个div</a>3.6 一些不常用标签
em：通过倾斜、加粗来强调文章重点。
strong：意为强调。
b：加粗。
i：倾斜。
u：下划线。
以上标签不常用的原因是HTML常作为结构的搭建，而样式的设置常用CSS来完成。
3.7 video标签（H5新增）
video标签用于播放视频，src中为视频路径，controls用于手动控制视频的播放、倍速、进度条等，autoplay用于自动播放视频（由于浏览器厂家出于用户安全考虑，禁止了各种视频的自动播放），poster用于设置视频的封面，loop用于设置是否循环播放，muted用于设置是否静音。
<!-- 视频标签 -->
<video width="700px" autoplay controls loop muted src="./statics/statics/apple.mp4" poster="./statics/statics/sz.webp"></video>为了防止浏览器不支持单一视频格式的情况出现，我们常采用如下方式处理：
<video>
<source src="" type=""></source>
<source src="" type=""></source>
<source src="" type=""></source>
</video>
3.8 audio标签（H5新增）
音频标签属性与video标签相似，我们常用“自动播放+controls隐藏”进行网站的背景音乐的简易设置。
<!-- 音频标签 -->
<audio controls src="./statics/statics/橘子海-有暖气.mp3"></audio>
扫一扫
1708
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
