认识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属性值

属性值	实例	描述
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">	自由拖动滑块
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>