首页 > 代码库 > HTML+CSS小结
HTML+CSS小结
WEB标准构成：
结构 HTML
样式 CSS
行为 JavaScript(交互行为)
html代码规范：
声明doctype
UTF-8
标签缩进
标签小写
注释
<!doctypt html>
<meta charset="utf-8" />
<meta name="参数" content="name属性值"/>
<meta name="keywords" content=""/>
<meta name="description" content=""/>
<title>网页标题</title>
table标签的属性：
<caption>标题</caption>
<table cellpadding="0" cellspacing="0"> /* cellpadding相当于padding，cellspacing相当于margin */
<tr>表格的行
<th colspan="3">表头单元格</th> /* colspan:跨列,rowspan：跨行 */
<td>单元格</td>
</tr>
</table>
ul、ol的区别：
ul—无序列表
<ul>
<li></li>
<li></li>
</ul>
ol—有序列表
<ol>
<li></li>
<li></li>
</ol>
css的引入方式以及优缺点：
外部引入：<link rel="stylesheet" type="text/css" href="http://www.mamicode.com/css/index.css" />
优点：一个css文件可控制多个页面、易改版、便于维护、减少代码量、代码简介规范 易于分工协作
缺点：相对于单页有垃圾代码、外部引入中的href属性会给服务器造成请求的压力
——常用于访问量巨大的网页
头部引入：<style></style>
优点：速度快、没有服务器请求压力、相对于外部引入单页代码量少
缺点：不易改版与维护、代码较乱不易前后台沟通
——常用于大型互联网首页 如：网易、新浪等
标签内引入:<div ></div>
优点：优先级最高
缺点：余代码多、代码量大、不利于维护
——个别特殊效果的使用
css选择器与书写:
ID 选 择器: #div1{ }
类 选 择器: .div1{ }
标签选择器: a/img/span/p/div1{ }
群组选择器: #div1,#div2,#div3{ }
后代选择器: #div1 .div2 a{ }
css选择器的优先级：
html标签的基本属性: 块属性 行属性
块属性标签：
h1~h6
ol-有序列表
ul-无序列表
dl-定义列表
table-表格
p-段落
br-换行
行属性标签：
span-无语意标签，类似于div，font-weight加粗；
a-定义锚，有利于seo搜索引擎优化
img-定义图片，用于在页面中显示图片
var-定义文本的变量部分
strong-定义强调文本
em-定义强调文本
form-表单提交，用于提交数据
块标签可以嵌套块标签和行标签，但行标签只能嵌套行标签！
行标签可以通过给浮动或转成块属性display：block；
textarea:定义多行的文本输入控件
select-定义选择列表（下拉列表）
option-定义选择列表中的选项
<select>
<option>Volvo</option>
<option selected="selected">Saab</option>
<option>Mercedes</option>
<option>Audi</option>
</select>
input-定义文本变量部分，常用type属性值如下：
<input type="text" name="" value="" onclick="" />
<input type="button" name="" value="" onclick="" />
<input type="submit" name="" value="" onclick="" />
<input type="gile" name="" value="" onclick="" />
<input type="heckbox" name="" value="" onclick="" />
<input type="radio" name="" value="" onclick="" />
<input type="password" name="" value="" onclick="" />
<input type="reset" name="" value="" onclick="" />
<input type="hidden" name="" value="" onclick="" />
css的样式：
文本、字体：可同时为页面设置多个字体，当浏览器找不到第一个字体是会寻找第二个，知道找到可用字体。
font-family: "宋体"，Arail,Tabhoma,sans-serif;
字体设置：1、中文页面以宋体为首选，其他字体次之
2、英文页面以Arail/Tahoma等字体
3、中英结合网站用英文字体
4、特殊字体一律用图片
font-size: px/百分数/em;
font-style: normal(常规字体) / italic(斜体)/ oblique(倾斜)
font-weight: normal / bold / bolder(更粗) / lighter(更细)
font-color: #ffffff;
text-decoration: none / underline / overline(上划线) / line-through(删除线贯穿线)
line-height: normal / length;
text-indent: length/px/em;
text-align: left / center / right / justify(两端对齐);
vertical-align: top / bottom / middle(上下居中); 支持table其它标签不建议使用
word-spacing: normal / length; 改变单词间距
letter-spacing: normal / length; 改变字间距
background-color: red / #ffffff;
background-image: none / url("") 0 0 no-repeat;
background-position: x轴px% / y轴px%
background-attachment: scroll(背景图跟着页面滚动) / fixed（页面滚动且背景图不滚动）;
background: color url("") position repeat;
border: 像素值 线条类型 线条颜色；
border-radius: 左上 右上 右下 左下
盒模型
padding：top right bottom left;
margin：top right bottom left;
border:：top right bottom left;
display：inline-block;
标准模式：margin+padding+border+content
怪异模式：内容（padding+border+content）+margin
css布局
float:none / left /right; 浮动会导致文档流塌陷
clear: none / left / right / both;
overflow: hidden(超出隐藏) /visible(显示超出) / auto(在需要时剪切内容并添加滚动条) / acroll(显示滚动条)
visibility(可视): visible(元素可视) / hidden（元素不可视） / inherit(集成父元素可视性)；
position:reative / absolute / static(默认值) / fixed(可定位相对于浏览器窗口的指定坐标) / inherit;
zindex: nomber / auto 设置元素的堆叠顺序，正负值
opacity: number(0~1之间数值)
filter: alpha IE的半透明滤镜fiter:alpha(opacity=50);
a标签的伪类
a:link{}
a:visited{}
a:hover{}
a:active{}
常见兼容问题
margin+float会出现双倍间距-解决：用padding
border-radius IE8以下无效-解决：用背景图圆角；
HTML+CSS小结