文章导读:AI 辅助学习前端,包含入门、进阶、高级部分前端系列内容,当前是 HTML 的部分,公众号会持续更新,适合零基础的朋友,已有前端工作经验的可以不看,也可以当作基础知识回顾。
HTML5 中新增的语义化标签能够更准确地描述文档的结构和内容。这些元素有助于提高页面的可读性、可访问性,并且在搜索引擎优化方面也很有帮助。
1.<header>:定义文档或区块的页眉,通常包含标题、标志、导航等。这有助于标识内容的起始部分。
2.<nav>:表示导航部分,用于包含页面的主要导航链接。这有助于标识和区分页面中的导航菜单。
3.<main>:表示页面的主要内容部分,每个页面只应有一个
元素。这有助于指示页面的核心内容。
4.<article>:表示可以独立存在或重复使用的独立内容块,如博客文章、新闻文章等。
5.<section>:表示一个独立的区块,可以包含一组相关的内容。它可以用于组织页面的结构。
6.<aside>:表示页面的侧边内容,通常是与页面主要内容相关但可以独立存在的内容。
7.<footer>:定义文档或区块的页脚,通常包含版权信息、联系方式等。
8.<figure> 和 <figcaption>:<figure> 用于表示独立的内容块,如图片、图表、代码示例等,而 <figcaption> 用于为这些内容块添加标题或说明。
示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Figure and Figcaption Example</title>
</head>
<body>
<figure>
<img src="image.jpg" alt="A beautiful landscape">
<figcaption>A beautiful landscape</figcaption>
</figure>
<figure>
<code>
function add(a, b) {
return a + b;
}
</code>
<figcaption>Example code for adding two numbers</figcaption>
</figure>
</body>
</html>
9.<.mark>:用于突出显示文本,常用于搜索结果中的关键字高亮。
10.<time>:用于表示日期和时间,有助于机器和搜索引擎更好地理解日期信息。
11.<progress>:表示任务的进度,如文件上传、加载等。
12.<meter>:表示一个已知范围内的标量值或分数。
13.<details> 和 <summary>:<details> 标签用于包裹一个可折叠的内容块。用户可以点击折叠内容块的摘要部分(由 summary> 提供),以展开或折叠内容。 summary> 标签用于定义 details> 元素的摘要或标题。它通常是一个用户点击的按钮或标题,以提示用户折叠内容的主题
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Details and Summary Example</title>
</head>
<body>
<details>
<summary>About Us</summary>
<p>We are a company that specializes in web development and design.</p>
</details>
<details>
<summary>Services</summary>
<ul>
<li>Web Design</li>
<li>Front-end Development</li>
<li>Back-end Development</li>
</ul>
</details>
<details>
<summary>Contact</summary>
<p>If you have any questions, feel free to reach out to us.</p>
</details>
</body>
</html>
下面是一个简单的示例,包含上面提到了所有语义化标签:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>HTML5 Semantic Elements Example</title>
</head>
<body>
<header>
<h1>My Website</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>About Us</h2>
<p>This is the about section of our website.</p>
</section>
<section>
<h2>Services</h2>
<p>We offer a variety of services to our clients.</p>
</section>
</main>
<aside>
<h3>Related Links</h3>
<ul>
<li><a href="#">Learn More</a></li>
<li><a href="#">FAQs</a></li>
</ul>
</aside>
<footer>
<p>© 2023 My Website. All rights reserved.</p>
</footer>
</body>
</html>
以上就是 HTML5 中语义化标签的内容,这些内容在面试中也可能被问到,在平时写页面时留意下每个标签对应的含义,用在正确的位置才能发挥语义化标签最大的作用。
希望每一个初学者都能成为一个优秀的前端开发工程师,加油。
最后啰嗦一句,好记性不如烂笔头,希望大家在学习的过程中养成做笔记的习惯,形成自己的知识体系。