HTML 基础
浏览数：29 /
时间：2015年06月09日
一、HTML 是用来描述网页的一种语言。
?HTML 指的是超文本标记语言 (Hyper Text Markup Language)
?HTML 不是一种编程语言，而是一种标记语言 (markup language)
?标记语言是一套标记标签 (markup tag)
?HTML 使用标记标签来描述网页
二、HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
?HTML 标签是由尖括号包围的关键词，比如 <html>
?HTML 标签通常是成对出现的，比如 <b> 和 </b>
?标签对中的第一个标签是开始标签，第二个标签是结束标签
?开始和结束标签也被称为开放标签和闭合标签
例：
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
解释：
?<html> 与 </html> 之间的文本描述网页
?<body> 与 </body> 之间的文本是可见的页面内容
?<h1> 与 </h1> 之间的文本被显示为标题（有<h1> - <h6> 等六种不同格式 ）
?<p> 与 </p> 之间的文本被显示为段落
三、常用的HTML标签
1、HTML 标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推
2、HTML 段落
HTML 段落是通过 <p> 标签进行定义的。 段落文字的加粗应该由CSS或者其他标签来完成，不能用heading！
3、HTML 链接
HTML 链接是通过 <a> 标签进行定义的。
eg:
<a href="http://www.w3school.com.cn">
This is a link</a>
解释： this is a link 将成为链接，跳转至上面的href网页。
4、HTML 图像
HTML 图像是通过 <img> 标签进行定义的。
eg:
<img src="/i/eg_w3school.gif" width="300" height="120" />
解释： src表示图片path，后面跟着图片的宽高设置
5、空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
<br /> ： 即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障
6、HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
属性值应该始终被包括在引号内。双引号是最常用的，不过使用单引号也没有问题。
在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=‘Bill "HelloWorld" Gates‘
7、HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
eg：
<p>这是段落。</p>
<hr />
效果：
8、HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
eg:
<!-- This is a comment -->
注释：开始括号之后（左边的括号）需要紧跟一个叹号
9、HTML 提示 - 如何查看源代码
您一定曾经在看到某个网页时惊叹道 “WOW! 这是如何实现的？”
如果您想找到其中的奥秘，只需要单击右键，然后选择“查看源文件”（IE）或“查看页面源代码”（Firefox），其他浏览器的做法也是类似的。这么做会打开一个包含页面 HTML 代码的窗口。
10、文档主体（body）
<HTML>为主体 ， body为文档内容
四、输出
对于 HTML，您无法通过在 HTML 代码中添加额外的空格或换行来改变输出的效果。
当显示页面时，浏览器会移除源代码中多余的空格和空行。所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
1、文本格式：
种类很多，显示不同字体格式，查看W3C：
标签 描述<b> 定义粗体文本。<big> 定义大号字。<em> 定义着重文字。<i> 定义斜体字。<small> 定义小号字。<strong> 定义加重语气。<sub> 定义下标字。<sup> 定义上标字。<ins> 定义插入字。(见第7点)<del> 定义删除字。
2、计算机输出格式：
标签 描述<code> 定义计算机代码。<kbd> 定义键盘码。<samp> 定义计算机代码样本。<tt> 定义打字机代码。<var> 定义变量。<pre> 定义预格式文本。
pre 预格式
在<pre></pre>之间的文本格式，将会完全按照输入的格式显示，这样方便显示计算机代码，如下：
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>
<p>pre 标签很适合显示计算机代码：</p>
<pre>
for i = 1 to 10
print i
next i
</pre>
3、地址： 中间的格式也将完全保留
<address>
。。。
</address>
4、缩写、首字母缩写
eg: <abbr title="etcetera">etc.</abbr>
etc 是etcetera的缩写，鼠标放到etc上，自动显示全拼写。
效果： 
5、文字方向(bdo)： rtl ： right to left 从右向左显示！
eg:
<bdo dir="rtl">
Here is some Hebrew text
</bdo>
效果 ： Here is some Hebrew text
6、块引用（长引用 、 短引用）
eg:
长引用：使用 blockquote 元素的话，浏览器会插入换行和外边距
<blockquote>
...
</blockquote>
短引用： q 元素不会有任何特殊的呈现
<q>
...
</q>
效果： 自动呈现。
7、字体效果
删除：
<del> ... </del>
下划线：
<ins> ... </ins>
效果：
五、样式
六、表格
1、
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
解释：
border表示边界宽度（1最小，0表示无边框）
每个表格由 table 标签开始。
每个表格行由 tr 标签开始。（几个tr就有几行）
每个表格数据由 td 标签开始。（几个td就有几列，一个tr内多个td）
2、表格的表头使用 <th> 标签进行定义。 表示列，则一个Tr内填写多个th；也可以每个tr内带一个th，表示行表头。
3、某个表格如果没数据，应该用空格占位符 来填写，而不是空白，否则无法显示边框。
4、表格标签
表格 描述<table> 定义表格<caption> 定义表格标题。<th> 定义表格的表头。<tr> 定义表格的行。<td> 定义表格单元。<thead> 定义表格的页眉。<tbody> 定义表格的主体。<tfoot> 定义表格的页脚。<col> 定义用于表格列的属性。<colgroup> 定义表格列的组。
七、列表（属性：type= ?->表示标号类型）
1、无序列表：无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>Coffee</li>
<li>Milk</li>
</ul>
效果：
·Coffee
·Milk
2、有序列表：有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol start=？>
<li>Coffee</li>
<li>Milk</li>
</ol>
效果：（设置了起始编号）
？.Coffee
？+1.Milk
3、自定义列表：自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>Coffee</dt>
<dd>Black hot drink</dd>
<dt>Milk</dt>
<dd>White cold drink</dd>
</dl>
效果：
Coffee
Black hot drink
Milk
White cold drink
八、块
1、块元素：块级元素在浏览器显示时，通常会以新行来开始（和结束）。
例子：<h1>, <p>, <ul>, <table>
HTML <div> 元素
HTML <div> 元素是块级元素，它是可用于组合其他 HTML 元素的容器。
2、内联元素：内联元素在显示时通常不会以新行开始。
例子：<b>, <td>, <a>, <img>
HTML <span> 元素
HTML <span> 元素是内联元素，可用作文本的容器。
九、表单与输入
1、表单：
表单是一个包含表单元素的区域。
表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。
表单使用表单标签（<form>）定义。
<form>
...
input 元素
...
</form>
2、输入
多数情况下被用到的表单标签是输入标签（<input>）。输入类型是由类型属性（type）定义的。（多种属性，见W3C）
文本域（Text Fields）
当用户要在表单中键入字母、数字等内容时，就会用到文本域。
<form>
First name:
<input type="text" name="firstname" />
<br />
Last name:
<input type="text" name="lastname" />
</form>
效果：
单选按钮（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" />
I have a bike
<br />
<input type="checkbox" name="car" />
I have a car
</form>
效果：
表单的动作属性（Action）和确认按钮
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name="input" action="html_form_action.asp" method="get">
Username:
<input type="text" name="user" />
<input type="submit" value="Submit" />
</form>
效果：
文本框内键入几个字母，然后点击确认按钮，那么输入数据会传送到 "html_form_action.asp" 的页面。该页面将显示出输入的结果。
十、框架
通过使用框架，你可以在同一个浏览器窗口中显示不止一个页面。每份HTML文档称为一个框架，并且每个框架都独立于其他的框架。
1、使用框架的坏处：
开发人员必须同时跟踪更多的HTML文档
很难打印整张页面
2、框架结构标签（<frameset>）
框架结构标签（<frameset>）定义如何将窗口分割为框架
每个 frameset 定义了一系列行或列
rows/columns 的值规定了每行或每列占据屏幕的面积
3、详情见W3C
十一、内联框架
iframe 用于在网页内显示网页。
1、添加 iframe 的语法
<iframe src="URL"></iframe>
URL 指向隔离页面的位置。
2、Iframe - 设置高度和宽度
height 和 width 属性用于规定 iframe 的高度和宽度。属性值的默认单位是像素，但也可以用百分比来设定（比如 "80%"）。
3、Iframe - 删除边框
frameborder 属性规定是否显示 iframe 周围的边框。
设置属性值为 "0" 就可以移除边框
4、使用 iframe 作为链接的目标
iframe 可用作链接的目标（target）。
链接的 target 属性必须引用 iframe 的 name 属性：
实例
<iframe src="demo_iframe.htm" name="iframe_a"></iframe>
<p><a href="http://www.w3school.com.cn" target="iframe_a">W3School.com.cn</a></p>
该文字将产生链接，链接的页面显示在内联框架里面。
十二、背景
1、背景颜色（Bgcolor）
背景颜色属性将背景设置为某种颜色。属性值可以是十六进制数、RGB 值或颜色名。
<body bgcolor="#000000">
<body bgcolor="rgb(0,0,0)">
<body bgcolor="black">
以上的代码均将背景颜色设置为黑色。
2、背景（Background）
背景属性将背景设置为图像。属性值为图像的URL。如果图像尺寸小于浏览器窗口，那么图像将在整个浏览器窗口进行复制。
<body background="clouds.gif">
<body background="http://www.w3school.com.cn/clouds.gif">
URL可以是相对地址，如第一行代码。也可以使绝对地址，如第二行代码。
提示：如果你打算使用背景图片，你需要紧记一下几点：
背景图像是否增加了页面的加载时间。小贴士：图像文件不应超过 10k。
背景图像是否与页面中的其他图象搭配良好。
背景图像是否与页面中的文字颜色搭配良好。
图像在页面中平铺后，看上去还可以吗？
对文字的注意力被背景图像喧宾夺主了吗？
十三、颜色
1、提示：仅仅有 16 种颜色名被 W3C 的 HTML4.0 标准所支持。它们是：aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow。
2、颜色值
颜色由一个十六进制符号来定义，这个符号由红色、绿色和蓝色的值组成（RGB）。
每种颜色的最小值是0（十六进制：#00）。最大值是255（十六进制：#FF）。
十四、文档类型声明
<!DOCTYPE> 声明：
Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。
HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 <!DOCTYPE> 的用处。
<!DOCTYPE> 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML 是用什么版本编写的。
十五、头部元素
1、HTML <head> 元素
<head> 元素是所有头部元素的容器。<head> 内的元素可包含脚本，指示浏览器在何处可以找到样式表，提供元信息，等等。
以下标签都可以添加到 head 部分：<title>、<base>、<link>、<meta>、<script> 以及 <style>。
2、HTML <title> 元素
<title> 标签定义文档的标题。
title 元素在所有 HTML/XHTML 文档中都是必需的。
title 元素能够：
定义浏览器工具栏中的标题
提供页面被添加到收藏夹时显示的标题
显示在搜索引擎结果中的页面标题
3、HTML <base> 元素
<base> 标签为页面上的所有链接规定默认地址或默认目标（target）：
<head>
<base href="http://www.w3school.com.cn/images/" />
<base target="_blank" />
</head>
4、TML <link> 元素
<link> 标签定义文档与外部资源之间的关系。
<link> 标签最常用于连接样式表：
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css" />
</head>
5、HTML <style> 元素
<style> 标签用于为 HTML 文档定义样式信息。
可以在 style 元素内规定 HTML 元素在浏览器中呈现的样式：
<head>
<style type="text/css">
body {background-color:yellow}
p {color:blue}
</style>
</head>
6、HTML <meta> 元素
元数据（metadata）是关于数据的信息。
<meta> 标签提供关于 HTML 文档的元数据。元数据不会显示在页面上，但是对于机器是可读的。
典型的情况是，meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。
<meta> 标签始终位于 head 元素中。
元数据可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。
eg：
下面的 meta 元素定义页面的关键词：
<meta name="keywords" content="HTML, CSS, XML" />
name 和 content 属性的作用是描述页面的内容。
7、HTML <script> 元素
<script> 标签用于定义客户端脚本，比如 JavaScript。
十六、脚本，JavaScript 使 HTML 页面具有更强的动态和交互性
1、HTML script 元素
<script> 标签用于定义客户端脚本，比如 JavaScript。
script 元素既可包含脚本语句，也可通过 src 属性指向外部脚本文件。
必需的 type 属性规定脚本的 MIME 类型。
JavaScript 最常用于图片操作、表单验证以及内容动态更新。
下面的脚本会向浏览器输出“Hello World!”：
<script type="text/javascript">
document.write("Hello World!")
</script>
2、<noscript> 标签
<noscript> 标签提供无法使用脚本时的替代内容，比方在浏览器禁用脚本时，或浏览器不支持客户端脚本时。
noscript 元素可包含普通 HTML 页面的 body 元素中能够找到的所有元素。只有在浏览器不支持脚本或者禁用脚本时，才会显示 noscript 元素中的内容
十七、字符实体
1、HTML 实体
在 HTML 中，某些字符是预留的。
在 HTML 中不能使用小于号（<）和大于号（>），这是因为浏览器会误认为它们是标签。
如果希望正确地显示预留字符，我们必须在 HTML 源代码中使用字符实体（character entities）
如需显示小于号，我们必须这样写：< 或 <
2、不间断空格（non-breaking space）
HTML 中的常用字符实体是不间断空格( )。
浏览器总是会截短 HTML 页面中的空格（按space输入的情况下）。如果您在文本中写 10 个空格，在显示该页面之前，浏览器会删除它们中的 9 个。如需在页面中增加空格的数量，您需要使用 字符实体。
十八、详细请参考W3C
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
