前端开发基础篇一.docx
- 文档编号:14793292
- 上传时间:2023-06-27
- 格式:DOCX
- 页数:17
- 大小:375.05KB
前端开发基础篇一.docx
《前端开发基础篇一.docx》由会员分享,可在线阅读,更多相关《前端开发基础篇一.docx(17页珍藏版)》请在冰点文库上搜索。
前端开发基础篇一
XHTML+CSS页面布局教程
一、知识篇
1.你必须知道的知识
[知识一]DIV+CSS的叫法是不准确的
在整个教程的最前面必须先给大家纠正一个错误,就是“DIV+CSS”!
“DIV+CSS”这种叫法其实是一种不准确的叫法,是国人给这种布局标准页面的方法起的名字,是对技术理解不够透彻导致的,而标准的叫法是什么呢?
呵呵,没错,是xHTML+CSS!
为什么国人将这种布局标准页面的方法叫做DIV+CSS?
因为第一个将这种技术引进中国的人,对这门技术理解不够透彻,单纯从代码上辨别过去的页面布局方法和现在流行的页面布局方法,认为过去布局页面用的是Table,称之为“Table+CSS”,而现在布局页面呢,用DIV,所以叫DIV+CSS。
听起来也挺合理,岂不知这种叫法误导了绝大部分的网页开发者,认为这样布局出来的页面也就是标准页面,就是符合W3C标准的页面,更甚者走了极端,看到网站上用到Table,就会嘲笑页面做的不够标准,结果用不用Table成为了判定页面是否标准的关键点。
还有另外一种极端,将页面中用到的标签全部换做DIV,那就更是大错特错了。
[知识二]DIV+CSS将你引入误区
“DIV+CSS”叫法将网页制作者引入两大误区
【误区一】网页中用了Table,页面就不标准,甚至觉着用Table丢人,Table成为了判定页面是否标准的关键点。
【误区一】认为网页中的DIV标签用的越多越好,甚至有人将页面中所有的标签都替换为DIV,DIV的多少,决定页面标准的程度。
为了能够避免大家进入误区,必须要了解“Table”和“DIV”这两个网页元素诞生的目的,首先Table诞生的目的是为了存储数据,而DIV诞生的目的就是为了架设页面结构,两者有不同的工作职能,当我们存储数据的时候用Table是最方便快捷的,比如的一个主题页面“浏览器大全”,
地址是:
,
这个时候肯定用Table最合适了,而表格外面组成页面结构的部分当然用DIV了,这是由他们两个诞生的目的决定的,也是符合W3C标准的,那么这个页面就是标准页面。
既然是标准页面,标签各干各的活“各司其职”,Table就用来存储数据,怎么用Table就丢人了呢?
怎么就不标准了呢?
DIV就用来构架页面结构,怎么会用的越多越标准呢?
归根结底就是“DIV+CSS”的叫法导致。
[知识三]什么是W3C?
我们平时说的W3C,其实是WorldWideWebConsortium的缩写,中文是W3C组织或者万维网联盟,W3C这个组织做什么的呢?
很简单,就是出网页标准的。
那么有W3C组织出的标准就被称为W3C标准,那么符合W3C标准的页面就是标准页面了,好,问题来了~
什么是W3C标准?
【注意】下面对W3C标准的解释,需要理解一下,因为在很多Web前端开发工程师面试的时候会遇到这方面的问题,很多企业在面试一些Web前端技术人员的时候,认为如果连什么是W3C都不知道,那做出来的页面肯定就不能够符合W3C标准,所以要求大家留意下!
W3C标准不是一个标准,而是一系列标准的集合,包含三部分的标准:
结构标准、表现标准和动作标准。
与结构标准对应的代表语言是xHTML,与表现标准对应的代表语言是CSS,与动作标准对应的代表语言是JavaScript。
当我们将一个成品的网页设计制作成一个静态页面的时候,就要符合前面两种标准,结构标准和表现标准,那么制作出来的页面就是标准页面,用他们相对应的语言来描述这种制作标准页面的技术我们就称之为“xHTML+CSS”!
【总结】知识一、知识二、知识三是大家必须知道的,知道了这些无论去面试还是和其他人沟通,都会让对方感觉你这个人很专业,对技术理解很透彻!
二、基础篇
2.你必须掌握的基础
本节主要讲解,两个内容:
第一:
CSS如何控制页面样式,有几种样式;
第二:
这些样式出现在同一个页面时的优先级。
使用xHTML+CSS布局页面,其中有个很重要的特点就是结构与表现相分离,结构指xHTML页面代码,表现就是CSS代码了,如果把一个网页看成穿着衣服的人的话,人就是xHTML,是结构,而衣服呢就是CSS,是表现,现在出现的问题是,如何让CSS去控制页面?
或者说,如何让衣服穿在人身上;不同的CSS就可以使页面出现不同的风格适用不同的网站,而不同的衣服,人穿上后就会体现出不同的职业。
[知识一]CSS如何控制页面
第一:
如何让CSS去控制HTML页面?
有4种样式(方式),行内样式、内嵌样式、链接样式、导入样式
1)行内样式
行内样式是4种样式中最直接最简单的一种,直接对HTML标签使用style="",例如:
1. #F00;background: #CCC;font-size: 12px;">
虽然这种方法比较直接,在制作页面的时候需要为很多的标签设置style属性,所以会导致HTML页面不够纯净,文件体积过大,不利于搜索蜘蛛爬行,从而导致后期维护成本高。
2)内嵌样式
内嵌样式就是将CSS代码写在
之间,并且用进行声明,例如:1.
DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""">
2.
3.
4.
5.
打造中国Web前端开发人员最专业的贴心社区!
6.
7.body,div,a,img,p{margin:
0;padding:
0;}
8.a{color:
#FFF;}
9.img{float:
left;}
10.#container{width:
500px;height:
350px;background:
url()no-repeat;position:
relative;margin:
0auto;}
11.#containerp{width:
380px;height:
40px;position:
absolute;left:
60px;bottom:
60px;color:
#fff;font-size:
12px;line-height:
18px;text-align:
center;font-family:
"微软雅黑",Verdana,Geneva,sans-serif;}
12.#reg{display:
block;width:
114px;height:
27px;position:
absolute;left:
191px;bottom:
28px;}
13.
14.
15.
16.
17.
全国的Web前端开发工程师欢聚于
我们的口号是“打造中国Web前端开发人员最专业的贴心社区!
”
18.
19.
20.
21.