HTML5 语义-html教程-PHP中文网

HTML5 语义示例

示例 #3 –

示例 #4 –

如何在一个示例中实现所有元素代码？

首页

web前端

html教程

HTML5 语义

PHPz

Sep 04, 2024 pm 04:37 PM

html html5 HTML Tutorial HTML Properties HTML tags

HTML5 语义元素具有反映组件类型的重要名称。让我们以表格、页眉、页脚等为例

<导航>

对于 HTML4，开发人员使用自己的 id/类名称来设计元素，例如顶部、页眉、底部、菜单、页脚、主要、导航、材质、对象、顶部导航、侧边栏等。然而，正因为如此，搜索引擎无法识别网页的正确内容。

HTML5 语义示例

现在让我们看一些 HTML5 语义元素的示例：

示例 #1 –

顾名思义，它指的是页面介绍段的标题。一页上可以找到许多标题。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Header Element for the page</title>
<style>
h1, h4 {
Color:#red;
Text-align:centre;
margin-bottom:2px;
}
p {
font-size:23px;
text-align:centre;
margin-top:2px;
}
</style>
</head>
<body>
<article>
<header>
<h1>Educba learning bridge</h1>
<h3>Become a techinal learner with EDUCBA</h3>
<p>Hey the best online training institute in ASIA </p>
</header>
</article>
</body>
</html>

登录后复制

输出：

HTML5 语义

示例 #2 –

导航链接的集合，用于描述导航菜单或导航栏。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Navigation Element</title>
<style>
h1 {
color:#Grey;
}
</style>
</head>
<body>
<h1>Navigation Bar for EduCBA</h1>
<nav>
<a href="https://www.educba.com/">Home</a> |
<a href="https://www.educba.com/data-science/">Data Science</a> |
<a href="https://www.educba.com/software-development/">Software Development</a> |
<a href="https://www.educba.com/design/">Design</a> |
<a href="https://www.educba.com/finance/">Finance</a>
</nav>
</body>
</html>

登录后复制

输出：

HTML5 语义

示例 #3 –

页面可以分为简介、联系方式、详细信息等部分，每个部分都有一个元素。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Have a look for Section Element in EduCBA</title>
<style>
h1 {
color:#Grey;
}
p {
font-size:20px;
text-align:left;
margin-top:2px;
}
</style>
</head>
<body>
<section>
<h1>AWS Tutorials for EduCBA</h1>
<p>Amazon Web Services (AWS) is one of the world's most popular and used cloud services. 175 supported services are available in AWS. </p>
</section>
<section>
<h1>Data Mining</h1>
<p>AThrough technological development such as big data and data science companies around the world have benefited from data mining by recognize opportunities and making their organizations efficient through waste reduction, to achieve their business goals.
</p>
</section>
</body>
</html>

登录后复制

输出：

HTML5 语义

示例 #4 –

此标记元素用于突出显示文本。

代码：

<!DOCTYPE html>
<html>
<head>
<title>EduCBA mark Element</title>
<style>
h2 {
color:#Grey;
}
</style>
</head>
<body>
<h1>How to mark text </h1>
<p> In theory, this method transforms <mark>raw data into valuable information</mark> or insights.</p>
</body>
</html>

登录后复制

输出：

HTML5 语义

示例 #5 –

它是块或段划分的一个方面。它被用作一个包。

代码：

<!DOCTYPE html>
<html>
<head>
<title>div Element</title>
<style>
.edu {
color:#grey;
}
</style>
</head>
<body>
<h1>div Element for educba </h1>
<div class="EduCBA">
<h1>Data Science</h1>
<p>Data analatics computer Science nachine learning </p>
</div>
</body>
</html>

登录后复制

输出：

HTML5 语义

示例 #6 – <详细信息>和

此元素用于定义用户可以查看或隐藏的其他详细信息。
此元素用于定义
的可见标题。元素

实施的计划和

代码：

<!DOCTYPE html>
<html>
<head>
<title>Details for the EduCBA Summery</title>
<style>
.GFG {
Color:#red;
font-size:60px;
Text-align:left;
margin-bottom:0px;
}
p {
font-size:25px;
text-align:left;
margin-top:3px;
}
</style>
</head>
<body>
<details>
<summary class="EDUCBA">Make your Study easily with us</summary>
<p>One of the best Data Science and web portal
where you can learn good skills of programming.
</p>
</details>
</body>
</html>

登录后复制

输出：

HTML5 语义

：
该元素用于指定页面内容之外的内容。
：此元素用于指定时间或日期。
：
该元素用于指定文档的主要内容。

如何在一个示例中实现所有元素代码？

这里我们通过一个示例了解如何实现元素代码。

代码：

<!DOCTYPE html>
<html>
<head>
<title>Header Element for the page</title>
<style>
color:red;
h1, h4 {
Color:#red;
Text-align:centre;
margin-bottom:2px;
}
p {
font-size:20px;
text-align:centre;
margin-top:2px;
}
</style>
</head>
<body style="background-color:LightCyan;">
<article>
<header>
<h1>Educba learning bridge</h1>
<nav>
<a href="https://www.educba.com/">Home</a> |
<a href="https://www.educba.com/data-science/">Data Science</a> |
<a href="https://www.educba.com/software-development/">Software Development</a> |
<a href="https://www.educba.com/design/">Design</a> |
<a href="https://www.educba.com/finance/">Finance</a>
</nav>
<details>
<h3>Become a technicall learner with EDUCBA</h3>
<section>
<h1><mark>AWS Tutorials for EduCBA</mark></h1>
<p>Amazon Web Services (AWS) is one of the world's most popular and used cloud services. 175 supported services are available in AWS. </p>
</section>
<section>
<h1><mark>Data Mining</mark></h1>
<p>Through technological development such as big data and data science companies around the world have benefited from data mining by recognize opportunities and making their organizations efficient through waste reduction, to achieve their business goals.
</p>
</section>
<p><em>EduCBA is the best online training institute in ASIA</em></p>
</details></header>
</article>
</body>
</html>

登录后复制

输出：

HTML5 语义