目录
一、文本标签
1. 单标签
2. 双标签
3. 重要的信息往下面放（自行判断）
4. 不重要的信息往下面放（自行判断）
二、图片标签
三、路径
1. 绝对路径
2.相对路径
(1) 同级目录：
(2) 下级目录：
(3) 上级目录
四、音频标签
五、视频标签
六、链接标签
1. target：
七、列表标签
1. 无序列表
2.有序列表
3.自定义列表标签
八、表格标签
1.表格的基本标签
2.表格标题和表头单元格标签
3.表格的结构标签（了解）
4.合并单元格
九、表单标签
1. input标签
1.2.input系列标签-文本框
1.4.input系列标签-单选框
1.6input系列标签-文件选择
1.7input系列标签-按钮
编辑
2. button按钮标签
3. select下拉菜单标签
4. textarea文本域标签
5. label标签
十、语义化标签
10.1没有语义的布局标签
10.2有语义的布局标签（了解）（移动端手机网页常用）
十一、字符实体
一、文本标签
1. 单标签
<html></html> 网页框架标签
<title></title> 网页标题标签
<body></body> 主题标签
<h1></h1> 一级标题标签
<p></p> 段落标签
2. 双标签
<br> 换行标签
<hr> 水平分割线
3. 重要的信息往下面放（自行判断）
<strong></strong> 加粗
<ins></ins> 下划线
<em></em> 倾斜
<del></del> 删除线
4. 不重要的信息往下面放（自行判断）
<b></b> 加粗
<u></u> 下划线
<i></i> 倾斜
<s></s> 删除线
二、图片标签
<img src=" " alt=" " title=" " width=“ ” height=“ ” >(里面可有多个属性)
src:图片路径
alt:替换文本，当图片不显示时显示
title:提示文本，当鼠标悬停时显示
width：图片宽度
height：图片高度
（设置宽高时只设置宽或者高时另一个高或者宽会等比例设置，目的是使图片不变形）
三、路径
1. 绝对路径
例如：
盘符开头：D:\day01\images\1.jpg
完整的网络地址：http://www.itcast.cn/2018czgw/images/logo.gif(了解)
2.相对路径
(1) 同级目录：
方法一：<img src="目标图片.gif">
方法二：<img src="./目标图片.gif">
(2) 下级目录：
<img src="images/目标图片.gif">
(3) 上级目录
<img src="../images/目标图片.gif">
四、音频标签
例如：<audio src="./music.mp3" controls autoplay loop></audio>
src：音频的路径
controls：显示播放控件
autoplay：自动播放（部分浏览器不支持）
loop：循环播放
五、视频标签
例如：<video src="./video.mp4" controls autoplay muted loop></video>
src：视频的路径
controls：显示播放控件
autoplay：自动播放（谷歌浏览器中需配合muted实现静音播放）
loop：循环播放
六、链接标签
例如：<a href="./目标网页.html" target="_blank">超链接</a>
(开发网站初期，还不知道跳转地址的时候，href的值书写#(空链接) --)
1. target：
_self 默认值，在当前窗口中跳转（覆盖原网页）
_blank 在新窗口中跳转（保留原网页）
七、列表标签
1. 无序列表
ul 表示无序列表的整体，用于包裹li标签
li 表示无序列表的每一项，用于包含每一行的内容
特点：列表的每一项前默认显示圆点标识
注：
- ul标签只允许包含li标签
- li标签可以包含任意内容
2.有序列表
ol 表示有序列表的整体，用于包裹li标签
li 表示有序列表的每一项，用于包含每一行的内容
特点：列表的每一项前默认显示序号标识
注：
- ol标签只允许包含li标签
- li标签可以包含任意内容
3.自定义列表标签
dl：表示自定义列表的整体，用于包裹dt/dd标签
dt：表示自定义列表的主题
dd：表示自定义列表的针对主题的每一项内容
例如：
特点：
- dd前会默认显示缩进效果
注意：
- dl标签中只允许包含dt/dd标签
- dt/dd标签可以包含任意内容
八、表格标签
1.表格的基本标签
例如：
效果：
注意：实际开发时针对于样式效果推荐用css设置
2.表格标题和表头单元格标签
例：
效果：
注意：
- caption标签书写在table标签内部
- th标签书写在tr标签内部（用于替换td标签）
3.表格的结构标签（了解）
作用：让表格内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰
thead：包裹表格头部
tbody：包裹表格主体
tfoot：包裹表格底部
4.合并单元格
- 上下合并-->只保留最上的，删除其他
- 左右合并-->只保留最左的，删除其他
例：
效果：
注意：只用同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨thead、tbody、tfoot）
九、表单标签
1. input标签
- input标签可以通过type属性值的不同，展示不同的效果
例：
效果：
1.2.input系列标签-文本框
例：
效果：
1.4.input系列标签-单选框
例：
效果：
1.6input系列标签-文件选择
例：
1.7input系列标签-按钮
注意：
- 如果需要实现以上按钮功能，需要配合form标签使用
- form使用方法：用form标签把表单标签一起包裹起来即可
例：
效果：
2. button按钮标签
注意：
- 谷歌浏览器中button默认是提交按钮
- button标签是双标签，更便于包裹其他内容：文字、图片等
例：
效果：
3. select下拉菜单标签
例：
效果：
4. textarea文本域标签
注意：
- 右下角可以拖拽改变大小
- 实际开发时针对于样式效果推荐用css设置
例：
效果：
5. label标签
使用label标签点击选择标签时可以直接点击内容
例：
十、语义化标签
10.1没有语义的布局标签
例：
效果：
10.2有语义的布局标签（了解）（移动端手机网页常用）
注：以上标签显示特点和div一致，但是比div多了不同的语义
例：
效果：
十一、字符实体
例：
（直接敲空格浏览器只能识别一个空格，需要多个空格时用字符实体）
效果：文章来源：https://www.toymoban.com/news/detail-821898.html
文章来源地址https://www.toymoban.com/news/detail-821898.html
到了这里，关于前端html学习笔记的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
