当前位置：首页 > news >正文

Web前端：HTML篇（一）

news 2025/12/30 12:20:01

HTML简介：

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。

您可以使用 HTML 来建立自己的 WEB 站点，HTML 运行在浏览器上，由浏览器来解析。

<!DOCTYPE html>
<html><head>
<meta charset="utf-8">
<title>这是页面标题</title>
</head><body>
<h1>这是一个标题</h1>
<p1>这是一个段落。</p1>
</body></html>

如前所述，HTML是一种标记语言，使用各种标签来格式化内容。这些标签被封装在角括号内 <标签名>. 除了一些标签外，大多数标签都有相应的闭合标签。例如， <html> 有其闭合标签 </html> 和 <body> 标签有其闭合标签 </body> 等等。

标签的写法都是

<标签>元素</标签>

上面的HTML文档示例使用了以下标签 −

序号	标签和描述
1	`<!DOCTYPE...>` 此标签定义文档类型和HTML版本。
2	`<html>` 此标签包含完整的HTML文档，主要由文档头部和文档主体组成，文档头部由`<head>...</head>`标签表示，文档主体由`<body>...</body>`标签表示。
3	`<head>` 此标签表示文档的头部，可以包含其他HTML标签，如`<title>，<link>`等。
4	`<title>` `<title>`标签用于在`<head>`标签中指定文档标题。
5	`<body>` 此标签表示文档的主体，包含其他HTML标签，如`<h1>，<div>，<p>`等。
6	`<h1>` 此标签表示标题。
7	`<p>` 此标签表示段落。

大多数 HTML 元素可以嵌套（HTML 元素可以包含其他 HTML 元素）。

HTML 文档由相互嵌套的 HTML 元素构成。

没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。

就是没有关闭标签的空元素（意味着它没有结束标签，因此这是错误的： ）。

在开始标签中添加斜杠，比如 ，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。

注意：请使用   标签来插入换行符，而不是用它来增加段落之间的空白。

<!DOCTYPE>声明有助于浏览器中正确显示网页。

网络上有很多不同的文件，如果能够正确声明HTML的版本，浏览器就能正确显示网页内容。

doctype 声明是不区分大小写的，以下方式均可：

<!DOCTYPE html>

<!DOCTYPE HTML>

<!doctype html>

<!Doctype Html>

目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>
页面标题</title>
</head>
<body><h1>我的第一个标题</h1><p>我的第一个段落。</p></body>
</html>

对于设置 <meta charset="utf-8" /> 后出现网页乱码问题，其实归根到底就是：你通过 meta 标签设置的编码和网页文件在保存时所使用的文档编码不相同造成的！

至于 360 浏览器会设置 GBK 为默认编码，

只要你在 html 文件里写了 <!doctype hmtl>和 <meta charset="utf-8" />，浏览器就绝对会按照 utf-8 编码解析网页，保存 html 文件时，文档编码和 meta 设置的编码，一定要相同，只要不相同，就一定会出现乱码！

之所以一定要写上 <!doctype html>，就是为了防止浏览器的怪异模式，强制浏览器按照标准模式渲染网页！

HTML 标签对大小写不敏感： 等同于 。但在未来 (X)HTML 版本中强制使用小写。（我不知道，搜的），所以最好用小写。