关于HTML5标签的基础知识
目录
前言
看网上视频写的HTML笔记
上一篇文章末写了标签的更基本内容这里接着写笔记
一、标签学习
1.标题标签
代码:h系列标签
<h1>1级标题</h1>
<h2>2级标题</h2>
<h3>3级标题</h3>
<h4>4级标题</h4>
<h5>5级标题</h5>
<h6>6级标题</h6>
语义:1~6级标题,重要程度依次递减
进入vscode:输入h1回车自动生成格式
特点:
- 文字都有加粗
- 文字都有变大,并且从h1->h6逐渐变小
- 独占一行
2.段落标签
代码:<p>我是一段文字</p>
语义:段落
<!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>1920至1930年间,有人试着将不同的pick-up 拾音器装在吉他上。 rowe-deamond公司第一个发明出可以夹在吉他音孔上的拾音器,但真正发展出“电吉他”的应属Gibson。早期“空心电吉他”只是将一个拾音器装在有着拱形面板</p>
</body>
</html>
vscode中查看->自动换行:可以将上面很长的文字换行不至于像上面那样很长一截
特点:
- 段落之间有空隙
- 独占一行
3.换行标签:<br>
<!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>电吉他是现代科学技术的产物<br>从外型到音响都与传统的吉他有着明显的差别。琴体使用新硬木制成,配有音量、音高调节器(琴钮)以及颤音结构(摇杆)等装置。配合效果器的使用,电吉他有很强的表现力,在现代音乐中有很重要的位置。现在多用于歌曲伴奏。</p>
<p>1920至1930年间,有人试着将不同的pick-up 拾音器装在吉他上。 rowe-deamond公司第一个发明出可以夹在吉他音孔上的拾音器,但真正发展出“电吉他”的应属Gibson。早期“空心电吉他”只是将一个拾音器装在有着拱形面板</p>
</body>
</html>
4.水平线标签
代码:<hr>
特点:单标签,在页面中显示一条水平线。
<body>
<h1>文章标题</h1>
<hr>
<p>电吉他是现代科学技术的产物<br>从外型到音响都与传统的吉他有着明显的差别。琴体使用新硬木制成,配有音量、音高调节器(琴钮)以及颤音结构(摇杆)等装置。配合效果器的使用,电吉他有很强的表现力,在现代音乐中有很重要的位置。现在多用于歌曲伴奏。</p>
<p>1920至1930年间,有人试着将不同的pick-up 拾音器装在吉他上。 rowe-deamond公司第一个发明出可以夹在吉他音孔上的拾音器,但真正发展出“电吉他”的应属Gibson。早期“空心电吉他”只是将一个拾音器装在有着拱形面板</p>
</body>
二、文本格式化标签
1.介绍
场景:需要让文字加粗,下划线,倾斜,删除线等效果。
代码:
标签 | 说明 |
b | 加粗 |
u | 下划线 |
i | 倾斜 |
s | 删除线 |
标签 | 说明 |
strong | 加粗 |
ins | 下划线 |
em | 倾斜 |
del | 删除线 |
语义:下边突出重要性的强调语境
eg:
<b>加粗</b>
<br>
<strong>jiacu</strong>
可以看出<b>和<strong>视觉上没区别,只是strong更有强调语义。
2.图片标签
场景:网页中显示图片
代码:<img src=" " alt=" ">
特点:
- 单标签
- img标签需要展示对应的效果,需要借助标签的属性进行设置。
src属性:
- 目标图片的路径
- 注意点:当前网页和图片在同一文件夹中,路径直接写目标图片的名字即可。其余情况后面做介绍。
- 属性之间必须以空格隔开
- 属性之间没有顺序之分
<img src="电吉他.jfif">
这是在代码文件目录下。
- 图片标签的alt属性
属性名:alt
属性值:替换文本
(当图片加载失败时,才显示alt文本,成功时不会显示)
<body>
<img src="电吉他q.jfif" alt="elec guitar">
</body>
- 图片标签的title属性
属性名:title
属性值:提示文本
(当鼠标悬停时,才显示的文本)
注意点:title属性不仅仅可以用于图片标签
<body>
<img src="电吉他.jfif" alt="elec guitar" title="这是title文字鼠标悬停显示">
</body>
- width和height属性
属性名:width和height
<body>
<img src="image/guitar.jpeg">
</body>
属性值:宽度和高度
注意点:
如果只设置width或height,图片等比例改变,都设置则变形。
3.路径
绝对路径(了解):目录下的绝对位置,可直接达到目标位置,通常从盘符开始的路径。
相对路径(常用):从当前文件(html)开始找目标文件(eg:gjf)的工程。
- 同级目录:way1:<img src="目标图片.gif"> way2:<img src="./目标图片.gif">
- 下级目录:目标文件在下级目录。<img src="images/目标图片.gif">
<body>
<img src="image/guitar.jpeg">
</body>
3.上级目录:目标文件在上级目录 <img src="../目标图片.gif">
组合使用:
4.音频标签
代码:<audio src="./music.mp3" controls></audio>
常见属性:
属性名 | 功能 |
src | 音频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(一些浏览器不支持) |
loop | 循环播放 |
<body>
<audio src="./music.mp3" controls loop></audio>
</body>
注意点: 音频标签支持三种格式:MP3,Wav,Ogg
5.视频标签
代码:<video src="./video.mp4" controls></video>
常见属性:
属性名 | 功能 |
src | 视频的路径 |
controls | 显示播放的控件 |
autoplay | 自动播放(谷歌浏览器中需配合muted实现静音播放) |
loop | 循环播放 |
ps:若视频打不开,可能问题:video支持的音频流是mp4a,视频流是H264,你需要用格式工厂软件设置。
注意点:
视频目前支持三种格式:MP4,WebM,Ogg
三、链接标签
1.介绍
- 代码:<a href="./目标网页.html">超链接</a>
- 特点:双标签内部可以包裹内容,如果需要a标签点击之后去指定界面,需要设置a标签的href属性
<body> <a href="https://www.baidu.com/">跳转到百度</a> <br> <a href="./图片标签.html">跳吖</a> </body>
当开发初期,不知道跳转地址时,href的值书写#(空链接)
2.target属性
- 属性名:target
- 属性值:目标网页的打开形式
取值 | 效果 |
_self | 默认值,在当前窗口中跳转(覆盖原网页) |
_blank | 在新窗口跳转(保留原网页) |
eg:<a href="https://www.baidu.com/" target="_blank">跳转到百度</a>