html标签与文档结构

HTML 标签与文档结构

HTML 标签

基本概念

  • HTML 全称是 HyperText Markup Language，中文叫超文本标记语言。
  • HTML 通过一系列的标签，也叫元素，来定义文本、图像、链接等页面内容。
  • HTML 标签通常由尖括号包围，例如 <p>、<h1>、<a>。

双标签

  • 双标签由开始标签和结束标签组成，内容写在两个标签之间。
1
2
3
<p>这是一个段落。</p>
<h1>这是一个标题。</h1>
<a href="#">这是一个超链接。</a>

单标签

  • 单标签通常用于没有内容的元素，只有一个标签本身。
1
2
3
<input type="text">
<br>
<hr>

单标签和双标签的区别

  • 双标签用于有内容的元素。
  • 单标签用于没有内容的元素。

知识点总结

  • HTML 的本质是使用标签来描述页面结构和内容。
  • 常见页面内容如标题、段落、链接、输入框等，都是通过不同标签实现的。
  • 学习 HTML 时要先理解标签的作用，再记住常见标签的使用方式。

复习表达

HTML 是超文本标记语言，主要用于描述网页的结构和内容。它通过一系列标签来定义页面中的标题、段落、图片、链接等元素。标签分为双标签和单标签，双标签一般用于包含内容的元素，单标签一般用于没有内容的元素。

HTML 文件结构

标准结构

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<!DOCTYPE html>
<html>
  <head>
    <title>文档标题</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
  </head>
  <body>
    <h1>这是一个标题</h1>
    <p>这是一个段落。</p>
    <a href="https://www.example.com">这是一个链接</a>
  </body>
</html>

结构说明

  • <!DOCTYPE html>：声明当前文档是 HTML5 文档。
  • <html>：整个 HTML 文档的根节点，是文档的起始点。
  • <head>：用于放置文档元信息，比如标题、字符编码、样式文件、脚本文件等。
  • <title>：设置网页标题，通常显示在浏览器标签页上。
  • <meta charset="UTF-8">：设置文档字符编码，避免中文乱码。
  • <link>：用于引入外部 CSS 文件。
  • <script>：用于引入外部 JavaScript 文件。
  • <body>：用于放置页面真正显示在浏览器中的内容。

知识点总结

  • 一个完整的 HTML 页面通常由 DOCTYPE、html、head 和 body 组成。
  • head 主要放配置信息和资源引用。
  • body 主要放用户最终能看到的页面内容。

复习表达

一个标准的 HTML 文档通常包含 <!DOCTYPE html>、html、head 和 body 几个核心部分。head 主要存放页面元信息、标题以及外部 CSS 和 JavaScript 文件的引入，body 中存放的是最终显示在浏览器页面中的内容。