HTML基本标签（一）简介 HyperText Markup Language ，简称 HTML ,超文本标记语言标题

简介

HyperText Markup Language ，简称 HTML ,超文本标记语言

标题

`<h1>~<h6>`标签

标题（Heading）是通过 <h1> - <h6> 标签进行定义的。

<h1> 定义最大的标题。 <h6> 定义最小的标题。

1到6号标题与1到6号字体逆序对应

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

`<hr>`水平线标签

<hr>标签在HTML页面上创建水平线，用于分隔内容

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

段落

`<p>`标签

<p>标签可以将文档分割成若干段落

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

`<br>`折行标签

若一个段落太长，但不想重新生成一个新段落的情况下，可使用折行标签。 <br /> 标签是一个空标签，意味着它没有结束标签。所以这样是错误的：<br></br>

<p>这个<br>段落<br>演示了分行的效果</p>

区分 <br> 、<br/> 以及 <br /> <br> 是 HTML 写法。 <br />是 XHTML1.1 的写法, 也是 XML 写法。 <br/> 是 XHTML 为兼容 HTML 的写法,也是 XML 写法。 HTML5 因为兼容 XHTML，所以三种写法都可以使用。

文本格式化

文本格式化标签

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

<b>这个文本是加粗的</b>

<strong>这个文本是加粗的</strong>

<em>这个文本是斜体的</em>

<i>这个文本是斜体的</i>

<big>这个字体是放大的</big>

<small>这个文本是缩小的</small>

这个文本包含
<sub>下标</sub>

这个文本包含
<sup>上标</sup>

"计算机输出" 标签

以下元素都是短语元素。虽然这些标签定义的文本大多会呈现出特殊的样式，但实际上，这些标签都拥有确切的语义。

我们并不反对使用它们，但是如果您只是为了达到某种视觉效果而使用这些标签的话，我们建议您使用样式表，那么做会达到更加丰富的效果。

标签	描述
`<code>`	定义计算机代码
`<kbd>`(已废弃)	定义键盘码
`<samp>`	定义计算机代码样本
`<var>`	定义变量
`<pre>`	定义预格式文本

<pre>标签元素中的文本通常会保留空格和换行符。而文本也会呈现为等宽字体,常见应用就是用来表示计算机的源代码。

<code>一段电脑代码 print("Hello World")</code><br>

<samp>计算机样本</samp><br>

<kbd>键盘输入</kbd><br>

<var>变量</var>

<pre>
此例演示如何使用 pre 标签
对空行和 空格
进行控制
</pre>

HTML 引文,引用,及标签定义

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

`<abbr>` 标签

用来表示一个缩写词或者首字母缩略词，如"WWW"或者"NATO"。
属性
1. title: 在鼠标指针移动到 <abbr> 元素上时显示出简称/缩写的完整版本

  The<abbr title="World Health Organization">WHO</abbr> was founded in 1948.

`<address>`标签

定义文档或文章的作者/拥有者的联系信息。
如果 <address> 元素位于 <body> 元素内，则它表示文档联系信息。
如果 <address> 元素位于 <article> 元素内，则它表示文章的联系信息。

  <address>
  Written by <a href="mailto:webmaster@example.com">Donald Duck</a>.<br> 
  Visit us at:<br>
  Example.com<br>
  Box 564, Disneyland<br>
  USA
  </address>

`<bdo>`标签

bdo 指的是 bidi 覆盖（Bi-Directional Override）。
用来覆盖默认的文本方向。
属性：
1. dir: 设置文本的方向，取值：ltr( left to right 的首字母缩写，即从左到右)、 rtl( right to left 即从右到左)

  <p>该段落文字从左到右显示。</p>  
  <p><bdo dir="rtl">该段落文字从右到左显示。</bdo></p>

`<blockquote>`标签

定义摘自另一个源的块引用。
一般嵌套p元素，用于标记被引用的文本，这些引用文本并不是直接位于blockquote元素中。
如果标记是不需要段落分隔的短引用，请使用 <q>
如需把页面作为 XHTML 进行验证，那么 <blockquote> 元素必须包含块级元素
属性：
1. cite:规定引用的来源,值为URL。

  <blockquote cite="http://www.worldwildlife.org/who/index.html">
  For 50 years, WWF has been protecting the future of nature. The world's leading conservation organization, WWF works in 100 countries and is supported by 1.2 million members in the United States and close to 5 million globally.
  </blockquote>

`<q>`标签

<q> 标签定义一个短的引用。
浏览器经常会在这种引用的周围插入引号。
属性：
1. cite:规定引用的来源,值为URL。

  <p>WWF's goal is to:
  <q>Build a future where people live in harmony with nature.</q>
We hope they succeed.</p>

`<cite>`标签

<cite> 标签定义作品（比如书籍、歌曲、电影、电视节目、绘画、雕塑等等）的标题。
引用的文本将以斜体显示。
<cite>标签还有一个隐藏功能：它可以使你或者其他人从文档中自动摘录参考书目。可以很容易想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。

  <p><cite>The Scream</cite> by Edward Munch. Painted in 1893.</p>

`<dfn>`标签

<dfn> 标签是一个短语标签，用来定义一个定义项目。

 <dfn>定义项目</dfn>

超链接

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

`<a>`标签

定义一个超链接，用于从一个页面链接到另一个页面。
如果没有使用 href 属性，则不能使用 hreflang、media、rel、target 以及 type 属性。
属性：
1. download(HTML5):
  - 规定被下载的超链接目标。
  - 该属性也可以设置一个值来规定下载文件的名称。所允许的值没有限制，浏览器将自动检测正确的文件扩展名并添加到文件 (.img, .pdf, .txt, .html, 等等)。
2. href:
  - 用于指定超链接目标的 URL。
  - 取值： | 取值 | 描述 | | :----------: | :------------------------------------------------------------: | | 绝对 URL | 指向另一个站点（比如 href="www.example.com/index.htm"） | | 相对 URL | 指向站点内的某个文件（href="index.htm"） | | 锚 URL | 指向页面中的锚（href="#top"） |
3. hreflang:
  - 规定目标 URL 的基准语言。仅在 href 属性存在时使用。
4. media:
  - media 属性规定目标 URL 是为什么类型的媒介/设备进行优化的。
5. rel:
  - 用于指定当前文档与被链接文档的关系。
- 只有在使用了 href 属性才能使用 rel属性。
1. target:
  - 规定在何处打开链接文档。
  - 取值： | 取值 | 描述 | | :----------------: | :----------------------------: | | _blank | 在新窗口中打开被链接文档。 | | _self （默认） | 在相同的框架中打开被链接文档。 | | _parent | 在父框架集中打开被链接文档。 | | _top | 在整个窗口中打开被链接文档。 | | framename | 在指定的框架中打开被链接文档。 |
2. type:
  - 规定目标文档的 MIME 类型。
  - 只能在 href 属性存在时使用。

头部标签

<head> 元素包含了所有的头部标签元素,在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种meta信息。

`<title>`标签

定义了不同文档的标题。
当网页添加到收藏夹时，显示在收藏夹中的标题

`<base>`标签

描述了基本的链接地址/链接目标，该标签作为HTML文档中所有的链接标签的默认链接
如果使用了 <base> 标签，则必须具备 href 属性或者 target 属性或者两个属性都具备。

`<link>`标签

定义了文档与外部资源之间的关系。
通常用于链接到样式表。

`<style>`标签

定义了HTML文档的样式文件引用地址。
可以直接添加样式来渲染 HTML 文档。

`<meta>`标签

提供了 HTML 文档的元数据,不显示在页面上，但会被浏览器解析。
可以直接添加样式来渲染 HTML 文档。
META元素通常用于指定网页的描述，关键词，文件的最后修改时间，作者及其他元数据。
元数据可以被使用浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 Web 服务调用

标签	值	描述
charsetNew	character_set	定义文档的字符编码。
content	text	定义与 http-equiv 或 name 属性相关的元信息。
http-equiv	content-type / default-style / refresh	把 content 属性关联到 HTTP 头部。
name	application-name / authorde / scription / generator / keywords	把 content 属性关联到一个名称。

<head>

<meta charset="utf-8"> 
<title>文档标题</title>

<base href="http://www.runoob.com/images/" target="_blank">

<link rel="stylesheet" type="text/css" href="mystyle.css">

<style type="text/css">
  body {background-color:yellow}
  p {color:blue}
</style>

<meta name="description" content="免费在线教程">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="runoob">
<meta charset="UTF-8">
</head>

图像

`<img>`标签

签定义 HTML 页面中的图像。
有两个必需的属性：src 和 alt。
从技术上讲，图像并不会插入 HTML 页面中，而是链接到 HTML 页面上。<img> 标签的作用是为被引用的图像创建占位符。
属性：

标签	值	描述
src	URL	规定显示图像的 URL。
loading	eager（立即加载）/ lazy（延迟加载）	指定浏览器是应立即加载图像还是延迟加载图像。
alt	text	规定图像的替代文本。
crossoriginNew	anonymous / use-credentials	设置图像的跨域属性
height	pixels	规定图像的高度。
width	pixels	规定图像的宽度。
ismap	ismap	将图像规定为服务器端图像映射。
usemap	#mapname	将图像定义为客户器端图像映射。

图片中的 alt 属性是在图片不能正常显示时出现的文本提示。图片中的 title 属性是在鼠标在移动到元素上的文本提示。

ismap 属性是一个布尔属性。将图像定义为服务器端图像映射（图像映射指的是带有可点击区域的图像）。当点击一个服务器端图像映射时，点击坐标会以 URL 查询字符串的形式发送到服务器。注意：只有当 <img> 元素属于带有有效 href 属性的 <a> 元素的后代时，才允许使用 ismap 属性。

usemap 属性将图像定义为客户端图像映射（图像映射指的是带有可点击区域的图像）。 usemap 属性与 <map> 元素的 name 或 id 属性相关联，以建立 <img> 与 <map> 之间的关系。注意：只有当 <img> 元素不属于 <a> 或 <button> 元素的后代时，才允许使用 usemap 属性。

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

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

`<map>`标签

<map> 标签用于客户端图像映射。图像映射指带有可点击区域的一幅图像。
<img>中的 usemap 属性可引用 <map> 中的 id 或 name 属性（取决于浏览器），所以我们应同时向 <map> 添加 id 和 name 属性。
area 元素永远嵌套在 map 元素内部。area 元素可定义图像映射中的区域。

`<area>`标签

<area> 标签定义图像映射内部的区域（图像映射指的是带有可点击区域的图像）。
属性： | 标签 | 值 | 描述 | | :---------: | :-------------------------------: | :--------------------------------------------------------: | | alt | text | 规定区域的替代文本。如果使用 href 属性，则该属性是必需的。 | | coords | coordinates | 规定区域的坐标。 | | href | URL | 规定区域的目标 URL。 | | hreflangNew | language_code | 规定目标 URL 的语言。 | | mediaNew | media query | 规定目标 URL 是为何种媒介/设备优化的。默认：all。 | | shape | default / rect / circle / poly | 规定区域的形状 | | target | _blank / _parent / _self / _top / | framename 规定在何处打开目标 URL。 | | typeNew | MIME_type | 规定目标 URL 的 MIME 类型。 |

表格

表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

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

`<table>`标签

table 标签是一个表格的最外围，内部是由一个或多个 <tr>、<th> 以及 <td> 元素。
在 HTML5 中，仅支持 "border" 属性，并且只允许使用值 "1" 或 ""，用来规定表格单元是否拥有边框。

`<th>`标签

<th> 标签定义 HTML 表格中的表头单元格。
该元素中的文本通常呈现为粗体并且居中。

属性：

标签	值	描述
colspan	number	规定表头单元格可横跨的列数。
rowspan	number	规定表头单元格可横跨的行数。
scope	col / colgroup / row / rowgroup	规定表头单元格是否是行、列、行组或列组的头部。
headers	header_id	规定与表头单元格相关联的一个或多个表头单元格。

`<tr>`标签

定义 HTML 表格中的行。
一个 <tr> 元素包含一个或多个 <th> 或 <td> 元素。

`<td>`标签

定义 HTML 表格中的标准单元格。
<td> 元素中的文本通常是普通的左对齐文本。
属性：同<th>标签

`<colgroup>`标签

<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。
只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用 colgroup> 标签。
如果想对 <colgroup> 中的某列定义不同的属性，请在 <colgroup> 标签内使用 <col> 标签。
属性： | 标签 | 值 | 描述 | | :---: | :----: | :----------------------: | | span | number | 规定列组应该横跨的列数。 |

<table border="1">
  <colgroup>
    <col span="2" style="background-color:red">
    <col style="background-color:yellow">
  </colgroup>
  <tr>
    <th>ISBN</th>
    <th>Title</th>
    <th>Price</th>
  </tr>
  <tr>
    <td>3476896</td>
    <td>My first HTML</td>
    <td>$53</td>
  </tr>
</table>

`<col>`标签

规定了 <colgroup> 元素内部的每一列的列属性。
通过使用<col>标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。
属性： | 标签 | 值 | 描述 | | :---: | :----: | :----------------------: | | span | number | 规定列组应该横跨的列数。 |

`<thead>`标签

用于组合 HTML 表格的表头内容。
<thead> 元素应该与 <tbody> 和 <tfoot> 元素结合起来使用，用来规定表格的各个部分（表头、主体、页脚）。
<thead> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 元素之后，<tbody>、 <tfoot> 和 <tr> 元素之前。

`<tbody>`标签

用于组合 HTML 表格的主体内容。

`<tfoot>`标签

用于组合 HTML 表格的页脚内容。
<tfoot> 标签必须被用在以下情境中：作为 <table> 元素的子元素，出现在 <caption>、<colgroup> 和 <thead> 元素之后，<tbody> 和 <tr> 元素之前。

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

表格中合并单元格

表格中合并单元格中是依靠 colspan 和 rowspan 这两个属性。
若要将一行的若干个单元格合并成一个，则使用 colspan属性
若要将一列的若干个单元格合并成一个，则使用 rowspan属性

<h4>单元格跨两列:</h4>
<table border="1">
  <tr>
    <th>Name</th>
    <th colspan="2" >Telephone</th>
  </tr>
  <tr>
    <td>Bill Gates</td>
    <td>555 77 854</td>
    <td>555 77 855</td>
  </tr>
  </table>

  <h4>单元格跨两行:</h4>
  <table border="1">
  <tr>
    <th>First Name:</th>
    <td>Bill Gates</td>
  </tr>
  <tr>
    <th rowspan="2">Telephone:</th>
    <td>555 77 854</td>
  </tr>
  <tr>
    <td>555 77 855</td>
  </tr>
</table>

HTML基本标签（一）

简介

标题

<h1>~<h6>标签

<hr>水平线标签

段落

<p>标签

<br>折行标签

文本格式化

文本格式化标签

"计算机输出" 标签

HTML 引文,引用,及标签定义

<abbr> 标签

<address>标签

<bdo>标签

<blockquote>标签

<q>标签

<cite>标签

<dfn>标签

超链接

<a>标签

头部标签

<title>标签

<base>标签

<link>标签

<style>标签

<meta>标签

图像

<img>标签

<map>标签

<area>标签

表格

<table>标签

<th>标签

<tr>标签

<td>标签

<colgroup>标签

<col>标签

<thead>标签

<tbody>标签

<tfoot>标签