HTML5-新增的语义化标签 妖狐艹你老母 2023-08-17 17:30 75阅读 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"> <!-- IE9 Chrome3.0 --> <source src="music/bgsound.mp3" type=""> <!-- Fireofx3.5 chrome3.0 --> <source src="music/bgsound.ogg" type=""> <!-- Firefox3.5 --> <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> <!-- IE9 Chrome5 --> <source src="movie/movie.mp4" type=""> <!-- Firefox3.5 Chrome5 --> <source src="movie/movie.ogg" type=""> <!-- Firefox4 Chorme6 --> <source src="movie/movie.webm" type=""> 您的浏览器不支持video标签 </video> ## 使用语义化标签的好处 ## * 去掉或丢失样式的时候,能够让界面呈现清晰的结构 * 有利于搜索引擎优化 * 便于团队开发和维护,语义化使得网页更具可读性
还没有评论,来说两句吧...