HTML5新增标签
<header:>页面开头
<nav:>导航
<article:>定义文章
<aside:>定义页面内容之外的内容
<footer:>页脚
querySelector() 参数为选择器 查找满足条件的第一个元素 返回一个Dom对象
下图为没有用div标签布局
html语义化
为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:为了裸奔时好看；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
新增input标签属性
| 属性 | 名称 |
|---|---|
| number | 带有 spinner 控件的数字字段 |
| date | 日期选择器 |
| 邮箱验证 | |
| url | URL地址验证 |
| range | 数字范围 |
| search | 搜索域 |
| color | 定义拾色器 |
| datalist | 定义日期字段 |
| tel | 电话号码 |
| file | 输入字段和 "浏览..." 按钮，供文件上传 |
Canvas画布
canvas: 画布
beginPath(): 定义了一个新的路径绘制动作的开始。
moveTo(): 为指定点创造了一个新的子路径，这个点就变成了新的上下文点。我们可以把moveTo() 方法看成用来定位我们的绘图鼠标用的。
lineTo(): 以上下文点为起点，到方法参数中指定的点之间画一条直线。
stroke(): 为所画的线赋予颜色，并使其可见。如果没有特别的指定颜色的话，则默认使用黑色画直线。
lineWidth: 线条粗细
strokeStyle : 线条颜色
直线端点样式
lineCap: lineCap:butt round square
HTML5新增选择器
querySelector() 参数为选择器 查找满足条件的第一个元素 返回一个Dom对象
<body>
<ul>
<li class="list">1</li>
<li class="list">2</li>
<li class="list">3</li>
<li class="list">4</li>
<li class="list">5</li>
<li class="list">6</li>
</ul>
<script>
//满足条件的第一个元素 返回dom对象
var oLi = document.querySelector('.list');
console.log(oLi)//<li class="list">1</li>
</script>
</body>
querySelectorAll() 参数为选择器 查找所有符合条件的元素 返回一个类数组
var aLi = document.querySelectorAll('.list');
console.log(aLi);//NodeList(6)
属性添加
添加元素属性
1. setAttribute()
2. 对象.属性
3. data
4.标签内data-key 属性
dataset 设置一个属性
1. 在JS里写入(对象.dataset.xxx=???)
2. 在HTML中写入
3. 获取 dataset设置的属性(oDiv.dateset.xxx)
在js中获取属性 item-key => itemKey
注意！！！
setAttribute dataset 创建的属性可在html中看到
对象.属性 添加属性在html中看不到
图片懒加载
dataset 自定义数据属性的一个实例---t图片懒加载 src 存放一个小质量图片 data-src 存放真正的图片 当元素进入到可视区域的时候 获取data-sre里内容赋值给src
