HTML标准结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>标题</title>
</head>
<body>
</body>
</html>排版标签
h1~h6，语义是标题，双标签(就是要成对出现)
<h1></h1>P,语义是段落，双标签。
p标签你不能有h1~h6,p,div标签。
<p></p>div标签，用来分隔文档，用于整体布局，双标签。
<div>
<h1></h1>
<h2></h2>
<p></p>
<p></p>
……
</div>注意
应注意标签的语义，不要为达到想要的效果而强行使用标签，如：h1~h6的语义是标题，且强调性由强至弱，虽然表现效果为字体大小粗细不同，但不能为了想要一个小的标题不去使用h1，而转使用h4或p，这会使代码可读性下降，也不利于后期css和修改，如想修改字体大小可以使用css。html只是基本框架，其余的细节样式由css修改。
块级元素与行内元素
块级元素:独占一行。
行内元素:反之，不独占一行。
Ps：块级元素内可以写行内元素和块元素，但行内元素中只能写行内元素。
文本标签
em标签，语义：着重阅读的内容，双标签。
strong标签，语义：十分重要的内容（语气强度大于em），双标签。
span标签：通用的行级容器，本身不具备特殊含义，<span> 与 <div> 元素非常相似，但是 <div> 是块级元素，而 <span> 是一个行级元素。双标签。
还有其他很多标签但并不常用，就不依次例举了。
图片标签(img)
单标签。
属性：
src:图片路径(地址)。
alt:图片描述。(当图片失效时也会显示alt的描述)。
width:图片宽度，单位像素(px)。
height:图片高度，单位像素(px)。
Ps：宽和高同时修改时注意图片比例，容易造成比例失调。
<img src="图片的地址" alt="picture" width="10px" height="10px">路径的分类
相对路径：以当前位置做参考点，去建立路径。
./:同级。
/:下一级。
../：上一级。
同级：
主要注意，你的文件是参考点，所选中的文件再什么位置，类似于电脑中的文件夹。
以上Compile文件夹中的文件，假如我们的文件是”Bottom”。
则Hello_c,JetBrains……的文件都为同级。
下一级：
在”Bottom”下的文件则是下一级。
如：选择JAVA文件，/可理解为进入当前文件
/JAVA
上一级:
与“Compile”同级的文件则是上一级。如想选择Adobe文件：
../Adobe../可以理解为返回上级目录，也就是返回Bottom的上级目录，在选择Adobe文件。
绝对路径：
本地绝对路径：
D:\Program Files (x86)\Picture\其他文件的位置，从盘符开始。
网络绝对路径：
https://img.qihongyao.com.cn/微信图片_20240807233427.jpg图片的链接网址，可通过网址直接打开图片。
Ps：本地绝对路径一旦文件位置更改，或使用代码的用户文件位置对不上，会出现麻烦，所以注意使用环境(很少使用)，代码可移植性低。
超链接(a)
主要作用：从当前页面进行跳转。双标签
属性：
href：指定要跳转到的具体目标。
target：控制跳转时打开界面的方式。_self：在本窗口打开，_blank：在新窗口打开。
id：元素的唯一标识，可用来设置锚点。
name：元素的名字，也可以设置锚点。
<a href="https://img.qihongyao.com.cn/微信图片_20240807233427.jpg">图片</a><a href="02.html">02</a>可以跳转到链接所在地，也可跳转到另一文件所在页面。
锚点
设置锚点
1.a标签配合name属性：
<a name="test1"></a>2.其他标签配合id属性(在没有css介入的情况下此方法定位更精准)
<h1 id="test1"></h1>跳转锚点
1.跳转到test1锚点
<a href="#test1">跳转到test1</a>2.跳到本页面顶端
<a href="#">回到顶部</a>3.刷新页面
<a href=””>刷新</a>
列表
有序列表(ol)
顾名思义，有顺序或侧重顺序的列表，列表里的内容用li标签括起来。
<ol>
<li>首先</li>
<li>其次</li>
<li>最后</li>
</ol>无序列表(ul)
没用顺序，或不注重顺序的列表，如排名不分先后……
<ul>
<li>你</li>
<li>我</li>
<li>他</li>
</ul>自定义列表(dl，dt，dd)
dl表示自定义列表，dt表示列表的内容标题，类似于列点1，2，3……。dd对标题的描述。
<dl>
<dt>html</dt>
<dd>html是一种超文本标记语言,主要用于……</dd>
<dt>css</dt>
<dd>css层叠样式表，是一种样式表语言，用来描述HTML…… </dd>
</dl>Ps：列表可以进行嵌套，如一个文件有两大标题，每个标题还有三个小点。
各个列表不但语义不同，所表现的方式也不尽相同，可以自己编写看一下区别。也算是练习。
表格
一个完整的表格由表格标题，头部，主题，脚注组成。
table：表格
caption：表格标题
thead：表格头部
tbody：表格主体
tfoot：表格脚注
tr：行
th，td：单元格
<table border="1" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
<th>民族</th>
<th>政治面貌</th>
</tr>
</thead>
<tbody>
<tr>
<td>张三</td>
<td>男</td>
<td>18</td>
<td>汉族</td>
<td>团员</td>
</tr>
</tbody>
</table>一个简单的表格，写之前先看表格的组成，如有没有标题，头部是几行，主体是几行，每一行有多少个单元格，再一次填入内容就ok了。
属性
table：
- width：设置表格整体宽度
- height：设置表格最小高度
- border：设置表格的边框宽度
- cellspacing：设置表格单元格之间的距离
thead，tbody，tr，tfoot：
- height：设置表格头部高度
- align：设置单元格中内容的水平对齐方式
- left：左对齐
- center：居中对齐
- right：右对齐
- valign：设置单元格中内容的垂直对齐方式
- top：顶部对齐
- middle：中间对齐
- bottom：底部对齐
td，th：
- width：设置单元格宽度，对同列单元格都有影响
- height：设置单元格高度，对同行单元格都有影响
- align：设置单元格中内容的水平对齐方式，同上
- valign:设置单元格中内容的垂直对齐方式，同上
- rowspan：指定要垮的行数(包括自身)
- colspan：指定要垮的列数(包括自身)
合并单元格(cowspan，rowspan)：
<table border="1" cellspacing="0">
<caption>课程表</caption>
<thead>
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th colspan="2">活动与休息</th>
</tr>
</thead>
<tbody>
<tr>
<td>星期</td>
<td>星期一</td>
<td>星期二</td>
<td>星期三</td>
<td>星期四</td>
<td>星期五</td>
<td>星期六</td>
<td>星期日</td>
</tr>
<tr>
<td rowspan="4">上午</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td rowspan="4">休息</td>
</tr>
<tr>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
<tr>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
<td>语文</td>
</tr>
</tbody>
</table>
简单写了个课程表，可以复制看一下，其中用cowspan和rowspan属性时要注意删除他们所占位置的单元格，
<tr>
<th>项目</th>
<th colspan="5">上课</th>
<th ></th>
<th ></th>
<th ></th>
<th ></th>
<th colspan="2">活动与休息</th>
<th ></th>
</tr>在“上课”的单元格，属性要跨5列(算自身)，那么也就是合并其他四个单元格，那么下面的th就都要删除，否则th默认是一个空的单元格，如不删除最后的样式会出错误。
rowspan则是向下合并，要找到被合并的单元格并删除。
常用其他标签
br标签，换行，单标签
hr标签，分割线，单标签
表单
form，表单标签，双标签，属性：
- action：指定表单提交的地址
- target：控制表单提交后如何打开页面
- _self：本窗口打开
- _blank：新窗口打开
- method：控制表单提交方式
input，输入框标签，单标签，属性：
- type：设置输入框的类型
- name：指定提交数据的名字
button，按钮标签
表单控件
文本输入框
<input type="text">常用属性：
- name：数据名称
- value：输入框的默认值
- maxlength：输入框最大可输入长度
密码输入框
<input type="password">常用属性：
- name：数据名称
- value：输入框的默认值
- maxlength：输入框最大可输入长度
单选框
<input type="radio" name="gender" value="female" >女
<input type="radio" name="gender" value="male" >男常用属性：
- name：数据名称，如想要多个单选相关联，则name的属性值要保持一致
- value：提交的数据值
- checked：让改单选框被默认选中
复选框
<input type="checkbox" name="hobby" value="smoke">抽烟
<input type="checkbox" name="hobby" value="drink">喝酒
<input type="checkbox" name="hobby" value="perm">烫头常用属性：
- name：数据名称
- value：提交的数据值
- checked：让改单选框被默认选中
隐藏域
<input type="hidden" name="tag" value="100">用户不可见的一个输入区域，在提交表单时可携带一些固定数据
常用属性：
- name：数据名称
- value：固定的数据值
提交按钮
<input type="submit" value="提交">
<button>提交</button>以上两种方式皆可，input标签编写的按钮，按钮的文字由value决定
重置按钮
<input type="reset" value="重置" >
<button type="reset">重置</button>普通按钮
<input type="button" value="按钮" >
<button type="button">按钮</button>仅仅只是一个可以点击的按钮，没有任何特殊功能，用button编写时type属性的值必须写“button”，否则默认属性值为“submit”会进行提交
文本域
<textarea name="msg" rows="10" cols="5">文本域</textarea>在表单中添加一个写有文本的区域，属性：
- rows：默认显示的行数，也就是文本域的高
- cols：默认显示的列数，也就是文本域的宽
- 无type属性，其他属性与普通文本输入框一致
下拉框
<select name="city" >
<option value="黑">黑龙江</option>
<option value="吉" selected>吉林</option>
<option value="辽">辽宁</option>
</select>属性：
- name：数据名称
- option设置的“value”属性：提交数据的值
- option设置“selected”属性：默认选中
禁用表单控件
给表单控件设置“disabled”便可以禁用表单控件
获取焦点
label标签与表单控件相关联，关联之后点击文字，就可以选中相关联的表单控件
<label for="text">账号</label>
<input type="text" id="text">
<label>
密码<input type="password">
</label>
以上是两种关联方式，一个是将label标签的for属性的值等于表单控件的id值，另一个则直接将表单控件放在label标签中
分组
<fieldset>
<legend>简介</legend>
。。。。。。
</fieldset>
<fieldset>
<legend>经历</legend>
。。。。。。
</fieldset>fieldest标签，为表单控件分组
legend标签，每个分组的标题
框架标签
iframe，双标签，属性：
- name：框架名字
- width：框架的宽
- height：框架的高
- frameborder：是否显示边框，0或1
- 也可以与target属性相配合
<a href="网址地址" target="open"></a>
<iframe name="open" frameborder="0"></iframe>a标签的target的值要和iframe标签的name属性的值相同，二者可进行关联
<iframe src="地址" frameborder="0"></iframe>另一种表达形式，无关联。
HTML实体
在html中有很多符号需要用一些特定的方法表示
如：空格为 ，<（小于号）为<……
有很多，不一一列举详情可见
HTML ISO-8859-1 参考手册 (w3school.com.cn)
实体 – MDN Web 文档术语表：Web 相关术语的定义 | MDN (mozilla.org)
全局属性
- id：标签的唯一标识，不可重复
- class：给标签指定类名
- style：css样式
- title：标签的文字提示
仅为一部分，详情见：
全局属性 – HTML（超文本标记语言） | MDN (mozilla.org)
元信息
详情见：
<meta>：元数据元素 – HTML（超文本标记语言） | MDN (mozilla.org)
结束
HTML基础差不多结束了，可能还会有遗漏，发现会进行补充，全是自己的参考和整理，如有问题请在评论中指出，感谢，告辞。
H5补充
新增语义化标签
布局标签
header #整个页面或部分区域的头部 //双标签
footer #整个页面或部分区域的底部 //双标签
nav #导航 //双标签
article #文章、帖子、杂志、新闻、博客、评论等 //双标签
section #页面中的某段文字，或文章中的某段文 //双标签
字(里面文字通常包含标题)
aside #侧边栏article与section：
1.article里可有多个section
2.section强调的是分段或分块，如果你想将一块内容分成几段的时候，可使用section元素。
3.article比section更强调独立性，一块内容如果比较独立、比较完整，应该使用article元素。
如果article是一个文章，那么section就是段落。
状态标签
meter标签
语义：定义已知范围内的标量测量。也被称为 gauge（尺度），双标签，例如：电量、磁盘用量等。
属性：
max #最大值 hight #规定高值
min #最小值 low #规定低值
value #当前值 optimum #规定最优值
progress 标签
语义：显示某个任务完成的进度的指示器，一般用于表示进度条，双标签，例如：工作完成进度等。(进度条)
属性：
max #规定目标值
value #规定当前值也可用css控制宽和高
列表标签
datalist标签
用于搜索框的关键字提示，双标签
<form >
<input type="text" list="mydata">
</form>
<datalist id="mydata">
<option value="周杰伦">周杰伦</option>
<option value="周冬雨">周冬雨</option>
<option value="马冬梅">马冬梅</option>
<option value="温兆伦">温兆伦</option>
</datalist>和input标签关联
效果:
details标签和summary标签
details：用于展示问题和答案，或对专有名词进行解释，双标签
summary：写在 details 的里面，用于指定问题或专有名词，双标签
<details>
<summary>html</summary>
<p>HTML的全称为超文本标记语言，是一种标记语言。</p>
</details>效果图：
文本标签
文本注音
ruby标签，包裹需要注音的文字，双标签
rt标签，写注音，rt标签在ruby里面，双标签
<ruby>
<span>给个赞可还行</span>
<rt>gei ge zan ke hai xing</rt>
</ruby>文本标记
mark标签，给文本添加标记(底色)，双标签
<span>给个赞 <mark>可还行</mark> </span>表单新增功能
表单控件新增属性
placeholder #输入框内提示的文字，适用于文字输入类的表单控件
required #表示该输入项为必填项，适用于除按钮以外的其他表单控件
autofocus #自动获取焦点，适用于所有表单控件
autocomplete #自动识别历史的输入，可设置on或off，适用文字输入类表单控件，*注：
(密码输入框，多行输入框不可用)
pattern #填写正则表达式(JS)，适用于文本输入类表单控件，*(注：多行输入不可
用，且空的输入框不会进行验证，常与required联用 input新增type属性
email #邮箱类输入框，提交会验证格式，输入为空则不会验证
eg：<input type="email">
url #网址类型输入框，提交会验证格式，输入为空则不会验证
number #数字类型输入框，提交会验证格式，输入为空则不会验证，可设置step(步进数),
max(最大值),min(最小值)，设置step后输入的值需要为step的倍数
search #搜索类型输入框，不验证格式
tel #电话类型输入框，表单提交不会验证格式，在移动端会唤起数字键盘
range #范围选择框，默认值为中间值，表单提交不会验证格式，可设置max和min的值，
value设置当前值
color #颜色选择框，默认值为黑色，提交时不会验证格式
date #日期选择框，默认值为空，表单提交不会验证格式
month #月份选择框，表单提交不会验证格式
week #周选择框，默认值为空，表单提交不会验证格式
time #时间选择框，默认值为空，表单提交不会验证格式
datetime-local #日期+时间选择框(两者组合)，默认值为空，表单提交不会验证格式form标签新增属性
novalidate
#如果表单设置此属性，所有控件提交时不会再进行验证，不论表单是否设置了需求，优先级最高
新增多媒体标签
视频标签
video标签，定义视频，双标签
| 属性名 | 属性值 | 描述 |
| src | url地址 src=“http……” | 视频地址 |
| width | 像素值 | 设置视频宽度 |
| height | 像素值 | 设置视频高度 |
| controls | 显示视频控件(开始/暂停) | |
| muted | 默认视频为静音状态 | |
| autoplay | 自动播放(视频必须为默认静音) | |
| loop | 循环播放 | |
| poster | url地址 | 视频封面，(注意视频与封面的尺寸是否相同) |
| preload | auto/metadata/none 浏览器自适应/仅预先加载元数据/不进行预加载 | 视频预加载，如设置了autoplay则忽略该属性 |
音频标签
audio标签，定义音频，双标签
| 属性名 | 属性值 | 描述 |
| src | url地址 | 音频地址 |
| controls | 显示音频控件(开始/播放) | |
| autoplay | 自动播放(与是否静音无关) | |
| muted | 音频静音 | |
| loop | 循环播放 | |
| preload | auto/metadata/none 浏览器自适应/仅预先加载元数据/不进行预加载 | 视频预加载，如设置了autoplay则忽略该属性 |
新增全局属性
| 属性名 | 功能 |
| contenteditable | 表示元素是否可被用户编辑，可选值如下： true ：可编辑 false ：不可编辑 |
| draggable | 表示元素可以被拖动，可选值如下： true ：可拖动 false ：不可拖动 |
| hidden | 隐藏元素 |
| spellcheck | 规定是否对元素进行拼写和语法检查，可选值如下： true ：检查 false ：不检查 |
| contextmenu | 规定元素的上下文菜单，在用户鼠标右键点击元素时显示。 |
| data-*(代号) | 用于存储页面的私有定制数据。 |
HTML5兼容性处理
1、添加元信息，让浏览器处于最优渲染模式。
<!--设置IE总是使用最新的文档模式进行渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<!--优先使用 webkit ( Chromium ) 内核进行渲染, 针对360等壳浏览器-->
<meta name="renderer" content="webkit">2、使用html5shiv 让低版本浏览器认识H5 的语义化标签。
//判断条件：如果浏览器版本小于ie9，运行html5shiv文件(仅小于ie9执行)
<!--[if lt ie 9]>
<script src="../sources/js/html5shiv.js"></script> //加载的js文件
<![endif]-->lt 小于
lte 小于等于
gt 大于
gte 大于等于
! 逻辑非