<!DOCTYPE html>
<html>
<head>
<title>HTML 元素示例</title>
</head>
<body>
<!-- 文档类型声明 -->
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
<!-- 根元素 -->
<html> <!-- HTML文档的根元素 -->
<!-- 头部信息 -->
<head> <!-- 包含元数据、标题等信息 -->
<meta charset="UTF-8"> <!-- 定义字符编码 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- 设置视口宽度和缩放比例 -->
<title>页面标题</title> <!-- 网页的标题，显示在浏览器标签上 -->
<link rel="stylesheet" href="styles.css"> <!-- 链接外部样式表 -->
<script src="script.js"></script> <!-- 链接外部JavaScript文件 -->
</head>
<!-- 页面主体 -->
<body> <!-- 包含网页的所有内容 -->
<header> <!-- 通常包含网站的标志、导航栏等 -->
<h1>欢迎来到我的网站</h1> <!-- 一级标题 -->
<nav> <!-- 导航链接 -->
<ul>
<li><a href="#home">首页</a></li>
<li><a href="#about">关于我们</a></li>
<li><a href="#contact">联系我们</a></li>
</ul>
</nav>
</header>
<main> <!-- 页面的主要内容 -->
<section> <!-- 定义文档中的一个区域 -->
<h2>我们的服务</h2>
<p>我们提供各种优质的服务。</p>
</section>
<article> <!-- 定义独立的内容 -->
<h2>最新文章</h2>
<p>这是我们的最新文章。</p>
</article>
</main>
<aside> <!-- 侧边栏，通常用于放置广告或补充信息 -->
<h3>热门文章</h3>
<ul>
<li><a href="#">文章1</a></li>
<li><a href="#">文章2</a></li>
<li><a href="#">文章3</a></li>
</ul>
</aside>
<footer> <!-- 页脚，通常包含版权信息等 -->
<p>© 2023 我的网站</p>
</footer>
</body>
</html><!DOCTYPE html>): 声明文档类型为HTML5。<html>): HTML文档的根元素。<head>): 包含元数据、字符编码、视口设置、标题、外部样式表和JavaScript文件链接等。<body>): 包含网页的所有内容。<header>): 通常包含网站的标志、导航栏等。<nav>): 包含导航链接。<main>): 页面的主要内容。<section>): 定义文档中的一个区域。<article>): 定义独立的内容。<aside>): 通常用于放置广告或补充信息。<footer>): 页脚，通常包含版权信息等。这些是常见的HTML元素及其用途。
上一篇：html注释标签
下一篇：html缩进
Laravel PHP 深圳智简公司。版权所有©2023-2043 LaravelPHP 粤ICP备2021048745号-3
Laravel 中文站