html5-01

新增的布局标签

header标签

定义文档或文档中内容块的页眉。通常可以包含整个页面或一个内容区的标题、搜搜、表单、相关的logo

footer标签

通常用来定义文档或节的页脚,如网页的版权信息,相关阅读链接等等

nav标签

定义导航链接的部分。一般来说用于页面中主要的导航连接组,如传统的导航条,侧边栏导航,页内导航,翻页操作等

article标签

表示文档中独立完整的,可以独自被外部引用的内容。如一篇博文、论坛的帖子、报刊中的文章、一段用户评论或独立的插件

section标签

表示页面中内容的分区、文章中的章节。一个section元素通常由内容及标题组成

aside标签

表示当前页面或文章的附属信息部分,如与主要内容相关的引用、侧边栏、广告、链接组等

hgroup标签

可以为标题或者子标题进行分组,通常与h1-h6组合使用

figure标签

figure> 标签规定独立的流内容(图像、图表、照片、代码等等)。
figure 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。

标签定义 figure 元素的标题(caption)。 "figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。

mark标签

定义带有几号的文本

time标签

定义公立日期或时间,或者两者
datetime属性:定义元素的日期和时间。如果未定义该属性,则必须在元素的内容中规定日期或时间

fieldset标签

fieldset 标签用于从逻辑上将表单中的元素组合起来。
fieldset标签会在相关表单元素周围绘制边框。
legend标签为 fieldset 元素定义标题。

HTML5兼容

最新版本版本的Safari、chrome、firefox以及Opera支持部分HTML5特性
IE9支持某部分HTML5特性

HTML5新标签对IE低版本浏览器的影响及兼容情况处理方案:

1.使用js新增元素的方法解决
document.createElement(“header”)
由于创建出来的元素为行内元素,需要转换块级,宽高才能生效

2使用封装好的插件html5shiv.js解决兼容性问题

 <!--[if lt IE 9]>
  <script src="./html5shiv.js" type="text/javascript"></script>
    <![endif]-->

HTML5已移除的标签

acronym
applet
basefont
big
center
dir
font
frame
frameset
noframes
strike

新增的多媒体标签

audio标签
定义声音,比如音乐或其他音频流。
IE8或更早的浏览器不支持该标签

属性

autoplay	autoplay	如果出现该属性,则音频在就绪后马上播放。
controls	controls	如果出现该属性,则向用户显示控件,比如播放按钮。
loop	loop	如果出现该属性,则每当音频结束时重新开始播放。
muted	muted	规定视频输出应该被静音。
preload	preload	
如果出现该属性,则音频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src	url	要播放的音频的 URL。

HTML支持的音频格式

Firefox:支持 Ogg Vorbis和WAV
Opera :支持Ogg Vorbis和WAV
Safari :支持MP3,AAC格式 ,和MP4
Chrome :支持Ogg Vorbis,MP3,WAV,AAC和MP4
Internet Explorer 9+ :支持MP3,AAC格式 ,和MP4
IOS :支持MP3,AAC格式 ,和MP4
Android :支持AAC和MP3

为了最大程度支持所有上面提到的浏览器,建议开发者使用Ogg Vorbis和MP3这两种格式例如。

<audio controls>
   <source src="myAudio.ogg" type="audio/ogg">
   <source src="myAudio.mp3" type="audio/mp3">
</audio>

video标签
标签定义视频,比如电影片段或其他视频流。
属性

autoplay	autoplay	如果出现该属性,则视频在就绪后马上播放。
controls	controls	如果出现该属性,则向用户显示控件,比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性,则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像,或者在用户点击播放按钮前显示的图像。
preload	preload	
如果出现该属性,则视频在页面加载时进行加载,并预备播放。

如果使用 "autoplay",则忽略该属性。

src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

HTML支持的视频格式
Firefox :支持Ogg Theora格式和WEBM
Opera :支持Ogg Theora格式和WEBM
Safari :支持MP4
Chrome :支持Ogg Theora格式,MP4和WEBM
Internet Explorer 9 :支持MP4和WEBM(需要安装插件)
IOS :支持MP4
Android :支持MP4和WEBM(Android 2.3版本以上)
为了支持上述所有的浏览器,建议使用WebM和MP4视频文件作为source元素。例如。

<video controls>
   <source src="myVideo.mp4" type="video/mp4">
   <source src="myVideo.webm" type="video/webm">
</video>

新增表单元素

input类型	url
用于应该包含url的地址输入域;在地址提交表单时,会自动验证url域的值
<input type="url" name="myUrl">
type="email"  完整验证  提交的时候才会检测用户输入的邮箱合不合法 
 不合法 阻止表单数据的提交

      邮箱:     <input type="email" name="useremail"><br>
telephone 手机  iphone 智能手机  电话号验证 
 没有验证作用  不用再pc端  专用于移动端  打开数字键盘的 
 方法: 文件通过qq发到手机上  拿浏览器的打开 点一下 
      电话号: <input type="tel">
type="number" 输入数据 整数数据  min 属性代表最小值 max属性最大值
分数: <input type="number" name="userweight"  min="0" max="100" value="83"><br>
你最喜欢的颜色: <input type="color" name="usercolor"><br>
 游标  range 范围
      收入区间:    <input type="range" name="eco"  min="200000" max="121321324324" >
search 不是搜索框  文本框  小×号 提高用户体验
      专业:  <input type="search"  name="major"><br>
date 年月日  time时刻 
      <input type="date" name="meetingTime">
      <input type="time" name="meetingTime"><br>

datetime和date是一样的  都是指的年月日   date是用在普通浏览器 goole firfox ie9 
 datetime 用在safiri上
      datetime:  <input type="datetime" ><br>


       周  选择日期对应的第几周 
      <input type="week"><br>
      <!-- mouth 只包含年和月 -->

      <input type="month"><br>

度量衡 meter
用在: 磁盘的统计大小 统计投票数
min:最小值
max:最大值
low:区间最低值 high:区间最高值
optimum: 最佳值
optimum<low 越小越好 optimum>high 越大越好

<meter min="0" max="100" low="60" high="80" optimum="50"  value="40"></meter>
      <!-- 红色:2  (1)optimum [min,low] value [high,max]---》value越小越好 绿色
                    (2)value [min,low] optimum [high,max]----》 value值越大越好 绿色

        绿色: optimum和value在一个区间  [min,low] [low,high] [high,max]

        现象:value接近最佳值 安全 ---》绿色

datalist标签
用来定义选项列表,与input元素搭配使用,来定义input可能的值。
datalist及其选项不会被显示出来,它仅仅是合法的输入值列表。使用input元素的list属性来绑定datalist标签

 <form action="">
        <!-- 下拉列表  不能自己输入数据  -->
        请选择你最喜欢的城市:
        <!-- <select name="" id="">
            <option value="0">北京</option>
            <option value="1">上海</option>
            <option value="2">广州</option>
            <option value="3">天津</option>
        </select> -->
        <!-- 提供给用户做输入用 
        input文本框  list="对应的下拉列表的id值"  绑定
        说明用户自己输入的数据也会被作为option提交给后台
        -->
        <input type="text" list="city" name="city">
        <datalist id="city">
                <option value="北京"></option>
                <option value="上海"></option>
                <option value="广州"></option>
                <option value="深圳"></option>

        </datalist>
    </form>

新增表单属性
label标签通过文字提示 起到自动聚焦的作用
for=“表单控件id属性值 "
1:自动聚焦属性 autofocus (true写 false不写 )
2:required 必填属性 如果没有这个属性就意味这一项不是必填项
如果不输入,导致阻止表单提交
3: placeholder 文字默认提示
4: 历史记录的功能 autocomplete=“on/off” 自动完成功能 on 开启 off关闭
前提条件 (1)表单控件必须有name属性
(2)此表单必须提交过一次
5:patten 验证字符串是否符合规则
pattern=”[0-9]{11}"
6:多文件上传属性 multiple
上传文件
7:accesskey 键盘聚焦某个元素的具体键码
accesskey=“a” alt+a聚焦某个元素

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值