【前端】【html5/css3】前端学习之路（一）（html5新标签/多媒体标签）

最新推荐文章于 2024-07-31 23:13:20 发布

SuiKaSan

最新推荐文章于 2024-07-31 23:13:20 发布

阅读量1.5k

点赞数 2

分类专栏：前端 html5/css3 文章标签： html5/css3

本文链接：https://blog.csdn.net/yongqianbao4519/article/details/81199106

版权

本文介绍了HTML5的新标签和多媒体特性，包括文档类型设定、字符设定、新标签如<header>、<nav>等的使用，新增的input type属性，以及<audio>和<video>标签的多媒体播放功能，详细讲解了不同浏览器的兼容性处理方法。

摘要由CSDN通过智能技术生成

一、HTML5新标签及特性

发展历程：

1.文档类型设定

获取结构方式：

Document：

HTML： webstorm 输入 html:4s 再点击tab即可
XHTML：webstorm 输入 html:xt 再点击tab即可
HTML5：webstorm输入 html:5或者 ! 再点击tab即可

2.字符设定

<meta http-equiv="charset" content="utf-8">

HTML与XHTML中建议这样去写

```
<meta charset="utf-8">
```
HTML5的标签中建议这样去写

3.常用新标签

header：定义文档的页眉头部
nav：定义导航链接的部分
footer：定义文档或节的页脚底部
article：定义文章。
section：定义文档中的节（section、区段）
aside：定义其所处内容之外的内容侧边

以上属性基本都只是起一种标识作用，其本身作用与div作用并无二致，是为了用户少用div+class标识CSS这种相对麻烦的方法，而直接采用这些属性来标识CSS，更加直接且简明易懂。但是，这些属性更多是应用在手机端，因为其新兴性，所以兼容性较差，网页端不建议使用。

<div class="newtype">
    <header>我是header标签</header>
    <nav>我是nav标签</nav>
    <footer>我是footer标签</footer>
    <article>我是article标签</article>
    <section>我是section标签</section>
    <aside>我是aside标签</aside>
</div>

datalist 标签定义选项列表。请与 input 元素配合使用该元素

    <input type="text" value="请输入明星" list="star"/>
    <datalist id="star">
        <option >刘德华</option>
        <option >刘若英</option>
        <option >刘晓庆</option>
        <option >戚薇</option>
        <option >戚继光</option>
    </datalist>