Web HTML

1telescope

已于 2023-05-02 17:24:18 修改

阅读量97

点赞数

分类专栏： Web 文章标签： html5 前端 html

于 2023-05-02 17:14:06 首次发布

本文链接：https://blog.csdn.net/telescopewang/article/details/130465031

版权

Web 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

HTML是一种超文本标记语言，用于组织网页结构。文章介绍了HTML元素的组成部分，包括开始和结束标签，以及内容。区分了块级元素和内联元素，还提到了空元素。此外，讨论了属性的使用，文档类型的声明，以及如何在HTML中添加favicon和使用字符引用及注释。

摘要由CSDN通过智能技术生成

什么是HTML？

HTML（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的元素组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。

剖析一个HTML元素

这个元素的主要部分有：

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

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

块级元素和内联元素

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

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

考虑如下示例：

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

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

空元素

不是所有元素都拥有开始标签、内容和结束标签。一些元素只有一个标签，通常用来在此元素所在位置插入/嵌入一些东西。这些元素被称为空元素。例如：元素 <img> 是用来在页面插入一张指定的图片。

<img src="https://roy-tian.github.io/learning-area/extras/getting-started-web/beginner-html-site/images/firefox-icon.png" alt="Firefox 图标">

属性

元素也可以拥有属性，属性看起来像这样：

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

属性必须包含：

一个空格，它在属性和元素名称之间。如果一个元素具有多个属性，则每个属性之间必须由空格分隔。
属性名称，后面跟着一个等于号。
一个属性值，由一对引号（""）引起来。

剖析HTML文档

单独的 HTML 元素本身并不十分有用。接下来，我们来看看单个元素是如何组合成整个 HTML 页面的：

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8" />
    <title>我的测试站点</title>
  </head>
  <body>
    <p>这是我的页面</p>
  </body>
</html>

这里我们有：

<!DOCTYPE html>: 声明文档类型。早期的 HTML（大约 1991-1992 年）文档类型声明类似于链接，规定了 HTML 页面必须遵从的良好规则，能自动检测错误和其他有用的东西。文档类型使用类似于这样：
```
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
```
Copy to Clipboard文档类型是一个历史遗留问题，需要包含它才能使其他东西正常工作。现在，只需要知道 <!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> 元素。包含了你访问页面时所有显示在页面上的内容，包含文本、图片、视频、游戏、可播放音频轨道等等。

在你的站点增加自定义图标

为了进一步丰富你的网站设计，你可以在元数据中添加对自定义图标的引用，它们会在某些场景下显示。最常见的用例为 favicon（为“favorites icon”的缩写，在浏览器的“收藏夹”及“书签”列表中显示）。

这个不起眼的图标已经存在很多年了，16 像素的方形图标是第一种类型。你可以看见（取决于浏览器）这些图标出现在浏览器每一个打开的标签页中以及书签面板中的书签页面旁边。

页面添加网页图标的方式有：

将其保存在与网站的索引页面相同的目录中，以 .ico 格式保存（大多数浏览器支持更通用的格式，如 .gif 或 .png）

将以下行添加到 HTML 的 <head> 块中以引用它：

<link rel="icon" href="favicon.ico" type="image/x-icon" />

实体引用：在HTML中包含特殊字符

在 HTML 中，字符 <、>、"、' 和 & 是特殊字符。它们是 HTML 语法自身的一部分，那么你如何将这些字符包含进你的文本中呢，比如说如果你真的想要在文本中使用符号 & 或者小于号，而不想让它们被浏览器视为代码并被解释？

我们必须使用字符引用——表示字符的特殊编码，它们可以在那些情况下使用。每个字符引用以符号 & 开始，以分号（;）结束。

原义字符	等价字符引用
<	`<`
>	`>`
"	`"`
'	`'`
&	`&`

等价字符引用可以很容易记住，因为它使用的文本可以被看作是小于“<”，引号是“"”，其他的也是如此。要找到更多关于实体引用的信息，请参见 XML 和 HTML 字符实体引用列表（维基百科）。

HTML注释

HTML 拥有在代码中写注释的机制。浏览器会忽略注释，有效地使注释对用户来说不可见。注释的目的是让你在代码中加入注释，以解释你的逻辑或编码。如果你在离开很久后回到一个代码库，以至于你不能完全记住它，这就非常有用。同样，当不同的人在进行修改和更新时，注释也是非常宝贵的。

为了将一段 HTML 中的内容置为注释，你需要将其用特殊的记号  包裹起来，比如：

<p>我在注释外！</p>

<!-- <p>我在注释内！</p> -->

文章来源：学习 Web 开发 | MDN

1telescope

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Web HTML

（HyperText Markup Language，超文本标记语言）是一种用来告知浏览器如何组织页面的标记语言。HTML 可复杂、可简单，一切取决于 web 开发者。HTML 由一系列的组成，这些元素可以用来包围或标记不同部分的内容，使其以某种方式呈现或者工作。
复制链接

扫一扫

专栏目录