搜索
CSS入门-基础htmlheadtitleweb页面/title/headbodyexample/body/htmljscssHtmlStructurePresentationBehaviorhtmlheadmetahttp-equiv=content-typecontent=text/html;charset=UTF-8titleGoogle/titlestylebody,td,a,p,.h{font-family:arial,sans-serif}.h{font-size:20px}.h{color:#3366cc}.q{color:#00c}.tstd{padding:0}.ts{border-collapse:collapse}.lnc:link,.lnc:visited{color:#00c}.pgtab,.pgtab:hover,.pgtabselected,.pgtabside{text-align:center;text-decoration:none;color:#00c;display:block;height:27px;float:left;overflow:hidden;background:url(/intl/ja/images/productlinktabs.png)no-repeat;padding-top:8px}.pgtab{width:130px;background-position:-274px0}.pgtab:hover{width:130px;background-position:-144px0}.pgtabselected{width:144px}.pgtabside{width:3px;background-position:-404px0}.iconl{overflow:hidden;height:px;width:px;position:relative}#gbar{height:22px;padding-left:2px}.gbh,.gbd{border-top:1pxsolid#c9d7f1;font•元素（element）•标签（tag）•属性（attribute）•块级元素（block-levelbox）•行内元素(inline-levelbox)•div•span•id•class•在xhtml中，html,head和body都是必须的标签。•必须设置html标签的xmlns属性，且其值为•所有元素都必须结束。•所有标签都必须小写。•任何属性值必须用单引号/双引号引起来。•所有属性必须有值。•“&”符号必须编码。&---&!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN==Content-Typecontent=text/html;charset=gb2312/titleourtitle/title/headbodyourcontent/body/html!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Transitional//EN申明将指示使用哪一类的文档定义类型（DocumentTypeDefinition,DTD）。其中xhtml1.0一共有三种可用的doctype。!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Strict//EN=!DOCTYPEhtmlPUBLIC-//W3C//DTDXHTML1.0Frameset//EN==Content-Typecontent=text/html;charset=gb2312/titleourtitle/title/headbodyourcontent/body/htmlhtmlxmlns==Content-Typecontent=text/html;charset=gb2312/titleourtitle/titlelinkrel=shortcuticonhref=“favicon.icotype=image/x-icon/linkrel=stylesheet“href=“index.csstype=text/cssmedia=screen//headbodyourcontent/bodyscripttype=“text/javascript”src=“script.js”/script/htmlheadmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/titleourtitle/title/head---title是head标签中唯一的强制元素。而meta是用来在HTML文档中模拟HTTP协议的响应头报文。headmetahttp-equiv=Content-Typecontent=text/html;charset=gb2312/metahttp-equiv=X-UA-Compatiblecontent=IE=7/metaname=“keywords”content=“关键字”metaname=“description”content=“页面描述”metaname=“author”contect=“网页作者metaname=“robotscontect=all|none|index|noindex|follow|nofollowtitleourtitle/title/headbodyourcontent/body!--注释的内容!--到阿里巴巴首页的链接--ahref=“”titile=“阿里首页”首页/a!--链接结束--tablewidth=“952”cellpadding=“0”cellspaceing=“0”trtdtabletrtd贷款首页/td/td最新活动/td/tr/tabletabletrtdimgsrc=“banner.jpg”alt=“阿里贷款”//td/tr/tabletable//tdtr/tabletabletrtdtabletrtd1/td/trtrtd2/td/tr/table/tdtdtabletrtd/td/tr……/table/td/tr/tabledivulli贷款首页/lili最新活动/liuldivimgsrc=“banner.jpg”alt=“”//divdivdiv1/divdiv2/div/divdl/dl/divTable布局的核心在于设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及空格则通过gif等进行占位来实现，最终的结构是一个复杂的表格，不利于设计和修改。1、结构复杂，冗余多，下载速度慢2、表现样式和结构混杂在一起，维护不方便3、毫无语义，对搜索引擎不友好4、可重用性低5、嵌入javascript等其他效果困难缺点CSS是什么？飞龙在天CSS入门–基础CSS:CascadingStyleSheets.层叠（级联）样式表.是控制网页布局样式的基础，真正做到网页表现与内容分离的一种样式设计语言。精确到像素级控制。（孩童时代画画的例子）1.浏览器支持完善（有兼容性问题）2.表现与结构分离（HTML也有部分默认样式）3.样式控制功能强大（样式也混乱）4.继承性能优越（继承重叠混乱）CSS在当前WEB应用上面确实强大，可应用在HTML、XML，甚至FLEX、SilverLight中。事物的两面性导致需要人去更好的操纵它。CSS是什么•（理想的状态下）看下我们的HTML+CSS孩童时代画画的例子HTMLHTMLCSSCSS历史飞龙在天CSS入门–基础转自维库历史从1990年代初HTML被发明开始样式表就以各种形式出现了，不同的浏览器结合了它们各自的样式语言，读者可以使用这些样式语言来调节网页的显示方式。一开始样式表是给读者用的，最初的HTML版本只含有很少的显示属性，读者来决定网页应该怎样被显示。但随着HTML的成长，为了满足设计师的要求，HTML获得了很多显示功能。随着这些功能的增加外来定义样式的语言越来越没有意义了。1994年哈坤·利提出了CSS的最初建议。伯特·波斯（BertBos）当时正在设计一个叫做Argo的浏览器，他们决定一起合作设计CSS。当时已经有过一些样式表语言的建议了，但CSS是第一个含有“层叠”的主意的。在CSS中，一个文件的样式可以从其它的样式表中继承下来。读者在有些地方可以使用他自己更喜欢的样式，在其他地方则继承，或“层叠”作者的样式。这种层叠的方式使作者和读者都可以灵活地加入自己的设计，混合各人的爱好。哈坤于1994年在芝加哥的一次会议上第一次展示了CSS的建议，1995年他与波斯一起再次展示这个建议。当时W3C刚刚建立，W3C对CSS的发展很感兴趣，它为此组织了一次讨论会。哈坤、波斯和其他一些人（比如微软的托马斯·雷尔登）是这个项目的主要技术负责人。1996年底，CSS已经完成。1996年12月CSS要求的第一版本被出版。1997年初，W3C内组织了专门管CSS的工作组，其负责人是克里斯·里雷。这个工作组开始讨论第一版中没有涉及到的问题，其结果是1998年5月出版的第二版要求。到2004年为止，第三版还未出版。看下CSS到底有多强大•HTML+CSS地图•韩国网站•再看下没有CSS的时候是什么样子的。。。•（号称裸奔，2008年4月9日裸奔节）•具体功能有：–控制布局（几列几列）–控制全局（字体、颜色、链接、边框、背景）–控制个体（br、hr、H1、H2、div、table）–自定义样式（class、id、style、link）–…css控制布局•早期表格布局tablewidth=100%trthheight=50colspan=3scope=colTD/th/trtrtdwidth=100height=200rowspan=2strongTD/strong/tdtdwidth=200height=100strongTD/strong/tdtdstrongTD/strong/td/trtrtdcolspan=2tablewidth=100%trtdhe