HTML基础知识——学习记录 标题标签场景：在文章页面中，都离不开标题，用来突出显示文章的主题代码：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