HTML5部分新标签属性及DOM扩展元素
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表单方向也做了很大的改进,如拾色器、日期/时间组件等,使表单处理变的更加高效。
类型 |
使用示例 |
含义 |
|
<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扩展元素的更多相关文章
- HTML语义化:HTML5的新标签及IE5.5~9的部分兼容方案
一.前言 本文将介绍HTML5中新增的语义化标签,及在IE5.5~9(IE9已经开始支持部分HTML5新标签了)支持这些新标签的兼容性处理. 目录一坨: 二.语义化标签:article.aside.t ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 (转) 2011-06-28 13:16:48 <audio> 标签属性:src:音乐的URLpreload:预加载au ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
HTML5 Audio/Video 标签,属性,方法,事件 <audio> 标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放contro ...
- [转帖]HTML5 Audio/Video 标签,属性,方法,事件汇总
HTML5 Audio/Video 标签,属性,方法,事件汇总 <audio>标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 co ...
- HTML5的新标签之一的Canvas
一. <canvas>简介(了解) 1. 什么是canvas: 是HTML5提供的一种新标签 <canvas></canvas> 英 ['kænvəs] 美 [ ...
- 前端基础小标签5 H5的一些新标签属性
第二部分 部分图片和内容摘要于网络 二. formaction 属性规定当表单提交时处理输入控件的文件的 URL. formaction 属性覆盖 <form> 元素的 action 属性 ...
- [转载]HTML5 Audio/Video 标签,属性,方法,事件汇总
<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 <audio id=& ...
- HTML5 Audio/Video 标签,属性,方法,事件汇总 (转)
标签属性:src:音乐的URLpreload:预加载autoplay:自动播放loop:循环播放controls:浏览器自带的控制条 1 http://www.abc.com/test.mp3&quo ...
- 【转载】HTML5 Audio/Video 标签,属性,方法,事件汇总
<audio> 标签属性: src:音乐的URL preload:预加载 autoplay:自动播放 loop:循环播放 controls:浏览器自带的控制条 Html代码 <au ...
随机推荐
- 浅谈php中使用websocket
在PHP中,开发者需要考虑的东西比较多,从socket的连接.建立.绑定.监听等都需要开发者自己去操作完成,对于初学者来说,难度方面也挺大的,所以本文的思路如下: 1.socket协议的简介 2.介绍 ...
- Tomcat源码导入eclipse的步骤
Tomcat源码导入eclipse 一.下载源码 1. 进入Apache 官网:http://tomcat.apache.org/ 2. 在左边侧选择要下载的源码的版本. 3. 或者直接通过Ar ...
- windows2008 c盘清理
可以删除 C:\inetpub\logs\LogFiles 里面的日志文件
- Ajax.BeginForm()实现ajax无刷新提交
1. 同时安装 Microsoft jQuery Unobtrusive ajax 和 jQuery Unobtrusive Ajax,如下图 安装完成之后多了如下的js库 2. 引用该js库 lay ...
- [已解决] No syntax specified for the proto file : xxx.proto
在使用protobuf生成相应类文件如java文件的时候需要指定proto的版本, 如: syntax = "proto2"; package my_package; messag ...
- django关系对象映射(Object Relational Mapping,简称ORM)
Model 创建数据库,设计表结构和字段 django中遵循 Code Frist 的原则,即:根据代码中定义的类来自动生成数据库表 from django.db import models clas ...
- scoi2010&&bzoj1858序列操作
[题目描述] lxhgww最近收到了一个01序列,序列里面包含了n个数,这些数要么是0,要么是1,现在对于这个序列有五种变换操作和询问操作: 0 a b 把[a, b]区间内的所有数全变成0 1 a ...
- 使用Python结合Face++ API识别人脸
Face++是北京旷视科技旗下的视觉服务平台,可以进行人脸识别.检测等功能.其人脸识别技术据悉在目前准确率较高,其API非常友好,免费使用,功能众多,而且调用几乎没有限制.这里我使用了Python调用 ...
- Jquery页面初始化的4种方式
<script src="Scripts/jquery-1.8.2.min.js"></script> <script type="text ...
- JavaACOFramework的各个类介绍(part1 : Ant类)
public abstract class Ant extends Observable implements Runnable { public static int ANT_ID = 1; // ...