HTML 基本结构

HTML 基本结构

HTML(超文本标记语言)的基本结构由以下几个关键部分组成,这些部分定义了网页的框架和内容。

复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 网页内容 -->
</body>
</html>

文档类型声明

<!DOCTYPE html> 是文档类型声明,告诉浏览器使用的是 HTML5 标准。它必须放在文档的最前面。

HTML 根元素

<html> 是 HTML 文档的根元素,包含整个网页的内容。lang 属性用于指定文档的语言,例如 en 表示英语。

头部部分

<head> 包含网页的元信息,如字符集、视口设置、标题等。这些内容不会直接显示在网页上。

  • <meta charset="UTF-8"> 指定文档的字符编码为 UTF-8,确保正确显示多语言字符。
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> 确保网页在不同设备上正确显示。
  • <title> 定义网页的标题,显示在浏览器的标题栏或标签页上。

主体部分

<body> 包含网页的可见内容,如文本、图片、链接等。所有用户看到的内容都放在这里。

注释

<!-- 注释内容 --> 用于在 HTML 中插入注释,注释不会显示在网页上,仅供开发者参考。

示例

以下是一个完整的 HTML 基本结构示例:

复制代码
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>我的网页</title>
</head>
<body>
    <h1>欢迎来到我的网页</h1>
    <p>这是一个简单的 HTML 示例。</p>
</body>
</html>
相关推荐
叶玳言2 小时前
【LVGL】从HTML到LVGL:嵌入式UI的设计迁移与落地实践
前端·ui·html·移植
Gazer_S2 小时前
【Element Plus 表单组件样式统一 & CSS 文字特效实现指南】
前端·css·vue.js
一只小阿乐2 小时前
Html重绘和重排
前端·html
_Rookie._2 小时前
vue3 使用css变量
前端·javascript·html
杨超越luckly2 小时前
HTML应用指南:利用GET请求获取全国招商银行网点位置信息
前端·arcgis·信息可视化·html·银行网点
蔗理苦2 小时前
2025-09-04 HTML3——区块布局与表单
前端·css·html
GIS之路3 小时前
GDAL 开发起步
前端
被巨款砸中3 小时前
前端视角下的 Web 安全攻防:XSS、CSRF、DDoS 一次看懂
前端·安全·xss
excel4 小时前
CSS 里的斜杠 /:你可能忽略的小细节
前端