html5新增标签,html5新增标签元素

html5新增的标签有什么？

新增的结构标签：

成都创新互联是一家专注网站建设、网络营销策划、微信小程序定制开发、电子商务建设、网络推广、移动互联开发、研究、服务为一体的技术型公司。公司成立10年以来，已经为上1000家成都纯水机各业的企业公司提供互联网服务。现在，服务的上1000家客户与我们一路同行，见证我们的成长；未来，我们一起分享成功的喜悦。

1、header元素

表示页面中一个区块或真个页面的标题。

2、内hgroup元素

表示对真个页面或页面中的容一个内容区块的标题进行组合。

3、article元素

表示页面中一块与上下文不相关的独立内容。比如一篇文章。

4、aside元素

表示article元素内容之外的、与article元素内容相关的辅助信息。

5、footer元素

表示整个页面或页面中一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者的联系信息。

HTML5新规则：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。减少对外部插件的需求（比如 Flash），更优秀的错误处理，更多取代脚本的标记，HTML5 应该独立于设备开发进程应对公众透明 ;

HTML5 新特性：

新的特殊内容元素，比如 article、footer等，新的表单控件，比如 calendar、date、time、email、url、search；用于媒介回放的 video 和 audio 元素；用于绘画的 canvas 元素

对本地离线存储的更好的支持。

Html5新增的标签有哪些

HTML5中新增标签较多，下面说几个常见的

article

定义外部的内容，外部内容可以是来自一个外部的新闻提供者的一篇新的文章，或者来自 blog 的文本，或者是来自论坛的文本。亦或是来自其他外部源内容。

aside

定义 article 以外的内容。aside 的内容应该与 article 的内容相关。

audio

定义声音，比如音乐或其他音频流。

canvas

定义图形，比如图表和其他图像。

command

定义命令按钮，比如单选按钮、复选框或按钮。

datalist

定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。datalist 及其选项不会被想显示出来，它仅仅是合法的输入值列表。请使用 input 元素的 list 属性来绑定 datalist。

details

用于描述文档或文档某个部分的细节。与

summary标签配合使用可以为 details 定义标题。标题是可见的，用户点击标题时，会显示出 details。定义嵌入的内容，比如插件。

figure

定义媒介内容的分组，以及它们的标题。用于对元素进行组合。

figcaption

定义 figure 元素的标题。”figcaption” 元素应该被置于 “figure” 元素的第一个或最后一个子元素的位置。

footer

定义 section 或 document 的页脚。

header

定义文档的页眉（介绍信息）。

hgroup

定义有关文档中的 section 的信息。用于对网页或区段（section）的标题进行组合。

keygen

定义生成密钥。

mark

定义带有记号的文本。请在需要突出显示文本时使用 m 标签。

meter

定义度量衡。仅用于已知最大和最小值的度量。

nav

定义导航链接的部分。

output

定义不同类型的输出，比如脚本的输出。

progress

定义任何类型的任务的进度。可以使用 progress 标签来显示 JavaScript 中耗费时间的函数的进度。

html5新增标签都有哪些

html5新增标签大致如下：

canvas 新元素

canvas 标签定义图形，比如图表和其他图像。该标签基于 JavaScript 的绘图 API

新多媒体元素

audio 定义音频内容

video 定义视频（video 或者 movie）

source 定义多媒体资源 video 和 audio

embed 定义嵌入的内容，比如插件。

track 为诸如 video 和 audio 元素之类的媒介规定外部文本轨道。

新表单元素

datalist 定义选项列表。请与 input 元素配合使用该元素，来定义 input 可能的值。

keygen 规定用于表单的密钥对生成器字段。

output 定义不同类型的输出，比如脚本的输出。

新的语义和结构元素

HTML5提供了新的元素来创建更好的页面结构：

article 定义页面独立的内容区域。

aside 定义页面的侧边栏内容。

bdi 允许您设置一段文本，使其脱离其父元素的文本方向设置。

command 定义命令按钮，比如单选按钮、复选框或按钮

details 用于描述文档或文档某个部分的细节

dialog 定义对话框，比如提示框

summary 标签包含 details 元素的标题

figure 规定独立的流内容（图像、图表、照片、代码等等）。

figcaption 定义 figure 元素的标题

footer 定义 section 或 document 的页脚。

header 定义了文档的头部区域

mark 定义带有记号的文本。

meter 定义度量衡。仅用于已知最大和最小值的度量。

nav 定义导航链接的部分。

progress 定义任何类型的任务的进度。

ruby 定义 ruby 注释（中文注音或字符）。

rt 定义字符（中文注音或字符）的解释或发音。

rp 在 ruby 注释中使用，定义不支持 ruby 元素的浏览器所显示的内容。

section 定义文档中的节（section、区段）。

time 定义日期或时间。

wbr 规定在文本中的何处适合添加换行符。

初学者建议多访问下菜鸟教程：网页链接，都是比较全面的基础知识，可以看做编程词典，即使老司机也经常去查一些资料。

HTML5新增的内容有哪些？

• h5 的语法

o DOCTYPE 可以使用小写，

o 单标签没有结束标签，

o 可以省略结束的标签: li、dt、dd、p、option、colgroup(用于对表格中的列进行组合，以便对其进行格式化)、thead、tbody、tfoot、 tr、td、tho ，

可以省略的标签 html head body tbody，

• 新增标签特点：语义化，ie8 及以下不生效

o header 标签头部，

o section 划分板块，

o article 与上下文无关的内容，

o aside 可以放侧边工具栏，

o nav 导航，

o figure 和 figcaption 类似于 dl 标签，

o footer 底部，

o main 比较重要的部分，

o mark 标记默认是黄色的高亮，可以修改样式内联10，

• 多媒体标签，

o 音频

内联，

controls 控件，autoplay 自动播放，谷歌不支持，火狐静音下支持， ie 支持，loop 循环播放，muted 静音播放，

o 视频

controls 控件autoplay: 自动播放，谷歌和火狐静音下支持，ie 支持，muted 静音播放，loop 循环，poster 未播放前显示的内容，

• 表单新增

o type 类型，

email 邮件格式，

number 限制输入是数字，

min 最小值，

max 最大值，

step 每次增加的数，

url 地址路径或者网址都可以，

color 色块，

time 时间，

range 滑动条，

o 属性

required 必填，

placeholder 提示信息，

autocomplete 自动提示，

on 提示，

off 不提示，

autofocus 自动聚焦，

只能写一个multiple ，

多选pattern ，

正则限制输入的内容类型限制输入 0-9 之间的数，

以上是我个人对 H5新增内容的总结，希望对大家有所帮助。

HTML5重点内容总结

一、 HTML5新增的标签

（1）header nav main footer section article hgroup figure figcaption aside

video audio canvas

（2）如何让新标签兼容低版本浏览器： html5shiv.js

二、 HTML5新增的表单控件

一、表单控件的新属性

input type="text" placeholder="" required autofocus pattern="abc"

二、新增的表单控件

（1）input type="email"

（2）input type="url"

（3）数字控件： type="number"

(4) 滑动组件： type="range"

(5) 拾色器： type="color"

(6) 日期控件： type="date"

三、本地存储

1、三种本地存储： cookie webStorage(localStorage sessionStorage)

2、localStorage的API

(1)写入： localStorage.setItem(键，值); //值只能是字符串

localStorage.user = "123" localStorage["user"] = "123"

（2）读取 var user = localStorage.getItem("user")

var user = localStorage.user;

(3)删除： localStorage.removeItem("user") localStorage.clear()

（4）修改： localStorage.setItem("user","890")

3、sessionStorage的API

sessionStorage.setItem(键，值);

sessionStorage.getItem(键);

sessionStorage.removeItem(键);

sessionStorage.clear();

**********重点**********

4、cookie webStorage(localStorage sessionStorage)三者的区别

四、离线存储

（1） *.manifest (*.appcache)

index.html html manifest="*.manifest"

(2) 理解离线存储的更新方式

五、移动端的布局思路：

1、设备像素比（倍率）逻辑像素尺寸（360px 320px 375px 414px）

window.devicePixelRatio

2、 meta name="viewport" content="width=device-width,maximum-

scale=1.0,minimum-scale=1.0,initial-scale=1.0,user-scalable=no""

3、使用rem单位

六、地理定位

if (navigator.geolocation){

navigator.geolocation.getCurrentPosition(success,error,{

timeout: 5000

});

function success(pos){

纬度: pos.coords.latitute

经度： pos.coords.longtitude

}

navigator.geolocation.watchPosition(success);

七、地理定位和百度地图API的结合

八、视频，音频 video autoplay="autoplay" controls="controls" loop="loop" poster=""

preload="preload" audio

九、移动端事件：

(1) ontouchstart ontouchmove ontouchend

(2) 如何判断是否为移动端： if ("ontouchstart" in document){}

(3) 移动端事件的事件对象及常用属性

e.touches[0].clientX e.touches[0].clientY e.touches[0].target

(4) 移动端常见问题及解决方案：

a、 click事件 300ms的延迟： 1zepto的tap事件（2） fastclick.js

b、 zepto的tap事件有点透问题：（1） fastclick.js

(5) zepto的touch模块： tap singleTap doubleTap longTap

swipeLeft swipeRight swipeUp swipeDown

十、swiper.js的使用（参考官网）

十一、 canvas

(1) canvas width="600" id="can"/canvas 300*150

(2) var can = document.getElementById("can");

var cxt = can.getContext("2d");

cxt.beginPath();

cxt.moveTo(100,200);

cxt.lineTo(200,400);

cxt.strokeStyle = '#f00';

cxt.stroke();

cxt.clearRect(0,0,200,300);

context.globalCompositeOperation="destination-out"; (了解)

Html5新增的标签有哪些？