HTML5新增元素（上）
2016-05-21 18:15
253 查看
一、新增元素
1、header元素表示页面中的一个内容区块或整个页面的标题。
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等。
注意：一个页面内并没有限制header的出现次数，也就是说我么可以在同一页面内，不同的内容区块上分别加上一个header元素。
在HTML5中，一个header元素至少可以包含一个heading元素（h1-h6），也可以包括我们下节课将要学习的hgroup元素，还可以包括其他的元素，在新的w3c HTML5标准，我们还可以把nav元素包括进去。
2、nav 元素表示页面中导航链接的部分。
3、article元素表示页面中的一块与上下文不相关的独立内容，比如一篇文章中的文章。
4、section元素表示页面中的一块内容区块，比如章节的页眉页脚等，也可以和Hn（H1、H2、H3。。。）等一起使用，表示出文档的结构。
组成：标题+内容 如果第一section元素中还要包含section子元素那么第一个section元素也不可省。section禁忌：不要使用section元素设置样式作为设置样式的页面容器，那是div的工作。如果nav article aside 更适合使用条件就不要使用section元素，不要没有标题的内容区块使用section元素。
5、aside元素表示article元素的内容之外的，和内容相关的辅助信息。使用方法有2种：1、被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是当前主要内容的参考资料名词解释等。2、在article之外使用的作为页面或全局的附属信息。
6、footer元素表示页面或者页面中的一块区域的页脚，比如存放文件的创建时间、作者、联系方式等。
7、time元素中的pubdate属性，pubdate就是表示的当前文章的发布时间。
<time datetime="2016-05-16" pubdate="pubdate">2016年5月16日</time>
8、hgroup元素是将标题和他的子标题进行分期的元素。hgroup元素一般会把h1-h6的元素进行分组，比如在一个内容区块的标题和他的子标题算是一组。通常情况下，文章只有一个主标题时，是不需要hgroup元素的。
9、footer元素可以作为他的上层父级内容区块或是一个根区块的注脚。footer元素一般情况下包括与它相关的区块的注脚信息，比如作者、版权信息等。注意：footer元素和我们前面所谓的header元素一样，并没有限制他的个数。并且footer元素可以为article元素或者section元素添加footer元素。
10、address元素用来在页面中呈现联系信息，包括文档的作者、邮箱、地址、电话信息等。address元素还用来展示和文章中的相关的联系人的所有联系信息。
11、figure元素与figcaption figure元素是一种元素的组合，带有可选标题，figure元素用来表示页面上一块独立的内容，如果将他从网页上删除不给我们的网页造成影响。figcaption元素表示figure元素的标题，它属于figure元素，figcaption元素必须书写在figure元素内部，可以写在figure元素内的其他从属元素前面或后面。一个figure元素内最多只允许放置一个figcaption元素。
12、details元素与summary元素 details元素是一种用于标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性，当该值为true时，该元素内部的子元素应该被展开显示，当该属性值为false时，其内部的子元素应该被收缩起来不现实。该属性的默认值为false，当页面打开时其内部的子元素应该处于收缩状态。
summary元素从属于details元素，用鼠标点击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或者收缩。如果details元素内没有summary元素，浏览器会提供默认的文字以供点击，例如“details” 。目前只有谷歌的chrome浏览器支持！
13、mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字。通常在引用原文时使用mark元素，目的是引起读者的注意。mark元素是对原文内容有补充作用的一个元素，他应该用在一段原文作者不认为重要的，但是现在为了与原文作者不相关的其他目的而需要突出显示或者高亮显示的文字上面。mark元素最主要的目的就是吸引当前用户的注意。mark元素除了高亮显示之外，还有一个作用就是在引用原文时，为了某种特殊的目的而把作者没有表示出来的内容重点表示出来。
14、progress元素代表一个任务的完成进度，这个进度可以使不确定的，表示进度Z正在进行，但不清楚这个还有多少工作量没有完成，也可以用0到某个最大数字（比如100）之间的数字来表示准确的进度情况（比如百分比）
该元素具有两个表示当前任务完成情况的属性，value属性表示已经完成了多少工作量，max属性表示总共有多少工作量，工作量的单位是随意的，不指定的。在设定属性的时候，value属性和max属性只能指定为有效的浮点数，value属性必须大于0，且小于或等于max的属性，max的属性必须大于0。
15、meter元素表示规定范围内的数值量。meter有6个属性：1）value属性：表示的是实际值。该属性默认为0，可以为该属性制定一个浮点小数值。2)min属性：指定规定范围时允许使用的最小值，默认0，在设定该属性时所设定的值不能小于0。3）max属性：指定规定范围时允许使用的最大值，如果设定时该属性值小于min的值，那么把min属性的值视为最大值。max属性的默认值为1。4）low属性：规定范围的下限值，必须小于或者等于high的值。5）high属性：规定范围的上限值，如果该属性值小于low属性的值，那么把low属性的值视为high属性的值，同样如果该属性的值大于max属性的值，那么把max属性的值视为high的值。6）optimum属性：最佳值属性值必须在min属性值与max属性值之间，可以大于high属性值。
16、废除的元素
17、HTML5大纲
H5大纲分析工具:http://gsnedders.html5.org/outliner
4、不同的内容区块可以使用相同级别的标题，父内容区块与子内容区块都可以使用相同级别的H1标题
18、加强版的ol列表元素 ol的start属性和reversed属性
可以通过start属性来定义标号的开始值。可以通过reversed属性来进行反向编号。
19、dl元素在HTML5中，把dl元素进行了重定义。每一项包含一条或者多条带名字的dt元素，用来表示术语，dt元素后面紧跟一个或者多个dd元素，用来表示定义，重定义后的dl列表包含多个带名字的列表项。
20、canvsa是h5一个新增重要元素，用来绘制图形的。
1、canvas 标签介绍及绘图环境设置。
2、常用绘制方法：fillRect() 、strokeRect()、 fill() 、stroke()、arc()
3、绘图样式设置：fillStyle、strokeStyle、lineWidth、lineJoin、lineCap
4、路径绘制：beginPath、 colsePath 、moveTo、 lineTo
5、canvas 转换： translate 、rotate 、scale
6、像素操作：getImageData() 、putImageData()、createImageData()
画布的创建方法：指定id、width(画布宽度)、height（画布高度）。
例如：<canvas id = "canvas" width="500" height ="350"></canvas>
上面这个实例的意思就是，创建一个画布，长度500.高度350.
引入脚本的方法：比如<script type="text/javascript" src = "canvas.js" charset = "utf-8"></script>
上面这个实例的意思就是：引入一个名为canvas的Js脚本，js脚本的语言编码是utf-8.
使用draw函数进行绘画，在body的属性里面，使用onload=“draw（'canvas'）;”语句。调用脚本文件中的draw函数进行图形绘画。
绘制一个矩形的步骤：1、获取canvas元素 2、取得上下文 3、填充与绘制边框 4、设置绘制样式 5、指定画笔宽度 6、设置颜色值 7、绘制矩形
1、获取canvas元素：用getElementById方法获取到canvas对象。
2、取得上下文 ：在绘制图形的时候要用到图形上下文，图形上下文是一个封装了很多绘图功能的对象。要使用canvas对象的getContext（）方法获得图形上下文。在draw函数中把参数设置为“2d”。
3、填充与绘制：canvas绘制有两种方法：1）填充（fill）填充是将图形内部填满。2）绘制边框（stroke）绘制边框是不把图形内部填满，只是绘制图形的外框。
4、设置绘制样式：在绘制图形的时候，首先要设定好绘制的样式，之后可以调用有关的方法进行绘制。1）fillStyle属性：填充的样式，在这个属性里面设置填入的颜色值。2）strokeStyle属性：图形边框的样式，在这个属性里面设置填入边框的填充颜色。
5、设置颜色值：绘制图形的时候要填充的颜色或者边框分别可以通过fillstyle属性和strokeStyle属性来指定。颜色值可以使用（16进制#000000
颜色名（red）rgb(rgba(0,0,0)) rgba(rgba(0,0,0,0.1))）
6、指定画笔宽度：通过上下文对象（context）的lineWidth属性来设置图形边框的宽度，任何直线的宽度都是可以通过lineWidth来设置直线的宽度的。
7、绘制矩形:使用fillRect方法和strokeRect方法来填充矩形和绘制矩形的边框.
context.fillRect(x,y,width,height) context.strokeRect(x,y,width,heiht)
这两种方法的参数都是一样的，x是指矩形的起点横坐标，y是指矩形的纵坐标，坐标的原点是canvas画布的最左上角，width是指矩形的长度，height是指矩形的高度。
8、绘制圆形： 1）开始创建路径：使用图形上下文对象的beginpath方法。context.beginPath(); 2)创建图形路径：创建圆形路径时，需要使用图形上下文对象的arc方法。context.arc(x,y,radius,starAngle,endAngle,anticlockwise)
x是绘制圆形的起点横坐标，y是绘制圆形的起点的纵坐标，radius是圆形的半径，starAngle是开始的角度，endAngle是结束的角度。anticlockwise是否按顺时针方向绘制。绘制半径与圆弧时指定参数为开始弧度与结束弧度，如果你喜欢使用角度，可以使用以下这个方法，把角度换成弧度。 var radius = degrees*Math.PI/180
这个里面的Math.PI表示的角度是180度，Math.PI*2的角度是360度。
9、绘制文字：绘制字体时可以使用fillText方法或者strokeText方法。
fillText方法用填充的方式来绘制字符串；context.fillText(text,x,y,[maxwidth]);
strokeText方法用轮廓的方式来绘制字符串；context.strokeText(text,x,y,[maxwidth]);
第一个参数text表示要绘制的文字，第二个参数X表示要绘制的文字的起点横坐标，第三个参数Y表示要绘制的文字的起点纵坐标，第四个参数maxwidth为可选参数，表示显示文字的时候最大的宽度，可以防止文字溢出。
context.font =“font-weight font-size font-family”;
context.font有三个参数，第一个参数font-weight
第二个参数font-size规定文本的字体尺寸。
第三个参数font-family规定文本的字体系列。
设置文字垂直对齐方式：context.textBaseline = 'alphabetic';
属性值可以是top（顶部对齐）、hanging(悬挂)、middle(中间对齐)、bottom（底部对齐）、alphabetic是默认值。
设置文字水平对齐方式：conText.textAlign="start" 属性值可以设置为：start、end、left、right、center.
1、header元素表示页面中的一个内容区块或整个页面的标题。
header元素是一种具有引导和导航作用的结构元素，通常用来放置整个页面或页面内的一个内容区块的标题，但也可以包含其他的内容，比如在header里面放置logo图片、搜索表单等。
注意：一个页面内并没有限制header的出现次数，也就是说我么可以在同一页面内，不同的内容区块上分别加上一个header元素。
在HTML5中，一个header元素至少可以包含一个heading元素（h1-h6），也可以包括我们下节课将要学习的hgroup元素，还可以包括其他的元素，在新的w3c HTML5标准，我们还可以把nav元素包括进去。
2、nav 元素表示页面中导航链接的部分。
3、article元素表示页面中的一块与上下文不相关的独立内容，比如一篇文章中的文章。
4、section元素表示页面中的一块内容区块，比如章节的页眉页脚等，也可以和Hn（H1、H2、H3。。。）等一起使用，表示出文档的结构。
组成：标题+内容 如果第一section元素中还要包含section子元素那么第一个section元素也不可省。section禁忌：不要使用section元素设置样式作为设置样式的页面容器，那是div的工作。如果nav article aside 更适合使用条件就不要使用section元素，不要没有标题的内容区块使用section元素。
5、aside元素表示article元素的内容之外的，和内容相关的辅助信息。使用方法有2种：1、被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是当前主要内容的参考资料名词解释等。2、在article之外使用的作为页面或全局的附属信息。
6、footer元素表示页面或者页面中的一块区域的页脚，比如存放文件的创建时间、作者、联系方式等。
7、time元素中的pubdate属性，pubdate就是表示的当前文章的发布时间。
<time datetime="2016-05-16" pubdate="pubdate">2016年5月16日</time>
8、hgroup元素是将标题和他的子标题进行分期的元素。hgroup元素一般会把h1-h6的元素进行分组，比如在一个内容区块的标题和他的子标题算是一组。通常情况下，文章只有一个主标题时，是不需要hgroup元素的。
9、footer元素可以作为他的上层父级内容区块或是一个根区块的注脚。footer元素一般情况下包括与它相关的区块的注脚信息，比如作者、版权信息等。注意：footer元素和我们前面所谓的header元素一样，并没有限制他的个数。并且footer元素可以为article元素或者section元素添加footer元素。
10、address元素用来在页面中呈现联系信息，包括文档的作者、邮箱、地址、电话信息等。address元素还用来展示和文章中的相关的联系人的所有联系信息。
11、figure元素与figcaption figure元素是一种元素的组合，带有可选标题，figure元素用来表示页面上一块独立的内容，如果将他从网页上删除不给我们的网页造成影响。figcaption元素表示figure元素的标题，它属于figure元素，figcaption元素必须书写在figure元素内部，可以写在figure元素内的其他从属元素前面或后面。一个figure元素内最多只允许放置一个figcaption元素。
12、details元素与summary元素 details元素是一种用于标识该元素内部的子元素可以被展开、收缩显示的元素。details元素具有一个布尔类型的open属性，当该值为true时，该元素内部的子元素应该被展开显示，当该属性值为false时，其内部的子元素应该被收缩起来不现实。该属性的默认值为false，当页面打开时其内部的子元素应该处于收缩状态。
summary元素从属于details元素，用鼠标点击summary元素中的内容文字时，details元素中的其他所有从属元素将会展开或者收缩。如果details元素内没有summary元素，浏览器会提供默认的文字以供点击，例如“details” 。目前只有谷歌的chrome浏览器支持！
13、mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字。通常在引用原文时使用mark元素，目的是引起读者的注意。mark元素是对原文内容有补充作用的一个元素，他应该用在一段原文作者不认为重要的，但是现在为了与原文作者不相关的其他目的而需要突出显示或者高亮显示的文字上面。mark元素最主要的目的就是吸引当前用户的注意。mark元素除了高亮显示之外，还有一个作用就是在引用原文时，为了某种特殊的目的而把作者没有表示出来的内容重点表示出来。
14、progress元素代表一个任务的完成进度，这个进度可以使不确定的，表示进度Z正在进行，但不清楚这个还有多少工作量没有完成，也可以用0到某个最大数字（比如100）之间的数字来表示准确的进度情况（比如百分比）
该元素具有两个表示当前任务完成情况的属性，value属性表示已经完成了多少工作量，max属性表示总共有多少工作量，工作量的单位是随意的，不指定的。在设定属性的时候，value属性和max属性只能指定为有效的浮点数，value属性必须大于0，且小于或等于max的属性，max的属性必须大于0。
15、meter元素表示规定范围内的数值量。meter有6个属性：1）value属性：表示的是实际值。该属性默认为0，可以为该属性制定一个浮点小数值。2)min属性：指定规定范围时允许使用的最小值，默认0，在设定该属性时所设定的值不能小于0。3）max属性：指定规定范围时允许使用的最大值，如果设定时该属性值小于min的值，那么把min属性的值视为最大值。max属性的默认值为1。4）low属性：规定范围的下限值，必须小于或者等于high的值。5）high属性：规定范围的上限值，如果该属性值小于low属性的值，那么把low属性的值视为high属性的值，同样如果该属性的值大于max属性的值，那么把max属性的值视为high的值。6）optimum属性：最佳值属性值必须在min属性值与max属性值之间，可以大于high属性值。
16、废除的元素
17、HTML5大纲
H5大纲分析工具:http://gsnedders.html5.org/outliner
4、不同的内容区块可以使用相同级别的标题，父内容区块与子内容区块都可以使用相同级别的H1标题
18、加强版的ol列表元素 ol的start属性和reversed属性
可以通过start属性来定义标号的开始值。可以通过reversed属性来进行反向编号。
19、dl元素在HTML5中，把dl元素进行了重定义。每一项包含一条或者多条带名字的dt元素，用来表示术语，dt元素后面紧跟一个或者多个dd元素，用来表示定义，重定义后的dl列表包含多个带名字的列表项。
20、canvsa是h5一个新增重要元素，用来绘制图形的。
1、canvas 标签介绍及绘图环境设置。
2、常用绘制方法：fillRect() 、strokeRect()、 fill() 、stroke()、arc()
3、绘图样式设置：fillStyle、strokeStyle、lineWidth、lineJoin、lineCap
4、路径绘制：beginPath、 colsePath 、moveTo、 lineTo
5、canvas 转换： translate 、rotate 、scale
6、像素操作：getImageData() 、putImageData()、createImageData()
画布的创建方法：指定id、width(画布宽度)、height（画布高度）。
例如：<canvas id = "canvas" width="500" height ="350"></canvas>
上面这个实例的意思就是，创建一个画布，长度500.高度350.
引入脚本的方法：比如<script type="text/javascript" src = "canvas.js" charset = "utf-8"></script>
上面这个实例的意思就是：引入一个名为canvas的Js脚本，js脚本的语言编码是utf-8.
使用draw函数进行绘画，在body的属性里面，使用onload=“draw（'canvas'）;”语句。调用脚本文件中的draw函数进行图形绘画。
绘制一个矩形的步骤：1、获取canvas元素 2、取得上下文 3、填充与绘制边框 4、设置绘制样式 5、指定画笔宽度 6、设置颜色值 7、绘制矩形
1、获取canvas元素：用getElementById方法获取到canvas对象。
2、取得上下文 ：在绘制图形的时候要用到图形上下文，图形上下文是一个封装了很多绘图功能的对象。要使用canvas对象的getContext（）方法获得图形上下文。在draw函数中把参数设置为“2d”。
3、填充与绘制：canvas绘制有两种方法：1）填充（fill）填充是将图形内部填满。2）绘制边框（stroke）绘制边框是不把图形内部填满，只是绘制图形的外框。
4、设置绘制样式：在绘制图形的时候，首先要设定好绘制的样式，之后可以调用有关的方法进行绘制。1）fillStyle属性：填充的样式，在这个属性里面设置填入的颜色值。2）strokeStyle属性：图形边框的样式，在这个属性里面设置填入边框的填充颜色。
5、设置颜色值：绘制图形的时候要填充的颜色或者边框分别可以通过fillstyle属性和strokeStyle属性来指定。颜色值可以使用（16进制#000000
颜色名（red）rgb(rgba(0,0,0)) rgba(rgba(0,0,0,0.1))）
6、指定画笔宽度：通过上下文对象（context）的lineWidth属性来设置图形边框的宽度，任何直线的宽度都是可以通过lineWidth来设置直线的宽度的。
7、绘制矩形:使用fillRect方法和strokeRect方法来填充矩形和绘制矩形的边框.
context.fillRect(x,y,width,height) context.strokeRect(x,y,width,heiht)
这两种方法的参数都是一样的，x是指矩形的起点横坐标，y是指矩形的纵坐标，坐标的原点是canvas画布的最左上角，width是指矩形的长度，height是指矩形的高度。
8、绘制圆形： 1）开始创建路径：使用图形上下文对象的beginpath方法。context.beginPath(); 2)创建图形路径：创建圆形路径时，需要使用图形上下文对象的arc方法。context.arc(x,y,radius,starAngle,endAngle,anticlockwise)
x是绘制圆形的起点横坐标，y是绘制圆形的起点的纵坐标，radius是圆形的半径，starAngle是开始的角度，endAngle是结束的角度。anticlockwise是否按顺时针方向绘制。绘制半径与圆弧时指定参数为开始弧度与结束弧度，如果你喜欢使用角度，可以使用以下这个方法，把角度换成弧度。 var radius = degrees*Math.PI/180
这个里面的Math.PI表示的角度是180度，Math.PI*2的角度是360度。
9、绘制文字：绘制字体时可以使用fillText方法或者strokeText方法。
fillText方法用填充的方式来绘制字符串；context.fillText(text,x,y,[maxwidth]);
strokeText方法用轮廓的方式来绘制字符串；context.strokeText(text,x,y,[maxwidth]);
第一个参数text表示要绘制的文字，第二个参数X表示要绘制的文字的起点横坐标，第三个参数Y表示要绘制的文字的起点纵坐标，第四个参数maxwidth为可选参数，表示显示文字的时候最大的宽度，可以防止文字溢出。
context.font =“font-weight font-size font-family”;
context.font有三个参数，第一个参数font-weight
第二个参数font-size规定文本的字体尺寸。
第三个参数font-family规定文本的字体系列。
设置文字垂直对齐方式：context.textBaseline = 'alphabetic';
属性值可以是top（顶部对齐）、hanging(悬挂)、middle(中间对齐)、bottom（底部对齐）、alphabetic是默认值。
设置文字水平对齐方式：conText.textAlign="start" 属性值可以设置为：start、end、left、right、center.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 