首页计算机科学Web编程前端HTML

# HTML 基础

更新中...

# 前提概念：元素

# 元素

HTML 元素

元素（Element）：开始标签、结束标签与内容相结合，便是一个完整的元素

  • 开始标签（Opening tag）：包含元素的名称（本例为 p），被大于号、小于号所包围。表示元素从这里开始或者开始起作用 —— 在本例中即段落由此开始
    • 元素名称：开始标签的第一个词。所有元素名称可以参考 HTML 元素参考 - HTML（超文本标记语言） | MDN (mozilla.org)
  • 结束标签（Closing tag）：与开始标签相似，只是其在元素名之前包含了一个斜杠。这表示着元素的结尾 —— 在本例中即段落在此结束。
  • 内容（Content）：元素的内容，本例中就是所输入的文本本身。

PS

  • 开始标签、结束标签结合，合称标签
  • 有时候可以省略结束标签，但建议写上，符合规范

# 元素属性

HTML 属性

元素属性（Attribute）：与元素相关的特性叫做属性，可以为属性赋值 (每个属性对应一个属性值，所以也称为 " 属性 / 值” 对)：

  • 位置："属性 / 值" 出现在元素开始标签的最后一个 “>” 之前，通过空格分割。

  • 规则：可以有任意数量的 “属性 / 值” 对，并且它们可以任意顺序出现，并且属性名不区分大小写

  • 格式：

    <元素 属性='值'>内容</元素>

    或者 (引号可以是单引号，也可以是双引号)

    <元素 属性="值">内容</元素>

PS

属性应该包含：

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

1. 属性定义规则

  • 不定义属性值：HTML 规定属性也可以没有值，如下
<dl compact>

  • 浏览器会使用 compact 属性的默认值

  • 但有的属性没有默认值，因此这些属性不能省略属性值

  • 属性中的空白：属性值可以包含空白，但是这种情况下必须使用引号，因为属性之间是允许使用空白分割的

  • 如下是正确定义的方法

    <img src="c:/Documents and Settings/test.jpg" width=256 height=34/>

  • 下面则是错误的：

    <img src=c:/Documents and Settings/test.jpg width=256 height=34/>

  • 总结：定义属性值的时候一定是连续字符序列，如果不是连续序列则要加引号进行标注

  • 属性中的引号：常见的引号有双引号（”）和单引号（’）。它们在属性值中的使用方式是相同的，只是选择哪种方式完全取决于个人偏好。（但是也有特例情况，下面将介绍）

  • 引号嵌套

    • 如果属性值中包含单引号（'），则可以使用双引号（"）来包围整个属性值。

      • 例如： <tag attribute="value with 'single quotes'"> 。

    • 如果属性值中包含双引号（"），则可以使用字符实体引用（如 &quot; ）来代替双引号。

      • 例如： <tag attribute="value with &quot;double quotes&quot;"> 。

    • 补充：数字字符引用（如 &#39; ）可以代替单引号

  • 标准属性：通用于每个标签的属性（并且基本是可选的）

  • 语言属性：语言属性用于指定元素内容的自然语言和文本方向：

    • lang：指定元素内容所使用的语言，如 en 表示英语， zh 表示汉语。

    • dir：指定文本的阅读方向，如 ltr 表示从左到右， rtl 表示从右到左。

  • 键盘属性：键盘属性用于增强网页上使用键盘导航的灵活性：

    • accesskey：为元素分配一个键盘快捷键，便于使用键盘导航。
    • tabIndex：指定元素在制表顺序中的位置，方便键盘导航。（指定元素在使用制表键便利链接和表单控件时所形成的访问顺序中的位置）

  • 核心属性：核心属性适用于任何元素的开始标签内：

    • class：指定元素所属的一个或多个类，用于应用相同的 CSS 样式。
    • id：为元素指定唯一的标识符。
    • style：为元素指定内联 CSS 样式。
    • title：为元素提供一个文本标题，通常会在用户界面上显示。

# 元素嵌套

元素嵌套：也可以将一个元素置于其他元素之中 —— 称作嵌套

  • <p>My cat is <strong>very</strong> grumpy.</p>
    • 必须保证元素嵌套次序正确：本例首先使用 <p> 标签，然后是 <strong> 标签，因此要先结束 <strong> 标

# 空元素

空元素：不包含任何内容的元素称为空元素。

  • 比如 <img> 元素：

    <img src="images/firefox-icon.png" alt="My test image" />
    • 本元素包含两个属性，但是并没有 </img> 结束标签，元素里也没有内容。这是因为图像元素不需要通过内容来产生效果，它的作用是向其所在的位置嵌入一个图像。
    • 最后的斜杠 / ，它在这里表示 <img> 元素的结束。在 HTML 中，一些元素可以使用自闭合的方式来写，例如 <img> 、 <br> 等，它们没有闭合标签，而是在标签末尾直接使用 / 来结束。

# 结构

HTML 文档的基本结构如下：

  • 文档类型声明
  • html 标签对
  • head 标签对
  • body 标签对

# 实例

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width" />
    <title>My test page</title>
  </head>
  <body>
    <img src="images/firefox-icon.png" alt="My test image" />
  </body>
</html>

  1. 结构解析：

    • <!DOCTYPE html> ：

      • 文档类型。这是必不可少的开头。用于保证文档正常读取。

    • <html></html> ：

      • <html> 元素。该元素包含整个页面的所有内容，有时候也称作根元素。里面也包含了 lang 属性，写明了页面的主要语种。

    • <head></head> ：

      • <head> 元素。所有那些你加到页面中，且不向用户展示的页面内容，都以这个元素为容器。其中包含诸如提供给搜索引擎的关键字和页面描述、用于设置页面样式的 CSS、字符集声明等等。
      • 可以包含一些辅助性标签，如 <title><base><link><meta><style><script> 。

    • <body></body> ：

      • <body> 元素。该元素包含期望让用户在访问页面时看到的全部内容，包括文本、图像、视频、游戏、可播放的音轨或其他内容。

  2. <head> 内容解析:

    • <meta charset="utf-8"> —— 该元素指明你的文档使用 UTF-8 字符编码，UTF-8 包括世界绝大多数书写语言的字符。它基本上可以处理任何文本内容。以它为编码还可以避免以后出现某些问题，没有理由再选用其他编码。
    • <meta name="viewport" content="width=device-width"> —— 视口元素 可以确保页面以视口宽度进行渲染，避免移动端浏览器上因页面过宽导致缩放。
    • <title></title> —— <title> 元素。该元素设置页面的标题，显示在浏览器标签页上，也作为收藏网页的描述文字。

# 常见元素

# 图像

<img src="images/firefox-icon.png" alt="My test image" />

属性：

  • src 属性是必须的，包含了你想嵌入的图片的路径（URL）。
  • alt 属性包含一条对图像的文本描述，这不是强制性的。
    • 如果由于某种原因无法加载图像，普通浏览器也会在页面上显示 alt 属性中的备用文本
    • 也用于无障碍阅读

# 标记文本

# 标题 (Heading)

标题元素：可用于指定内容的标题和子标题

  • HTML 文档也是一样。HTML 包括六个级别的标题， <h1> – <h6> ，一般最多用到 3-4 级标题。

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

# 段落 (Paragraph)

段落元素： <p> 元素是用来定义 HTML 页面中的段落的。

  • 通常用于包裹和指定常规的文本内容。

    <p>这是一个段落</p>

# 列表 (List)

  1. 列表元素：Web 上的许多内容都是列表，HTML 有一些特别的列表元素。标记列表通常包括至少两个元素。

    • 最常用 的列表类型为：

      • 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。使用 <ul> 元素包裹列表项。

      • 有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。使用 <ol> 元素包裹列表项。

    • 列表的每个项目用一个列表项目（List Item）元素 <li> 包裹。

  2. 实例

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

    <p>
      At Mozilla, we're a global community of technologists, thinkers, and builders
      working together…
    </p>

    可以这样更改标记：

    • 先用 <ul> 或者 <ol> 包裹
    • 再在被包裹的域内使用 <li> 陈列项目
    <p>At Mozilla, we're a global community of</p>
    <ul>
      <li>technologists</li>
      <li>thinkers</li>
      <li>builders</li>
    </ul>
    <p>working together…</p>
    以下提供二级列表的例子
    • 在原来 <li> </li> 标签内再次使用 <ul></ul>或者<ol></ol> 标签对
    • 再次在被包裹的域内使用 <li> 陈列项目
    <ul>
      <li>Milk</li>
      <li>
        Cheese
        <ul>
          <li>Blue cheese</li>
          <li>Feta</li>
        </ul>
      </li>
    </ul>
# 链接
锚元素：链接非常重要 — 它们赋予 Web 网络属性。要植入一个链接，我们需要使用一个简单的元素 <a> — a 是 "anchor" （锚）的缩写。要将一些文本添加到链接中，只需按以下步骤操作：
  1. 选择一些文本。比如 “Mozilla Manifesto”。
  2. 将文本包含在 <a> 元素内，就像这样：
    <a>Mozilla Manifesto</a>
  3. 为此 <a> 元素添加一个 href 属性，就像这样：
    <a href="">Mozilla Manifesto</a>
  4. 把属性的值设置为所需网址：
    <a href="https://www.mozilla.org/zh-CN/about/manifesto/">Mozilla Manifesto</a>
PS
如果网址开始部分省略了 https:// 或者 http:// ，可能会得到错误的结果。在完成一个链接后，可以试着点击它来确保指向正确。
href 这个名字可能开始看起来有点令人费解，代表超文本引用（ hypertext reference）