html+css注意事项

    1.静态网站制作一般分为 index.html 首页、 index.css 首页样式 、public.css 公共样式 、 reset.css 重置样式等。

    2.先分析页面都有什么内容，然后把骨干写出来例：header、logo、banner、content、footer等，然后把网页里的标签内容写全，最后在写css。

    3.最先写重置代码，例：body,div,p,ul,li,dl,dt,dd,h1,a,img{ margin:0; padding:0;}，然后写class选择器，这个可以后来慢慢加，然后再写id选择器，一个板块一个板块地写，板块里面要先写集体声明。

    4.网页字体一般在重置样式里的body设置font-size然后其他的字体用百分数或者 em 写，只样便于修改和维护。

    5.为了提升网页的用户体验，页面背景先加载小图片，这样背景加载速度快，用户打开网页的时候，先把这种背景图加载上，不至于展现在浏览者前面的是一片空白。

    6.注意：要在编写网站之前计算好总框的宽度，并在最开始套一个总框wapper并写好计算后的width。然后再计算各个框的宽度。

    7.通过css sprites来整合图像如果页面中有6个小图像，那么浏览器在显示时会分别下载。你可以通过CSS sprites将这些图像合并成1个，可以减少页面加载所需的时间。CSS sprites需要有两个步骤：整合图像、定位图像。比如你可以通过下面的代码来分别定位下面图像中的上下两部分。

.megaphone {width:50px; height:50px; background:url(images/sprite.png) 0 0px;}.smile {width:50px; height:50px; background:url(images/sprite.png) 0 -50px;}

    8.在 html 代码中输入回车、空格都是没有作用的。在html文本中想输入回车换行，就必须输入<br />。而想连续输出空格只有两种办法，一是&nbsp;，二个是将输入法调成全角（就是那个小月牙）之后在敲击空格键，否则浏览器只会输出一个空格。

    9.图片要加上alt属性和background-color属性，包括背景图片。

    10.注意 overflow:hidden; 的使用可以帮助你防止内容溢出而发生排版错误。

    11.“margin:0 auto；”的作用就是将页面元素水平居中，这个很重要，布局页面经常用到需要记住！
    12.注意padding和margin的运用和计算。

    13.请使用 font-family:Arial, Helvetica, sans-serif; 来美化字体，或者自定义字体类型。设置好字体的大小颜色，font-weight:bold;是加粗的意思，font-size:10px;是设置字体10px，text-indent:2em;是设置字体缩进2em，line-height:10px;是设置行高，可以实现文字居中。

    14.注意链接图片要把a标签和img标签都设置成display:block;的块级元素，在设置a标签的宽和高。

    15.图片大小一般都要小点，否则读取会很慢，背景图片要先在html标签里加载小图片平铺，再在body标签里加载整个图片来优化。

    16.注意标签语义化。

    17.img标签是一个很特别的标签，因为它本身是内联元素，但却体现出块状元素宽高起作用的特性，这是很矛盾的地方，这就为页面布局埋下隐患，要么为内联元素，要么为块状元素，在这里我们更需要它的块状元素的属性，所以我们将身为内联元素的img标签转化为块状元素，用“display:block; ”。以后遇到图片链接这种情况，第一反应就是先将这两块给设置成块状元素

    18.line-height通常是用于调节一段文字的行与行之间的距离，或者说两行文字之间的距离，如果行高是500px，那么每一行中的文字距离本行的顶部就是250px，如果将文字的行高设为500px，并且外面的容器的高度也为500px，同样可以实现垂直居中，但是用它来实现垂直居中，也是有缺点的，就是如果内容过多，文字就会跑到下一行，那么内容就不可能垂直居中了。

    19.学会用<em>、<strong>标签是为了强调一段话中的关键字时使用，它们的语义是强调。而<span>标签的作用就是为了设置单独的样式用的。

    20.<q>标签表示简短文本引用，浏览器会对q标签自动添加双引号，这样做是为了说明语义，引用别人的话。而<blockquote>标签表示长文本引用浏览器对<blockquote>标签的解析是缩进样式。
    21.一般网页中会有一些地址信息需要在网页中展示出来，这些地址信息如公司的地址就可以<address>标签,在浏览器上显示的样式为斜体。

    22.当代码为一行代码时，你就可以使用<code>标签。如果是多行代码，可以使用<pre>标签，<pre> 标签的主要作用:预格式化的文本,被包围在 pre 元素中的文本通常会保留空格和换行符。

    23.<table>…</table>：整个表格以<table>标记开始、</table>标记结束。<tbody>…</tbody>：当表格内容非常多时，表格会下载一点显示一点，但如果加上<tbody>标签后，这个表格就要等表格内容全部下载完才会显示。<th>…</th>：表格的头部的一个单元格，表格表头。<caption>标签定义了表格的标题。

    24.在dreamweaver里面，命令--应用源格式，网页代码就规范了整齐了美观了。也可以先选取某部分代码，然后命令--将源格式应用于选定内容。这两个命令的快捷方式是（alt+c+a)和（alt+c+p)，是连续按这三个键哟。