📜  HTML 5标签(1)

📅  最后修改于: 2023-12-03 14:41:45.281000             🧑  作者: Mango

HTML 5标签

HTML 5标签是指在HTML 5规范中定义的新的HTML元素。这些元素不仅为Web开发人员提供了更多的语义化标签,而且还提高了Web文档的可读性、可访问性和可维护性。

语义化标签

HTML 5标签为Web开发人员提供了更多的语义化标签,这些标签可以让开发人员更容易地理解网页的内容和结构,也可以使搜索引擎更准确地了解网页的内容,提高网页的排名。

header标签代表文档或节的引言或导航部分。在大多数情况下,它包含站点的标题、标志、搜寻框、导航元素等内容。header标签应该放在body标签内,但是不应该是section 标签的子元素。在一个文档中可以有多个header。

<header>
    <h1>这里是站点标题</h1>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </nav>
</header>

article标签代表一个完整的、独立的、可复用的内容块,例如一篇文章、一则新闻、一张图片集、一个博客评论等。article标签的内容应该是可以独立于文档其他内容被分配的。同时,可以使用多个article标签嵌套在一起。

<article>
    <header>
        <h2>这里是文章标题</h2>
        <p>作者:xxx</p>
        <time datetime="2022-01-01">2022-01-01</time>
    </header>
    <p>这是文章的正文内容……</p>
    <footer>
        <p>版权所有,未经允许不得转载。</p>
    </footer>
</article>

aside标签代表一个和文档主要内容相关,但可以被视为独立的部分。通常用于放置侧边栏、广告、相关链接、引用等内容。aside标签也可以嵌套在article标签内。

<aside>
    <h2>热门文章</h2>
    <ul>
        <li><a href="#">文章一</a></li>
        <li><a href="#">文章二</a></li>
        <li><a href="#">文章三</a></li>
    </ul>
</aside>

footer标签代表一个文档、节、文章、应用程序的页脚。通常包含版权信息、联系方式、附加内容、相关链接等。在一个文档中可以有多个footer标签。

<footer>
    <p>版权所有,未经允许不得转载。</p>
    <nav>
        <ul>
            <li><a href="#">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于我们</a></li>
        </ul>
    </nav>
</footer>
多媒体标签

HTML 5标签为Web开发人员提供了更多的多媒体标签。这些标签可以使开发人员更方便地在网页中添加音频、视频等多媒体内容。

audio标签用于向网页中嵌入音频内容。可以通过src属性指定音频文件的URL,通过controls属性显示音频播放控制面板。

<audio src="music.mp3" controls>你的浏览器不支持音频播放功能。</audio>

video标签用于向网页中嵌入视频内容。可以通过src属性指定视频文件的URL,通过controls属性显示视频播放控制面板。

<video src="movie.mp4" controls>你的浏览器不支持视频播放功能。</video>
表单标签

HTML 5标签为Web开发人员提供了更多的表单元素。这些元素可以使开发人员更方便地创建表单,并提高表单的用户体验。

input标签是Web表单中最常用的表单元素之一。可以通过type属性指定不同的输入类型,例如文本框、密码框、单选框、复选框、文件上传等。

<input type="text" name="username" placeholder="请输入用户名">
<input type="password" name="password" placeholder="请输入密码">
<input type="radio" name="gender" value="male">男
<input type="radio" name="gender" value="female">女
<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="traveling">旅行
<input type="file" name="avatar">

select标签用于创建下拉列表框,可以让用户从多个选项中选择一个。

<select name="city">
    <option value="">请选择城市</option>
    <option value="beijing">北京</option>
    <option value="shanghai">上海</option>
    <option value="guangzhou">广州</option>
</select>

textarea标签用于创建多行文本框,可以让用户输入多行文本内容。

<textarea name="message" placeholder="请输入留言"></textarea>
结论

在HTML 5中,新增了很多有用的语义化标签、多媒体标签、表单标签等等,这些标签可以让Web开发人员更方便地创建Web页面,并提高Web页面的可读性、可访问性和可维护性。