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原创文章,如想转载,请注明原文网址摘自于//www.greatytc.com/writer#/notebooks/8901255/notes/8479561,注明出处;

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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 217,185评论 6 503
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 92,652评论 3 393
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 163,524评论 0 353
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 58,339评论 1 293
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 67,387评论 6 391
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 51,287评论 1 301
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 40,130评论 3 418
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,985评论 0 275
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 45,420评论 1 313
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,617评论 3 334
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,779评论 1 348
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,477评论 5 345
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 41,088评论 3 328
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,716评论 0 22
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,857评论 1 269
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,876评论 2 370
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,700评论 2 354

推荐阅读更多精彩内容

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