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>
相关推荐
共享家95276 小时前
搭建 AI 聊天机器人:”我的人生我做主“
前端·javascript·css·python·pycharm·html·状态模式
Halo_tjn7 小时前
基于封装的专项 知识点
java·前端·python·算法
m0_7482299910 小时前
Vue2 vs Vue3:核心差异全解析
前端·javascript·vue.js
C澒10 小时前
前端监控系统的最佳实践
前端·安全·运维开发
xiaoxue..10 小时前
React 手写实现的 KeepAlive 组件
前端·javascript·react.js·面试
hhy_smile10 小时前
Class in Python
java·前端·python
小邓吖11 小时前
自己做了一个工具网站
前端·分布式·后端·中间件·架构·golang
南风知我意95711 小时前
【前端面试2】基础面试(杂项)
前端·面试·职场和发展
LJianK111 小时前
BUG: Uncaught Error: [DecimalError] Invalid argument: .0
前端
No Silver Bullet11 小时前
Nginx 内存不足对Web 应用的影响分析
运维·前端·nginx