Web前端入门第 6 问：HTML 的基础语法结构

HTML的全称为超文本标记语言（HyperText Markup Language），基础语法结构由标签、元素、属性和内容组成，遵循层级嵌套的树形结构。

关键语法规则

标签（Tags）

  1. 双标签语法

标签成对出现，由一个开始标签和结束标签组成。如：

<div></div>
  1. 单标签语法

标签只有开始标签，没有结束标签。如：

<img >
<br >
<br />

html5 规范允许 <br /> 写作 <br>，两种写法都是正确的。

元素（Elements）

由开始标签、内容和结束标签组成。如：

<p>这是段落内容</p>

属性（Attributes）

位于开始标签内，格式为 name="value"。

常见属性：

id：唯一标识符，如：

<div id="header"></div>

class：定义 CSS 类，如：

<p class="text-red">段落</p>

href：链接地址，如：

<a href="https://example.com">链接</a>

src：资源路径，如：

<img src="image.jpg">

注释

语法：<!-- 注释内容 -->，不会在页面显示，用于说明代码。如：

<!-- 引入一个静态图片，广告banner图 -->
<img src="image.jpg">

嵌套规则

元素必须正确嵌套，禁止交叉。

正确示例：

<div>
  <p>段落1</p>
  <img src="image.jpg">
  <p>段落2</p>
</div>

错误示例：

<p>段落1 <div> </p>
<p>段落2</p> </div>

div 标签与 p 标签交叉，此类语法是错误的，浏览器会自我修正，会导致文档结构显示异常！！

代码规范建议

  1. 缩进使用 2 或 4 个空格，保持层级清晰。

  2. 属性值始终用双引号包裹。

  3. 自闭合标签无需斜杠（HTML5 规范），如 <img src="...">。

HTML 基础文档结构

<!-- 声明文档类型为 HTML5 -->
<!DOCTYPE html>
<!-- 根元素，lang 属性定义语言 -->
<html lang="zh-CN">
  <head>
    <!-- 字符编码 -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- 显示在浏览器标签页 -->
    <title>页面标题</title>
    <!-- 引入外部 CSS -->
    <link rel="stylesheet" href="style.css">
    <!-- 引入 JavaScript -->
    <script src="script.js"></script>
  </head>
  <body>
    <!-- 页面可见内容 -->
    <h1>一级标题</h1>
    <p>这是一个段落。</p>
  </body>
</html>
posted @ 2025-02-28 13:43  前端路引  阅读(376)  评论(0)    收藏  举报