第三章Web开发篇——第1节-HTML快速入门-优快云博客

本文链接：https://blog.youkuaiyun.com/gis_witch/article/details/123636556

本文详细讲解了HTML的基本构成，包括元素和属性的使用，以及标题、段落、div和列表等常见元素的实例。从HTML5规范角度出发，还介绍了语义化的大纲结构，适合初学者快速上手。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1 什么是HTML

HTML(Hyper Text Markup Language): 超文本标记语言

2 HTML的组成

HTML 由一系列的元素 elements 组成, 在元素中包含属性（Attribute）

1) 元素

示例

<p>我的猫咪脾气爆:)</p>

2) 属性

元素中可以包含属性

示例

<p class="editor-note">我的猫咪脾气爆:)</p>

在有些教程里不分元素和标签, 都是混用的. 但是根据 HTML5 的规范, 元素(element)更加准确

参考 MDN 文档: HTML 是何方神圣

3 常见的HTML元素

1) 标题元素 heading

每个元素代表文档中不同级别的内容;

h1 表示主标题（the main heading）
h2 表示二级子标题（subheadings）
h3 表示三级子标题（sub-subheadings）

其基本语法格式如下：

 <h1>标题文本</h1>
 <h2>标题文本</h2>
 <h3>标题文本</h3>
 <h4>标题文本</h4>
 <h5>标题文本</h5>
 <h6>标题文本</h6>

扩展:

HTML语义化大纲算法: http://h5o.github.io

2) 段落元素 p

3) 容器元素div

4) 列表元素ul

示例：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML中的常见元素</title>
  </head>
  <body>
    <!-- Ctrl+/: 注释(给程序员看的, 不会显示在浏览器中) -->

    <!-- 1. 标题元素h1~h6 -->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>

    <!-- 2. div元素(容器元素) -->
    <!-- 属性: key=value -->
    <div id="container"></div>

    <!-- 3. 列表元素 -->
    <!-- 
      ul: unorder list(无序列表) 
      li: list item(列表项)
    -->
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </body>
</html>

戳我领取完整版课程试听：

领取免费GIS开发试听课程https://www.wjx.cn/vj/e68jhwR.aspx