XHTML+CSS
2014-04-05 20:59
183 查看
1，Table布局页面和DIV布局页面的优缺点* 把格式数据混入你的内容中。这使得文件的大小无谓地变大，而用户访问每个页面时都必须下载一次这样的格式信息,带宽并非免费。* 这使得重新设计现有的站点和内容极为消耗劳力 (且昂贵)。* 这还使我们保持整个站点的视觉的一致性极难，花费也极高。* 基于表格的页面还大大降低了它对残疾人和用手机或 PDA 浏览者的亲和力。 而使用CSS进行网页布局，它会：* 使你的页面载入得更快* 降低你的流量费用* 让你在修改设计时更有效率而代价更低* 帮助你的整个站点保持视觉的一致性* 让你的站点可以更好地被搜索引擎找到* 使你的站点对浏览者和浏览器更具亲和力* 在世界上越来越多人采用 Web 标准时，它还能提高你的职场竞争实力 (事实上也就是降低失业的风险)。对CSS布局页面的三点优势及理解：1、内容和形式分离，网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。2、改版网站更简单容易了，不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。对于门户网站来说改版就像换件衣服一样简单容易。3、搜索引擎更友好，排名更容易靠前。第一点、内容和形式分离网页前台只需要显示内容就行，形式上的美工交给CSS来处理。生成的HTML文件代码精简，更小打开更快。这个是DIV+CSS技术最显著的特点，也是CSS存在的根源。完全的颠覆现在传统（table）网页设计的技术。所有现在用table制作的内容，都可以用CSS来解决掉，而且解决的更完美，更强大。不需要大家再表格套表格，让生成的网页文件大小更精简，更小。table时代，一个页面表格达到10个以上是非常普遍的事情，但是现在用DIV+CSS，一个table都可以不用，就完全达到之前的效果，这就直接导致网页文件大小比使用table时减少50%-80%，更节约各位站长的硬盘空间，访问者打开网页时更快，而且用div+CSS时，不像以往使用table时，必须把全部table读取完了才显示页面内容，现在是可以读一个div就显示一个效果，大家打开网页不用等。好处真是明显而强大。这个优点的确是显著的，凡是使用传统table建的网页，内容多的话，有时候达到30K左右都有可能，文件打了打开时，肯定就有0.0几秒的延迟。使用DIV+CSS，你前台打开看到的全是直接内容，CSS文件都是导入链接的，是另一个文件，根本和HTML文件大小没关系，这种生成的HTML文件，一个也就10K左右大小。第二点，改版网站更简单容易了
不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。DIV+CSS对于门户网站来说改版就像换件衣服一样简单容易，改版时，不用改动全站HTML页面，只需要重新写CSS，再用新CSS覆盖以前的CSS就可以实现改版了。方便吧。第三点，搜索引擎更友好，确实能够对SEO起到一定的帮助。
通过DIV+CSS对网页的布局，可以让一些重要的链接、文字信息，优先让搜索引擎蜘蛛爬取。这对于SEO也有帮助。综上所述，个人感觉DIV+CSS不能太迷信它的很好很强大，它作为制作网页，美化网页的一个重要辅助是很强大方便的。可以弥补table制作框架和表格时的很多不足和美工上的缺点，但是完全只用它来做，太费时费力，对于全国中小型网站长来说，真的不太适合。我个人觉得用table+DIV+CSS是最好的组合，也是最省时省力的办法。
DIV、Table、CSS用得恰到好处，各司其职，DIV布局页面，Table存储数据，CSS给页面穿衣服！2，xHTML+CSS网页制作和搜索引擎优化SEO的关系1)将页面中最重要的内容用h1标签括起来，h1的内容就和页面title很自然的包含了站点或者页面的核心关键词，搜索引擎很重视h1标签的内容哟2)合理的运用h2、h3等标题标签，他们对于页面来说就是文章不同的等级或者不同的功能区域的标志性元素3)页面meta信息不可忽视，一定要包含页面核心的内容4)为了便于搜索引擎更方便的抓取，要尽可能的保证HTML页面代码纯净，强调一下，既然是xHTML+CSS布局页面，所以CSS代码要单独写在一个文件内，保证CSS部分和HTML部分彻底分离；html页面中使用id和class，尽可能的避免style="";尽量使用标准的CSS命名规范，从这里就可以看出你这个页面重构师是否专业哟；尽量使用CSS的缩写以节省代码，例如padding:10px 20px 10px 20px;缩写为padding:10px20px;最好不要在HTML页面用font、center这种标签。5)在HTML页面中strong标签是可以使用的，可以进一步强化关键词和相应的文字信息。6)页面中的javascript代码会对搜索引擎分析页面内容产生干扰，可以将javascript代码封装在一个.js文件中外部调用。7)<img />尽可能的加入alt注释，因为百度和google都有搜索图片的功能，如果加了alt，就更方便搜索蜘蛛的爬行，搜索相应关键词，就可能出现你网站上的图片，点击图片不就进入你的网站了嘛，就又多了点流量吧。
3,[b]CSS控制页面样式的4种方式和优先级问题[/b]1）行内方式直接对HTML标签适用style=""，例如： <p style="color:#F00; background:#CCC;font-size:12px;"></p> 虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，从而导致后期维护成本高。2）内嵌方式内嵌方式就是将CSS代码写在<head></head>之间，并且用<style></style>进行声明，内嵌方式，大家应该也能意识到，即使有公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护也大，如果文件很少，CSS代码也不多，这种方式还是很不错的。3）链接方式链接方式是使用频率最高，最实用的方式，只需要在<head></head>之间加上<link href="style.css"type="text/css" rel="stylesheet" /> ，就可以了，这种方式将HTML文件和CSS文件彻底分成两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，并且如果要保持页面风格统一，只需要把这些公共的CSS文件单独保存成一个文件，其他的页面就可以分别调用自身的CSS文件，如果需要改变网站风格，只需要修改公共CSS文件就OK了，相当的方便，这才是我们xHTML+CSS制作页面提倡的方式。4)导入方式 导入样式和链接样式比较相似，采用import方式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌方式。具体导入样式和链接样式有什么区别，可以参看这篇文章《CSS:@import与link的具体区别》，不过我还是建议大家用链接方式！
四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式。4，CSS选择器CSS选择器共有三种：标签选择器、ID选择器、类选择器。【标签选择器】一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。比如，在style.css文件中对p标签样式的声明如下：p{font-size:12px;background:#900;color:090;} 【ID选择器】ID选择器在某一个HTML页面中只能使用一次不可能重复！相信大家也能看出来，ID选择器更具有针对性，如：先给某个HTML页面中的某个p标签起个ID，代码如下： <p id="one">此处为p标签内的文字</p> 在CSS中定义ID为one的p标签的属性，就需要用到#，代码如下：#one{font-size:12px;background:#900;color:090;} 【类选择器】这种选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同的样式。<p>此处为p标签内的文字</p> 如果我还想让div标签也有相同的样式，怎么办呢？加上同样的class就可以了，如下<div>此处为p标签内的文字</div> 这样页面中凡是加上class="one"的标签，样式都是一样的喽!CSS定义的时候和ID选择器差不多，只不过把#换成.，如下 .one{font-size:12px;background:#900;color:090;} 补充:一个标签可以有多个类选择器的值，不同的值用空格分开，如： <div class="one yellow leftStyle">此处为p标签内的文字</div> 这样我们可以将多个样式用到同一个标签中，当然也可以，ID和class一块用<div id="div1" class="one yellowleftStyle">此处为p标签内的文字</div> 【通用选择器】*{此处为CSS代码} 对于通用选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种浏览器，所以要对HTML内的所有的标签进行重置，会将下面的代码加到CSS文件的最顶端 *{margin:0; padding:0;} 为什么要这么用呢，因为每种浏览器都自带有CSS文件，如果一个页面在浏览器加载页面后，发现没有CSS文件，那么浏览器就会自动调用它本身自带的CSS文件，但是不同的浏览器自带的CSS文件又都不一样，对不同标签定义的样式不一样，如果我们想让做出的页面能够在不同的浏览器显示出来的效果都是一样的，那么我们就需要对对HTML标签重置，就是上面的代码了，但是这样也有不好的地方，因为HTML4.01中有89个标签，所以相当于在页面加载CSS的时候，先对这89个标签都加上了{margin:0; padding:0;}，在这里我不建议大家这么做，因为89个标签中需要重置的标签是很少数，没有必要将所有的标签都重置，需要哪些标签重置就让哪些标签重置就可以了，如下 body,div,p,a,ul,li{margin:0; padding:0;} 【选择器的集体声明】在我们使用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“,”分开，比如： 【选择器的嵌套】选择器也是可以嵌套的，如： #div1 p a{color:#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/ 这样的好处就是不需要在单独的为ID为div1的标签内的p标签内的a标签单独定义class选择器或者ID选择器5,盒子模型
细节说明：1，html元素都可以看成一个盒子 2，盒子模型的参照物不一样，则使用的CSS属性不一样，比如从div1的角度看，是margin-right,从div2看，则是margin-left. 3,如果你不希望破坏外观，则尽量使用margin布局，因为padding可能会改变盒子的大小，margin如果过大，盒子内容被挤到盒子外边去，但是盒子本身没有变化。
6，块状元素和内联元素
块状元素一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。内联元素内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。
块元素(block element)
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是CSS layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
内联元素(inline element)
a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量 7，CSS定位
不用重新设计排版网页，甚至于不用动原网站的任何HTML和程序页面，只需要改动CSS文件就完成了所有改版。DIV+CSS对于门户网站来说改版就像换件衣服一样简单容易，改版时，不用改动全站HTML页面，只需要重新写CSS，再用新CSS覆盖以前的CSS就可以实现改版了。方便吧。第三点，搜索引擎更友好，确实能够对SEO起到一定的帮助。
通过DIV+CSS对网页的布局，可以让一些重要的链接、文字信息，优先让搜索引擎蜘蛛爬取。这对于SEO也有帮助。综上所述，个人感觉DIV+CSS不能太迷信它的很好很强大，它作为制作网页，美化网页的一个重要辅助是很强大方便的。可以弥补table制作框架和表格时的很多不足和美工上的缺点，但是完全只用它来做，太费时费力，对于全国中小型网站长来说，真的不太适合。我个人觉得用table+DIV+CSS是最好的组合，也是最省时省力的办法。
DIV、Table、CSS用得恰到好处，各司其职，DIV布局页面，Table存储数据，CSS给页面穿衣服！2，xHTML+CSS网页制作和搜索引擎优化SEO的关系1)将页面中最重要的内容用h1标签括起来，h1的内容就和页面title很自然的包含了站点或者页面的核心关键词，搜索引擎很重视h1标签的内容哟2)合理的运用h2、h3等标题标签，他们对于页面来说就是文章不同的等级或者不同的功能区域的标志性元素3)页面meta信息不可忽视，一定要包含页面核心的内容4)为了便于搜索引擎更方便的抓取，要尽可能的保证HTML页面代码纯净，强调一下，既然是xHTML+CSS布局页面，所以CSS代码要单独写在一个文件内，保证CSS部分和HTML部分彻底分离；html页面中使用id和class，尽可能的避免style="";尽量使用标准的CSS命名规范，从这里就可以看出你这个页面重构师是否专业哟；尽量使用CSS的缩写以节省代码，例如padding:10px 20px 10px 20px;缩写为padding:10px20px;最好不要在HTML页面用font、center这种标签。5)在HTML页面中strong标签是可以使用的，可以进一步强化关键词和相应的文字信息。6)页面中的javascript代码会对搜索引擎分析页面内容产生干扰，可以将javascript代码封装在一个.js文件中外部调用。7)<img />尽可能的加入alt注释，因为百度和google都有搜索图片的功能，如果加了alt，就更方便搜索蜘蛛的爬行，搜索相应关键词，就可能出现你网站上的图片，点击图片不就进入你的网站了嘛，就又多了点流量吧。
3,[b]CSS控制页面样式的4种方式和优先级问题[/b]1）行内方式直接对HTML标签适用style=""，例如： <p style="color:#F00; background:#CCC;font-size:12px;"></p> 虽然这种方法比较直接，在制作页面的时候需要为很多的标签设置style属性，所以会导致HTML页面不够纯净，文件体积过大，不利于搜索蜘蛛爬行，从而导致后期维护成本高。2）内嵌方式内嵌方式就是将CSS代码写在<head></head>之间，并且用<style></style>进行声明，内嵌方式，大家应该也能意识到，即使有公共CSS代码，也是每个页面都要定义的，如果一个网站有很多页面，每个文件都会变大，后期维护也大，如果文件很少，CSS代码也不多，这种方式还是很不错的。3）链接方式链接方式是使用频率最高，最实用的方式，只需要在<head></head>之间加上<link href="style.css"type="text/css" rel="stylesheet" /> ，就可以了，这种方式将HTML文件和CSS文件彻底分成两个或者多个文件，实现了页面框架HTML代码与美工CSS代码的完全分离，使得前期制作和后期维护都十分方便，并且如果要保持页面风格统一，只需要把这些公共的CSS文件单独保存成一个文件，其他的页面就可以分别调用自身的CSS文件，如果需要改变网站风格，只需要修改公共CSS文件就OK了，相当的方便，这才是我们xHTML+CSS制作页面提倡的方式。4)导入方式 导入样式和链接样式比较相似，采用import方式导入CSS样式表，在HTML初始化时，会被导入到HTML文件中，成为文件的一部分，类似第二种内嵌方式。具体导入样式和链接样式有什么区别，可以参看这篇文章《CSS:@import与link的具体区别》，不过我还是建议大家用链接方式！
四种样式的优先级别是(从高至低)：行内样式、内嵌样式、链接样式、导入样式。4，CSS选择器CSS选择器共有三种：标签选择器、ID选择器、类选择器。【标签选择器】一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签采用相应的CSS样式。比如，在style.css文件中对p标签样式的声明如下：p{font-size:12px;background:#900;color:090;} 【ID选择器】ID选择器在某一个HTML页面中只能使用一次不可能重复！相信大家也能看出来，ID选择器更具有针对性，如：先给某个HTML页面中的某个p标签起个ID，代码如下： <p id="one">此处为p标签内的文字</p> 在CSS中定义ID为one的p标签的属性，就需要用到#，代码如下：#one{font-size:12px;background:#900;color:090;} 【类选择器】这种选择器更容易理解了，就是使页面中的某些标签(可以是不同的标签)具有相同的样式。<p>此处为p标签内的文字</p> 如果我还想让div标签也有相同的样式，怎么办呢？加上同样的class就可以了，如下<div>此处为p标签内的文字</div> 这样页面中凡是加上class="one"的标签，样式都是一样的喽!CSS定义的时候和ID选择器差不多，只不过把#换成.，如下 .one{font-size:12px;background:#900;color:090;} 补充:一个标签可以有多个类选择器的值，不同的值用空格分开，如： <div class="one yellow leftStyle">此处为p标签内的文字</div> 这样我们可以将多个样式用到同一个标签中，当然也可以，ID和class一块用<div id="div1" class="one yellowleftStyle">此处为p标签内的文字</div> 【通用选择器】*{此处为CSS代码} 对于通用选择器还有一个不得不提的用法，就是为了保证作出的页面能够兼容多种浏览器，所以要对HTML内的所有的标签进行重置，会将下面的代码加到CSS文件的最顶端 *{margin:0; padding:0;} 为什么要这么用呢，因为每种浏览器都自带有CSS文件，如果一个页面在浏览器加载页面后，发现没有CSS文件，那么浏览器就会自动调用它本身自带的CSS文件，但是不同的浏览器自带的CSS文件又都不一样，对不同标签定义的样式不一样，如果我们想让做出的页面能够在不同的浏览器显示出来的效果都是一样的，那么我们就需要对对HTML标签重置，就是上面的代码了，但是这样也有不好的地方，因为HTML4.01中有89个标签，所以相当于在页面加载CSS的时候，先对这89个标签都加上了{margin:0; padding:0;}，在这里我不建议大家这么做，因为89个标签中需要重置的标签是很少数，没有必要将所有的标签都重置，需要哪些标签重置就让哪些标签重置就可以了，如下 body,div,p,a,ul,li{margin:0; padding:0;} 【选择器的集体声明】在我们使用选择器的时候，有些标签样式是一样的，或者某些标签都有共同的样式属性，我们可以将这些标签集体声明，不同的标签用“,”分开，比如： 【选择器的嵌套】选择器也是可以嵌套的，如： #div1 p a{color:#900;}/*意思是在ID为div1内的p标签内的链接a标签的文字颜色为红色*/ 这样的好处就是不需要在单独的为ID为div1的标签内的p标签内的a标签单独定义class选择器或者ID选择器5,盒子模型
细节说明：1，html元素都可以看成一个盒子 2，盒子模型的参照物不一样，则使用的CSS属性不一样，比如从div1的角度看，是margin-right,从div2看，则是margin-left. 3,如果你不希望破坏外观，则尽量使用margin布局，因为padding可能会改变盒子的大小，margin如果过大，盒子内容被挤到盒子外边去，但是盒子本身没有变化。
6，块状元素和内联元素
块状元素一般是其他元素的容器，可容纳内联元素和其他块状元素，块状元素排斥其他元素与其位于同一行，宽度(width)高度(height)起作用。常见块状元素为div和p。内联元素内联元素只能容纳文本或者其他内联元素，它允许其他内联元素与其位于同一行，但宽度(width)高度(height)不起作用。常见内联元素为“a”。
块元素与内联元素怎么互相转化
display:inline块元素变内联元素 display:block内联元素变块元素块元素(block element)
address - 地址
blockquote - 块引用
center - 举中对齐块
dir - 目录列表
div - 常用块级容易，也是CSS layout的主要标签
dl - 定义列表
fieldset - form控制组
form - 交互表单
h1 - 大标题
h2 - 副标题
h3 - 3级标题
h4 - 4级标题
h5 - 5级标题
h6 - 6级标题
hr - 水平分隔线
isindex - input prompt
menu - 菜单列表
noframes - frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript - 可选脚本内容（对于不支持script的浏览器显示此内容）
ol - 排序表单
p - 段落
pre - 格式化文本
table - 表格
ul - 非排序列表
内联元素(inline element)
a - 锚点
abbr - 缩写
acronym - 首字
b - 粗体(不推荐)
bdo - bidi override
big - 大字体
br - 换行
cite - 引用
code - 计算机代码(在引用源码的时候需要)
dfn - 定义字段
em - 强调
font - 字体设定(不推荐)
i - 斜体
img - 图片
input - 输入框
kbd - 定义键盘文本
label - 表格标签
q - 短引用
s - 中划线(不推荐)
samp - 定义范例计算机代码
select - 项目选择
small - 小字体文本
span - 常用内联容器，定义文本内区块
strike - 中划线
strong - 粗体强调
sub - 下标
sup - 上标
textarea - 多行文本输入框
tt - 电传文本
u - 下划线
var - 定义变量 7，CSS定位
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- iReport专题学习之报表元素03
- 数字页码的css样式问题
- Lesson_for_java_day02---htm中页面布局、样式、css选择器和框架
- csstable 边框
- TextView使用Html来处理图片显示、字体样式、超链接等
- GruntJs安装及使用入门（自定义grunt任务,合并压缩js、css）
- 自定义CSS博客皮肤
- CSS3-1
- css之自动换行
- 3.2.12: CSS-DOM操作
- css截取字符串
- css的相关知识
- Emmet：HTML/CSS代码快速编写神器
- 基于css的3d和动画(2)
- 3.2.9: 样式操作(*)
- 阻止CSS样式被缓存
- 阻止CSS样式被缓存
- CSS clip元素rect属性中各个参数的含义示例介绍
- HTML，CSS，font-family：中文字体的英文名称 （宋体 微软雅黑）
- 利用:before和:after伪类制作CSS3 圆形按钮 含demo