---
cid: 44
title: H5初阶学习笔记
slug: 44
date: 2019/07/18 08:21:00
updated: 2019/07/22 08:13:37
status: publish
author: harumonia
categories:
  - 源流清泉
  - HTML5\CSS
tags:
  - 前端
  - h5
thumbStyle: default
hidden: false
---

# 新增主体结构元素

## 页面布局

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

## section

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

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

## article

相对独立的内容

## aside

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

## nav

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

## time

[菜鸟教程——time](http://www.runoob.com/tags/att-time-datetime.html)

语法

> `<time datetime="YYYY-MM-DDThh:mm:ssTZD">`

属性值

##### 值:

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

##### 描述:

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

## pubdate

表示内容的发布时间

**实例**

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

# 新增非主体结构元素

## header

> <header> 标签定义文档或者文档的一部分区域的页眉。

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

## hgroup

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

## address

可以与 footer 同时使用

## figure && figcaption

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

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

## 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:规定度量的最优值。

# <iframe>内联框架的使用

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

# html5 大纲

[html5 outliner](https://gsnedders.html5.org/outliner/)

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

## 大纲编排规则

### 显式编排&&隐式编排

#### 显式

用 section 进行划分，h1-h6

#### 隐式

不适用 section，h1-h6

### 标题分级

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

# 加强版 ol 元素

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

# dl

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

# canvas

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

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

[HTML 画布参考手册](http://www.runoob.com/tags/ref-canvas.html)

## 圆形范式

```js
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();
  }
}
```

## 文字范式

```js
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

永久保存

# 实战：留言板

```js
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");
}
```

```html
<!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 ：

> <img draggable="true">

## 拖动什么 - ondragstart 和 setData()

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

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

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

```js
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)：

```js
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.把被拖元素追加到放置元素（目标元素）中

# 附录

> <a> 超链接

> style 定义 css 样式

> 将 <ul> 标签与 <li> 标签一起使用，创建无序列表。

# sub 快捷

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