HTML5-新增的语义化标签

妖狐艹你老母 2023-08-17 17:30 136阅读 0赞

## 概述 ##

HTML 5是 HTML 语言的新一代标准，定义了 HTML 标准的最新版本，是对 HTML 的第五次重大修改，定义了新的标签、特性和属性；拥有一个强大的技术集， HTML5 、CSS3 、javascript 这也是广义上的 HTML5

HTML5 拓展了语义化标签、本地存储、兼容特性、 2D、3D、动画、过渡、CSS3 特性、性能与集成

目前绝大多数新的属性，已被浏览器所支持，最新版本的浏览器已经开始陆续支持最新的特性

## HTML5 新增语义化标签 ##

常用 HTML5 语义化标签（均为双边标记标签），在 IE9 中，需要将这些元素转为块级元素

*  `<header></header>` 头部区域
 *  `<footer></footer>` 底部区域
 *  `<nav></nav>` 导航
 *  `<section></section>` 文档中的节
 *  `<article></article>` 独立内容区域
 *  `<aside></aside>` 侧边栏内容
 *  `<audio></audio>` 播放音频
    
     *  该标签支持三种音频格式：Ogg、MP3、Wav
     *  标签属性
        
         *  `src` 音频文件路径
         *  `autoplay` 在音频就绪后马上播放（谷歌禁用了该功能）；属性值为 autoplay
         *  `controls` 显示用户控件（播放按钮等）；属性值为 controls
         *  `loop` 设置该属性后，音频结束后自动播放 （循环播放）；属性值为 loop
    
        
        <audio src="music/bgsound.mp3" autoplay="autoplay" controls="controls" loop="loop"></audio>
    
    设置兼容性，通过 source 标签（单边标记）指定来源；source 为元素（audio、video等）指定多个媒体资源
    
        <audio controls="controls">
          
          <source src="music/bgsound.mp3" type="">
          
          <source src="music/bgsound.ogg" type="">
          
          <source src="music/bgsound.wav">
          您的浏览器不支持audio元素
        </audio>
 *  `<video></video>` 播放视频
    
     *  支持三种视频格式：MP4、Ogg、WebM
     *  标签属性
        
         *  `controls`、`src`、`width` 、`height`、`autoplay`（谷歌禁用了该功能）、`loop`
         *  `muted` 静音播放（设置了 autoplay 再设置 muted 在谷歌浏览器中会自动静音播放）；属性值为 muted
    
        <video src="movie/mp4.mp4" width="" height="" autoplay controls="controls" muted="muted" loop="loop"></video>
    
    设置兼容性
    
        <video controls="controls" autoplay>
          
          <source src="movie/movie.mp4" type="">
          
          <source src="movie/movie.ogg" type="">
          
          <source src="movie/movie.webm" type="">
          您的浏览器不支持video标签
        </video>

## 使用语义化标签的好处 ##

*  去掉或丢失样式的时候，能够让界面呈现清晰的结构
 *  有利于搜索引擎优化
 *  便于团队开发和维护，语义化使得网页更具可读性