语义化 HTML
本文解释了语义HTML。
比较HTML4和HTML5，并解释HTML5中使用的语义标签。
YouTube Video
HTML5 语义标签
语义标签，例如<header>和<main>标签，是在HTML5中引入的具有意义的标签。在此之前，在HTML4中主要使用<div>标签。
以下是使用语义标签创建的HTML5示例。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>HTML5 Example</title>
7</head>
8<body>
9 <!-- Header -->
10 <header>
11 <h1>Welcome to My Website</h1>
12 </header>
13
14 <!-- Navigation menu -->
15 <nav>
16 <ul>
17 <li><a href="#">Home</a></li>
18 <li><a href="#">About</a></li>
19 <li><a href="#">Contact</a></li>
20 </ul>
21 </nav>
22
23 <!-- Main content -->
24 <main>
25 <h2>About Us</h2>
26 <p>This is a simple website created using HTML5 tags.</p>
27 </main>
28
29 <!-- Footer -->
30 <footer>
31 <p>© 2024 My Website</p>
32 </footer>
33</body>
34</html>下面是一个使用 <div> 标签创建的 HTML4 示例。
1<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
2<html lang="en">
3<head>
4 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
5 <title>HTML4 Example</title>
6</head>
7<body>
8 <!-- Header -->
9 <div id="header">
10 <h1>Welcome to My Website</h1>
11 </div>
12
13 <!-- Navigation menu -->
14 <div id="nav">
15 <ul>
16 <li><a href="#">Home</a></li>
17 <li><a href="#">About</a></li>
18 <li><a href="#">Contact</a></li>
19 </ul>
20 </div>
21
22 <!-- Main content -->
23 <div id="main">
24 <h2>About Us</h2>
25 <p>This is a simple website created using HTML4 structure.</p>
26 </div>
27
28 <!-- Footer -->
29 <div id="footer">
30 <p>© 2024 My Website</p>
31 </div>
32</body>
33</html>使用语义标签编写的博客文章示例。
还有其他语义标签，如<article>和<section>。
作为示例，我们将使用语义标签撰写博客文章。
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <meta charset="UTF-8">
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <title>My Blog</title>
7 <link rel="stylesheet" href="theme-blog.css">
8</head>
9<body>
10 <!-- Website Header -->
11 <header>
12 <h1>My Blog</h1>
13 <p>Sharing knowledge and ideas</p>
14 </header>
15
16 <!-- Navigation Menu -->
17 <nav>
18 <ul>
19 <li><a href="index.html">Home</a></li>
20 <li><a href="about.html">About</a></li>
21 <li><a href="contact.html">Contact</a></li>
22 </ul>
23 </nav>
24
25 <!-- Main Content -->
26 <main>
27 <!-- Blog Article -->
28 <article>
29 <header>
30 <h2>Understanding Semantic HTML</h2>
31 <p>Posted on <time datetime="2024-09-08">September 8, 2024</time> by <a href="author.html">John Doe</a></p>
32 </header>
33
34 <section>
35 <h3>What is Semantic HTML?</h3>
36 <p>Semantic HTML refers to the use of HTML5 elements that clearly describe their meaning in a human- and machine-readable way.</p>
37 </section>
38
39 <section>
40 <h3>Why is Semantic HTML Important?</h3>
41 <p>Using semantic tags helps improve accessibility, search engine optimization (SEO), and the overall structure of the web page. It allows search engines to better understand the content, and assistive technologies to accurately convey information to users.</p>
42 </section>
43
44 <footer>
45 <p>Tags: <a href="#">HTML</a>, <a href="#">Web Development</a>, <a href="#">Accessibility</a></p>
46 </footer>
47 </article>
48
49 <!-- Related Articles (Sidebar) -->
50 <aside>
51 <h3>Related Articles</h3>
52 <ul>
53 <li><a href="#">The Benefits of Using Semantic HTML</a></li>
54 <li><a href="#">Improving SEO with Semantic Markup</a></li>
55 <li><a href="#">Accessible Web Design: Best Practices</a></li>
56 </ul>
57 </aside>
58 </main>
59
60 <!-- Website Footer -->
61 <footer>
62 <p>© 2024 My Blog. All rights reserved.</p>
63 <p><a href="privacy.html">Privacy Policy</a> | <a href="terms.html">Terms of Service</a></p>
64 </footer>
65</body>
66</html>-
<header>:<header>标签用于页面的整体头部以及每篇文章的头部。它包括网站标题、文章标题、发布日期和作者信息。 -
<nav>:<nav>标签代表网站的导航菜单，包含链接如首页、关于和联系。 -
<main>:<main>标签代表页面的主要内容，包括博客文章和相关内容。 -
<article>:<article>标签是一个将博客文章本身包裹起来的语义标签，表明该文章是独立内容。 -
<section>:<section>标签代表文章内的每个部分。 -
<aside>:<aside>标签代表与主要内容相关的补充信息，例如“相关文章”。 -
<footer>:<footer>标签用于页面的整体底部以及显示文章的标签。
使用这样的语义标签可以使文档的结构更加清晰。例如，<body> 标签由 <header>、<nav>、<main> 和 <footer> 标签组成。此外，<main> 标签由 <article> 和 <aside> 标签组成。
在这个例子中，<article> 标签也由语义标签组成。
应用 CSS 的示例
现在，让我们将 CSS 应用于博客文章的 HTML。CSS将在一个单独的视频中进行解释。
1/* Reset */
2* {
3 margin: 0;
4 padding: 0;
5 box-sizing: border-box;
6}
7
8/* Body styles */
9body {
10 font-family: Arial, sans-serif;
11 line-height: 1.6;
12 background-color: #f4f4f4;
13 color: #333;
14 padding: 20px;
15}
16
17/* Header styles */
18header {
19 text-align: center;
20 padding: 20px;
21 background-color: #333;
22 color: white;
23 margin-bottom: 20px;
24}
25
26header h1 {
27 font-size: 2.5rem;
28}
29
30header p {
31 font-size: 1.2rem;
32 font-style: italic;
33}
34
35/* Navigation menu */
36nav {
37 background-color: #555;
38 padding: 10px;
39}
40
41nav ul {
42 list-style: none;
43 text-align: center;
44}
45
46nav ul li {
47 display: inline-block;
48 margin-right: 15px;
49}
50
51nav ul li a {
52 color: white;
53 text-decoration: none;
54 font-weight: bold;
55}
56
57nav ul li a:hover {
58 color: #f4f4f4;
59 text-decoration: underline;
60}
61
62/* Main content styles */
63main {
64 display: flex;
65 flex-wrap: wrap;
66 justify-content: space-between;
67 align-items: flex-start;
68}
69
70article {
71 flex: 3;
72 background-color: white;
73 padding: 20px;
74 border-radius: 5px;
75 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
76 margin-bottom: 20px;
77}
78
79/* Article header */
80article header h2 {
81 font-size: 2rem;
82 margin-bottom: 10px;
83}
84
85article header p {
86 font-size: 0.9rem;
87 color: #666;
88}
89
90article section h3 {
91 font-size: 1.5rem;
92 margin-top: 20px;
93}
94
95article section p {
96 margin: 10px 0;
97}
98
99/* Article footer */
100article footer {
101 margin-top: 20px;
102 font-size: 0.9rem;
103}
104
105article footer p a {
106 color: #3498db;
107 text-decoration: none;
108}
109
110article footer p a:hover {
111 text-decoration: underline;
112}
113
114/* Sidebar styles */
115aside {
116 flex: 1;
117 background-color: #fff;
118 padding: 20px;
119 margin-left: 20px;
120 border-radius: 5px;
121 box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
122}
123
124aside h3 {
125 font-size: 1.5rem;
126 margin-bottom: 10px;
127}
128
129aside ul {
130 list-style: none;
131 padding-left: 0;
132}
133
134aside ul li {
135 margin-bottom: 10px;
136}
137
138aside ul li a {
139 color: #3498db;
140 text-decoration: none;
141}
142
143aside ul li a:hover {
144 text-decoration: underline;
145}
146
147/* Footer styles */
148footer {
149 text-align: center;
150 padding: 20px;
151 background-color: #333;
152 color: white;
153 margin-top: 20px;
154}
155
156footer p {
157 margin: 5px 0;
158}
159
160footer a {
161 color: #3498db;
162 text-decoration: none;
163}
164
165footer a:hover {
166 text-decoration: underline;
167}
168
169/* Responsive design */
170@media (max-width: 768px) {
171 main {
172 flex-direction: column;
173 }
174
175 aside {
176 margin-left: 0;
177 }
178}您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。