【前端】HTML-2022/7-11

HTML元素（补充）

HTML元素可以嵌套（一个HTML元素包含另一个HTML元素）

一个HTML 文档是由许多个相互嵌套的 HTML 元素构成的

一个标准的HTML元素必须被关闭，许多的HTML元素都是有开始标签和结束标签的，这类HTML元素由结束标签关闭，而没有结束标签的自结束标签，是由开始标签关闭的。

HTML对大小写并不敏感，这就意味着，使用<p>和使用<P>是等效的，但使用小写是更规范的做法。

自结束标签更严谨的写法是加上一个/，比如：

<br>应该写成<br />

HTML属性（补充）

• HTML 元素可以设置属性
• 属性可以在元素中添加附加信息
• 属性一般描述于开始标签
• 属性总是以名值对的形式出现，比如：key=”value”

属性实例：

<a href="https://www.rsnocsi.cn/">This is a link</a>

HTML的超链接由 <a> 标签定义。链接的URL在 href 属性中指定

属性值必须包括在引号类，同编程语言中的字符串类似，引号可以使用单引号和双引号，双引号是最常用的，不过使用单引号也没有问题。

Tips：如果你在属性值内仍需要使用引号，比如属性值的内容本身就含有双引号，那么您必须使用单引号。

HTML属性参考资料：https://www.runoob.com/tags/html-reference.html

查看源代码

如果你遇到了一个HTML网页，并惊叹它是如何实现的，如果你想知道，你只需要右键，查看网页源代码即可

（尽管这好像并没有什么帮助，因为现在许多网页都是动态网页，这种办法只对静态网页有办法）

HTML常用标签

HTML标题

标题（Heading）是通过 <h1> ~ <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

<h1>This is a Heading One</h1>
<h2>This is a Heading Two</h2>
<h3>This is a Heading Three</h3>
<h4>This is a Heading Four</h4>
<h5>This is a Heading Five</h5>
<h6>This is a Heading Six</h6>

Tips：浏览器会自动地在标题的前后添加空行。

善用标题，一个好的HTML文档，应该是由一个个标题来体现文档结构的，在SEO中，搜索引擎将使用标题为您的网页的结构和内容编制索引，对用户来说，他们可以通过标题来快速浏览您的网页。（写博文也是这么一个道理，用好标题，对SEO和用户体验都有很大的帮助）

h1是最重要的，h2是次重要的，再其次是h3，如此类推。

HTML段落

HTML 可以将文档分割为若干段落。

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

<p>This is a paragraph</p>
<p>This is a paragraph</p>
<p>This is a paragraph</p>

HTML 水平线以及换行

<hr> 标签在 HTML 页面中创建水平线，用于分割内容。

<br>标签可用于换行

它们都是自结束标签（空元素）

<h1> 定义最大的标题。 <h6> 定义最小的标题。

<p>This is a paragraph</p>
<hr>
<p>This is a paragraph</p>
<br>
<p>This is a paragraph</p>

HTML文本格式化

下面是一些常用的文本格式化标签

<b>粗体</b>
<br>
<em>着重</em>
<br>
<i>斜体</i>
<br>
<small>小号字</small>
<br>
<strong>加重</strong>
<br>
<sub>下标</sub>
<br>
<sup>上标</sup>
<br>
<ins>插入字</ins>
<br>
<del>删除字</del>
<br>
<code>print("This is a code tab")</code>

HTML链接

HTML 可以使用超链接与网络上的另一个网站相连。

当然，这里需要讲到一个概念：网站和网页

网页一般指的是一个HTML文档，而网站是一个整体，由许许多多的网页构成。网站相当于一本书，网页就是这本书里面的一页。

使用超链接，可以在一个网页中跳转到另一个网页，这实现了网页与网页间的联系，一个超链接可以指向一个地址，这个地址可以是站内的其它网页，也可能是站外的（其它网站的）

你几乎可以在任何网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

默认情况下，链接将以以下形式出现在浏览器中：

• 一个未访问过的链接显示为蓝色字体并带有下划线。
• 访问过的链接显示为紫色并带有下划线。
• 点击链接时，链接显示为红色并带有下划线。

在标签<a> 中使用href属性来描述链接的地址

<a href="https://www.rsnocsi.cn/">A link</a>

target 属性

使用 target 属性，你可以定义被链接的文档在何处显示。

<a href="https://www.rsnocsi.cn/" target="_blank">A link</a>

id 属性

id 属性可用于创建一个 HTML 文档书签。

提示: 书签不会以任何特殊方式显示，即在 HTML 页面中是不显示的，所以对于读者来说是隐藏的。

在HTML文档中插入ID:

<a id="tips">有用的提示部分</a>

在HTML文档中创建一个链接到”有用的提示部分(id=”tips”）”：

<a href="#tips">访问有用的提示部分</a>

或者，从另一个页面创建一个链接到”有用的提示部分(id=”tips”）”：

<a href="https://www.runoob.com/html/html-links.html#tips">
访问有用的提示部分</a>

注：因为本人的懒惰，这段内容摘抄自https://www.runoob.com/html/html-links.html（bushi）

HTML图像

在 HTML 中，图像由<img> 标签定义。

<img> 也是自结束标签。

要在页面上显示图像，你需要使用src属性（源属性），源属性的值是图像的 URL 地址。

<img src="https://www.rsnocsi.cn/logo.jpg" alt="My Logo" height="150" width="150">

效果：

在上面的示例中，除了使用必填的src属性外，还使用了alt属性（替换文本属性），在浏览器无法载入图像时，替换文本属性会告诉读者这个图片的内容是什么。此时，浏览器将显示这个替代性的文本而不是src属性所指定的图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人（这段内容是搬文档的，其实我也不知道为什么2022年了还有人使用纯文本浏览器，现在添加alt属性更多的是为了防止图片失效）来说是非常有用的。

此外，你还可以使用height（高度） 与 width（宽度）属性用于设置图像的高度与宽度，属性值默认单位为像素。

Tips：指定图像的高度和宽度是一个很好的习惯。如果图像指定了高度宽度，页面加载时就会保留指定的尺寸。如果没有指定图片的大小，加载页面时有可能会破坏HTML页面的整体布局。

HTML实体

在HTML文档中编写的多个空格，在默认情况下浏览器会把这多个空格解析成一个空格（在许多语言中都是这样）

还有一种情况，如果我们要在HTML里面写一个数学表达式：a<b>c

在数学里这样没问题，可是在HTML中会出现问题：

浏览器会直接把它解析成ac，而且这个c，似乎还有点粗

这是因为，一个小于号一个大于号正好在HTML里面是表示标签的，这样，这里面的b就成了一个标签，而刚好在HTML中，<b>标签是用来加粗的，所以它就把后面的c给加粗了（尽管这里面只有一个开始标签没有结束标签，这样是不规范的，但是浏览器是会尽最大的努力正确的解析页面的，所以，你所有不符合语法规范的内容, 浏览器都会为你自动修正，但有些情况会修正错误，所以在编写HTML文档时，请注意语法规范。）

这类特性是为了帮助我们更好的使用HTML，但在某些情况下会适得其反。

在HTML中，我们不能直接书写某些特殊符号，比如说：多个连续的空格、小于号、大于号等。

如果我们就是要这么写呢？

如果我们需要在HTML中书写这些特殊符号，我们就需要使用实体（转义字符）

实体的语法：

以&开头，以;结尾，中间是实体的名称，形如：

&name;

比如说：

• 空格：&nbsp;
• 大于号：&gt;
• 小于号：&lt;

这些符号都是在HTML被占用了的符号（或者叫HTML保留字符），实体除了用来表示这种保留字符外，还经常用来表示一些特殊字符，比如说版权符号（&copy;），商标符号(&reg;)等等。

实体在HTML的日常使用中，使用频率并不是很高，只是在某些特殊情况下我们需要使用而已。但它仍然是一个非常重要的概念。

实体可不只是只有这些，还有很多很多实体，如果我们需要查询其它实体，请查看：

https://www.w3school.com.cn/html/html_entities.asp

meta标签

meta标签用于设置网页中的一些元数据，它写在<head>标签内，所以，meta标签并不是给用户看的，它是给浏览器，或者搜索引擎的爬虫看的。

meta标签最最最常用的就是<meta charset=”UTF-8″>，设置字符集为UTF-8，它是写给浏览器看的，用于告诉浏览器该HTML文档使用的字符集是UTF-8。

除此之外，meta标签还有一些常用的属性，比如：

• name
  • 用于指定数据的名称
• content
  • 用于指定数据的内容

比如说，我们可以使用下面一个代码：

<meta name="keywords" content="HTML5,HTML,前端">

这行代码的意思是，设置一个元数据，数据的名称是keywords，数据的内容是HTML5,HTML,前端。

说人话呢，就是，设置文档的关键字，关键字的内容有：HTML5,HTML,前端。

关键字是干嘛的呢？关键字是用来告诉搜索引擎这个HTML文档的大致内容，让搜索引擎收录你的网站后，搜索引擎会根据你网站的综合表现（SEO）和一个网页的关键字来决定何时向用户推送你的网站。

比如说，你在百度搜索”网购“，会出现京东，淘宝等网购类的平台，这是因为它们的网站有设置”网购“这个关键字（当然，也因为这些平台向百度打了钱，买了广告）

再比如，我们可以使用下面一行代码：

<meta name="description" content="这是一个前端HTML学习的笔记，教程文章">

这行代码就是设置文档的描述，描述的内容是：这是一个前端HTML学习的笔记，教程文章。

设置的这个描述会在浏览器向用户推送你的网站时显示出来。

此外，还有title，title数据的内容会作为搜索引擎显示结果的超链接的文本显示出来。

除了这些效果几乎不可见的外，我们还可以试试：http-equiv

http-equiv的用法有很多，不过用得最多的就一个：refresh。下面是一个示例：

<meta http-equiv="refresh" content="3;url=https://www.rsnocsi.cn/">

它的意思是，在这个页面加载完毕之后的3秒，重定向到https://www.rsnocsi.cn/。