HTML+CSS基础（网页示范）
经过阿里巴巴跟腾讯的电话面试之后，我发现之前学的很多知识都忘了，现在从新复习一遍，巩固基础知识才是制胜的关键。
下面是自己写的一个练习网页，都html+css的基础都记录在上面啦，非常的基础，要的时候就抽取出来看看用用。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>sherry的练习项目title>
<link href="test.css" rel="stylesheet" type="text/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 spanh4>
<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>10086td>
<td>小红td>
<td>女td>
tr>
<tr>
<td>10087td>
<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>内联式，嵌入式，外部式CSSh4>
<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>流动模型flowh4>
<div class="first">box2div>
<h1 class="first">标题h1>
<p class="first">文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段文本段。p>
<div id="box1" class="first" >box1div><br />
<h4>内联元素流动模型h4>
<a href="http://www.imooc.com">www.imooc.coma><span>强调span><em>重点em>
<strong>强调strong>
<hr />
<h4>浮动模型h4>
<div class="float_father">
<div class="float_1">浮动模型1div>
<div class="float_2">浮动模型2div>
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="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>li>
ul>
td>tr>
tbody>
table>
<h3>display：inline方法h3>设置容器的text-align:center;里面的内容设置 display:inline;
<div class="container">
<ul>
<li><a href="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>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="#">1a>li>
<li><a href="#">2a>li>
<li><a href="#">3a>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：middlep>
<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;
}