W3C标准网页制作 主讲教师：张 涛
第5讲、页面的主体标记 5.1.HTML主体标记 5.2.背景属性设置 5.3.文字属性设置 5.4.页面边距设置
5.1.HTML的主体标记 网页的主体部分位于<Body>和</Body>这两个标记之间。<Body>作为一个标记，有许多相关的属性，本章就将围绕这些属性的设置展开。其中将包括网页的标题、网页颜色、背景图片等设置。 HTML的主体标记是<BODY>，在<BODY>和</BODY>中放置的是页面中的所有内容，如文字、图片、链接、表格、表单等。 <BODY>元素有很多自身的属性，如定义页面文字的颜色、背景的颜色、背景图像等。 属 性 描 述 TEXT 设定页面文字的颜色 BGCOLOR 设定页面背景的颜色 BACKGROUND 设定页面的背景图像 BGPROPERTIES 设定页面的背景图像为固定，不随页面的滚动而滚动 LINK 设定页面默认的链接颜色 ALINK 设定鼠标正在单击时的链接颜色 VLINK 设定访问过后的链接颜色 TOPMARGIN 设定页面的上边距 LEFTMARGIN 设定页面的左边距
5.2.背景属性设置 bgcolor属性 <BODY>元素的BGCOLOR属性用来设定整个页面的背景颜色。与文字颜色相似，也是使用颜色名称或者十六进制值来表现颜色效果。 基本语法 <BODY bgcolor=COLOR_VALUE> 代码实现 <HTML> <HEAD> <TITLE>页面的背景颜色</TITLE> </HEAD> <BODY BGCOLOR="#336699" TEXT="#FFFFFF"> <CENTER> <H2>设定页面的背景颜色为蓝色，文字的颜色为白色</H2> </CENTER> </BODY> </HTML>
5.2.背景属性设置 background属性 页面中可以使用JPG或GIF图片来表现，这些图片可以作为页面的背景图，通过<BODY>语句中的BACKGROUND属性来实现。它与向网页中插入图片不同，放在网页的最底层，文字和图片等都位于它的上面。文字、插入的图片等会覆盖背景图片。在默认的情况下，背景图片在水平方向和垂直方向上会不断重复出现，直到铺满整个网页。 基本语法 <BODY BACKGROUND=“IMG_FILE_URL”> 代码实现 <HTML> <HEAD> <TITLE>页面的背景图像</TITLE> </HEAD> <BODY BACKGROUND="1.jpg"> <H2>设定页面的背景图像，文字的颜色为深蓝色</H2> </BODY> </HTML> BGPROPERTIES属性 在默认的情况下，如果页面的内容较长，当拖动浏览器滚动条的时候，背景会随着文字内容的滚动而滚动。所谓背景图像固定，是指不论浏览器的滚动条如何拖动，背景都永远固定在相同的位置，并不会随着文字滚动而滚动。 基本语法 <BODY background=“IMG_FILE_URL”BGPROPERTIES=FIXED>
5.3.文字属性设置 text属性 <BODY>元素的TEXT属性可以改变整个页面默认文字的颜色。在没有对文字进行单独定义颜色的时候，这个属性将对页面中所有的文字产生作用。 基本语法 <BODY text=COLOR_VALUE> 代码实现 <HTML> <HEAD> <TITLE>页面的文字颜色</TITLE> </HEAD> <BODY TEXT=“#0000FF”> </CENTER> <H2>设定页面的文字颜色为蓝色</H2> </CENTER> </BODY> </HTML>
5.3.文字属性设置 LINK属性 通过LINK定义默认的没有单击过的链接文字颜色，COLOR_VALUE定义颜色的名称或十六进制值。 在浏览器默认的情况下，链接文字的颜色为蓝色，访问过后的链接文字颜色为紫红色。这有助于用户判断是否单击过该链接。 基本语法 <BODY LINK=“COLOR_VALUE”> ALINK属性 通过ALINK定义鼠标按下链接文字时的链接文字颜色，COLOR_VALUE定义颜色的名称或十六进制值。 基本语法 <BODY ALINK=“COLOR_VALUE”> VLINK属性 通过VLINK定义单击过后的链接文字颜色，COLOR_VALUE定义颜色的名称或十六进制值。 基本语法 <BODY VLINK=“COLOR_VALUE”>
5.4.页面边距设置 上边距属性TOPMARGIN 在HTML页面中，可以定义页面的上边距，即内容和浏览器上部边框之间的距离。设定合适的上边距可以防止网页外观过于拥挤。 基本语法 <BODY topmargin=VALUE> 左边距属性LEFTMARGIN 在HTML页面中，可以定义页面的左边距，即内容和浏览器左侧边框之间的距离。设定合适的上边距可以防止网页外观过于拥挤。 基本语法 <BODY leftmargin=VALUE> 代码实现 <HTML> <HEAD> <TITLE>页面的边距 </TITLE> </HEAD> <BODY topmargin=0 leftmargin=0> 页面的边距 </BODY> </HTML>
谢谢!