《html和css基础.doc》由会员分享，可在线阅读，更多相关《html和css基础.doc（34页珍藏版）》请在金锄头文库上搜索。
1、html+css基础 1、网页HTML代码最前面必须包括W3C声明，以便符合标准：一般网页： 框架页： 2、网页编码声明：简体中文网页为gb2312繁体中文网页为big5英文网页为utf-83、采用CSS链接方式，全站使用同一个CSS文件，实现内容与表现分离：不要将样式直接写在页面html代码中，页面中不得使用、等标签。4、CSS文件中需要对一些基本的标签进行定义或重置：* padding:0; margin:0;body,td,th,div font-family: 宋体;font-size: 12px;color: #000000;body background:#FFFFFF;pline
2、-height:150%;a:link color: #000000;text-decoration: none;a:visited color: #000000;text-decoration: none;a:hover color: #ff0000;text-decoration: underline;a:active color: #000000;text-decoration: none;h1color:#000000;line-height:150%;font-size:24px;li list-style:none;word-break: keep-all; white-space
3、: nowrap;5、网页设计完成后，必须分别在Internet Explorer 6.0和Firefox3.0进行兼容性测试，确保页面表现在这两个主流浏览器中保持完全一致，无错位、重叠现象。6、解决兼容性问题常用CSS代码有：1）div对齐方式有居左、居中、居右三种方式，居中的要清除浮动：clear:both; 否则就会有重叠现象。2）隐藏超出部分：overflow:hidden;3）设置固定宽度：width:100px。除特殊需要外，div一般不设置高度，宽度、高度不能使用百分比，以免在各浏览器中出现较大误差。4）给div临时加边框：border:1px solid;5）用!importa
4、nt;为IE和FF设置不同样式，如：width:100px!important; width:102px; 前面是FF样式，后面是IE样式。6）判断IE浏览器版本调用不同的样式表。 7）屏蔽IE7。7、信息列表用ul,li形式，减少代码冗余。如：8、W3C验证。通过W3C组织官方网站可以验证CSS是否符合标准，网址是：http:/jigsaw.w3.org/css-validator/check/referer1）所有标签都必需使用小写2）所有标签内之属性都要有值且不可省略双引号或单引号3）所有标签必须成对, 若非成对需加上/在最后4）一个网页最少要包含的标签标题内容5）若要显示、&的话, 需
5、输入：< >若要显示&于网页中的话，则需输入：&6）标签顺序不可错乱，应该是：文字7）注释文字中不可包含-，HTML注释形式：，CSS注释形式：/*注释文字*/在页面中除了开始、结束、JavaScript代码处需要加一些必要的注释外，其他地方尽量少写注释，有时注释太多也会引起一些问题。在样式表中可以适当加些注释，简要说明样式的用途、范围等。8）、页面引用样式时使用class=”style1”，而不是id=”style1”，把id留给程序员使用，提高样式可重用性，减小CSS文件体积。9、html代码要适当缩进（可在代码前按TAB键，或页面全部做完后，在DW代码视图中执行“套用
6、源格式”，不要有空白行。10、网页中图片的使用。1）网页中最好使用gif、jpg格式图片，由于png图片在浏览器中的兼容性还有问题，故不建议使用。2）栏目标题背景、圆角背景、边框背景、标题前的icon图标等可以写在background:url( );里。3）网站logo、more、new、hot、广告位等图片需使用标签，以便为其添加链接。11、网页整体必须在浏览器中居中显示，即：divmargin:0 auto;。12、如果网页中同时有飘浮图片、下拉菜单、弹出对话框、Flash，前三者要位于Flash上方。需在Flash中加以下透明代码： /IE /Firefox13、设置网页滚动条的样式：h
7、tml scrollbar-face-color:#f6f6f6;scrollbar-highlight-color:#fff;scrollbar-shadow-color:#eeeeee;scrollbar-3dlight-color:#eeeeee;scrollbar-arrow-color:#000;scrollbar-track-color:#fff;scrollbar-darkshadow-color:#fff;14、英文、数字在FF下不自动换行，需加以下代码：word-wrap:break-word;15、注意水平、垂直方向的对齐、留白问题。16、网页宽度。一般窄屏宽为760px，
8、宽屏为950px。17、样式的命名应该符合语义化要求，即一看样式名就可知道这个样式大概用在什么地方、有什么用途，方便以后调用、维护。如顶部样式则为.header。一、web标准web标准不是某一个标准，而是一系列标准的集合。web标准是由三大部分组成的标准集：结构（structure）：HTML、XML、XHTML。表现（presentation）：CSS。行为（behavior）：DOM、ECMAScript。二、常用html标签块级元素 div 用于页面布局p 段落ul,li 无序列表ol,li 有序列表dl,dt,dd 释义列表h1 页面主标题h2 页面副标题h3 页面模块标题h4-h7
9、 标题，因考虑seo原因，页面中用的不多form 表单table,caption,thead,tbody,tr,th,td,tfoot 表格相关br 强制换行行级元素span 控制行级元素的样式，没有语义a 链接strong 重点内容，加粗，seo中用于标示重点内容em 重点内容，斜体label 表单中用，提升用户体验input 单行文本框，单选框，复选框，按钮select 选择框textarea 文本框button 按钮img 图片例：ex1.html（布局分析）三、css基础、常用css样式、css引入方式css基础css的语法结构由三部分组成：选择符（Selector）、属性（prope
10、rty）、和值（value）。Selector Property: value 参数说明：Property : value 样式表定义。属性和属性值之间用冒号(:)隔开，定义之间用分号(;)隔开。常用css选择符 类选择符（.类名，页面中可使用多次）.nav background:#ccc; id选择符(#id名，页面中只能使用一次)#nav color:#c00; 标签选择符(标签名)body font-size:12px; p color:blue; div background:#ccc 群组选择符（标签，标签）h1,h2,h3,p,span font:12px arial; 使用英文逗号对选择符进行分隔，使得页面中所有的h1,h2,h3,p,span都将具有相同的样式定义。这样做的好处是对于页面中需要使用同样式的地方只需要书写一次样式表即可实现，减少代码量，改善css代码的结构。 包含选择符（标签 子标签）h1 spanfont-weight:bold;当我们仅仅想对某一个对象中的子对象进行样式指定
