HTML学习笔记[Web开发]_静态页面html笔记-优快云博客

本文链接：https://blog.youkuaiyun.com/Jenlibein/article/details/140547521

HTML学习

本文为学习笔记，参考w3c，菜鸟，Mozilla，尚硅谷等文章编写。

文章目录

HTML 简介

中文名称：超文本标记语言
英语名称：HyperText Markup Language

就其核心而言，HTML 是一种相当简单的、由不同元素组成的**标记语言**，

HTML 是用来描述网页的一种语言。

HTML 不是一种编程语言，而是一种标记语言
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 文档包含了HTML 标签及文本内容
HTML文档也叫做 web 页面
HTML可以被应用于文本片段，使文本在文档中具有不同的含义（它是段落吗？它是项目列表吗？它是表格吗？），将文档结构化为逻辑块（文档是否有头部？有三列内容？有一个导航菜单？），并且可以将图片，影像等内容嵌入到页面中。它可以被应用于文本片段，使文本在文档中具有不同的含义（它是段落吗？它是项目列表吗？它是表格吗？），将文档结构化为逻辑块（文档是否有头部？有三列内容？有一个导航菜单？），并且可以将图片，影像等内容嵌入到页面中。

备注： HTML 标签不区分大小写。也就是说，输入标签时既可以使用大写字母也可以使用小写字母。不过，从一致性、可读性来说，最好仅使用小写字母。

**注意:**HTML中不支持空格、回车、制表符，它们都会被解析成一个空白字符。

<!DOCTYPE html>是 HTML5 标准网页声明，全称为 Document Type HyperText Mark-up Language，是一条标示语言。支持 HTML5 标准的主流浏览器都认识这个声明。表示网页采用 HTML5，<!DOCTYPE html>

HTML文档的后缀名

.html
.htm

htm 与 html 的区别

前者是超文本标记(Hypertext Markup)，后者是超文本标记语言(Hypertext Markup Language)

可以说 htm = html。这两种都是静态网页文件的扩展名，扩展名可以互相更换而不会引起错误

两种后缀出现的原因

htm 是来源于老的 8.3 文件格式，DOS 操作系统只能支持长度为三位的后缀名，所以是 htm,但在 windows 下无所谓 HTM 与 HTML，html 是为长文件名的格式命名的。所以 htm 是为了兼容过去的DOS命名格式存在的，在效果上没有区别的。以前 htm 和 html 作为不同的服务器上的超文本文件，但现在通用。

HTML版本

从初期的网络诞生后，已经出现了许多HTML版本:

版本	发布时间
HTML	1991
HTML+	1993
HTML 2.0	1995
HTML 3.2	1997
HTML 4.01	1999
XHTML 1.0	2000
HTML5	2012
XHTML5	2013

HTML 编辑器

推荐使用
- Visual Studio Code（简称 VS Code）
相关插件
- Live Server / Live Preview : 实时预览
- Fitten Code : HTML AI 编程助手

HTML 标签 (HTML Tag)

HTML标签是由 尖括号 包围的关键词，比如 <html>
HTML标签通常是 成对出现的，比如 <b> 和 </b>

HTML 提示：使用小写标签

HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。

万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。

HTML 标签简写及全称

下表列出了 HTML 标签简写及全称：

标签	英文全称	中文说明
a	Anchor	锚：使被标签包裹的内容成为一个超链接
abbr	Abbreviation	缩写词
acronym	Acronym	取首字母的缩写词
address	Address	地址
alt	alter	替用(一般是图片显示不出的提示)
b	Bold	粗体（文本）
bdo	Bi-Directional Override	文本显示方向
big	Big	变大（文本）
blockquote	Block Quotation	区块引用语
br	Break	换行
cell	cell	巢
cellpadding	cellpadding	巢补白
cellspacing	cellspacing	巢空间
center	Centered	居中（文本）
cite	Citation	引用
code	Code	源代码（文本）
dd	Definition Description	定义描述
del	Deleted	删除（的文本）
dfn	Defines a Definition Term	定义定义条目
div	Division	分隔
dl	Definition List	定义列表
dt	Definition Term	定义术语
em	Emphasized	加重（文本）
font	Font	字体
h1~h6	Header 1 to Header 6	标题1到标题6
hr	Horizontal Rule	水平尺
href	hypertext reference	超文本引用
i	Italic	斜体（文本）
iframe	Inline frame	定义内联框架
ins	Inserted	插入（的文本）
kbd	Keyboard	键盘（文本）
li	List Item	列表项目
nl	navigation lists	导航列表
ol	Ordered List	排序列表
optgroup	Option group	定义选项组
p	Paragraph	段落
pre	Preformatted	预定义格式（文本）
q	Quotation	引用语
rel	Reload	加载
s/ strike	Strikethrough	删除线
samp	Sample	示例（文本
small	Small	变小（文本）
span	Span	范围
src	Source	源文件链接
strong	Strong	加重（文本）
sub	Subscripted	下标（文本）
sup	Superscripted	上标（文本）
td	table data cell	表格中的一个单元格
th	table header cell	表格中的表头
tr	table row	表格中的一行
tt	Teletype	打印机（文本）
u	Underlined	下划线（文本）
ul	Unordered List	不排序列表
var	Variable	变量（文本）

HTML 元素

HTML元素组成

HTML 元素以开始标签起始，以结束标签终止
在这里插入图片描述

整个元素即指 开始标签、内容、结束标签 三部分组成的整体。

开始标签（Opening tag）：包含元素的名称（本例为 p），被左、右角括号所包围。开头标签标志着元素开始或开始生效的地方。在这个示例中，它在段落文本的开始之前。
内容（Content）：元素的内容是开始标签与结束标签之间的内容，本例中就是段落的文本。
结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这标志着该元素的结束。没有包含关闭标签是一个常见的初学者错误，它可能会产生奇特的结果。
开始和结束标签也被称为 开放标签 和 闭合标签

嵌套元素

你也可以把元素放到其他元素之中——这被称作嵌套。

正确例：

<p>My cat is <strong>very</strong> grumpy.</p>

错误例：

<p>My cat is <strong>very grumpy.</p></strong>

你需要确保元素被正确的嵌套：在上面的例子中我们先打开 p 元素，然后才打开 strong 元素，因此必须先将 strong 元素关闭，然后再去关闭 p 元素。

所有的元素都需要正确的打开和关闭，这样才能按你所想的方式展现。由于上述示例中的那种重叠，浏览器不得不猜测你的意图。这种猜测可能会导致意想不到的结果。

块级元素和内联元素

在 HTML 中有两种你需要知道的重要元素类别，块级元素 和 内联元素。

块级元素在页面中以块的形式展现。一个块级元素出现在它前面的内容之后的新行上。任何跟在块级元素后面的内容也会出现在新的行上。块级元素通常是页面上的结构元素。例如，一个块级元素可能代表标题、段落、列表、导航菜单或页脚。一个块级元素不会嵌套在一个内联元素里面，但它可能嵌套在另一个块级元素里面。
内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行。它通常与文本一起使用。
例如，<a> 元素创建一个超链接，<em> 和 <strong> 等元素创建强调。

考虑如下示例：

<em>第一</em><em>第二</em><em>第三</em>

<p>第四</p>
<p>第五</p>
<p>第六</p>

在这里插入图片描述

<em> 是一个块级元素，所以第二行代码中的每个 p 元素分别都另起了新的一行展现，并且每个段落间都有一些间隔（这是因为默认的浏览器有着展示 <p> 元素的默认 CSS 样式 ）。

备注： HTML5 重新定义了元素的类别：见元素内容分类。尽管这些新的定义更精确，但却比上述的“块级元素”和“内联元素”更难理解，因此在之后的讨论中仍使用旧的定义。

备注： 在这篇文章中提到的“块”和“内联”，不应该与 CSS 盒子的类型中的同名术语相混淆。尽管它们默认是相关的，但改变 CSS 显示类型并不会改变元素的分类，也不会影响它可以包含和被包含于哪些元素。防止这种混淆也是 HTML5 摒弃这些术语的原因之一。

备注： 你可以查阅包含了块级元素和内联元素列表的参考页面。参见块级元素和内联元素页面。

空元素

不是所有元素都拥有开始标签、内容和结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。这些元素被称为空元素。

空元素在开始标签中进行关闭（以开始标签的结束而结束）

例如：元素 <img> 是用来在页面插入一张指定的图片。元素 <br> 是换行

<img
  src="https://i-blog.csdnimg.cn/blog_migrate/6025f475ca3c9cf1b58dc397491b74e0.png"
  alt="Firefox 图标" />

效果如下：

Firefox 图标

备注： HTML 中，无需在一个空元素的标签末尾添加 /，例如 <img src="images/cat.jpg" alt="cat" />。然而，这也是一种有效的语法，当你希望你的 HTML 是有效的 XML 时，这么做也没问题。

HTML 属性

HTML 元素可以设置属性
属性可以在元素中添加附加信息
属性一般描述于开始标签

在这里插入图片描述

属性包含元素的额外信息，这些信息不会出现在实际的内容中。在上述例子中，这个 class 属性是一个识别名称，以后为元素设置样式信息时更加方便。

属性组成

一个空格，它在属性和元素名称之间。如果一个元素具有多个属性，则每个属性之间必须由空格分隔。
属性名称，后面跟着一个等于号。
一个属性值，由一对引号（“”）引起来。（双引号是最常用的，不过使用单引号也没有问题。）

属性总是以名称/值对的形式出现，比如：name=“value”。

布尔属性

有时你会看到没有值的属性，这也是完全可以接受的。这些属性被称为布尔属性。布尔属性只能有一个值，这个值一般与属性名称相同。例如，考虑 disabled 属性，你可以将其分配给表单输入元素。用它来禁用表单输入元素，这样用户就不能输入了。被禁用的元素通常有一个灰色的外观。示例如下：

<!-- 使用 disabled 属性来防止终端用户输入文本到输入框中 -->
<input type="text" disabled />

<!-- 下面这个输入框不包含 disabled 属性，所以用户可以向其中输入 -->
<input type="text" />

HTML 网页结构

<html>

<head>

<title>页面标题<title>

</head>

<body>

<h1>这是一个标题</h1>

<p>这是一个段落</p>

</body>

</html>

只有 <body> 区域部分 才会在浏览器中显示。

举例：

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

**注：**在浏览器的页面上使用键盘上的 F12 按键开启调试模式，就可以看到组成标签。

<!DOCTYPE html>: 声明文档类型。早期的 HTML（大约 1991-1992 年）文档类型声明类似于链接，规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西。文档类型是一个历史遗留问题，需要包含它才能使其他东西正常工作。现在，只需要知道 <!DOCTYPE html> 是最短的有效文档声明！
<html></html>: html 元素。这个元素包裹了页面中所有的内容，有时被称为根元素。
<head></head>: head 元素。这个元素是一个容器，它包含了所有你想包含在 HTML 页面中但不在 HTML 页面中显示的内容。这些内容包括你想在搜索结果中出现的关键字和页面描述、CSS 样式、字符集声明等等。以后的章节中会学到更多相关的内容。
<meta charset="utf-8">: meta 元素。这个元素代表了不能由其他 HTML 元相关元素表示的元数据，比如 <base>、<link>、<script>、<style> 或 <title>。charset属性将你的文档的字符集设置为 UTF-8，其中包括绝大多数人类书面语言的大多数字符。有了这个设置，页面现在可以处理它可能包含的任何文本内容。没有理由不对它进行设置，它可以帮助避免以后的一些问题。
<title></title>: title 元素。这设置了页面的标题，也就是出现在该页面加载的浏览器标签中的内容。当页面被加入书签时，页面标题也被用来描述该页面。
<body></body>: body 元素。包含了你访问页面时所有显示在页面上的内容，包含文本、图片、视频、游戏、可播放音频轨道等等。

HTML 基础格式

HTML的通用声明

声明位于文档中的最前面的位置，处于 <html> 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。

HTML5 <!DOCTYPE html>
HTML 4.01 <!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>
XHTML 1.0 <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
查看完整网页声明类型 DOCTYPE 参考手册。

HTML 头部

HTML <head> 元素

<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>。

HTML <meta> 元素

META 元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者，和其他元数据。

元数据可以使用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他Web服务。

为搜索引擎定义关键词:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
为网页定义描述内容:
<meta name="description" content="免费 Web & 编程 教程">
定义网页作者:
<meta name="author" content="Runoob">
每30秒钟刷新当前页面:
<meta http-equiv="refresh" content="30">
HTML中文编码：目前在大部分浏览器中，直接输出中文会出现中文乱码的情况，这时候我们就需要在头部将字符声明为 UTF-8 或 GBK。
<meta charset="UTF-8"> 

HTML <title> 元素

<title> 标签定义了不同文档的标题。在 HTML/XHTML 文档中是必需的。

定义了浏览器工具栏的标题
当网页添加到收藏夹时，显示在收藏夹中的标题
显示在搜索引擎结果页面的标题

<head> 
<meta charset="utf-8"> 
<title>文档标题</title>
</head>

HTML <base> 元素

<base> 标签描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接

<head>
<base href="http://www.runoob.com/images/" target="_blank">
</head>

HTML <link> 元素

<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>

HTML <style> 元素

在 <style> 元素中你也可以直接添加样式来渲染 HTML 文档:

<head>
<style type="text/css">
body {
     
    background-color:yellow;
}
p {
     
    color:blue
}
</style>
</head>

HTML <script> 元素

HTML 标题

HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的。

<h1>这是一个标题</h1>
<h2>这是一个标题</h2>
<h3>这是一个标题</h3>

HTML 水平线

<hr> 标签在 HTML 页面中创建水平线。

<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>
<hr>
<p>这是一个段落。</p>

hr 元素可用于分隔内容。

HTML 注释

可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。

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

注释: 开始括号之后（左边的括号）需要紧跟一个叹号 ! (英文标点符号)，结束括号之前（右边的括号）不需要，合理地使用注释可以对未来的代码编辑工作产生帮助。

HTML 段落

HTML 段落是通过标签 <p> 来定义的。

<p>这是一个段落。</p>
<p>这是另外一个段落。</p>

**注意：**浏览器会自动地在段落的前后添加空行。（</p> 是块级元素）

HTML 折行

如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br> 标签

<p>这个<br>段落<br>演示了分行的效果</p>

HTML 文本格式化

HTML 使用标签 <b>(“bold”) 与 <i>(“italic”) 对输出的文本进行格式, 如：粗体 or 斜体

通常标签 <strong> 替换加粗标签 <b> 来使用, <em> 替换 <i>标签使用。
然而，这些标签的含义是不同的：<b> 与 <i> 定义粗体或斜体文本。<strong> 或者 <em>意味着你要呈现的文本是重要的，所以要突出显示。现今所有主要浏览器都能渲染各种效果的字体。不过，未来浏览器可能会支持更好的渲染效果。

<b>这个文本是加粗的</b>
<br />
<strong>这个文本是加粗的</strong>
<br />
<big>这个文本字体放大</big>
<br</