HTML5定义了一系列新元素,如新语义标签、智能表单、多媒体标签等。

我们日常讨论的H5其实是一个泛称,它指的是由HTML5 + CSS3 + Javascript等技术组合而成的一个应用开发平台。

语义化标签:如<p>表示一个段落、<ul>表示一个无序列表<h1> ~ <h6>表示一系列标题等,在此基础上HTML5增加了大量更有意义的语义标签,更有利于搜索引擎或辅助设备来理解HTML页面内容。

常用语义标签: <nav> :导航
        <header>:页眉
        <footer>:页脚
        <section>:区块
        <article>:文章
        <aside>:侧边栏
        <progress>:进度条

本质上新语义标签与<div>、<span>没有区别,只是其具有语义性。

尽量避免全局使用header、footer、aside等语义标签。

兼容性:在不支持HTML5新标签的浏览器里,会将这些新的标签解析成行内元素(inline)对待,所以我们只需要将其转换成块元素(block)即可使用,但是在IE9版本以下,并不能正常解析这些新标签,但是却可以识别通过。
在实际开发中采用的是通过检测IE浏览器的版本来加载第三方的一个JS库(html5shiv.min.js)来解决兼容问题,这个库文件会帮自动通过document.createElement('tagName')创建所有HTML5的新标签。

<!--[if lte IE 8]>
<script src="js/html5shiv.min.js"><script>
<![endif]-->

HTML5在Web表单方向也做了很大的改进,如拾色器、日期/时间组件等,使表单处理变的更加高效。

类型

使用示例

含义

email

<input type="email">

输入邮箱格式

tel

<input type="tel">

输入手机号码格式

url

<input type="url">

输入url格式

number

<input type="number">

输入数字格式

search

<input type="search">

搜索框(体现语义化)

range

<input type="range">

自由拖动滑块

color

<input type="color">

拾色器

time

<input type="time">

date

<input type="date">

datetime

<input type="datetime">

month

<input type="month">

week

<input type="week">

部分类型是针对移动设备生效的,且具有一定的兼容性,在实际应用当中应选择性的使用。

表单元素:

元素

含义

<datalist>

数据列表

<keygen>

生成加密字符串

<output>

输出结果

<meter>

度量器

表单属性:

属性

用法

含义

placeholder

<input type="text" placeholder="请输入用户名">

占位符

autofocus

<input type="text" autofocus>

自动获得焦点

multiple

<input type="file" multiple>

多文件上传

autocomplete

<input type="text" autocomplete="off">

自动完成(保存上次记录)

form

<input type="text" form="某表单ID">

novalidate

<form novalidate></form>

关闭验证

required

<input type="text" required>

必填项

pattern

<input type="text" pattern="\d">

自定义验证

多媒体:HTML5通过<audio>标签来解决音频播放的问题。

通过src制定音频文件路径即可

<audio src="music/sugar.mp3></audio>

audio 标签   controls 控制  autoplay 自动播放  loop 是否循环  src 直接指定音频文件

source属性可以指定多个音频

当我们使用 source属性指定多个音频时 浏览器会从上往下进行解析,找到可以播放的 即可开始播放
如果遇到无法播放的会继续往下解析直到可以播放为止,如果都无法解析我们能够在最后设置一个提示信息可以对低版本的用户进行一个友善的提示。

不同的浏览器可支持播放的格式是不一样的,如下图供参考:

同样HTML5也可以通过<video>标签解决音频播放的问题。

video 标签  controls 控制器  src 指定的是视频的路径  loop循环播放  autoplay自动播放  width设置播放窗口的宽度  height设置播放窗口的高度

poster 视频没有播放的时候显示的图片  source属性可以指定多个音频

我们在使用 width height 设置video标签的 宽高时, 会优先考虑视频本身的大小改变的是 video标签的大小  

DOM扩展元素:

      document.querySelector('') 通过CSS选择器获取元素,其中括号内可以是 标签名("li")、class类名(".class")、id名("#id"),只能获取满足条件的第一个dom元素。

      document.querySelectorAll('') 通过CSS选择器获取元素,以伪数组形式存在。哪怕只选中一个元素 返回的也是伪数组形式。

类名操作:

      1、Node.classList.add('class') 添加class

      2、Node.classList.remove('class') 移除class

      3、Node.classList.toggle('class') 切换class,有则移除,无则添加

      4、Node.classList.contains('class') 检测是否存在class

      Node指一个有效的DOM节点,是一个通称。

自定义属性:

      在HTML5中我们可以自定义属性,其格式如下data-*="",例如data-info="我是自定义属性",通过Node.dataset['info'] 我们便可以获取到自定义的属性值。

Node.dataset是以对象形式存在的,当我们为同一个DOM节点指定了多个自定义属性时,Node.dataset则存储了所有的自定义属性的值。

假设某元素 <div id="demo" data-name="itcast" data-age="10">

      var demo = document.querySelector('#demo');

1、读取 demo.dataset['name'] 或者 demo.dataset['age']

2、设置demo.dataset['name'] = 'web developer'

当我们如下格式设置时,则需要以驼峰格式才能正确获取

                                     

HTML5部分新标签属性及DOM扩展元素的更多相关文章

  1. HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案

    一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...

  2. HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48   <audio> 标签属性:src:音乐的URLpreload:预加载au ...

  3. HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

    HTML5 Audio/Video 标签,属性,方法,事件   <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...

  4. [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总

    HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...

  5. HTML5的新标签之一的Canvas

    一. <canvas>简介(了解) 1. 什么是canvas: 是HTML5提供的一种新标签 <canvas></canvas>  英 ['kænvəs]  美 [ ...

  6. 前端基础小标签5 H5的一些新标签属性

    第二部分 部分图片和内容摘要于网络 二. formaction 属性规定当表单提交时处理输入控件的文件的 URL. formaction 属性覆盖 <form> 元素的 action 属性 ...

  7. [转载]HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id=& ...

  8. HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)

    标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 http://www.abc.com/test.mp3&quo ...

  9. 【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总

    <audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码  <au ...

随机推荐

  1. 用自己赚的钱第一次坐飞机 那feel倍儿爽

    马年春晚上,歌手大张伟的神曲<倍儿爽>如今已传遍大街小巷.其实,不管人家到底有没有炒作,能让我们这些观众感觉到放松.乐呵,那就是一个成功的春晚节目.而今年,我也如同这歌中唱的一样,活得倍儿 ...

  2. Springmvc controller和jsp页面传值对象类型问题和普通问题

    一:JSP-->controller 1.当jsp页面传递的值是对象类型时候比如User.name User.age的user对象传递,需要以下操作 jsp页面提供对应标签的value必须存在且 ...

  3. 学习js回调函数

    <!DOCTYPE HTML> <html> <head> <meta charset="GBK" /> <title> ...

  4. RGB颜色表

    RGB(255,23,140)是光的三原色,也即红绿蓝Red.Green.Blue,它们的最大值是255,相当于100%. 白色:rgb(255,255,255) 黑色:rgb(0,0,0) 红色:r ...

  5. html5,音频代码

    <!-- <audio src="1.mp3" controls="controls"></audio> -->    &l ...

  6. sync

    tools-android-Sync Project ---------------- file-Project Structure add dependencies

  7. ToolTipController 事件触发显示时 避免闪烁的处理方法

    private DevExpress.Utils.ToolTipController toolTipController1; private DevExpress.Utils.ToolTipContr ...

  8. 25个实用的jQuery技巧和解决方案

    1. 去除页面的右键菜单 $(document).ready(function(){ $(document).bind(“contextmenu”,function(e){returnfalse;}) ...

  9. 如何清除WebBrowser的Cookies

    var document = webBrowser1.Document; document.ExecCommand("ClearAuthenticationCache", fals ...

  10. oracle迁移postgres之-Ora2Pg

    描述 Ora2Pg:甲骨文PostgreSQL数据库模式转换器是一个免费的工具用于Oracle数据库迁移到PostgreSQL兼容模式.它连接Oracle数据库,扫描它自动提取其结构或数据,然后生成S ...