新增主体结构元素

页面布局

元素名描述
header标题头部区域的内容（用于页面或页面中的一块区域）
footer标记脚部区域的内容（用于整个页面或页面的一块区域）
sectionWeb 页面中的一块独立区域
article独立的文章内容
aside相关内容或应用（常用于侧边栏）
nav导航类辅助内容

section

将页面分块
讲一个内容划分为几段

总结：不要使用 section 元素作为设置样式的元素
如果 article 元素适合，就不要用 section
没有标题的区块内容使用 section

article

相对独立的内容

aside

与当前页面主题内容相关的部分，如：导航条、广告、侧边栏等
·包含在 article 中作为附属内容
·作为页面的全局站点的一个部分

用于页面导航的链接组
·传统的导航条
·侧边栏导航
·翻页导航
·内页导航

time

菜鸟教程——time

语法

属性值

值:

YYYY-MM-DDThh:mm:ssTZD
日期或时间。下面解释了其中的成分：

描述:

YYYY - 年 (例如 2011)
MM - 月 (例如 01 表示 January)
DD - 天 (例如 08)
T - 必需的分隔符，若规定时间的话
hh - 时 (例如 22 表示 10.00pm)
mm - 分 (例如 55)
ss - 秒 (例如 03)
TZD - 时区标识符 (Z 表示祖鲁，也称为格林威治时间)

pubdate

表示内容的发布时间

实例

<time datetime="2019-02-1723:02:56" pubdate="pubdate"
  >2019年02月17日23:03:48</time
>

新增非主体结构元素

标签定义文档或者文档的一部分区域的页眉。
元素应该作为介绍内容或者导航链接栏的容器。 在一个文档中，您可以定义多个
元素。 注释：
标签不能被放在
、
或者另一个
元素内部。

hgroup

func：将标题和主标题进行分组

address

可以与 footer 同时使用

figure && figcaption

func1：

标签规定独立的流内容（图像、图表、照片、代码等等）。
func2：
标签为
元素定义标题。

元素应该被置于
元素的第一个或最后一个子元素的位置。

details && summary

func_D:用于表示该元素可以被展开\收缩（同 bool 真假来区分，默认值为 false）
func_S：summary 从属于 details，点击 summary 元素中的内容时，details 元素中其他所有从属元素会展开或收缩
目前只有 Chrome 支持？

mark

func:突出高亮显示

progress

func：代表任务的完成进度

meter

func：表示规定范围内的数量值
args：

value：已经使用的值
max
min
low/high：规定下限变色/上限变色
optimum:规定度量的最优值。

用途 1.配合超链接元素实现不用页面嵌套

html5 大纲

html5 outliner

在 header 元素中使用图片生成大纲

大纲编排规则

显式编排&&隐式编排

显式

用 section 进行划分，h1-h6

隐式

不适用 section，h1-h6

标题分级

h1-h6 依据级别不同，自动生成区块

加强版 ol 元素

    标签定义了一个有序列表. 列表排序以数字来显示。 使用
  1. 标签来定义列表选项。

dl

标签定义一个描述列表。
标签被用来对一个描述列表中的项目/名字进行描述。
标签与
（定义项目/名字）和
（描述每一个项目/名字）一起使用。 在
标签内，您能放置段落、换行、图片、链接、列表等等。

canvas

标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。

标签只是图形容器，您必须使用脚本来绘制图形。

HTML 画布参考手册

圆形范式

function draw(id) {
  var canvas = document.getElementById(id);
  var context = canvas.getContext("2d");
  context.fillStyle = "#f1f2f3";
  context.fillRect(0, 0, 400, 400);
  // context.beginPath();
  // context.arc(10,10,10,0,Math.PI*2,true)
  // context.closePath();
  // context.fillStyle="rgba(255,0,0,255)"
  for (var i = 0; i < 10; i++) {
    context.beginPath();
    context.arc(i * 25, i * 25, i * 10, 0, Math.PI * 2, true);
    context.closePath();
    context.fillStyle = "rgba(255,0,0,0.25)";
    context.fill();
    context.strokeStyle = "#000";
    context.stroke();
  }
}

文字范式

function draw1(id) {
  var canvas = document.getElementById(id);
  var context = canvas.getContext("2d");
  context.fillStyle = "green"; //背景填充
  context.fillRect(0, 0, 800, 300); //填充范围
  context.fillStyle = "#fff";
  context.strokeStyle = "#fff";
  context.font = "bold 40px '微软雅黑'";
  context.textBaseline = "hanging"; //垂直对齐方式
  //context.textAlign='start';                  //水平对齐方式
  context.fillText("aaa", 50, 50); //此处有第四个参数用来防止溢出
  context.strokeText("aaa", 50, 100);
}

保存

把绘画的状态输出到一个 data URL 地址所指向的数据中的过程

window.location=canvas.toDataURL(‘image/jpeg’);

制作动画

1.setInterval 设置动画的间隔时间
args:

code:执行动画的函数
millisec:间隔时间（ms）

2.用来绘图的函数
1).x 和 y 轴的变化
2).context.clearRect()

web storage

session storage

临时保存

local storage

永久保存

实战：留言板

function saveStorage(id) {
  var data = document.getElementById(id).value;
  var time = new Date().getTime();
  localStorage.setItem(time, data);
  alert("数据已保存");
  loadStorage("msg");
}

function loadStorage(id) {
  var result = '<table border="1">';
  for (var i = 0; i < localStorage.length; i++) {
    var key = localStorage.key(i);
    var value = localStorage.getItem(key);
    var date = new Date();
    date.setTime(key);
    var datestr = date.toUTCString();
    result +=
      "<tr><td>" +
      "这是第" +
      i +
      "条数据</td><td>" +
      value +
      "</td><td>" +
      datestr +
      "</td></tr>";
  }
  result += "</table>";
  var target = document.getElementById(id);
  target.innerHTML = result;
}

function clearStorage(id) {
  localStorage.clear();
  alert("数据已清除");
  loadStorage("msg");
}
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Title</title>
    <script type="text/javascript" src="index.js"></script>
  </head>
  <body>
    <h1>留言板</h1>
    <textarea id="dome" cols="60" rows="10"></textarea>
    <br />
    <input type="button" value="save" onclick="saveStorage('dome')" />
    <input type="button" value="load" onclick="loadStorage('msg')" />
    <input type="button" value="clear" onclick="clearStorage('msg')" />
    <hr />
    <p id="msg"></p>
  </body>
</html>

video && audio

video

视频或电影

audio

音频

source

source 可以用来指定多个媒体视频播放格式，自上而下依次尝试

drag

设置元素为可拖放

首先，为了使元素可拖动，把 draggable 属性设置为 true ：

拖动什么 - ondragstart 和 setData()

然后，规定当元素被拖动时，会发生什么。

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev) {
  ev.dataTransfer.setData("Text", ev.target.id);
}

在这个例子中，数据类型是 “Text”，值是可拖动元素的 id (“drag1”)。

放到何处 - ondragover

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

进行放置 - ondrop

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("Text");
  ev.target.appendChild(document.getElementById(data));
}

代码解释：

1.调用 preventDefault() 来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开） 2.通过 dataTransfer.getData(“Text”) 方法获得被拖的数据。该方法将返回在 setData() 方法中设置为相同类型的任何数据。 3.被拖数据是被拖元素的 id (“drag1”) 4.把被拖元素追加到放置元素（目标元素）中

附录

超链接

style 定义 css 样式

将

    标签与
  • 标签一起使用，创建无序列表。

sub 快捷

ul>.item$*10 + ctrl+e 快速生成 10 行列表