- 您的位置：网站首页 >> 网站专题 >> 网页设计 >> 网站制作:Web入门：让初学者轻易掌握Web标准设计
- 推荐信息
网站制作:Web入门：让初学者轻易掌握Web标准设计
网站制作:一个网页的架构：声明，头部，主体，结束
1
2
3 //声明的一些规范，初学者不必去理会，该部分会自动生成
4
5
6 /**
7 *http-equiv='Content-Type' 表示描述文档类型
8 *content='text/HTML; 文档类型mime类型，这里为html,如果JS就是*text/javascript，
9 *charset=utf-8 页面字符集，编码，eg:gb2312,iso-8859-1,utf-8
10 *建议统一采用utf-8
11 */
12
13 //一个网页的标题
14
15
16
17
18
19
2
3 //声明的一些规范，初学者不必去理会，该部分会自动生成
4
5
6 /**
7 *http-equiv='Content-Type' 表示描述文档类型
8 *content='text/HTML; 文档类型mime类型，这里为html,如果JS就是*text/javascript，
9 *charset=utf-8 页面字符集，编码，eg:gb2312,iso-8859-1,utf-8
10 *建议统一采用utf-8
11 */
12
13 //一个网页的标题
14
15
16
17
18
19
我要主要讲解的是主体部分，在这过程成中会对其他部分有一定的讲解和延伸。
在讲body之前，我先讲一下html标签的大体分类。主要是为接下来讲解网页的基本结构做铺垫。
html标签大体分为：块级元素和内联元素，那么何为块级元素何为内联元素呢?
块级元素：直白的说就是一块区域，独立占用一行空间的元素，如：div，p。
内联元素：与块级元素不同，就是不能占据一行空间的元素，如a，span。
我说的可能不是很专业，目的只是初学者便于理解。
举个例子，大家就懂啦(这里我只写了body中的内容，其他的内容大家自己补充)：
相信到这里大家对块级元素和内联元素也已经有了一定了解，那么接下来我将细致的讲解body中的那些事，哈哈!
事1：body是怎么个架子?
插播广告：div是html的一个标签，每个标签都有自己的一些属性，例如
….
,其中id和class就是对应的div元素的属性，具体含义以后讲解。
我以互动网络首页http://www.gdibn.com/为例对事一进行讲解。
body的架子：
整理：
〈DIV id=div_code style='BORDER-RIGHT: windowtext 0.5pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: windowtext 0.5pt solid; PADDING-LEFT: 5.4pt; BACKGROUND: #e6e6e6; PADDING-BOTTOM: 4px; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: windowtext 0.5pt solid'> 〈STYLE type=text/css>#div_code img{border:0px;}
1
2 〈DIV id=page>
3 //我是最外层！包裹这整个网页的皮，也有人给我起名字为wrapper
4
5 〈DIV id=header>
6 //我是头部！
7
8 9
10 〈DIV id=content>
11 //我是内容！
12
13 14
15 〈DIV id=footer〉
16 //我是尾部！
17
18 19
20
2 〈DIV id=page>
3 //我是最外层！包裹这整个网页的皮，也有人给我起名字为wrapper
4
5 〈DIV id=header>
6 //我是头部！
7
8 9
10 〈DIV id=content>
11 //我是内容！
12
13 14
15 〈DIV id=footer〉
16 //我是尾部！
17
18 19
20
21
详解：
〈DIV id=div_code style='BORDER-RIGHT: windowtext 0.5pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: windowtext 0.5pt solid; PADDING-LEFT: 5.4pt; BACKGROUND: #e6e6e6; PADDING-BOTTOM: 4px; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: windowtext 0.5pt solid'>
1
2 〈DIV id=page>
3 //我是最外层！包裹这整个网页的皮，也有人给我起名字为wrapper
2 〈DIV id=page>
3 //我是最外层！包裹这整个网页的皮，也有人给我起名字为wrapper
〈DIV id=div_code style='BORDER-RIGHT: windowtext 0.5pt solid; PADDING-RIGHT: 5.4pt; BORDER-TOP: windowtext 0.5pt solid; PADDING-LEFT: 5.4pt; BACKGROUND: #e6e6e6; PADDING-BOTTOM: 4px; BORDER-LEFT: windowtext 0.5pt solid; WIDTH: 98%; WORD-BREAK: break-all; PADDING-TOP: 4px; BORDER-BOTTOM: windowtext 0.5pt solid'>
Tags: 网站制作