HTML骨架标签

最新推荐文章于 2026-05-17 11:34:17 发布

原创最新推荐文章于 2026-05-17 11:34:17 发布 · 468 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#html #前端

前端三大件学习专栏收录该内容

7 篇文章

订阅专栏

# 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>：声明文档类型（非标签，但必须存在）

<html>：根容器

<head>：元数据容器（不可见）

<body>：页面内容容器（可见）


**<font color="red" size="6">共同特性：</font>**
- **唯一性**
- **位置有严格要求** 

<hr>

# <font color="purple">\<!DOCTYPE\></font>
- **<font color="purple">作用：</font>** **声明文档的标准**`（使用的是那种HTML标准,eg:html5）`和 **触发标准模式**`（确保浏览器以标准模式（而非怪异模式））`
- **<font color="purple">要求：</font>** **必须放在第一位**
- **<font color="purple">格式:</font>**
    - \<!DOCTYPE\>:独属于 HTML5.0 文档的声明，
    - 其他版本格式举例：\<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"\>
-  **<font color="purple">包含内容:</font>**
    - 只有\<html\>标签
<br><br><hr>





# <font color="purple">\<html\></font>
-  **<font color="purple">作用：</font>** **HTML 文档的根标签,是所有 HTML 元素的容器** 和 **定义文档类型`（没错，这个标签才标识文档是HTML的，而不是<!DOCTYPE>）`**
-  **<font color="purple">要求：</font>** **必须包含在 \<!DOCTYPE\> 声明之后。** 和 **必须包含 \<head\> 和 \<body\> 两个主要部分**
- **<font color="purple">格式:</font>**
    - 标签声明里可以有属性(eg:\<html lang="en"\>)
    - lang 属性（指定文档支持的自然语言）、xmlns 属性（指定 XML 命名空间）
        - 多语言声明规范：只能声明一个主语言，多个语言代码用逗号分隔无效;
        - 混合语言：在具体容器上用lang属性局部覆盖/如果需要全局中英文智能切换，用JS动态修改lang属性
        - 切换文章语言，可以选择两个不同语言的HTML，根据用户的请求，选择对应语言的HTML展示
-  **<font color="purple">包含内容:</font>**
    - 只有\<head\> + \<body\>两个并列标签
<br><br><hr>







# <font color="purple">\<head\></font>
-  **<font color="purple">作用：</font>** **定义 HTML 文档的头部（元数据容器），不直接显示在页面内容中**
-  **<font color="purple">要求：</font>** **位于 \<html\> 标签的开始标签和 \<body\> 标签的开始标签之间。**
-  **<font color="purple">格式:</font>**
    - 位于 \<html\> 标签内部且必须是其第一个直接子元素
    - 唯一性：每个 HTML 文档只能有一个 \<head\>
-  **<font color="purple">包含内容:</font>**
    - 字符集声明 (\<meta charset\>)
    - 标题 (\<title\>)
    - 样式表 (\<style\> 或 \<link rel="stylesheet"\>)
    - 脚本 (\<script\>)
    - SEO 元信息 (如 \<meta name="description"\>)
    - 视口设置 (移动端适配)
<br><br><hr>







# <font color="purple">\<body\></font>
-  **<font color="purple">作用：</font>** **HTML 文档中所有可见内容的容器，是网页实际展示部分的核心载体**
-  **<font color="purple">要求：</font>** **\<html\> 标签内部，紧接在 \<head\> 标签之后**
-  **<font color="purple">格式:</font>**
    - **必须是 <html> 的第二个子元素（紧接在 <head> 之后）**
    - **唯一性：每个文档只能有一个 <body>**
-  **<font color="purple">包含内容:</font>**
    - 文本内容

各自又包含的标签（特指<head><body>：

# <font color="red" size="6">最基本标签</font>
```
<!DOCTYPE html>：声明文档类型（非标签，但必须存在）

<html>：根容器

<head>：元数据容器（不可见）

<body>：页面内容容器（可见）
```

**<font color="red" size="4">共同特性：</font>**
- **唯一性**
- **位置有严格要求** 

<hr>

# <font color="purple">\<!DOCTYPE\></font>
- **<font color="green">作用：</font>** **声明文档的标准**`（使用的是那种HTML标准,eg:html5）`和 **触发标准模式**`（确保浏览器以标准模式（而非怪异模式））`
- **<font color="green">要求：</font>** **必须放在第一位**
- **<font color="green">格式:</font>**
    - \<!DOCTYPE\>:独属于 HTML5.0 文档的声明，
    - 其他版本格式举例：\<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"\>
-  **<font color="green">包含内容:</font>**
    - 只有\<html\>标签
<br><br><hr>





# <font color="purple">\<html\></font>
-  **<font color="green">作用：</font>** **HTML 文档的根标签,是所有 HTML 元素的容器** 和 **定义文档类型`（没错，这个标签才标识文档是HTML的，而不是<!DOCTYPE>）`**
-  **<font color="green">要求：</font>** **必须包含在 \<!DOCTYPE\> 声明之后。** 和 **必须包含 \<head\> 和 \<body\> 两个主要部分**
- **<font color="green">格式:</font>**
    - 标签声明里可以有属性(eg:\<html lang="en"\>)
    - lang 属性（指定文档支持的自然语言）、xmlns 属性（指定 XML 命名空间）
        - 多语言声明规范：只能声明一个主语言，多个语言代码用逗号分隔无效;
        - 混合语言：在具体容器上用lang属性局部覆盖/如果需要全局中英文智能切换，用JS动态修改lang属性
        - 切换文章语言，可以选择两个不同语言的HTML，根据用户的请求，选择对应语言的HTML展示
-  **<font color="green">包含内容:</font>**
    - 只有\<head\> + \<body\>两个并列标签
<br><br><hr>







# <font color="purple">\<head\></font>
-  **<font color="green">作用：</font>** **定义 HTML 文档的头部（元数据容器），不直接显示在页面内容中**
-  **<font color="green">要求：</font>** **位于 \<html\> 标签的开始标签和 \<body\> 标签的开始标签之间。**
-  **<font color="green">格式:</font>**
    - 位于 \<html\> 标签内部且必须是其第一个直接子元素
    - 唯一性：每个 HTML 文档只能有一个 \<head\>
-  **<font color="green">包含内容:</font>**
    - 字符集声明 (\<meta charset\>)
    - 标题 (\<title\>)
    - 样式表 (\<style\> 或 \<link rel="stylesheet"\>)
    - 脚本 (\<script\>)
    - SEO 元信息 (如 \<meta name="description"\>)
    - 视口设置 (移动端适配)
<br><br><hr>







# <font color="purple">\<body\></font>
-  **<font color="green">作用：</font>** **HTML 文档中所有可见内容的容器，是网页实际展示部分的核心载体**
-  **<font color="green">要求：</font>** **\<html\> 标签内部，紧接在 \<head\> 标签之后**
-  **<font color="green">格式:</font>**
    - **必须是 <html> 的第二个子元素（紧接在 <head> 之后）**
    - **唯一性：每个文档只能有一个 <body>**
-  **<font color="green">包含内容:</font>**
    - **文本内容**
        （段落：\<p\>、标题：\<h1\>–\<h6\>、引用：\<blockquote\>, \<q\>、预格式化文本：\<pre\>、换行：\<br\>、水平线：\<hr\>）
    - **多媒体**
        （图片：\<img\>、视频：\<video\>、音频：\<audio\>、嵌入内容：\<iframe\>, \<embed\>, \<object\>）
    - **列表**
        （无序列表：\<ul\> + \<li\>、有序列表：\<ol\> + \<li\>、描述列表：\<dl\> + \<dt\>/\<dd\>）
    - **语义化结构**
        （页眉：\<header\>、主内容：\<main\>、页脚：\<footer\>、独立内容块：\<article\>、内容分区：\<section\>、侧边内容：\<aside\>、导航：\<nav\>、图表+说明：\<figure\> + \<figcaption\>）
    - **交互元素**
        （表单：\<form\>、输入控件：\<input\>, \<textarea\>, \<select\>, \<button\>、可折叠内容：\<details\> + \<summary\>、对话框：\<dialog\>）
    - **通用容器**
        （块级容器：\<div\>、行内容器：\<span\>）
    - **特殊内容**
        （脚本：\<script\>、模板：\<template\>、绘图：\<canvas\>、矢量图形：\<svg\>、数学公式：\<math\>）
-  **<font color="purple">注意:</font>**
    **禁止直接放在 \<body\> 的标签**
    - \<html\>, \<head\>, \<meta\>, \<title\>, \<link\>（这些应放在 \<head\> 内）

    - \<colgroup\>, \<caption\>（仅用于 \<table\> 内）