H5标签变化1(DTD、新增标签：结构标签，多媒体标签，web应用标签还有其他标签、删除标签、重定义标签)

最新推荐文章于 2023-04-12 13:20:07 发布

蔡蔡动起来

最新推荐文章于 2023-04-12 13:20:07 发布

阅读量788

点赞数

分类专栏： h5 文章标签： DTD h5新增标签

本文链接：https://blog.csdn.net/weixin_40512519/article/details/82863649

版权

h5 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

h5新增标签

html5约等于HTML+CSS+Javascript+API

WebApp

HTML5新增了离线存储、更丰富的表单、js线程、socket、标准扩展embed、css3...

流媒体与多媒体引擎

Audio、video、Canvas、webgl等等

搜索引擎和无障碍领域

h5是唯一一个通吃PC、Mac、iPhone、Android等主流平台的跨平台语言。

标签变化

DTD、新增的标签、删除的标签、重定义的标签

页面布局

新的页面布局、区别和意义

属性变化

input、表单属性、链接属性、其他属性

HTML5展望

简述API、简述Canvas、移动端应用

支持H5的浏览器有：IE9+、Firefox、Opera、Sadari、Chrome

文档类型定义（DTD）:

DTD:可定义合法的xml文档构建模块，它使用一系列合法的元素来定义文档的结构。

在HTML中：DTD规定了标记语言的规则，这样浏览器才能正确地呈现内容。

HTML5中：不基于SGML,所以不需要引用DTD.

新增的标签：

结构标签
多媒体标签
web应用标签
其他标签

结构标签（块状元素）——有意义的div

<article> <header> <nav> <section> <aside> <hgroup> <figure>标记定义一组媒体内容以及它们的标题。<figcaption>定义figure元素的标题。<footer> <dialog>

<section>
    <hgroup>
        <h1>树下的猫</h1>
        <h3>文/艾米</h3>
        <h4> 三头王：异域王族，拥有蜘蛛头、人头、狮子头的三头大蜘蛛，修炼万蛛魔功、狮子吼、无畏狮子印等，其中黄金三头王为其王族，最为强大罕见
            血凰狮：堕落血凰跟古僧一脉的“无畏狮子”结合的后代</h4>
    </hgroup>
    <aside>
        <a href="#se1">Section One</a>
        <a href="#se2">Section Two</a>
        <a href="#se3">Section Three</a>
    </aside>
</section>


<section>
    <figure>
        <figcaption>树下的猫咪怎么生存</figcaption>
        <div class="video">。。。</div>
    </figure>
</section>
<section>

header/section/aside/article/footer 不要互相嵌套
级别高低：header/section/footer > aside/article/figure/hgroup/nav >div/figcaption 级别高的我们通常写在外层，互不嵌套。

多媒体标签：

<video> 标记定义一个视频

<audio> 定义音频内容

<source> 定义媒体资源

<body>
<!--autoplay="autoplay"自动播放 loop="-1"无限次自动播放  controls="controls"可拖动控制-->
<audio src="../source/passion.mp3" autoplay="autoplay" loop="-1" controls="controls">您的浏览器该退休了。</audio><!--如果浏览器不支持audio就会显示文字-->

<audio autoplay="autoplay">
    <source src="../source/passion.mp3" type="audio/mpeg"/>
</audio>
</body>

<video controls="controls" width="1024" height="768">
    <source src="../source/pal4.mp4" type="video/mp4"/>
</video>

<video src="../source/pal4.mp4"></video>

audio和video区别：audio是音频，不存在宽度和高度。

<canvas> 标记定义图片。

<embed src="../source/happybirthday.swf" type="" width="1024" height="768"/>

web应用标签：

状态标签：
<meter> 状态标签（实时状态显示：气压、气温）
<progress> 状态标签（任务过程：安装、加载）

<meter value="180" min="20" max="380" low="200" high="240" optimum="220"></meter>

<meter value="220" min="20" max="380" low="200" high="240" optimum="220"></meter>

如果value=400,用js取得的值依旧是380.如果value=0,用js取得的值是20.

<meter value="0.75">75%</meter>

<progress value="30" max="100" >
<progress max="100"><!--条条会来回滚动-->

progress的兼容性：

<meter> Chrome、Opera

<progress> Chrome、Opera、Firefox

列表标签
<datalist> 为input标记定义一个下拉列表，配合option.
<details> 标记定义一个元素的详细内容，配合summary.

<input placeholder="请选择你的手机品牌" list="phoneList"/>
<datalist id="phoneList">
    <option value="iPhone">iPhone</option>
    <option value="huawei">huawei</option>
    <option value="oppo">oppo</option>
    <option value="samsung">samsung</option>
    <option value="meizu">meizu</option>
</datalist>

兼容性：

<datalist> Firefox、Opera

<details> 目前兼容比较好的浏览器是chrome，有些高版本的浏览器也能兼容。

<details>
    <summary>书下的毛</summary>
    <p>
    <p>虚空王兽：异域中的至尊奇兽，掌控空间，是最强生灵之一，成长起来能成仙，其血统不纯的后裔流落在九天被称为虚空兽</p>
    无畏狮子：古僧一脉护教圣兽，与白玉龙象并称，拥有掌中僧国秘术，之后和堕落血凰一起叛走异域。当代第一天骄被荒所擒被迫成为坐骑，古祖已被蛄祖斩杀
    堕落血凰：仙卵被污的凤凰，疯狂嗜杀无法控制。投靠异域居于焚天之地，始祖已被蛄祖斩杀
    堕落古僧：投靠异域的古僧一脉叛徒
    蛇夜叉：异域王族，拥有人躯蛇头夜叉翅及蛇尾
    无殇一族： 帝族，为古祖无殇魔王一脉，祖术神通免疫，万法不侵，法力免疫，古祖无殇已被荒镇杀
    </p>
</details>

点击展开内容。

但如果我们刚打开网页就想让内容展开，

<details open="open">

Menu
<menu> 命令列表（目前所有主流浏览器都不支持）
<menuitem>menu命令列表标签（只有FireFox8.0+ 支持）
<command> menu标记定义一个命令按钮（只有IE9支持）

其他标签
注释标签
<ruby> 标记定义注释或音标
<rt> 标记定义对ruby的注释内容文本

<p>我们来 <ruby>跨<rt>kua</rt></ruby>一个话题</p>

解决兼容性问题：

<p>我们来 <ruby>跨 <rp>(</rp><rt>kua</rt> <rp>)</rp></ruby>一个话题</p>

如果兼容kua就在字的上面，如果不兼容就带括号放在字的后面。

H5删除标签：

能用html完成的就尽量不用css。能用css完成的就尽量不用js。

纯表现的元素：Basefont、big、center、font、s、strike、tt、u
对可用性产生负面影响的元素:frame、frameset、noframes
产生混淆的元素：acronym、applet、isindex、dir

重定义标签：

显示不变，只是表达的含义进行了重新定义的标签。

<b> 内联文本，粗体
<i> 内联文本，斜体
<dd> 可以同details与figure一同使用，定义包含文本，dialog也可用描述
<dt> 可以同details与figure一同使用，汇总细节，dialog也可用标题
<hr> 表示主题结束，而不是单单的水平线，虽然显示相同。
<menu> 重新定义用户界面的菜单，配合command或者menuitem使用。在之前html中有，到h4.01被w3c否掉。h5又再次定义。
small 小字体。打印注释或者法律条款。
big删除
strong 表示重要性而不是强调符号

蔡蔡动起来

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
H5标签变化1(DTD、新增标签：结构标签，多媒体标签，web应用标签还有其他标签、删除标签、重定义标签)

h5新增标签html5约等于HTML+CSS+Javascript+APIWebApp HTML5新增了离线存储、更丰富的表单、js线程、socket、标准扩展embed、css3...流媒体与多媒体引擎 Audio、video、Canvas、webgl等等搜索引擎和无障碍领域h5是唯一一个通吃PC、Mac、iPhone、Android等主流平台的...
复制链接

扫一扫