静态网页快速学习-蒲公英云

静态网页快速学习

网页快速学习好去处 http://www.w3school.com.cn

基本的网页结构

<!DOCTYPE>声明

由于html兼容性很好，因此学习测试时网页可以直接包含元素而不用顾及此结构，方便快捷省事。

注释语法

html文件注释语法

css文件注释语法
基本元素

html使用标签声明元素，例如图片用，标签要有开头有结束，中间放入你想添加的内容，结束标签在元素类型前加”/“。如果只是单个元素，也可以直接结束，如。（”……”表示图片元素的文件位置）

常用元素类型 div(通用块), img(图片), table + tr + th(表格，tr为行，th为列), ul + li(列表，li为列表的单个元素), a(链接，链接地址赋给href属性), p(文字段落)。

直接控制排版样式

一般元素的样式属性可以直接写进该元素的style属性，比如我们声明一个通用块，字体为微软雅黑，字号为18，则为

这是第一个通用块元素

注意这句代码的语法，你可以直接把它复制到一个新建的html文件中测试效果。

通过css控制排版样式

当实际构建网页时，元素一般变得很多很复杂，为了剥离复杂性，我们建议把元素的样式写进单独的css文件中，这样会产生一个元素本身和样式的匹配问题，且看如下的代码：

//example.html文件(部分)

这是第二个通用块元素

//style.css文件(部分)

#box

{

font-family:微软雅黑;

font-size:18px;

}

元素的id属性在css文件中使用#来匹配，相应的，class属性使用.来匹配，元素类型直接使用名字匹配，具体可以看附件中的css文件。

排版属性

width 宽度，height 高度，left 元素与浏览器左边框的距离，top 上边距；margin 元素与父元素四边框的距离，padding 元素与子元素四边框的距离。

单位一律使用px(像素)，也可使用%(屏幕宽度的百分比)。居中 IE浏览器父元素使用 text-align属性设置为center，非IE浏览器则把子元素的margin-left和margin-right属性设置为auto。

width,height,left,top属性直接赋值即可，text-align属性选择left,center,right，而margin和padding写法较多，拿其中一种举例 “ margin:6px 5px 4px 3px; “ 四个值分别对应上、右、下、左的边距，大家记着是按顺时针排的就行了。padding和margin写法一样，更多 http://www.w3school.com.cn/css/pr_margin.asp ，更多区别和讲解则可以参考 http://www.w3school.com.cn/css/css_boxmodel.asp 。