HTML 基础【转载】
完整的HTML标签查询
http://www.w3school.com.cn/tags/index.asp
属性查询
http://www.w3school.com.cn/tags/html_ref_standardattributes.asp
HTML
什么是 HTML？
HTML 是用来描述网页的一种语言。
- HTML 指的是超文本标记语言 (Hyper Text Markup Language)
- HTML 不是一种编程语言，而是一种标记语言 (markup language)
- 标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
- HTML 标签是由尖括号包围的关键词，比如 <html>
- HTML 标签通常是成对出现的，比如 <b> 和 </b>
- 标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
HTML 文档 = 网页
- HTML 文档描述网页
- HTML 文档包含 HTML 标签和纯文本
- HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
- <html> 与 </html> 之间的文本描述网页
- <body> 与 </body> 之间的文本是可见的页面内容
- <h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
HTML 段落是通过 <p> 标签进行定义的。
HTML 链接是通过 <a> 标签进行定义的
Example:
<a href="http://www.w3school.com.cn">This is a link</a>
HTML 图像是通过 <img> 标签进行定义的。
Example:
<img src="w3school.jpg" width="104" height="142" />
空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
HTML 提示：使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
W3School 使用的是小写标签，因为万维网联盟（W3C）在 HTML 4 中推荐使用小写，而在未来 (X)HTML 版本中强制使用小写。
HTML 属性
HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
<h1 align="center"> 拥有关于对齐方式的附加信息。
<body bgcolor="yellow"> 拥有关于背景颜色的附加信息。
<table border="1"> 拥有关于表格边框的附加信息。
HTML 水平线
<hr/>标签在HTML页面中创建水平线。
分割内容
HTML 折行
<br/> 折行
HTML文本格式化 里面一些属性
http://www.w3school.com.cn/html/html_formatting.asp
HTML CSS 样式
外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
<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 超链接
http://www.w3school.com.cn/html/html_links.asp
HTMl 图像操作
http://www.w3school.com.cn/html/html_images.asp
图像标签
|
标签 |
描述 |
|
定义图像。 |
|
|
定义图像地图。 |
|
|
定义图像地图中的可点击区域。 |
HTML表格
http://www.w3school.com.cn/html/html_tables.asp
表格标签
|
表格 |
描述 |
|
定义表格 |
|
|
定义表格标题。 |
|
|
定义表格的表头。 |
|
|
定义表格的行。 |
|
|
定义表格单元。 |
|
|
定义表格的页眉。 |
|
|
定义表格的主体。 |
|
|
定义表格的页脚。 |
|
|
定义用于表格列的属性。 |
|
|
定义表格列的组。 |
HTML 列表
http://www.w3school.com.cn/html/html_lists.asp
列表标签
|
标签 |
描述 |
|
定义有序列表。 |
|
|
定义无序列表。 |
|
|
定义列表项。 |
|
|
定义定义列表。 |
|
|
定义定义项目。 |
|
|
定义定义的描述。 |
|
|
已废弃。使用 <ul> 代替它。 |
|
|
已废弃。使用 <ul> 代替它。 |
网站布局
大多数网站会把内容安排到多个列中（就像杂志或报纸那样）。
可以使用 <div> 或者 <table> 元素来创建多列。CSS 用于对元素进行定位，或者为页面创建背景以及色彩丰富的外观。
提示：即使可以使用 HTML 表格来创建漂亮的布局，但设计表格的目的是呈现表格化数据 - 表格不是布局工具！
HTML 布局 - 有用的提示
提示：使用 CSS 最大的好处是，如果把 CSS 代码存放到外部样式表中，那么站点会更易于维护。通过编辑单一的文件，就可以改变所有页面的布局。如需学习更多有关 CSS 的知识，请访问我们的 CSS 教程。
提示：由于创建高级的布局非常耗时，使用模板是一个快速的选项。通过搜索引擎可以找到很多免费的网站模板（您可以使用这些预先构建好的网站布局，并优化它们）。
HTML表单
表单标签
http://www.w3school.com.cn/html/html_forms.asp
|
标签 |
描述 |
|
定义供用户输入的表单 |
|
|
定义输入域 |
|
|
定义文本域 (一个多行的输入控件) |
|
|
定义一个控制的标签 |
|
|
定义域 |
|
|
定义域的标题 |
|
|
定义一个选择列表 |
|
|
定义选项组 |
|
|
定义下拉列表中的选项 |
|
|
定义一个按钮 |
|
|
<isindex> |
已废弃。由 <input> 代替。 |
HTML 框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。
http://www.w3school.com.cn/html/html_frames.asp
HTML 内联框架
http://www.w3school.com.cn/html/html_iframe.asp 内部嵌套一个框架
<!DOCTYPE> 声明
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
提示：W3School 即将升级为最新的 HTML5 文档类型。
