HTML 标签

单标签与多标签

在学习标签之前，先了解一下单标签和多标签的概念

1. 单标签：不能拥有元素内容的标签，比如：<br>​​​、<hr>​​​、<link>​​​
2. 多标签：可以拥有元素内容的标签，比如：<div>​​​、<h1>​​​

块级元素和行级元素

HTML 中大部分元素都是”块级元素“或”行内元素“：

1. 块级元素：独占一行，能包含其他块级元素和行内元素
2. 行内元素：也称为内联元素，宽度随内容而变化，它只能包含行内元素

全局属性

全局属性是所有 HTML 元素共有的属性，它们可以用于所有元素，即使属性可能对某些元素不起作用。下面是一些常用的全局属性：

1. ​id​：定义元素的唯一标识符，标识符在整个文档中必须是唯一的
2. ​style​：内联的 CSS 样式
3. class​：元素的类名列表
4. ​title​：包含元素的相关信息的文本

元数据

元数据含有页面的相关信息，包括样式、脚本及数据。

1. ​<title>​​：文档标题，显示在浏览器标题栏或标签页上，只能包含文本
2. ​<link>​​：引用外部资源
3. ​<style>​​：定义了样式
4. ​<script>​​：定义了文档脚本
5. ​<base>​​：指定文档中相对路径的根路径，默认只能有一个
6. ​<meta>​​：表示不能有上述标签表示的元数据信息

文本内容

标题

​<h>​~<h6>​：标题，<h1> ​最大，<h6> ​最小。标题很重要。因为搜索引擎使用标题为网页的结构和内容编制索引。用户可以通过标题来快速浏览网页，不要仅仅为了显示粗体或大号文本而使用标题。

<h1>这是一个标题</h1>

分割线

<hr>

段落

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

区块

<div>块级元素</div>
<span>行内元素</span>

链接

使用链接我们可以跳转到其他网页、同一页面的其他位置或者下载文件

<!--跳转到必应搜索-->
<a href="https://cn.bing.com">必应搜索</a>

<!--跳转到同一页的title1-->
<a href="title1">标题1</a>

<!--一个可以点击的图片-->
<a href="https://developer.mozilla.org/en-US/">
  <img src="mdn_logo.png"
       alt="MDN logo" />
</a>

常用属性：

• ​href​​：超链接或者其他元素的 id​​

• ​target​​：指定在什么地方显示链接的资源

  • ​_self​​:默认值，当前页面跳转
  • ​_blank​​：新窗口打开
  • ​_parent​​：在父窗口中打开
  • ​_top​​：在当前窗体打开，并替换整个窗体（框架页）

文本格式化（了解）

标签	描述
​<b>​	定义粗体文本
​<em>​	定义着重文字
​<i>​	定义斜体字
​<small>​	定义小号字
​<strong>​	定义加重语气
​<sub>​	定义下标字
​<sup>​	定义上标字
​<ins>​	定义插入字
​<del>​	定义删除字

计算机输出（了解）

标签	描述
​<code>​	定义计算机代码。
​<kbd>​	定义键盘码。
​<samp>​	定义计算机代码样本。
​<tt>​	定义打字机代码。
​<var>​	定义变量。
​<pre>​	定义预格式文本。

引文，引用，及标签定义（了解）

标签	描述
​<abbr>​	定义缩写。
​<acronym>​	定义首字母缩写。
​<address>​	定义地址。
​<bdo>​	定义文字方向。
​<blockquote>​	定义长的引用。
​<q>​	定义短的引用语。
​<cite>​	定义引用、引证。
​<dfn>​	定义一个定义项目。

列表

有序列表

使用数字给每一个列表项做标记

<ol>
  <li>猫</li>
  <li>狗</li>
</ol>

无序列表

<ul>
  <li>猫</li>
  <li>狗</li>
</ul>

描述列表

  <dl>
    <dt>猫</dt>
    <dd>猫是液体</dd>
    <dt>狗</dt>
    <dd>狗会拆家</dd>
  </dl>

标签	描述
​<ol>​​	定义有序列表
​<ul>​​	定义无序列表
​<li>​​	定义列表项
​<dl>​​	定义列表
​<dt>​​	自定义列表项目
​<dd>​​	定义自定列表项的描述

ul 是 unordered lists 的缩写 (无序列表)

li 是 list item 的缩写 （列表项目）

ol 是 ordered lists 的缩写（有序列表）

dl 是 definition lists 的英文缩写 (自定义列表)

dt 是 definition term 的缩写 (自定义列表组)

dd 是 definition description 的缩写（自定义列表描述）

表格

下面这个例子使用了所有的表格元素

  <table border="1">
    <caption>标题</caption>
    <colgroup>
      <col span="2" style="background-color:red">
      <col style="background-color:yellow">
    </colgroup>
    <!--页眉-->
    <thead>
      <tr>
        <th>ISBN</th>
        <th>Title</th>
        <th>Price</th>
      </tr>
    </thead>
    <!--主体-->
    <tbody>
      <tr>
        <td>3476896</td>
        <td>My first HTML</td>
        <td>$53</td>
      </tr>
      <tr>
        <td>5869207</td>
        <td>My first CSS</td>
        <td>$49</td>
      </tr>
    </tbody>
    <!--页脚-->
    <tfoot>
      <tr>
        <td colspan="2">合计</td>
        <td>$102</td>
      </tr>
    </tfoot>
  </table>

标签	描述
​<table>​	定义表格
​<th>​	定义表格的表头
​<tr>​	定义表格的行
​<td>​	定义表格单元
​<caption>​	定义表格标题
​<colgroup>​	定义表格列的组
​<col>​	定义用于表格列的属性
​<thead>​	定义表格的页眉
​<tbody>​	定义表格的主体
​<tfoot>​	定义表格的页脚

tr 是 table row 的缩写 （表格中的一行）

th 是 table header cell 的缩写 （表格中的表头）

td 是 table data cell 的缩写 （表格中的一个单元格）

表单

标签	描述
​<form>​	定义供用户输入的表单
​<input>​	定义输入框
​<textarea>​	定义文本域
​<label>​	定义了表单元素的标签，一般为输入标题
​<fieldset>​	定义了一组相关的表单元素，并使用外框包含起来
​<legend>​	定义了 <fieldset>​ 元素的标题
​<select>​	定义了下拉选项列表
​<optgroup>​	定义选项组
​<option>​	定义下拉列表中的选项
​<button>​	定义一个点击按钮
​<datalist>​	指定一个预先定义的输入控件选项列表
​<keygen>​	定义了表单的密钥对生成器字段
​<output>​	定义一个计算结果

图像和多媒体

图片

<img src="url" alt="some_text">

常用属性：

• ​src​：图片路径
• ​alt​：图片加载失败后的替代文本
• ​width​：图片宽度
• ​heigth​：图片高度
• ​usemap​：与图片相关联的图像映射，值以 # ​开头

图像映射

使用 <map> ​和 <area> ​标签，可以定义一个图片的可点击链接区域

<img src="planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="rect" coords="0,0,82,126" alt="Sun" href="sun.htm">
  <area shape="circle" coords="90,58,3" alt="Mercury" href="mercur.htm">
  <area shape="circle" coords="124,58,8" alt="Venus" href="venus.htm">
</map>

​<area> ​常用属性：

• ​accesskey​：为元素指定一个获取焦点的快捷键

• sharp​：链接区域的形状

• ​croods​：设置链接区域坐标值，这个值的数值和意义取决于所描述的链接区域的形状

  • 矩形：值为两个 x，y，对应：左上游侠
  • 圆形：值为 x，y，r，对应圆心坐标和半径
  • 多边形：值为多个 x，y 值，对应每一个顶点

音频

​<audio> ​可以包含一个或多个音频资源，音频资源可以使用 src ​属性或者 <source> ​元素来指定，

<audio
    controls
    src="/media/cc0-audio/t-rex-roar.mp3">
        <!--添加下载选项-->
        <a href="/media/cc0-audio/t-rex-roar.mp3">
            Download audio
        </a>
</audio>

常用属性：

• ​autoplay​：布尔值，是否自动播放
• ​controls​：如果添加了这个属性，浏览器会提供一个播放器
• ​currentTime​：指定音频播放位置

视频

<video controls width="250">
    <source src="/media/cc0-videos/flower.webm" type="video/webm">

    <source src="/media/cc0-videos/flower.mp4" type="video/mp4">

    Download the
    <a href="/media/cc0-videos/flower.webm">WEBM</a>
    or
    <a href="/media/cc0-videos/flower.mp4">MP4</a>
    video.
</video>

常用属性：

• ​autoplay​：布尔值，是否自动播放
• ​controls​：如果添加了这个属性，浏览器会提供一个播放器
• ​currentTime​：指定音频播放位置
• ​poster​：海报帧图片路径，默认将视频第一帧作为海报帧来显示

内嵌内容（了解）

除了常规的多媒体内容，HTML 还可以嵌入各种其他的内容，即使并不容易交互

元素	描述
​<embed>​	将外部内容嵌入到文档指定位置
​<iframe>​	将一个 HTML 页面嵌入到当前页面
​<object>​	引用一个外部资源
​<picture>​	通过包含多个 <source>​ 元素和一个 <img>​ 元素来为不同场景提供不同图像
​<portal>​	将一个 HTML 页面嵌入到当前页中
​<source>​	为 <picture>​、<audio>​ 或 <video>​ 指定多个媒体资源。它通常用于多种格式 提供相同的媒体内容，以提供不同浏览器的兼容性

SVG 和 MathML（了解）

SVG

SVG指的是可伸缩矢量图形，它在改变尺寸的情况下图形质量不会有损失。<svg>​是HTML中绘制SVG图形的容器，我们通过添加动画元素、描述性元素、形状元素等绘制图形，下面的例子绘制了一个红色的圆形：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
   <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

MathML

用于编写数学公式的一组元素，这组元素使用<math>​标签作为顶级元素

脚本

为了创建动态内容和 Web 应用程序，HTML 支持使用脚本语言。有一些特定的元素用于支持此功能

元素	描述
​<canvas>​	用来通过 canvas scripting API 或 WebGL API 绘制图形及图形动画的容器元素。
​<noscript>​	定义脚本未被执行时（页面的脚本类型不受支持，或当前浏览器关闭了脚本）的替代内容。
​<script>​	用于嵌入可执行脚本或数据。这通常用作嵌入或者引用 JavaScript 代码。<script>​

参考连接

HTML 元素参考 - HTML（超文本标记语言） | MDN (mozilla.org)

HTML 教程 | 菜鸟教程 (runoob.com)