Field entry
H5初阶学习笔记
新增主体结构元素
页面布局
| 元素名 | 描述 |
|---|---|
| header | 标题头部区域的内容（用于页面或页面中的一块区域） |
| footer | 标记脚部区域的内容（用于整个页面或页面的一块区域） |
| section | Web 页面中的一块独立区域 |
| article | 独立的文章内容 |
| aside | 相关内容或应用（常用于侧边栏） |
| nav | 导航类辅助内容 |
section
将页面分块 讲一个内容划分为几段
> 总结：不要使用 section 元素作为设置样式的元素 > 如果 article 元素适合，就不要用 section > 没有标题的区块内容使用 section
article
相对独立的内容
aside
与当前页面主题内容相关的部分，如：导航条、广告、侧边栏等 ·包含在 article 中作为附属内容 ·作为页面的全局站点的一个部分
nav
用于页面导航的链接组 ·传统的导航条 ·侧边栏导航 ·翻页导航 ·内页导航
time
语法
> <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
表示内容的发布时间
实例
<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 大纲
> 在 header 元素中使用图片生成大纲
大纲编排规则
显式编排&&隐式编排
显式
用 section 进行划分，h1-h6
隐式
不适用 section，h1-h6
标题分级
h1-h6 依据级别不同，自动生成区块
加强版 ol 元素
> <ol> 标签定义了一个有序列表. 列表排序以数字来显示。 > 使用<li> 标签来定义列表选项。
dl
<dl> 标签定义一个描述列表。 <dd> 标签被用来对一个描述列表中的项目/名字进行描述。 <dl> 标签与 <dt> （定义项目/名字）和 <dd> （描述每一个项目/名字）一起使用。 在 <dd> 标签内，您能放置段落、换行、图片、链接、列表等等。
canvas
<canvas> 标签通过脚本（通常是 JavaScript）来绘制图形（比如图表和其他图像）。
<canvas> 标签只是图形容器，您必须使用脚本来绘制图形。
圆形范式
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 ：
> <img 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.把被拖元素追加到放置元素（目标元素）中
附录
> <a> 超链接
> style 定义 css 样式
> 将 <ul> 标签与 <li> 标签一起使用，创建无序列表。
sub 快捷
ul>.item$*10 + ctrl+e 快速生成 10 行列表