在重新系统的学习一下html和css基础的知识点，自己整理一下，做个笔记
https://www.imooc.com/learn/9 学习的是这个课程
html标签
html标签不区分大小写，但通常用小写
html标签
<html></html>称为根标签，所有的网页标签都在<html></html>中。
head标签
<head> 标签用于定义文档的头部，它是所有头部元素的容器。头部元素有<title>、<script>、 <style>、<link>、 <meta>等标签
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
body标签
在<body>和</body>标签之间的内容是网页的主要内容，如<h1>-<h6>、<p>、<a>、<img>等网页内容标签，在这里的标签中的内容会在浏览器中显示出来。
hx标签
<h1></h1>是标题标签 h1 h2 h3 h4 h5 h6依次递减为一级标题……六级标题
p标签
<p></p>是段落标签
img标签
img图片标签 <img src="http://img.mukewang.com/52b4113500018cf102000200.jpg" >
em标签
<em></em>斜体 （强调作用）
strong标签
<strong></strong>加粗（强调作用）
span便签
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 饰）的作家，离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。</p>
<p>菲茨杰拉德，二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。他以诗人的敏感和戏剧家的想象为"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢靡年代的不二注解。</p>
</body>
</html>
上面这个代码，可以单独的将美国梦三个字设置成蓝色的
q标签
<q>庄生晓梦迷蝴蝶，望帝春心托杜鹃</q> //////表示短引用
出来的效果是这样的 庄生晓梦迷蝴蝶，望帝春心托杜鹃
blockquote标签
<blockquote>明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。 戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。</blockquote>
/////表示长引用
出来的效果是这样的
明月出天山，苍茫云海间。长风几万里，吹度玉门关。汉下白登道，胡窥青海湾。由来征战地，不见有人还。 戍客望边色，思归多苦颜。高楼当此夜，叹息未应闲。## br标签 在html中回车空格都是没有作用的，在html文本中若想输入回车换行，就必须输入
<br />
例如：
<p>
暗淡轻黄体性柔，<br />
情疏迹远只香留。<br />
何须浅碧深红色，<br />
自是花中第一流。<br />
</p>
效果如下：
暗淡轻黄体性柔，
情疏迹远只香留。
何须浅碧深红色，
自是花中第一流。
 
在html中输入空格是不起作用的，输入多少个连续空格或是换行都会只显示一个空格的
<body>
来源：作文网 作者：为梦想而飞
</body>
效果如下：
来源：作文网 作者：为梦想而飞hr标签
有时在信息展示时，会需要加一些用于分割的横线，这样使文章看起来整齐一些，默认的样式线条比较粗，颜色为灰色，可用css调整
<p>火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。</p>
<hr />
<p>每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。那天，我拿着行李，带上一个背影的祝福与惆怅，挥手告别了这片土地。我不知道，我何时会回来。</p>
效果如下：
火车飞驰过暗夜里的村庄，月光，总是太容易让思念寂寞，太容易让人觉得孤独。
每一枚被风吹起的蒲公英，都载满了一双眼睛的深情告别与一个目光的依依不舍。那天，我拿着行李，带上一个背影的祝福与惆怅，挥手告别了这片土地。我不知道，我何时会回来。
## address标签 用这个便签来标识地址，如公司地址。电子邮箱或是文档的作者身份，默认样式是斜体<address>
本文的作者：<a href="mailto:[email protected]">lilian</a>
</address>
效果是这样的
本文的作者：lilian ## code标签 添加一行代码语句代码语言
效果是这样的
代码语言
## pre标签
添加大段代码
<pre>
var message="欢迎";
for(var i=1;i<=10;i++)
{
alert(message);
}
</pre>
效果是这样的
var message="欢迎";
for(var i=1;i<=10;i++)
{
alert(message);
}
ul标签
用来添加信息列表(无序的)
<ul>
<li>我的第一个列表信息</li>
<li>我的第二个列表信息</li>
</ul>
效果是这样的 每一个li前面都带一个小圆点
- 我的第一个列表信息
- 我的第二个列表信息
<ol>
<li>我的第一个列表</li>
<li>我的第二个列表</li>
</ol>
效果是这样的
- 我的第一个列表
- 我的第二个列表
div标签
在网页制作过程过中，可以把一些独立的逻辑部分划分出来，放在一个div标签中，这个div标签的作用就相当于一个容器。
div命名
<div id="版块名称">…</div> //////id要唯一
table标签
创建表格的四个元素：table、tbody、tr、th、td
1、 <table>…</table>：整个表格以<table>标记开始、</table>标记结束。
2、<tbody>…</tbody>：如果不加<thead><tbody><tfooter> , table表格加载完后才显示。加上这些表格结构， tbody包含行的内容下载完优先显示，不必等待表格结束后在显示，同时如果表格很长，用tbody分段，可以一部分一部分地显示。（通俗理解table 可以按结构一块块的显示，不在等整个表格加载完后显示。）
3、<tr>…</tr>：表格的一行，所以有几对tr 表格就有几行。
4、<td>…</td>：表格的一个单元格，一行中包含几对<td>...</td>，说明一行中就有几列。
5、<th>…</th>：表格的头部的一个单元格，表格表头。
注意：
1、table表格在没有添加css样式之前，在浏览器中显示是没有表格线的
2、表头，也就是th标签中的文本默认为粗体并且居中显示
用css样式，为表格添加边框
<style type="text/css">
table tr td,th{border:1px solid #000;}
</style>
<body>
<table summary="">
<tr>
<th>班级</th>
<th>学生数</th>
<th>平均成绩</th>
</tr>
<tr>
<td>一班</td>
<td>30</td>
<td>89</td>
</tr>
<tr>
<td>二班</td>
<td>35</td>
<td>85</td>
</tr>
<tr>
<td>三班</td>
<td>32</td>
<td>80</td>
</tr>
</table>
效果如下：
caption标签，为表格添加标题和摘要
摘要的内容是不会在浏览器中显示出来的。它的作用是增加表格的可读性(语义化)，使搜索引擎更好的读懂表格内容，还可以使屏幕阅读器更好的帮助特殊用户读取表格内容。
<table summary="表格简介文本">
标题显示在表格正上方，用来描述表格的内容
<table summary="本表格记录2012年到2013年库存记录，记录包括U盘和耳机库存量">
<caption>2012年到2013年库存记录</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>
效果如下：
a标签
可以用来实现超链接
<a href="目标网址" title="鼠标滑过显示的文本">链接显示的文本</a>
a标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开。
如下代码：
<a href="目标网址" target="_blank">click here!</a>
mailto
注意：如果mailto后面同时有多个参数的话，第一个参数必须以“?”开头，后面的参数每一个都以“&”分隔。
下面是一个完整的实例:
img标签
在网页的制作中为使网页炫丽美观，肯定是缺少不了图片，可以使用标签来插入图片。
语法：
<img src="图片地址" alt="下载失败时的替换文本" title = "提示文本">
举例：
<img src = "myimage.gif" alt = "My Image" title = "My Image" />
讲解：
1、src：标识图像的位置；
2、alt：指定图像的描述性文本，当图像不可见时（下载不成功时），可看到该属性指定的文本；
3、title：提供在图像可见时对图像的描述(鼠标滑过图片时显示的文本)；
4、图像可以是GIF，PNG，JPEG格式的图像文件。
表单标签
表单是可以把浏览者输入的数据传送到服务器端，这样服务器端程序就可以处理表单传过来的数据。
语法：
<form method="传送方式" action="服务器文件">
讲解：
1.<form> ：<form>标签是成对出现的，以<form>开始，以</form>结束。
2.action ：浏览者输入的数据被传送到的地方,比如一个PHP页面(save.php)。
3.method ： 数据传送的方式（get/post）
文本输入框，密码输入框
<form>
<input type="text/password" name="名称" value="文本" />
</form>
1、type：
当type="text"时，输入框为文本输入框;
当type="password"时, 输入框为密码输入框。
2、name：为文本框命名，以备后台程序ASP 、PHP使用。
3、value：为文本输入框设置默认值。(一般起到提示作用)
文本域（多行文本输入）
当用户需要在表单中输入大段文字时，需要用到文本输入域。
语法：
<textarea rows="行数" cols="列数">文本</textarea>
1、标签是成对出现的，以开始，以结束。
2、cols ：多行输入域的列数。
3、rows ：多行输入域的行数。
4、在标签之间可以输入默认值。
单选框，复选框
在使用表单设计调查表时，为了减少用户的操作，使用选择框是一个好主意，html中有两种选择框，即单选框和复选框，两者的区别是单选框中的选项用户只能选择一项，而复选框中用户可以任意选择多项，甚至全选。请看下面的例子:
语法：
<input type="radio/checkbox" value="值" name="名称" checked="checked"/>
1、type:
当 type=“radio” 时，控件为单选框
当 type=“checkbox” 时，控件为复选框
2、value：提交数据到服务器的值（后台程序PHP使用）
3、name：为控件命名，以备后台程序 ASP、PHP 使用
4、checked：当设置 checked=“checked” 时，该选项被默认选中
如下面代码：
在浏览器中显示的结果：
注意:同一组的单选按钮，name 取值一定要一致，比如上面例子为同一个名称“radioLove”，这样同一组的单选按钮才可以起到单选的作用。
下拉列表
1、value
2、selected=“selected”：
设置selected="selected"属性，则该选项就被默认选中。
在浏览器中显示的结果：
下拉列表也可以进行多选操作，在标签中设置multiple="multiple"属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击），可以选择多个选项。
提交按钮
当用户需要提交表单信息到服务器时，需要用到提交按钮。
语法：
<input type="submit" value="提交">
type：只有当type值设置为submit时，按钮才有提交作用
value：按钮上显示的文字
重置按钮
使用重置按钮使输入框恢复到初始状态。只需要把type设置为"reset"就可以。
语法：
<input type="reset" value="重置">
type：只有当type值设置为reset时，按钮才有重置作用
value：按钮上显示的文字
label标签
label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
语法：
<label for="控件id名称">
注意：标签的 for 属性中的值应当与相关控件的 id 属性值一定要相同。
<label>你对什么运动感兴趣</label>
<br />
<label for="manpao">慢跑</label>
<input type="checkbox" name="man" id="manpao">
<br />
<label for="dengshan">登山</label>
<input type="checkbox" name="deng" id="dengshan">
<br />
<label for="lanqiu">篮球</label>
<input type="checkbox" name="lan" id="lanqiu">
效果如下：
注释
<!--注释文字--> html的注释标签
/* */ CSS的注释标签
/* */（注释代码块）、//（注释单行）是JS的注释标签。