HTML5新增标签和删除的标签

一、新增标签

结构标签

相当于有意义的div标签
article:用于定义一篇文章
header:定义页面的头部
footer:
nav:导航条链接
section:定义一个区域
aside:定义页面内容的侧边栏
hgroup:定义文件中一个区块的相关信息
例如:

<hgroup>
<h1>标题一</h1>
<h2>标题二</h2>
</hgroup>

figure:定义一组媒体内容以及它们的标题(可以用于包裹canvas,video等多媒体标签)
figcaption:用于figure标签内定义媒体的标题
footer:定义一个页面区域的底部
dialog:定义一个对话框(例如微信的对话框)
补充一:header/section/footer/aside/article/footer这几个标签最好不要嵌套在里面,放在最外边
补充二:使用层级(header=section=footer:写在外层)>(aside/article/figure/hgroup/nav:写在内层)

多媒体标签

第一类

  • video:定义一个视频
    video标签和audio标签使用差不多
    1.autoplay:是否自动播放
    2.controls:是否展示控制器
    4.可以用css控制视频框的宽度和高度
    3.可以包裹source标签

  • audio:定义一个音频
    1.autoplay:是否自动播放(autoplay="autoplay":自动播放,不写则默认不自动播放)
    2.loop:是否重复以及重复几次(loop='-1'时无限重复,=数字时重复数字次数)
    3.controls:是否显示控制器(controls="controls"时显示,不写则默认不显示)
    4.可以包裹source标签

  • source:定义媒体资源
    可以用于audio和video标签内部,并且可以添加不同格式的媒体文件,type属性用于填写转码格式,如下:

    <audio>
        <source src='音频资源' type='audio/转码格式'>
    </audi>

第二类

  • canvas(图片标签):定义图片

第三类

  • embed:定义外部可交互内容和插件,例如flash
    使用方法和audio和video标签类似
    1.可以使用css控制资源显示的大小
<embed src="资源路径" type="">

多媒体标签出现的意义:不使用插件就能控制媒体文件,极大地提升了用户的体验

Web应用标签

  • 第一类:状态标签
    • meter:实时状态显示:气压、气温等(目前只支持谷歌和opera)
      属性:
      1.value:定义目前所处状态(数值)
      2.min:最低数值
      3.max:最高数值
      4.low:最低显示(低于该值为为黄色)
      5.high:最高显示(高于该值为黄色)
      6.optimum:最优值

用法一

<meter value='220' min='20' max='380' low='200' high='240' optimum='220'></meter>
image.png
<meter value='0.75'>75%</meter>
image.png
  • progress:显示任务过程:安装、加载等(目前只支持谷歌,火狐和opera)
    属性
    1.value:当前的状态值
    2.max:最大状态值

用法一:显示正在加载状态

<progress max='100'></progress>
image.png

用法二:显示当前加载的百分比

<progress max='100' value='50'></progress>
image.png

列表标签

  • datalist:为input标签定义一个下拉列表,配合option(兼容火狐和谷歌)
    用法:input标签中的list属性的值和datalist标签中的id必须相同,才能进行下拉拓展
    <input type="text" placeholder="111" list='phonelist'>
    <datalist id="phonelist">
        <option value="三星"></option>
        <option value="华为"></option>
        <option value="苹果"></option>
        <option value="小米"></option>
        <option value="大春"></option>
    </datalist>

image.png
  • details:定义一个元素的详细内容,配合summary标签,用于展示省略的信息(兼容谷歌和其他一些高版本浏览器)
    用法:
image.png

显示(未点击展开时候):

image.png

点击展开后:

image.png

另外可以配合summary标签修改标题的显示

<details>
    <summary>很多的a</summary>
</details>
image.png

open属性:可以设置为open='open'用于设置默认打开

Menu标签(很多浏览器都不支持,建议少用或不用)

  • menu:命令列表
  • menuitem:menu命令列表标签(只有火狐8.0以上支持)
  • command:menu标签定义的一个命令按钮(只有IE9支持,以上或以下都不支持)

注释标签(不是平时的注释,这个标签主要用于类似注释拼音之类,会显示出来)

  • ruby和rt标签
    用法:用ruby标签将字括起来,然后rt标签填写注释信息
<p>注<ruby>释<rt>shi</rt></ruby>标签</p>

[图片上传中。。。(10)]

image.png
  • mark:用于标黄(所有主流浏览器都支持,IE要9以上)
<p><mark>aaaaa</mark>aaaaa</p>
image.png

二、删除的标签

纯表现元素(删除后利于表现与结构分离)

1.Basefont
2.big
3.center
4.font
5.s
6.strike
7.tt
8.u

可能有负面影响的元素

1.frame
2.frameset(使用该标签时会将body标签去掉,破坏原始结构,并且将网页拆分,不利于搜索)
3.noframes
因为HTML5详细兼容,所以以上标签还是可以使用,但是最好不要用

产生混淆的元素

1.acronym
2.applet
3.isindex
4.dir
完全没用过....

三、使用HTML5新标签进行布局的意义

1.提升语义化特性和网页的质量
2.减少了用于css调用的class和id属性
3.对搜索引擎更友好

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

推荐阅读更多精彩内容