常用笔记-HTML5
来源：互联网 发布：销售数据分析方法 编辑：程序博客网 时间：2024/05/21 06:35
HTML5中新的网页结构
header元素表示页面中的一个区域或者整个页面的标题<header></header>
nav元素表示页面中的导航链接部分<nav></nav>
article元素表示页面中的一块与上下文不相关的独立内容，比如一片文章中的文章<article></article>
section表示页面中的一块内容区块，比如章节的页眉、页脚等等。也可以和hn(h1,h2...)等一起使用，标识出文档的结构<section></section>
aside元素表示article元素的内容之外的，和内容相关的辅助信息<aside></aside>
footer元素表示页面或者是页面中的一块区域的页脚，比如存放文件的创建时间、作者、联系方式等等<footer></footer>
和其他不相关的独立内容用article
一块内容的不同部分分块用section，section中要有标题
内容的附属部分，比如广告，引用放在aside中
nav元素的使用场合
1.传统的导航条2.侧边栏导航3.内页导航4.翻页操作
time元素
<time datetime="2014-9-28">时间</time>
<time datetime="2014-9-28">9月28</time>
<time datetime="2014-9-28">今天时间</time>
<time datetime="2014-9-28T22:30">9月28晚上10点半</time>
<time datetime="2014-9-28T2:30Z">UTC标准时间10点半</time>
<time datetime="2014-9-28T22:30+8:00">中国时间9月28晚上10点半</time>
在元素里面包含了pubdate属性的话，就是表示当前文章的发布时间
hgroup元素是将标题和他的子标题进行分组的元素。hgroup元素一般会把h1-h6的元素进行分组，比如在一个内容区块的标题和他的子标题算是一组
通常情况下，文章只有一个主标题的时候，是不需要hgroup的
<hgroup>
<h1>asda</h1>
<h2>asdas</h2>
</hgroup>
address元素用来在页面中呈现联系信息，包括文档的作者、邮箱、地址、电话信息等。
address元素还用来展示和文章的相关的联系人的所有联系信息
figure元素是一种元素的组合，带有可选标题。figure元素用来在表示页面上一块独立的内容，如果将他从网页上删除不给我们的网页造成影响
figcaption元素表示figure元素的标题，它属于figure元素，figcaption元素必须书写在figure元素内部，可以写在figure元素内其他元素前面或后面。一个figure元素内最多只允许放置一个figcaption元素
<figure>
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<figcaption>image</figcaption>
</figure>
details元素是一种标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性，当该值为true时，
该元素内部的子元素应该被展开显示。当该元素属性值为false时，其内部的子元素应被收缩起来不显示。该属性的默认值为false，当页面打开
其内部的子元素应处于收缩状态。
summary元素从属于detail元素，用鼠标点击summary元素的内容文字时，details元素中的其他所有从属元素将会展开或者收缩。如果details
元素内没有summary元素，浏览器会提供默认的文字以供点击，例如“details”。目前只有Chrome支持
mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考价值作用的一段文字。通常在引用原文时使用mark元素，目的是引起读者的注意
mark元素是对原文内容有补充作用的一个元素，他应该用在一段原文作者不认为重要的，但是现在为了原文作者不相关的其他目的而需要突出显示或者
高亮显示的文字上面。 mark元素最主要的目的就是吸引当前用户的注意。 mark元素除了高亮显示之外，还有一个作用就是在引用原文时，为了某种特殊的目的
而把作者没有表示出来的内容重点表示出来
progress元素代表一个任务的完成进度，这个进度可以是不确定的，表示进度正在进行，但不清楚这个还有多少工作量没有完成，也可以用0到某个最大数字
（比如100）之间的数字来表示准确的进度情况（比如百分比）
该元素具有两个表示当前任务完成情况的属性，value属性表示已经完成了多少工作量，max属性表示总共又多少工作量。工作量的单位是随意的，不指定的
属性只能指定为有效的浮点数，value属性必须大于0，且小于或等于max的属性，max的属性必须大于0
在html5中废除的元素
1.能使用CSS代替的元素
basefont,big,center,font,s,strike,tt,u
2.不再使用frame框架
html5大纲
关于HTML的大纲编排，我们可以划分为“显示编排”和“隐式编排”两种
1.显示编排是指明确使用section元素进行分块来创建网页文档，每个内容区块内使用标题(h1-h6)
2.隐式编排就是我们不适用section元素进行明确的区块划分，而是根据我们写的(h1-h6，hgroup)元素进行自动
创建区块，因为html5分析器可以根据不同级别的标题判断出对应的内容区块
3.标题分级：不同的标题有不同的级别，在（h1-h6）中，h1的级别最高，而h6的级别最低。所以在隐式编排的
情况下就会按照一下规则生成
1）如果出现新的标题比上一个标题级别低，那么将会生成下级内容区块
2）如果新出现的标题比上面出现的一个标题级别高，或者两者级别相同，那么就生成新的内容区块
4不同的内容区块可以使用相同级别的标题，父内容区块与子内容区块都可以使用相同级别的h1标题
<body>
<header>
<h1>网页大纲编写实战</h1>
<nav>
<ul>
<li><a href="index.html" >首页</a> </li>
<li><a href="index2.html">内容页</a> </li>
<li><a href="index3.html">联系我们</a></li>
</ul>
</nav>
</header>
<article>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>文章正文</p>
<section>
<h1>文章评论列表：</h1>
<article>
<h1>评论标题A</h1>
<P>评论内容A</P>
</article>
<article>
<h1>评论标题B</h1>
<p>评论标题B</p>
</article>
</section>
</article>
<footer>
<small>麦子学院版权所有</small>
</footer>
</body>
canvas是html5中新增的绘制图形的
1.创建画布，指定id，宽度，高度<canvas id="canvas" width="100px" height="100px"></canvas>
2.引入绘画脚本<script type="text/javascript" src="canvas.js" charset="utf-8"></script>
3.使用draw函数进行绘画，再body的属性里面，使用onload="draw('canvas');"语句，调用脚本文件中的draw函数进行图形绘画
画矩形
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("mm");
var context = canvas.getContext('2d');
context.fillStyle = "black";
context.strokeStyle = "orange";
context.lineWidth = 5;
context.fillRect(100, 50, 100, 150);
context.strokeRect(130, 70, 50, 60);
}
</script>
</head>
<body>
<canvas id="mm" width="300px" height="300px"></canvas>
</body>
</html>
使用canvas创建圆形路径时，需要使用图形上下文对象的arc方法。
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
x是绘制圆形的起点横坐标，y是绘制圆形的起点纵坐标，radius是圆形的半径，startAngle是开始角度，endAngle是结束角度，anticlockwise是否按照顺时针方向绘制
绘制半径与圆弧时，指定开始弧度与结束弧度，如果喜欢使用角度，可以使用以下方法，把角度转换为弧度
var radius = degress*Math.PI/180
这个里面Math.PI表示的是角度是180度，Math.PI*2的角度是180度
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("mm");
var context = canvas.getContext('2d');
for (var i = 1; i < 30; i++) {
context.beginPath();
context.arc(i*13, i*13, i*9, 0, Math.PI * 2, true);
context.fillStyle = 'rgba(255,0,0,0.1)';
context.closePath();
context.fill();
context.strokeStyle = 'red';
context.stroke();
}
}
</script>
</head>
<body>
<canvas id="mm" width="500px" height="500px"></canvas>
</body>
</html>
context.fillText(text, x, y, [maxwidth]);
context.strokeText(text, x, y, [maxwidth]);
maxwidth是可选参数，最大宽度，防止文字溢出,内容会被压缩变瘦（不是裁剪）
context.textBaseline = 'alphabetic';
属性值可以是top(顶部对齐)，hanging（悬挂），middle（中间对齐），bottom（底部对齐），alohabetic默认值
context.textAlign = 'start';
属性值可以是start,end,left,right,center
我们可以使用canvas api来保存图片
使用toDataURL方法把绘画的状态输出到一个data URL中然后重新装载，然后我们可以把重新装载的文件直接保存
canvas api保存文件的原理实际上就是把我们绘画的状态输出到一个data URL所指向的数据中的过程。
data URL实际上就是base64编码的URL，主要是用于小型的，可以在网页中直接嵌入，而不需要从外部嵌入数据，比如img元素里面的图像文件
data URL 的格式"data:image/jpeg;base64,/j4/4..."
toDataURL的使用方法
canvas.toDataURL(type)
这个方法使用一个参数type，表示输出数据的MIME类型（image/jpeg)
擦除图像
context.clearRect(x,y,width,height);
video元素是专门用来播放网络上视频或电影
audio元素是用来播放网络上声音
<audio src="aa.mp3" controls="controls"></audio>
对于不支持的浏览器我们可以在这对元素中加入提示语句来代替
<video width="750" height="400" src="time.mp4">Your browser doesn't support video</video>
source元素指定多个播放格式与编码，以确保浏览器可以从中选择一种支持的格式，训责顺序自上而下
<video>
<source src="video.m4v" type="video/mp4/" />
<source src="video.webm" type="video/webm" />
</video>
autoplay属性指定是否当网页加载完成后自动播放
preload属性指定是否对数据进行预加载，如果是的话，浏览器会将视频或音频数据进行缓冲
preload: none表示不预加载，metadata表示加载媒体的元数据，auto表示加载全部（默认）
poster（video独有）但视频还未/不能播放的时候显示该图片
<video src="video.mp4" poster="video.jpg"></video>
loop属性指定是否循环播放音频或视频
error属性，在读取过程中一旦发生错误，将返回一个返回值，正常情况下为null
sample:
var video = document.getElementById('video');
video.addEventListener("error", function(){
var error = video.error;
switch(error.code){
case 1:
case 2:
}
})
networkState属性返回当前的网络状态
对象元素的draggable属性设置为true，还需要注意的是a元素和img元素必须指定href
编写与拖放有关的事件处理代码
dragstart 开始拖放
drag 拖放过程
dragenter 被拖放的元素进入本元素
dragover 被拖放的元素在本元素内移动
dragleave 被拖放的元素离开本元素
drop 其他元素被拖放到了本元素
dragend 拖放操作结束
dataTransfer对象的属性和方法
dropEffect 表示拖放的视觉效果，允许设置其值，这个效果必须用在effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值none, copy, link, move
effectAllowed 用来指定当前元素被拖放时所允许的视觉效果，可以指定的值copy, link, move, copylink, all, none, unintialized
types 存入的数据的种类，字符串的伪数组
clearData
setData
getData
setDragImage(Element img, long x, long y) 用img元素来设置拖放图标
dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示一个元素被拖放时所允许的视觉效果，一般在ondragstart事件中设定
header元素表示页面中的一个区域或者整个页面的标题<header></header>
nav元素表示页面中的导航链接部分<nav></nav>
article元素表示页面中的一块与上下文不相关的独立内容，比如一片文章中的文章<article></article>
section表示页面中的一块内容区块，比如章节的页眉、页脚等等。也可以和hn(h1,h2...)等一起使用，标识出文档的结构<section></section>
aside元素表示article元素的内容之外的，和内容相关的辅助信息<aside></aside>
footer元素表示页面或者是页面中的一块区域的页脚，比如存放文件的创建时间、作者、联系方式等等<footer></footer>
和其他不相关的独立内容用article
一块内容的不同部分分块用section，section中要有标题
内容的附属部分，比如广告，引用放在aside中
nav元素的使用场合
1.传统的导航条2.侧边栏导航3.内页导航4.翻页操作
time元素
<time datetime="2014-9-28">时间</time>
<time datetime="2014-9-28">9月28</time>
<time datetime="2014-9-28">今天时间</time>
<time datetime="2014-9-28T22:30">9月28晚上10点半</time>
<time datetime="2014-9-28T2:30Z">UTC标准时间10点半</time>
<time datetime="2014-9-28T22:30+8:00">中国时间9月28晚上10点半</time>
在元素里面包含了pubdate属性的话，就是表示当前文章的发布时间
hgroup元素是将标题和他的子标题进行分组的元素。hgroup元素一般会把h1-h6的元素进行分组，比如在一个内容区块的标题和他的子标题算是一组
通常情况下，文章只有一个主标题的时候，是不需要hgroup的
<hgroup>
<h1>asda</h1>
<h2>asdas</h2>
</hgroup>
address元素用来在页面中呈现联系信息，包括文档的作者、邮箱、地址、电话信息等。
address元素还用来展示和文章的相关的联系人的所有联系信息
figure元素是一种元素的组合，带有可选标题。figure元素用来在表示页面上一块独立的内容，如果将他从网页上删除不给我们的网页造成影响
figcaption元素表示figure元素的标题，它属于figure元素，figcaption元素必须书写在figure元素内部，可以写在figure元素内其他元素前面或后面。一个figure元素内最多只允许放置一个figcaption元素
<figure>
<img src="1.jpg">
<img src="2.jpg">
<img src="3.jpg">
<figcaption>image</figcaption>
</figure>
details元素是一种标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性，当该值为true时，
该元素内部的子元素应该被展开显示。当该元素属性值为false时，其内部的子元素应被收缩起来不显示。该属性的默认值为false，当页面打开
其内部的子元素应处于收缩状态。
summary元素从属于detail元素，用鼠标点击summary元素的内容文字时，details元素中的其他所有从属元素将会展开或者收缩。如果details
元素内没有summary元素，浏览器会提供默认的文字以供点击，例如“details”。目前只有Chrome支持
mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考价值作用的一段文字。通常在引用原文时使用mark元素，目的是引起读者的注意
mark元素是对原文内容有补充作用的一个元素，他应该用在一段原文作者不认为重要的，但是现在为了原文作者不相关的其他目的而需要突出显示或者
高亮显示的文字上面。 mark元素最主要的目的就是吸引当前用户的注意。 mark元素除了高亮显示之外，还有一个作用就是在引用原文时，为了某种特殊的目的
而把作者没有表示出来的内容重点表示出来
progress元素代表一个任务的完成进度，这个进度可以是不确定的，表示进度正在进行，但不清楚这个还有多少工作量没有完成，也可以用0到某个最大数字
（比如100）之间的数字来表示准确的进度情况（比如百分比）
该元素具有两个表示当前任务完成情况的属性，value属性表示已经完成了多少工作量，max属性表示总共又多少工作量。工作量的单位是随意的，不指定的
属性只能指定为有效的浮点数，value属性必须大于0，且小于或等于max的属性，max的属性必须大于0
在html5中废除的元素
1.能使用CSS代替的元素
basefont,big,center,font,s,strike,tt,u
2.不再使用frame框架
html5大纲
关于HTML的大纲编排，我们可以划分为“显示编排”和“隐式编排”两种
1.显示编排是指明确使用section元素进行分块来创建网页文档，每个内容区块内使用标题(h1-h6)
2.隐式编排就是我们不适用section元素进行明确的区块划分，而是根据我们写的(h1-h6，hgroup)元素进行自动
创建区块，因为html5分析器可以根据不同级别的标题判断出对应的内容区块
3.标题分级：不同的标题有不同的级别，在（h1-h6）中，h1的级别最高，而h6的级别最低。所以在隐式编排的
情况下就会按照一下规则生成
1）如果出现新的标题比上一个标题级别低，那么将会生成下级内容区块
2）如果新出现的标题比上面出现的一个标题级别高，或者两者级别相同，那么就生成新的内容区块
4不同的内容区块可以使用相同级别的标题，父内容区块与子内容区块都可以使用相同级别的h1标题
<body>
<header>
<h1>网页大纲编写实战</h1>
<nav>
<ul>
<li><a href="index.html" >首页</a> </li>
<li><a href="index2.html">内容页</a> </li>
<li><a href="index3.html">联系我们</a></li>
</ul>
</nav>
</header>
<article>
<hgroup>
<h1>文章主标题</h1>
<h2>文章子标题</h2>
</hgroup>
<p>文章正文</p>
<section>
<h1>文章评论列表：</h1>
<article>
<h1>评论标题A</h1>
<P>评论内容A</P>
</article>
<article>
<h1>评论标题B</h1>
<p>评论标题B</p>
</article>
</section>
</article>
<footer>
<small>麦子学院版权所有</small>
</footer>
</body>
canvas是html5中新增的绘制图形的
1.创建画布，指定id，宽度，高度<canvas id="canvas" width="100px" height="100px"></canvas>
2.引入绘画脚本<script type="text/javascript" src="canvas.js" charset="utf-8"></script>
3.使用draw函数进行绘画，再body的属性里面，使用onload="draw('canvas');"语句，调用脚本文件中的draw函数进行图形绘画
画矩形
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("mm");
var context = canvas.getContext('2d');
context.fillStyle = "black";
context.strokeStyle = "orange";
context.lineWidth = 5;
context.fillRect(100, 50, 100, 150);
context.strokeRect(130, 70, 50, 60);
}
</script>
</head>
<body>
<canvas id="mm" width="300px" height="300px"></canvas>
</body>
</html>
使用canvas创建圆形路径时，需要使用图形上下文对象的arc方法。
context.arc(x,y,radius,startAngle,endAngle,anticlockwise)
x是绘制圆形的起点横坐标，y是绘制圆形的起点纵坐标，radius是圆形的半径，startAngle是开始角度，endAngle是结束角度，anticlockwise是否按照顺时针方向绘制
绘制半径与圆弧时，指定开始弧度与结束弧度，如果喜欢使用角度，可以使用以下方法，把角度转换为弧度
var radius = degress*Math.PI/180
这个里面Math.PI表示的是角度是180度，Math.PI*2的角度是180度
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript">
window.onload = function () {
var canvas = document.getElementById("mm");
var context = canvas.getContext('2d');
for (var i = 1; i < 30; i++) {
context.beginPath();
context.arc(i*13, i*13, i*9, 0, Math.PI * 2, true);
context.fillStyle = 'rgba(255,0,0,0.1)';
context.closePath();
context.fill();
context.strokeStyle = 'red';
context.stroke();
}
}
</script>
</head>
<body>
<canvas id="mm" width="500px" height="500px"></canvas>
</body>
</html>
context.fillText(text, x, y, [maxwidth]);
context.strokeText(text, x, y, [maxwidth]);
maxwidth是可选参数，最大宽度，防止文字溢出,内容会被压缩变瘦（不是裁剪）
context.textBaseline = 'alphabetic';
属性值可以是top(顶部对齐)，hanging（悬挂），middle（中间对齐），bottom（底部对齐），alohabetic默认值
context.textAlign = 'start';
属性值可以是start,end,left,right,center
我们可以使用canvas api来保存图片
使用toDataURL方法把绘画的状态输出到一个data URL中然后重新装载，然后我们可以把重新装载的文件直接保存
canvas api保存文件的原理实际上就是把我们绘画的状态输出到一个data URL所指向的数据中的过程。
data URL实际上就是base64编码的URL，主要是用于小型的，可以在网页中直接嵌入，而不需要从外部嵌入数据，比如img元素里面的图像文件
data URL 的格式"data:image/jpeg;base64,/j4/4..."
toDataURL的使用方法
canvas.toDataURL(type)
这个方法使用一个参数type，表示输出数据的MIME类型（image/jpeg)
擦除图像
context.clearRect(x,y,width,height);
video元素是专门用来播放网络上视频或电影
audio元素是用来播放网络上声音
<audio src="aa.mp3" controls="controls"></audio>
对于不支持的浏览器我们可以在这对元素中加入提示语句来代替
<video width="750" height="400" src="time.mp4">Your browser doesn't support video</video>
source元素指定多个播放格式与编码，以确保浏览器可以从中选择一种支持的格式，训责顺序自上而下
<video>
<source src="video.m4v" type="video/mp4/" />
<source src="video.webm" type="video/webm" />
</video>
autoplay属性指定是否当网页加载完成后自动播放
preload属性指定是否对数据进行预加载，如果是的话，浏览器会将视频或音频数据进行缓冲
preload: none表示不预加载，metadata表示加载媒体的元数据，auto表示加载全部（默认）
poster（video独有）但视频还未/不能播放的时候显示该图片
<video src="video.mp4" poster="video.jpg"></video>
loop属性指定是否循环播放音频或视频
error属性，在读取过程中一旦发生错误，将返回一个返回值，正常情况下为null
sample:
var video = document.getElementById('video');
video.addEventListener("error", function(){
var error = video.error;
switch(error.code){
case 1:
case 2:
}
})
networkState属性返回当前的网络状态
对象元素的draggable属性设置为true，还需要注意的是a元素和img元素必须指定href
编写与拖放有关的事件处理代码
dragstart 开始拖放
drag 拖放过程
dragenter 被拖放的元素进入本元素
dragover 被拖放的元素在本元素内移动
dragleave 被拖放的元素离开本元素
drop 其他元素被拖放到了本元素
dragend 拖放操作结束
dataTransfer对象的属性和方法
dropEffect 表示拖放的视觉效果，允许设置其值，这个效果必须用在effectAllowed属性指定的允许的视觉效果的范围内，允许指定的值none, copy, link, move
effectAllowed 用来指定当前元素被拖放时所允许的视觉效果，可以指定的值copy, link, move, copylink, all, none, unintialized
types 存入的数据的种类，字符串的伪数组
clearData
setData
getData
setDragImage(Element img, long x, long y) 用img元素来设置拖放图标
dropEffect属性与effectAllowed属性结合起来可以设定拖放时的视觉效果。effectAllowed属性表示一个元素被拖放时所允许的视觉效果，一般在ondragstart事件中设定
阅读全文
0 0
- 常用笔记-HTML5
- HTML5笔记-（常用元素）
- HTML5笔记-（常用元素）
- html5 常用
- HTML5笔记
- html5笔记
- html5笔记
- Html5笔记
- html5笔记
- Html5笔记
- html5笔记
- html5笔记
- HTML5 笔记
- html5笔记
- HTML5笔记
- html5笔记
- HTML5笔记
- html5 笔记
- mysql存储过程，生成测试数据
- github入门到上传本地项目
- TensorFlow学习问题总结（持续更新）
- MySQL出现Waiting for table metadata lock的原因以及解决方法
- 读取文件全部内容---C++
- 常用笔记-HTML5
- Unity IAP 谷歌支付，ios支付——最白话，手把手教你做系列。
- 如何判断自己是否具有成为一名优秀程序员的潜质
- SEO优化这几招见效快
- 利用security.js实现RSA加密
- caffe-windows and ECO visual studio 工程配置及编译
- leetcode 687. Longest Univalue Path 深度优先遍历DFS
- Minimum Transport Cost
- SEO失败案例总结：经常犯的7个错误！
