HTML5 新标签

2023-03-17 09:35:39
HTML5 为了语义化增加了一些新标签,去掉样式能让页面结构清晰呈现、有益于 SEO、便于团队开发和维护。 ## 一、块标签 ``` <nav>导航栏</nav> <header>头部</header> <footer>底部</footer> <aside>旁边栏</aside> <section>内容</section> <main>主要区域</main> <article>文章</article> <details>详情</details> ``` 以上都是块标签,是给予标签的语义,用法是和块标签相同的,用于在特定语义场景下代替 `<div>` 标签,例如: ``` <div class="nav">这是导航</div> 建议写成: <nav>这是导航</nav> ``` ## 二、表单元素属性 ``` date 和 time 分别表示日期和时间 email、url 当 input 的 type 为 email 时,必须输入格式并且需要符合相应的格式 number 必须输入,并且可以设置最小值 min,最大值 max range: 输入一定范围内的数字值 placeholder: 提示文字 required 定义该 input 为必填项 ``` ## 三、多媒体标签 ``` audio(音频):支持格式:mp3、 wav、ogg 属性: controls 显示音频控件 autoplay 准备就绪后自动播放 loop 自动单曲循环 muted 静音 src 规定音频文件的路径 source 定义资源类型、由浏览器进行选择 video(视频):支持格式:mp4、webm、ogg 属性: controls 显示音频控件 autoplay 准备就绪后自动播放 loop 自动单曲循环 muted 静音 src 规定音频文件的路径 source 定义资源类型、由浏览器进行选择 ``` 例如 ``` <video width="320" height="240" controls> <source src="movie.mp4" type="video/mp4"> <source src="movie.ogg" type="video/ogg"> 您的浏览器不支持Video标签 </video> ```