一页参透H5新标签与属性

       


面试中经常被问,支支吾吾的老是答不全!!血泪教训,决定记下来!h5是html的最新版本,是14年由w3c完成标准制定。增强了,浏览器的原生功能,减少浏览器插件(eg:flash)的应用,提高用户体验满意度,让开发更加方便。

---HTML5优势:

1)解决跨浏览器问题

2)明确的语义支持--更人性化


1、结构标签

(1)section:独立内容区块,可以用h1~h6组成大纲,表示文档结构,也可以有章节、页眉、页脚或页眉的其他部分;

(2)article:特殊独立区块,表示这篇页眉中的核心内容;

(3)aside:标签内容之外与标签内容相关的辅助信息;

(4)header:某个区块的头部信息/标题;

(5)hgroup:头部信息/标题的补充内容;

(6)footer:底部信息;

(7)nav:导航条部分信息

(8)figure:独立的单元,例如某个有图片与内容的新闻块。

(9 ) main : 主体标签,一个document文档里只能用一次,而且不能作为子元素使用

(10)hgroup(用于对整个页面或者页面中一个内容区块的标题进行组合

注释:它是用来表明标题的集合,如果有主标题,副标题可以用这来包裹一下也就是它里面包含的是hn标签这个标签在最新HTML5.1版中被废除了

目前用来模拟hgroup的其他方法

2、表单标签

(1)email:必须输入邮件;

(2)url:必须输入url地址;

(3)number:必须输入数值;

(4)range:必须输入一定范围内的数值;

(5)Date Pickers:日期选择器

(6)search:搜索常规的文本域;

(7)color:颜色;

    其中的一些属性:

            tabindex: table切换顺序

          autofocus: 自动聚焦

            disabled:  禁用

            required:此项必填,不能为空

            autocomplete:是否保存用户输入值

                                  默认为on,关闭提示选择off

            parrern:正则验证 pattrn="\d{1,9}"

                            我设置的正则是1-9个数字,如果不是就提交失败


3、媒体标签

(1)video:视频

(2)audio:音频

    属性:

        aotuplay: 自动播放   

        meted: 静音

        controls: 控制面板

        loop: 重复播放

        ormouseover = 'this.pause'  鼠标划上暂停

        ormouseout = 'this.play'  鼠标划出开始


(3)embed:嵌入内容(包括各种媒体),Midi、Wav、AU、MP3、Flash、AIFF等。


H5新增属性

(1)对于js进行添加的属性

异步加载先出现b再出现a。

(2)网页中标签中加入小图标的样式代码

内嵌css样式:在标签内部来定义一个样式区块(scoped),只对样式标签内部才有效

内嵌框架:iframe元素,新增了seamless无边距无边框,srcdoc定义了内嵌框架的内容。


总结新增属性:

(1)manifest属性:定义页面需要用到的离线应用文件,一般放在标签里

(2)charset属性:meta属性之一,定义页面的字符集

(3)sizes属性:<link>新增属性,当link的rel="icon"时,用以设置图标大小

(4)base属性:<base href="http://localhost/" target="_blank">表示当在新窗口打开一个页面时,会将href中的内容作为前缀添加到地址前

(5)defer属性:script标签属性,表示脚本加载完毕后,只有当页面也加载完毕才执行(推迟执行)

(6)async属性:script标签属性,脚本加载完毕后马上执行(运行过程中浏览器会解析下面的内容),即使页面还没有加载完毕(异步执行)

(7)media属性:<a>元素属性:表示对何种设备进行优化

(8)hreflang属性:<a>的属性,表示超链接指向的网址使用的语言

(9)ref属性:<a>的属性,定义超链接是否是外部链接

(10)reversed属性:<ol>的属性,定义序号是否倒叙

(11)start属性:<ol>的属性,定义序号的起始值

(12)scoped属性:内嵌CSS样式的属性,定义该样式只局限于拥有该内嵌样式的元素,适用于单页开发

---HTML5的改变

1)语法宽松:不区分大小写 、开始标签和结束标签大小写不讲究只要字母一个意思即可、元素可省(空元素br hr 、有些可省略结束标签(li dt dd p 。。。。)、允许有些省略属性的值标签属性等于自己的可以省略、有bool类型 允许属性不带引号但还是建议带着)

2)标记方法:内容类型.html和.htm都可以、 DTD声明规定为<!DOCTYPE html>、

指定字符集为<meta charset="UTF-8">

3)与其他版本兼容

---HTML5保留的标签

注意:HTML5删除table的align、bgcolor、border、boder建议写在css删除框架frameset、frame、noframes

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