Web 前端之HTML和CSS
HTML被称为超文本标记语言(Hyper Text Markup Language),它不是一种编程语言,而是一种标记语言,标记语言是一套标记标签,HTML使用标记标签来描述网页.HTML文档描述网页,包含HTML标签和纯文本,也被称为网页
CSS是指层叠样式表(cascading Style Sheets),样式定义如何显示HTML元素,把样式添加到HTML4.0中,是为了解决内容与表现分离的问题,外部样式表可以极大提高工作效率,外部样式表通常存储在CSS文件中.
以上为官方说法.通俗来说,HTML负责的是显示内容,CSS负责的是样式.他俩在一起就像是我买了房子以后需要装修一样.
HTML中的小细节
HTML的入门简单,基础知识浅显易懂.
首先,HTML中常用字符集有GBK,GB2312和UTF-8.
<meta name=＂keywords＂>用于显示网页的关键字
行级元素inline:不能设置宽和高,它的宽和高是内容撑开的.eg.<a><span>
块级元素 block:可以设置宽和高.默认情况下,它的宽和高由父元素决定.eg.<p><div><h1-h6><table><o><ul>
严格来说,image既不属于行级元素,又不属于块级元素,但通常人们都将他归类为行级元素,属于一个过渡元素.这是后话.
看过了基础的知识,对大部分的标签也混了个眼熟,类似我上面提过的<a></a>,<p></p>,<ul></ul>这些,又或者是<body></body>,<head><head>这种,我们看到这些的时候都会发现他们是有实际含义的.但如果说标签都是有意义的,<div></div>便是一个特例.<div></div>其实就是用来布局,没有任何实际意义,如果非说它的含义,那就是它就是一个块.在我看来,HTML中的格局主要是用<div>来做,以前的HTML布局大部分是用<table></table>来写,先分大table,大table里套小table.很明显这种方式麻烦的多.相比来说,没有什么实际意义的块状<div></div>显然更讨人喜欢.
多年前盛行一种说法叫网页设计三剑客,分别是DreamWeaver,Firework和Flash.DreamWeaver的操作便捷无需大量的代码,firework是类似于Photoshop的图像处理软件,flash一种特性,电脑要是想看视频就必须装它,有一种类似流氓软件的性质.现在开始逐渐退出历史舞台了,苹果默认不支持flash,而且谷歌等主流浏览器也开始逐渐不支持flash.取而代之的是HTML5.所有的视频不需要安装任何播放器或者插件就可以播放.
CSS中的小细节
CSS主要负责样式,个人认为其中最为重要的应属盒模型.CSS知识繁杂,难在对各个属性的理解和web标准化的掌握上,即使你知道某个属性,在用的时候未必就能想到,靠的是熟能生巧和其他知识技术的结合,很多语句都是靠实践刻在脑子里的.而且很多麻烦出现的原因是因为不同浏览器的兼容性.
在w3c标准下的盒模型的宽度和高度指的是内容的宽度和高度,如果加内padding,会变大.
父子关系中,给子元素设置margin-top,父元素也会一起掉下来,解决办法是给父元素设置溢出隐藏,overflow:hidden
兄弟关系中,设置margin时,两个元素的外边距为较大的一个,不叠加.
display:none不显示而非隐藏.不显示不占空间,而隐藏占.
display: block/inline/inline-block 但IE6不支持且中间有间隙
在所有的浏览器中,body都有8个像素外边距
选择器
ID选择器# 后代选择器(空格) 子代选择器> 分组选择器, 类选择器.
伪类选择器 :hover :link visited active 多类选择器(无空格)
权重值
标签选择器1
类选择器10
Id选择器100
内联样式1000
!important无条件提升权重,不建议使用
hover在IE6中只支持给a标签加,但在标准浏览器中可以给其他标签加
css样式可以分离为.css的文件通过<link>标签引用
小技巧
text-align: center;//文字水平居中
line-height = height;//文字垂直居中
CSS中的float属性是用来控制元素的浮动的.
float造成的影响,对于其父元素来说,元素浮动后,它脱离当前正常的文档流,所以他也无法撑开其父元素,造成父元素的塌陷.塌陷问题的解决办法:限定行高,或者overflow:hidden,但IE6不支;对其非浮动的兄弟元素来说,如果兄弟元素为块级元素,在现代浏览器和IE8+下,该元素会忽视浮动元素而占据它的位置,并且元素会处在浮动元素的下层,并且无法通过z-index属性改变他们的层叠位置,但它的内部文字和其他行内元素都会环绕浮动元素.但在ie6,7下则分别有不同的表现,IE67中,该兄弟元素会紧跟在浮动元素的右侧,并且在ie6两者中留有3px的间隙,这就是著名的IE 3px bug;对其浮动的兄弟元素的影响,当一个元素在浮动的过程中碰到同方向的浮动元素时,他会紧跟在后面.反方向时,两元素应在同一水平上互不受影响,但元素过多时遵循先到先得原则.float: none不浮动 clear: left ightoth清除浮动