1.HTML简介
(1) 什么是 HTML？
HTML 是用来描述网页的一种语言。
HTML 指的是超文本标记语言 (Hyper Text Markup Language)
HTML 不是一种编程语言，而是一种标记语言 (markup language)
标记语言是一套标记标签 (markup tag)
HTML 使用标记标签来描述网页
我们一般将一个网页分为三个部分：结构、表现、行为。
结构使用HTML，表现使用CSS，行为使用JavaScript。
HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息，可以包含文字、图片、视频等。
CSS样式是表现。就像网页的外衣。比如，标题字体、颜色变化，或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现。
JavaScript是用来实现网页上的特效效果。如：鼠标滑过弹出下拉菜单。或鼠标滑过表格的背景颜色改变。还有焦点新闻（新闻图片）的轮换。可以这么理解，有动画的，有交互的一般都是用JavaScript来实现的。
(2) HTML 标签
HTML 标记标签通常被称为 HTML 标签 (HTML tag)。
HTML 标签是由尖括号包围的关键词，比如 <html>
HTML 标签通常是成对出现的，比如 <b> 和 </b>
标签对中的第一个标签是开始标签，第二个标签是结束标签
开始和结束标签也被称为开放标签和闭合标签
(3) HTML 文档 = 网页
HTML 文档描述网页
HTML 文档包含 HTML 标签和纯文本
HTML 文档也被称为网页
Web 浏览器的作用是读取 HTML 文档，并以网页的形式显示出它们。浏览器不会显示 HTML 标签，而是使用标签来解释页面的内容：
<html>
<body>
<h1>我的第一个标题</h1>
<p>我的第一个段落。</p>
</body>
</html>
例子解释 ：
<html> 与 </html> 之间的文本描述网页
<body> 与 </body> 之间的文本是可见的页面内容
<h1> 与 </h1> 之间的文本被显示为标题
<p> 与 </p> 之间的文本被显示为段落
2.HTML标签：
<--声明当前网页的版本，这个声明表示当前网页使用的是html5-->
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>表头的名字</title>
</head>
<body>
<!-- 网页主体内容 -->
</body>
</html>
<html></html>称为根标签，所有的网页标签都在<html></html>中。
<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签。
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
常用标签详细讲解如下：
(1) 标题标签：<hx>标题文本</hx> (x为1-6)
(2) 段落标签：<p>段落</p>
(3) <strong>和<em>标签：
有了段落又有了标题，现在如果想在一段话中特别强调某几个文字，这时候就可以用到<em>或<strong>标签。
但两者在强调的语气上有区别:<em> 表示强调，<strong> 表示更强烈的强调。并且在浏览器中<em> 默认用斜体表示，<strong> 用粗体表示。
(4) <span>标签为文字设置单独样式：
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>了不起的盖茨比</title>
<style>
span{
color:blue;
}
</style>
</head>
<body>
<p>1922年的春天，一个想要成名名叫尼克•卡拉威（托比•马奎尔Tobey Maguire 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的<span>美国梦</span>，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>
(5) <q>标签，短文本引用：注意要引用的文本不用加双引号，浏览器会对q标签自动添加双引号。
(6) <blockquote>标签，长文本引用。
(7) 换行标签：<br />。
(8) 为网页中添加空格:
(9) <hr>:添加水平横线。
(10) <address>标签，为网页加入地址信息。
(11) <code>标签:
加入一行代码。<code>代码语言</code>，
如果是多行代码，可以使用<pre>标签。
(12) 使用ul，添加新闻信息列表:
ul-li是没有前后顺序的信息列表。
ul-li在网页中显示的默认样式一般为：每项li前都自带一个圆点。
(13) 使用ol，添加图书销售排行榜:
<ol>
<li>前端开发面试心法 </li>
<li>零基础学习html</li>
<li>JavaScript全攻略</li>
</ol>
<ol>在网页中显示的默认样式一般为：每项<li>前都自带一个序号，序号默认从1开始。
(14) div
在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个<div>标签中，这个<div>标签的作用就相当于一个容器。
(15) div命名，使逻辑更加清晰
<div id="版块名称">…</div>
(16) 用css样式，为表格加入边框
Table 表格在没有添加 css 样式之前，是没有边框的。这样不便于我们后期合并单元格知识点的讲解，所以在这一节中我们为表格添加一些样式，为它添加边框。
(17) caption标签，为表格添加标题和摘要.
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>认识table表标签</title>
<style type="text/css">
table tr td,th{
border:1px solid #000;
}
</style>
</head>
<body>
<table summary="表格简介文本">
<caption>标题文本</caption>
<tr>
<th>产品名称 </th>
<th>品牌 </th>
<th>库存量（个） </th>
<th>入库时间 </th>
</tr>
<tr>
<td>耳机 </td>
<td>联想 </td>
<td>500</td>
<td>2013-1-2</td>
</tr>
<tr>
<td>U盘 </td>
<td>金士顿 </td>
<td>120</td>
<td>2013-8-10</td>
</tr>
<tr>
<td>U盘 </td>
<td>爱国者 </td>
<td>133</td>
<td>2013-3-25</td>
</tr>
</table>
</body>
</html>
(18) <a>标签:
超链接
<a href="目标网址" target="_blank" title="鼠标滑过显示的文本">链接显示的文本</a>
href 指向的是一个连接的地址
target 指定在哪个窗口中打开链接
_blank 在新窗口中打开
_self 在当前窗口打开（默认）
(19) <img>标签:为网页插入图片
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
src：标识图像的位置；
alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
图像可以是GIF，PNG，JPEG格式的图像文件。
(20) 表格
<!-- table代表的是表格 而在table中的border="1"是为表格加边框使用的-->
<table border="1">
<!--tr代表的是表格中的行，而td代表的是表格中的列 -->
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
说明：在列中可以设置属性
< td rowspan ="2" align ="right"></td> 其中rowspan ="2"跨行显示，alight属性用于设置在该行中的位置。
< td colspan= "2" align="center" ></td> 其中colspan= "2"属性用于合并单元格。
(21) 表单：表单是用来向服务器提交数据
说明：form代表的是表单，action是表单提交之后跳转的页面，而下面的提交按钮就是用于表单的提交的。
<form action="">
文本框：<input type="test" name="" />
密码框: <input type="password" name="" />
单选按钮：<input type="radio" name="" value="" />
多选框: <input type="checkbox" name="" value="" />
下拉列表：
<select name="性别">
<option value="男">男</option>
<option value="女">女</option>
</select>
使用下拉列表框进行多选:
<label>爱好:</label>
<select multiple="multiple">
<option value="看书">看书</option>
<option value="旅游">旅游</option>
<option value="运动">运动</option>
<option value="购物">购物</option>
</select>
提交按钮：<input type="submit" value="按钮上的文字" />
重置按钮： <input type="reset" value="重置">
</form>
(22) form表单中的label标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法：
<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>form中的lable标签</title>
</head>
<body>
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<br />
<label for="email">输入你的邮箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>
</body>
</html>
3.HTML中DIV与SPAN的区别:
div是块级元素， 实际上就是一个区域， 主要用于容纳其他标签。 默认的display属性是block
span是行内元素， 主要用于容纳文字。 默认的display属性是inline
看看如下：
<html>
<body>
test<span>紧跟前面的"test"显示</span><div>而这里会另起一行显示</div>
</body>
</html>
