静态网页快速学习

布满荆棘的人生 2021-12-01 12:06 275阅读 0赞

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

1. 基本的网页结构

<!DOCTYPE>声明 <html> <head> </head> <body>  </body> </html>

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

2. 注释语法

html文件注释语法

css文件注释语法

3. 基本元素

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

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

3. 直接控制排版样式

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

<div style="font-family:微软雅黑;font-size:18px;">这是第一个通用块元素</div>

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

4. 通过css控制排版样式

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

//example.html文件(部分)

<div id="box">这是第二个通用块元素</div>

//style.css文件(部分)

\#box

font-family:微软雅黑;

font-size:18px;

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

5. 排版属性

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_pr_margin.asp] ，更多区别和讲解则可以参考 [http://www.w3school.com.cn/css/css\_boxmodel.asp][http_www.w3school.com.cn_css_css_boxmodel.asp] 。

6. 边框背景属性

边框背景属性用来调试网页排版非常方便，所以在这里单独拿出来说下。

边框 border，有一种简便的语法参考例子 " border:5px solid \#F00; " 从左到右依次指定边框宽度，类型（在此为实心），颜色（可以用red等单词）。

背景 background， 同样举一简单语法参考 " background:red; " 直接指定颜色，也可以是图片，具体及更多语法参考 [http://www.w3school.com.cn/css/pr\_background.asp][http_www.w3school.com.cn_css_pr_background.asp] 。

附：配套案例文件下载 [https://skydrive.live.com/redir?resid=C96C6EC8AD8DCFEA!4793&authkey=!ADxgzMAxbZ1bo4o][https_skydrive.live.com_redir_resid_C96C6EC8AD8DCFEA_4793_authkey_ADxgzMAxbZ1bo4o]

转载于:https://www.cnblogs.com/sanwave/archive/2012/12/04/3485969.html

[http_www.w3school.com.cn]: http://www.w3school.com.cn/
[http_www.w3school.com.cn_css_pr_margin.asp]: http://www.w3school.com.cn/css/pr_margin.asp
[http_www.w3school.com.cn_css_css_boxmodel.asp]: http://www.w3school.com.cn/css/css_boxmodel.asp
[http_www.w3school.com.cn_css_pr_background.asp]: http://www.w3school.com.cn/css/pr_background.asp
[https_skydrive.live.com_redir_resid_C96C6EC8AD8DCFEA_4793_authkey_ADxgzMAxbZ1bo4o]: https://skydrive.live.com/redir?resid=C96C6EC8AD8DCFEA!4793&authkey=!ADxgzMAxbZ1bo4o