H5新特性
H5新特性
一个像夏天 发表于10个月前
H5新特性
  • 发表于 10个月前
  • 阅读 70
  • 收藏 1
  • 点赞 0
  • 评论 0

腾讯云 十分钟定制你的第一个小程序>>>   

由于之前是做web后台开发的,但是做了一段时间发现自己兴趣还是在前端。下面来做一个小小的笔记,前端开发初级,望大家理解,不喜勿喷。

1.H4和H5的区别

(1)web浏览器中间的兼容性很低,就IE而言,在IE9以后支持H5新特性。

(2)文档结构不明确,H5里面新增了一些,article,header,footer等元素,使得文档的结构更加明确。

(3)web应用程序的功能受到了限制。

2.语法的改变

(1)内容类型、DECTYPE、指定字符编码。这些区别都是在新建H5的时候会自动补全,这里就不再赘述。

(2)可以省略标记的元素:<input type="checkbox" checked="">女</input>    <input type="checkbox" checked>女</input>和<input type="checkbox" checked="true">女</input>的效果都是一样的。貌似在checked里面加入任何都是可以被选中的效果,不加checked属性则不会被选中。

3.新增的元素

section:页眉,不推荐没有标题的内容使用,他主要是用来分块的,不做样式选择。

article:文档主体,它偏向于一快独立的内容。

hgroup:分组元素,可以把h1到h6的元素做一个分类。

header:在文档的头部使用。

footer:文档的尾部使用,其实就是为了使网页的结构更加清晰。

nav:它主要是在列表ul,li时使用。

figure,video(视屏文件),audio(音平文件),aside,

cancas( 标签定义图形),它只是外面的标签,真正的图形要用js来实现。

address:地址元素,用来存联系方式,地址消息等。

4.新增的属性

contebtEditable (true,flase)标签属性,是否可以编辑。下面的例子就是可以编辑的。

<p contenteditable="true">这是一段可编辑的段落。请试着编辑该文本。</p>

designMode(on  off),用来指定整个页面是否可编辑,它的值只能在javascript里面可以被修改,如果被修改成on的话,那么下面所有有contebtEditable的内容都可以被修改。

hidden(隐藏。true,flase)。

spellcheck,语法检查属性,是spellcheck=""就可以自动检查。比如apple,如果你打成aple,他会自己标记。

tabindex,访问顺序,1.2.3可以定义它的访问顺序,tabindex很重要,有时候必须要有,但是又不能写作正数,所以最好的处理法方法是设为负数(-1)。在用tab选择是会按序号跳转。

<a href="http://www.w3school.com.cn/" tabindex="2">W3School</a>
<a href="http://www.google.com/" tabindex="1">Google</a>
<a href="http://www.microsoft.com/" tabindex="3">Microsoft</a>
共有 人打赏支持
粉丝 28
博文 9
码字总数 6375
×
一个像夏天
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: