认识HTML5中的新标签与新属性
前端之HTML5，CSS3（一）
HTML5中常用内容标签
header标签
header标签定义文档的页眉，基本语法：<header>content</header>。
nav标签
nav标签定义导航链接部分，基本语法：<nav>content</nav>。
footer标签
footer标签定义文档的页脚，基本语法：<footer>content</footer>。
article标签
article标签定义文章内容部分，基本语法：<article>content</article>。
section标签
section标签定义文档中区域，类似于div标签，基本语法：<section>content</section>。
aside标签
aside标签定义内容之外的侧边栏部分，基本语法：<aside>content</aside>。
datalist标签
datalist标签与input标签结合使用，定义输入下拉选项，基本语法：<datalist><option>content</option>...</datalist>。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>datalist标签-测试</title>
</head>
<body>
<input type="text" value="" list="language" />
<datalist id="language">
<option>C</option>
<option>C++</option>
<option>C#</option>
<option>php</option>
<option>python</option>
<option>perl</option>
<option>java</option>
<option>javascript</option>
</datalist>
</body>
</html>
效果
fieldset标签
fieldset标签与legend标签搭配使用，定义区域范围，基本语法：<fieldset><legend>title</legend></fieldset>。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>fieldset标签-测试</title>
<style type="text/css">
fieldset {
width: 300px;
}
</style>
</head>
<body>
<fieldset>
<legend>用户登录</legend>
用户名称：<input type="text" name="user_name">
<br />
用户密码：<input type="password" name="pwd">
</fieldset>
</body>
</html>
效果
input标签新增type属性值
| 属性值 | 实例 | 描述 |
| <input type="email"> | 输入邮箱格式 | |
| tel | <input type="tel"> | 输入手机号码 |
| url | <input type="url"> | 输入url格式 |
| number | <input type="number"> | 输入数字格式 |
| search | <input type="search"> | 搜索框,语义化 |
| range | <input type="range"> | 自由拖动滑块 |
| time | <input type="time"> | 时，分 |
| date | <input type="date"> | 年，月，日 |
| datetime | <input type="tatetime"> | 时间 |
| month | <input type="month"> | 月，年 |
| week | <input type="week"> | 星期，年 |
效果自行测试，PC端浏览器兼容性较差。
input标签新增属性
| 属性 | 实例 | 描述 |
| placeholder | <input type="text" placeholder="Enter your name"> | 输入框内文字提示，输入内容消失 |
| autofocus | <input type="text" autofocus> | 鼠标光标自动定位在输入框，无须点击输入再输入 |
| multiple | <input type="file" multiple> | 支持多文件上传 |
| autocomplete | <input type="text" autocomplete="off"> | 表单是否启动表单自动完成功能，属性值有：on和off |
| required | <input type="text" required> | 必填，内容不能为空 |
| accesskey | <input type="text" accesskey="s"> | 指定快捷键，使用alt+s快速定位光标到输入框内 |
多媒体标签
audio标签：添加音频标签，基本语法：<audio src="xxx.mp3"></audio>，支持音频格式有mp3,ogg,wav，根据浏览器不同，不同格式音频支持程度有所不同。属性有：autoplay、controls、loop，autoplay设定音频自动播放，打开网页播放音频，无法中止，至音频播放完毕；controls设定音频控制，页面出现音频控件；loop设定音频循环播放。设置方法：<audio src="faded.ogg" autoplay/controls/loop></audio>。
解决浏览器格式不兼容的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>audio标签-测试</title>
</head>
<body>
<!-- 可以使用属性等于属性值的形式 -->
<audio autoplay controls="controls" loop="loop">
<source src="backgroud.mp3" />
<source src="backgroud.ogg" />
<source src="backgroud.wav" />
</audio>
</body>
</html>
video标签：添加视频频标签，基本语法：<video src="xxx.mp3"></video>，支持视频格式有mp4,ogg,webM，根据浏览器不同，不同格式视频支持程度有所不同。属性有：autoplay、controls、loop，autoplay设定视频自动播放，打开网页播放视频，无法中止，至视频播放完毕；controls设定视频控制，页面出现视频控件；loop设定视频循环播放。设置方法：<video src="faded.ogg" autoplay/controls/loop></video>。
解决浏览器格式不兼容的方法：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>video标签-测试</title>
</head>
<body>
<!-- 可以使用属性等于属性值的形式 -->
<video autoplay controls="controls" loop="loop">
<source src="movie.mp4" />
<source src="movie.ogg" />
<source src="movie.webM" />
</video>
</body>
</html>
认识HTML5中的新标签与新属性的更多相关文章
- 检测是否支持HTML5中的Video标签
//检测是否支持HTML5 function checkVideo() { if (!!document.createElement('video').canPlayType) { var vidTe ...
- 让IE8支持html5中的video标签
这是一篇综合几个前辈的解决方案. 使用video的时候,要遇到的问题. ①不兼容ie9及其以下版本 在<head>里添加两行, 参考张鑫旭前辈的博客,但是在ie8中薄播放. <!-- ...
- html5中的容器标签和文本标签
html5中的容器标签和文本标签 html中的容器级标签和文本级标签,css中的块级元素和行内元素是我们常常拿来比较的四个名词(行内块级暂时先不考虑). 容器标签 容器级的标签可以简单的理解为能嵌套其 ...
- html5-8 如何控制html5中的视频标签和音频标签
html5-8 如何控制html5中的视频标签和音频标签 一.总结 一句话总结:找到视频或者音频的element对象,然后查手册看对应的方法或者属性就可以,里面有控制的. 1.如何控制html5中的视 ...
- html5中新增的form表单属性
html5中新增两个表单属性,分别autocomplete和novalidate属性 1.autocomplete属性 该属性用于控制自动完成功能的开启和关闭.可以设置表单或者input元素,有两个属 ...
- html5中的video标签和audio标签
不管是否承认,flash早已不像过往那样如日中天了.亚马逊全面放弃flash.苹果放弃flash.安卓也放弃了移动端的flash支持.事实上flash已经不太适合web开发了,因为HTML5中的vid ...
- HTML5中的语义标签兼容IE8以及更低版本的浏览器
看某教程,说让HTML5的这些语义标签能够兼容低版本的浏览器,原文是“你可以设置css的display属性为block”.很好理解,就设置css样式为block嘛,那就直接设置咯: header, s ...
- HTML5中常用的标签(及标签的属性和作用)
1.标签:<!DOCTYPE>作用:声明是文档中的第一成分,位于<html>标签之前. 2.标签:<html>作用:此元素可告知浏览器其自身是一个HTML文档.属性 ...
- html中的a标签的target属性的四个值的区别？
target属性规定了在何处打开超链接的文档. 如果在一个 <a> 标签内包含一个 target 属性,浏览器将会载入和显示用这个标签的 href 属性命名的.名称与这个目标吻合的框架或者 ...
随机推荐
- Javascript变长参数和默认参数
/* javascript 变长参数 * 实参少于形参: 剩下的参数如果没有默认值,将解析为undefined * 实参多于形参: 剩下的实参可以通过 "实参对象"-argumen ...
- linux平台 spark standalone集群 使用 start-all，stop-all 管理集群的启动和退出
一.配置/etc/profile: 文件尾部增加以下内容: export SPARK_HOME=/home/spark/spark-2.2.0-bin-hadoop2.7 export PATH=$P ...
- UVA 11865 Stream My Contest (二分+最小树形图)
题意:给定一个网络,一个服务器,其他的是客户机,有 m 条连线,每条有一个带宽和花费(单向边),让你用不超过 c 的花费,使得 0 到 所有的机器都能到达,并且使得最小带宽最大. 析:很明显是二分题, ...
- 加载 bean*.xml
入口 ApplicationContext ctx = new ClassPathXmlApplicationContext("classpath:bean*.xml"); /** ...
- Homework 4
Homework 4 开发工具:dev c++ 开发语言:c++ 源代码上传至github:上传一直失败... 合作人:曹权 博客地址:http://www.cnblogs.com/c2016/ 这里 ...
- UnicodeEncodeError：'latin-1' codec can't encode characters in position 0-1: ordinal not in range(256)
Scrapy爬虫向数据库写入数据时报错: UnicodeEncodeError:'latin-1' codec can't encode characters in position 0-1: ord ...
- LoadRunner监控SQLServer
监控SQLSERVER时,能增加度量.但是只有系统资源相关的度量有数据,而和sqlserver相关的度量却没有数据. 解决方法: 改为在System Resource Graphs中通过添加Windo ...
- CheckBox使用记录
页面显示 页面代码 <div> <div><input type="checkbox" value="" class=" ...
- [uwp]自定义图形裁切控件
开始之前,先上一张美图.图中的花叫什么,我已经忘了,或者说从来就不知道,总之谓之曰“野花”.只记得花很美,很香,春夏时节,漫山遍野全是她.这大概是七八年前的记忆了,不过她依旧会很准时的在山上沐浴春光, ...
- 2、Orcal数据库创建第一个（管理员）连接
(注意这里第一个创建的是管理员连接也是我们的总连接,之后我们所有的其他新用户都要创建在它里面,所以它的一些属性我们在填写以及设置时需要注意!!!) 1.确认Orcal服务开启: 2.创建连接: 打开我 ...