HTML标签学习

一.排版标签

1.标题标签

代码：h系列标签

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

注意：h1标签对于网页尤为重要，开发中有特定的使用场景，如：新闻的标题、网页logo部分

2.段落标签

场景：在新闻和文章的页面中，用于分段显示

代码：<p>我是一段文字</p>

语义：段落

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

 

3.换行标签

场景：让文字强制换行显示

代码：<br>

语义：换行

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

 

4.水平线标签

场景：分割不同主题内容大的水平线

代码：<hr>

语义：主题的分割转换

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

二.文本格式化标签

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

代码：b（加粗） u（下划线） i（倾斜） s（删除线） strong（加粗） ins（下划线） em（倾斜） del（删除线）

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

 

标签语义化，所以推荐使用：strong、ins、em、del，表示的强调语义更强烈

三.媒体标签

1.图片标签

场景：在网页中显示图片

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

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

图片标签的src属性

属性名：src

属性值：目标图片的路径

注意点：当前网页和目标图片在同一个文件夹中，路径直接写目标图片的名字即可（包括后缀名）。路径的情况有很多

图片标签的alt属性

属性名：alt

属性值：替换文本

注意点：当图片加载失败时，才显示alt的文本。当图片加载成功时，不会显示alt的文本。

 

图片标签的title属性

属性名：title

属性值：提示文本 （当鼠标悬停时，才显示文本）

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

 

图片的width和height属性

属性名：width和height

属性值：宽度和高度（数字）

注意点：如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形）。如果同时设置了width和height两个，若设置不当此时图片可能会变形

 

2.路径

路径可分为：绝对路径、相对路径

绝对路径：

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

例如：盘符开头：D:\day01\images\1.jpg 完整的网络地址：https://www.itcast.cn/2018czgw/images/logo.gif

相对路径：

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

概念普及：当前文件（当前的html网页）目标文件（要找到的图片）

同级目录：

当前文件和目标文件在同一目录中

代码步骤：直接写目标文件的名字即可。方法一： 方法二：

VS Code快捷操作：直接敲 ./ 后，会自动提示同级目录中有哪些文件，直接选择即可。

下级目录：

目标文件在下级目录中

代码步骤：先知道在哪个文件夹里面（文件夹名字）。进入这个文件夹。直接写目标文件名字

VS Code快捷操作：直接敲 ./ 后，会自动提示当前目录下有哪些文件夹，直接一层层选择即可。

上级目录：

目标文件在上级目录中

代码步骤：先出当前文件夹，到上一级目录——> ../ 。此时看到目标文件直接写

VS Code快捷键操作：直接敲 ../ 后，会自动提示上级目录下有文件，直接选择即可。

3.音频标签

场景：在页面中插入音频

代码：<audio src="./music.mp3" controls></audio>

常见属性：src（音频的路径）controls（显示播放的控件）autoplay（自动播放，部分浏览器不支持）loop（循环播放）

当部分浏览器不支持时，右击鼠标，点击open in other browsers选择IE浏览器即可

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

4.视频标签

场景：在页面中插入视频

<video src="./video.mp4" controls></video>

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

四.链接标签

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

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

<a href="./目标网页.html">超链接</a>

特点：双标签，内部可以包裹内容。如果需要a标签点击之后去指定页面，需要设置a标签的href属性

链接标签的href属性

属性名：href

属性值：点击之后跳转去哪一个网页（目标网页的路径）

外部链接:<a href="http://www.baidu.com/">百度一下</a>
内部链接：<a href="./目标网页.html">目标网页</a>

 

链接标签的target属性

属性名：target

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

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

空连接

代码：<a href="#">空链接</a>

 功能：点击之后回到网页顶部、开发中不确定该链接最终跳转位置，用空链接占个位置

HTML标签学习
1.排版标签：
标题h系列、段落p、换行br、水平线hr
2.文本格式化标签：
加粗strong、下划线ins、倾斜em、删除线del
3.图片标签：
img标签+src属性+alt属性+titl属性+width属性+height属性
4.路径：
相对路径：同级目录+下级目录+上级目录
5.音频标签、视频标签：
audio标签、video标签+src属性+controls属性
6.链接标签：
a标签+href属性+target属性

五.列表标签

无序列表

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

标签组成：ul（表示无序列表的整体，用于包裹li标签）li（表示无序列表的每一项，用于包含每一行的内容）

显示特点：列表的每一项默认显示圆点标识

注意点：ul标签中只允许包含li标签、li标签可以包含任意内容

有序列表

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

标签组成：ol（表示有序列表的整体，用于包裹li标签）li（表示有序列表的每一项，用于包含每一行的内容）

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

注意点：ol标签中只允许包含li标签、li标签可以包含任意内容

自定义列表

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

标签组成：dl（表示自定义列表的整体，用于包裹dt / dd标签）dt（表示自定义列表的主题）dd（表示自定义列表的针对主题的每一项内容）

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

注意点：dl标签只允许包含dt / dd标签、dt / dd标签可以包含任意内容

 

六.表格标签

表格的基本标签

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

基本标签：table（表格整体，可用于包裹多个tr）tr（表格每行，可用于包裹td）td（表格单元格，可用于包裹内容）

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

表格的相关属性

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

常见相关属性：border（属性值：数字、效果：边框宽度）、width（属性值：数字、效果：表格宽度）、height（属性值：数字、效果：表格高度）

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

 

表格标题和表头单元格标签

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

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

注意点：caption标签书写在table标签内部、th标签书写在tr标签内部（用于替换td标签）

表格的结构标签

场景：让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰

结构标签：thead（表格头部）tbody（表格主体）tfoot（表格底部）

注意点：表格结构标签内部用于包裹tr标签、表格的结构标签可以省略

 

合并单元格

合并单元格步骤：

1.明确合并哪几个单元格

2.通过左上原则，确定保留谁删除谁（1、上下合并：只保留最上的，删除其他 2、左右合并：只保留最左的，删除其他）

3.给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

roespan（属性值：合并单元格的个数、说明：跨行合并，将多行的单元格垂直合并）colspan（属性值：合并单元格的个数、说明：跨列合并，将多列的单元格水平合并）

注意点：只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead、tbody、tfoot）

七.表单标签

1、input系列标签

场景：在网页中显示收集用户信息的表单效果、如：登录页、注册页

标签名：input（input标签可以通过type属性值的不同，展示不同效果）

 

ype属性值：

（1）.text（文本框，用于输入单行文本）

常用属性：placeholder（占位符。提示用户输入内容的文本）

value属性：用户输入的内容，提交之后发送给后端服务器

name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义

<input type="text" value="帅哥" name="nickname">

（2）.password（密码框，用于输入密码）

常用属性：placeholder（占位符。提示用户输入内容的文本）

注意点：type属性值不要拼错或者多加空格，否则相当于设置了默认值状态：text——>文本框

（3）.radio（单选框，用于多选一）

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

checked（默认选中）

注意点：name属性对于单选框有分组功能、有相同name属性值的单选框为一组、一组中只能同时有一个被选中

（4）.checkbox（多选框，用于多选多）

常用属性：checked（默认选中）

（5）.file（文件选择，用于之后上传文件）

常用属性：multiple（多文件选择）

（6）.submit（提交按钮，用于提交），reset（重置按钮，用于重置），button（普通按钮，默认无功能，之后配合js添加功能）

注意点：如果需要实现以上按钮功能，需要配合form标签使用、form使用方法：用form标签把表单标签一起包裹起来即可

2、button按钮标签

type属性值（同input的按钮系列）：

submit（提交按钮，点击之后提交数据给后端服务器）reset（重置按钮，点击之后恢复表单默认值）button（普通按钮，默认无功能，之后配合JS添加功能）

注意点：谷歌浏览器button默认是提交按钮、button标签是双标签，更便于包裹其他内容：文字，图片等。

3、select下拉菜单标签

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

标签组成：select（下拉菜单的整体）option（下拉菜单的每一项）

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

4、textarea文本域标签

场景：在网页中提供可输入多行文本的表单控件

常见属性：cols（规定了文本域内可见宽度）、row（规定了文本域内可见行数）

注意点：右下角可以拖拽改变大小、实际开发时针对于样式效果推荐用CSS

5、label标签

场景：常用于绑定内容与表单标签的关系

使用方法1：1、使用label标签把内容（如：文本）包裹起来 2、在表单标签上添加id属性 3、在label标签的for属性中设置对应的id属性值

使用方法2：1、直接使用label标签把内容（如：文本）和表单标签一起包裹起来 2、需要把label标签的for属性删除即可

八.语义化标签

1.没有语义的 布局标签div和span

场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签

div标签：一行只显示一个（独占一行）

span标签：一行可以显示多个

2.有语义的布局标签

场景：在HTML5中，推出了一些有语义的布局标签供开发者使用

标签：header（网页头部）、nav（网页导航）、footer（网页底部）、aside（网页侧边栏）、section（网页区块）、article（网页文章）

注意点：以上标签显示特点和div一致，但是比div多了不同的语义

九.字符实体

1.HTML的空格合并现象

场景：如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格

2.常见字符实体

场景：在网页中展示特殊符号效果时，需要使用字符实体替代

结构：&英文；