返回

HTML基础知识回炉重造

前端

HTML 的基本组成

HTML是由标签组成的，标签用来告诉浏览器，如何处理这段代码。标签的内容就是浏览器所要渲染的、展示在网页上的内容。例如，下面的代码创建一个

<h1>标题</h1>

浏览器会把这个代码解析成一个标题元素，并把它显示在网页上。

标签

标签是由尖括号包裹的单词，例如：

<h1>标题</h1>

在这个例子中，<h1> 和 </h1> 是标签。

标签可以包含属性，属性用来告诉浏览器，如何处理这个标签。例如，下面的代码创建一个红色

<h1 style="color: red;">标题</h1>

在这个例子中，style="color: red;" 是一个属性，它告诉浏览器，要把标题显示成红色。

元素

浏览器会把HTML源码解析为一颗树，每个标签都是一个节点，并依一定的规则依次向下排列。我们把这个树状结构称为元素。

元素可以包含其他元素，例如，下面的代码创建一个段落，里面包含一个标题和一个列表：

<p>
  <h1>标题</h1>
  <ul>
    <li>项目 1</li>
    <li>项目 2</li>
  </ul>
</p>

在这个例子中，<p> 元素包含了 <h1> 元素和 <ul> 元素。

属性

标签可以包含属性，属性用来告诉浏览器，如何处理这个标签。

属性由名称和值组成，例如，下面的代码创建一个红色

<h1 style="color: red;">标题</h1>

在这个例子中，style 是属性的名称，color: red; 是属性的值。

结构

HTML元素可以按照一定的规则依次向下排列，形成一个树状结构。

树状结构的根节点是 <html> 元素，<html> 元素包含了 <head> 元素和 <body> 元素。<head> 元素包含了网页的元数据，例如标题和。<body> 元素包含了网页的内容，例如文本、图片和视频。

语法

HTML有自己的语法规则，这些规则规定了标签和属性的用法。

例如，HTML标签必须成对出现，例如：

<h1>标题</h1>

在这个例子中，<h1> 和 </h1> 是成对出现的。

HTML属性必须写在标签的开头，例如：

<h1 style="color: red;">标题</h1>

在这个例子中，style="color: red;" 是写在 <h1> 标签的开头的。

学习掌握了 HTML 的语法规则，就能正确编写 HTML 代码，从而构建出我们想要展现的内容。