HTML新手教程
HTML称为超文本标记语言，是一种标识性的语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。
HTML已经经历了很多的版本，历界版本如下：
①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 [5]
②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 [5]
③HTML 3.2：1997年1月14日，W3C推荐标准。 [5]
④HTML 4.0：1997年12月18日，W3C推荐标准。 [5]
⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。 [5]
⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。
相关课程：
为了让新手更好的学习HTML教程，下面是汇总的HTML新手教程。
第一节 HTML基础知识
1.HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
2.CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
3.标签的语法
（1）标签由英文尖括号"<"和">"括起来
（2）标签一般都成对出现，分开始标签和结束标签，结束标签比开始标签多了一个/
（3）标签与标签之间可以嵌套，但先后顺序必须保持一致
（4）标签不区分大小写，但建议小写
4.HTML文件基本结构
一个HTML文件有自己的固定结构
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<body>
</body>
</html>
（1）<html></html>称为根标签。所有网页标签都在其中
（2）<head>标签用于定义文档头部，是所有头部元素的容器，头部元素有<title><script><link><meta>等
（3）<body>标签间的内容是网页的主要内容，如<hx><p><a><img>等，会在浏览器中显示出来
5.认识<head>标签
文档的头部描述了文档的各种属性和信息，包括文档的标题等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。下面这些标签可用在<head>部分
6.认识<body>标签
<body>标签定义了HTML文档的主体，包含全部页面内容，在网页上要展示出来的页面内容一定要放在<body>标签中
7.HTML的代码注释
代码注释的作用是帮助程序员标注代码的用途，过一段时间后再看你所编写的代码，就能很快想起这段代码的用途。代码注释不仅方便程序员自己回忆起以前代码的用途，还可以帮助其他程序员很快的读懂你的程序的功能，方便多人合作开发网页代码。
<!--这是HTML注释-->
第二节 HTML基础元素
1.HTML标题
HTML 标题是通过 <h1> - <h6> 等标签进行定义的。共有六个，依据重要性递减。
<h1>这是H1标题</h1>
<h2>这是H2标题</h2>
<h3>这是H3标题</h3>
<h4>这是H4标题</h4>
2.HTML段落
HTML 段落是通过 <p> 标签进行定义的
3.HTML链接
HTML 链接是通过 <a> 标签进行定义的
<a href="https://www.xuewangzhan.net/">学做网站论坛</a>
4.HTML图像
HTML 图像是通过 <img> 标签进行定义的
<img src="images/Course.jpg" alt="零基础建站培训教程介绍" width="480px" height="60px">
5.HTML表格
HTML表格是通过<table>标签进行定义的
<table width="300" border="1">
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
注：表格的边框属性（相关知识：网页table表格样式设置方法）
如果不定义边框属性，表格将不显示边框。有时这很有用，但是大多数时候，我们希望显示边框。使用边框属性来显示一个带有边框的表格：
6.HTML列表
HTML支持无序、有序和定义列表
（1）无序列表
无序列表是一个项目的列表，此列项目使用粗体圆点（典型的小黑圆圈）进行标记。无序列表始于 <ul> 标签。每个列表项始于 <li>。
<ul>
<li>无序列表项1</li>
<li>无序列表项2</li>
<li>无序列表项3</li>
</ul>
（2）有序列表
有序列表也是一列项目，列表项目使用数字进行标记。有序列表始于 <ol> 标签。每个列表项始于 <li> 标签。
<ol>
<li>有序列表项1</li>
<li>有序列表项2</li>
<li>有序列表项3</li>
</ol>
（3）定义列表
自定义列表不仅仅是一列项目，而是项目及其注释的组合。自定义列表以 <dl> 标签开始。每个自定义列表项以 <dt> 开始。每个自定义列表项的定义以 <dd> 开始。
<dl>
<dt>计算机</dt>
<dd>用来计算的仪器 ... ...</dd>
<dt>显示器</dt>
<dd>以视觉方式显示信息的装置 ... ...</dd>
</dl>
第三节 HTML样式
当浏览器读到一个样式表，它就会按照这个样式表来对文档进行格式化。有以下三种方式来插入样式表：
1.外部样式表
当样式需要被应用到很多页面的时候，外部样式表将是理想的选择。使用外部样式表，你就可以通过更改一个文件来改变整个站点的外观。
2.内部样式表
当单个文件需要特别样式时，就可以使用内部样式表。你可以在 head 部分通过 <style> 标签定义内部样式表 。
3.内联样式
当特殊的样式需要应用到个别元素时，就可以使用内联样式。 使用内联样式的方法是在相关的标签中使用样式属性。样式属性可以包含任意 CSS 属性。以下实例显示出如何改变段落的颜色和左外边距。
HTML的style属性：提供了一种改变所有 HTML 元素的样式的通用方法
（1）背景颜色
background-color 属性为元素定义了背景颜色：
（2）字体、颜色、尺寸 font-family、color 以及 font-size 属性分别定义元素中文本的字体系列、颜色和字体尺寸：
（3）文本对齐
text-align 属性规定了元素中文本的水平对齐方式：
第四节 HTML格式化
1.文本格式化标签
| <b> | 定义粗体文本。 |
| <big> | 定义大号字。 |
| <em> | 定义着重文字。 |
| <i> | 定义斜体字。 |
| <small> | 定义小号字。 |
| <strong> | 定义加重语气。 |
| <sub> | 定义下标字。 |
| <sup> | 定义上标字。 |
| <ins> | 定义插入字。 |
| <del> | 定义删除字。 |
2.计算机输出标签
<code>定义计算机代码
<kbd>定义键盘码
<samp>定义计算机代码样本
<var>定义变量
<pre>定义预格式文本
3.HTML引用标签
| <abbr> | 定义缩写或首字母缩略语。 |
| <address> | 定义文档作者或拥有者的联系信息。 |
| <bdo> | 定义文本方向。 |
| <blockquote> | 定义从其他来源引用的节。 |
| <dfn> | 定义项目或缩略词的定义。 |
| <q> | 定义短的行内引用。 |
| <cite> | 定义著作的标题。 |
第五节 表单标签
网站使用HTML表单(form)与用户进行交互。表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
<form action="a.php" method="get">
<input name="姓名" type="text">
<input name="性别" type="text">
<input name="提交" type="button">
</form>
* <form> ：<form>标签是成对出现的，以<form>开始，以</form>结束
* action：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)
* method：数据传送的方式（get/post）
注：所有表单控件（文本框、文本域、按钮、单选框、复选框等）都必须放在 <form></form> 标签之间
1.文本输入框
当用户要在表单中键入字母、数字等内容时，就会用到文本输入框。文本框也可转化为密码输入框。
<input name="" type="text">
* type：当type="text"时，输入框为文本输入框
当type="password"时，输入框为密码输入框
* name：为文本框命名，以备后台程序ASP 、PHP使用
* value：为文本输入框设置默认值(一般起到提示作用)
2.文本输入域 当用户需要在表单中输入大段文字时，需要用到文本输入域
<textarea name="内容" cols="" rows=""></textarea>
* <textarea>标签是成对出现的，以<textarea>开始，以</textarea>结束
* cols：多行输入域的列数
* rows：多行输入域的行数
* 在<textarea></textarea>标签之间可以输入默认值
3.复选框
<p>
<label>
<input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_0">
复选框</label>
<br>
<label>
<input type="checkbox" name="CheckboxGroup1" value="复选框" id="CheckboxGroup1_1">
复选框</label>
<br>
</p>
单选框
<input name="单选" type="radio" value="单选一">
<input name="单选" type="radio" value="单选二">
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，HTML中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。
* type：当type="radio"时，控件为单选框
当type="checkbox"时，控件为复选框
* value：提交数据到服务器的值（后台程序PHP使用）
* name：为控件命名，以备后台程序 ASP、PHP 使用
* checked：当设置 checked="checked" 时，该选项被默认选中
4.下拉列表框
<select>
<option value ="volvo">Volvo</option>
<option value ="saab">Saab</option>
<option value="opel">Opel</option>
<option value="audi">Audi</option>
</select>
下拉列表在网页中也常会用到，它可以有效的节省网页空间。既可以单选、又可以多选
（1）单选
* value：<option value='提交值'>选项</option>
* selected="selected"：设置该属性，则该选项就被默认选中
（2）多选
在<select>标签中设置multiple="multiple"属性，就可实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用Command+单击），可以选择多个选项。
| 属性 | 值 | 描述 |
|---|---|---|
| autofocus | autofocus | 规定在页面加载后文本区域自动获得焦点。 |
| disabled | disabled | 规定禁用该下拉列表。 |
| form | form_id | 规定文本区域所属的一个或多个表单。 |
| multiple | multiple | 规定可选择多个选项。 |
| name | name | 规定下拉列表的名称。 |
| required | required | 规定文本区域是必填的。 |
| size | number | 规定下拉列表中可见选项的数目。 |
5.提交按钮
<input name="提交" type="submit" value="提交">
* type：只有当type值设置为submit时，按钮才有提交作用
* value：按钮上显示的文字
6.重置按钮
<input name="重置" type="reset" value="重置">
当用户需要重置表单信息到初始时的状态时， 可以使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以
* type：只有当type值设置为reset时，按钮才有重置作用
* value：按钮上显示的文字
7.form表单中的label标签
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
label标签不会向用户呈现任意特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
注：标签的for 属性中的值应当与相关控件的id 属性值一定要相同。
