HTML5

简介

HTML5是取代html和XHTML的标准版本

新特性

新的语义化标签，比如 header、footer、nav

新的表单控件，比如 email、url、search

用于绘画的 canvas 元素 用于媒介回放的 video 和 audio 元素

新增元素结构

标签	说明
header	页面或页面中某一个区域的页眉，通常是一些引导和导航信息
nav	可以作为页面导航的链接组
section	页面中的一个内容区块，通常由内容及其标题组成
articel	代表一个独立的,完整的相关内容,可独立于页面其他内容使用
aside	非正文内容,与页面的主要内容是分开的,被删除而不会影响页面的内容
footer	页面或页面中某一个区块的脚注

 

 

 

 

 

 

标签	说明
audio	定义音频,如音乐或其他音频流
video	定义视屏,如电影片段或其他视频流
canvas	定义图形
datalist	定义可选数据的列表
time	标签定义日期或时间
mark	在视觉上向用户呈现那些学要突出的文字

 

 

 

 

audio

<audio src=""></audio>
<!--
相关属性
controls 显示控件  
autoplay 自动播放
loop 循环播放
preload 预加载
 -->
<audio controls="controls">
       <source src="vedio/song.ogg"/>
       <source src="vedio/song.mp3"/>
         您的浏览器不支持audio元素播放的音频，选用地址的作用
</audio>

video

<video src=""></video>
<video controls="controls">
      <source src="video/video.mp4"/>
      <source src="video/video.ogg"/>
      <source src="video/video.webm"/>
     您的浏览器不支持video播放的视频
</video>


<!--
相关属性
controls 显示控件  
autoplay 自动播放
loop 循环播放
preload 预加载
width/height  宽高
-->

新增全局属性

标签	说明
contentEditable	规定是否允许用户编辑内容
designMode	规定整个页面是否可编辑
hidden	规定对元素进行隐藏
spellcheck	规定是否必须对元素进行拼写或语法检查
time	标签定义日期或时间
tabindex	规定元素的tab键迭制次序

<div class="container">
      <!--contenteditable-->
      <p contenteditable="true" class="green">这是一个可编辑的段落。</p>
      <!--designMode-->
      <p class="blue" id="edit" >我能变成可编辑的文本。</p>
      <!--hidden-->
      <p hidden="hidden">这个段落应该被隐藏。</p>
      <!--spellcheck-->
      <p contenteditable="true" spellcheck="true">这是可编辑的段落。请试着编辑文本。</p>
      <!--tabindex-->
      <a href="" tabindex="2">我是第二个</a>
      <a href="" tabindex="1">我是第一个</a>
      <a href="" tabindex="3">我是第三个</a>
</div>

新增input类型

类型	说明
email	电子邮件地址文本框，提交表单时会自动验证email的值
url	网页的URL，提交表单时会自动验证url的值
color	主要用于选取颜色
search	用于搜索引擎（搜索框）
number	只包含数值的字段，能够设定对所接受的数字的限定
range	滑动条，特定值范围内的数值选择器
Date pickers	拥有多个可供选取日期的新输入类型

<p>邮箱:<input type="email"  name="email"/></p>
<p>请输入你的网址:<input type="url"  name="userUrl"/></p>
<p><input type="color"> </p>
<p><input type="search"></p>
<input type="number" name= "num" min="3" max="20" step="3" value="3"/>
<input type="range" name= "point" min="2" max="15" step="1" value="3"/>
<p><input type="date"> </p>
<p><input type="time"> </p>
... ...
<input type="submit" value="提交"></p>

 表单验证

<input type="search" name="sousuo"  placeholder="请输入要搜索的关键字"/>
<!--文本框提示-->
<input type="text" name="username"  required/>
<!--为空就不允许提交表单-->
<input type="text" name="tel"  required pattern="^1[358]\d{9}" />
<!--不符合正则就不允许提交表单-->