经过阿里巴巴跟腾讯的电话面试之后，我发现之前学的很多知识都忘了，现在从新复习一遍，巩固基础知识才是制胜的关键。
下面是自己写的一个练习网页，都html+css的基础都记录在上面啦，非常的基础，要的时候就抽取出来看看用用。
<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>sherry的练习项目</title>
<!--这是外部式CSS样式-->
<link href="test.css" rel="stylesheet" type="text/css" />
<!--这是嵌入式CSS样式-->
<style type="text/css">
h5{
color:pink;
font-size:13px;
}
</style>
<script></script>
</head>
<body>
<div id="part_1">
<hr />
<h3>一、文段格式的各种功能标签</h3>
<hr />
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<hr />
<h4>文段强调的三种方式：strong em span</h4>
<p>1922年的春天，一个想要成名名叫
<strong>尼克•卡拉威（托比•马奎尔Tobey Maguire饰）的作家，</strong>离开了美国中西部，来到了纽约。那是一个道德感渐失，爵士乐流行，走私为王，股票飞涨的时代。为了追寻他的美国梦，他搬入纽约附近一海湾居住。
</p>
<p>菲茨杰拉德，
<span>二十世纪美国文学巨擘之一，兼具作家和编剧双重身份。</span>他以诗人的敏感和戏剧家的想象为
<em>"爵士乐时代"吟唱华丽挽歌，其诗人和梦想家的气质亦为那个奢</em>靡年代的不二注解。
</p>
<hr />
<h4>引用一句话，自动加引号</h4>
<q>窗前明月光，疑是地上霜</q>
<hr />
<h4>引用一段话，自动缩进</h4>
<blockquote>暗淡轻黄体性柔，情疏迹远只香留。何须浅碧深红色，自是花中第一流。</blockquote>
<hr />
<h4>br回车效果</h4>
暗淡轻黄体性柔，<br />
情疏迹远只香留。<br />
何须浅碧深红色，<br />
自是花中第一流。<br />
<hr />
<h4>地址标签，自动变为斜体</h4>
<address>广州番禺广东工业大学</address>
<hr />
<h4>引用一句代码</h4>
<code>printf("hello world!")</code>
<br />
<h4>引用一段代码，需要贴着边写</h4>
<pre>
var message="欢迎";
for(var i=1;i<=10;i++)
{
alert(message);
}
</pre>
</p>
<hr />
</div>
<div id="part_2">
<hr />
<h3>二、表格格式的各种功能标签</h3>
<hr />
<h4>排名不分先后的ul表</h4>
<ul class="title">
<li>精彩少年</li>
<li>美丽突然出现</li>
<li>触动心灵的旋律</li>
</ul>
<br />
<h4>排名自动编号的ol表</h4>
<ol>
<li>精彩少年</li>
<li>美丽突然出现</li>
<li>触动心灵的旋律</li>
</ol>
<br />
<h4>正式表格</h4>
<table>
<tbody>
<caption>表格标题</caption>
<tr>
<th>学生学号</th>
<th>学生姓名</th>
<th>学生性别</th>
</tr>
<tr>
<td>10086</td>
<td>小红</td>
<td>女</td>
</tr>
<tr>
<td>10087</td>
<td>小覃</td>
<td>女</td>
</tr>
</tbody>
</table>
<hr />
</div>
<div id="part_3">
<hr />
<h3>三、链接与图片标签</h3>
<hr />
<h4>直接跳转的链接</h4>
<a href="http://www.baidu.com" title="点击进入百度首页">a标签的使用</a>
<br />
<h4>在新窗口中打开的链接</h4>
<a href="http://www.baidu.com" target="_blank" title="点击进入百度首页">在新窗口中打开</a>
<br />
<h4>发送邮件链接</h4>
<a href="mailto：[email protected]？subject=welcome&body=helloworld">发送邮件</a>
<br />
<h4>插入图片</h4>
<img src="http://img.mukewang.com/52da54ed0001ecfa04120172.jpg" alt="下载失败时的替换文本" title = "提示文本">
<hr />
</div>
<div id="part_4">
<hr />
<h3>四、表单标签，用于交互</h3>
<hr />
<form method="post" action="save.php">
<label>账号：</label>
<input type="text" name="username" value="myname" />
<br />
<label>密码：</label>
<input type="password" name="password" />
<hr />
<label>文段输入框</label><br />
<textarea cols="50" rows="10">
在这里输入内容......##这里的文段跟pre中一样，会保留所有空格和回车，所以此处的文字紧贴着开头##
</textarea>
<hr />
你喜欢旅游吗？（此处点击文字不可选）<br />
<input type="radio" name="travel" value="喜欢" checked="checked" />喜欢
<input type="radio" name="travel" value="不喜欢" />不喜欢
<input type="radio" name="travel" value="无所谓" />无所谓
<hr />
你有什么爱好？（此处有加label的for属性，点击文字可选）<br />
<label for="run">跑步</label>
<input id="run" type="checkbox" name="trip" value="跑步" checked="checked" /><br />
<label for="climb">登山</label>
<input id="climb" type="checkbox" name="trip" value="登山" /><br />
<label for="swim">游泳</label>
<input id="swim" type="checkbox" name="trip" value="游泳" checked="checked" /><br />
<label for="gym">健身</label>
<input id="gym" type="checkbox" name="trip" value="健身" />
<hr />
<label>下拉单选爱好：</label>
<select>
<option value=‘读书’>读书</option>
<option value=‘运动’>运动</option>
<option value=‘音乐’>音乐</option>
<option value=‘旅游’>旅游</option>
<option value=‘购物’ selected="selected">购物</option>
</select>
<hr />
<label>下拉多选爱好（需要按ctrl键）：</label>
<select multiple=“multiple”>
<option value=‘读书’>读书</option>
<option value=‘运动’>运动</option>
<option value=‘音乐’>音乐</option>
<option value=‘旅游’>旅游</option>
<option value=‘购物’ selected="selected">购物</option>
</select>
<hr />
<input type="submit" value="提交">
<input type="reset" value="重置">
</form>
<hr />
</div>
<div id="part_5">
<hr />
<h3>五、CSS基础</h3>
<hr />
<h4>内联式，嵌入式，外部式CSS</h4>
<!--这是内联式CSS样式-->
<h5 style="color:red;font-size:12px;">
优先级：内联式>嵌入式>外部式。这行字体三种都设了，删掉优先级大的才能显示优先级低的。
</h5>
<hr />
</div>
<div id="part_6">
<hr />
<h3>六、CSS的继承、层叠和特殊性</h3>
<hr />
<p class="first">这里的span继承了颜色粉红属性，没有继承border属性<span>，如果继承了，会显示两个红色框</span></p>
<hr />
标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：<br />
p{color:red;} /*权值为1*/<br />
p span{color:green;} /*权值为1+1=2*/<br />
.warning{color:white;} /*权值为10*/<br />
p span.warning{color:purple;} /*权值为1+1+10=12*/<br />
#footer .note p{color:yellow;} /*权值为100+10+1=111*/<br />
<hr />
</div>
<div id="part_7">
<hr />
<h3>七、CSS文本排版</h3>
<hr />
<h4>文字排版</h4>
<p class="font_set">查看本文段的font_set的css代码可以看到所有文字排版的属性</p><br />
<h4>段落排版</h4>
<p class="paragraph">查看本文段的paragraph的css代码可以看到所有段落排版的属性</p>
<hr />
</div>
<div id="part_8">
<hr />
<h3>八、CSS盒模型</h3>
<hr />
<h4>元素分类</h4>
<p>
常用的块状元素有(独占一行，可设宽高)：div,p,h1-h6,ol,ul,dl,table,address,blockquote,form<br />
常用的内联元素有（分享一行，不可设宽高）：a,span,br,i,em,strong,label,q,var,cite,code <br />
常用的内联块状元素有（分享一行，可设宽高）：img,input <br />
</p>
<h4>盒模型</h4>
<div id="box">
此处的盒子设置了边框宽度，padding,margin,border等属性
</div>
<hr />
</div>
<div id="part_9">
<hr />
<h3>九、CSS布局模型</h3>
<hr />
<h4>流动模型flow</h4>
<div class="first">box2</div><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<h1 class="first">标题</h1><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<p class="first">文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。</p><!--块状元素，由于没有设置宽度，宽度默认显示为100%-->
<div id="box1" class="first" >box1</div><!--块状元素，由于设置了width:300px，宽度显示为300px--><br />
<h4>内联元素流动模型</h4>
<a href="http://www.imooc.com">www.imooc.com</a><span>强调</span><em>重点</em>
<strong>强调</strong>
<hr />
<h4>浮动模型</h4>
<div class="float_father">
<div class="float_1">浮动模型1</div>
<div class="float_2">浮动模型2</div>
</div>
<hr />
<h4>层模型</h4>
<div class="box_father">
<div class="absolute_box">绝对定位:相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。</div>
<div class="relative_box">相对定位:虽然div元素相对于以前的位置产生了偏移，但是div元素以前的位置还是保留着</div>
<div class="fixed_box">固定定位</div>
</div>
</div>
<div id="part_10">
<hr />
<h4>字体缩写</h4>
<p id="font_cut_set">代码的缩写，属性的同一设置，颜色的缩写，都可以减少代码量，进而减少带宽</p>
</div>
<div id="part_11">
<hr />
<h4>行内元素水平居中</h4>
<div class="txtCenter">我是文本，哈哈，我想要在父容器中水平居中显示。</div>
<h4>定宽块状元素水平居中</h4>
<div class="width_box">我是定宽块状元素，确定好宽度，规定左右margin值为auto来实现水平居中。</div>
<h4>不定宽块状元素水平居中</h4>
<h3>table方法</h3>
<table class="center">设置table的左右margin为auto
<tbody>
<tr><td>
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</td></tr>
</tbody>
</table>
<h3>display：inline方法</h3>设置容器的text-align:center;里面的内容设置 display:inline;
<div class="container">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<h3>position:relative 和 left:50%方法</h3>通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。<br />
<div class="container_1">
<ul>
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
</ul>
</div>
<hr />
</div>
<div id="part_12">
<h3></h3>
<h4>单行文本垂直居中</h4>
<h2>通过设置父元素的 height 和 line-height 高度一致来实现的</h2>
<h4>多行文本垂直居中</h4>
<table style="background:#ccc;"><tbody><tr><td class="wrap">
<div style="background:#eee;">
<p>使用插入 table (包括tbody、tr、td)标签，同时设置 vertical-align：middle</p>
<p>css 中有一个用于竖直居中的属性 vertical-align，</p>
<p>但这个样式只有在父元素为 td 或 th 时，才会生效</p>
<p>所以又要插入 table 标签了。</p>
<p>因为 td 标签默认情况下就默认设置了 vertical-align 为 middle，所以我们不需要显式地设置了。</p>
</div>
</td></tr></tbody></table>
<h4></h4>
</div>
<div id="part_13">
<hr />
<h4>隐性改变display类型</h4>
<a href="#" title="">a元素本来是不可以设置width的，但是设置为 position:absolute 以后，就可以了。</a>
</div>
</body>
</html>下面是css的代码：
/*外部式CSS样式在这里写*/
h5{
color:bule;
font-size:15px;
}
/***************************css选择器********************************/
/*标签选择器*/
body{
font-family:"Microsoft Yahei";
}
/*类选择器*/
.first{
color:pink;
border:1px solid red;
}
.font_set{
font-size:20px; /*字号*/
color:#666; /*颜色*/
font-weight:bold; /*加粗*/
font-style:italic; /*斜体*/
text-decoration:underline; /*下划线*/
text-decoration:line-through; /*删除线*/
}
.paragraph{
text-indent:2em; /*开头空两格*/
line-height:3em; /*行间距为3倍*/
letter-spacing:20px; /*文字间隔，字母间隔*/
word-spacing:10px; /*单词间的间距*/
text-align:center; /*块状元素中的文本、图片设置居中样式,也可以left，right*/
}
.float_1{
width:200px;
height:200px;
border:2px red solid;
float:left;
}
.float_2{
width:200px;
height:200px;
border:2px red solid;
float:right;
}
.float_father{
width:100%;
height:220px;
float:left;
}
.box_father{
width:100%;
height:200px;
border:2px red solid;
position:relative; /*如果删除这一句，absolute_box就会以body为参考物*/
}
.absolute_box{
width:200px;
height:200px;
border:2px red solid;
position:absolute;
left:200px;
top:100px;
}
.relative_box{
width:200px;
height:200px;
border:2px blue solid;
position:relative;
left:100px;
top:30px;
}
.fixed_box{
width:200px;
height:200px;
border:2px green solid;
position:fixed;
left:1000px;
top:100px;
}
div.txtCenter{
text-align:center;
}
div.width_box{
border:1px solid red;
width:500px; /*定宽条件不可或缺*/
margin:20px auto; /*规定左右margin值为auto来实现居中*/
}
/*id选择器*/
#box{
border-width:2px; /*边框宽度，thin | medium | thick（但不是很常用），最常还是用象素（px）*/
border-style:solid; /*边框样式，dashed（虚线）| dotted（点线）| solid（实线）*/
border-color:red; /*边框颜色，中的颜色可设置为十六进制颜色*/
border:2px solid red; /*一句搞定上面三句*/
border-bottom:3px solid blue; /*单独设置底框，其他同理*/
margin:20px 10px 30px 40px; /*边框，上、右、下、左(顺时针)*/
padding:20px 10px 30px 40px; /*填充*/
}
#box1{
width:300px;
height:100px;
}
#font_cut_sst{
/*font-style:italic;
font-variant:small-caps;
font-weight:bold;
font-size:12px;
line-height:1.5em;
font-family:"宋体",sans-serif;*//*以上统统化成一句*/
font:italic small-caps bold 12px/1.5em "宋体",sans-serif;
}
/*子选择器*/
.title>li{
border:1px solid green;
}
/*包含（后代）选择器*/
/*不定宽块状元素水平集中方法一*/
.center{
margin:0 auto;
}
.center ul{
list-style:none;margin:0;padding:0;
}
.center li{
float:left;display:inline;margin-right:8px;
}
/*不定宽块状元素水平集中方法二*/
.container{
text-align:center;
}
.container ul{
list-style:none;display:inline;
}
.container li{
display:inline;
}
/*不定宽块状元素水平集中方法三*/
.container_1{
float:left;
position:relative;
left:50%
}
.container_1 ul{
list-style:none;
margin:0;
padding:0;
position:relative;
left:-50%;
}
.container_1 li{
float:left;display:inline;margin-right:8px;
}
#part_12 h2{
height:100px;
line-height:100px;
background:#ccc;
}
#part_13 a{
position:absolute;
width:200px;
background:#ccc;
}
/*通用选择器
*{
color:red;
}
*/
/*伪类选择符*/
a:hover{
color:pink;
}
/*分组选择符*/
h1,span{
color:bule;
}