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 标签，而是使用标签来解释页面的内容：
<!DOCTYPE html>
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
例子解释
· DOCTYPE 声明了文档的类型
· <html> 与 </html> 之间的文本描述网页
· <body> 与 </body> 之间的文本是可见的页面内容
· <h1> 与 </h1> 之间的文本被显示为标题
· <p> 与 </p> 之间的文本被显示为段落
四、HTML 标题
HTML 标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<html>
<body>
<h1>This is heading 1</h1>
<h2>This is heading 2</h2>
<h3>This is heading 3</h3>
<h4>This is heading 4</h4>
<h5>This is heading 5</h5>
<h6>This is heading 6</h6>
</body>
</html>
请仅仅把标题标签用于标题文本。不要仅仅为了产生粗体文本而使用它们。
五、HTML 段落
HTML 段落是通过 <p> 标签进行定义的。
<html>
<body>
<p>这是段落。</p>
<p>这是段落。</p>
<p>这是段落。</p>
<p>段落元素由 p 标签定义。</p>
</body>
</html>
注释：浏览器会自动地在段落的前后添加空行。（<p> 是块级元素）
提示：使用空的段落标记 <p></p> 去插入一个空行是个坏习惯。用 <br /> 标签代替它！
六、HTML 链接
HTML 链接是通过 <a> 标签进行定义的。
<html>
<body>
<a href="http://www.baidu.com">百度一下，你就知道</a>
</body>
</html> 注释：在 href 属性中指定链接的地址。
七、HTML 图像
HTML 图像是通过 <img> 标签进行定义的。
<html>
<body>
<img src="/i/eg_w3school.gif" width="300" height="120" />
</body> 注释：/i/eg_w3school.gif表示图像所在的地址，
</html> width表示图像的宽度，height表示图像的高度。
上例显示如左图
注释：图像的名称和尺寸是以属性的形式提供的。
八、HTML 元素
1、HTML 文档是由 HTML 元素定义的。
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。
|
开始标签 |
元素内容 |
结束标签 |
|
<p> |
This is a paragraph |
</p> |
|
<a href="default.htm" > |
This is a link |
</a> |
|
<br /> |
|
|
注释：开始标签常被称为开放标签（opening tag），结束标签常称为闭合标签（closing tag）。
2、HTML 元素语法
· HTML 元素以开始标签起始
· HTML 元素以结束标签终止
· 元素的内容是开始标签与结束标签之间的内容
· 某些 HTML 元素具有空内容（empty content）
· 空元素在开始标签中进行关闭（以开始标签的结束而结束）
· 大多数 HTML 元素可拥有属性
3、嵌套的 HTML 元素
大多数 HTML 元素可以嵌套（可以包含其他 HTML 元素）。
HTML 文档由嵌套的 HTML 元素构成。
例如：<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
上面的例子包含三个 HTML 元素。
4、HTML 实例解释
<p> 元素：
<p>This is my first paragraph.</p>
这个 <p> 元素定义了 HTML 文档中的一个段落。
这个元素拥有一个开始标签 <p>，以及一个结束标签 </p>。
元素内容是：This is my first paragraph。
<body> 元素：
<body>
<p>This is my first paragraph.</p>
</body>
<body> 元素定义了 HTML 文档的主体。
这个元素拥有一个开始标签 <body>，以及一个结束标签 </body>。
元素内容是另一个 HTML 元素（p 元素）。
<html> 元素：
<html>
<body>
<p>This is my first paragraph.</p>
</body>
</html>
<html> 元素定义了整个 HTML 文档。
这个元素拥有一个开始标签 <html>，以及一个结束标签 </html>。
元素内容是另一个 HTML 元素（body 元素）。
5、空的 HTML 元素
没有内容的 HTML 元素被称为空元素。空元素是在开始标签中关闭的。
<br> 就是没有关闭标签的空元素（<br> 标签定义换行）。
在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭。
在开始标签中添加斜杠，比如 <br />，是关闭空元素的正确方法，HTML、XHTML 和 XML 都接受这种方式。
即使 <br> 在所有浏览器中都是有效的，但使用 <br /> 其实是更长远的保障。
注意：在 XHTML、XML 以及未来版本的 HTML 中，所有元素都必须被关闭，即使是空元素。
6、HTML 提示：使用小写标签
HTML 标签对大小写不敏感：<P> 等同于 <p>。许多网站都使用大写的 HTML 标签。
九、HTML 属性
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现，比如：name="value"。
属性总是在 HTML 元素的开始标签中规定。
属性实例
HTML 链接由 <a> 标签定义。链接的地址在 href 属性中指定：
<html>
<body>
<a href="http://www.baidu.com">百度一下</a>
</body>
</html>
属性例子 :
<h1> 定义标题的开始。
<h1 align="center"> 拥有关于对齐方式的附加信息。
<html>
<body>
<h1 align="center">This is heading 1</h1>
<p>上面的标题在页面中进行了居中排列。</p>
</body>
</html>
十、HTML 标题
标题（Heading）是通过 <h1> - <h6> 等标签进行定义的。
<h1> 定义最大的标题。<h6> 定义最小的标题。
注释：浏览器会自动地在标题的前后添加空行。
注释：默认情况下，HTML 会自动地在块级元素前后添加一个额外的空行，比如段落、标题元素前后。
标题很重要
请确保将 HTML heading 标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。
十一、HTML 水平线
<hr /> 标签在 HTML 页面中创建水平线。
hr 元素可用于分隔内容。
<html>
<body>
<p>hr 标签定义水平线：</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
<hr />
<p>这是段落。</p>
</body>
</html>
提示：使用水平线 (<hr> 标签) 来分隔文章中的小节是一个办法（但并不是唯一的办法）。
十二、HTML 注释
可以将注释插入 HTML 代码中，这样可以提高其可读性，使代码更易被人理解。浏览器会忽略注释，也不会显示它们。
注释是这样写的：<!--这是一段注释。注释不会在浏览器中显示。-->
注释：开始括号之后（左边的括号）需要紧跟一个叹号，结束括号之前（右边的括号）不需要。
提示：合理地使用注释可以对未来的代码编辑工作产生帮助。
十三、HTML 折行
如果您希望在不产生一个新段落的情况下进行换行（新行），请使用 <br /> 标签：
<p>
To break<br />lines<br />in a<br />paragraph,<br />use the br tag.
</p>
<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。
<br> 还是 <br />
您也许发现 <br> 与 <br /> 很相似。
在 XHTML、XML 以及未来的 HTML 版本中，不允许使用没有结束标签（闭合标签）的 HTML 元素。
即使 <br> 在所有浏览器中的显示都没有问题，使用 <br /> 也是更长远的保障。
注意：所有连续的空格或空行都会被算作一个空格。需要注意的是，HTML 代码中的所有连续的空行（换行）也被显示为一个空格。
十二、HTML 样式
style 属性用于改变 HTML 元素的样式。
style 属性的作用：通过 HTML 样式，能够通过使用 style 属性直接将样式添加到 HTML 元素中
<html>
<body style="
<h2 style="This is a heading</h2>
<p style="This is a paragraph.</p>
</body>
</html>
background-color 属性为元素定义了背景颜色：
---------------------------------------------------------------------------------------
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>上面的标题相对于页面居中对齐。</p>
</body>
</html>
十二、HTML 文本格式化实例
<html>
<body>
<b>This text is bold</b>
<br />
<strong>This text is strong</strong>
<br />
<big>This text is big</big>
<br />
<em>This text is emphasized</em>
<br />
<i>This text is italic</i>
<br />
<small>This text is small</small>
<br />
This text contains
<sub>subscript</sub>
<br />
This text contains
<sup>superscript</sup>
</body>
</html>
文本格式化标签
|
标签 |
描述 |
|
定义粗体文本。 |
|
|
定义大号字。 |
|
|
定义着重文字。 |
|
|
定义斜体字。 |
|
|
定义小号字。 |
|
|
定义加重语气。 |
|
|
定义下标字。 |
|
|
定义上标字。 |
|
|
定义插入字。 |
|
|
定义删除字。 |
|
不赞成使用。使用 <del> 代替。 |
|
|
不赞成使用。使用 <del> 代替。 |
|
|
不赞成使用。使用样式（style）代替。 |
十二、HTML 表格（结尾有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>
HTML 表格和边框属性
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。
使用边框属性来显示一个带有边框的表格：
<table border="1">
<tr>
<td>Row 1, cell 1</td>
<td>Row 1, cell 2</td>
</tr>
</table>
HTML 表格表头
表格的表头使用 <th> 标签进行定义。
大多数浏览器会把表头显示为粗体居中的文本
<table border="1">
<tr>
<th>Header 1</th>
<th>Header 2</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>
HTML 表格标签
|
标签 |
描述 |
|
定义表格 |
|
|
定义表格的表头 |
|
|
定义表格的行 |
|
|
定义表格单元 |
|
|
定义表格标题 |
|
|
定义表格列的组 |
|
|
定义用于表格列的属性 |
|
|
定义表格的页眉 |
|
|
定义表格的主体 |
|
定义表格的页脚 |
十二、HTML 列表（结尾附有标签描述）
HTML 支持有序、无序和定义列表:
有序列表：
<ol>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
<ol start="50">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
1. Coffee
2. Tea
3. Milk
1. Coffee
2. Tea
3. Milk
无序列表
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
· Coffee
· Tea
· Milk
HTML 自定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。
自定义列表以 <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
注意事项 - 有用提示
提示: 列表项内部可以使用段落、换行符、图片、链接以及其他列表等等。
HTML 列表标签
|
标签 |
描述 |
|
定义有序列表 |
|
|
定义无序列表 |
|
|
定义列表项 |
|
|
定义列表 |
|
|
自定义列表项目 |
|
|
定义自定列表项的描述 |
十二、HTML 区块元素
大多数 HTML 元素被定义为块级元素或内联元素。
块级元素在浏览器显示时，通常会以新行来开始（和结束）。实例: <h1>, <p>, <ul>, <table>
HTML 内联元素
内联元素在显示时通常不会以新行开始。实例: <b>, <td>, <a>, <img>
HTML <div> 元素
HTML <div> 元素是块级元素，它可用于组合其他 HTML 元素的容器。
<div> 元素没有特定的含义。除此之外，由于它属于块级元素，浏览器会在其前后显示折行。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>菜鸟教程(runoob.com)</title> 定义了浏览器工具栏的标题
</head>
<body>
<p>这是一些文本。</p> 这是一些文本。
<div style="color:#0000FF">
<h3>这是一个在 div 元素中的标题。</h3>这是一个在 div 元素中的标题。
<p>这是一个在 div 元素中的文本。</p>这是一个在 div 元素中的文本。
</div>
<p>这是一些文本。</p>这是一些文本。
</body>
</html>
常用标签汇总
HTML 基本文档
<!DOCTYPE html>
<html>
<head>
<title>文档标题</title>
</head>
<body> 可见文本... </body>
</html>
基本标签（Basic Tags）
<h1>最大的标题</h1>
<h2> . . . </h2>
<h3> . . . </h3>
<h4> . . . </h4>
<h5> . . . </h5>
<h6>最小的标题</h6>
<p>这是一个段落。</p>
<br> （换行）
<hr> （水平线）
<!-- 这是注释 -->
文本格式化（Formatting）
<b>粗体文本</b>
<code>计算机代码</code>
<em>强调文本</em>
<i>斜体文本</i>
<kbd>键盘输入</kbd>
<pre>预格式化文本</pre>
<small>更小的文本</small>
<strong>重要的文本</strong>
<abbr> （缩写） <address> （联系信息）
<bdo> （文字方向）
<blockquote> （从另一个源引用的部分）
<cite> （工作的名称）
<del> （删除的文本）
<ins> （插入的文本）
<sub> （下标文本）
<sup> （上标文本）
链接（Links）
普通的链接：<a href="http://www.example.com/">链接文本</a>
图像链接： <a href="http://www.example.com/"><img src="URL" alt="替换文本"></a>
邮件链接： <a href="mailto:webmaster@example.com">发送e-mail</a>
书签： <a id="tips">提示部分</a>
<a href="#tips">跳到提示部分</a>
图片（Images）
<img src="URL" alt="替换文本" height="42" width="42">
样式/区块（Styles/Sections）
<style type="text/css">
h1 {color:red;} p {color:blue;}
</style> <div>文档中的块级元素</div> <span>文档中的内联元素</span>
无序列表
<ul>
<li>项目</li>
<li>项目</li>
</ul>
有序列表
<ol>
<li>第一项</li>
<li>第二项</li>
</ol>
定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd>
<dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
表格（Tables）
<table border="1">
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
框架（Iframe）
<iframe src="demo_iframe.htm"></iframe>
表单（Forms）
<form action="demo_form.php" method="post/get">
<input type="text" name="email" size="40" maxlength="50">
<input type="password">
<input type="checkbox" checked="checked">
<input type="radio" checked="checked">
<input type="submit" value="Send">
<input type="reset">
<input type="hidden">
<select>
<option>苹果</option>
<option selected="selected">香蕉</option>
<option>樱桃</option>
</select>
<textarea name="comment" rows="60" cols="20"></textarea>
</form>
