学习HTML标签

 1、排版标签

标题标签、段落标签、换行标签、水平线标签

1.1标题标签

作用：用来突出文章主题

代码格式：<h1> ……</h1>——<h6>……</h6>

语义：1~6及标签，重要程度依次递减（数字越大子就越小）

特点：文字都加粗、都变大、独占一行

1.2段落标签

作用：用于段落划分

代码格式：<p>……</p>

特点：段落之间存在间隙、独占一行

1.3换行标签

作用：让文字强制换行显示

代码格式：<br>

特点：单标签、让文字强制换行

1.4水平线标签

作用分割不同主题内容的水平线

代码格式：<hr>

特点：单标签、在页面上显示一条水平线

2、文本格式化标签

作用：可以让文字加粗、下划线、倾斜、删除线等效果……

标签	说明
b（strong）	加粗
u（ins）	下划线
i（em）	倾斜
s（del）	删除线

好处：对人：好理解，记忆好。对机器：有利于机器解析，对搜索引擎（SEO）有帮助。推荐用括号里的表示的强调语义更强烈。

3、媒体标签

图片标签、路径、音频标签、视频标签

3.1图片标签

作用：在网页中显示图片

代码格式：<img src="" alt=""> 

特点：点标签、img标签需要展示对应的效果，需借助标签的属性进行设置

        属性名：src

        属性值：“目标图片的路径”

               图片在一个文价夹中可以用相对路径

        属性的注意点：

        1、标签的属性写在开始标签内部

        2、标签上可以同时存在多个属性

        3、属性之间以空格隔开

        4、标签名与属性之间必须以空格隔开

        5、属性之间没有顺序之分

        属性名：alt

        属性值：替换文本

                当图片加载失败时，才显示alt中的文本；显示成功则不会显示里面的文本

3.2路径

场景：页面加载需要图片路径

路径可分为两类

绝对路径、相对路径

 3.2.1绝对路径

定义：指目录下的绝对路径位置，可直接到达目标位置，通常从盘符开始的路径

3.2.2相对路径

定义：从当前文件开始出发找目标文件的过程

相对路径分类：同级目录、下级目录、上级目录

 同级目录：直接写目标文件名字即可（vs code ：直接敲./会自动提示同级目录中有哪些文件）

下级目录：先看在那个文件夹里再用vs code：直接敲./逐个找即可

上级目录：先找在那个文件夹到 敲../在下面找即可

3.3音频标签

场景：在页面中插入音频

代码：<audio src="音频的路径"></audio>

目前音频标签支持三种格式：MP3、Wav、0gg

  3.4视频标签

场景：在页面中插入视频

代码：<video src=“视频路径”></video>

视频标签目前支持三种格式：MP5、WebM、0gg

音频和视频标签的属性

属性名	功能
src	视频的路径
controls	显示播放的控件（不写就不能控制音频或视频）
autoplay	自动播放（音频部分浏览器是不支持这个的）（视频：谷歌浏览器中需要配合muted实现静音播放）
loop	循环播放

4、链接标签 

场景：点击后，从一个页面跳转到另个页面

称呼：a标签、超链接、锚链接

代码：<a href=“目标网址的地址”>点击跳转的内容</a>

特点：双标签，内部可以包裹内容

            如果需要a标签点击之后去指定页面，需要设置a标签的href属性

 扩展

空连接

<a href=“#”>空连接</a>

功能：点击之后回到网页顶部

            开发中不确定该链接最终跳转的位置，可以用空连接站个位置

 4.1链接标签的属性

href属性

显示的特点：有下划线、未点击过的a标签默认为蓝色；点后为紫色，删除浏览器历史记录恢复成蓝色

 target属性

属性名：target

属性值：目标网页打开形式

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

5、列表标签

列表特点：按照形式的方式，整齐显示内容

种类：无序列表、有序列表、自定义列表

5.1、无序列表

场景：在网页中表示一组无顺序之分的列表，如新闻列表。

标签的组成：

标签名	说明
ul	表示无序列表的整体，用于包裹li标签
li	表示无序列表的每一项，用于包含每一行的内容

显示特点：每一项前默认显示圆点标识

注意：ul中只允许包含li标签；

           li中可以包含任意内容

5.2、有序列表

场景：在网页中表示一组有顺序之分的列表，如：排行榜

标签的组成：

标签名	说明
ol	表示有序列表的整体，用于包裹li标签
li	表示有序列表的每一项，用于包含每一行的内容

显示特点：每一项前默认显示序号标识

注意：ol中只允许包含li标签；

           li中可以包含任意内容

5.3、自定义列表

场景：在页面的底部导航中通常会使用自定义列表实现。

标签的组成：

标签名	说明
dl	表示自定义列表的整体，用于包裹dt/dd标签
dt	表示自定义列表的主题
dd	表示自定义列表的针对主题的每一项内容

显示特点：dd前会默认显示缩进效果

注意：dl标签只允许包含的dt/dd

           dt/dd标签可以包含任意标签

6、表格标签

场景：在网页中以行+列的单元格的方式整齐展示和数据，如学生的成绩表

标签名	说明
table	整体，可用于包裹多个tr
tr	每行，包裹td
td	单元格，包裹内容

注意：标签的嵌套关系：table>tr>td

6.1、属性

场景：设置表格基本展示效果

属性名	属性值	效果
border	数字	边框宽度
width	数字	表格宽度
height	数字	表格高度

注意点：实际开发针对样式推荐使用CSS设置

6.2、表格标题和表头单元格标题

场景：在表格中表示整体大小标题和一列小标题

其他标签：

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部剧中位置显示
th	表头的单表格	表示一小列标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意点：caption标签写在table标签内部

               th标签书写在tr标签内部（用于替换td标签）

6.3、合并单元格

场景：将水平或垂直多个单元格

属性名	属性值	说明
rowspan	合并单元的格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元的格的个数	跨列合并，将多列的单元格水平合并

注意：只有一个表结构标签中的单元格才能合并，不能跨结构标签合并。

7、表单标签

form标签

属性：action=“提交的地址”

           method=”选择的提交方式“（get（默认是get）、post）

get：在地址栏上可以看到提交的数据因此是不安全的

        在地址栏上的数据有大小限制

post：相对于get来，post方式提交比较安全

注意：当提交是url栏是属性名等于on就是该属性名所在的标签没加value属性

7.1input系列标签的基本介绍

场景：在网页中显示收集用户信息的表达那效果，如登录页面

input标签可以通过type的属性值展示不同的效果

type属性的值

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
	password	密码框，用于输入密码
	radio	单选框，用于多选一
	checkbox	多选框，用于多选多
	file	文件选择，用于之后上传文件
	submit	提交按钮，用于提交点击后会把数据提交到后端服务器
	reset	重置按钮，用于重置点击后恢复表单默认值
	button	普通按钮，默认无功能，之后可配合js添加功能

text文本框

常用属性：placeholder     占位符提示用户输入内容的文本（密码框也可用）

password密码框

注意：type属性值不要拼错或者多加空格个，否则箱单因此设置默认值状态：text--文本框

radio单选框(和多选框一样)

属性名：name：分组。有相同name属性值的的单选框为一组，一组中同时只能由一个被选中

               checked：默认选中（DUOXUANKUANGYEKEYONG ）

注意：name属性对于单选框有分组功能

           有相同name属性值的单选框为一组，一组中只能同时只有一个被选中

flie文件选择

属性：multiple  多文件选择

按钮：submit、reset、button

注意：如果需要实现以上按钮功能，需要配合form标签使用

            form使用方法：用form标签吧表单标签一起包裹起来即可

7.2、select下拉菜单标签

场景：在网页中他提供多个选择项的下拉菜单列表控件

标签的组成：select标签下拉菜单的整体

                      option标签：下拉菜单的每一项

常见属性：selected：下拉菜单的默认先选中

嵌套关系是：select>option