HTML-知识整理
HTML头文件（head部分）
元数据就是描述数据的数据,title 元素是一项元数据，用于表示整个 HTML 文档的标题
<!DOCTYPE html>声明
是一个文档类型声明，告诉浏览器当前文档的HTML版本
如果不写声明，浏览器会进入“怪异模式”（Quirks Mode）。在怪异模式下，浏览器会尝试兼容旧版本HTML和CSS的渲染方式，这可能会导致页面布局和样式出现不一致的问题。例如：
盒子模型差异：在怪异模式下，IE浏览器的盒子模型与标准模式不同，可能会导致页面布局错乱。
CSS样式差异：一些CSS属性在怪异模式下可能无法正常工作
mate元素
meta 元素可以被包含进页面的head元素
- 指定文档的字符编码:
< meta charset="utf-8" />
utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符，意味着该 web 页面可以显示任意的语言 - 添加作者和描述
name 指定了 meta 元素的类型；说明该元素包含了什么类型的信息。
content 指定了实际的元数据内容<meta name="author" content="Chris Mills" />
在站点增加自定义图标
在head中引用： <link rel="icon" href="favicon.ico" type="image/x-icon" />
应用 CSS 和 JavaScript
<link rel="stylesheet" href="my-css-file.css" /><script src="my-js-file.js" defer></script>
最好加上 defer 以告诉浏览器在解析完成 HTML 后再加载 JavaScript。这样可以确保在加载脚本之前浏览器已经解析了所有的 HTML 内容。这样你就不会因为 JavaScript 试图访问页面上不存在的 HTML 元素而产生错误。
为文档设定主语言
通过添加 lang 属性到 HTML 开始的标签中来实现
如：html lang=”zh-CN”
HTML标签整理
HTML 语义化标签布局架构(html5新特性)
- 布局标签
这些语义化标签主要针对搜索引擎的，在页面中可以使用多次
都是<></>的双标签替代div
- header 网页头部
- nav 网页导航栏
- footer 网页底部
- aside 网页侧栏
- section 网页区块，定义某个模块的区域
- article 网页文章
- main：主内容。主内容中还可以有各种子内容区段，可用article、section 和div等元素表示
- 布局元素细节
main:存放每个页面独有的内容。每个页面上只能用一次main，且直接位于body中，不要把它嵌套进其他元素
article:包围的内容即一篇文章，与页面其他部分无关
section:与article类似，但section更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。
一般的最佳用法是：以标题 作为开头；也可以把一篇article分成若干部分并分别置于不同的 section中，也可以把一个区段section分成若干部分并分别置于不同的article中，取决于上下文
aside包含一些间接信息（术语条目、作者简介、相关链接，等）
header是简介形式的内容。如果它是body的子元素，那么就是网站的全局页眉。如果它是 article或section的子元素，那么它是这些部分特有的页眉。
nav包含页面主导航功能，其不应包含二级链接等内容
footer包含了页面的页脚部分。
文本格式化标签
- 粗体，斜体，删除线，下划线（均推荐用前者）
加粗strong和b
倾斜em和 i
删除线del和s
下划线ins和u - div和span标签都是没有语义的盒子，用来装内容
- p是段落标签，h1-h6是标题标签
图像标签
img src=”图像url”
属性：
src 指定图像文件的路径和文件名，是必须属性
alt 替换文本，图像不能展示时出现的文本 alt=”这是一个小狗图片”
title 提示文本，鼠标放在图片上面显示的文字 title=”这是一个小狗图片”
宽和高：只写一个那么另一个自动缩放，可以写数字可以百分比,不带单位
width 设置图像的宽度 width=”300”
height 设置图像的高度 height=”100”
border 设置图像的边框粗细 boder=”10”注意：
图像标签可以拥有多个属性，必须写在标签名img的后面
属性之间部分先后顺序，标签名和属性，属性和属性之间都以空格分开
属性用键值对的格式 key=”value” 属性名=”属性值”
警告： 未经许可，绝不要将 src 属性指向其他网站上的图像。这被称为“热链接”。大多数人认为这是不道德的，因为这会导致每当有人访问你的页面，都会有另一些不知情的人为图像交付带宽费用。这也导致你无法掌控图像，图像有可能在你不知情的情况下，被删除或替换为其他内容。
备注： 像img和video这样的元素有时被称为替换元素，因为元素的内容和大小由外部资源（如图像或视频文件）定义，而不是由元素本身的内容定义
路径
根目录：打开文件夹的第一层（最外面的一层）
- 相对路径
以引用文件所在位置为参考基础，而建立出的目录路径
（如：图片相对于html页面的位置）
同一级路径 无<img src="dog.jpg”>
下一级路径 /<img src="image/dog.jpg”>在同级的文件夹的里面
上一级路径 ../<img src="../dog.jpg”>在上一级的文件夹的里面 - 绝对路径
直接到达目标位置
如”D:\WEB-INF\image\dog.jpg”
或完整的网络地址”http://www.xx.com/images/dog.jpg“
超链接标签
a href=”要跳转的新目标地址” target=”页面的打开方式” /a
- 属性
href 必须属性，指定链接目标的url地址
target 指定新目标的打开方式 默认值_self在原页面打开 _blacnk在新窗口打开 - 注意
空链接：href=”#”
下载链接：地址链接是文件.exe或者是.zip等压缩包形式
描点链接：点击链接可以快速定位到页面中的某个位置
描点链接用法： href=”#名字” 跳转到id=”名字” 的目标位置
块级链接
如果想让标题元素变为链接，就把它包裹在锚点元素a内
1 | <a href="https://developer.mozilla.org/zh-CN/"> |
图片链接
如果有需要作为链接的图片，使用a元素来包裹要引用图片的img元素。下面的示例使用相对路径来引用本地存储的 SVG 图像文件
1 | <a href="https://developer.mozilla.org/zh-CN/"> |
使用 title 属性添加支持信息
当鼠标指针悬停在链接上时，标题将作为提示信息出现
1 | <p> |
链接到 HTML 文档的特定部分（文档片段）
超链接除了可以链接到文档外，也可以链接到 HTML 文档的特定部分（被称为文档片段）。
必须首先给要链接到的元素分配一个 id 属性。一般链接到的特定的标题是有意义的
1 | <h2 id="Mailing_address">邮寄地址</h2> |
为了链接到那个特定的 id，要将它放在 URL 的末尾，并在前面包含井号（#）
1 | <p> |
也可以在同一份文档下，通过链接文档片段，来链接到当前文档的另一部分
1 | <p>本页面底部可以找到<a href="#Mailing_address">公司邮寄地址</a>。</p> |
在下载链接时使用 download 属性
当链接到要下载的资源而不是在浏览器中打开时，可以使用 download 属性来提供一个默认的保存文件名。下面是一个 Firefox 的 Windows 最新版本下载链接的示例：
1 | <a |
注解标签和特殊字符
1 | 空格符号 ``` ``` |
注意
表头单元格标签th：让单元格里的文本内容加粗居中显示，常用在第一行代替td
表格结构标签：thead包裹表格头部区域 tbody包裹表格主体合并单元格
跨行合并单元格：第一行和第二行的同一列合并 rowspan
跨列合并单元格：第一列和第二列的同一行合并 colspan
如<td> colspan="2"></td>2表示合并的单元格数量姓名 喜好 地域 西西 听歌 河北 冬冬 小说 山东 属性：
border 规定表格单元是否拥有边框，默认为””没有边框，1表示有
align 规定表格相对周围元素的对齐方式，值：center,left,right
cellpadding 规定单元边沿和内容之间的空白，默认1像素
cellspacing 规定单元格之间的空白，默认2像素
width height 规定表格的宽度和高度
列表标签
列表用来布局，特点：整洁，有序
无序列表
ul包多个li，li前面默认有黑色小圆点
注意：
ul里只能嵌套li，不可以直接在ul里面输入其他文字或标签
li之间相当于一个容器，可以容纳所有元素
有序列表
ol包含多个li,每个li前面有数字排序
自定义列表
常用于对属于或名词进行解释和描述，前面没有任何符号
dl包含dt和dd，其中dt和dd没有个数限制，通常一个dt对应多个dd
dl dt 名词1 /dt dd 名词1解释/dd dd 名词1解释/dd
表单
表单标签
目的：和用户交互，收集用户信息
表单域form <form> </form>
属性：
action=”url地址”
method=”get/post”
name=”表单域名称”
表单控件（表单元素）
input输入表单元素
input属性:
type: 默认为text
check: 规定此input元素首次加载时应当被选中 check=”checked”
value: 规定这个input元素开始的值（text）或选中的值（radio）或按钮的文字(submit)
name: 通常和数据库列名一致 单选按钮和复选框如果是一组那么要有相同的name值
maxlength: 值为正整数，规定输入字段中的字符的最大长度type属性值：
button 可点击的按钮<input type="button">
checkbox 复选框<input type="checkbox">
file 上传文件按钮<input type="file">
hidden 定义隐藏的输入字段image 图像上传按钮password 密码输入框radio 单选按钮`<input type="radio">` reset 重置按钮，清空表单中的所有数据submit提交按钮text 文本框``label标签:用于绑定一个表单元素，当点击label标签内的文本时，浏览器自动将焦点（光标）转到对对应表单元素上
label标签的for属性应当与相关元素的id属性相同
比如：1
2<label for="fruit"> 水果 </label>
<input type="radio" name="fruit" id="fruit" />textarea 文本域元素
<textarea rows="2" cols="20">这里写文本内容</textarea>
- select 下拉表单元素 selected表示默认选中项
1
2
3
4
5<select>
<option>选项1</option>
<option selected >选项2</option>
<option>选项3</option>
</select>
input和label结合使用
<label> 元素代表一个文本说明，该说明与页面上的某个表单控件相关联。
属性 for：for 属性应当匹配它所关联的表单控件的 id 属性值。这样做可以增强用户体验，因为点击标签文本时，相应的表单控件会获得焦点（对于复选框或单选按钮，则会切换其状态）<input> 是一个非常灵活的元素，可以通过改变它的 type 属性来创建各种类型的输入字段，比如文本框、密码框、按钮等。
属性 type=”email”：当设置为 email 类型时，它会生成一个专门用于输入电子邮件地址的文本框。浏览器通常会对输入的内容进行格式验证，确保符合电子邮件的标准格式（即包含一个 ‘@’ 符号和至少一个点）。
属性 name：用来标识提交给服务器的数据字段名称。
1 | <label for="email">邮箱：</label> |
表单增强(html5新特性)
新增输入类型：
email
用于输入电子邮件地址,浏览器会自动验证输入内容是否符合电子邮件格式。
<input type="email" name="user_email" required>url
用于输入URL地址，浏览器会自动验证输入内容是否符合 URL 格式<input type="url" name="website" required>number
用于输入数字，可以设置 min、max 和 step 属性来限制输入范围<input type="number" name="age" min="1" max="100" step="1">date
用于输入日期,浏览器会提供一个日期选择器。<input type="date" name="birthday">time
用于输入时间,浏览器会提供一个时间选择器。<input type="time" name="meeting_time">datetime-local
用于输入日期和时间（不带时区）<input type="datetime-local" name="event_time">month
用于输入年份和月份<input type="month" name="expiry_month">week
用于输入周数以及年份<input type="week" name="vacation_week">range：
用于输入一个范围内的数值,通常显示为滑动条。<input type="range" name="volume" min="0" max="100" step="1">color
用于选择颜色,浏览器会提供一个颜色选择器。
```search：
用于输入搜索关键字。<input type="search" name="query">tel
用于输入电话号码。<input type="tel" name="phone_number">例子：
1
2
3
4
5
6
7
8
9
10<form>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required>
<label for="url">个人主页:</label>
<input type="url" id="url" name="url">
<label for="dob">出生日期:</label>
<input type="date" id="dob" name="dob" required>
<input type="submit" value="提交">
</form>
新的表单验证
- required
表示该输入字段是必填项 - pattern=”正则表达式”
使用正则表达式验证输入内容 - min=””和max=””
限制输入的最小值和最大值（适用于 number、date、range 等类型 - minlength=”” 和 maxlength=””
限制输入的最小长度和最大长度（适用于 text、password 等类型） - step=””
指定输入值的步长（适用于 number、range 等类型）
新的表单元素
<datalist>：
提供一个输入建议列表，用户可以从列表中选择。1
2
3
4
5
6<input list="browsers" name="browser">
<datalist id="browsers">
<option value="Chrome">
<option value="Firefox">
<option value="Safari">
</datalist><output>
用于显示计算结果或脚本输出1
2
3
4
5<form oninput="result.value=parseInt(a.value)+parseInt(b.value)">
<input type="number" id="a" value="0"> +
<input type="number" id="b" value="0"> =
<output name="result" for="a b">0</output>
</form>
新的表单属性
1.autocomplete
控制输入字段的自动填充功能。
设置为on时启用自动填充，设置为off时禁用自动填充<input type="text" name="email" autocomplete="on">
2. placeholder：
提供输入字段的提示文本。<input type="text" name="username" placeholder="请输入用户名">
3. autofocus：
页面加载时自动聚焦到该输入字段。<input type="text" name="search" autofocus>
4. multiple：
允许用户输入多个值（适用于 email 和 file 类型）。<input type="file" name="files" multiple>
5. form：
允许输入字段与表单关联，即使不在<form> 标签内。
1 | <form id="myForm"> |
其他
缩略语
abbr用来包裹一个缩略语或缩写，并且提供缩写的解释。为用户代理提供了如何公布/显示内容的提示，同时告知所有用户该缩写的含义
1 | <p> |
标记时间和日期
HTML 还支持将时间和日期标记为可供机器识别的格式的time元素
不同的格式不容易被电脑识别——假如你想自动抓取页面上所有事件的日期并将它们插入到日历中，
1 | <time datetime="2016-01-20">2016 年 1 月 20 日</time> |
标记联系方式
address
1 | <address>内容1，内容2.内容3</address> |
如果链接的页面包含了联系信息，像下面这样也是可以的：
1 | <address> |
备注：
元素只能用于提供最近的或 元素所含文件的联系信息。在一个网站的页脚使用它来包括整个网站的联系信息，或者在一篇文章里面使用它来包括作者的联系信息，这都是正确的，但不能用来标记与该页面内容无关的地址列表
上标和下标
和 元素可以实现上标和下标，如：
1 | <p> |
async 和 defer
在HTML中，<script> 标签用于嵌入或引用JavaScript代码。默认情况下，浏览器会按照HTML文档中 <script> 标签出现的顺序执行脚本，并且在遇到一个外部脚本时会暂停HTML解析，直到该脚本下载并执行完毕。这对于页面性能可能不是最佳选择，特别是当脚本文件较大或者网络状况不佳时。为了解决这个问题，HTML5引入了两个属性：async 和 defer。
async 和 defer 是 <script> 标签的两个属性，用于控制 JavaScript 脚本的加载和执行时机
async 属性
async：表示脚本在下载时不会阻塞页面的解析和渲染。脚本下载完成后，会立即执行 <script src="analytics.js" async></script>
- 特点：
脚本的加载是异步的，不会阻塞页面的其他资源加载。
脚本下载完成后立即执行，不等待页面解析完成。
执行顺序：async 脚本的执行顺序取决于它们的下载完成时间，而不是它们在 HTML 文档中的顺序。 - 适用场景：适用于那些不依赖于其他脚本和DOM完全加载就能运行的独立脚本。例如，统计分析、广告追踪等脚本
defer
defer表示脚本在下载时不会阻塞页面的解析和渲染。脚本会在页面解析完成后、DOMContentLoaded 事件触发前执行
- 特点：
脚本的加载是异步的，不会阻塞页面的其他资源加载。
脚本会在页面解析完成后执行，确保脚本可以访问完整的 DOM。 - 执行顺序：defer 脚本的执行顺序与它们在 HTML 文档中的顺序一致，所有设置了 defer 的脚本会按它们在文档中出现的顺序依次执行，即使某个脚本先下载完成，也会等到所有设置 defer 的脚本都下载完后，再按序执行
- 适用场景：适用于需要访问或修改DOM的脚本，确保这些脚本在文档完全构建好之后执行，但又不想等待所有资源（如图片）加载完毕。
辨析
async 脚本是无序执行，即哪个脚本先下载完就先执行；而 defer 脚本是有序执行，根据其在文档中的顺序执行。
使用 async 或 defer 可以提高页面的加载速度，因为它们允许HTML解析器继续工作而不必等待脚本加载和执行。
- 实际应用场景
对于一些不需要立即执行的脚本（比如统计脚本、社交媒体分享按钮等），可以使用 async 来加速页面加载。
如果脚本依赖于DOM结构（如初始化某些UI组件），则应使用 defer，以确保在执行脚本前HTML文档已经被完整解析。
在现代Web开发实践中，通常推荐将关键脚本直接放在HTML底部接近结束标签处，而非头部，来避免阻塞渲染。如果必须在头部引用脚本，则应考虑使用 async 或 defer。
HTML5新特性
有语义的布局标签
- 布局标签
这些语义化标签主要针对搜索引擎的，在页面中可以使用多次
都是<></>的双标签替代div
- header 网页头部
- nav 网页导航栏
- footer 网页底部
- aside 网页侧栏
- section 网页区块，定义某个模块的区域
- article 网页文章
- main：主内容。主内容中还可以有各种子内容区段，可用article、section 和div等元素表示
- 布局元素细节
main:存放每个页面独有的内容。每个页面上只能用一次main，且直接位于body中，不要把它嵌套进其他元素
article:包围的内容即一篇文章，与页面其他部分无关
section:与article类似，但section更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。
一般的最佳用法是：以标题 作为开头；也可以把一篇article分成若干部分并分别置于不同的 section中，也可以把一个区段section分成若干部分并分别置于不同的article中，取决于上下文
aside包含一些间接信息（术语条目、作者简介、相关链接，等）
header是简介形式的内容。如果它是body的子元素，那么就是网站的全局页眉。如果它是 article或section的子元素，那么它是这些部分特有的页眉。
nav包含页面主导航功能，其不应包含二级链接等内容
footer包含了页面的页脚部分。
视频video
1 | <video controls width="600"> |
controls：显示视频控制条（播放、暂停、音量、全屏等）。
autoplay：视频加载后自动播放（部分浏览器可能限制自动播放）
loop：视频循环播放。
muted：视频静音。
poster：指定视频封面图片。
preload：指定视频的预加载方式（auto、metadata、none）。
width 和 height：设置视频的宽度和高度。
通过 JavaScript 检测浏览器是否支持<video> 标签或特定视频格式
1 | const video = document.createElement('video'); |
音频audio
1 | <audio controls> |
属性：
controls：显示音频控制条（播放、暂停、音量等）。
autoplay：音频加载后自动播放。
loop：音频循环播放。
muted：音频静音。
preload：指定音频的预加载方式（auto、metadata、none）
新增的表单imput类型（上文中的更全）
自动经行验证用户输入或生成对应的表单
type=”email/url/date/time/month/week/number/tel/search/color”
新增的表单属性（上文中的更全）
required 必填，内容不能为空
placeholder 提示文本，存在默认值将不显示
autofocus 自动聚焦属性
autocomplete off/on 用户输入时浏览器基于以前输入过的值，显示出在字段中填写的选项
multiple 可以多选文件提交
web存储
HTML5提供了两种客户端存储机制：localStorage 和 sessionStorage。它们允许开发者将数据存储在浏览器中，从而减少对服务器的请求，提升用户体验
localStorage 和 sessionStorage的区别
使用场景
localStorage 的使用场景：
存储用户偏好设置（如主题、语言、字体大小等）。
缓存静态资源或 API 数据，减少服务器请求。
保存用户登录状态（需注意安全性）。sessionStorage 的使用场景：
存储当前会话的临时数据（如表单数据、页面状态）。
在多步骤表单中保存用户输入。
在单页应用（SPA）中保存页面切换时的临时状态。
存储数据的增删改查操作
localStorage 和 sessionStorage 的 API 是相同的，以下以 localStorage 为例。
- 存储数据
使用 setItem(key, value) 方法存储数据。localStorage.setItem('username', 'JohnDoe'); - 读取数据
使用 getItem(key) 方法读取数据。1
2const username = localStorage.getItem('username');
console.log(username); // 输出: JohnDoe - 更新数据
直接使用 setItem(key, value) 方法覆盖原有数据。localStorage.setItem('username', 'JaneDoe'); - 删除数据
使用 removeItem(key) 方法删除指定数据。localStorage.removeItem('username'); - 清空所有数据
使用 clear() 方法清空所有存储的数据。localStorage.clear(); - 获取所有键值对
使用 key(index) 方法获取指定索引的键名，结合 length 属性遍历所有数据。1
2
3
4
5for (let i = 0; i < localStorage.length; i++) {
const key = localStorage.key(i);
const value = localStorage.getItem(key);
console.log(`${key}: ${value}`);
}
注意事项：
- 存储大小限制：
localStorage 和 sessionStorage 的存储大小通常为 5MB 左右，超出限制会抛出错误。
如果需要存储大量数据，可以考虑使用 IndexedDB。 - 数据类型：
localStorage 和 sessionStorage 只能存储字符串。如果需要存储对象，可以使用 JSON.stringify() 和 JSON.parse()。1
2
3
4
5const user = { name: 'John', age: 30 };
localStorage.setItem('user', JSON.stringify(user));
const storedUser = JSON.parse(localStorage.getItem('user'));
console.log(storedUser.name); // 输出: John - 安全性：
不要存储敏感信息（如密码、令牌等），因为这些数据可以被 JavaScript 访问。
如果需要存储敏感信息，建议使用加密技术。 - 跨域问题：
localStorage 和 sessionStorage 的作用域受同源策略限制，不同域名下的页面无法共享数据。
