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>
相关推荐
一只小风华~5 分钟前
Vue Router 命名路由学习笔记
前端·javascript·vue.js·笔记·学习·ecmascript
我是华为OD~HR~栗栗呀9 分钟前
前端面经-高级开发(华为od)
java·前端·后端·python·华为od·华为·面试
超级大只老咪39 分钟前
HTML学习路线
前端·学习·html
゜ eVer ㄨ41 分钟前
React学习第三天——生命周期
前端·学习·react.js
摆烂且佛系43 分钟前
CSS元素的总宽度计算规则
前端·css
对岸住着星星1 小时前
vue3+ts实现拖拽缩放,全屏
前端·javascript
aesthetician1 小时前
@tanstack/react-query:React 服务器状态管理与数据同步解决方案
服务器·前端·react.js
Nan_Shu_6141 小时前
学习:uniapp全栈微信小程序vue3后台(28)
前端·学习·微信小程序·小程序·uni-app
珍宝商店2 小时前
原生 JavaScript 方法实战指南
开发语言·前端·javascript
蓝莓味的口香糖2 小时前
【企业微信】VUE项目在企微中自定义转发内容
前端·vue.js·企业微信