HTML 链接是通过 <a> 标签进行定义的。
HTML 图像是通过 <img> 标签进行定义的。
开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html> 包含三个html元素```
**`<br />` 其实是更长远的保障。**换行
<h1 align="center">拥有关于对齐方式的附加信息。 < body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
<table border="1">` 拥有关于表格边框的附加信息。
###HTML 属性参考手册
| 属性 | 值 | 描述 |
| ------------- |:-------------:| -----:|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一 id |
| style |style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息（可在工具提示中显示） |
| accesskey | | 规定激活元素的快捷键。 |
| contenteditable | 5=HTML5 中添加的属性 | 规定元素内容是否可编辑 |
| contextmenu | 5 | 规定元素的上下文菜单。上下文菜单在用户点击元素时显示。 |
| dats-* | 5 | 用于存储页面或应用程序的私有定制数据。 |
| dir | | 规定元素中内容的文本方向。 |
| draggable | 5 | 规定元素是否可拖动。 |
| dropzone | 5 |规定在拖动被拖动数据时是否进行复制、移动或链接 |
| didden | 5 | 规定元素仍未或不再相关 |
| lang | | 规定元素内容的语言。 |
| spellcheck | 5 | 规定是否对元素进行拼写和语法检查。 |
| tabindex | | 规定元素的 tab 键次序。 |
| translate | 5 | 规定是否应该翻译元素内容。 |
##标题
标题（Heading）是通过 `<h1> - <h6> `等标签进行定义的。
水平线——`<hr />` 标签在 HTML 页面中创建水平线。
注释`<!-- This is a comment -->`
##段落
**别用空段落标记去插入一个空行**
折行——` <br />`
**所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。**
##样式
style 属性的作用：提供了一种改变所有 HTML 元素的样式的通用方法。
**应该避免使用下面这些标签和属性：**
| 标签 | 描述 |
| ------------- |:-------------:|
|` <center> ` | 定义居中的内容 |
| `<font>和<basefont>` | 定义 HTML 字体 |
| `<s>和<strike>` | 定义删除线文本 |
| `<u>` | 定义下划线文本 |
| 属性 | 描述 |
| ------------- |:-------------:|
| align | 定义文本的对齐方式 |
| gbcolor | 定义背景颜色 |
| color | 定义文本颜色 |
**对于以上这些标签和属性：请使用样式代替！**
属性为元素定义了背景颜色
<html>
<body style="background-color:yellow">background-color
<h2 style="background-color:red">This is a heading</h2>
<p style="background-color:green">This is a paragraph.</p>
</body>
</html>
font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
<html>
<body>
<h1 style="font-family:verdana">A heading</h1>
<p style="font-family:arial;color:red;font-size:20px;">A paragraph.</p>
</body>
</html>
text-align 属性规定了元素中文本的水平对齐方式：
<html>
<body>
<h1 style="text-align:center">This is a heading</h1>
<p>The heading above is aligned to the center of this page.</p>
</body>
</html>
##文本格式化
文本格式化标签
标签| 描述
----|------
`<b > ` | 定义粗体文本
`<big > ` | 定义大号字
`<em>` | 定义着重文字
`<i>` | 定义斜体字
`<small> ` | 定义小号字
`<strong>` | 定义加重语气
`<sub>` | 定义下标字
`<sup>` | 定义上标字
`<ins>` | 定义插入字
` <del> ` | 定义删除字
`<s>` | 不赞成使用。使用(del)代替
`<strike>` | 不赞成使用。使用(del)代替
`<u> ` | 不赞成使用。使用(style)代替
“计算机输出”标签
标签 | 描述
------------- |-------------
`< code> ` | 定义计算机代码
`<kbd> ` | 定义键盘码
`<samp>` | 定义计算机代码样本
`<tt >` | 定义打字机代码
`<var > ` | 定义变量
`<pre> `| 定义预格式文本
`<listing> ` | 不赞成使用使用 `<pre>` 代替
`<plaintext >` | 不赞成使用。使用 `<pre>` 代替
` <xmp> `|不赞成使用。使用 `<pre>` 代替
引用、引用和术语定义
标签 |描述
------------- |-------------
`<abbr> ` | 定义缩写
`<acronym >` | 定义首字母缩写
`<address>` | 定义地址
`<bdo >` | 定义文字方向
`<blockquote>` | 定义长的引用
`<q>` | 定义短的引用语
`<cite>` |定义引用、引证
`<dfn >`| 定义一个定义项目
##引用
`<q></q>`元素定义短的引用。
HTML `<blockquote>` 元素定义被引用的节
HTML `<abbr> `元素定义缩写或首字母缩略语。对缩写进行标记能够为浏览器、翻译系统以及搜索引擎提供有用的信息。
`<p><abbr title="World Health Organization">WHO</abbr> 成立于 1948 年。</p>`
HTML` <dfn> `元素定义项目或缩写的定义。
HTML <address> 元素定义文档或文章的联系信息（作者/拥有者）。
HTML <cite> 元素定义著作的标题。
HTML <bdo> 元素定义双流向覆盖（bi-directional override）
##计算机代码元素
通常，HTML 使用可变的字母尺寸，以及可变的字母间距。在显示计算机代码示例时，并不需要如此。
HTML 计算机代码元素
标签 |描述
------------- |-------------
`<code> ` | 定义计算机代码文本 `<code> `元素不保留多余的空格和折行----如需解决该问题，您必须在 `<pre>` 元素中包围代码
`<kbd>` | 定义键盘文本
`<samp>` | 定义计算机代码示例
`<var>` | 定义变量
`<pre>` | 定义格式化文本
##注释
条件注释:您也许会在 HTML 中偶尔发现条件注释：
`<!--[if IE 8]>
.... some HTML here ....
<![endif]-->条件注释定义只有 Internet Explorer 执行的 HTML 标签`
##CSS
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表:
1. 外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
2. 内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表
<head>
<style type="text/css">
body {background-color: red}
p {margin-left: 20px}
</style>
</head>
3. 内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任何 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距
<p style="color: red; margin-left: 20px">
This is a paragraph
</p>
标签 | 描述
----|------
`<style>` | 定义样式定义。
`<link>` | 定义资源引用。
`<div> `| 定义文档中的节或区域（块级）。
`<span> `| 定义文档中的行内的小块或区域。
`<font >`| 规定文本的字体、字体尺寸、字体颜色。不赞成使用。请使用样式。
`<basefont>` | 定义基准字体。不赞成使用。请使用样式。
`<center>` | 对文本进行水平居中。不赞成使用。请使用样式。
##链接
有两种使用 `<a> `标签的方式：
1. 通过使用 `href` 属性 - 创建指向另一个文档的链接
2. 通过使用` name`属性 - 创建文档内的书签
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
实例`<a>` 定义锚
首先，我们在 HTML 文档中对锚进行命名（创建一个书签）：
`<a name="tips">基本的注意事项 - 有用的提示</a>`
然后，我们在同一个文档中创建指向该锚的链接：
`<a href="#tips">有用的提示</a>`
您也可以在其他页面中创建指向该锚的链接：
`<a href="http://www.w3school.com.cn/html/html_links.asp#tips">有用的提示</a>`
在上面的代码中，我们将 # 符号和锚名称添加到 URL 的末端，就可以直接链接到 tips 这个命名锚了。
· 使用 Target 属性，你可以定义被链接的文档在何处显示。
##图像
图像由 <img> 标签定义，要在页面上显示图像，你需要使用源属性（src）。src 指 "source"。源属性的值是图像的 URL 地址。
alt 属性用来为图像定义一串预备的可替换的文本。替换文本属性的值是用户定义的。
> 在浏览器无法载入图像时，替换文本属性告诉读者她们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。为页面上的图像都加上替换文本属性是个好习惯，这样有助于更好的显示信息，并且对于那些使用纯文本浏览器的人来说是非常有用的。
图像标签
标签 | 描述
----|------
`<img>` | 定义图像
`<map>` | 定义图像地图
`<area> `| 定义图像地图中的可点击区域
创建图像映射——可以点击图像上的星球，将它们放大。
<html>
<body>
<p>请点击图像上的星球，把它们放大。</p>
<img
src="/i/eg_planets.jpg"
border="0" usemap="#planetmap"
alt="Planets" />
<map name="planetmap" id="planetmap">
<area
shape="circle"
coords="180,139,14"
href ="/example/html/venus.html"
target ="_blank"
alt="Venus" />
<area
shape="circle"
coords="129,161,10"
href ="/example/html/mercur.html"
target ="_blank"
alt="Mercury" />
<area
shape="rect"
coords="0,0,110,260"
href ="/example/html/sun.html"
target ="_blank"
alt="Sun" />
</map>
<p><b>注释：</b>img 元素中的 "usemap" 属性引用 map 元素中的 "id" 或 "name" 属性（根据浏览器），所以我们同时向 map 元素添加了 "id" 和 "name" 属性。</p>
</body>
</html>
##表格
> 表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table border="1">
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
表格的表头使用 <th> 标签进行定义。——大多数浏览器会把表头显示为粗体居中的文本：
<table border="1">
<tr>
<th>Heading</th>
<th>Another Heading</th>
</tr>
<tr>
<td>row 1, cell 1</td>
<td>row 1, cell 2</td>
</tr>
<tr>
<td>row 2, cell 1</td>
<td>row 2, cell 2</td>
</tr>
</table>
空单元格_为了避免这种情况，在空单元格中添加一个空格占位符，就可以将边框显示出来。` `
<tr>
<th rowspan="2">电话</th> 跨两行单元格
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
表格带标题，直接可以用h1，h2……
定义跨行跨列的单元格：
<tr> 跨列单元格
<th>姓名</th>
<th colspan="2">电话</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
跨行单元格：
<table border="1">
<tr>
<th>姓名</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan="2">电话</th>
<td>555 77 854</td>
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
单元格边距：
`<table border="1" cellpadding="10">`
单元格间距：
`<table border="1" cellspacing="10">`
表格背景添加背景颜色或背景图像
`<table border="1"
bgcolor="red">`
`<table border="1"
background="/i/eg_bg_07.gif">`
单元格内添加背景或颜色
`<td
background="/i/eg_bg_07.gif">`
`<td
bgcolor="red">First</td>`
在表格单元中排列内容
<td align="left">化妆品</td>
<td align="right">$30.00</td>
<td align="right">$44.45</td>
框架frame属性
<table frame="box"> 有四边边框
<table frame="above"> 只有上边框
<table frame="below"> 只有下边框
<table frame="hsides"> 只有上下边框
<table frame="vsides"> 只有左右边框
表格 | 描述
----|------
`<table>` | 定义表格
`<caption>` | 定义表格标题
`<th> `| 定义表格表头
`<tr>` | 定义表格的行
`<td>` | 定义表格单元
`<thead> `| 定义表格的页眉
`<tbody>` | 定义表格主体
`<tfoot>` | 定义表格的页脚
`<col> `| 定义用户表格列属性
`<colgroup> `| 定义表格列的组
网友评论