【Web前端】HTML与HTML5 知识点梳理总结（自用笔记版）
个人主页：王子玉博客
收录专栏：HTML&CSS
❤️ 分享网站： 《Python自学网》基础入门到逐步深入 | 适合新手入门到精通 | Web开发、爬虫、自动化运维、自动化测试、GUI图形界面化
如果觉得博主文章对你有所帮助的话，还望大家多多支持呀！关注 | 点赞 | 收藏 | 评论
目录
一、HTML文档结构
二、注释、标签、元素、属性
1.1标签
1.2元素
1.3标签属性
三、内容标签
3.1标题系列标签：h1~h6
3.2段落标签 p
3.3 实体字符
3.4 图片标签 img
3.5 相对路径和绝对路径
3.6 超链接标签 a
3.7 列表标签 ul ol dl
3.8 表格标签table（了解就行）
3.9 表单标签 form
3.10 媒体标签 video audio（HTML5新增）
四、语义化容器布局标签(html5新增)
五、布局常用无语义标签 div span
1）div
2）span
六、元素包含关系
七、常见的文本格式化标签
网页页面常用标签有：标题标签h1~h4、段落标签p、超链接标签a、图片标签img、列表标签ul / li、表单标签from相关、无语义布局标签div/span、H5新增语义布局标签header、article、nav、footer、main、aside、section。用的最多就是div标签，页面的样式统统用css编写，尽管浏览器给一些默认样式不喜欢也照样修改。
一、HTML文档结构
Document
简单文档结构：如下
Document
保存以上，文件格式为.html就是一个html文件了。
二、注释、标签、元素、属性
注释：快捷键 ctrl+/ ,注释的内容不会被浏览器渲染在页面上，给开发者自己看的
1.1标签
标签概念：由尖括号“< >”包围的关键词，一般是成对出现的，标签对中第一个标签是开始标签如
，第二个标签是结束标签如标签格式：
-
双标签：<开始标签>
-
单（空）标签：<标签名/> (没有结束标签)
标签内容：
-
双标签，其内容在两个标签中间
标题
-
单标签，则在标签属性中赋值
1.2元素
HTML 元素：指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
元素的内容：是开始标签与结束标签之间的内容
-
某些 HTML 元素具有空内容 如：
元素格式：<开始标签 属性名="属性值">元素内容
元素 = 开始标签 + 结束标签 + 元素内容 + 属性
1.3标签属性
键值对的格式，属性名不用加双引号，属性值必须加双引号
属性分为局部属性和全局属性：
-
局部属性：某些标签特有的属性，如（a标签的href）
-
全局属性：所有元素通用，如：( title lang )
超链接
段落
总结：
-
一个标签可以拥有多个属性，必须写在开始标签中，位于标签名后面；
-
属性之间不分先后顺序，标签名与属性、属性与属性之间均以空格分开；
-
任何标签都有默认属性，省略该属性则取默认值；
三、内容标签
学习标签就是学习标签的语义，而不是样式，一些标签浏览器自带的样式都可以通过css自己修改
3.1标题系列标签：h1~h6
语义：标题，描述文本的重要程度，表示该文本比较重要，重要性从1到6递减
语法格式：双标签
我是标题1
我是标题2
我是标题3
我是标题4
我是标题5
我是标题6
3.2段落标签 p
语义：表示描述的内容是一个段落
语法格式：双标签
段落内容
3.3 实体字符
作用：实体字符通常用于在页面中显示一些特殊符号
常用实体字符：
| 大于号 > | > |
|---|---|
| 小于号 < | < |
| 空格符号 | |
| 和号 & | & |
| 引号 “ | " |
| 元 ￥ | ¥ |
| 注册商标 ® | ® |
3.4 图片标签 img
语义：在对应位置, 加载指定路径的图片。图片格式有：.jpg、.png、.gif ......
语法格式：单标签
属性：
-
src：文件的路径
-
alt：当图片加载不出来时的替代文本
-
title：鼠标悬停时显示的内容
-
height：图片的高度。单位可为Px
-
width：图片的宽度度。单位可为Px 或 %
3.5 相对路径和绝对路径
路径分类：相对路径、绝对路径
1）相对路径：（站内资源：当前网站的资源）
1.1书写格式：
-
./ 表示当前资源所在的目录,可省略
-
../ 表示上一级目录
1.2举例：
2.1、图像文件和HTML文件位于同一文件夹
只需输入图像文件的名称即可，如
2.2、图像文件位于HTML文件的下一级文件夹
输入文件夹名和图像文件名，之间用“/”隔开，如
2.3、图像文件位于HTML文件的上一级文件夹
在文件名之前加入“../” ，如果是上两级，则需要使用 “../ ../”，以此类推，如
2）绝对路径：（站外资源：非当前网站的资源）
2.1 本地绝对路径
-
c:\images/image.jpg d:\images/image.jpg
2.2 网络绝对路径：url地址
协议名://主机名：端口号/路径 schema://host:port/path 如：https://www.baidu.com/img/flexible/logo/pc/result.png
3.6 超链接标签 a
语义：定义超链接，点击后跳转到另一个链接
语法格式：双标签
超链接内容 常用属性： href target
1）href：规定链接指向的页面的 URL地址
-
普通链接（跳转地址:站内站外）
-
锚链接定位（跳转到同一个页面内的不同位置）
链接文本
跳转的目标位置
-
功能链接（点击后，执行某个功能）
执行js代码弹出你好啊 执行js代码弹出你好啊 点击给我发送邮件 点击给谁拨打电话
2）target ：用于指定链接页面的打开方式
2个属性值：
-
_self 原窗口 （默认值，如果不写target 属性就默认这个值）
-
_blank 新窗口
注意：不仅可以创建文本超链接，在网页中各种网页元素，如图像、表格、音频、视频等都可以添加超链接
3.7 列表标签 ul ol dl
语义：描述一组相关的数据，数据的关联性 (有序或无序)
分类：无序列表 、有序列表、自定义列表
1）无序列表：无序列表的各个列表项之间没有顺序级别之分，是并列的 （无先后之分）
- 列表的项目1
- 列表的项目2
- 列表的项目3
2）有序列表：有序列表即为有排列顺序的列表，其各个列表项按照一定的顺序排列定义 （有先后之分）
- 列表的项目1
- 列表的项目2
- 列表的项目3
3）自定义列表：列表的同时,进行简单的分组
- 名词
- 名词解释1
- 名词解释2
...
- 名词
- 名词解释1
- 名词解释2
...
注意：
-
ul 和 li 成对出现 ，ul中只能嵌套l，直接在ul标签中输入其他标签或者文字的做法是不规范的写法，虽然显示上没有错误
-
li里面可以包括其他元素
-
多级列表可以嵌套（列表里嵌套列表）
3.8 表格标签table（了解就行）
语义：定义一个类似于excel的表格
-
简单的 HTML 表格由 table 元素以及一个或多个 tr、th 或 td 元素组成。
-
先指定行, 在行内部指定列
完整复杂表格：(带有 thead、tbody 以及 tfoot 元素的 HTML 表格)
表格标题
表格表头，组合表格的表头内容
表格内容主体
表格页脚
表格标题
表头1
表头2
表头3
表尾1
表尾2
值1
值2
值3
值1
值2
值3
值1
值2
值3
注意：
-
表格的格式, 如果是复杂版的, 一定要写完整
-
单元格内, 可以存放其他元素（如：input）
-
样式都用css写，border-collapse:collapse （合并边框）写在table标签上
3.9 表单标签 form
概念：表单用于搜集不同类型的用户输入，如用户注册、用户登录等
书写方式：
-
get：表单数据在页面地址栏中是可见的
-
post：安全性更好，在页面地址栏中被提交的数据是不可见的
-
target属性值：_blank（新窗口打开） _self（默认，当前窗口打开） _parent（显示在父框架中） _top(显示在窗口的整个 body 中) framename(显示在命名的 iframe )
1）表单控件 input系列
概念：单标签，通过type属性来指定不同的控件类型
-
快捷输入 : input:type值 -----> 按下tab键
1/常用属性
1.1收集信息类
-
text：普通文本框
-
password：密码框 （输入是密文效果）
-
radio：单选按钮（name值一样，设置value值区分是哪个按钮）
-
checkbox：复选框（name值一样，设置value值区分是哪个按钮）
-
file：文件 （选择一些文件提交）
1.2 按钮类
- reset：重置（把所有输入的或选择的控件内容一键清空）
- submit：提交（把收集的信息提交给后台服务器）
- button：按钮（普通按钮，关联js代可自定义行为）
2/必填信息
name: 表单提交时，有name的字段才会背提交，name名就是参数名
value：在单选按钮或复选框上，value属性是必填属性，其他控件类型的控件不是必填的
-
input控件中默认的文本值（输入的文本框中文本内容就是value值）
-
value以此来区分提交的是什么值，提交的value是给后台看的
3/ 部分可选属性
-
maxlength：控件允许输入的最多字符
-
disabled：禁用此元素，一旦设置后此字段不会被提交，布尔属性， 值为disabled
-
checked：定义选择控件默认被选中的项，布尔属性，值为checked
-
accept：上传文件时类型筛选
-
autofocus：当页面加载时自动获得焦点，布尔属性，值为autofocus
-
placeholder：文本框里显示的提示信息
-
readonly：只读，布尔属性，值为readonly
-
注意：但凡是布尔属性，属性值和属性名是一样的，写一个就行
文本框：
密码框：
性别：
喜欢的漫威电影：
蜘蛛侠
钢铁侠
绿巨人
复仇者联盟
文件：
4/ label标签
概念：用于绑定一个表单元素, 当点击label标签内容的时候, 被绑定的表单元素就会获得输入焦点
-
for 属性规定 label 与哪个表单元素绑定。
-
id ：与label标签绑定 id = for属性的属性值
方式一：
方式二：
5/注意：
-
表单元素必须要有name属性， 因为要用name属性把数据传到服务器
-
其实， 表单中提交的是value值 ，而value值和文本值是对应的
-
提交到后台的书写方式是 name=value&name=value&name=value
2）表单控件textarea（多行文本输入框）
定义：定义多行输入字段（文本域） （如果需要输入大量的信息，就需要用到，如文章简介之类的）
书写格式：双标签
属性：
-
cols：文本区内的可见宽度
-
rows：文本区内的可见行数
-
注意：最好用css的width和height来规定文本框的宽和高
很多属性都适用，如readonly 、disabled、autofocus、placeholder..........
右下角自由拖动输入框大小：
默认可随意拖动，利用css可设置不能拖动——> resize ：none
3）表单控件select+option（下拉菜单）
定义：下拉框选项 （地址选择、分类选择等场景）
书写格式：select双标签 、 至少包含一对option标签
select可包含的标签：
-
option标签：可用选项
-
optgroup标签：选项组 （不加选项组也行）
属性：
1、select标签：
-
name：下拉列表的名称
-
multiple：是否允许多选 (按住ctrl或shift多选)
-
size：下拉列表可见的条目 （数字值）
2、option标签
-
value：默认的文本值
-
selected：默认选中项，布尔属性
3、optgroup 标签
-
label：分组项名字
4）数据列表 datalist
子元素：option ------》有value属性
注意：name属性一定要有
- 该元素本身不会显示到页面，与 input 元素配合使用，来定义 input 可能的值 -------》 利用list 和 id 来关联
- input框列表里， option标签里的value值和文本都会显示出来
定义：元素定义可点击的按钮
6）其他input系列：（HTML5新增）
type属性：一般都有兼容性问题
-
url： URL类型
-
date：日期类型
-
time：时间类型
-
month：月类型
-
week：周类型
-
number：数字类型
-
tel：手机号码
-
search：搜索框
-
color：会显示一个取色板，可以选择颜色
-
email：邮件类型
3.10 媒体标签 video audio（HTML5新增）
1）video（视频）标签：
-
src ： 要播放的视频的URL
-
controls ：（控件） —— 如果出现该属性，则向用户显示控件，比如播放按钮。 布尔属性 controls
-
autoplay ：（自动播放） —— 如果出现该属性，则视频在就绪后马上播放。布尔属性 autoplay
-
loop ：（循环播放）—— 如果出现该属性，则当媒介文件完成播放后再次开始播放。 布尔属性 loop
-
muted ：（静音）——规定视频的音频输出应该被静音。 布尔属性 muted
-
preload ：（预加载） —— 如果出现该属性，则视频在页面加载时进行加载，并预备播放。 布尔属性 preload (如果使用 "autoplay"，则忽略该属性)
-
poster ：（视频封面）—— URL规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
-
width ：设置视频播放器的宽度
-
height：设置视频播放器的高度。
解决视频格式适配问题
source标签：如果存在兼容性问题，可以将多个视频格式的数据源放到source标签中
注意：不同的浏览器支持的音视频格式可能不一致
2）audio（音频）标签
和视频几乎一样，只是没有宽高、视频封面
四、语义化容器布局标签(html5新增)
新特性都有兼容性问题，基本都是IE9以上版本才支持，如果不考虑兼容性问题，才可以使用这些新特性
-
header：通常用于表示网页页头，也可以用于表示文章的头部
-
footer：通常用于表示网页页脚，也可以用于表示文章的尾部
页脚通常包含文档的作者、版权信息、使用条款链接、联系信息等等。
在一个网页页面中可以使用多个
-
main：代表页面的主要部分
main元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容，比如侧栏、导航栏、版权信息、站点标志或搜索表单。
在一个文档中，不能出现一个以上的
元素 。 元素不能是以下元素的后代： 、
-
article：
标签中的内容是独立的、完整的、摘自外部的内容。通常用于表示整篇文章
可以是：博客文章、新闻文章、论坛帖子、网友评论等独立的内容
标签中的内容通常有它自己的标题，甚至有时候还有自己的脚注。
可以嵌套使用，但是一般需要外部内容和内部内容有关系。比如：一篇博客文章，它的评论就可以使用嵌套的形式，将评论内容嵌套在整体内容中。
-
section: 定义文档某个区域的标签。比如章节、页眉、页脚或文档中的其他部分
-
aside：
-
nav：定义导航链接的部分，通常，向其中添加一个
ul或ol列表
五、布局常用无语义标签 div span
1）div
无实际语义，代表一个块区域，内部用于放置其他标签。通用容器元素，什么标签都可以放在里面，包括它本身
结合CSS，对网页结构进行划分布局
2）span
无实际语义， 一般是结合CSS， 控制同一行内的某一小段样式
六、元素包含关系
以前： 块级元素独占一行，行级元素不换行，块级元素可以包含行级元素，行级元素不可以包含块级元素，a元素除外
现在： 元素的包含关系由元素的内容类别决定
查找元素包含关系：
百度： h1 mdn，查看允许内容（去mdn查看）
总结：
-
容器元素中可以包含任何元素
-
a元素几乎可以包含任何元素
-
某些元素有固定的子元素（ul>li,ol>li,dl>dt+dd.........)
-
标题元素和段落元素不能相互嵌套，并且不能包含容器元素
七、常见的文本格式化标签
粗体 （bold）
粗体 语气更强的强调内容
粗体，推荐使用strong
斜体
斜体 强调的内容
斜体，推荐使用em
加删除线的文本 加删除线的文本
已被删除的文本 已被删除的文本
加删除线，推荐使用del
下划线
下划线
下划线，推荐使用ins
上标 上标
下标 下标
小号字 小号字-
b i s u 只有使用， 没有强调的意思
-
strong em del ins 语义更强
HTML相关可以查看官方文档网站：W3school 或 网站：MDN。