由于不注重基础知`识的系统化学习，被一份笔试题打败，所以潜心修炼，加油！！
1.划分版块div 2.<caption>为表格添加标题和摘要</caption> 3.<a href="http://www.imooc.com" target="_blank">标签在默认情况下，链接的网页是在当前浏览器窗口中打开，有时我们需要在新的浏览器窗口中打开需要用到target。</a> 4.给a标签中加入邮箱地址：可以直接发送
注意： （1）name：为文本框命名，以备后台程序ASP 、PHP使用； （2）value：提交数据到服务器的值（后台程序PHP使用）（一般起到提示作用），在提交与重置按钮时：value表示按钮上显示的文字； （3）checked：当设置 checked=”checked” 时，该选项被默认选中 （4）label：label标签不会向用户呈现任何特殊效果，它的作用是为鼠标用户改进了可用性。如果你在 label 标签内点击文本，就会触发此控件。就是说，当用户单击选中该label标签时，浏览器就会自动将焦点转到和标签相关的表单控件上（就自动选中和该label标签相关连的表单控件上）。
常见类型：
<form> 用户名： <input type="text" value=""/> //文本框 密码：<input type="password" value=""/> //密码框 <input type="submit" value="确定"/> //提交按钮 <input type="reset" value="重置"/> //重置 <input type="radio" /> //单选框 <input type="checkbox"/> //复选框 </form>4.文本输入域
<textarea cols="列数" rows="行数">在这里输入内容...</textarea>5.下拉列表框 注意： （1）设置selected=”selected”属性，则该选项就被默认选中。 （2）下拉列表多选操作：在select标签中设置multiple=”multiple”属性，就可以实现多选功能，在 windows 操作系统下，进行多选时按下Ctrl键同时进行单击（在 Mac下使用 Command +单击）；
<form action="save.php" method="post"> <label>最喜欢的科目：<label/> <selected> <option value="数学" selected="selected"> 数学</option> //将数学设置为默认选项 <option value="英语">英语</option> <option value="政治">政治</option> <option value="物理">物理</option> <selected> </form>如图： 注意： 单选框radio在name相同的情况下只能选中一个！！！ 取消已经选择过的按钮则需要更多代码：
<!DOCTYPE HTML> <html> <head> <title>单选按钮取消选中的三种方式</title> <script type="text/javascript" src="http://lib.sinaapp.com/js/jquery/1.7.2/jquery.min.js"> </script> <script type="text/javascript"> $(function(){ // var $browsers = $("input[name=browser]"); var $cancel = $("#cancel"); var $byhide = $("#byhide"); var $remove = $("#remove"); // $cancel.click(function(e){ // 移除属性,两种方式都可 //$browsers.removeAttr("checked"); $browsers.attr("checked",false); }); // $byhide.click(function(e){ // 切换到一个隐藏域,两种方式均可 //$("#hidebrowser").attr("checked",true); $("#hidebrowser").attr("checked","checked"); }); // $remove.click(function(e){ // 直接去的DOM元素,移除属性 // 如果不使用jQuery,则可以移植此方式 var checkedbrowser=document.getElementsByName("browser"); /* $.each(checkedbrowser, function(i,v){ v.checked = false; v.removeAttribute("checked"); }); */ // var len = checkedbrowser.length; var i = 0; for(; i < len; i++){ // 必须先赋值为false,再移除属性 checkedbrowser[i].checked = false; // 不移除属性也可以 //checkedbrowser[i].removeAttribute("checked"); } }); }); </script> </head> <body> <p>您喜欢哪款浏览器？</p> <form> <input style="display:none;" id="hidebrowser" type="radio" name="browser" value=""> <input type="radio" name="browser" value="Internet Explorer">Internet Explorer<br /> <input type="radio" name="browser" value="Firefox">Firefox<br /> <input type="radio" name="browser" value="Netscape">Netscape<br /> <input type="radio" name="browser" value="Opera">Opera<br /> <br /> <input type="button" id="cancel" value="取消选中方式1" size="20"> <input type="button" id="byhide" value="取消选中方式2" size="20"> <input type="button" id="remove" value="取消选中方式3" size="20"> </form> </body> </html>1.样式有三种：内联式、嵌入式、外部式 优先级：就近原则！！！ 2.若标题标签例如h1默认为粗体,想要去掉粗体，则可以设置为：font-weight:normal; 3.子选择器与后代选择器区别： 子选择器：父元素的直接（第一代）后代； 后代选择器：父元素的所有后代（包括儿子、孙子） 4.伪类选择符：hover 5.权值： 标签的权值为1，类选择符的权值为10，ID选择符的权值最高为100。例如下面的代码：
p{color:red;} /*权值为1*/ p span{color:green;} /*权值为1+1=2*/ p>span{color:green} //权值也是1+1=2 .warning{color:white;} /*权值为10*/ p span.warning{color:purple;} /*权值为1+1+10=12*/ #footer .note p{color:yellow;} /*权值为100+10+1=111*/注意： * 继承权值最低。 * 最高权值：！important 写法：
p{ color:green!important; } p{ color:red; }最终p的颜色为green；
6.层叠： 层叠就是在html文件中对于同一个元素可以有多个css样式存在，当有相同权重的样式存在时，会根据这些css样式的前后顺序来决定，处于最后面的css样式会被应用。（后面的样式会覆盖前面的） 7.（1）设置文字斜体：italic
font-style:italic;或者使用i标签； （2）.文字下划线：
text-decoration:underline; 或者使用u标签（3）删除线： 类似于这种：
<p>原价：<span class="oldPrice">300</span>元 现价：230 元</p> .oldPrice{ text-decoration:line-through; }（4）段前缩进：即空两个字
text-indent:2em；//2em即就是文字的两倍大小（5）中文字间距、字母间距
letter-spacing:20px;（6）块状元素居中：
text-align:center;8.在CSS中，html中的标签元素大体被分为三种不同的类型：块状元素、内联元素(又叫行内元素)和内联块状元素。 （1）常用的块状元素： div、p、h1-h6、ol、ul、dl、table、address、blockquote 、form （2）常用的内联元素有：内联元素不可以设置宽高； a、span、br、i、em、strong、label、q、var、cite、code （3）常用的内联块状元素有： img、input 注意： （1）blockquote 标签定义块引用。 blockquote 与 /blockquote 之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。也就是说，块引用拥有它们自己的空间。 （2）dl标签定义了定义列表 dl标签用于结合 dt （定义列表中的项目）和 dd （描述列表中的项目）。 例： 代码：
<html> <body> <h2>一个定义列表：</h2> <dl> <dt>计算机</dt> <dd>用来计算的仪器 ... ...</dd> <dt>显示器</dt> <dd>以视觉方式显示信息的装置 ... ...</dd> </dl> </body> </html>结果： （3） * cite标签通常表示它所包含的文本对某个参考文献的引用，比如书籍或者杂志的标题。 按照惯例，引用的文本将以斜体显示。 * 用 cite标签把指向其他文档的引用分离出来，尤其是分离那些传统媒体中的文档，如书籍、杂志、期刊，等等。如果引用的这些文档有联机版本，还应该把引用包括在一个 a 标签中，从而把一个超链接指向该联机版本。 * cite 标签还有一个隐藏的功能：它可以使你或者其他人从文档中自动摘录参考书目。我们可以很容易地想象一个浏览器，它能够自动整理引用表格，并把它们作为脚注或者独立的文档来显示。cite标签的语义已经远远超过了改变它所包含的文本外观的作用；它使浏览器能够以各种实用的方式来向用户表达文档的内容。 （4） * code标签是用于文本编辑的一个标签，所以作为大部分网站建设人员都不会用到。 * code标签的功能表现形式是将一段文本中的“代码”部分作区别于文本其他部分的显示。 * code标签的应用：当需要处理这些代码文本的显示的时候、可搭配css来制作更友好的页面。可以抓取code标签的内容进行处理，简单如设置复制按钮，使浏览者可以复制这一段代码 另外建议可以看一下pre标签，与code主要搭配使用。
9.块级元素有什么特点： （1）每个块级元素都从新的一行开始，并且其后的元素也另起一行。（真霸道，一个块级元素独占一行） （2）元素的高度、宽度、行高以及顶和底边距都可设置。 （3）元素宽度在不设置的情况下，是它本身父容器的100%（和父元素的宽度一致），除非设定一个宽度。
10.将内联元素设置为块级元素：
display:block;将块级元素设置为内联元素：
display:inline;11.内联块状元素：如 img 与input 同事具备内联元素与块状元素的特点；
display:inline-block;特点： inline-block 元素特点： 1、和其他元素都在一行上； 2、元素的高度、宽度、行高以及顶和底边距都可设置。
1、border-style（边框样式）常见样式有： dashed（虚线）| dotted（点线）| solid（实线）。
2、border-color（边框颜色）中的颜色可设置为十六进制颜色，如: border-color:#888;//前面的井号不要忘掉。
3、border-width（边框宽度）中的宽度也可以设置为： thin | medium | thick（但不是很常用），最常还是用象素（px）。
在网页中，元素有三种布局模型： 1、流动模型（Flow） （1）在流动模型下，内联元素的特点：“包含元素内从左到右水平分布显示”。（内联元素可不像块状元素这么霸道独占一行） （2）默认状态下，块状元素宽度都为100%； 2、浮动模型 (Float) 3、层模型（Layer） 层模型有三种形式： （1）绝对定位(position: absolute) （2）相对定位(position: relative) （3）固定定位(position: fixed) 4.Relative与Absolute组合使用 （1）参照定位的元素必须是相对定位元素的前辈元素：
<div id="box1"><!--参照定位的元素--> <div id="box2">相对参照元素进行定位</div><!--相对定位元素--> </div>box1是box2的父元素，即属于前辈元素
（2）参照定位的元素必须加入position:relative;
#box1{ width:200px; height:200px; position:relative; }（3）定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。
position:absolute; top:20px; left:30px; }这样box2就可以相对于父元素box1定位了（这里注意参照物就可以不是浏览器了，而可以自由设置了）。
1、如果top、right、bottom、left的值相同，如下面代码：
margin:10px 10px 10px 10px;可缩写为：
margin:10px;2、如果top和bottom值相同、left和 right的值相同，如下面代码：
margin:10px 20px 10px 20px;可缩写为：
margin:10px 20px;3、如果left和right的值相同，如下面代码：
margin:10px 20px 30px 20px;可缩写为：
margin:10px 20px 30px;注意:padding、border与margin缩写方法相同！
4、颜色值缩写 关于颜色的css样式也是可以缩写的，当你设置的颜色是16进制的色彩值时，如果每两位的值相同，可以缩写一半。 如：
#000000——#000 #336699———#3691.英文命名颜色 例如：red 、green、……..
color:red;2.rgb命名颜色 值在0-255之间也可以是百分比
rgb(122,222,211); rgb(,24%,45%);3.十六进制颜色
color:#00ffff;1.像素值 因为像素指的是显示器上的小点（CSS规范中假设“90像素=1英寸”）。实际情况是浏览器会使用显示器的实际像素值有关，在目前大多数的设计者都倾向于使用像素（px）作为单位。 2.em 就是本元素给定字体的 font-size 值，如果元素的 font-size 为 14px ，那么 1em = 14px；如果 font-size 为 18px，那么 1em = 18px。如下代码：
p{font-size:12px;text-indent:2em;}上面代码就是可以实现段落首行缩进 24px（也就是两个字体大小的距离）。 下面注意一个特殊情况： 但当给 font-size 设置单位为 em 时，此时计算的标准以 p 的父元素的 font-size 为基础。如下代码：
<p>以这个<span>例子</span>为例。</p> p{font-size:14px} span{font-size:0.8em;}结果 span 中的字体“例子”字体大小就为 11.2px（14 * 0.8 = 11.2px）。 3.百分比
p{font-size:12px;line-height:130%}设置行高（行间距）为字体的130%（12 * 1.3 = 15.6px）。
1.水平居中设置 （1）如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。 （2）满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。 （3）不定宽块状元素：块状元素的宽度width不固定。 不定宽度的块状元素有三种方法居中（这三种方法目前使用的都很多）： a.加入 table 标签（table标签长度自适应性，可看作是定宽块状元素,然后使用margin) b.设置 display: inline 方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置（然后使用 text-align:center） c.通过给父元素设置 float，然后给父元素设置 position:relative 和 left:50%，子元素设置 position:relative 和 left: -50% 来实现水平居中。
