HTML+CSS小结 - jessies

标签: html css jessies | 发表时间:2014-11-10 14:54 | 作者: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小结,转载请注明。

相关 [html css jessies] 推荐:

HTML+CSS小结 - jessies

- - 博客园_首页
   结构   HTML        .    样式   CSS      .    行为   JavaScript(交互行为).    .    网页标题.    标题.

解耦 HTML、CSS和JavaScript

- - ITeye资讯频道
当前在互联网上,任何一个稍微复杂的网站或者应用程序都会包含许多HTML、CSS和JavaScript. 随着互联网运用的发展以及我们对它的依赖性日益增加,设定一个关于组织和维护你的前端代码的计划是绝对需要的. 当今的一些大型互联网公司,由于越来越多的人会接触到日益增加的前端代码,它们会试图去坚持代码的模块化.

在线调试并共享HTML,CSS,JS

- Albert - [米随随] s5s5
如题,以后同人讲代码时可以用到. 2004年04月9日 -- MSN中文专业站 (0). 2006年06月5日 -- 读“疲倦的博客们”有感 (9). 2005年07月20日 -- 基于web2.0的网站创意 (33).

[html/css/js]搜索建议提示

- - CSDN博客推荐文章
// 根据id获取dom元素. // 将label绑定到input上作为输入提示. // 获取输入焦点时,隐藏提示标签. // 失去输入焦点时,判断输入框的是否有值,有则显示提示标签. // 窗口加载完dom结构时. .

HTML 5 & CSS 3的新交互特性

- chacoo - 所有文章 - UCD大社区
本文标题的这副图片,是用Phosotshop制作的. 但是,在搜索引擎中你却无法搜索到它,搜索引擎还没有强大到能够识别图片里面的文字. 并且由于图片的体积不算太小,可能网速慢的网友在浏览的时候不得不耐心的等待图片的刷新. 那么,有没有一种新的方法可以避免这些缺点呢. 有的,HTML5和CSS3就可以满足你的需求.

HTML&CSS构建网站链接

- - 技术改变世界 创新驱动中国 - 《程序员》官网
文/Jon Duckett. 链接是网络的主要特色,因为链接允许你从一个网页跳转到另一个网页—实现了人们在网上浏览和冲浪的想法. 一般情况下,你会遇到下面几种链接:. 从一个网站指向另一个网站的链接. 从一个网页指向网站内部另一个网页的链接. 从网页的一个位置指向同一网页内另一个位置的链接. 启动你的电子邮件程序并为其添加收件人的链接.

优秀的 HTML 和 CSS 代码规范

- - SHTION官方网站
HTML 和 CSS 代码规范究竟是怎么样的. 做网站时, HTML 和 CSS 代码有什么要求. HTML 和 CSS 代码的写法是否影响网站的SEO. 写好  HTML 和 CSS 代码需要注意些什么. 一般大型WEB站点开发设计人员,要求使用者具有一定的 HTML、CSS基础知识,对原代码具有较强的控制能力.

6种编写HTML和CSS的最有效的方法

- Ling:™ patient() - 博客园新闻频道
  写HTML5和CSS3,以及JavaScript,前端开发者有了大大的用武之地. 大家都在用很多的工具和技术来武装自己,以加快前段的开发.   本文分享了6中最有效的方法,希望能提供你的效率,为你节约时间. Dynamic CSS(动态 CSS).   如果你想加速你的CSS代码编写,那么你需要学习并掌握动态CSS.

分享45款高质量的免费(X)HTML/CSS模板

- Mikel - 博客园-首页原创精华区
  当你需要在短时间内设计出一个网站的时候,网站模板就非常有用了. 这也就是为什么这些设计模板已成为设计领域的最新趋势的原因. 在这篇文章中,收集了各式各样的网站模板,您可以免费下载使用,希望这些设计模板不仅带给您灵感,也让您回到创作轨迹. Coffee Maker ( 演示 | 下载 ). BusinessTemplate ( 演示 | 下载 ).

翻译:谷歌HTML、CSS和JavaScript风格规范

- - 张鑫旭-鑫空间-鑫生活
本文地址: http://www.zhangxinxu.com/wordpress/?p=2511. 原文地址: http://…style-guides/. 原文作者: Craig Buckler. 注:本文翻译的内容并不是谷歌官方提供的完整HTML/CSS风格规范,而是一种带有总结性质的简单称述.