详情参考
https://www.w3cschool.cn/htmltags/?
HTML
HTML(Hyper Text Markup Language)，超文本标记语言
标记语言
不仅描述了文档本身的信息，还描述了文档的结构和各部分的作用
HTML标签
标签就是<>这种形式的，描述了文本的作用，含有语义。
PS：HTML标签不区分大小写
HTML标签分类
1. 双标签，有开始标签和结束标签，例如：<html></html>
2. 单标签，没有结束标签，例如：<meta />
但不管是双标签和单标签，在HTML中都是闭合标签，
双：<html></html>；
单：<meta />
# PS：所有标签的应用要有语义，不能为了视觉效果，而滥用标签。
注释
注释：(要养成写注释的习惯)
注意事项：
1. HTML注释不支持嵌套
2. HTML注释不能写在HTML标签内
3. 当然，注释内可以换行
额外知识点以及建议
1. `<img src="xxx" />`
在HTML5中 空格和/ 是可选的
2. 标签尽量不使用大写，因为这是一种过时的写法
3. 属性值的引号是可选的，但按照习惯都会写上，
而且属性值也尽量用小写。
4. 文件名和文件夹名：
a. 尽量用小写；
b. 多个单词之间用 - 分隔，而不是 _ ；
搜索引擎对 - 的支持对 _ 更好，
SEO搜索引擎优化可以让网页在搜索结果中排名靠前。
c. 扩展名使用 .html
5. URL：
http://www.site.com/tofu/index.html
http为模式/协议，告诉浏览器如何处理打开的文件
www.site.com 是主机名称
/tofu/index.html 是路径，路径包含到达这个文件的文件夹以及文件自身的名称。
a). 也可以不包含文件名，那么URL会指向目录中的默认的
index.html、index.htm、default.html等
b). 但最好目录后面有个 /
c). 对于FTP以及几乎所有不使用HTTP协议的URL，都应该使用绝对路径
d). 相对URL是相对当前位置作为参照
6. 使用HTML语义化的标签
语义：描述网页内容的含义
语义的重要性：
1. 无障碍阅读
2. SEO优化
3. 更容易维护代码和CSS样式
7. HTML5是不使用块级、行内这些术语的，但是这样划分有助于理解。
8. 每个HTML标签都称为一个DOM元素
标签属性
1.HTML标签除一些特定属性外可以设置自定义属性例如`data-*`，
一个标签可以设置多个属性用空格分隔，多个属性不区分先后顺序。
2.属性值要用引号包裹起来，通常使用双引号也可以单引号。
3.属性和属性值不区分大小写，但是推荐使用小写。
全局属性
id:
1. 必须以字母开头
2. 其后的字符可以为字母、数字、下划线、-、:
3. 区分大小写
4. 全文档唯一，一个元素只能有一个id
class:
1. 必须以字母开头
2. 其后的字符可以为字母、数字、下划线、-
3. 区分大小写
4. 可以有多个类名，以空格分隔
style
title
hidden
hidden="" / hidden="hidden" / hidden="sflksdjlkfjsdlkjf" 布尔属性
对于布尔属性，HTML5中已经简化，没有写就是没有应用，写了就是应用
accesskey(Chrome 按alt + accesskey)
contenteditable
contenteditable="false" / contenteditable="true"，如果没有显示指定，则从父元素继承
draggable
draggable="false" / draggable="true" / draggable="auto"，连接和图像默认是可以拖动的
spellcheck
spellcheck="false" / spellcheck="true"
1. 对可编辑的元素
2. 对textarea元素
3. 对input元素(非密码)
data-* 属性用于存储私有页面后应用的自定义数据。
data-* 属性由以下两部分组成：
属性名不要包含大写字母，在 data- 后必须至少有一个字符。
该属性可以是任何字符串
注意： 自定义属性前缀 "data-" 会被客户端忽略。
HTML标签元素分类
1. 块元素；
2. 行内元素；
3. 行内块元素
块级元素特点：display:block;
1、每个块级元素都从新的一行开始，并且其后的元素也另起一行。独占一行
2、元素的宽度、高度、外边距、内边距、边框都可设置
3、元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），
除非设定一个宽度。
行内元素特点：display:inline;
1、和其他元素都在一行上；
2、元素的宽度、高度不可设置
3、元素的宽度就是它包含的文字或图片的宽度，不可改变。
行内块状元素的特点：display:inline-block;
1、和其他元素都在一行上；
2、元素的宽度、高度、外边距、内边距、边框都可设置
注意：
1. 我们可以通过display属性对块级元素、行内元素、行内块元素进行转换。
2. h1、h2、h3、h4、h5、h6、p 不能包含块级元素，只能包含行内元素以及行内块元素
文档类型声明
<!DOCTYPE html> (html5)
文档总结构
<!DOCTYPE html>
<html lang="zh-CN"> # lang声明此文档主要语言是中文，以便于网络蜘蛛分类；英文为en (设置为en在中文Google浏览器中会显示是否要翻译)
<head> # 展示一些数据给浏览器
<title></title> # 没有title的文档，没有意义
</head>
<body> # 展示内容给用户
</body>
</html>
######################
Chinese zh-CN
English en
French fr
German de
Italian it
Japanese ja
Russian ru
Spanish es
Korean ko
######################
head中的标签
head中的内容是为浏览器和搜索引擎准备的
base
定义页面中所有相对URL的默认URL
ps: 只能有一个，而且最好放在head第一个元素，这样head其中的元素也可以用
属性：
href:
target:
title
定义网页标题:
主要来告诉用户和搜索引擎当前网页的主要内容是什么。
还是浏览器书签的默认名称
meta
定义元数据
应用：
1，<meta charset="UTF-8"/> # 指定文档的编码类型
1.1，<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" /> # 指定文档的内容类型和编码类型
2，<meta http-equiv="refresh" content="2"/> # 每隔两秒刷新一次网页
3，<meta http-equiv="refresh" content="2;URL=https://v.qq.com/"/> # 两秒后跳转到其他网页
<!-- 告诉IE浏览器以最高模式渲染 -->
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge" />-->
<!-- 如果用户装了GCF，则用GCF渲染页面；如果没有就用IE渲染页面 -->
<!-- GCF(Google Chrome Frame)，是谷歌浏览器内嵌框架，
可以让IE浏览器外观不变，但使用的是Chrome内核
-->
<!--<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />-->
4，<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
5，<meta name="author" content="覃东宇"/> # 声明文档作者
<!-- 为了SEO优化，这两句一定要写 -->
6，<meta name="keywords" content="Python, 全栈, 人工智能"/> # 声明关键字
7，<meta name="description" content="路飞学城"/> # 网页描述信息，将展示在搜索结果中
###
SEO优化：
1. 路径文件夹以及文件名多个单词之间用-连接
2. 使用语义化的标签
3. <meta name="keywords" content="" />
4. <meta name="description" content="" />
style
定义内部样式表:
<style type="text/css">
<!--
css声明...
-->
</style>
link
定义外部样式表:
基本格式：
<link rel="stylesheet" type="text/css" href="外部样式表.css" />
# 定义网站图标
# 建议包含以下两行
<link rel="shortcut icon" type="image/x-icon" href="xxx.icon" />
## type="image/vnd.microsoft.icon" --> 最好用这个，image/x-icon只是为了兼容性
## 默认的图标名称为favicon.ico
<link rel="icon" type="image/gif" href="xxx.gif" />
## type="image/png" ---> 图标一般为16 x 16或者32 x 32
script
定义内部JS代码或者引入外部JS代码
<script type="text/javascript"></script>
<script type="text/javascript" src="xxx.js"></script>
body中的标签
a
超链接：(行内元素)
属性：
href: 超引用，绝对或者相对地址；ps: 如果<a></a>没有href属性，那么a只是超链接的一个占位符
target: 以什么方式打开链接
_self: 默认方式，在当前页打开
_blank: 在新的标签页打开
download: 指定此链接为下载链接
download="filename", 下载的时候会自动添加文件后缀, 所以直接写文件名即可
ps: 特殊用法：
定义锚：
# 特殊喵：# --> 回到顶部
<a href="#_mark2">跳转到mark2</a>
...
<a name="_mark2">这里是mark2</a>
Note：
用id代替name
abbr
声明缩写：(行内元素)
eg: <abbr title="World Wide Web">WWW</abbr>
可以使用title属性来定义全称
address
定义文档或者文章作者的联系信息：(块元素)
<address></address>
ps: 1，如果address位于body内，表示文档作者的联系信息；
如果address位于article内，表示文章作者的联系信息。
2，address一般位于footer内
footer
定义页脚：(块元素)
<footer></footer>
header
定义页眉：(块元素)
<header></header>
article
定义文章：(块元素)
<article></article>
aside
定义侧栏：(块元素)
<aside></aside>
地标
role="banner" ---> 用于页面级header(仅有一个)
role="navigation" ---> 用于nav(可以有多个)
role="main" ---> 用于main元素(仅有一个)
role="complementary" ---> aside/div(必须为补充性内容)(可以有多个)
role="contentinfo" ---> 页面级footer(仅有一个)
section
定义一个区域: (块元素)
<section></section>
img
定义图像：(行内块元素)
<img/>
ps: 从技术上说，图像不会插入到HTML页面上，而是链接到HTML上，img只是作为图像的占位符(根据video得知，最好指定宽高，从而浏览器好预留出空间。这只我目前的推断，不知道对不对)
属性：
src: 图像URL
alt: 当图像加载失败的时候，图像的替代文本
ps: 1，如果图像仅作为装饰，则alt=""
2，如果图像包含信息，则alt="写图像描述信息"
3，如果图像被包含在<a></a>中，则alt="关于目标链接的描述信息"
title: 当鼠标移到图像上时出现的提示信息
width: 图像宽度，单位px
height: 图像高度，单位px
usemap: 将图像定义为客户端图像映射(意思是，图像带了可点击的区域，从而跳转到另一个页面)
usemap="#map标签的name或者id"
map
定义客户端图像映射：(行内元素)
<map></map>
ps: 1，应该同时指定id和name，因为有些浏览器支持不同
2，内部要嵌套<area />
属性：
name: 指定name
id: 指定id
area
定义图像映射内部的区域: (行内元素)
<area />
属性：
shape: 定义形状
default: 全部区域
circle: 圆
rect: 正方形
poly: 多边形
coords: 定义坐标。
default不用此数；
circle: coords="20, 10, 5" 圆心 + 半径
rect: coords="0,0, 100, 100" 一个顶点 + 另一个对角顶点
poly: coords="0, 0, 20, 20, ..., 0, 0" 每个顶点，并且最后一个顶点最好写第一个顶点，为了闭合图形；如果不写，浏览器会自动加上
href:
alt: 图像无法显示的时候的替代文本
target:
em
定义强调文本: (行内元素)
<em></em>
strong
定义重要文本: (行内元素)
<strong></strong>
mark
定义高亮文本: (行内元素)
<mark></mark>
b
定义高亮单词或短语，不带有任何着重的意味: (行内元素)
<b></b>
i
定义科技术语、发言、其他语种的成语俗语、想法、宇宙飞船名等: (行内元素)
<i></i>
u
定义与普通文本风格不同的文本(例如，拼写错误的单词或者汉语中的专有名词): (行内元素)
<u></u>
s
定义不正确、不准确、没有用的文本: (行内元素)
<s></s>
del
定义要删除的、要替换的文本: (行内元素)
<del></del>
ps: 配合ins标签使用
属性：
cite: 一个文档URL，其解释了删除的原因
datetime: 删除的日期YYYY-MM-DDThh:mm:ssTZD
ins
定义被插入的文本(一般为修正之后的文本): (行内元素)
<ins></ins>
ps: 呈现形式为 文本有下划线
属性：
cite: 一个文档URL，其解释了插入的原因
datetime: 插入的日期
bdo
定义覆盖文本默认的方向: (行内元素)
<bdo></bdo>
属性：
dir: 文本方向
ltr: 左至右，默认
trl: 右至左
q
定义短引用: (行内元素)
<q></q>
属性：
cite: 规定引用源的URL
blockquote
定义块/长引用: (块元素)
<blockquote></blockquote>
属性：
cite: 规定引用源的URL
br
定义换行:
<br/>
定义特殊字符
< # ＜
> # ＞
& # &
© # ©
® # ®
# 空格
¥ # ¥
更多： http://tool.chinaz.com/tools/htmlchar.aspx
cite
指明作品的标题: (行内元素)(指明对某内容源的引用或参考。
例如，戏剧、脚本或图书的标题；歌曲、电影、照片或雕塑的名称；演唱会、音乐会、规范等)
<cite></cite>
dfn
定义特殊术语或短语: (行内元素)
<dfn></dfn>
ul
定义列表: (块元素)
一，定义无序列表
<ul>
<li></li>
...
<li></li>
</ul>
ol
二，定义有序列表
<ol>
<li></li>
...
<li></li>
</ol>
ol的属性：
type: 序号类型
1: 阿拉伯数字
A: 大写字母
a: 小写字母
I: 大写罗马数字
i: 小写罗马数字
start: 起始值
start="2"
reversed: 降序
dl
三，定义描述列表
<dl>
<dt>项目名称</dt>
<dd>每一个项目</dd>
...
<dd></dd>
<dt></dt>
<dd></dd>
...
<dd></dd>
...
</dl>
div
定义块级元素:
<div></div>
ps: 块级元素就是独占一行
span
定义行内元素:
<span></span>
ps: 行内元素的宽度根据内容的多少而变化
figure
定义独立的流内容: (块元素)
<figure></figure>
figcaption
定义figure流内容的标题: (块元素)
<figcaption></figcaption>
ps: 位于figure的第一个元素或者最后一个元素
hr
插入水平线: (块元素)
<hr/>
ps: 语义，表示内容主题的变化
标题
定义HTML标题: (块元素)
<h1></h1> # 最高等级标题
<h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6>
hgroup
定义标题分组: (块元素)
<hgroup></hgroup>
nav
定义导航链接部分: (块元素)
<nav></nav>
meter
定义度量衡: (行内元素)
<meter></meter>
属性：
max: 范围的最大值，浮点
min: 范围的最小值
value: 范围的当前值
optimum: 范围的最优值
high: 在范围内被界定为高的值
low: 在范围内被界定为低的值
progress
定义进度: (行内元素)
<progress></progress>
属性：
max: 进度的最大值，浮点
value: 当前进度值
p
定义段落: (块元素)
<p></p>
ps: p不能嵌套块级元素
pre
定义格式化文本: (块元素)
<pre></pre>
ps: 1，只能包含普通文本以及行内元素，不能包含块级元素
2，常见应用，表示计算机的源代码
code
定义计算机代码文本: (行内元素)
<code></code>
var
定义变量: (行内元素)
<var></var>
samp
定义计算机程序的样本(输出)文本: (行内元素)
<samp></samp>
kdb
定义键盘文本。它表示文本是从键盘上键入的。
它经常用在与计算机相关的文档或手册中。
<kbd></kbd>
ruby
定义注释/注音的文本: (行内元素)
<ruby>
汉
<rp>(</rp><rt>Han</rt><rp>)</rp>
字
<rp>(</rp><rt>Zi</rt><rp>)</rp>
</ruby>
ps: 不支持ruby时，显示rp中的内容
sup
定义上标文本: (行内元素)
<sup></sup>
sub
定义下标文本: (行内元素)
<sub></sub>
detail
定义一个可折叠的元件: (块元素)
<details open>
<summary></summary>
</details>
ps: summary定义标题，位于details第一个元素，details内可放任意内容
open表示默认打开
table
定义表格: (块元素)
<table border="1"> # cellspacing,单元格外边距 # cellpadding,单元格内边距
<caption>花名册</caption>
<thead>
<tr>
<th>学号</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<tfoot>
<tr>
<td>...</td> # rowspan="2" 竖跨2行；colspan="2"横跨2列
<td>...</td>
<td>...</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>...</td>
<td>...</td>
<td>...</td>
</tr>
</tbody>
</table>
time
定义时间: (行内元素)
<time></time>
ps: 如果其内容没有包含时间的话，应用属性datetime="YYYY-MM-DDTHH:MM:SSTZD"说明
属性:
datetime: 说明时间
wbr
定义换行位置:
<wbr/>
audio
定义音频文件: (行内元素)
<audio></audio>
ps: 1，可在其中放置文本，文本将在那些不支持audio标签的浏览器中显示
2，最好使用source标签，找到一个支持的source后，就不再继续往后查找了
3，支持的格式
mp3
ogg
wav
属性：
controls: 显示音频控件
autoplay: 自动播放
loop: 循环
muted: 静音
preload: 当网页加载的时候，音频是否被加载, 如果设置了autoplay, 则此属性自动失效
auto: 当页面加载后，载入整个音频
meta: 当页面加载后，载入元数据
none: 当页面加载后，不载入音频
src: 音频的URL
video
定义视频: (行内元素)
<video></video>
ps: 1，可在其中放置文本，文本将在那些不支持video标签的浏览器中显示
2，最好使用source标签，找到一个支持的source后，就不再继续往后查找了
3，最好规定width和height
4，支持的格式
mp4
ogg
webm
属性：
controls: 显示视频控件
autoplay: 自动播放
loop: 循环
muted: 静音
preload: 当网页加载的时候，视频是否被加载，如果设置了autoplay, 则此属性自动失效
auto: 当页面加载后，载入整个视频
meta: 当页面加载后，载入元数据
none: 当页面加载后，不载入视频
src: 视频的URL
poster: 规定视频加载时显示的图像URL
width: 宽度，像素，100或100px
height: 高度
source
定义可选择的音视频:
ps: 找到一个支持的source后，就不再继续往后查找了
<audio controls>
<source src="horse.ogg" type="audio/ogg">
<source src="horse.mp3" type="audio/mpeg">
您的浏览器不支持 audio 元素。
</audio>
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
您的浏览器不支持 video 标签。
</video>
form
定义表单: (块元素)
<form></form>
属性：
action: 规定当提交表单时向何处发送表单数据
autocomplete: 是否启动表单自动完成功能，默认开启，on
autocomplete="off" 关闭
method: 发送表单数据的HTTP方法
get: 默认
1，提交的时候，以键值的形式附加在URL
2，URL长度有限制，大约3000字符，数据最大2KB
3，适合非安全数据，不要用get发送敏感数据
post:
1，没有长度限制，也没有数据限制
2，适合发送安全数据
3. 数据不会在地址栏中显示，包含在请求体中
novalidate: 不对有规定格式的控件的格式进行验证
accept-charset: 表单的字符编码，可以有多个，以空格分隔；默认为UNKNOWN(表示包含form元素的文档编码)
enctype: 规定当提交表单到服务器之前如何对表单编码，
只有method="post"才设置此属性
application/x-www-form-urlencoded,
默认，允许提交普通字符、特殊字符，不允许将提交文件
以及对所有字符进行编码，将空格转换为 + , 特殊字符转换为ASCII HEX值
multipart/form-data, 允许文件被提交，不对其他字符进行编码
text/plain, 只允许提交普通字符，将空格转换为 +。不允许提交特殊字符以及文件
name: 表单名称
target: 规定一个在何处打开提交表单后action程序响应的内容的URL
_self: 默认
_blank:
form标签中的元素
label
<label></label> （行内元素）
ps: 配合input, textarea, select使用
属性：
for: input 的 id值
input部分
<input/> (行内块)
属性：
type:
text: 默认，可见宽度20个字符
password: 密码字段
button: 定义可点击的按钮(通常与JS使用)
submit: 提交按钮
image: 定义图像为提交按钮
reset: 重置按钮
checkbox: 复选框
radio: 单选按钮
color: 拾色器
date: 日期
time: 时间，不带时区
datetime: 基于UTC时区
datetime-local: 不带时区
month: 年和月，不带时区
week: 年和周，不带时区
email: 邮箱字段
tel: 电话字段
search: 搜索字符串的字段
url: 输入URL的字段
number: 输入数字的字段
range: 可拖拽游标输入数字的控件
file: 上传文件控件
hidden: 隐藏字段
maxlength: 最大字符数
size: 可见宽度，默认20
name: 名字
value: 值
src: image图像的URL
alt: 图像加载失败时的替换文本
width: 图像宽
height: 图像高
checked: 默认选中 radio checkbox
max: 最大值，接收数字和日期
min: 最小值
step: 步长
multiple: 用于file和email，可以接收多个
accept: 用于file，规定上传时的文件类型 <input accept="audio/*,video/*,image/*" />
后缀名 MIME名称
*.3gpp audio/3gpp, video/3gpp
*.ac3 audio/ac3
*.asf allpication/vnd.ms-asf
*.au audio/basic
*.css text/css
*.csv text/csv
*.doc application/msword
*.dot application/msword
*.dtd application/xml-dtd
*.dwg image/vnd.dwg
*.dxf image/vnd.dxf
*.gif image/gif
*.htm text/html
*.html text/html
*.jp2 image/jp2
*.jpe image/jpeg
*.jpeg image/jpeg
*.jpg image/jpeg
*.js text/javascript, application/javascript
*.json application/json
*.mp2 audio/mpeg, video/mpeg
*.mp3 audio/mpeg
*.mp4 audio/mp4, video/mp4
*.mpeg video/mpeg
*.mpg video/mpeg
*.mpp application/vnd.ms-project
*.ogg application/ogg, audio/ogg
*.pdf application/pdf
*.png image/png
*.pot application/vnd.ms-powerpoint
*.pps application/vnd.ms-powerpoint
*.ppt application/vnd.ms-powerpoint
*.rtf application/rtf, text/rtf
*.svf image/vnd.svf
*.tif image/tiff
*.tiff image/tiff
*.txt text/plain
*.wdb application/vnd.ms-works
*.wps application/vnd.ms-works
*.xhtml application/xhtml+xml
*.xlc application/vnd.ms-excel
*.xlm application/vnd.ms-excel
*.xls application/vnd.ms-excel
*.xlt application/vnd.ms-excel
*.xlw application/vnd.ms-excel
*.xml text/xml, application/xml
*.zip aplication/zip
*.xlsx application/vnd.openxmlformats-officedocument.spreadsheetml.sheet
formaction:
formmethod:
formectype:
formtarget:
formnovalidate:
autocomplete:
autofocus:
required:
readonly:
disabled:
placeholder:
pattern:
list: 引用datalist预定义的选项
list="datalist_id"
例子：option中value属性对应的值或者标签之间的内容只有符合type的格式才会显示
<label for="ls">搜索</label>
<input id="ls" list="url" type="url">
<datalist id="url">
<option>https://www.baidu.com</option>
<option>https://v.qq.com</option>
<option>https://v.qq.com</option>
</datalist>
textarea
文本域
<textarea></textarea>
ps: 标签之间的内容，会显示在文本框中
属性：
rows: 默认2
cols: 默认20个字符
wrap:
soft: 提交表单时，不换行，默认
hard: 换行
maxlength:
name:
autofocus:
readonly:
required:
placeholder:
disabled:
button
按钮
<button></button> 标签之间可以放文本或者图像
属性：
autofocus:
disabled:
form
formaction:
formmethod:
formenctype:
formtarget:
formnovalidate:
name:
type:
button:
submit:
reset:
value:
select
下拉列表
<select></select>
属性：
autofocus:
disabled:
required:
name:
size: >1 为滚动列表
multiple: 可以选择多个，针对滚动列表
<optgroup></optgroup>
将选项分组
属性：
disabled: 禁用这一组
label: 这一组的描述
<option></option>
定义选项
属性:
disabled:
selected: 默认第一个选项被选中
label: 内容更短的版本
value:
注意：如果没有规定 value 属性，选项的值将设置为 <option> 标签中的内容。
fieldset
将相关元素分组 (块元素)
<fieldset></fieldset>
属性：
disabled:
name:
<legend></legend> 为fieldset定义标题，是fieldset的第一个元素
来源：CSDN
作者：爱喝水的qdy
链接：https://blog.csdn.net/qq_32617703/article/details/103586763