本博客目的只是简单记录学习Html 过程中的知识点，
内容主要参考来源：W3School Html 教程
HTML 教程
HTML基础
### HTML 简介
HTML ： Hyper Text Markup Language 超文本标记语言
HTML 不是一种编程语言，而是一种标记语言
标记语言 是一套标记标签（markup tag）
HTML 文档 == 网页 == HTML 标签+纯文本
基本的HTML标签
标题 Hreading
HTML标题 通过 < h1> - < h6> 等标签进行定义
浏览器会自动在标题的前后添加空行。
默认情况下，HTML会自动的在块级元素前后添加一个额外的空行，
例如段落、标题元素前后。
<h1> This is a heading </h1>段落 paragraph
<p> This is a paragraph. </p>链接 link
<a href="http://www.baidu.com"> This is a link. </a>图像 img
<img src="baidu.jpg" width="104" height=112" />换行
<br />水平线
<hr />HTML 元素
HTML 元素指的是从开始标签到结束标签的所有代码。
某些HTML 元素具有空内容（empty content），空元素在开始标签中进行关闭。
大多数HTML元素可拥有属性。
大多数HTML元素可以嵌套，即包含其他HTML元素。
注意： 不要忘记结束标签，即使大多数浏览器中可能会在正确显示，但是不要依赖这种做法，未来的HTML版本不允许省略结束标签。
提示： 使用小写标签
HTML标签对大小写不敏感，但是未来HTML强制使用小写。
HTML 属性
HTML 标签可以拥有属性
属性总是以 名称/值 对的形式出现，如 name = “value”
属性总是在HTML 元素的开始标签中规定
注： 属性值应该始终被包括在引号内，一般是双引号，不过单引号也行。
大多数HTML 属性值
| 属性 | 值 | 描述 |
|---|---|---|
| class | classname | 规定元素的类名（classname） |
| id | id | 规定元素的唯一的id |
| style | style_definition | 规定元素的行内样式（inline style） |
| title | text | 规定元素的额外信息 |
HTML 注释
<!-- comment -->文本格式化标签
| 标签 | 描述 |
|---|---|
| < b > | 定义粗体文本。 |
| < big > | 定义大号字。 |
| < em > | 定义着重文字。 |
| < i > | 定义斜体字。 |
| < small > | 定义小号字。 |
| < strong > | 定义加重语气。 |
| < sub > | 定义下标字。 |
| < sup > | 定义上标字。 |
| < ins > | 定义插入字。 |
| < del > | 定义删除字。 |
| < s > | 不赞成使用。使用 < del > 代替。 |
| < strike > | 不赞成使用。使用 < del > 代替。 |
| < u> | 不赞成使用。使用样式（style）代替。 |
“计算机输出”标签
| 标签 | 描述 |
|---|---|
| < code > | 定义计算机代码。 |
| < kbd > | 定义键盘码。 |
| < samp > | 定义计算机代码样本。 |
| < tt > | 定义打字机代码。 |
| < var > | 定义变量。 |
| < pre > | 定义预格式文本。 |
| < listing > | 不赞成使用。使用 代替 |
| < plaintext > | 不赞成使用。使用 代替。 |
| < xmp > | 不赞成使用。使用 代替。 |
HTML 样式
外部样式表
样式需要被应用到很多页面时，外部样式表将是理想的选择。
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>内部样式表
适用于单个文件里的样式
可以在head部分通过< style > 标签定义内部样式表
<head>
<style type="text/css">
body {background-color:red}
p {margin-left: 20px}
</style>
</head>内联样式
适用于个别元素里的样式，样式属性可以包含任何CSS属性。
<p style="color:red; margin-left: 20px">
This is a paragraph
</p>HTML 链接
<a href="url"> link </a>开始标签和结束标签之间的文字被作为超链接来显示。
HYML 超链接
超链接可以是一个字，一个词，或者一组词，也可以是一幅图像。你可以点击这些内容来跳转到相应文档中。
通过 < a > 标签在HTML中创建链接
- 通过 href 属性： 创建指向另一个文档的链接
- 通过 name 属性 ： 创建文档内的书签
HTML 链接 – target 属性
使用 target属性，可以定义被链接的文档在何处显示：
target=“_blank” :在新窗口打开文档
HTML 链接 – name 属性
name 属性规定锚（anchor）的名称。
可以使用name属性创建HTML页面中的标签
书签不会以任何特殊方式显示，它对读者是不可见的。
当使用命名锚（named anchors）时，我们可以创建直接跳至该命名锚（比如页面中某个小节）的链接，这样使用者就无需不停地滚动页面来寻找他们需要的信息了。
您可以使用 id 属性来替代 name 属性，命名锚同样有效。
<a name="tips"> anchor </a><a href = "#tips"> anchor </a>HTML 图像标签< img > 和源属性（Src）
< img > 是空标签，只包含属性，并且没有闭合标签。
- src 属性： 图像的URL 地址
- alt 属性： 预备的可替换文本
<img src="url" alt = "Big Boat"/>HTML 表格标签 < table >
表格标签： < table >
每个表有若干行： < tr > < /tr >
表格数据（table data）： < td > < td >
表格标签
| 表格 | 描述 |
|---|---|
| < table > | 定义表格 |
| < caption > | 定义表格标题。 |
| < th > | 定义表格的表头。 |
| < tr > | 定义表格的行。 |
| < td > | 定义表格单元。 |
| < thead > | 定义表格的页眉。 |
| < tbody > | 定义表格的主体。 |
| < foot > | 定义表格的页脚。 |
| < col > | 定义用于表格列的属性。 |
| < colgroup > | 定义表格列的组。 |
数据单元格可以包含文本，图片，列表，段落，表单，水平线和表格等。
属性：
- 边框 border
空格占位符： & nbsp ;
列表
无序列表
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>有序列表
<ol>
<li>Coffee</li>
<li>Milk</li>
</ol>自定义列表
<html>
<body>
<h2>一个定义列表：</h2>
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dd>很好用 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
</body>
</html>
HTML < div > & < span >
可以通过 < div> 和 < span> 将 HTML 元素组合起来。
HTML 块元素
大多数 HTML 元素被定义为块级元素或内联元素。
编者注：“块级元素”译为 block level element，“
内联元素”译为 inline element。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：< h1>, < p>, < ul>, < table>
内联元素在显示时通常不会以新行开始。
例子：< b>, < td>, < a>, < img>
HTML < div > 元素
HTML < div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
< div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
如果与 CSS 一同使用，< div> 元素可用于对大的内容块设置样式属性。
< div> 元素的另一个常见的用途是文档布局。它取代了使用表格定义布局的老式方法。使用 < table> 元素进行文档布局不是表格的正确用法。< table> 元素的作用是显示表格化的数据。
HTML < span> 元素
HTML < span> 元素是内联元素，可用作文本的容器。
< span> 元素也没有特定的含义。
当与 CSS 一同使用时，< span> 元素可用于为部分文本设置样式属性。
HTML 分组标签
| 标签 | 描述 |
|---|---|
| < div> | 定义文档中的分区或节（division/section）。 |
| < span> | 定义 span，用来组合文档中的行内元素。 |
HTML 表单和输入
HTML 表单用于搜集不同类型的用户输入。
表单
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中输入信息的元素：
- 文本域
- 下拉列表
- 单选框
- 复选框等等
表单标签：
<form>
....
input 元素
....
</form>输入
多数情况下被用到表单标签的是输入标签 < input >.
输入类型是由类型属性(type)定义的。
经常用到的输入类型：
- 文本域 Text Fields (缺省宽度是20个字符)
<form>
Name:
<input type="text" name="myName" />
</form>多行文本域 Textarea 多行的文本输入控件。
通过 cols 和 rows 属性来规定 textarea 的尺寸，不过更好的办法是使用 CSS 的 height 和 width 属性。
注释：在文本输入区内的文本行间，用 “%OD%OA” （回车/换行）进行分隔。单选按钮 Radio Buttons
<form>
<input type="radio" name="sex" value="male"> Male
<br />
<input type="radio" name="sex" value="female">Female
</form>- 复选框 Checkboxes
<form>
<input type="checkbox" name="bike"> Bike
<br />
<input type="checkbox" name="car"> Car
</form>- 确认按钮 和 动作属性（Action）
用户单击确认按钮时，表单的内容会被传送到另一个文件；
表单的动作属性定义了目的文件的文件名。
<form name="input" action="html_form.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit">- 下拉列表 < select >, < option >
<form>
<select name="cars">
<option value="volvo">Volvo</option>
<option value="saab">Saab</option>
<option value="fiat" selected="selected">Fiat</option>
<option value="audi">Audi</option>
</select>
</form>HTML 框架
通过使用框架，可以在同一个浏览器中显示不只一个页面。
每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
框架结构标签 < frameset >
- 框架结构标签< frameset >定义如何将窗口分割为框架
- 每个frameset定义了一系列行或列
- rows/columns 的值规定了每行或每列占据屏幕的面积
框架标签 Frame
Frame 标签定义了放置在每个框架中的HTML文档；