HTML_Notes

HTML 入门

Resources：

HTML 语言简介 - HTML 教程 - 网道

W3School TIY Editor

概述

HTML是网页使用的语言，定义了网页的结构和内容，是一种标签语言。浏览器访问网站相当于从服务器下载HTML代码，然后渲染出网页。

浏览器的网页开发，涉及三种技术：HTML、CSS 和 JavaScript。HTML 语言定义网页的结构和内容，CSS 样式表定义网页的样式，JavaScript 语言定义网页与用户的互动行为（交互）。

hello world

1
2
3
4
5
6
7
8
9
10
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title>网页标题</title>
</head>
<body>
  <p>Hello World</p>
</body>
</html>

打开就会看到Hello World

网页的基本概念

标签

作为一门标签语言，学习HTML就是学习各种标签的用法

标签大多是成对出现的，比如<title>和</title>，前者为开始标签，后者为结束标签；单独使用的标签：如<meta>标签，用于提示浏览器，做一些特别处理，并不需要使用到标签之间的内容。

标签用于指示浏览器如何处理这段代码，如何渲染

标签可以嵌套，但要正确嵌套，闭合顺序和括号是类似的，不能跨层嵌套

  • 正确：<div><p>hello world</p></div>

HTML标签名对大小写不敏感，习惯上使用小写，同时HTML语言忽略缩进与换行。

  • 下面三种情况都是一样的：
1
2
3
4
5
6
7
8
<title>网页标题</title>

<title>
  网页标题
</title>

<title>网页
标题</title>

元素

浏览器渲染网页时，会把 HTML 源码解析成一个标签树，每个标签都是树的一个节点，这种节点就称为网页元素。比如<p>标签对应网页的p元素

嵌套的标签构成了网页元素的层级关系。

块集元素、行内元素

块级元素默认占据一个独立的区域，在网页上会自动另起一行，占据 100% 的宽度。

1
2
<p>hello</p>
<p>world</p>

p元素是会计元素，所以浏览器会将内容分成两行显示

行内元素默认与其他元素在同一行，不产生换行。比如，span就是行内元素，通常用来为某些文字指定特别的样式。

1
2
<span>hello</span>
<span>world</span>

span元素是行内元素，因此浏览器会将两行内容放在一行显示

属性

属性是标签的额外信息，使用空格与标签名和其他属性分隔

属性可以用=指定属性值，比如 <img src="demo.jpg" width="500">；属性值一般放在双引号里面，这不是必须的，但推荐使用

属性名对大小写不敏感

网页的基本标签

基本结构：

1
2
3
4
5
6
7
8
9
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8">
  <title></title>
</head>
<body>
</body>
</html>

<!doctype>

网页的第一个标签通常是<!doctype>，表示文档类型，告诉浏览器如何解析网页。

一般来说，只要像下面这样，简单声明doctype为html即可。浏览器就会按照 HTML 5 的规则处理网页。

1
<!doctype html>

或

1
<!DOCTYPE html>

<html>

这个标签是网页的顶层容器，即标签树结构的顶层节点，也称为根元素，其他元素都是它的子元素。一个网页只能有一个 html标签

该标签的 lang 属性表示网页内容默认的语言

1
<html lang="zh-CN">

<head>

<head>标签是一个容器标签，用于放置网页的元信息。它的内容不会出现在网页上，而是为网页渲染提供额外信息。

  • 在爬虫时我们也需要使用到head，将自己伪装成真实的浏览器

<head>是<html>的第一个子元素。如果网页不包含<head>，浏览器会自动创建一个。

<head>的子元素一般有下面七个，后文会一一介绍。

  • <meta>：设置网页的元数据。
  • <link>：连接外部样式表。
  • <title>：设置网页标题。
  • <style>：放置内嵌的样式表。
  • <script>：引入脚本。
  • <noscript>：浏览器不支持脚本时，所要显示的内容。
  • <base>：设置网页内部相对 URL 的计算基准。

<meta>

<meta>标签用于设置或说明网页的元数据，必须放在<head>里面。一个<meta>标签就是一项元数据，网页可以有多个<meta>。

不管什么样的网页，一般都可以放置下面两个 <meta>标签

1
2
3
4
5
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Page Title</title>
</head>

第一个<meta>标签表示网页采用 UTF-8 格式编码，第二个<meta>标签表示网页在手机端可以自动缩放。

标签属性

（1）charset 属性：

  • 用来指定网页的编码方式，防止乱码

（2）name 属性，content 属性：

  • name属性表示元数据的名字， content属性表示元数据的值；合在一起使用可以为网页指定一项元数据
1
2
3
4
5
<head>
  <meta name="description" content="HTML 语言入门">
  <meta name="keywords" content="HTML,教程">
  <meta name="author" content="张三">
</head>
值 描述
application-name 规定页面代表的 Web 应用程序的名称。
author 规定文档作者的姓名。例如：
description 规定页面的描述。搜索引擎可以选择此描述来显示搜索结果。例如：
generator 规定用于生成文档的软件包之一（不用于手写页面）。例如：
keywords 规定与页面相关的关键字列表，以逗号分隔。告知搜索引擎关于页面的内容。**提示：**请始终规定关键字（搜索引擎需要对页面进行分类）。例如：
viewport 控制视口（网页的用户可见区域）。

（3）http-equiv 属性，content 属性：

<meta>标签的http-equiv属性用来补充 HTTP 回应的头信息字段，如果服务器发回的HTTP回应缺少某个字段，就可以用它来补充。

<title>

<title>标签用于指定网页的标题，会显示在浏览器窗口的标题栏。

<title>标签内部不能嵌套标签，只能放置无格式的纯文本

<body>

<body>标签是一个容器标签，用于放置网页的主体内容；浏览器显示的页面内容，都放置在它的内部

1
2
3
4
5
6
7
8
<html>
  <head>
    <title>网页标题</title>
  </head>
  <body>
    <p>hello world</p>
  </body>
</html>

空格和换行

HTML 语言有自己的空格处理规则。标签内容的头部和尾部的空格，一律忽略不计。

1
<p>  hello world   </p>

=>这个只会显示成 hello world而非 hello world

标签内容里面的多个连续空格（包含制表符\t），会被浏览器合并成一个。

1
<p>hello      world</p>

=>只会显示成 hello world而非 hello world

还会将文本中的换行符 \n和回车符 \t替换成空格，如果文本之间有多个换行，会替换成空格，然后多个空格会合并为一个空格。

1
2
3
4
5
6
<p>hello



world
</p>

=>只会显示成 hello world

注释

注释以<!--开头，以-->结尾，注释可以是多行的。

例子：

1
2
3
4
5
<!-- 这是一个注释 -->

<!--
  <p>这是一个注释</p>
-->

URL简介

URL 是“统一资源定位符”（Uniform Resource Locator）的首字母缩写，中文是“网址”

协议

浏览器请求服务器资源的方法，如HTTPS协议

HTTPS是HTTP的加密版本，每个协议的格式不同，https后面会加 ://，但邮件协议mailto的协议后面只有一个冒号，eg：mailto:foo@example.com

主机

主机host是资源所在的网站名或服务器的名字，又称为域名。

有些主机没有域名，只有ip地址–局域网常常出现

端口

同一个域名下面可能同时包含多个网站，他们通过端口port区分

HTTP 协议的默认端口是80，如果省略了这个参数，服务器就会返回80端口的网站。

端口紧跟在域名后面，两者之间使用冒号分隔，比如www.example.com:80

路径

路径（path）是资源在网站的位置。

比如https://pqcu77.github.io/index.html指向了博客路径下的index.html文件。现在由于服务器可能模拟这些位置，所以路径只是虚拟位置

路径可能只包含目录，不包含文件名，在不同的服务器设置下，服务器可能会默认跳转到该目录下的文件中。

查询参数

查询参数是提供给服务器的额外信息，参数位置是在路径后面，两者之间使用 ? 分隔，查询参数可以有一组或者多组，每组参数都是键值对的形式，键值对之间用等号=连接，多组参数之间使用&连接

如：?key1=value1&key2=value2

锚点

锚点是网页内部的定位点，使用#加上锚点名称，放在网址的最后。例子：https://pqcu77.github.io/2025/03/06/cs50-ai-Machine-Learning/#Project

浏览器加载页面以后，会自动滚动到锚点所在的位置，锚点名称通过网页元素id属性命名

image-20250316164425053

图中你可以看到有多个id属性

URL字符

URL 的各个组成部分，只能使用以下这些字符。

  • 26个英语字母（包括大写和小写）
  • 10个阿拉伯数字
  • 连词号（-）
  • 句点（.）
  • 下划线（_）

还有18个字符属于URL的保留字符，只能在给定的位置出现。比如查询参数的?

如果要使用他们，需要使用转义字符，对应方式是：在这些字符的十六进制ASCII码前面加上百分号%。

  • !：%21

  • #：%23

  • $：%24

  • &：%26

  • '：%27

  • (：%28

  • )：%29

  • *：%2A

  • +：%2B

  • ,：%2C

  • /：%2F

  • :：%3A

  • ;：%3B

  • =：%3D

  • ?：%3F

  • @：%40

  • [：%5B

  • ]：%5D

  • 空格的转义形式是 %20

既不属于合法字符、也不属于保留字符的其他字符（比如汉字），理论上不需要手动转义，可以直接写在 URL 里面，比如www.example.com/中国.html，浏览器会自动将它们转义，发给服务器。转义方法是使用这些字符的十六进制 UTF-8 编码，每两位算作一组，然后每组头部添加百分号（%）。

绝对URL和相对URL

绝对URL：带有资源的完整信息，包含协议、主机、路径等部分

相对URL：不包含资源位置的全部信息，必须结合当前网页的位置，才能定位资源。

URL 还可以使用两个特殊简写，表示特定位置。

  • .：表示当前目录，比如./a.html（当前目录下的a.html文件）
  • ..：表示上级目录，比如../a.html（上级目录下的a.html文件）

<base>标签

指定网页内部的所有相对URL的计算基准，整张网页只能有一个<base>标签

网页元素的属性

网页元素的属性（attribute）可以定制元素的行为，不同的属性会导致元素有不同的行为。

属性名也对大小写不敏感

全局属性：所有元素都可以使用

  • 但有些属性对某些元素可能不产生意义

id

  • id属性是元素在网页内的唯一标识符
学习笔记 > HTML
#学习笔记 #HTML
HTML_Notes
https://pqcu77.github.io/2025/03/16/HTML-Notes/
作者
linqt
发布于
2025年3月16日
许可协议