内容:标签学习(排版标签、文本格式标签、媒体标签、链接标签、语义化标签)
一、标签
含义:HTML标签是HTML语言中最基本的单位,HTML标签是HTML(标准通用标记语言下的一个应用)最重要的组成部分。
HTML标签的大小写无关的,例如“主体”<body>跟<BODY>表示的意思是一样的,推荐使用小写。
二、排版标签(标题标签、段落标签、换行标签、水平线标签)
2.1、标题标签
1、应用场景:凸显文章主题的地方(例如新闻、文章等)
2、语义:分为1 ~ 6级标题,重要性依次递减
3、特点:文字都有加粗、变大、独占一行
4、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>排版标签</title>
</head>
<body>
<h1>这是一级标题</h1>
<h2>这是二级标题</h2>
<h3>这是三级标题</h3>
<h4>这是四级标题</h4>
<h5>这是五级标题</h5>
<h6>这是六级标题</h6>
</body>
</html>
2.2、段落标签
1、应用场景:用于分段显示
2、语义:段落
3、特点:独占一行
4、代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>段落标签</title>
</head>
<body>
<p>这是段落,独占一行</p>
<p>这是另一段段落</p>
</body>
</html>
2.3、换行标签
1、应用场景:让文字强制换行显示
2、语义:换行
3、特点:单标签、让文字强制换行
4、代码:<br>
2.4、水平线标签
1、应用场景:分割不同主题内容的水平线
2、语义:主题的分割转换
3、特点:单标签、在页面中显示一条水平线
4、代码:<hr>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>换行和水平线标签</title>
</head>
<body>
<div>这是测试换行标签<br>的文字</div>
<hr>
<div>上面一条直线测试水平线标签</div>
</body>
</html>
三、文本格式化标签
1、应用场景:需要让文字加粗、下划线、倾斜、删除线等效果
2、语义:突出重要性的强调语境
3、代码:
strong b 加粗
ins u 下划线
em i 倾斜
del s 删除线
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>测试文本格式化标签</title>
</head>
<body>
<div>
这是<b>一段</b>测试<strong>文本格式化</strong>的<u>标签</u>这是<ins>一段</ins>测试<em>文本</em>格式化的<i>标签</i>这是<del>一段</del>测试<s>文本格式</s>化的标签
</div>
</body>
</html>
四、媒体标签(图片标签、路径、音频标签、视频标签)
4.1、图片标签
1、应用场景:在网页中显示图片
2、特点:单标签、img标签需要展示对应的效果,需要借助标签的属性进行设置
3、代码: <img src="" alt="">
4、常见属性:
alt属性:图片加载失败时,才显示alt的文本内容
title属性:当鼠标悬停时,才显示的文本
width和height:宽度和高度(只设置一个时,会等比例缩放)
5、图像格式:
jpg:有损压缩,色彩丰富图片
GIF:无损压缩,简单动画,背景透明
PNG:无损压缩,透明,交错,动画
4.2、路径:
1、应用场景:页面需要加载图片,需要先找到对应的图片
2、路径分类:
绝对路径(了解):指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
相对路径(常用):从当前文件开始出发找目标文件的过程
分类:
同级目录:<img src="./目标图片" alt="">
下级目录:<img src="文件夹名字./目标图片" alt="">
上级目录:<img src="../目标图片" alt="">
4.3、音频标签
1、应用场景:在页面中插入音频
2、代码:<audio src=""></audio>
3、常见属性:
src 音频的路径
controls 显示播放的控件
autoplay 自动播放(部分浏览器不支持)
loop 循环播放
4、注意点:音频标签目前支持三种格式:MP3、Ogg、Wav(支持老版本浏览器,且自动播放 )
4.4、视频标签
1、应用场景:在页面中插入视频
2、代码:<video src=""></video>
3、常见属性:
src 音频的路径
controls 显示播放的控件
autoplay 自动播放(部分浏览器不支持)
loop 循环播放
4、注意点:视频标签目前支持三种格式:MP4、Ogg、Wav(支持老版本浏览器,且自动播放 )
五、链接标签
1、应用场景:点击之后,从一个页面跳转到另一个页面
2、称呼:a标签、超链接、锚链接
3、代码:<a href="">显示文字</a>
4、特点:双标签,内部可以包裹内容、如果需要a标签点击之后去指定页面,需要设置a标签的href属性
5、常见属性:
target:目标网页的打开方式
取值:_self 默认值,在当前窗口跳转(覆盖原网页)(外国常用)
_blank 在新窗口中跳转(打开新网页)(国内常用)
六、语义化标签
1、没有语义的布局标签:div和span
场景:实际开发网页时会大量频繁的使用到div和span这两个没有语义的布局标签
div:一行只显示一个(独占一行)
span:一行可以显示多个(行内元素)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>语义化标签</title>
</head>
<body>
<div>这是div标签</div><div>这是div标签</div>
<span>这是span标签</span> <span>这是span标签</span>
<br>
</body>
</html>
2、有语义的布局标签
场景:html5新增,手机网页需要
标签:
header:网页头部
nav:网页导航
footer:网页底部
aside:网页侧边栏
section:网页区块
article:网页文章
注意点:
以上标签显示特点和div一致,但是比div多了不同的语义