HTML标签基础知识

关于HTML5标签的基础知识

---

目录

前言

一、标签学习

1.标题标签

2.段落标签

3.换行标签：

​4.水平线标签

4.水平线标签

二、文本格式化标签

1.介绍​

2.图片标签

3.路径

4.音频标签

5.视频标签

三、链接标签

1.介绍

2.target属性

---

前言

看网上视频写的HTML笔记

上一篇文章末写了标签的更基本内容这里接着写笔记

一、标签学习

1.标题标签

代码：h系列标签

1级标题
2级标题
3级标题
4级标题
5级标题
6级标题

语义：1~6级标题，重要程度依次递减

进入vscode：输入h1回车自动生成格式

 

特点：

1. 文字都有加粗
2. 文字都有变大，并且从h1->h6逐渐变小
3. 独占一行

2.段落标签

代码：

我是一段文字

语义：段落

    
    
    
    


    
电吉他是现代科学技术的产物，从外型到音响都与传统的吉他有着明显的差别。琴体使用新硬木制成，配有音量、音高调节器(琴钮)以及颤音结构(摇杆)等装置。配合效果器的使用，电吉他有很强的表现力，在现代音乐中有很重要的位置。现在多用于歌曲伴奏。
    
1920至1930年间，有人试着将不同的pick-up 拾音器装在吉他上。 rowe-deamond公司第一个发明出可以夹在吉他音孔上的拾音器，但真正发展出“电吉他”的应属Gibson。早期“空心电吉他”只是将一个拾音器装在有着拱形面板

vscode中查看->自动换行:可以将上面很长的文字换行不至于像上面那样很长一截

特点：

1. 段落之间有空隙
2. 独占一行

3.换行标签：

    
    
    
    


    
电吉他是现代科学技术的产物
从外型到音响都与传统的吉他有着明显的差别。琴体使用新硬木制成，配有音量、音高调节器(琴钮)以及颤音结构(摇杆)等装置。配合效果器的使用，电吉他有很强的表现力，在现代音乐中有很重要的位置。现在多用于歌曲伴奏。
    
1920至1930年间，有人试着将不同的pick-up 拾音器装在吉他上。 rowe-deamond公司第一个发明出可以夹在吉他音孔上的拾音器，但真正发展出“电吉他”的应属Gibson。早期“空心电吉他”只是将一个拾音器装在有着拱形面板

4.水平线标签

代码：

---

特点：单标签，在页面中显示一条水平线。

    
文章标题
    

    
电吉他是现代科学技术的产物
从外型到音响都与传统的吉他有着明显的差别。琴体使用新硬木制成，配有音量、音高调节器(琴钮)以及颤音结构(摇杆)等装置。配合效果器的使用，电吉他有很强的表现力，在现代音乐中有很重要的位置。现在多用于歌曲伴奏。
    
1920至1930年间，有人试着将不同的pick-up 拾音器装在吉他上。 rowe-deamond公司第一个发明出可以夹在吉他音孔上的拾音器，但真正发展出“电吉他”的应属Gibson。早期“空心电吉他”只是将一个拾音器装在有着拱形面板

二、文本格式化标签

1.介绍

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

代码：

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

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

语义：下边突出重要性的强调语境

eg：

    加粗
    

    jiacu

 可以看出和视觉上没区别，只是strong更有强调语义。

2.图片标签

场景：网页中显示图片

代码：

特点：

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

src属性：

1. 目标图片的路径
2. 注意点：当前网页和图片在同一文件夹中，路径直接写目标图片的名字即可。其余情况后面做介绍。
3. 属性之间必须以空格隔开
4. 属性之间没有顺序之分

---

 这是在代码文件目录下。

• 图片标签的alt属性

属性名：alt

属性值：替换文本

（当图片加载失败时，才显示alt文本，成功时不会显示）

•  图片标签的title属性

属性名：title

属性值：提示文本

（当鼠标悬停时，才显示的文本）

注意点：title属性不仅仅可以用于图片标签

•  width和height属性

属性名：width和height

属性值：宽度和高度

注意点：

如果只设置width或height，图片等比例改变，都设置则变形。

3.路径

绝对路径（了解）：目录下的绝对位置，可直接达到目标位置，通常从盘符开始的路径。

相对路径（常用）：从当前文件（html）开始找目标文件（eg：gjf）的工程。

1. 同级目录：way1： way2:
2. 下级目录：目标文件在下级目录。

  

    3.上级目录：目标文件在上级目录 

组合使用：

4.音频标签

 代码：

常见属性：

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

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

5.视频标签

代码：

常见属性：

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

 ps:若视频打不开，可能问题：video支持的音频流是mp4a，视频流是H264，你需要用格式工厂软件设置。

注意点：

视频目前支持三种格式：MP4，WebM，Ogg

三、链接标签

1.介绍

• 代码：超链接
• 特点：双标签内部可以包裹内容，如果需要a标签点击之后去指定界面，需要设置a标签的href属性

  
    跳转到百度
  
    
  
  
    跳吖
  

  当开发初期，不知道跳转地址时，href的值书写#（空链接）

2.target属性

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

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

eg：跳转到百度