HTML 入门

0x0 概述

超文本标记语言 (英语:Hypertext Markup Language,简称:HTML ) 是一种用来结构化 Web 网页及其内容的标记语言。网页内容可以是:一组段落、一个重点信息列表、也可以含有图片和数据表。正如标题所示,本文将对 HTML 及其功能做一个基本介绍。

HTML 不是一门编程语言,而是一种用于定义内容结构的标记语言

啊啊啊暑假在家学习欲望好低啊啊啊QwQ

HTML 由一系列的元素(elements组成,这些元素可以用来包围不同部分的内容,使其以某种方式呈现或者工作。 一对标签( tags)可以为一段文字或者一张图片添加超链接,将文字设置为斜体,改变字号,等等。

0x1 HTML元素详解

1. 元素和属性

这个元素的主要部分有:

  1. 开始标签(Opening tag):包含元素的名称(本例为 p),被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始。
  2. 结束标签(Closing tag):与开始标签相似,只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。初学者常常会犯忘记包含结束标签的错误,这可能会产生一些奇怪的结果。
  3. 内容(Content):元素的内容,本例中就是所输入的文本本身。
  4. 元素(Element):开始标签、结束标签与内容相结合,便是一个完整的元素。

元素也可以有属性(Attribute):

属性包含了关于元素的一些额外信息,这些信息本身不应显现在内容中。本例中,class 是属性名称,editor-note 是属性的值 。class 属性可为元素提供一个标识名称,以便进一步为元素指定样式或进行其他操作时使用。

属性应该包含:

  1. 在属性与元素名称(或上一个属性,如果有超过一个属性的话)之间的空格符。
  2. 属性的名称,并接上一个等号。
  3. 由引号所包围的属性值。

2. 文档结构

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>测试页面</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="测试图片">
  </body>
</html>

这里有:

  • <!DOCTYPE html> — 文档类型。混沌初分,HTML 尚在襁褓(大约是 1991/92 年)之时,DOCTYPE 用来链接一些 HTML 编写守则,比如自动查错之类。DOCTYPE 在当今作用有限,仅用于保证文档正常读取。现在知道这些就足够了。
  • <html></html>html元素。该元素包含整个页面的内容,也称作根元素。
  • <head></head>head元素。该元素的内容对用户不可见,其中包含例如面向搜索引擎的搜索关键字(keywords)、页面描述、CSS 样式表和字符编码声明等。
  • <meta charset="utf-8"> — 该元素指定文档使用 UTF-8 字符编码 ,UTF-8 包括绝大多数人类已知语言的字符。基本上 UTF-8 可以处理任何文本内容,还可以避免以后出现某些问题,没有理由再选用其他编码。
    • <title></title>title元素。该元素设置页面的标题,显示在浏览器标签页上,也作为收藏网页的描述文字。
  • <body></body>body 元素。该元素包含期望让用户在访问页面时看到的内容,包括文本、图像、视频、游戏、可播放的音轨或其他内容。

3. 标记文本

1. 使用 \<p> \</p> 指定段落

<p>
    我是一个段落。
</p>

效果:

我是一个段落。

2. \ 突出显示(加粗)

我是<strong>突出显示</strong>的内容。

效果:

我是突出显示的内容。

3. 标题

标题元素可用于指定内容的标题和子标题。就像一本书的书名、每章的大标题、小标题,等。HTML 文档也是一样。HTML 包括六个级别的标题, h1h6,一般最多用到 3-4 级标题。

<h1>主标题</h1>
<h2>顶层标题</h2>
<h3>子标题</h3>
<h4>次子标题</h4>

效果:

主标题

顶层标题

子标题

次子标题

注意:

不要使用标题元素来加大、加粗字体,因为标题对于 无障碍访问 和 搜索引擎优化 等问题非常有意义。要保持页面结构清晰,标题整洁,不要发生标题级别跳跃。

4. 列表(List)

Web 上的许多内容都是列表,HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。最常用的列表类型为:

  1. 无序列表(Unordered List)中项目的顺序并不重要,就像购物列表。用一个 <ul> 元素包围。
  2. 有序列表(Ordered List)中项目的顺序很重要,就像烹调指南。用一个 ol 元素包围。

列表的每个项目用一个列表项目(List Item)元素 <li> 包围。

比如,要将下面的段落片段改成一个列表:

<p>Mozilla 是一个全球社区,这里聚集着来自五湖四海的技术人员、思考者和建造者,我们致力于……</p>

可以这样更改标记:

<p>Mozilla 是一个全球社区,这里聚集着来自五湖四海的</p>
<ul>
  <li>技术人员</li>
  <li>思考者</li>
  <li>建造者</li>
</ul>
<p>我们致力于……</p>

效果:

Mozilla 是一个全球社区,这里聚集着来自五湖四海的

  • 技术人员
  • 思考者
  • 建造者

我们致力于……

有序列表用一下试试:

<ol>
    <li>互联网是现代生活不可分割的一部分,是教育、交流、合作、商业、娱乐,以及整体社会的关键组成部分。</li>
    <li>互联网是全球公共资源,必须保证开放性和可用性。</li>
    <li>互联网必定会丰富人类生活。</li>
    <li>用户在互联网上的安全和隐私保护是基本要求,不可忽视。</li>
</ol>

效果:

  1. 互联网是现代生活不可分割的一部分,是教育、交流、合作、商业、娱乐,以及整体社会的关键组成部分。
  2. 互联网是全球公共资源,必须保证开放性和可用性。
  3. 互联网必定会丰富人类生活。
  4. 用户在互联网上的安全和隐私保护是基本要求,不可忽视。

5. 链接

链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接,我们需要使用一个简单的元素 — — a 是 “anchor” (锚)的缩写。要将一些文本添加到链接中,只需如下几步:

选择一些文本。比如 “Mozilla 宣言”。

将文本包含在 <a> 元素内,就像这样:

<a>Mozilla 宣言</a>

为此 <a> 元素添加一个 href 属性,就像这样:

<a href="">Mozilla 宣言</a>

把属性的值设置为所需网址:

<a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla 宣言</a>

如果网址开始部分省略了 https:// 或者 http://,可能会得到错误的结果。在完成一个链接后,可以试着点击它来确保指向正确。

href 这个名字可能开始看起来有点令人费解,代表超文本引用( hypertext reference)。

6. 图片

重温一下 <img> 元素:

<img src="images/firefox-icon.png" alt="测试图片">

像之前所讲,该元素通过包含图像文件路径的地址属性 src,可在所在位置嵌入图像。

该元素还包括一个替换文字属性 alt,是图像的描述内容,用于当图像不能被用户看见时显示,不可见的原因可能是:

  1. 用户有视觉障碍。视障用户可以使用屏幕阅读器来朗读 alt 属性的内容。
  2. 有些错误使图像无法显示。可以试着故意将 src 属性里的路径改错。保存并刷新页面就可以在图像位置看到:

图片内容为文字“测试图片”

alt 属性的关键字即“描述文本”。alt 文本应向用户完整地传递图像要表达的意思。用 “测试图片” 来描述 Firefox 标志并不合适,修改成 “Firefox 标志:一只盘旋在地球上的火狐” 就好多了。

可以试着为图像编写一些更好的 alt 文本。

注:更多信息请参阅 无障碍访问

通过嵌套可以实现图片链接:

<a herf="https://daydreaming.info">
  <img src="https://www.daydreaming.info/wp-content/uploads/2019/12/gLHAWfblwgawgDg.jpg"/>
  </a>
  



↑比如点击上边这个图片就可以去我的博客了QwQ…