HTML
H5新特性
| 功能 | 实现 |
|---|---|
| 选择器 | document.querySelector、document.querySelectorAll |
| 拖拽 | (Drag and Drop)API |
| 媒体播放 | video、audio |
| 本地存储 | localStorage、sessionStorage |
| 离线应用 | manifest |
| 桌面通知 | Notification |
| 语义化标签 | article、footer、header、nav、section |
| 增强表单控件 | calendar、date、time、email、url、search |
| 地理位置 | Geolocation |
| 多任务 | webworker |
| 全双工通信协议 | websocket |
| 历史管理 | history |
| 跨域资源共享(CORS) | Access-Control-Allow-Origin |
| 页面可见性改变事件 | visibilitychange |
| 跨窗口通信 | PostMessage |
| 绘画 | canvas |
| 其他 | Form Data对象 |
H5语义化
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<title> 页面主体内容。
<hn> h1~h6，分级标题，<h1> 与 <title> 协调有利于搜索引擎优化。
<ul> 无序列表。
<li> 有序列表。
<header> 页眉通常包括网站标志、主导航、全站链接以及搜索框。
<nav> 标记导航，仅对文档中重要的链接群使用。
<main> 页面主要内容，一个页面只能使用一次。如果是web应用，则包围其主要功能。
<article> 定义外部的内容，其中的内容独立于文档的其余部分。
<section> 定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。
<aside> 定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。
<footer> 页脚，只有当父级是body时，才是整个页面的页脚。
<small> 呈现小号字体效果，指定细则，输入免责声明、注解、署名、版权。
<strong> 和 em 标签一样，用于强调文本，但它强调的程度更强一些。
<em> 将其中的文本表示为强调的内容，表现为斜体。
<mark> 使用黄色突出显示部分文本。
<figure> 规定独立的流内容（图像、图表、照片、代码等等）（默认有40px左右margin）。
<figcaption> 定义 figure 元素的标题，应该被置于 figure 元素的第一个或最后一个子元素的位置。
<cite> 表示所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。
<blockquoto> 定义块引用，块引用拥有它们自己的空间。
<q> 短的引述（跨浏览器问题，尽量避免使用）。
<time> datetime属性遵循特定格式，如果忽略此属性，文本内容必须是合法的日期或者时间格式。
<abbr> 简称或缩写。
<dfn> 定义术语元素，与定义必须紧挨着，可以在描述列表dl元素中使用。
<address> 作者、相关人士或组织的联系信息（电子邮件地址、指向联系信息页的链接）。
<del> 移除的内容。
<ins> 添加的内容。
<code> 标记代码。
<meter> 定义已知范围或分数值内的标量测量。（Internet Explorer 不支持 meter 标签）
<progress> 定义运行中的进度（进程）。
</body>
</html>元素类型
| 元素类型 | 示例 |
|---|---|
| 行内元素 | a b span img input select strong |
| 块级元素 | div p ul ol li dl dt dd h1 h2 h3 h4… |
| 空元素 | br hr img input link meta |
TIP
行内元素不可以设置宽高，不独占一行。
块级元素可以设置宽高，独占一行
全局属性
| 属性 | 描述 |
|---|---|
| id | 元素id，⽂档内唯⼀ |
| class | 为元素设置类标识 |
| style | ⾏内css样式 |
| data | 为元素增加⾃定义属性 |
| draggable | 设置元素是否可拖拽 |
| lang | 元素内容的的语⾔ |
| title | 元素相关的建议信息 |
DOM性能优化
html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<ul id="list">
</ul>
<script>
const list = document.querySelector("#list")
// 创建一个dom片段
const frag = document.createDocumentFragment()
for (let i = 1; i <= 10; i++) {
const li = document.createElement("li")
li.innerHTML = `item - ${i}`
frag.appendChild(li)
}
// 批量插入 节约性能
list.appendChild(frag)
</script>
</body>
</html>