HTML+CSS小结 - jessies

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="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小结，转载请注明。