html4.0 css2.0 基础知识点总结

一、html是超文本标记语言.

1993年6月互联网工程小组工作草案发布超文本标记语言.

1995年-1997年,相继发布html 2.0 3.0 4.0.

1999年,W3C发布基于严格HTML4.01语法,并在2000年推荐XHTML1.0标准.

2001年5月31日发布XHTML 1.1标准.

2008年1月22日,HTML5公布第一份草案.

二、html 整体结构

<!doctype html>

<html>

<head>

</style>

</head>

<body>

</body>

</html>

1.<!doctype html> 头部声明规范.这是html5的头部声明文件,相对于4.0删减了部分内容.

html 4.0 头部声明文件有3种DTD.

<!DOCTYPE htmlPUBLlC “-//W3C//DTD XHTML 1.0 Frameset//EN”"http://www.w3.org/TR/

xhtml1/DTD/xhtml1-transitional.dtd”>

过渡的( Transitional );

严格的( Strict );

框架的( Frameset );

2.<head></head>头元素:头元素的内容不会被浏览器显示出来,用来定义整个文档的信息,标题,引用外部文件等.

<title></title> 标题;

3.<body></body> 主体元素:放置文档的内容,由各种标签组成.

标签分为2部分:块元素与行内元素.

⒈块元素的特点: ①.总是在新的一行开始,也就是说他默认独占一行.不与其它元素共一行.

②.高度、行高、顶和底边距都可以调节的.

③.默认撑开宽度.

常见的块属性标签:<div>、<p>、<h1>、<ul>、<ol>、<li>、<dl>、<dt>、<dd><table>、<tr>、<th>、<td>、<br/>、<from>.

⑴.<div> 一般用于盒模型布局;

⑵.<p> 段落标签;

⑶.<h1>至<h6> 标题标签,h1最大,h6最小,常用的h2-h4,非常有利于搜索引擎的检索;

⑷.<ul> 无序列表,前面显示的是小黑点;和有序列表一样,里面嵌套<li>;

<ul>

</ul>

⑸.<ol> 有序列表,前面显示的是数字1.2.3;

<ol>

</ol>

⑹.<dl> 自定义列表,一般嵌套<dt>、<dd>;

<dl>

</dl>

⑺.<table> 表格,嵌套多个<tr>、<th>、<td>;

<table>

<tr> /*2行3列*/

</tr>

<tr>

</tr>

</table>

<tr>定义表格行,<th>定义表头,<td>定义表格单元;

<td> 属性 colspan 定义表格列,属性 rowspan定义表格行;

⑻.<br/> 换行符;

⑼.<from> 为用户输入创建表单;其中能包括如<input>、<textarea>、<select>等元素;

<from>

</form>

⒉行内元素的特点: ①.可以和其他元素都在一行上.

②.高度、行高、顶和底边距都不能调节的.

③.宽度是它的文字或图片的宽度,不可改变.

常见的行内属性标签:<span>、<var>、<em>、<a>、<img/>、<textarea>、<select>、<option>、<input/>、<strong>.

⑴.<span> 可用来组合文档中的元素;

⑵.<var> 定义变量, 默认为斜体,可在样式中加入样式font-style:normal;

⑶.<em> 定义文本为强调内容, 默认为斜体,可在样式中加入样式font-style:normal;

⑷.<a> 锚文本,重要的标签,大量使用.常用属性是href,指定链接的目标;

⑸.<img/> 定义图像,单标签.

⑹.<textarea> 定义多行的文本输入.

请用户仔细阅读以下全部内容（特别是粗体下划线标注的内容）。如用户不同意本服务条款任意内容，请不要注册或使用网易服务。如用户通过进入注册程序并勾选“我同意网易通行证服务条款”，即表示用户与网易公司已达成协议，自愿接受本服务条款的所有内容。此后，用户不得以未阅读本服务条款内容作任何形式的抗辩。

</textarea>

* readonly 设定文本为只读,不能修改.

⑺.<select> 创建单选或多选菜单; 子标签一般为<option>;定义下拉列表中的一个选项;

</select>

*selected 首次显示,设定选中状态.

⑻.<input> 搜集用户信息,上传至服务器;

<input type=”text”/> 文本域;

<input type=”password”name=”"/>密码域;

<input type=”button”value=”"/>按钮;

<input type=”radio” name=”sex”/>男 *单选框,必须设置相同的值;

<input type=”radio” name=”sex”/>女

<input type=”checkbox” name=”cn”/>中国<br/> *复选框;

<input type=”submit” value=”提交”/> 提交按钮;

<input type=”reset”/> 重置按钮;

⑼.<strong> 定义文本为语气更强的强调内容,有利于搜索引擎优化.

三、CSS层叠样式表

CSS 是层叠样式表,是一种解释型语言.

能够做到结构与表现相分离,它可以同时控制多重页面的样式和布局,更新维护成本降低,极大的提高工作效率.

⒈CSS的引入方式及特点

⑴.外部CSS文件的引入.(外部文件样式)

* 常见的一种引入方式,一般用于二级页面.优先级低于直接写入页面及头部.

优点: ① 易于维护改版, ② 代码简洁美观,便于前后台的协作.

③ 可利用浏览器的缓存机制,只向服务器提交一次请求,整站的载入速度快.

缺点: ① 单页载入慢. ② 需要向服务器提交请求,造成服务器压力.

⑵.在head部分加style引入.(页面内嵌样式)

</style>

* 这种方式情况较少,一般用于访问量大的首页.优先级低于标签内直接写CSS;

优点: ① 单页的载入速度快. ② 减少了向服务器提交请求的压力.

缺点: ① 代码乱不易维护,维护成本高.

⑶.在标签内直接写CSS.(标签内联样式)

* 一般情况下,不选择这种语法.除非遇到特殊情况.优先级最高;

优点: ① 速度最快,直接作用于标签.

缺点: ① 代码繁杂,

标签内联样式>页面内嵌样式>外部文件样式>浏览器默认样式.

⒉CSS选择器及优先级.

选择器的分类

⑴.ID选择器.(百位)

在同一个HTML文档中不能出现两个相同的ID名.

语法: #video { }

⑵.class 类选择器.(十位)

常用的一种选择器,可以给不同的标签设置同一个类,用一条CSS命令可以控制几个标签.

类名的一个字符不能用数字.

语法: .video { }

⑶.标签名选择器.(个位)

以HTML标签作为选择器.设置标签的默认属性,常与后代选择器连用.

语法: p { }; div { }

⑷.后代选择器.

使用多个选择器组合来找到具体要控制的标签,从左至右,依次细化.

语法: div□span { } *中间用空格隔开;

⑸.群组选择器.

把相同CSS样式的不同选择器放在一起,简化语法.

语法: .video,#map,div { } *中间用逗号隔开;

★.选择器的优先级.

不同CSS选择器要遵循的原则:

1. 准确的控制内容的样式.

2. 代码简化,争取最少的代码量.

3. 代码美观,易读.

4. 利用样式优先级实现样式的覆盖.

* id > class > 标签名

多选择器混用时优先级

将选择器分为4个等级,a.b.c.d, 设为a=1000.b=100.c=10.d=1.

a为标签内直接定义.

b为ID选择器定义.

c为class类选择器定义.

d为标签名选择器定义.

如: style=”" 1000

#video #video { } 100+100=200

#video .shop { } 100+10=110

.shop { } 10

p { } 1

3.CSS基本属性.

1.字体设置.

⑴.font-family:设置字体种类.

语法: font-family:”宋体,微软雅黑,Arail,sans-serif;”

* 中文页面以宋体为首选,英文页面Arail、Tahoma等.特殊字体一律用图片.

⑵.font-size:设置字体大小.

语法: font-size:”10px | 百分数 | em ;”

⑶.font-style:设置字体样式,如斜体,倾斜.

语法: font-style:”normal | italic | oblique ;”

* normal:正常, italic:斜体, oblique:倾斜;

⑷.font-weight:设置字体粗细.

语法: font-weight:”normal | blod ;”

*一般情况下,字体设置我们不采用简写模式.

⑸.color:设置颜色.

语法:color:”green| #RGB;”

⑹.text-decoration:设置文本描绘.

语法:text-decoration:”none | underline | overline | line-through;”

* underline:下划线, overline:上划线, line-throught:贯穿线/删除线;

⑺.line-height:设置行高.

语法:line-height:”normal | length;”

* length:长度;

⑻.text-indent:设置首行缩进.

语法:text-indent:”px | em;”

⑻.text-align:设置文本横向布局.

语法:text-align:”left | right | center | justify;”

⑽.vertical-align:设置文本竖向居中.

语法:vertical-align:”top | bottom | middle;”

*它只对table支持较好,其它不建议用.

⑾.word-spacing:设置字间距.

语法:word-spacing:normal | length;”

⑿.letter-spacing:设置字母间距.

语法:word-spacing:normal | length;”

*设置字母之间的间距.

2.背景设置.

⑴.background-color:设置背景颜色.

语法:background-color:”red | #RGB;”

⑵.background-img:设置背景图片.

语法:background-img:”ulr | none;

*背景图片默认平铺,占满整块,超出部分会隐藏.

背景图片相对于img图片在于,背景图片不能下载,不能被搜索引擎搜索,但背景图合并,在div中,不撑开高度.

⑶.background-position:设置背景位置.

语法:background-position:”X轴坐标 Y轴坐标 | left| right | center | top..;”

⑷.background-repeat:设置背景重复.

语法:background-repeat:”repeat | no-repeat | repeat-x | repeat-y;”

⑸.background-attachment:设置背景图片是否随页面滚动.

语法: background-attachment:”scroll | fixed;”

* scroll:背景图片随着页面滚动, fixed:背景图片不会随着页面滚动;

background 简写方式:

background:color url() positon repeat;

按照color;image;position;repeat代码规范顺序写.

3.尺寸.

width:设置元素的宽度.

语法: width:” auto | length | percentage;”

* percentage 百分比的宽度.

height:设置元素的高度.

语法: width:”auto | length | percentage;”

4.背景图合并技术.

利用背景图合并技术可以减少向服务器端的请求,节省时间和带宽,对网站加速有着举足轻重的地位.

实现两边圆角,中间无限延伸.通过子标签背景覆盖父标签,三层嵌套,截取图片的中间部分以及左右两边,算好图片的位置,然后利用position定位.

四、盒模型.

元素框最内的部分是实际的内容,直接包围元素的是内边距padding.内边距呈现了元素的背景.内边距的边缘是边框border.边框外边是外边距margin,外边距默认是透明的,因此不会遮挡其后的任何元素.(边框内的空白是内边距,边框外的空白是外边距.)

1.margin 外边距.

语法:margin-top|right|bottom|left:length(数字或百分比);

可以缩写为 margin:5px 10px 15px 20px;顺序为上右下左.

* 一般情况下margin用于兄弟标签,父子标签用padding;

2.padding 内边距.

语法:padding-top|right|bottom|left:length(数字或百分比);

* padding不能用负值,在行内标签padding-top和padding-bottom是不会改变标签的高度.各大浏览器对padding支持比较好,尽量避开margin的使用.

3.border 边框.

⑴.border-style:设置边框样式.

语法:border-top|right|bottom|left:length;

border-style:”solid | dotted | dashed |none;”

*solid 实线,dotted 点划线,dashed 虚线;

⑵.border-color:设置边框颜色.

语法:border-color:red | #RGB;

*border:1px red solid; 一般做调试错误用.

五.CSS布局.

常用的布局有2种,一种是div+css布局,一种是table布局.

div+css优点:1.内容和表现相分离;

2.提高搜索引擎对网页的索引效率;

3.提高页面浏览速度;

4.易于维护和改版;

页面布局时主要采用:浮动 float和定位position;

1.浮动:float

语法: float:left| right;

任何元素都可以被浮动,任何元素浮动完后都变为块元素,可以设置宽高等.

浮动是把元素从文档流中脱离出来.

⑴.float对行内属性标签的影响

行内标签默认是不能设置宽高的,靠内容撑开宽度.在float之后,可以给其设宽高.

⑵.float对块属性标签的影响

默认占满行的块属性标签在没有宽高的情况下设置浮动后会内容撑开宽度.

①.清除浮动:clear

语法: clear:left|right|both;

* 一定要在浮动标签完成布局后进行清除浮动,否则会影响浮动标签的布局.

必须与前面的浮动标签属于同级关系.

★.清除浮动的几种方法.

⑴.空标签清浮动.

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

.clear {clear:both;height:0;overflow:hidden;}

clear:both;用来清除浮动.

IE6下会默认行高撑开宽度,用height:0;overflow:hidden;来解决.

⑵.overflow:hidden清浮动.

在需清浮动的父标签中加入overflow:hidden;需注意的是,使用overflow

一定要定义width.

⑶.after伪对象清浮动.

.aa:after { content:”"; clear:both;height:0;overflow:hidden;}

.aa{ display:inline-block;}

.aa{ display:block;}

* 命令顺序不能更改.利用display:inline-block;属性触发块元素,然后定义 display:block;用后一条命令覆盖前一条.

.aa{ display:inline-block;} 触发IE的lengout;

width/height/Zoom:1; 用于IE6/7

⑷.子标签浮动后,父标签也会有影响.

子标签浮动后,给父标签也进行浮动,如果父子标签均浮动那么就不用给子标签清除浮动.

⑸.后一个标签清浮动.

兄弟标签浮动时,在后一个标签属性中直接加入clear:both;这样就可以直接清除以上标签的浮动.

②. display 设定元素应生成的框的类型.

语法: display:block | inline;

block:以块属性显示, inline:以行内属性显示;

通过设定该属性值,可以实现行内元素与块属元素之间的转换.

2.定位position.

所有的元素都可以用position进行定位,定位后的对象将具有块属性.

语法: position:relative|absolutr;

relative 相对定位,absolute 绝对定位.

在position中,relative和absolute可以配合使用.如果对父标签设置了relative, 那么子标签absolute会以父标签左上角作为起始位置进行定位.如果父标签没有设置 relative,那子标签absolute会以body左上角作为起始位置进行定位.

在定位后面会加:left|right|top|bottom|或具体数值用来调节位置.

Z:index 设置元素堆叠顺序.

值越高,显示的层数就越上.

当值为负数时,直接隐藏至relative定位这层的下面.

①. Opacity 设置元素的不透明度.

Opacity:0.8; /* 非IE浏览器设置方式*/

filter:alpha(opacity=80); /*IE浏览器设置方式*/

六.a标签的4个伪类.

a:link { } 未被访问状态;

a:visited { } 已被访问状态;

a:hover { } 鼠标悬停状态;

a:active { } 激活,按下鼠标未松开状态;

为什么要按这种顺序排列??

因为他们都属于同一优先级,在同一优先级发生冲突的情况下,浏览器是显示后一个属性设置. 首先,鼠标悬停hover是不管什么情况都必须拥有变化的,如有下划线,变颜色等.所以把 hover放在后面,防止别的状态将它覆盖掉.然后,当要求active激活时,无论是否访问过,都必须有这个效果,所以它要覆盖访问或未被访问状态.并且当准备激活时会有鼠标悬停,active必须放在hover后面.已被访问过的状态一般与未访问状态的样式不一样,为了区别是否访问过,将visited放在link后面.

结论是a的伪类的排列顺序是: ① a:link { };

② a:visited { };

③ a:hover { };

④ a:active { };

七.常见的浏览器兼容问题.

1.IE6 margin双倍BUG.

当对象设定float,width.同时设置了横向margin.在IE6中会出现双倍边距.

解决的办法是:在标签中加入display:inline属性.

2.不同浏览器的标签默认内外边距是不同的.

在css样式通过群组选择器中加入标签名{margin:0;padding:0;},设置初始值.

3.IE 6默认行高.

在IE6下元素有11px左右的默认行高,当高度小于默认行高的时候,会内容撑开宽度.

解决的办法是:加入overflow:hidden.

4.最小高度.

因在IE6下元素有11px左右的默认行高,默认不需要设最小高度;其它浏览器,无默认行高, 当需要设最小高度时,可以加入 min_height:xxpx;来实现.

5.img 有空隙产生.

解决办法是:让图片浮动.

6.a标签嵌套img时,会出现不同颜色的边框.

对a下的img加上border:none;

7.高度自适应.

父标签div没有给出高度,希望随着子标签div高度变化而自动适应.

解决方法:1.子标签最后利用空标签清浮动.

2.给父标签加一个overflow:hidden;清除内部浮动.

8.任何标签都要放内容,即使是利用空标签清浮动时,可在里面加个 空格符.

八.hack技术.

hack 是针对不同的浏览器而特有的代码,属于解释型语言.

在不同浏览器的写法:

IE 6: 属性前加 ”_” _height:100px;

IE 6/7: 属性前加 ”*” *height:100px;

IE 7: 属性后加 ”!important” height:200px !important;

IE 8: 属性后加 ”\9″ height:200px \9;

* 在放置顺序的时候,一般把通用的放在前面,专用的放在后面.

本文链接地址: html4.0 css2.0 基础知识点总结http://www.hongyanliren.com/2014m07/12702.html

红颜丽人

追求技术就像追求#$！不抛弃，不放弃！

html4.0 css2.0 基础知识点总结

相关文章