前端自学历程【二、HTML标签学习】

0遇见你0

已于 2022-07-19 23:47:57 修改

阅读量86

点赞数

文章标签： html

于 2022-07-19 19:21:28 首次发布

本文链接：https://blog.csdn.net/m0_56359233/article/details/125878153

版权

二、HTML标签学习

前言
1. 排版标签
2. 文本格式化标签
- 2.1文本格式化标签的介绍
- 2.2 标签语义化
3. 媒体标签
4. 链接标签
- 4.1 链接标签的介绍
- 4.2链接标签的target属性

前言

目标：学习HTML 排版、媒体、链接等基础标签，完成基础网页的开发

1. 排版标签

1.1 标题标签

场景：在新闻和文章的页面中，都离不开标题，用来突出显示文章主题
代码：h 系列标签

    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>

段落效果图
语义：1~6级标题，重要程度依次递减
特点：

文字都有加粗
文字都有变大，并且从h1~h6文字逐渐减小
独占一行

1.2 段落标签

场景：在新闻和文章的页面中都有分段显示
代码：

	<p>段落1段落1段落1</p>
    <p>段落2段落2段落2</p>

在这里插入图片描述
语义：段落
特点：

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

1.3 换行标签

场景：让文字强制换行显示
代码：<br>或</br>
语义：换行
特点：

单标签
让文字强制换行

1.4 水平线标签

场景：分割不同主题内容的水平线
代码：<hr>
在这里插入图片描述
语义：主题的分割转换
特点：

单标签
在页面中显示一条水平线

2. 文本格式化标签

2.1文本格式化标签的介绍

场景：需要让文字加粗、下划线、倾斜线、删除线等效果
代码：

标签	说明	标签	说明
b	加粗	strong	加粗
u	下划线	ins	下划线
i	倾斜	em	倾斜
s	删除线	del	删除线

语义：突出重要性的强调语句
两种标签效果一样，自己觉得重要的就放到右边的标签内。

    <p> 这行文字没有任何修饰。</p>
    <p><b>这行文字被加粗了，我用了 b 标签。</b></p>
    <p><strong>这行文字也被加粗了，我用了 strong 标签。</strong></p>
    <p><i>这行文字倾斜了，我用了 i 标签。</i></p>
    <p><em>这行文字也倾斜了，我用了 em 标签。</em> </p>
    <p><u>这行文字有下划线，我用了 u 标签。</u></p>
    <p><ins>这行文字也有下划线，我用了 ins 标签。</ins></p>    
    <p><s>这行文字有删除线，我用了 s 标签。</s> </p>
    <p><del>这行文字也有删除线,我用了 del 标签。</del> </p>

在这里插入图片描述

2.2 标签语义化

实际项目开发中选择标签的原则：标签语义化

根据语义选择对应正确的标签
如：需要写标题。就使用 h 系列标签
如：需要写段落，就使用 p 标签
好处：
对人：好理解，好记忆
对机器：有利于机器解析，对搜索引擎（SEO）有帮助
推荐：
strong、ins、em、del、表示的强调语义更强烈。

3. 媒体标签

3.1 图片标签

3.1.1图片标签的介绍
场景：在网页中显示图片
代码：

 <body>
    <!-- alt :替换文本，当图片不显示的时候显示的文字-->
    <!-- title：提示文本，当鼠标放到图片上悬停时出现的提示文本 -->
    <!-- width和height属性只需给出一个值，另一个值会等比例缩放--好处是图片不会变形 -->
    <img src="暴怒的狮子.gif" alt="暴怒的狮子" title="title提示文本" width="500px">
 </body>

特点：

单标签
img标签需要展示对应的效果，需要借助标签的属性进行设置

标签的完整结构图：

属性注意点：

1 . 标签的属性写在开始标签内部
2 . 标签上可以同时存在多个属性
3 . 属性之间以空格隔开
4 . 标签名与属性之间必须以空格隔开
5 . 属性之间没有顺序之分

3.1.2 图片标签的src属性
属性名：src
属性值：目标图片的路径
注意点：

当前网页和目标在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）
路径的情况有很多，详情见 3.2 路径
3.1.3 图片标签的alt属性
属性名：alt
属性值：替换文本
当图片加载失败时，才显示alt的文本
当图片加载成功时，不会显示alt的文本

3.1.4 图片标签的title属性
属性名：title
属性值：提示文本

当鼠标悬停时，才会显示的文本
注意点：title属性不仅可以应用于图片标签，还可以用于其他标签

3.1.5 图片标签的width和height属性
属性名：width和height
属性值：宽度和高度（数字）
注意点：

如果只设置width和height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）
如果同时设置了width和height两个，若设置不当，此时图片可能会变形

3.2 路径

3.2.1 路径的介绍
场景：页面需要加载图片，需要先找到对应的图片
类似于：生活中两个人，我要去找你，需要通过一定的路径才能找到
同理：页面需要找到图片，也是需要通过路径才能找到
路径分为：绝对路径和相对路径（常用）
3.2.2 绝对路径
绝对路径：指目录下的绝对位置，可直接到达目标位置，通常从盘符开始的路径
例如：

盘符开头：E:\Study\web_study\code\day_1\暴怒的狮子.gif
完整的网络地址：https://ts1.cn.mm.bing.net/th/id/R-C.e93050b083d10636a2e4f8c60129d8af?rik=tjE4XcBA6iPV8w&riu=http%3a%2f%2fimage.qianye88.com%2fpic%2f463d981b6686ed6baeb81b7ef38dca1f&ehk=8jJuJrlQzlmwOY5NQmG8klasf33%2bSNdxggZ5w2Bxx54%3d&risl=&pid=ImgRaw&r=0

3.2.3相对路径（常用）
概念普及：

当前文件：当前的html网页
目标文件：要找到的图片
相对路径：从当前文件开始出发找目标文件的过程
相对路径分类：
同级目录
下级目录
上级目录
如图：

3.2.4 相对目录----同级目录
同级目录：当前文件和目标文件是在同一目录中
类似于：

我（当前文件）和你（目标文件）都在大厅（一个文件夹中）
生活中：两个人独处一室，我想找你，直接喊名字即可。

代码步骤：直接写目标文件的名字即可

方法一：<img src ="目标文件.jpg">
方法二：<img src ="./目标文件.jpg">

3.2.5 相对路径----下级目录
下级目录：目标文件在下级目录中
类似于：我在大厅，你在卧室休息，我现在要找到你。

 1. 先知道你去哪里了——房间名：卧室
 2. 进入这个房间——进入
 3. 此时又独处一室——直接喊你名字

代码步骤：

	1.先知道在哪个文件夹里面——文件夹名字
	2.进入这个文件夹—— /
	3.此时看到目标文件，即可直接喊——直接写目标文件名字

3.2.6 相对路径----上级目录
下级目录：目标文件在上级目录中
类似于：你在大厅，我在卧室休息，我现在要找到你。

 1. 先要出去卧室，来到大厅——出去
 2. 此时又独处一室——直接喊你名字

代码步骤：

1.先出当前文件夹，到上一级目录—— ../
2.此时看到目标文件，即可直接喊——直接写目标文件名字

<body>
    <!-- 绝对路径 -->
    <img src="E:\Study\web_study\code\day_1\暴怒的狮子.gif" alt="暴怒的狮子" title="绝对路径" width="200px">
    <br>
    <!-- 相对路径-同级目录-->
    <img src="暴怒的狮子.gif" alt="暴怒的狮子" title="相对路径-同级目录01" width="200px">
    <img src="./暴怒的狮子.gif" alt="暴怒的狮子" title="相对路径-同级目录02" width="200px">
    <br>
    <!-- 相对路径-下级目录 -->
    <img src="下级image/哆啦a梦.gif" alt="哆啦a梦" title="相对路径-下级目录" width="400px">
    <br>
    <!-- 相对路径-上级目录 -->
    <img src="../image/湖边风景图.jpg" alt="湖边风景图 " title="相对路径-上级目录" width="400px">
</body>

3.3 音频标签

3.3.1 音频标签的介绍
场景：在页面中插入音频
代码：

<body>
    <audio src="../music/guardin - you don't know me anymore.mp3" controls loop</audio>
</body>

效果图：

常见属性：

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

注意点：音频标签目前支持三种格式：MP3，Wav，Ogg

3.4 视频标签

3.3.1 音频标签的介绍
场景：在页面中插入视频
代码：

<body>
    <!-- 大部分浏览器内可以让视频自动播放，但是必须加上 muted 单词，实现静音播放-->
    <video src="../video/Go Off.mp4" controls autoplay muted loop></video>
</body>

效果图：

常见属性：

属性名	功能
src	视频的路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器中需配合 muted 实现静音播放）
loop	循环播放

注意点：视频标签目前支持三种格式：MP4，WebM，Ogg

4. 链接标签

4.1 链接标签的介绍

场景:点击之后，从一个页面跳转到另一个页面
称呼：a标签，超链接，锚链接
代码：

<body>
    <!-- href是跳转的地址 -->
    <a href="https://baidu.com" target="_blank">跳转到百度</a>
    <br>
    <a href="./09.HTML视频标签.html" target="_blank">跳转到09.HTML视频标签</a>
    <br>
    <!-- 当在开发网站初期不知道跳转地址，就把href的值写成 # （空链接） -->
    <a href="#" >这是一个空链接</a>
</body>

特点：

1.双标签，内部可以包裹内容
2.如果需要a标签点击之后指定页面，需要设置a标签的href属性

4.2链接标签的target属性

属性名：target
属性值：目标网页的打开方式

取值	效果
_self	默认值，在当前新窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

0遇见你0

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
前端自学历程【二、HTML标签学习】

学习HTML 排版、媒体、链接等基础标签，完成基础网页的开发
复制链接

扫一扫