html书写规范

html-css020

html书写规范,第1张

1、所有的标签都在<>中

2、所有的标签都有开始和结束,即使是单标记也要结束

3、所有的标签和属性和值,小写

4、标签和属性,属性和属性之间有空格

5、属性值必须又加引号(单引号和双引号都可以)

6、属性必须有值

7、属性可以不写

8、标签与标签之间要正确嵌套(不可交叉嵌套),你懂的

9、           <html>

                           <head >           <title></title>           <head>

                                                    <body></body>

               <html>

                解释:html:标明文档类型是html;

               head:是网页头部,包括网页的基本信息,其中 title(网站的标题)就包含在里面;

                 body:在浏览器看到的内容

10、注释:<! - -注释内容- - >      (和xml一样)

11、     face:字体(建议使用英文字母表示中文字体)

12、size:字体大小(1-7),默认为3

13、颜色:(color)

14、body的简单使用:

15、

16、

用HTML代码在图片上写字

一.以图片作为背景。在图片上写字,主要是在<td>里用到了(Spacer)空白。

<spacer type="horizontal" align=#>

水平空白

align=center(居中),left(居左),right(居右)。

<spacer type="vertical" valign=#>

竖直空白

valign=top(顶端),bottom(底部),middle(居中)。

我们用这张图片作为背景:

效果一:文字居中

<TABLE height=312 cellSpacing=0 cellPadding=0

width=410 align=center

background=http://bbs.guqu.net/UploadFile/2005-1/200512211045825.gif

border=0><TBODY><TR><TD align=center type="vertical" spacer><FONT face=华文行楷

color=red

size=7><B>百年爱情</B></FONT></TD></TR></TBODY></TABLE>

文字在图片中的位置。由<td>中的align=center决定。center:表示居中。

效果二:文字居顶(左)

<TABLE height=312

cellSpacing=0 cellPadding=0 width=410 align=top

background=http://bbs.guqu.net/UploadFile/2005-1/200512211045825.gif

border=0><TBODY><TR><TD valign=top align=left type="vertical" spacer><FONT face=华文行楷

color=red

size=7><B>百年爱情</B></FONT></TD></TR></TBODY></TABLE>

top:表示文字居顶端。left:表示文字居左。

效果三:文字居底部(右)

<TABLE height=312 cellSpacing=0

cellPadding=0 width=410 align=bottom

background=http://bbs.guqu.net/UploadFile/2005-1/200512211045825.gif

border=0><TBODY><TR><TD valign=bottom align=right

type="vertical" spacer><FONT face=华文行楷 color=red

size=7><B>百年爱情</B></FONT></TD></TR></TBODY></TABLE>

bottom:表示文字居底部。right:表示文字居右。

效果四:文字居顶部(右)

<TABLE height=312 cellSpacing=0 cellPadding=0

width=410 align=top

background=http://bbs.guqu.net/UploadFile/2005-1/200512211045825.gif

border=0><TBODY><TR><TD vAlign=top align=right type="vertical" spacer><FONT face=华文行楷

color=red

size=7><B>百年爱情</B></FONT></TD></TR></TBODY></TABLE>

top:表示文字居顶端。right:表示文字居右。

效果五:文字居底部(左)

TABLE height=312 cellSpacing=0 cellPadding=0

width=410 align=bottom

background=http://bbs.guqu.net/UploadFile/2005-1/200512211045825.gif

border=0><TBODY><TR><TD vAlign=bottom align=left type="vertical" spacer><FONT face=华文行楷

color=red

size=7><B>百年爱情</B></FONT></TD></TR></TBODY></TABLE>

bottom:表示文字居底部。left:表示文字居左。

第一种方法是直接在图片上弄上水印。

第二种是使用两张图片,一张背景,一张文字,文字的弄成背景透明的格式。

第三种图片当做背景,然后写字好了。

<html>

<head>

    <style type = "text/css">

        div{width:300height:400pxfont-size:120background:url(http://news.kedo.gov.cn/upload/resources/image/2014/09/12/26881_500x500.jpg)}

    </style>

</head>

<body>

    <div>GOGOGO</div>

</body>

</html>

还有就是你会使用div了想怎么放就怎么放