javaee论坛

普通会员

225648

帖子

343

回复

357

积分

楼主
发表于 2017-08-02 05:47:57 | 查看: 85 | 回复: 1
        HTML5增加了一些新的标签,有助于开发人员定义重要的内容,可以给站点带来更多的媒体元素(视频和音频)。当涉及到网站的抓取和索引时,对于SEO很友好。不过,IE9以下的版本不支持这些新特性,所以我们要采取一些方案来解决这些兼容性的问题。

一、新增标签

1、结构标签

header

footer

main

aside侧边栏

nav导航

article定义文章 写在section里

section

details

summary

dialog

2、文本标签

mark

time

meter表示度量,温度啦,电量啦,属性有 max min low high value optimum

progress表示进度,完成了多少。属性有max value

wbr单词内换行

ruby写汉语拼音和rt一起用

rt

3、图像标签

figure 文章插图

figcaption 文章的标题

canvas画布

4、列表标签(兼容性差,省)

5、多媒体标签

video视频 属性有controls/autoplay/muted/loop/poster/preloadheight/src

audio音乐 属性有controls/autoplay/muted/loop/preload/src

source单标签 属性有type/src   source写在video或者audio里

代码:

<video src="movie01.mp4" width="800" controls preload="" loop muted poster="movie01.jpg"></video><audio src="music.mp3" controls=""></audio>or<video controls><source src="movie.webm" type="video/webm"><source src="movie.ogg" type="video/ogg"></video>
6、表单标签
datalist定义下拉提示

keygen加密

output输出


二、H5智能表单

1、 input新增type值

email  匹配邮箱地址

url   必须输入url地址(http://)

number

range

tel

search

color

date

month

week

time

datatime-local

2、form元素新增属性

autocomplete 自动完成,自动完成允许浏览器预测对字段的输入。当用户在字段开始键入时,浏览器基于之前键入过的值,应该显示出在字段中填写的选项。

novalidate   不进行验证

3、表单控件新增属性

required 必填项目,不输入不能提交

placeholder

pattern

autofocus自动获取焦点


三、全局新增属性

contenteditable规定元素内容是否可编辑

contextmenu规定元素的上下文菜单

data用于存储页面或应用程序的私有定制数据

draggable规定元素是否可拖动

dropzone规定在拖动被拖动数据时是否进行复制移动或者链接

hidden隐藏

spellcheck规定是否对元素进行拼写和语法检查

translate规定是否应该翻译元素内容


四、HTML5兼容性解决方案

1、使用js代码让IE9以下浏览器识别HTML5标签
2、开启IE的兼容模式
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
3、壳浏览器 优先使用 webkit内核
<meta name="renderer" content="webkit"> 
目前先写这些兼容性解决方案,后续再加







普通会员

1

帖子

320

回复

329

积分
沙发
发表于 2024-04-20 09:05:52

谢谢

您需要登录后才可以回帖 登录 | 立即注册

触屏版| 电脑版

技术支持 历史网 V2.0 © 2016-2017