标题标签

场景：在文章页面中，都离不开标题，用来突出显示文章的主题
代码：h系列标签

<h1>h1标签</h1>
<h2>h2标签</h2>
<h3>h3标签</h3>
<h4>h4标签</h4>
<h5>h5标签</h5>
<h6>h6标签</h6>

语义：1~6级标题，重要程度依次递减
特点：
- 文字加粗
- 文字变大，h1->h6文字逐渐减小
- 独占一行

# 段落标签 - 场景：在文章页面中，用于分段显示 - 代码：```

内容

``` - 语义：段落 - 特点： - 段落之间存在间隙 - 独占一行

# 换行标签 - 场景：让文字强制换行显示 - 代码：```
``` - 语义：换行 - 特点： - 单标签 - 让文字强制换行 # 文本格式化标签 - 场景：需要让文字加粗，下划线，倾斜，删除线等效果 - 代码： |标签|详细名称|说明| |---| |b|strong|加粗| |u|ins|下划线| |i|em|倾斜| |s|del|删除线| - 语义:突出重要性强调语境

# 图片标签 - -场景：在网页中显示图片 - 代码：``` ``` - 特点： - 单标签 - img标签需要展示对应的效果，需要借助标签的属性进行设置 - 属性 |属性|说明| |---| |alt|单图片加载失败显示alt内容| |title|当鼠标停留在图片时，才会显示title的内容（可用于其他标签）| |width/height|图片的宽度和高度，当只设置一项的时候，图片会等比例缩放|

# 水平线标签 - 场景：分割不同主题内容的水平线 - 代码：```

``` - 语义：主题的分割转换 - 特点： - 单标签 - 在页面中显示一条水平线

# 音频标签介绍 - 场景在页面插入音频 - 代码 ```

``` - 属性 |属性名|功能| |---| |src|音频的路径| |controls|显示播放的控件| |autoplay|自动播放（部分浏览器不支持）| |loop|循环播放| - 注意：视频标签目前支持三种格式：MP3，Wav，Ogg

# 视频标签介绍 - 场景在页面插入音频 - 代码 ```

``` - 属性 |属性名|功能| |---| |src|音频的路径| |controls|显示播放的控件| |autoplay|自动播放（谷歌浏览器支持需要配置muted）| |loop|循环播放| - 注意：视频标签目前支持三种格式：MP4，WebM，Ogg

# 超链接 1. 场景点击之后，从一个页面跳到另一个页面 2. 代码 ```名字``` 3. 特点： 4. 双标签，内部可以包裹内容 5. 如果需要a标签点击后去指定页面，需要设置a标签的href属性 6. 属性属性名：target 属性值：目标网页的打开方式 |取值|功能| |---| |_self|默认值,在当前窗口中跳转（覆盖原网页）| |_blank|在新窗口中跳转（保留原网页）| 代码：```JaysonBLog```

# 列表标签 ## 无序列表 - 场景：在网页中表示一组无顺序的列表 - 代码： ```html

内容

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

显示特点：
- 列表的每一项前默认显示圆点
注意点：
- url标签中只允许包含li标签
- li标签可以包含任意内容

## 有序列表 - 场景： - 在网页中表示一组有顺序的列表 - 代码： ```html

内容

``` - 标签组成： |标签名|说明| |---| |ol|表示有序列表的整体，用于包裹li标签| |li|表示有序列表的每一项，用于包含每一项的内容|

显示特点：
- 列表的每一项前默认显示圆点
注意点：
- url标签中只允许包含li标签
- li标签可以包含任意内容

## 自定义列表 - 场景： - 在网页的底部导航中通常会使用自定义列表 - 代码： ```html

主题: 内容; 内容

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

显示特点：
- dd前会默认缩进效果
注意点：
- dl标签中只允许包含dt/dd标签
- dt标签可以包含任意内容

# 表格标签 - 场景：在网页中以行+列表的单元格的方式整齐展示和数据 - 代码： ```html

内容

``` - 基本标签： |标签名|说明| |---| |table|表格整体，可用于包裹多个tr| |tr|表格每行，可用于包裹td| |td|表格单元格，可用于包裹内容|

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

## 表格属性 - 场景：设置表格基本展示效果 - 常见相关属性： - 代码：`````` |属性名|属性值|效果| |---| |border|数字|边框宽度| |width|数字|表格宽度| |height|数字|表格高度|

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

## 表格标题和表头单元格标签 - 场景：在表格中表示整体大标题和小一列小标题 - 代码： ```html

表格标题
表头	表头	表头

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

注意点：: caption标签书写在table标签内部; th标签书写在tr标签内部

## 表格的结构标签（了解） - 场景：让表格的内容结构分组，突出表格的不同部分（头部，主体，底部），使语义更加清晰 - 结构标签 |标签名|名称| |---| |thead|表格头部| |tbody|表格主体| |tfoot|表格底部|

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

## 合并单元格-代码实现 - 合并步骤： 1. 明确合并哪几个单元格 2. 通过左上原则，确定保留谁删除谁 - 上下合并 --> 保留最上面的单元格，删除其他的单元格 ```html 小哥哥上下合并的单元格小哥哥真帅气小姐姐小姐姐真漂亮 ``` - 左右合并 --> 保留最左面的单元格，删除其他的单元格 ```html 总结左右合并的单元格 ``` 3. 给保留的其他单元格设置： - 跨行合并（rowspan） - 跨列合并（colspan） |属性名|属性值|说明| |---| |rowspan|合并单元格个数|跨行合并，将多行的单元格垂直合并| |colspan|合并单元格个数|跨列合并，将多列的单元格水平合并|

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

# 表单标签 ## input系列标签基本介绍 - 场景：在网页中显示收集用户信息的表单效果 - 标签名：input - input标签可以通过type属性值的不同，展现的不同效果 - type属性值： |标签名|type属性值|类型|说明| |---| |input|text|文本框|用于输入单行文本| |input|password|密码框|用于输入密码| |input|radio|单选框|用于多选一| |input|checkbox|多选框|用于多选多| |input|file|文件选择|用于上传文件| |input|submit|提交按钮|用于提交| |input|reset|重置按钮|用于重置| |input|button|普通按钮|默认无功能，之后配合js添加功能|

### input系列标签-文本框 - 场景：在网页中显示输入的单行文本的表格控件 - type属性值：text/password - 代码：`````` - 常用属性： |属性名|说明| |---| |placeholder|占位符，提示用户输入的内容|

### input系列标签-单选框 - 场景：在网页中显示多选一的单选表单控件 - type属性值：radio - 代码： ```html

注意点：

name属性值对于单选框有分组功能

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

### input系列标签-文件选择 - 场景：在网页中显示文件选择的表单控件 - type属性：file - 代码：`````` - 常用属性： |属性名|说明| |---| |multiple|多文件选择|

### input系列标签-按钮 - 场景：在网页中显示不同功能的按钮表单控件 - type属性值： |标签名|type属性值|类型|说明| |---| |input|submit|提交按钮|点击之后提交数据给后端服务器| |input|reset|重置按钮|点击之后恢复表单默认值| |input|button|普通按钮|默认无任何功能，之后搭配js添加功能|

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

## button按钮标签 - 场景：在网页中显示用户点击的按钮 - 标签名：button - type属性值（同input的按钮一样）： |标签名|type属性值|类型|说明| |---| |button|submit|提交按钮|点击之后提交数据给后端服务器| |button|reset|重置按钮|点击之后恢复表单默认值| |button|button|普通按钮|默认无任何功能，之后搭配js添加功能|

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

## select下拉菜单标签 - 场景：在网页中提供多个选择项的下拉菜单控件 - 标签组成： - select标签：下拉菜单的整体 - option标签：下拉菜单的每一项 - 常见属性： - selected：下拉菜单的默认选中

## textarea文本域标签 - 场景：在网页中提供可输入多行文本的表单控件 - 标签名： textrea - 常见属性 |属性名|说明| |---| |cols|规定了文本域内可见宽度| |rows|规定了文本域内可见行数|

注意点：: 右下角可以拖拽改变大小; 实际开发时针对于样式效果推荐css设置

## label标签 - 场景：常用于绑定内容与标签关系 - 标签名：label - 使用方法①： 1. 使用label标签把内容（如文本）包裹起来 2. 在表单标签添加id属性 3. 在label标签的for属性中设置对应的id值 ```html 内容内容 ``` - 使用方法②： 1. 直接使用label标签把内容（如：文本）和表单标签一起包裹起来 2. 需要把label标签和for标签删掉即可 ```html 内容

内容

```

#语义化标签 ##没有语义化布局标签-div和span - 场景：实际开发网页会大量频繁使用div和span这两个没有语义的布局标签 - div标签：一行只显示一个（独占一行） - span标签：一行可以显示多个 ##有语义化的布局标签 - 场景：在html5新版本中，推出了一些有语义的布局标签供开发者使用（手机端使用） - 标签： |标签名|语义| |---| |header|网页头部| |nav|网页导航| |footer|网页底部| |aside|网页侧边栏| |section|网页区块| |article|网页文章|

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

# 字符实体 ## 常见字符实体 - 场景：在网页中展示特殊符号效果时，需要使用字符实体替代 - 结构：&英文; - 常见字符实体： |显示结果|描述|实体名称| |---| |" "|空格|``` ```| |<|小于号|```<```| |>|大于号|```>```| |&|和号|```&```| |"|引号|```"```| |'|撇号|```'(IE不支持)```|

HTML基础知识——学习记录

标题标签