注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

梦幻雪冰

技在手,能在身,思在脑,从容过生活——陈能堡

 
 
 

日志

 
 

HTML和CSS基础知识的总结  

2014-03-12 21:18:07|  分类: 复习专题 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
  1. 什么是W3C?

    是web技术领域最具权威和影响力的国际中立性技术标准机构。

  2. 网站的基本组成是什么?

    HTML(结构)+css(样式)+JavaScript(行为)+数据

  3. html基本的结构

        <!doctype>文档的声明(没有写文档声明的什么就会出现IE怪异解析模式)

  <html><head><title><body>

<meata>该元素可以提供该页面的元信息,比如关键字和描述,对于description对seo还是有用的author等结构 数据爬虫未必会进入抓取,keyword这个已经不再使用了。

     在开始编码的时候,声明我们该页面的编码格式,这个编码的格式是写在标题前面还是写标题后面呢?在IE6你如 果             <meta charset='utf-8'>写在标题的后面,标题的内容就会为空,所以最好的格式是写在title的前面。

    因为我们每个浏览器的标签的默认样式都是不同的,所以首先我们要引入reset.css文件,对于我们页面所涉及到的标             签的默认样式进行清除。

       欢饮学习交流---梦幻雪冰

  1. html和css标签的了解(标签分为行标签和块标签)

    行标签的特点:可以在同一行显示,高度和行高、底边距和顶边距都是不可改变,内容撑开宽度

    块标签的特点:独占一行, 高度和行高、底边距和顶边距都是可以改变,宽度都是容器的100%;

    HTML标签嵌套规则  :

<ins><del>(行内元素)可以包含块元素

dl元素只允许包含dt和dd,同时dt不能包含块元素,对于dd元素可以包含任何元素

<p><h1><dt>是块元素 但是不能包含块元素

<table>子代只能是<thead><tbody><tfoot><caption>


布局结构:

         div                                                                                        table

加载速度,div是边加载边显示网页内容             table必须等整个表格加载完了才能显示网页内容

维护成本低,只要修改css文件即可                    维护成本高

嵌套层数少,有利于seo                                   表格的嵌套层数多,不利于seo

css+div可以使整个网站达到统一性的效果         视觉统一性差

 

标题标签h1~h6 常用的是h1~h3,有利于seo的优化

form的legend的标题(对于seo不是很重要)

table的caption的标题(对于seo不是很重要)

 

strong、em是否使用对seo没有太大的差异

ol有序列表和ul无序列表、dl自定义列表

欢饮学习交流---梦幻雪冰

在IE6中li会出现bug

触发条件:IE6中列表的常见问题出现在当某个 li 中的内容是一个 display: block 的锚点(anchor)时。在这种情况下,列表元素之间的空格将不会被忽略而且通常会显示成额外的一行夹在每个 li 之间。一种避免这种竖直方向多余空白的解决方法是赋予这些锚点 layout。

解决办法:li a样式中加入width:100%;或者在a里面的样式加入zoom:1;或者在li里面的计入display:inline;最后一种就是li写成一行(但是这个是不推荐的

 

对于这种图文混排的版式,我们可以采用dl标签来布局(dt元素只能包含行元素)

 

span标签 这个标签也可以用来布局,但是我遇到都是用来包含文本信息或者来写按钮

 

a标签 这个是伪类标签,有四个样式

:link选择器样式 链接样式

:visited选择器样式 已访问样式

:hover选择器样式 鼠标浮动在上面的样式

:active选择器样式 激活的样式

这四个选择器的书写顺序不能颠倒了,因为这四个选择器的权重都是相同,后面的会覆盖前面的效果。

在a标签里面要书写title的属性,有利于seo的优化

 

img标签 在书写时要写title和alt,一方面有利于seo,另外一方面是有利于用户体验。alt属性就是在图片未加载完成的时候,能显示该图片的一些文字信息。同时在该标签里面要写width和height,因为在网页加载的时候,当css文件没有加载完成时候,但是图片加载完成了,你没有写width和height的话,图片大小就不受控制,所以我们在img最好写width和height;

 

img在IE6下的bug(目前对于我所了解的)

img外部的border

触发条件:当img有连接的时候

解决办法:border:0

 

在每一个img后面敲了回车

触发条件:img有间距

解决办法:float浮动清除间距

如何计算颜色?

(红)黄(绿)青(蓝)紫

想到了img就说一下图片格式的比较                                                                                                                           


  png    gif         jpg
透明效果  支持半透明  全透明   不支持透明
质量   好          差    一般
兼容性  png-24在IE6存在兼容问题    无 无
动画  不支持 支持 不支持
   

form标签 有method和action属性 表单域filedset

 

input标签 type属性,size属性等

 

select标签(要写name,id等属性) option标签(要写value属性和nanme属性等)

 

optgroup对下拉框进行分组

 

用label标签 的for属性规定与哪一个元素绑定(for='这是id名')

 

talbe标签 由thead(可以省略)、tbody、tfoot(可以省略)、tr、th(表头信息,文本加粗居中)、td(普通文本左对齐)、caption、colgroup

cellpadding 属性是内容与单元格到边框的间距

cellspacing 属性是单元格之间的间距

如果需要横跨多个列或者多个行使用colspan和rowspan

 

了解完了html标签我们就能编写没有css样式的网页了,来解释html标签当然是浏览器了。

浏览器名                                 浏览器内核                                 浏览器内核前缀

谷歌浏览器、苹果浏览器              webkit、(blink最新版)                -webkit-

IE浏览器                                     trident                                            -ms-

欧朋浏览器                                 presto (最新版为webkit内核)             -o-

火狐浏览器                                 gecko                                             -moz-

…………………………………………………………………………CSS…………………………………………………………………………………….

css引入方式有三种引入方式:标签内联、页面内嵌样式、外部引入(link和@important(不推荐使用)

这三种的引入方式的优先级:标签内联样式>页面内嵌样式>外部文件样式>浏览器默认样式

外部文件样式:

优点:

  1. 有利于维护;
  2. 代码简洁美观,便于前后台的协作;
  3. 只向服务器提交一次请求,整站载入速度快;

缺点:

  1. 单页载入慢
  2. 需要向服务器提交请求,造成服务器压力大

页面内嵌样式:

优点:

  1. 载入速度快
  2. 减少了向服务器提交请求的压力

缺点

  1. 不利于维护

标签内联样式:

优点:

  1. 速度最快,直接作用于标签

缺点:

  1. 代码繁杂

id选择器> class选择器 >标签选择器(class选择器无论权重加起来比id选择器大,ID选择器仍然优先级大)

 

  background缩写方式:color |image |position |attachment |repeat

 

 font缩写方式:style| weight| size| family

 

 vertical-align:'top | bottom |middle'它只对table支持的较好

 text-align:'right|left|center|justify'

对于元素垂直居中有很多办法,但是用display:table-cell 水平方向text-align:center 垂直方向:vertical-align:middle,这种方法不管你多宽多大都是通用的。

 

margin-top| right | bottom | left(顺时针方向)外边距

padding- top| right | bottom | left(顺时针方向)内边距

border- top| right | bottom | left(顺时针方向)边框

border-style:solid | dotted | dashed | none边框样式

border-color边框颜色(切记不要把border缩写成 border:5px 7px 5px 6px)

 

下面这个图,就是利用margin负值来实现的

源代码下载http://yunpan.cn/Q4pJuhvVht5Fd

源代码下载http://yunpan.cn/Q4pJqSAWQJc7j

float:left | right

浮动对行内元素的影响

行内标签默认是不能设置宽高,都是内容撑开宽高

浮动对块元素的影响

块元素默认都是占满一行,在没有设置宽度的情况下浮动,内容撑开宽高

 

清除浮动

clear:both | left | right

这个图主要考察你的浮动布局和IE6的经典3像素bug

clear:left; 禁止左侧出现浮动元素,如果左侧存在浮动元素,则当前元素将在浮动元素下面另起一行呈现.

clear:right; 禁止右侧出现浮动元素,如果右侧存在浮动元素,则右侧的浮动元素将在当前元素下面另起一行呈现.

clear:both; 禁止左右两侧出现浮动元素,当前元素将排斥浮动元素独占一行呈现.

上面提到的行也可能是多行组成的一个块,不仅仅是一个文本行的概念.

  1. 空标签清除浮动

加入一个空标签,可以是任何标签,但是空标签会增多多余的代码

<div class='chennengbao'></div>

.Chennengbao {

Clear: both;

Height: 0;

Overflow: hidden;

}

优点:容易掌握

缺点:增加大量无语义空标签,结构和样式分离,不利于维护。

其中clear是来清除浮动的,IE6会默认行高撑开高度,用height和overflow来解决

  1. Overflow:hidden来清除浮动

    在浮动的父标签里面加入overflow:hidden;

    优点:结构和样式分离,代码量少

    缺点:超出内容隐藏,无法显示需要溢出的元素内容

  2. after元素清浮动

    .clearfix: after{

        content:"\200B";/*0宽度空格--unicode字符*/

        display:block;

        height:0;

        clear:both;

    }

    .clearfix{

        *zoom: 1;/*触发IE的haslayout*/

    }

  3. overflow:auto(了解)

缺点:多层嵌套之后,火狐浏览器在某些情况下会造成内容全选,IE的mouseover造成块宽度改变时,会使最外 层模块出现滚动条

  1. 让父元素发生浮动

缺点:会使父元素相邻元素的布局受到影响,不可能一直浮动到body;

  1. br标签清浮动
  2. 父元素设置display:table

     

display:block | none(该元素隐藏不显示) | inline | table |inline-block(允许空格,在同一行,可以设置宽高)

 

display:none(没有占物理空间) visibility:hidden元素隐藏(有占物理空间)

 

position:absolute relative static(默认值) fixed(可定位相对于浏览器窗口的指定坐标) inherit

语法:right bottom top left:length |auto

position:relative 对于元素的显示效果没有影响

position:absolute 会对元素的显示效果造成影响。元素默认内容撑开宽高,但是可以设置宽高。

相对-绝对关系

如果父级设置了position,参照(最近的)父级的内容区域的左上角为初始点,结合top left right bottom 进行定 位; 如果没有设置,往其父级继续寻找,直到找到为止,如果一直没有,则相对与body进行定位

hack技术

_属性:属性值 ; IE6

+属性:属性值; IE7

*属性:属性值; IE6-IE7

属性:属性值\9; IE6、IE7、IE8、IE9、IE10

属性:属性值\0;IE8、IE9、IE10

缺点:可读性差,可扩展性差,无形中增加代码的大小

优点:解决一些非常棘手的问题

透明度

rgba(255,255,255,0.4) 最后一个代表透明度(范围0~1)

opacity(不透明度)属性定义元素的不透明度 值为1元素是完全不透明,值为0是完全透明的看不见的。

filter的取值是100~0 因为IE不支持opacity,只支持自己的滤镜filter:alpha(opacity=50)

       欢饮学习交流---梦幻雪冰

 

 

 

 

 

 

 

 

 

 


  评论这张
 
阅读(210)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017