标签语义笔记

一、简介

 

标签语义是指通过对HTML标签的合理使用，使得网页内容更加具有结构和意义，从而提高搜索引擎对网页内容的理解和抓取。对于前端学习者来说，掌握标签语义有助于提高网站的SEO（搜索引擎优化）效果，同时也有助于提高代码的可读性和可维护性。

 

二、常用的HTML5标签语义

 

1. 结构标签

 

<header>：定义文档的头部区域，通常包含网站Logo、导航栏等元素。

<nav>：定义文档的导航链接区域。

<main>：定义文档的主体内容区域。

<article>：定义独立的文章内容，如博客文章、新闻等。

<section>：定义文档中的一个区段，通常包含一个标题和相关的内容。

<aside>：定义文档的侧边栏内容，如广告、友情链接等。

<footer>：定义文档的底部区域，通常包含版权信息、联系方式等。

 

2. 表单标签

 

<form>：定义文档中的一个表单区域。

<input>：定义用户输入的控件，如文本框、密码框、单选按钮等。

<label>：为表单控件添加描述性的标签。

<utton>：定义一个按钮控件，如提交按钮、重置按钮等。

<select>：定义一个下拉选择列表。

<option>：定义下拉列表中的一个选项。

<textarea>：定义一个多行文本输入框。

 

3. 媒体标签

 

<audio>：定义音频内容，如音乐、语音等。

<video>：定义视频内容，如电影、动画等。

<source>：为媒体元素指定不同的源文件，以支持不同的浏览器和格式。

<track>：为媒体元素添加字幕或音轨。

 

4. 其他标签

 

<figure>：定义文档中的一段独立的内容，如图片、图表等。

<figcaption>：为`<figure>`元素添加标题或说明。

<time>：定义文档中的时间元素，如日期、时间等。

<mark>：为文本添加高亮效果。

<summary>：为文档中的某个部分添加摘要信息。

<details>：定义文档中的一个可以展开和折叠的区域，通常与<summary>元素一起使用。