通俗易懂的HTML全知识梳理笔记（第一部分）

我不是女神ヾ 2023-02-14 10:55 5阅读 0赞

### 文章目录 ###

*  什么是HTML
 *  块级元素和内联元素
 *  属性
 *   *  给\`a\`元素添加属性
     *  布尔属性
 *  HTML的空白
 *  实体引用： 在HTML中包含特殊字符
 *  head中的元数据
 *   *  meta元素
     *  在你的站点中增加自定义的图标
     *  在HTML中应用CSS和JavaScript
     *  为文档设置主语言
 *  文字处理
 *  超链接
 *   *   *  文档片段
 *  文档和网站架构
 *   *  文档的基本组成部分

# 什么是HTML #

HTML (*HyperText Markup Language*) 不是一门编程语言，而是一种用来告知浏览器如何组织页面的**标记语言**。给不同文段分配**语义**，使其具有结构化的特点。

# 块级元素和内联元素 #

*  块级元素在页面内以块的形式展现。一个以block形式展现的块级元素不会被嵌套进内联元素中，但可以嵌套在其它块级元素中。
 *  内联元素通常出现在块级元素中并环绕文档内容的一小部分。

# 属性 #

属性包含元素的额外信息，这些信息不会出现在实际的内容中。

一个属性必须包含如下内容：

1.  一个空格，在**属性**和**元素名称**之间。(如果已经有一个或多个属性，就与**前一个属性**之间有一个空格。)
2.  属性名称，后面跟着一个等于号。
3.  一个属性值，由一对引号`“ ”`引起来。(一般数字的值并不需要**引号**)

如：

## 给`a`元素添加属性 ##

常用属性如下：

*  `href`: 这个属性声明超链接的web地址，当这个链接被点击浏览器会跳转至href声明的web地址。例如：`href="https://www.mozilla.org/"`。
 *  `title`: 标题`title`属性为超链接声明额外的信息，比如你将链接至的那个页面。例如：`title="The Mozilla homepage"`。当鼠标悬停在**超链接**上面时，这部分信息将显示。
 *  `target`: 目标`target`属性用于指定链接如何呈现出来。例如，`target="_blank"`将在新标签页中显示链接。如果你希望在**当前标签页**显示链接，**忽略这个属性即可**。

## 布尔属性 ##

有时你会看到**没有值的属性**，它是合法的。这些属性被称为布尔属性，他们只能有跟它的属性名一样的**值**（*也可以没有*）。例如`disabled` 属性，他们可以标记**表单** （*input*）输入使之变为不可用(变灰色)，此时用户不能向他们输入任何数据。

# HTML的空白 #

无论你在HTML元素的内容中使用多少空格( *包括空白字符，包括换行* )，当渲染这些代码的时候，HTML解释器会将连续出现的空白字符减少为**一个单独的空格符。**

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

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

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

<table> 
 <thead> 
  <tr> 
   <th align="left">原义字符</th> 
   <th align="left">等价字符引用</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">&lt;</td> 
   <td align="left"><code>&amp;lt;</code></td> 
  </tr> 
  <tr> 
   <td align="left">&gt;</td> 
   <td align="left"><code>&amp;gt;</code></td> 
  </tr> 
  <tr> 
   <td align="left">"</td> 
   <td align="left"><code>&amp;quot;</code></td> 
  </tr> 
  <tr> 
   <td align="left">’</td> 
   <td align="left"><code>&amp;apos;</code></td> 
  </tr> 
  <tr> 
   <td align="left">&amp;</td> 
   <td align="left"><code>&amp;amp;</code></td> 
  </tr> 
 </tbody> 
</table>

在下面的例子中你可以看到两个段落，它们在谈论web技术:

<p>HTML 中用 <p> 来定义段落元素。</p>
    
    <p>HTML 中用 <p> 来定义段落元素</p>

在下面的实时输出中，你会看到第一段是错误的，因为浏览器会认为第二个

是开始一个新的段落！ 第二段是正确的，因为我们用字符引用来代替了角括号（’<‘和’>'符号）.

HTML 中用
    来定义段落元素。
    HTML 中用 <p> 来定义段落元素

# head中的元数据 #

在页面加载完成的时候，标签里的内容，是不会在页面中显示出来的。它包含了像页面的(标题) ,<strong>CSS</strong>(如果你选择用 CSS 来为 HTML 内容添加样式)，指向<strong>自定义图标的链接</strong>和其他的元数据(描述HTML的数据，比如，<strong>作者，和描述文档的重要关键词</strong>)。

## meta元素 ##

**元数据就是描述数据的数据**，许多`<meta>` 元素包含了`name` 和 `content` 特性：

*  `name` 指定了meta 元素的**类型**； 说明该元素包含了什么类型的信息。
 *  `content` 指定了实际的元数据内容。

> 注：description是很有用的。利于SEO

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

为了进一步丰富你的网站设计，你可以在元数据中添加对自定义图标的引用，这些将在特定的场合中显示。

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

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

1.  将其保存在与网站的索引页面**相同的目录**中，以.ico格式保存（大多数浏览器将支持更通用的格式，如.gif或.png，但使用ICO格式将确保它能在如Internet Explorer 6一样久远的浏览器显示）
2.  将以下行添加到HTML 中以引用它：
    
        <link rel="shortcut icon" href="favicon.ico">

## 在HTML中应用CSS和JavaScript ##

如今，几乎你使用的所有网站都会使用 CSS让网页更加炫酷，使用JS让网页有交互功能，比如视频播放器，地图，游戏以及更多功能。这些应用在网页中很常见，它们分别使用元素以及

*  元素经常位于文档的头部。这个link元素有2个属性，\`rel="stylesheet"\`表明这是文档的样式表，而 \`href\`包含了样式表文件的路径：
    
        <link rel="stylesheet" href="my-css-file.css">
 *  `<script>` 部分没必要非要放在文档头部；实际上，把它放在文档的尾部（在 标签之前）是一个更好的选择，这样可以确保在加载脚本之前浏览器已经解析了HTML内容（*如果脚本加载某个不存在的元素，浏览器会报错*）。
    
        <script src="my-js-file.js"></script>
    
    > **注意：** `<script>`元素看起来像一个空元素，但它并不是，因此需要一个结束标记。您还可以选择将脚本放入`<script>`元素中，而不是指向外部脚本文件。

## 为文档设置主语言 ##

最后，值得一提的是你可以（而且确实应该）为你的站点设定语言， 这个可以通过添加lang属性到HTML开始标签中来实现

这有利于SEO。

# 文字处理 #

对于标题的最佳实践如下：

*  您应该最好只对每个页面使用一次`<h1>` — 这是顶级标题，所有其他标题位于层次结构中的下方。
 *  请确保在层次结构中以正确的顺序使用标题。不要使用`<h3>`来表示副标题，后面跟`<h2>`来表示副副标题 - 这是没有意义的，会导致奇怪的结果。
 *  在可用的六个标题级别中，您应该旨在每页使用**不超过三个**，除非您认为有必要使用更多。具有许多级别的文档（*即，较深的标题层次结构*）变得难以操作并且难以导航。在这种情况下，如果可能，建议将内容分散在多个页面上。

# 超链接 #

除了我们上面讲到的`<title>`、`<target>`、`<href>`，我们再讲下`href`的细节。

尽可能的使用相对链接。而且使用`../`表示回到上一个目录。注：尽管在win10的文件管理器中，目录是反斜杠（\\），但是我们在编写HTML时，仍使用正斜杠（/）。

### 文档片段 ###

超链接除了可以链接到文档外，也可以链接到HTML文档的特定部分（被称为**文档片段**）。要做到这一点，你必须首先给要链接到的元素分配一个`id`属性。例如，如果你想链接到一个特定的标题，可以这样做：

<h2 id="Mailing_address">Mailing address</h2>

**然后链接到那个特定的`id`，您可以在URL的结尾使用一个井（`#`）号指向它，例如：**

<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>

你甚至可以在同一份文档下，通过链接文档片段，来链接到同一份文档的另一部分：

<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>

# 文档和网站架构 #

## 文档的基本组成部分 ##

网页的外观多种多样，但是除了全屏视频或游戏，或艺术作品页面，或只是结构不当的页面以外，都倾向于使用类似的标准组件：

*  页眉
    
    通常横跨于整个页面顶部有一个大标题 和/或 一个标志。 这是网站的主要一般信息，通常存在于所有网页。
 *  导航栏
    
    指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对。
 *  主内容
    
    中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。
 *  侧边栏
    
    一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
 *  页脚
    
    横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（**比如版权声明或联系方式**）的，一**般使用较小字体，且通常为次要内容**。 还可以通过提供快速访问链接来进行 SEO。

为了实现语义化标记，HTML 提供了明确这些区段的专用标签，例如：

`<header>`：页眉。  
`<nav>`：导航栏。  
`<main>`：主内容。主内容中还可以有各种子内容区段，可用`<article>`、 `<section>` 和 `<div>` 等元素表示。  
`<aside>`：侧边栏，经常嵌套在 `<main>` 中。  
`<footer>`：页脚。

`<hr>` 水平分割线，`<br>`换行

--------------------

上文来自于我在MDN网站上学习HTML的读书笔记。若要看官方教程请移步[MDN网站][MDN]。  
最后，感谢大家的观看，夹杂着自己的理解，可能会有一些纰漏，敬请见谅。

[MDN]: https://developer.mozilla.org/zh-CN/