猫偶尔会吃草
猫偶尔会吃草

HTML常见标签/元素

标题（Heading）

标题元素可用于指定内容的标题和子标题。HTML 包括六个级别的标题，

–
，一般最多用到 3-4 级标题。

主标题


顶层标题


子标题


次子标题
  • 关于标题的使用建议：
    • 一般每个页面使用一次

      （这是顶级标题，所有其他标题位于层次结构中的下方）。

    • 确保在层次结构中以【正确的顺序】使用标题。不要使用

      来表示副标题，后面跟

      来表示副副标题（这是没有意义的，会导致奇怪的结果）。

    • 在可用的六个标题级别中，应该在每页使用不超过三个，除非确认有必要使用更多。具有许多级别的文档（即，较深的标题层次结构）会变得难以操作并且难以导航。在这种情况下，如果可能，建议将内容分散在多个页面上。

段落（Paragraph）

元素是用来指定段落的。通常用于指定常规的文本内容：

这是一个段落

重点强调

  • 强调（emphasis）

当我们想要在一句话中强调/重读某些词，以便隐含的说出我们想要说的意思。比如，接下来的两个句子就有不同的含义.

I am glad you weren't late.

I am glad you weren't late. (ps: 此句中“glad”为斜体字体)

第一句话听起来真的像松了一口气因为没有迟到。相反，第二句话听起来具有讽刺性而且有隐含的攻击性，表达对一个人迟到的恼怒。

在HTML中我们用（emphasis）元素来标记这样的情况。这样做既可以让文档读起来更有趣，也可以被屏幕阅读器识别出来，并以不同的语调发出。浏览器默认风格为斜体，但你不应该纯粹使用这个标签来获得斜体风格，为了获得斜体风格，你应该使用元素和一些CSS，或者是元素（见下文）。

I am glad you weren't late.
  • 非常重要(strong importance)

在HTML中我们用 (strong importance) 元素来标记这样的请况。这样做既可以让文档更加地有用，也可以被屏幕阅读器识别出来，并以不同的语调发出。浏览器默认风格为粗体，但你不应该纯粹使用这个标签来获得粗体风格，为了获得粗体风格，你应该使用元素和一些CSS，或者是 元素 (见下文)。

This liquid is highly toxic.



I am counting on you. Do not be late!

如有需要你可以将strong元素和em元素嵌套在其他的标签中：

This liquid is highly toxic —
if you drink it, you may die.

列表（List）

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

  1. 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个
      元素包围。
    • 有序列表（Ordered List）中项目的顺序很重要，就像烹调指南。用一个
        元素包围。

      列表的每个项目用一个列表项目（List Item）元素

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

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

      可以这样更改标记：

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

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


      我们致力于……

      链接

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

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

      2. 将文本包含在 元素内，就像这样：

         Mozilla 宣言

      3. 为此 元素添加一个 href 属性，就像这样：

         Mozilla 宣言

      4. 把属性的值设置为所需网址：

         Mozilla 宣言

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

      href 这个名字可能开始看起来有点令人费解。如果你觉得不好记，那么记住它代表的是超文本引用（ hypertext reference）。

      表格

      表格是由行和列组成的结构化数据集(表格数据)，它能够使你简捷迅速地查找某个表示不同类型数据之间的某种关系的值 。比如说，某个人和他的年龄，一天或是一周，当地游泳池的时间表 。

      1. 每一个表格的内容都包含在这两个标签中 :

        . 在你的 HTML 的 中添加这些内容。

      2. 在表格中，最小的内容容器是单元格, 是通过 元素创建的 ('td' 代表 'table data'). 把下面的内容添加到你的表格标签中:

         Hi, I'm your first cell.

      3. 如果想让第一行停止增加，并让单元格从第二行开始，我们需要使用 元素 ('tr' 代表 'table row'). 让我们现在来证实一下。

        • 把你已经创建好的 4 个单元格放入 标签, 就像:
        
    Hi, I'm your first cell.
    I'm your second cell.
    I'm your third cell.
    I'm your fourth cell.
      • 现在你已经实现了一行，可以继续增加至两行、三行。每一行都需要一个额外的 元素来包装，每个单元格的内容都应该写在 中。
      1. 为了将表格的标题在视觉上和语义上都能被识别为标题，你可以使用 元素 ('th' 代表 'table header'). 用法和 是一样的，除了它表示为标题，不是普通的单元格以外。进入你的 HTML 文件, 将表格中应该是标题的 元素标记的内容，都改为用 元素标记。

      表单

      HTML表单是用户和web站点或应用程序之间交互的主要内容之一。它们允许用户将数据发送到web站点。大多数情况下，数据被发送到web服务器，但是web页面也可以自己拦截它并使用它。

      HTML表单是由一个或多个小部件组成的。这些小部件可以是文本字段(单行或多行)、选择框、按钮、复选框或单选按钮。大多数情况下，这些小部件与描述其目的的标签配对——正确实现的标签能够清楚地指示视力正常的用户和盲人用户输入表单所需的内容。

      HTML表单和常规HTML文档的主要区别在于，大多数情况下，表单收集的数据被发送到web服务器。在这种情况下，您需要设置一个web服务器来接收和处理数据。如何设置这样的服务器超出了本文的范围，但是如果您想了解更多，请参阅模块后面的发送表单数据。

      • 元素

      所有HTML表单都以一个元素开始：

      这个元素正式定义了一个表单。就像

      元素或

      元素，它是一个容器元素，但它也支持一些特定的属性来配置表单的行为方式。它的所有属性都是可选的，但至少要设置action属性和method属性，这被认为是最佳实践。

      action 属性定义了在提交表单时,应该把所收集的数据送给谁(/那个模块)(URL)去处理。
      method 属性定义了发送数据的HTTP方法(它可以是“get”或“post”).

      通过他们各自的for 属性和 id 属性，

      如果标签没有正确设置，屏幕阅读器只会读出Edit text blank”之类的东西，这不太有帮助。

      注意，一个小部件可以嵌套在它的

      尽管可以这样做，但人们认为设置for属性才是最好的做法，因为一些辅助技术不理解标签和小部件之间的隐式关系。

      元素用于为基于Web的表单创建交互式控件，以便接受来自用户的数据; 可以使用各种类型的输入数据和控件小部件，具体取决于设备和user agent。