认识HTML及HTML标签（1） html5

认识HTML 1、什么是HTML
1.1、HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一。
1.2、开发环境：
（1）普通文本编辑器（2）VScode软件
2、HTML文件的组成（扩展名为.html）
代码展示

- 锐客网你好

HTML是由html、head、title、body着四种基础标签组成。（在VScode中使用control+！可以快速生成HTML基本标签）

3、HTML标签
3.1、html标签主要分为两个大类：双标签和单标签 3.1.1、双标签由<起始标签>和组成代码展示

双标签演示 - 锐客网本赛季欧冠冠军会花落谁家？

在这段代码中我使用了一个段落标签,里面包含了一个起始标签和结束标签，在实际环境中，双标签的起始标签和结束标签缺一不可。并且绝大部分标签都为双标签。

3.1.2、单标签则只有一个标签代码展示

单标签演示 - 锐客网本赛季欧冠冠军会花落谁家？会是一支西甲或英超球队

效果展示

文章图片

在这段代码中我使用了一个换行标签,可以看到它只有一个标签，而在实际环境中，单标签只需要写一个标签即可，不需要写一个起始标签，一个结束标签。

3.2、HTML常用标签： 3.2.1、常用单标签和双标签

	段落标签
	标签标签（n的取值为1-6，数字越大字体越小）
	块级标签，不会自动换行
	换行标签
	水平分割线

文本格式化标签
`内容或`	斜体字体标签
`内容或`	字体加粗标签
`内容或`	下划线标签
`内容或`	删除线标签

特殊字符
	空格
`©`	版权符号
`®`	注册商标符号
`°`	摄氏度符号
`±`	正负号
`×`	乘号
`÷`	除号

3.2.2、图像标签（1）图像格式主要分为三种：
jpg格式：可显示颜色最多（256种真彩色），但体积较大，不利于网络传输
png格式：可显示颜色无法和jpg比拟，但体积小，支持透明，利于网络传输
gif格式：小动画形式，同样体积小、支持透明以及利于网络传输
（2）标签

 

文章图片

效果展示

文章图片

3.2.3、列表标签（1）无序标签
代码展示

无序标签 - 锐客网欧冠八强球队：利物浦曼城切尔西皇家马德里马德里竞技比利亚雷亚尔拜仁慕尼黑本菲卡

效果展示

文章图片

无序标签就是列表前并无任何数字或有关顺序标记符号。就像代码中展示的，无序列表的列表项通常通过一个字符进行装饰，这些字符的形式可以是点，圆乃至方形

（2）有序列表
代码展示

有序标签 - 锐客网欧冠八强球队：利物浦曼城切尔西皇家马德里马德里竞技比利亚雷亚尔拜仁慕尼黑本菲卡

效果展示

文章图片

有序标签则和无序标签相反有序列表的条目会和它前面的编号标记一起显示，编号标记可以是数字或者字母。

3.2.4、超链接（1）作用
当用户点击文字、图像、视频等页面元素时，页面会发生跳转。我们叫这些页面元素为超链接。
（2）标签
文本/图像/多媒体

a标签中属性	作用
href	值为一个URL地址，用于跳转至链接地址
target	页面显示位置，取值有’_self’和’_blank’

4、标签的属性：放在起始标签的属性中，以"键=值"方式出现
代码展示

属性 - 锐客网本赛季欧冠冠军会花落谁家？会是一支西甲或英超球队

5、颜色的使用（1）使用颜色名：如red、blue、green
（2）使用十六进制颜色：如#rrggbb（#rgb），每一位取值最大为F
（3）颜色函数：rgb（r，g，b），rgba（r,g,b,a)，rgb最大值为225
6、设置页面的背景色或背景图像（1）背景图像：
使用背景图像则在的起始标签中放入属性。
（2）背景色：
使用背景颜色则在的起始标签中放入属性。（需要注意的是这个属性已经在最新的HTML5中被淘汰，所以不推荐使用）
7、音频标签元素用于在文档中嵌入音频内容。元素可以包含一个或多个音频资源，这些音频资源可以使用 src 属性输入URL来进行描述
autoplay属性：音频会尽快自动播放，不会等待整个音频文件下载完成。
controls属性：如果声明了该属性，浏览器将提供一个包含声音，播放进度，播放暂停的控制面板，让用户可以控制音频的播放。
代码展示