HTML学习心得

最新推荐文章于 2023-07-05 11:18:20 发布

伊甸契约

最新推荐文章于 2023-07-05 11:18:20 发布

阅读量579

点赞数

文章标签： html 前端 javascript css

本文链接：https://blog.csdn.net/weixin_51890646/article/details/127992853

版权

1开始学习HTML

1.1什么是HTML？

HTML是一种一种用来告知浏览器如何组织页面的标记语言。

1.2剖析HTML元素

1.2.1段落元素：

段落元素可以算是最基本的元素，这种元素是由最基本的四部分组成

开始标签：包含元素的名称（这里即是p），表示元素从这里便开始有作用
结束标签：段落的结尾，记住要加/
内容：元素的内容，这里是文本，也可以添加其他内容
元素：以上所有内容的结合

下图便是实操的例子

<p>This is my first element</p>

1.2.2嵌套元素：

元素可以放到另一个元素之中，这便是嵌套，下图使用了标识嵌套到

标识中

<p>This is my<strong>second</strong>element</p>

附：strong标签：

strong表示强调，被他框住的内容会被强调

1.2.3块级元素和内联元素

块级元素在页面中以块的形式展现 —— 被其框住的内容会以类似于段落的形式显示，因而会换行显示
内联元素通常出现在块级元素中并环绕文档内容的一小部分，而不是一整个段落或者一组内容。内联元素不会导致文本换行

下图的例子中便可以清晰的看到两者的区别，块级元素框住的元素会以类似于段落的方式换行显示；而内联元素则不会换行，是一起显示

1.2.4空元素：

不是所有元素都有开始标签、内容、结束标签。有些元素只有一个标签。就类似标签，它不需要结尾标签和内容

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

附：img标签

元素是用来在元素中所在位置插入一张指定的图片

1.2.5属性：

元素可以拥有属性，如下图所示，属性包含着元素额外信息，这些信息不会出现在实际内容之中，但是会给元素不同的效果

<p class="editor-note">我的猫咪脾气爆</p>

属性的内容要求：

一个空格，在属性和元素名称之间（如果已经有一个或多个属性，就与前一个属性之间有一个空格）。
属性名称，后面跟着一个等于号。
一个属性值，由一对引号 (“”) 引起来。

附：a标签

的——元素是锚，它使被标签包裹的内容成为一个超链接。此元素也可以添加大量的属性，以下是它的部分属性：

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

元素的属性（其他属性）：

class属性：可以给元素一个识别的名字，类似于xml语句中的id，之后可以被用来识别或者调用此元素
```
<p class="note">you need to study html</p>
```
布尔属性：没有值的属性，他们都有会和自己属性名一样的属性值，例如disabled 属性，他们可以标记表单输入使之变为不可用 (变灰色)，此时用户不能向他们输入任何数据

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-TAMSS1FK-1669137202617)(C:\Users\CC\AppData\Roaming\Typora\typora-user-images\image-20221120200257050.png)]

1.3剖析HTML文档

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

分析如下：

<!DOCTYPE html>: 声明文档类型。是最短有效的文档声明。
<html></html>: <html>元素。这个元素包裹了整个完整的页面，是一个根元素。
<head></head>: <head>元素。这个元素是一个容器，**包含了所有你想包含在 HTML 页面中但不想在 HTML 页面中显示的内容。**这些内容包括你想在搜索结果中出现的关键字和页面描述，CSS 样式，字符集声明等等
<meta charset="utf-8">: 这个元素设置文档使用 utf-8 字符集编码，utf-8 字符集包含了人类大部分的文字
<title></title>: 设置页面标题，出现在浏览器标签上，当你标记/收藏页面时它可用来描述页面。
<body></body>: <body>元素。包含了你访问页面时所有显示在页面上的内容，文本，图片，音频，游戏等等。

1.4HTML的特殊字符

在HTML中，字符<、>、“”、''和&是特殊字符，他们是HTML语法中的一部分，然而因为他们和HTML的代码类似，因而要使用他们容易被浏览器视为代码，但是如果等价字符的引用，便可以使用这些字符

2 HTML的head标签和元数据

2.1 head标签

head标签的内容不会在加载的页面中显示出来，他包含页面诸如、指向CSS的链接、指向自定义图标的链接和其他的元数据

<head>
  <meta charset="utf-8">
  <title>我的测试页面</title>
</head>

head标签中重要的一些元素：

添加标题：添加标题即元素，可以给文档添加标题，但它和<h1>不一样，<h1>是为添加标题，有时<h1>也被称作网页标题</h1></h1></h1>

h1和title两者的区别
- h1元素在页面加载完毕时显示在页面中，通常只出现一次，用来标记页面内容的标题（故事名称、新闻摘要，等等）
- title元素是一项元数据，用于表示整个 HTML 文档的标题（而不是文档内容）
```
<p>hello world</p>
<title>
    test
</title>
<body>
    <h1>b1</h1>
    <h2>b2</h2>
</body>    
```
  [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-mFK8tNp1-1669137202618)(C:\Users\CC\AppData\Roaming\Typora\typora-user-images\image-20221121130223033.png)]

2.2元数据：meta元素

元数据就是描述数据的数据，HTML有一种添加元数据的方式——即元素，他可以被包含进你的页面的元素，就像前面文档中实例的那样

<meta charset="utf-8">

这个元素简单的指定了文档的字符编码——在这个文档中被允许使用的字符集。utf-8是一个通用的字符集。

2.2.1meta的属性：

name：指定了meta元素的类型；说明该元素保留了什么类型的信息
content：指定了实际的元数据内容

这两个 meta 元素对于定义你的页面的作者和提供页面的简要描述是很有用的
description：被使用在搜索引擎显示的结果页中

除此之外各个厂商可能也有自己的元数据协议，从而提供更多详细的元数据

2.3在站点添加自定义图标

为了进一步的丰富网站设计，你可以在元数据中添加对自定义图标（favicon）的引用，这些将在特定的场合（浏览器的收藏或书签列表）中显示

页面添加图片的方式：

将其保存在与网站的索引页面相同的目录中，以.ico格式保存（.ico可以运行在IE这种“远古时期“的浏览器上），除此之外还有更通用的.gif和.png

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

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

2.4 HTML中应用CSS和JavaScript

网站往往会使用CSS让网页更加炫酷，用JS让网页有交互功能，它们分别使用和

<link>元素经常位于文档的头部。这个 link 元素有 2 个属性rel="stylesheet"表明这是文档的样式表，而href包含了样式表文件的路径：
```
<link rel="stylesheet" href="my-css-file.css">
```
<script>元素可以不放在<head>中，并包含src属性来指向JS文件路径，最后加上defer以告诉浏览器在解析完成HTML后再加载JS，这样确保浏览器加载脚本前解析了全部HTML内容
```
<script src="my-js-file.js" defer></script>
```

2.5设定主语言

对站点有必要设定语言，下面是设置不同语言的方法演示

<html lang="zh-CN">

如果HTML文档的语言设置好了，它将会更容易被浏览器索引。除此之外，我们还可以给文档的分段设置不同的语言，下图便是把日语部分设为日语

<p>Japanese example: <span lang="ja">ご飯が熱い。</span>.</p>

3 HTML文字处理基础

3.1标题和段落

大部分的文本结构由标题和段落组成，内容的结构化使得阅读效果更佳

段落：HTML中段落是<p>元素标签定义的
标题：标题通过“标题标签”进行定义，例如<h1>

这里有六个标题元素标签 —— <h1>、<h2>、<h3>、<h4>、<h5>、<h6>。每个元素代表文档中不同级别的内容; <h1> 表示主标题（the main heading），<h2> 表示二级子标题（subheadings），<h3> 表示三级子标题（sub-subheadings），等等

3.2列表

3.2.1列表的种类

列表分为无序和有序列表

无序列表：用<ul>框住所有的项目，再用<li>单独框住每个单独列出的项目

<ul>
  <li>豆浆</li>
  <li>油条</li>
  <li>豆汁</li>
  <li>焦圈</li>
</ul>

有序列表：用<ol>框住所有的项目，再用<li>单独框住每个单独列出的项目

<ol>
  <li>沿着条路走到头</li>
  <li>右转</li>
  <li>直行穿过第一个十字路口</li>
  <li>在第三个十字路口处左转</li>
  <li>继续走 300 米，学校就在你的右手边</li>
</ol>

3.2.2列表的嵌套

将一个列表嵌入到另一个列表是完全可行的

<ol>
  <li>先用蛋白一个、盐半茶匙及淀粉两大匙搅拌均匀，调成“腌料”，鸡胸肉切成约一厘米见方的碎丁并用“腌料”搅拌均匀，腌渍半小时。</li>
  <li>用酱油一大匙、淀粉水一大匙、糖半茶匙、盐四分之一茶匙、白醋一茶匙、蒜末半茶匙调拌均匀，调成“综合调味料”。</li>
  <li>鸡丁腌好以后，色拉油下锅烧热，先将鸡丁倒入锅内，用大火快炸半分钟，炸到变色之后，捞出来沥干油汁备用。</li>
  <li>在锅里留下约两大匙油，烧热后将切好的干辣椒下锅，用小火炒香后，再放入花椒粒和葱段一起爆香。随后鸡丁重新下锅，用大火快炒片刻后，再倒入“综合调味料”继续快炒。
    <ul>
      <li>如果你采用正宗川菜做法，最后只需加入花生米，炒拌几下就可以起锅了。</li>
      <li>如果你在北方，可加入黄瓜丁、胡萝卜丁和花生米，翻炒后起锅。</li>
    </ul>
  </li>
</ol>

3.3重点强调

强调：在口语表达中，我们有时会强调某些字，用来改变这句话的意思。同样地，在书面用语中，我们可以使用斜体字来达到同样的效果。在 HTML 中我们用<em>元素来标记这样的情况。浏览器默认风格为斜体，但获得斜体方式应该使用<span>元素和一些 CSS，或者是<i>元素（见下文）
非常重要：<strong>用来加粗文字
斜体字：<i>被用来传达传统上用斜体表达的意义：外国文字，分类名称，技术术语，一种思想……
粗体字：<b>被用来传达传统上用粗体表达的意义：关键字，产品名称，引导句……
下划线：<u>被用来传达传统上用下划线表达的意义：专有名词，拼写错误……

4创建超链接

4.1超链接的解析

超链接使我们能够将我们的文档链接到任何其他文档（或其他资源），也可以链接到文档的指定部分，我们可以在一个简单的网址上提供应用程序（与必须先安装的本地应用程序或其他东西相比）

<p>我创建了一个指向
<a href="https://www.mozilla.org/zh-CN/">Mozilla 主页</a>的超链接。
</p>

结果如下（当鼠标指针悬停在链接上时，标题将作为提示信息出现）：

我创建了一个指向 Mozilla 主页的超链接。

使用title属性添加支持信息：通过title当鼠标放置在链接上时会出现标题内容
```
<p>我创建了一个指向<a href="https://www.mozilla.org/en-US/"
   title="了解 Mozilla 使命以及如何参与贡献的最佳站点。">Mozilla 主页</a
   >的超链接。
</p>
```
结果如下（当鼠标指针悬停在链接上时，标题将作为提示信息出现）：

我创建了一个指向 Mozilla 主页的超链接。
块级链接：链接除了是文字外，也可以是其他内容，甚至是块级元素。例如想要将一个图像转换为链接，只需把引用了图像文件的 <img> 元素放到<a> 标签内。
```
<a href="https://www.mozilla.org/zh-CN/">
  <img src="mozilla-image.png" alt="链接至 Mozilla 主页的 Mozilla 标志">
</a>
```

4.2统一资源定位符（URL）与文件路径（PATH）

4.2.1统一资源定位符：

统一资源定位符（英文：Uniform Resource Locator，简写：URL）是一个定义了在网络上的位置的一个文本字符串。例如 Mozilla 的中文主页定位在 https://www.mozilla.org/zh-CN/.

URL使用路径查找文件，路径指定文件系统中对应文件的所在位置，但是指向不同目录的文件有不同的方法，下图是一个简单的目录结果

A simple directory structure. The parent directory is called creating-hyperlinks and contains two files called index.html and contacts.html, and two directories called projects and pdfs, which contain an index.html and a project-brief.pdf file, respectively

指向当前目录：如果 index.html（目录顶层的 index.html）想要包含一个超链接指向 contacts.html，你只需要指定想要链接的文件名，因为它与当前文件是在同一个目录的
```
<p>要联系某位工作人员，请访问我们的<a
 href="contacts.html">联系人页面</a>。</p>
```
指向子目录：如果 index.html （目录顶层 index.html）想要包含一个超链接指向 projects/index.html，你需要先进入 projects 项目目录，然后指明要链接到的文件 index.html。通过指定目录的名称，然后是正斜杠，然后是文件的名称
```
<p>请访问<a href="projects/index.html">项目页面</a>。</p>
```
指向上级目录：如果你想在 projects/index.html 中包含一个指向 pdfs/project-brief.pdf 的超链接，你必须先返回上级目录，然后再回到 pdf 目录。“返回上一个目录级”使用两个英文点号表示（..）
```
<p>点击打开<a href="../pdfs/project-brief.pdf">项目简介</a>。</p>
```

4.2.2文档片段

超链接除了可以链接到文档外，也可以链接到HTML文档的特定部分（被称为文档片段），要做到这一点，必须首先给要链接到的元素分配一个 id 属性

<h2 id="Mailing_address">邮寄地址</h2>

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

<p>要提供意见和建议，请将信件邮寄至<a href="contacts.html#Mailing_address">我们的地址</a>。</p>

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

<p>本页面底部可以找到<a href="#Mailing_address">公司邮寄地址</a>。</p>

4.2.3绝对URL和相对URL

绝对URL：指向其在Web上的绝队位置定义的位置包括协议和域名，不管绝对 URL 在哪里使用，它总是指向确定的相同位置
```
http://www.example.com/projects/index.html
```
相对URL：指向与你链接的文件相关的位置，例如：如果我们想从示例文件链接 http://www.example.com/projects/index.html 转到相同目录下的一个 PDF 文件，URL 就是文件名（例如 project-brief.pdf），没有其他的信息要求。如果 PDF 文件能够在 projects 的子目录 pdfs 中访问到，相对路径就是 pdfs/project-brief.pdf（对应的绝对 URL 是 http://www.example.com/projects/pdfs/project-brief.pdf）

4.2.4在下载链接时使用download属性

当链接到要下载的资源而不是在浏览器中打开时，可以使用 download 属性来提供一个默认的保存文件名。下面是一个 Firefox 的 Windows 最新版本下载链接的示例：

<a href="https://download.mozilla.org/?product=firefox-latest-ssl&os=win64&lang=zh-CN"
   download="firefox-latest-64bit-installer.exe">
  下载最新的 Firefox 中文版 - Windows（64 位）
</a>

4.2.5电子邮件链接：

当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面，这种情况是可能做到的。这样做是使用 <a> 元素和 mailto:URL 的方案。

其最基本和最常用的使用形式为一个 mailto: 链接，链接指明收件人的电子邮件地址。效果：创建一个链接，看起来像这样：向 nowhere 发邮件

<a href="mailto:nowhere@mozilla.org">向 nowhere 发邮件</a>

5高阶文件排版

5.1描述列表：

描述列表的目的是标记一组项目及其相关描述，例如术语和定义，或者是问题和答案等

描述列表使用与其他列表类型不同的闭合标签——<dl>；此外，每一项都用<dt>元素闭合。每个描述都用<dd>元素闭合，下面便是例子：

<dl>
  <dt>内心独白</dt>
    <dd>戏剧中，某个角色对自己的内心活动或感受进行念白表演，这些台词只面向观众，而其他角色不会听到。</dd>
  <dt>语言独白</dt>
    <dd>戏剧中，某个角色把自己的想法直接进行念白表演，观众和其他角色都可以听到。</dd>
  <dt>旁白</dt>
    <dd>戏剧中，为渲染幽默或戏剧性效果而进行的场景之外的补充注释念白，只面向观众，内容一般都是角色的感受、想法、以及一些背景信息等。</dd>
</dl>

浏览器的默认样式会在描述列表的描述部分（description definition）和描述术语（description terms）之间产生缩进

5.2引用：

HTML 也有用于标记引用的特性，至于使用哪个元素标记，取决于你引用的是一块还是一行。

5.2.1块应用：

所有类型的网站都经常会使用引用，不管是引用其他网页、作者或出版物的内容，以标准方法标记引用内容是非常有好处的。

如果一个块级内容（一个段落、多个段落、一个列表等）从其他地方被引用，应该把它用<blockquote>元素包裹起来表示，并且在cite属性里用 URL 来指向引用的资源（进而可以直接访问对应资源，但可以不添加cite），下面的例子便是引用:

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

引用会让文字呈现不一样的形式，方便用户查看
在页面内使用引用的时候，通常会希望引用的外观与其他文字不同，最好能提示读者这段内容来自其他地方，同时（使用适当方法）与一般内容的阅读顺序分离
浏览器在渲染块引用时默认会增加缩进，作为引用的一个指示符；MDN 是这样做的，但是也增加了额外的样式：

5.2.2行内引用：

行内元素用同样的方式工作，除了使用<p>元素。例如，下面的标记包含了从 MDN<q>页面的引用：

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q></p>

浏览器默认将其作为普通文本放入引号内表示引用，就像下面：

5.2.3引文：

cite属性内容不会被浏览器显示、屏幕阅读器阅读，需使用 JavaScript 或 CSS，浏览器才会显示cite的内容。如果你想要确保引用的来源在页面上是可显示的，更好的方法是为<cite>元素附上链接：

<p>According to the <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
<cite>MDN blockquote page</cite></a>:
</p>

<blockquote cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote">
  <p>The <strong>HTML <code>&lt;blockquote&gt;</code> Element</strong> (or <em>HTML Block
  Quotation Element</em>) indicates that the enclosed text is an extended quotation.</p>
</blockquote>

<p>The quote element — <code>&lt;q&gt;</code> — is <q cite="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">intended
for short quotations that don't require paragraph breaks.</q> -- <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/q">
<cite>MDN q page</cite></a>.</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ga50Tb9U-1669137202619)(C:\Users\CC\AppData\Roaming\Typora\typora-user-images\image-20221122145912269.png)]

5.3缩略语：

使用<abbr>元素包裹一个缩写或者缩略语，并提供解释（解释往往放在title属性中）

<p>我们使用 <abbr title="超文本标记语言（Hyper text Markup Language）">HTML</abbr> 来组织网页文档。</p>
<p>第 33 届 <abbr title="夏季奥林匹克运动会">奥运会</abbr> 将于 2024 年 8 月在法国巴黎举行。</p>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rPbi4M6g-1669137202619)(C:\Users\CC\AppData\Roaming\Typora\typora-user-images\image-20221122150514893.png)]

这里可以看到，HTML和奥运会都已经出现了下划线，当把鼠标放上去就会出现一个小方框显示写的解释

5.4标记联系方式：

HTML有个用于标记联系方式的元素——<address>

<address>
  <p>Chris Mills, Manchester, The Grim North, UK</p>
</address>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eH0pOB2q-1669137202620)(C:\Users\CC\AppData\Roaming\Typora\typora-user-images\image-20221122151043779.png)]

这里要注意，<address>元素只是标记HTML文档的人的联系方式（简单来说就是让字体变得和普通的不一样），本身没有其他内容，但是我们可以添加超链接，让其可以直接访问对应的用户：

<address>
  <p>Page written by <a href="../authors/chris-mills/">Chris Mills</a>.</p>
</address>

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-GT8tAqQu-1669137202620)(C:\Users\CC\AppData\Roaming\Typora\typora-user-images\image-20221122151134004.png)]

5.5上标和下标：

当你使用日期、化学方程式、和数学方程式时会偶尔使用上标和下标。<sup>和<sub>元素可以解决这样的问题。例如：

<p>咖啡因的化学方程式是C<sub>8</sub>H<sub>10</sub>N<sub>4</sub>O<sub>2</sub>。</p>
<p>如果 x<sup>2</sup> 的值为 9，那么 x 的值必为 3 或 -3。</p>

这些代码输出的结果是：

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-DDqrcGlP-1669137202621)(C:\Users\CC\AppData\Roaming\Typora\typora-user-images\image-20221122151350051.png)]

5.6标记时间和日期：

HTML 还支持将时间和日期标记为可供机器识别的格式的<time>元素

<time datetime="2016-01-20">2016 年 1 月 20 日</time>

为什么需要这样做？因为世界上有许多种书写日期的格式，上边的日期可能被写成：

20 January 2016
20th January 2016
Jan 20 2016
20/06/16
06/20/16
The 20th of next month
20e Janvier 2016
2016 年 1 月 20 日
And so on

但是这些不同的格式不容易被电脑识别 — 假如你想自动抓取页面上所有事件的日期并将它们插入到日历中，<time>元素允许你附上清晰的、可被机器识别的时间/日期来实现这种需求。

6文档与网站架构

6.1文档的基本组成部分

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

页眉

通常横跨于整个页面顶部有一个大标题和/或一个标志。这是网站的主要一般信息，通常存在于所有网页。
导航栏

指向网站各个主要区段的超链接。通常用菜单按钮、链接或标签页表示。类似于标题栏，导航栏通常应在所有网页之间保持一致，否则会让用户感到疑惑，甚至无所适从。许多 web 设计人员认为导航栏是标题栏的一部分，而不是独立的组件，但这并非绝对；还有人认为，两者独立可以提供更好的无障碍访问特性，因为屏幕阅读器可以更清晰地分辨二者。
主内容

中心的大部分区域是当前网页大多数的独有内容，例如视频、文章、地图、新闻等。这些内容是网站的一部分，且会因页面而异。
侧边栏

一些外围信息、链接、引用、广告等。通常与主内容相关（例如一个新闻页面上，侧边栏可能包含作者信息或相关文章链接），还可能存在其他的重复元素，如辅助导航系统。
页脚

横跨页面底部的狭长区域。和标题一样，页脚是放置公共信息（比如版权声明或联系方式）的，一般使用较小字体，且通常为次要内容。还可以通过提供快速访问链接来进行 SEO。

一个“典型的网站”可能会这样布局：

一个简单站点首页截图

6.2用于构建内容的HTML

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

6.3HTML布局元素细节

<main>存放每个页面独有的内容。每个页面上只能用一次 <main>，且直接位于 <body> 中。最好不要把它嵌套进其它元素。
<article>包围的内容即一篇文章，与页面其它部分无关（比如一篇博文）。
<section>与 <article> 类似，但 <section> 更适用于组织页面使其按功能（比如迷你地图、一组文章标题和摘要）分块。一般的最佳用法是：以标题作为开头；也可以把一篇 <article> 分成若干部分并分别置于不同的 <section> 中，也可以把一个区段 <section> 分成若干部分并分别置于不同的 <article> 中，取决于上下文。
<aside>包含一些间接信息（术语条目、作者简介、相关链接，等等）。
<head>是简介形式的内容。如果它是 <body>的子元素，那么就是网站的全局页眉。如果它是 <body>的子元素，那么就是网站的全局页眉。如果它是<article>或<section>的子元素，那么它是这些部分特有的页眉
<nav>包含页面主导航功能。其中不应包含二级链接等内容。
<footer>包含了页面的页脚部分。

6.3.1无语义元素

有时你会发现，对于一些要组织的项目或要包装的内容，现有的语义元素均不能很好对应。有时候你可能只想将一组元素作为一个单独的实体来修饰来响应单一的用 CSS 或 JavaScript。为了应对这种情况，HTML 提供了<span> 和<div>元素。应配合使用 class 属性提供一些标签，使这些元素能易于查询

<span> 是一个内联的（inline）无语义元素，最好只用于无法找到更好的语义元素来包含内容时，或者不想增加特定的含义时

<p>国王喝得酩酊大醉，在凌晨 1 点时才回到自己的房间，踉跄地走过门口。<span class="editor-note">[编辑批注：此刻舞台灯光应变暗]</span>.</p>

<div> 是一个块级无语义元素，应仅用于找不到更好的块级元素时，或者不想增加特定的意义时

<div class="shopping-cart">
  <h2>购物车</h2>
  <ul>
    <li>
      <p><a href=""><strong>银耳环</strong></a>：$99.95.</p>
      <img src="../products/3333-0985/" alt="Silver earrings">
    </li>
    <li>
      ...
    </li>
  </ul>
  <p>售价：$237.89</p>
</div>

6.3.2换行与水平分割线

<br> 可在段落中进行换行；<br> 是唯一能够生成多个短行结构（例如邮寄地址或诗歌）的元素

<p>从前有个人叫小高<br>
他说写 HTML 感觉最好<br>
但他写的代码结构语义一团糟<br>
他写的标签谁也懂不了。</p>

<hr> 元素在文档中生成一条水平分割线，表示文本中主题的变化（例如话题或场景的改变）

<p>原来这唐僧是个慈悯的圣僧。他见行者哀告，却也回心转意道：“既如此说，且饶你这一次。再休无礼。如若仍前作恶，这咒语颠倒就念二十遍！”行者道：“三十遍也由你，只是我不打人了。”却才伏侍唐僧上马，又将摘来桃子奉上。唐僧在马上也吃了几个，权且充饥。</p>
<hr>
<p>却说那妖精，脱命升空。原来行者那一棒不曾打杀妖精，妖精出神去了。他在那云端里，咬牙切齿，暗恨行者道：“几年只闻得讲他手段，今日果然话不虚传。那唐僧已此不认得我，将要吃饭。若低头闻一闻儿，我就一把捞住，却不是我的人了。不期被他走来，弄破我这勾当，又几乎被他打了一棒。若饶了这个和尚，诚然是劳而无功也。我还下去戏他一戏。”</p>