HTML5总结——标签变化

最新推荐文章于 2022-04-08 00:13:45 发布

TimChen666

最新推荐文章于 2022-04-08 00:13:45 发布

阅读量449

点赞数

CC 4.0 BY-SA版权

分类专栏： html

本文链接：https://blog.youkuaiyun.com/lihaoen666/article/details/77879522

html 专栏收录该内容

7 篇文章

订阅专栏

本文详细介绍了HTML5中的新增标签，包括结构标签、多媒体标签、Web应用标签和其他标签，如`<article>`、`<audio>`、`<video>`、`<progress>`和`<details>`等。同时提到了被删除和重定义的标签，强调了这些新标签对于网页结构和用户体验的提升。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

新增标签

1. 结构标签

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

 <article>    标记定义一篇文章

  <header>    定义一个页面 或 一个区域的头部
 
 <footer>     标记定于一个页面或一个区域的底部

  <nav>       标记定义导航链接

 <section>    标记定义一个区域

 <aside>      标记定义页面内容部分的侧边栏
 
 <hgroup>     标记定义文件中一个区块的相关信息，用它来包裹h1、h2... 
                     
 <figure>     标记定义一组媒体内容以及它们的标题

<figcaption>  标记定义figure元素的标题

 <dialog>     标记定义一个对话框（会话框）类似微信

实例：

这里写图片描述

2. 多媒体标签

<video>  视频
<audio>  音频
<source>  媒体资源   这是一个单标记标签
<canvas>  图片（画布）
<embed>  外部的可交互的内容或插件，比如flash

`<audio>` （IE9+）

属性：

    loop  循环播放
   
autoplay  自动播放

controls  控制器

  muted   静音

preload   预加载（如设置了autoplay，则忽略）

补充：

在audio标签后部，可以写一段文字，提醒浏览器不支持HTML5的用户更换浏览器。
如果是支持HTML5的浏览器，将不会出现这段文字。

实例：

<audio src="studio/1.mp3" autoplay="autoplay" loop="-1" controls="">您的浏览器版本过于老旧，请更新。</audio>

`<video>`（IE9+）

支持MP4、WebM、Ogg。

属性：

     src   地址	
  
   width   宽度     数值

  height   高度     数值

    loop   循环播放
    
autoplay   自动播放

controls   控制器

  muted    静音

preload    预加载（如设置了autoplay，则忽略）

   type    转码     如：type="video/mp4"

实例：

<video src="" autoplay="" controls="" width="1024" height="768"></video>

`<source>`（IE9+）

source一般嵌套在video、audio里面使用。

属性：

type 转码

src  地址

`<embed>`

外部的可交互的内容或插件，比如flash

属性：

 type  转码

  src  地址

 width 宽度   数值

height 高度   数值

3. Web应用标签

状态标签

`<meter>`【电量条】（IE不支持）

属性：

   value  当前值      
   
     min  最小值   
     
     max  最大值
     
     low  警戒低值   
       
    high  警戒高值  
    
 optimum  最合适的值

补充：

如果只设置value的值，这个值只能取0~1之间，并且以百分比的形式呈现在页面。

实例：

这里写图片描述

`<progress>`【加载条】（IE10+）

属性：

value 当前值        

 max  最大值

如果只设置max值，它会变成动态加载中的形式。

实例：

这里写图片描述

列表标签

`<datalist>` 类下拉列表（IE10+，不支持Safari）

配合input标记，定义一个类下拉列表，选项用option标签

实例：

	<input placeholder="请选择您喜欢的麦当劳食物" list="foodList" />
    <datalist id="foodList">
        <option value="麦辣鸡腿堡"></option>
        <option value="麦乐鸡块"></option>
        <option value="麦辣鸡翅"></option>
        <option value="薯条"></option>
        <option value="甜筒"></option>
    </datalist>

优点：

可以通过输入关键字，检索选项
可以输入自定义的值，不一定要选中选项

`<details>` 隐藏内容（Safari6 和 Chrome）

配合summary使用，利用自身的open属性显示隐藏内容

实例：

<details open="">
        <summary>有一次。。。</summary>
        <p>
           有一次，在我参加的一个晚会上，主持人问一个小男孩：你长大以后要做什么样的人？孩子看看我们这些企业家，然后说：做企业家。在场的人忽地笑着鼓起了掌。我也拍了拍手，但听着并不舒服。我想，这孩子对于企业究竟知道多少呢？他是不是因为当着我们的面才说要当企业家的呢？他是不是受了大人的影响，以为企业家风光，都是有钱的人，才要当企业家的呢？

        </p>
</details>

4. 其他标签

注释标签

`<ruby> & <rt>` 组合使用（IE7+）

W3C上说，IE9+才支持，但实测IE7、IE8也支持。

实例：

<p>他很<ruby>屌<rt>diao</rt></ruby></p>

实现效果：

他很屌diao

`<ruby> & <rt> 、<rp>` 组合使用（IE7+）

实例：

<p>他很<ruby>屌<rp>(</rp><rt>diao</rt><rp>)</rp></ruby></p>

实现效果：

他很屌(diao)

其他标签

<mark> 黄色标记（IE9+）

<output> 计算结果输出（非IE）

需要一组from，from里面设置oninput值，也就是计算逻辑。
两个或多个input作为输入参数。
output作为输出显示区域

<form oninput="totalPrice.value = parseInt(price.value)*parseInt(number.value)">
        <input type="text" id="price" value="5000">
         *<input type="number" id="number" value="1">
        =<output name="totalPrice" for="price number"></output>
        <!--for	定义输出域相关的一个或多个元素。-->
</form>

实验结果：

这里写图片描述

被删除标签

纯表现的元素

Basefont（标准字体）、 big（放大以后的字体）、 center（居中对齐）、font（定义字体）、 s 、 strike 、 tt 、 u

对可用性产生负面影响的元素
frame、frameset、noframes

如果要在网页中显示别的网页，可以使用iframe。

产生混淆的元素

acronym、applet、isindex、dir

重定义标签

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

	<b>  内联文本，通常是粗体，没有了传递表示重要的意思

	<i>  内联文本，通常是斜体，没有了传递表示重要的意思

	<dd> 标题，可以和details、figure一同使用，定义包含文本；dialog也可用

	<dt> 描述，可以和details、figure一同使用，汇总细节；dialog也可用

    <hr> 主题结束，而不是水平线，虽然显示是一样的

 <small> 小字体，例如打印注释或者法律条款

<strong> 重要性，而不是突出