从零开始学前端：HTML篇

更新时间： 2024-11-21

作者： Shawn求索之旅

什么是 HTML？

HTML（HyperText Markup Language）即超文本标记语言，是用于创建网页的标记语言。它是一门基于 XML 的标记语言，由一系列标签（tags）组成，用于描述网页的内容、结构、样式、行为。

HTML 的主要作用是用来定义网页的结构、内容、样式、行为，并通过浏览器渲染成网页。

HTML 的基本语法

HTML 的基本语法包括：

标签：HTML 标签是由尖括号包围的关键字，用于定义网页的结构、内容、样式、行为。
属性：标签可以拥有属性，属性是标签的附加信息，用于设置标签的各种属性。
实体引用：HTML 中有一些字符是有特殊含义的，比如 < 和 > ，这些字符需要用实体引用来表示。
注释：HTML 中可以添加注释，注释是对代码的说明，不会被浏览器渲染。

HTML 的标签

HTML 标签分为以下几类：

块级标签：块级标签会独占一行，并在前后都有空白。常见的块级标签有 div、p、h1~h6、ul、ol、li、table、form 等。
内联标签：内联标签不会独占一行，只在标签所在行内显示。常见的内联标签有 a、span、img、input、label、select、button 等。
空标签：空标签是指没有内容的标签,只有开始标签没有结束标签。常见的空标签有：br、img等标签。

HTML 的属性

HTML 标签可以拥有属性，属性是标签的附加信息，用于设置标签的各种属性。常见的属性有：

class：class 属性用于给标签添加类别，可以让 CSS 样式作用于该标签。
id：id 属性用于给标签添加唯一标识，可以用于 JavaScript、CSS 等。
style：style 属性用于给标签添加 CSS 样式。
title：title 属性用于给标签添加提示信息。
href：href 属性用于指定超链接的链接地址。
src：src 属性用于指定引入外部资源的地址。

HTML 的实体引用

HTML 中有一些字符是有特殊含义的，比如 < 和 > ，这些字符需要用实体引用来表示。常见的实体引用有：

<：表示小于号。
>：表示大于号。
&：表示和号。
"：表示双引号。
'：表示单引号。

HTML 的注释

HTML 中可以添加注释，注释是对代码的说明，不会被浏览器渲染。

 ：注释内容会被浏览器忽略。

HTML 文档结构

HTML 文档结构包括： <!DOCTYPE>、<html>、<head>、<body> 等标签。

<!DOCTYPE> 标签： <!DOCTYPE> 标签是 HTML 文档的类型声明，必须在 HTML 文档的第一行，用于告诉浏览器使用哪种 HTML 版本。
<html> 标签： <html> 标签是 HTML 文档的根元素，包含了整个 HTML 文档的结构。
<head> 标签： <head> 标签包含了文档的元信息，比如文档的标题、描述、关键字、作者、和其他的元数据。
<body> 标签： <body> 标签包含了文档的主要内容，比如文本、图片、视频、音频、表单、链接等。

// 声明使用 HTML5
<!DOCTYPE html>
<html>
  <head>
    <title>从0开始学前端：HTML篇</title>
  </head>
  <body>
    <h1>从0开始学前端：HTML篇</h1>
    <p>
      HTML（HyperText Markup
      Language）即超文本标记语言，是用于创建网页的标记语言。
    </p>
  </body>
</html>

HTML 文档的编码

HTML 文档的编码是指文档中使用的字符编码，通常使用 UTF-8 编码。

<meta charset="UTF-8" />

常用 HTML 标签

<style>：样式标签，用于定义 CSS 样式。
<script>：脚本标签，用于定义 JavaScript 代码。
<meta>：元数据标签，用于定义网页的元信息。
<title>：标题标签，用于定义网页的标题。
<head>：头部标签，用于定义网页的头部信息。
<body>：主体标签，用于定义网页的主要内容。
<a>：锚点链接，用于跳转到指定位置。
<img>：图片标签，用于插入图片。
<input>：输入框标签，用于输入文本、数字、日期等。
<button>：按钮标签，用于触发 JavaScript 代码。
<select>：下拉框标签，用于选择选项。
<option>：选项标签，用于选择下拉框中的选项。
<span>：行内标签，用于在一行内显示文本。
<div>：块级标签，用于创建块级元素。
<form>：表单标签，用于创建表单。
<iframe>：内嵌框架标签，用于创建内嵌框架。
<canvas>：画布标签，用于创建图形。
<svg>：矢量图标签，用于创建矢量图。
<audio>：音频标签，用于播放音频。
<video>：视频标签，用于播放视频。

总结

本文介绍了 HTML 文档的基本语法、标签、属性、实体引用、注释等，并介绍了常用的 HTML 标签。希望对你有所帮助。

参考资料

MDN HTML 文档