html5新标签、新属性简单快速入门(一)

此文主要适读人群:梦想成为前端工程师的你!

html5万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(W3CRecommendation)。

2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,该标准规范终于制定完成。

然而,html5的出现并没有很快得到各大pc端浏览器的充分支持和兼容。主要表现在对火狐和IE浏览器的不兼容。如果想具体了解兼容问题,可参考如下文章:html5兼容性,当然关于html5兼容性的文章现在有许多,由于篇幅有限,这里就不再详叙,大家可以自行问度娘和谷爹。

但是,随着移动互联网的出现和兴盛,html5新标签和新属性的优势逐渐显现,移动端浏览器对html5支持的较为充分。特别是在混合类移动端app上面,html5也得到了广泛的应用。最终html5构建的页面以其炫酷优雅的步伐,逐渐赢得了广大开发者青睐。

所以,在讨论html5新标签之前,希望大家明白,html5的出现主要的适应了移动端的发展趋势。好了,废话不多说多了,直接上手看看html5带来了哪些重要的新标签和属性吧。

一、书写规范

1、文档类型声明

以前我们的写页面前  需要先写上类似如下复杂的声明:

<!DOCTYPE HTML PUBLIC " -//W3C//DTD HTML 4.01 Transtional //EN "  " http://www.w3.org/TR/html4/loose.dtd"  >

不知道大家的感受如何,反正我是看懵逼了,要不是万能的编辑器有自动提示功能,估计我早就放弃前端了。。。

现在文档声明变成了这样:

<!DOCTYPE html>

2、以前,单标签都必须闭合,写成如下模样:

<input/>  、<br/>

现在,单标签不必闭合,可以写成如下模样:

<input> 、<br>

3、背景图引入的时候可以省略引号

如 background : url(1.png) no-repeat ;这里url里面并没有加引号,照样可以完美运行

好了,html5的规范有很多,这里我们就简单举例说明一下就好了,希望大家能够举一反三理解一下;接下来,我们就上手点硬货;

二、新增的结构性标签

<header></header>页眉

<hgroup></hgroup>标题组合

<nav></nav> 导航

<footer></footer>页脚

<section></section>区块

<article></article>文章

<aside></aside>侧边栏 

           ---article之外,section之内,一般表达(推荐文章,热门评论,友情链接,广告位)

         ---article之内, 一般表达,跟此文章有关系的东西(相关文章,相关任务介绍,引用链接)

以上新标签,都是相对常用的结构元素,在实际应用中用的相对较多,但其实并没有特别突出的作用。主要是增强语义化。当然,更强的语义化,也是html5的一个优势所在。

<figure></figure>  用于对元素进行组合。一般用于图片或视频

<figcaption></figcaption>用于对figure的内容进行说明

�<time></time> 时间

<datalist></datalist>数据列表 ,配合输入框来使用

具体用法见代码:

datalist

效果如下:


有提示的下拉框

<details></details>描述

<summary></summary>对details的简介

<dialog></dialog> 对话框

<address></address>地址

<mark><mark>标记  自带带黄色背景,其他用法和span一样

<keygen></keygen>秘钥(报废了)

<progress></progress>进度条  可以设置 value max min ...

<meter></meter>进度条,用法和上面的差不多

这里特别说一下关于解决html5新标签兼容性问题,特别是针对IE浏览器的方法

想去兼容低版本IE,需要引入html5shiv.js (HTML5_Shiv) -----只能IE识别,兼容h5新标签

用法如下:

<!--[if lt IE 9]>

<script src="html5shiv.js"></script>

<![endif]-->


好了,天色已晚,小编该做梦去了,暂时先分享到这里,后续会接着更新。。

由于本人水平有限,时间仓促,疏漏之处在所难免,望读者包容!

不喜勿喷!

本文为UndefinedCheng原创文章,如想转载,请注明原文网址摘自于http://www.jianshu.com/writer#/notebooks/8901255/notes/8479561,注明出处;

否则,禁止转载;谢谢配合!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 此文主要适读人群:梦想成为前端工程师的你! (承接上文) 三、音频、视频标签 1、video web上的视频直到现...
    tobyDing阅读 435评论 0 0
  • 问答题47 /72 常见浏览器兼容性问题与解决方案? 参考答案 (1)浏览器兼容问题一:不同浏览器的标签默认的外补...
    _Yfling阅读 13,790评论 1 92
  • <a name='html'>HTML</a> Doctype作用?标准模式与兼容模式各有什么区别? (1)、<...
    clark124阅读 3,540评论 1 19
  • HTML、XML、XHTML有什么区别? XMLXML是The Extensible Markup Languag...
    zx9426阅读 443评论 0 1
  • 终于读完了《巨婴国》,感觉像是蒙着眼在感受一场心理学的怪诞奇谈,现在都还有点摸不着东南西北。一本书读到这份上也是没...
    枫蓝默语阅读 860评论 3 7