HTML5新特性

·  阅读 84

一、新增标签

1. 语义化标签

HTML 语义化是指在合适的位置使用合适的标签,仅仅从 HTML 元素上就能看出页面的大致内容与结构,有利于 SEO。

  • <header>区段头或页头; 
  • <nav>在当前文档或其他文档中提供导航链接; 
  • <article>文章内容;
  • <section>一个页面区段,可与<article>标签可以互相嵌套;
  • <aside>伴随内容,比如侧边栏; 
  • <footer>区段尾或页尾。

2. 媒体标签

HTML5新增了两个与媒体相关的标签,让开发人员不必依赖任何插件就能在网页中嵌入跨浏览器的音频和视频内容:

  • <audio> 元素用于在文档中嵌入音频内容。
  • <video> 元素 用于在HTML或者XHTML文档中嵌入媒体播放器,用于支持文档内的视频播放。你也可以将 <video> 标签用于音频内容,但是 <audio> 元素可能在用户体验上更合适。

3. 绘画标签

<canvas>元素负责在页面中设定一个区域,然后就可以通过JavaScript动态地在这个区域中绘制图形。

要使用<canvas>元素,必须先设置其widthheight属性,指定可以绘图的区域大小。出现在开始标签和结束标签中的内容是后备信息,如果浏览器不支持<canvas>元素,就会显示这些信息:

<canvas id="drawing" width="200" height="200">A drawing of something.</canvas>
复制代码

二、新增表单属性

1. 添加了很多输入型控件,比如:numberurlemailrangecolordate等,通过input的type属性使用。例如:

<input type="number" name="demo" min="1" max="100" step="2"/>
复制代码

2. 还添加了placeholderrequiredpatternminmaxheightwidth等表单属性。

3. 新增 <output>元素。

三、DOM 新功能

1.  新增getElementsByClassName 方法

使用这个方法可以更方便地寻找带有某些类的元素,而不必再局限于使用ID或标签名(getElementsByTagName)。

2.  拖放功能(Drag and drop)

HTML 拖放(Drag and Drop)接口使应用程序能够在浏览器中使用拖放功能。例如,用户可使用鼠标选择可拖拽(draggable)元素,将元素拖拽到可放置(droppable)元素,并释放鼠标按钮以放置这些元素。拖拽操作期间,会有一个可拖拽元素的半透明快照跟随着鼠标指针。

四、文档声明简化

HTML5不区分是否是严格模式还是传统模式,文档声明变得简单明了:

<!DOCTYPE html>
复制代码

更多内容待补充...

参考内容:HTML5

分类:
前端
标签:
分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改