HTML 是指超文本标记语言: Hyper Text Markup Language，用于描述网页。
1.基本框架
<!DOCTYPE html> 声明文档类型 超文本标记语言
<html>
<head> 头部
<title>网页文档标题</title>
</head>
<body> 可见文本… </body> 主题
</html>
头部部分：
HTML 头部元素<head>包含关于文档的概要信息，也被称为元信息（meta-information）。
<head> 元素包含了所有的头部标签元素。在 <head>元素中你可以插入脚本（scripts）, 样式文件（CSS），及各种 meta 信息；可以添加在头部区域的元素标签为: <title>, <style>, <meta>, <link>, <script>, <noscript> 和 <base>；<head> 元素描述了文档的各种属性和信息，其中包括文档的标题、在 Web 中的位置以及和其他文档的关系等。
HTML <title>：元素<title> 标签定义了不同文档的标题。<title> 在 HTML/XHTML 文档中是必须的。<title> 元素:定义了浏览器工具栏的标题、当网页添加到收藏夹时，显示在收藏夹中的标题、显示在搜索引擎结果页面的标题。
<link> 元素：<link> 标签定义了文档与外部资源之间的关系，<link> 标签通常用于链接到样式表:
2.基本标签
<h1>最大的标题</h1> h1代表1级标题
<h2> . . . </h2>
<h3> . . . </h3>
<h4>最小的标题</h4>
<p>这是一个段落。</p>
<p>段落1</p>
<p>段落2</p>
<br> （换行） barter row 换行或列 无结束标签
<hr> （水平线）换段落 Horizontal行或横线 无结束标签
<!– 这是注释 –>
注：DOCTYPE 声明了文档的类型
<html> 标签是HTML页面的根元素，该标签的结束标志为 </html>
<head>标签包含了文档的元（meta）数据，如<meta charset=”utf-8″>定义网页编码格式为utf-8。
<title>标签定义文档的标题
<body> 标签定义文档的主体，即网页可见的页面内容，该标签的结束标志为 </body>
<h1> 标签作为一个标题使用，该标签的结束标志为 </h1> h是英文header标题的缩写
<p> 标签作为一个段落显示，该标签的结束标志为 </p> p=paragraph
3.HTML 元素可以设置属性
属性可以在元素中添加附加信息，属性一般描述于开始标签
属性总是以名称/值对的形式出现，比如：name=”value”。
双引号是最常用的，在某些个别的情况下，比如属性值本身就含有双引号，那么您必须使用单引号，例如：name=’John “ShotGun” Nelson’
4.链接：a标签，也叫anchor（锚点）元素
普通的链接：<a href=”链接地址”>链接文本</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>
4.1.HTML 链接 – target 属性 target=目标
使用 Target 属性，你可以定义被链接的文档在何处显示（在新的窗口打开，还是在原有的窗口中打开）。
1.<a href=”链接地址” target=”_top”>链接地址的名字</a>
在原有的窗口中打开的（跳出框架）“链接地址”
2.<a href=”链接地址” target=”_blank”>链接地址的名字</a>
默认的被链接文档会在原有的窗口中打开的。如果将 target 属性设置为 “_blank” 则文档就会在新窗口打开。（跳出一个窗口，在另外的窗口打开了“链接地址”）Blank=空白
4.2HTML 链接 – id 属性
id 属性可用于在一个 HTML 文档中创建书签标记。
<p>
<a href=”#C2″>查看章节 2</a> href属性链接到C2
</p>
<h2>章节 1</h2>
<p>这边显示该章节的内容……</p>
<h2><a id=”C2″>章节 2</a></h2> 书签C2
<p>这边显示该章节的内容……</p>
<h2>章节 3</h2>
<p>这边显示该章节的内容……</p>
1.在HTML文档中插入ID:
<a id=”tips”>Useful Tips Section</a>
2.在HTML文档中创建一个链接到”有用的提示部分(id=”tips”）”：
<a href=”#tips”>Visit the Useful Tips Section</a>
或从另一个页面创建一个链接到”有用的提示(id=”tips”）部分”：
<a href=”//www.w3cschool.cn/html_links.html#tips”> Visit the Useful Tips Section</a>
5.图片（Images）
<img src=”URL” alt=”替换文本” height=”42″ width=”42″>
图像标签（<img>）、源属性（Src）和 Alt属性
1.在 HTML 中，图像由<img> 标签定义。<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
2.src =source 来源，源属性的值是图像的 URL 地址（URL只是个代号，实际输入的是图片的地址）
3.alt 属性用来为图像定义一串预备的可替换的文本。在浏览器无法载入图像时，替换文本属性告诉读者他们失去的信息。此时，浏览器将显示这个替代性的文本而不是图像。
4.height（高度） 与 width（宽度）属性用于设置图像的高度与宽度。
注：普通的链接：<a href=”链接地址”>链接文本</a>
图像链接： <a href=”http://www.example.com/”><img src=”URL” alt=”替换文本”></a>
6.HTML 样式- CSS
CSS（Cascading Style Sheet）可译为“层叠样式表”或“级联样式表”，它定义如何显示 HTML 元素，用于控制Web页面的外观。通过使用CSS实现页面的内容与表现形式分离，极大提高了工作效率 。样式存储在样式表中，通常放在<head>部分或存储在外部CSS文件中。
<style> 标签包含了 HTML 文档的样式详细，在默认情况下，在该元素内写入的样式指令将被认为是CSS。
1.在头部上
<head>
<meta charset=”utf-8″>
<title>W3Cschool(w3cschool.cn)</title>
<style type=”text/css”>
h1 {color:red;}
p {color:blue;}
</style>
</head>
2.在主体上
<body style=”background-color:yellow;”>
<h2 style=”background-color:red;”>这是一个标题</h2>
<p style=”background-color:green;”>这是一个段落。</p>
</body>
CSS Id 和 Class选择器
id 选择器：可以为标有特定 id 的 HTML 元素指定特定的样式。HTML元素以id属性来设置id选择器,CSS 中 id 选择器以 “#” 来定义。以下的样式规则应用于元素属性 id=”para1″:
例：
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
#para1
{
text-align:center;
color:red;
}
</style>
</head>
<body>
<p id=”para1″>Hello World!!!</p>
<p>This paragraph is not affected by the style.</p>
</body>
</html>
注：ID属性只能在每个 HTML 文档中出现一次。
class 选择器：用于描述一组元素的样式，class 选择器有别于id选择器，class可以在多个元素中使用。class 选择器在HTML中以class属性表示, 在 CSS 中，类选择器以一个点”.”号显示：在以下的例子中，所有拥有 center 类的 HTML 元素均为居中。
<!DOCTYPE html>
<html>
<head>
<meta charset=”utf-8″>
<title>W3Cschool教程(w3cschool.cn)</title>
<style>
.center
{
text-align:center;
}
</style>
</head>
<body>
<h1 class=”center”>标题居中</h1>
<p class=”center”>段落居中。</p>
</body>
</html>
7.表格（Tables）
<table border=”1″>
<tr>
<th>表格标题</th>
<th>表格标题</th>
</tr>
<tr>
<td>表格数据</td>
<td>表格数据</td>
</tr>
</table>
表格由<table>标签来定义。
每个表格均有若干行（由<tr> 标签定义）， table row
每行被分割为若干单元格（由<td>标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。
数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
HTML 表格的基本结构：
<table>…</table>：定义表格
<th>…</th>：定义表格的标题栏（文字加粗） table header
<tr>…</tr>：定义表格的行
<td>…</td>：定义表格的列 table data表格数据
table border表格边界：<table border=”1″> 有边框
<table border=”0″> 无边框
<table border=”1″ cellpadding=”10″> 创建单元格内容与其边框之间的空白（单元格边距）
<table border=”1″ cellspacing=”10″> 增加单元格之间的距离（单元格间距）
<caption>…</caption>：定义表格的标题
<caption> 标签必须直接放置到 <table> 标签之后。您只能对每个表格定义一个标题。通常这个标题会被居中于表格之上。然而，CSS 属性 “text-align” 和 “caption-side” 能用来设置标题的对齐方式和显示位置。
水平标题与垂直标题
1.水平标题：
<h4>水平标题:</h4>
<table border=”1″>
<tr>
<th>Name</th>
<th>Telephone</th>
<th>Telephone</th>
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
2.垂直标题：
<h4>垂直标题:</h4>
<table border=”1″>
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 854</td>
</tr>
<tr>
<th>Telephone:</th>
<td>555 77 855</td>
</tr>
</table>
如何定义跨行或跨列的表格单元格：
1.单元格跨两格
<h4>单元格跨两格:</h4>
<table border=”1″>
<tr>
<th>Name</th> 实际是三个标题栏，但将其中两个合成一个单元格
<th colspan=”2″>Telephone</th> （colspan=合并单元格）
</tr>
<tr>
<td>Bill Gates</td>
<td>555 77 854</td>
<td>555 77 855</td>
</tr>
</table>
单元格跨两列：
<h4>单元格跨两列:</h4>
<table border=”1″>
<tr>
<th>First Name:</th>
<td>Bill Gates</td>
</tr>
<tr>
<th rowspan=”2″>Telephone:</th> 标题栏行跨度是2，输入第二行数据后，换行输入
<td>555 77 854</td> 第三行数据（rowspan=行跨度）
</tr>
<tr>
<td>555 77 855</td>
</tr>
</table>
8.HTML 列表
1.无序列表
<ul> ul=Unordered list
<li>项目</li> li=List item 项目
<li>项目</li>
</ul>
不同的类型
<ul style=”list-style-type:disc”>
2.有序列表
<ol> ol=ordered list 订购清单
<li>第一项</li>
<li>第二项</li>
</ol>
<ol start=”50″>
<li>咖啡</li>
<li>茶</li>
<li>牛奶</li>
</ol>
不同的类型
<ol type=”A”>或<ol type=”a”>或<ol type=”I”>或<ol type=”i”>
3.定义列表
<dl>
<dt>项目 1</dt>
<dd>描述项目 1</dd> <dt>项目 2</dt>
<dd>描述项目 2</dd>
</dl>
注：描述列表 dl=description list
描述列表的项目/名字 dt=describe the item/name of the list
描述列表中的项目/名字进行描述dd=Describe the item/name in the description list
自定义列表以 <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
嵌套列表
<h4>嵌套列表:</h4>
<ul>
<li>咖啡</li>
<li>茶
<ul>
<li>红茶</li>
<li>绿茶
<ul>
<li>中国</li>
<li>非洲</li>
</ul>
</li>
</ul>
</li>
<li>牛奶</li>
</ul>
9.HTML 表单：用于收集不同类型的用户输入。
表单是一个包含表单元素的区域。表单元素是允许用户在表单中输入内容，表单使用表单标签 <form> 来设置:
多数情况下被用到的表单标签是输入标签（<input>）。<input> 元素是最重要的表单元素。
输入类型是由类型属性（type）定义的
单选按钮（Radio Buttons）
<input type=”radio”> 标签定义了表单单选框选项。
<form>
<input type=”radio” name=”sex” value=”male”>Male<br>
<input type=”radio” name=”sex” value=”female”>Female
</form>
复选框（Checkboxes）
<input type=”checkbox”> 定义了复选框. 用户需要从若干给定的选择中选取一个或若干选项。
<form>
<input type=”checkbox” name=”vehicle” value=”Bike”>I have a bike<br>
<input type=”checkbox” name=”vehicle” value=”Car”>I have a car
</form>
提交按钮(Submit Button)
<input type=”submit”> 定义了提交按钮.
当用户单击确认按钮时，表单的内容会被传送到另一个文件。表单的动作属性定义了目的文件的文件名。由动作属性定义的这个文件通常会对接收到的输入数据进行相关的处理。
<form name=”input” action=”/statics/demosource/html_form_action.php” method=”get”>
Username: <input type=”text” name=”user”>
<input type=”submit” value=”Submit”>
</form>
输入数据会传送到 “html_form_action.php” 的页面。该页面将显示出输入的结果。
两个单选框和一个确认按钮
<form action=”/statics/demosource/demo-form.php” method=”get”>
<input type=”radio” name=”sex” value=”Male”> Male<br>
<input type=”radio” name=”sex” value=”Female” checked=”checked”> Female<br>
<input type=”submit” value=”提交”>
</form>
两个复选框和一个确认按钮
<form action=”/statics/demosource/demo-form.php” method=”get”>
<input type=”checkbox” name=”vehicle” value=”Bike”> I have a bike<br>
<input type=”checkbox” name=”vehicle” value=”Car” checked=”checked”> I have a car<br>
<input type=”submit” value=”提交”>
</form>
两个输入框和一个确认按钮
<form action=”/statics/demosource/demo-form.php” method=”post”>
First name: <input type=”text” name=”FirstName” value=”Mickey”><br>
Last name: <input type=”text” name=”LastName” value=”Mouse”><br>
<input type=”submit” value=”提交”>
</form>