@artman328 2022-05-12T11:21:13.000000Z 字数 9477 阅读 521

HTML 标签大全

html 标签

Document Structure 文档结构

The following tags define the basic HTML document structure:
以下标签定义基本的文档结构：

<html>: This tag acts as a container for every other element in the document except the <!DOCTYPE html> tag.
这个标签是一个除<!DOCTYPE html>标签外的其它所有标签的容器。
<head>: Includes all the document's metadata.
包含了所有的文档元数据（描述数据的数据）。
<title>: Defines the title of the document which is displayed in the browser's title bar.
定义文档标题，它被显示在浏览器的标题栏。
<body>: Acts as a container for the document's content that gets displayed on the browser.
表现为显示在浏览器中的文档内容的容器。

Here's what all that looks like:
它们像是这样：

<!DOCTYPE html>
<html lang="en">
  <head>
    <title> My HTML Cheat Sheet </title>
  </head>
  <body></body>
</html>

<!DOCTYPE html> specifies that we are working with an HTML5 document.
<!DOCTYPE html> 指示我们正工作于 HTML5 文档。

The following tags give additional information to the HTML document:
以下标签给予文档附加信息：

<meta>: This tag can be used to define additional information about the webpage.
这个标签可以被用于定义网页的附加信息。
<link>: Used to link the document to an external resource.
用于将外部资源链接到文档。
<style>: Used for defining styles for the document.
用于定义文档样式。
<scrip>: Used to write code snippets (usually JavaScript) or to link the document to an external script.
用于编写代码片段（通常是 JavaScript）或者将外部脚本链接到文档。


<head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <title>My HTML Cheat Sheet</title>
    <style>
      * {
        font-size: 100px;
      }
    </style>
    <script>
      alert('This is an alert');
    </script>
 </head>

The <h1> to <h6> tags show different levels of headings in a document, with <h1> being the highest and <h6> being the lowest.
<h1>到<h6>显示文档中不同级别的标题，<h1>为最高级别，<h6>为最低级别。

<h1> Heading 1 </h1>
<h2> Heading 2 </h2>
<h3> Heading 3 </h3>
<h4> Heading 4 </h4>
<h5> Heading 5 </h5>
<h6> Heading 6 </h6>

You use the <p> tag to create a paragraph.
你使用<p>标签创建一个段落。

<p> This is a paragraph </p>

The <div> tag can be used to divide and style separate sections of the document. It also acts as a parent container for other elements. Here's how it works:
<div>标签能够用于划分文档的不同部分以对其进行样式定义。它也表现为其它元素的父容器。以下是他的用法：

<div class="newsSection">
  <h1> This is the news section </h1>
  <p> Welcome to the news section! </p>
</div>
<div class="contactSection">
  <h1> This is the contact us section </h1>
  <p> Hello world! </p>
</div>

We also have the <span> tag. This is similar to <div> but you use it as an inline container.
我们也有 <span> 标签，与 <div> 类似，但它是一个行内容器。

<p> I love <span class="keyword"> coding! </span></p>

Images in HTML 图像

In HTML, we use the <img/> tag to display images.
在 HTML 中，u我们用 <img/> 标签来显示图像。

Here are some attributes of the <img/> tag:
这里是 <img/> 标签的一些属性：

src is used to specify the path to the location of the image on your computer or the web.
src 用于指定在你电脑或网络上的图像的位置。（src: source, 资源）

alt defines an alternate text that displays if the image cannot be rendered. The alt text is also good for screen readers.
alt 定义了当图像不存在是用于显示的替换文字。这些文字对屏幕阅读器非常有用。（对搜索引擎也非常重要！）

height specifies the height of the image.
height 指定图像的高度。（通常推荐在 CSS 中指定）

width specifies the width of the image.
width 指定图像的宽度。（通常推荐在 CSS 中指定）

border specifies the thickness of the borders, which is set to 0 if no border is added.
border 指定边框的粗细，0 表示无边框。（通常推荐在 CSS 中指定）

<img src="ihechikara.png" alt="a picture of Ihechikara" width="300" height="300">

Text Formatting in HTML 文本格式化

We have many ways to format text in HTML. Let's go over them now briefly.
我们有很多方法格式化HTML中的文本。下面简短地浏览一下。
（以下提及的显示样式是默认样式）

<i> displays text in italics.
<i> 显示斜体文本。

<b> displays text in bold.
<b> 显示粗体文本.

<strong> displays text in bold. Used to make important emphasis.
<strong> 用于强调文本，以粗体显示。

<em> another emphasis tag that displays text in italics.
<em> 另一个用于强调文本的标签，以斜体显示。

<sub> defines subscript text, like the two atoms of oxygen in CO₂.
<sub> 定义下标文本, 如两个氧原子的2： CO₂.

<sup> defines a superscript like the power of a number, 10².
<sup> 定义上标文本，如平方中的2： 10².

<small> reduces the size of text.
<small> 缩小文本字号。

<del> defines deleted text by striking a line through the text.
<del> 在文本行中添加一条贯穿线以定义被删除的文本。

<ins> defines inserted text which is usually underlined.
<ins> 定义被插入的文本，通常加了下划线。

<blockquote> is used to enclose a section of text quoted from another source.
<blockquote> 用于括住一段从其它地方引用的文本。

<q> is used for shorter inline quotes.
<q> 用于一段行内较短的引用。

<cite> is used for citing the author of a quote.
<cite> 用于指示引用的作者。

<address> is used for showing the author's contact information.
<address> 用于显示作者的联系信息（地址）。

<abbr> denotes an abbreviation.
<abbr> 代表一个缩略词。

<code> displays code snippets.
<code> 用于显示代码片段。

<mark> highlights text.
<mark> 高亮显示文本。

<p><i> italic text </i></p>
<p><b>bold text </b></p>
<p><strong> strong text </strong></p>
<p><em> strong text </em></p>
<p><sub> subscripted text </sub></p>
<p><sup> superscripted text </sup></p>
<p><small> small text </small></p>
<p><del> deleted text </del></p>
<p><ins> inserted text </ins></p>
<p><blockquote> quoted text </blockquote></p>
<p><q> short quoted text </q></p>
<p><cite> cited text </cite></p>
<p><address> address </address></p>
<p><abbr> inserted text </abbr></p>
<p><code> code snippet </code></p>
<p><mark> marked text </mark></p>

There's the <br/> tag, which we use for creating line breaks. This has no closing tag.
有一个 <br/> 标签，它用于断行，它没有结束标签。

<p> I love <br/> freeCodeCamp </p>

The <hr/> tag is used to create a horizontal line. It also has no closing tag.
<hr/> 标签用于创建一条水平分隔线，它也没有结束标签。

Links 链接

The <a> tag, also known as the anchor tag, is used to define hyperlinks that link to other pages (external web pages included) or to a section of the same page.
<a> 标签，也被认为是锚标签，用于定义到其它页面（包括外部站点的页面）或到本页面其它部分的链接。

Here are some attributes of the <a> tag:
这里是 <a> 标签的一些属性：

href specifies the URL the link takes the user to when clicked.
href 指定被点击时要转到的链接地址。

download specifies that the target or resource clicked is downloadable.
download 说明点击的链接时可以下载的。

target specifies where the link is to be opened. This could be in the same or separate window.
target 指明在哪里打开链接，可以是同一窗口或新窗口。（target: 目标）

<a href="https://www.freecodecamp.org/" target="_blank"> Learn to code </a>

Lists 列表

The <ol> tag defines an ordered list while the tag defines an unordered list.
<ol> 标签定义有序列表，而 <ul> 标签定义无序列表。

The <li> tag is used to create items in the list.
<li> 标签用于创建列表项（list item）。

<!-- Unordered list -->
<ul>
  <li> HTML </li>
  <li> CSS </li>
  <li> JavaScrip t</li>
</ul>
<!-- Ordered list -->
<ol>
  <li> HTML </li>
  <li> CSS </li>
  <li> JavaScript </li>
</ol>

Forms 表单

The <form> tag is used to create a form in HTML. Forms are used to get user inputs. Here are some attributes associated with the <form> element:
<form> 标签用于创建表单。表单用于获取用户输入。这里是与 <form> 相关的一些属性：

action specifies where the form information goes when submitted.
action 提交表单后浏览器要去到的地址。

target specifies where to display the form's response.
target 指定在哪里显示表单的响应。

autocomplete can have a value of on or off.
autocomplete 取值可以时 on 或者 off。（用于指示输入时是否启用自动完成）

novalidate specifies that the form should not be validated.
novalidate 指示表单不需要验证（输入的合法性）。

method specifies the HTTP method used when sending form data.
method 指明发送表单数据的 HTTP 方法。

name specifies the name of the form.
name 指明表单的名称。

required specifies that an input element cannot be left empty.
required 用于指示一个输入元素不能为空。

autofocus gives focus to the input elements when the page loads.
autofocus 指明一个输入元素在页面载入时自动获得焦点。

disabled disables an input element so the user can longer interact with it.
disabled 指明一个输入元素被禁用，不能够被输入。

placeholder is used to give users a hint on what information is required for an input element.
placeholder 用于指明一个输入元素的输入提示。（placeholder: 占位者）

Here are other input elements associated with forms:
这里时域表单相关的其它输入元素：

<textarea> for getting user text input with multiple lines.
<textarea> 获取用户的多行输入。

<select> specifies a list of options the user can choose from.
<select> 指定用户可以选择的下拉列表。

<option> creates an option under the select element.
<option> 用于创建下拉列表的列表项。

<input> specifies an input field where the user can enter data. This has a type attribute that specifies what type of data the user can input.
<input> 用于接受用户的输入，它有一个 type 属性用于指明用户能够输入的数据类型。

<button> creates a button.
<button> 创建一个按钮。

<form action="/info_url/" method="post">
    <label for="firstName"> First name: </label>
    <input type="text" 
           name="firstName" 
           placeholder="first name" 
           required
    >
    <label for="lastName"> Last name: </label>
    <input type="text" 
           name="lastName" 
           placeholder="last name" 
           required
    >
    <label for="bio"> Bio: </label>
    <textarea name="bio"></textarea>
    <select id="age">
      <option value="15-18">15-18</option>
      <option value="19-25">19-25</option>
      <option value="26-30">26-30</option>
      <option value="31-36">31-36</option>
    </select>
    <input type="submit" value="Submit">
  </form>

Tables 表格

The <table> tag defines a HTML table.
<table> 标签定义了一个 HTML 表格。

<thead> specifies information for each column in a table.
<thead> 表头，用于提供各列的信息名称。

<tbody> specifies the body or content of the table.
<tbody> 指明表格的体部（表格内容主体）.

<tfoot> specifies the footer information of the table.
<tfoot> 指明表格的脚部信息。

<tr> denotes a row in the table.
<tr> 代表一个表格行（table row）.

<td> denotes a single cell in the table.
<td> 代表一个单元个内的数据（table data）。

<th> denotes the value column's heading.
<th> 代表一个表头单元格内的数据（table heading of a column）。

<table>
  <thead>
    <tr>
      <th> Course </th>
      <th> Progress </th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td> HTML </td>
      <td> 90% </td>
    </tr>
    <tr>
      <td> CSS </td>
      <td> 80% </td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td> JavaScript </td>
      <td> 95% </td>
    </tr>
  </tfoot>
</table>

Tags introduced in HTML5 - HTML5引入的标签

Here are some tags introduced in HTML5:
这里时 HTML5 引入的一些标签：

<header> specifies the webpage header
<header> 指明一个页面的头部

<footer> specifies the webpage footer.
<footer> 指明一个页面的脚部

<main> specifies a main content section.
<main> 指明主要内容部分。

<article> specifies an article's section, usually for content that can stand alone on the webpage.
<article> 指明一个文章部分，通常用于可独立存在的页面内容。

<section> is used to create separate sections.
<section> 用于创建一个内容的节。

<aside> is usually used to when placing items in a sidebar.
<aside> 通常用于创建侧边内容。

<time> is used for formatting date and time.
<time> 用于格式化日期和时间。

<figure> is used for figures like charts.
<figure> 用于图表。

<figcaption> denotes a description of a figure.
<figcaption> 指明图表标题。

<nav> is used to nest navigation links.
<nav> 用于导航（通常为一组链接）。

<meter> is used to measure data within a range.
<meter> 用于在某个范围度量数据。

<progress> is used as a progress bar.
<progress> 用于进度条。

<dialog> is used to create a dialog box.
<dialog> 用于创建一个对话框。

<audio> is used to embed an audio file in the web page.
<audio> 用于嵌入音频文件。

<video> is used to embed video.
<video> 用于嵌入视频。

  <header>
    <h1> Welcome </h1>
    <h3> Hello World! </h3>
  </header>
  <nav>
    <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Services</a></li>
        <li><a href="#">About us</a></li>
    </ul>
  </nav>
  <article>
    <h1> An article about us </h1> 
    <p> Article content </p>
    <aside>
      <p> It's sunny today </p>
    </aside>
  </article>
  Progress: <progress min="0" max="100" value="50"> </progress>
  <footer> Copyright 2022-2099. All Rights Reserved. </footer>