一、排版标签
1.标题标签
场景:在新闻和文章的页面中,都离不开标题,用来突出显示文章主题
代码:h系列标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
语义:1~6级标题,重要程度依次递减
特点:
文字加粗
文字都有变大,并且从h1~h6文字逐渐递减
独占一行
2.段落标签
场景:在新闻和文章的页面中,用于分段显示
代码:
<p>我是一段文字</p>
语义:段落
特点:
段落之间存在间隙
独占一行
3.换行标签
场景:让文字强制换行显示
代码:
<br>
特点:
单标签
让文字强制换行
4.水平线标签
场景:分割不同主题内容的水平线
代码:
<hr>
语义:主题的分割转换
特点:
单标签
在页面中显示一条水平线
二、文本格化标签
场景:需要让文字加粗、下划线、倾斜、删除线等效果
代码:
标签 | 说明 |
---|---|
b | 加粗 |
u | 下划线 |
i | 倾斜 |
s | 删除线 |
标签 | 说明 |
---|---|
strong | 加粗 |
ins | 下划线 |
em | 倾斜 |
del | 删除线 |
语义:突出重要性的强调语境
标签语义化
实际项目开发中选择标签的原则:标签语义化
即:根据语义选择对应正确的标签
如:需要写标题,就使用h系列标签
如:需要写段落,就使用p标签
好处:
对人:好理解,好记忆
对机器:有利于机器解析,对搜素引擎(SEO)有帮助
推荐:strong、ins、em、del,表示的强调语义更强烈!
三、媒体标签
3.1 图片标签的介绍
场景:在网页中显示图片
代码:
<img src="" alt="">
特点:
单标签
img标签需要展示对应的效果,需要借助标签的属性进行设置!
属性注意点:
标签的属性写在开始标签内部
标签上可以同时存在多个属性
属性之间以空格隔开
标签名与属性之间必须以空格隔开
属性之间没有顺序之分
3.1.2 图片标签的src属性
属性名:src
属性值:目标图片的路径
注意点:
当前网页和目标图片在同一个文件夹中,路径直接写目标图片的名字即可(包括后缀名)
路径的情况有很多,稍后会详细介绍
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 路径
场景:页面需要加载图片,需要先找到对应的图片
路径可分为:
绝对路径:指目录下的绝对位置,可直接到达目标位置,通常从盘符开始的路径
例如:
盘符开头:D:\test\1.png
完整的网络地址:https://www.itcast.cn/2018czgw/images/logo.gif
相对路径:从当前文件开始出发找到目标文件的过程
概念普及:
当前文件:当前的html网页
目标文件:要找到的图片
相对路径的分类:
同级目录
下级目录
上级目录
3.3 音频标签
场景:在页面上插入音频
代码:
<audio src="" controls></audio>
常见属性:
属性名 | 功能 |
---|---|
src | 音频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(部分浏览器不支持) |
loop | 循环播放 |
注意点:音频标签目前支持三种格式:MP3、Wav、Ogg
3.4 视频标签
场景:在页面中插入视频
代码:
<video src="" controls></video>
常见属性:
属性名 | 功能 |
---|---|
src | 视频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(谷歌浏览器中需配合muted实现静音播放) |
loop | 循环播放 |
注意点:视频标签目前支持三种格式:MP4、WebM、Ogg
4.链接标签
场景:点击之后,从一个页面跳转到另一个页面
称呼:a标签、超链接、锚链接
代码:
<a href="./目标网页.html">超链接</a>
特点:
双标签,内部可以包裹内容
如果需要a标签点击之后去指定页面,需要设置a标签的href属性
链接标签的target属性
属性名:target
属性值:目标网页的打开形式
取值 | 效果 |
---|---|
_self | 默认值,在当前窗口中跳转(覆盖原网页) |
_blank | 在新窗口中跳转(保留原网页) |