下载文档原格式
ASP XHTML 常用标记<body></body>作为网页的主体部分，可以设置很多的属性，这些属性用于定义网页的总体风格。
而XHTML 的常用标记都放在BODY 标记里面。
1．字体标记在对网页中显示文字的字体、大小和颜色进行设置时，可以使用<font>元素。
<font>元素的属性有color 、size 、face 等。
color 属性用于指定字体的颜色，如果不设置该属性，则默认字体颜色为黑色。
size 属性用于指定字体大小，其值1～7从小上述代码中，表示<font>与</font>之间的所有字符均以3号、蓝色、黑体形式显示。
<font>元素还可以与<b>元素和<i>元素结合使用，前者设置字体为粗体，后者设置字体为斜体。
这两种元素也需要设置关闭符号</b>和</i>，以设置其作用范围。
例如：下面是一个使用字体标记设置字体大小和颜色的实例，代码如下所示。
执行上述代码，结果如图2-1所示。
图2-1 字体标记2．图片标记网页中最引人入胜的莫过于那丰富多彩的图像了。
成功的站点中不能没有绚丽的图像，否则便使浏览者觉得索然无味。
下面介绍XHTML语言中的基本图像标记：从上述代码中可以看出，关于基本图像标记<img>的应用参数多达21项。
当然，我们实际应用的只是其中几项，只有在需要实现特殊效果的情况下，才需要使用较多的参数。
语法中各参数的具体含义如表2-2所示。
图2-2 图片标记3．段落标记一篇文章由标题和正文组成，正文又是由多个段落组成的，所以可以说段落是构成文章的主体。
既然一篇文章是由多个段落组成的，那么又如何区分段落呢？段落与段落之间有什么不同呢？带着这些问题来学习本小节的段落标记。
在学习段落与段落的区别前，先了解段落的基本语法，段落语法代码是由尖括号对里放置p的双标记来表示，在标记对里面放置的内容就构成了一个段落。
HTML字体属性一、文字样式设置的基本标签—<font>设置字体样式的基本标签是<font></font>，被其包含的文本为样式作用区。
在初学者的HTML代码编写中，<font></font>容易被多重嵌套，如<font 属性1=值1><font 属性2=值2>文本</font></font>。
还有一种情况是标签嵌套错位，如<font><p>文本</font></p>。
为了规范代码的编写，避免不必要的错误，读者在初学时一定要谨慎。
二、设置文字的颜色color是<font></font>标签的属性之一，用于设置文字颜色。
编写代码如代码2.1所示。
代码2.1 字体颜色的设置：font_color.htm<html><head><title>字体颜色的设置</title></head><body>浅红色文字：<font color="#dd0000">HTML学习的本质就是该是什么就用什么</font><br />深红色文字：<font color="#660000">HTML学习的本质就是该是什么就用什么</font><br />浅绿色文字：<font color="#00dd00">HTML学习的本质就是该是什么就用什么</font><br />深绿色文字：<font color="#006600">HTML学习的本质就是该是什么就用什么</font><br />浅蓝色文字：<font color="#0000dd">HTML学习的本质就是该是什么就用什么</font><br />深蓝色文字：<font color="#000066">HTML学习的本质就是该是什么就用什么</font><br />浅黄色文字：<font color="#dddd00">HTML学习的本质就是该是什么就用什么</font><br />深黄色文字：<font color="#666600">HTML学习的本质就是该是什么就用什么</font><br />浅青色文字：<font color="#00dddd">HTML学习的本质就是该是什么就用什么</font><br />深青色文字：<font color="#006666">HTML学习的本质就是该是什么就用什么</font><br />浅紫色文字：<font color="#dd00dd">HTML学习的本质就是该是什么就用什么</font><br />深紫色文字：<font color="#660066">HTML学习的本质就是该是什么就用什么</font><br /></body></html>浏览效果如图2.2所示。
一、HTML框架简述一个浏览器窗体可以通过几个页面的组合来显示。
我们可以使用框架来完成(frames)这项工作。
(框架可以把HTML文档分为多个页面)框架页使用了表格的方式组合，可以分为数行与数列。
框架的优点∙重载页面时不需要重载整个页面，只需要重载页面中的一个框架页(减少了数据的传输，增加了网页下载速度)∙方便制作导航栏框架的缺点∙会产生很多页面，不容易管理∙不容易打印∙浏览器的后退按钮无效∙代码复杂,无法被一些搜索引擎索引到∙多数小型的移动设备（PDA 手机）无法完全显示框架∙多框架的页面会增加服务器的http请求∙由于上面诸多缺点，因此不符合标准网页设计的理念,已经被标准网页设计抛弃。
∙框架标签（Frame）∙Frame 标签定义了放置在每个框架中的 HTML 文档。
∙在下面的这个例子中，我们设置了一个两列的框架集。
第一列被设置为占据浏览器窗口的 25%。
第二列被设置为占据浏览器窗口的 75%。
HTML 文档 "frame_a.htm" 被置于第一个列中，而 HTML 文档 "frame_b.htm" 被置于第二个列中：∙<frameset cols="25%,75%">∙ <frame src="frame_a.htm">∙ <frame src="frame_b.htm">∙</frameset>HTML框架结构与语法框架的DTD使用框架页时要使用它特有的DTD(HTML文档结构)<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""/TR/xhtml1/DTD/xhtml1-frameset.dtd">HTML框架使用frameset标签把浏览器的窗体分为多个行与列的框架页，每个页面又使用了frame标签定义，同时应该使用noframes定义浏览器不支持框架时显示的内容。
CSS 网页样式大全如下：字体属性：(font)大小font-size: x-large;(特大) xx-small;(极小) 一般中文用不到，只要用数值就可以，单位：PX、PD样式font-style: oblique;(偏斜体) italic;(斜体) normal;(正常)行高line-height: normal;(正常) 单位：PX、PD、EM粗细font-weight: bold;(粗体) lighter;(细体) normal;(正常)变体font-variant: small-caps;(小型大写字母) normal;(正常)大小写text-transform: capitalize;(首字母大写) uppercase;(大写) lowercase;(小写) none;(无)修饰text-decoration: underline;(下划线) overline;(上划线) line-through;(删除线) blink;(闪烁)常用字体：(font-family)"Courier New", Courier, monospace, "Times New Roman", Times, serif, Arial, Helvetica, sans-serif, Verdana背景属性：(background)色彩background-color: #FFFFFF;图片background-image: url();重复background-repeat: no-repeat;滚动background-attachment: fixed;(固定) scroll;(滚动)位置background-position: left(水平) top(垂直);简写方法background:#000 url(..) repeat fixed left top;区块属性：(Block)字间距letter-spacing: normal; 数值对齐text-align: justify;(两端对齐) left;(左对齐) right;(右对齐) center;(居中)缩进text-indent: 数值px;垂直对齐vertical-align: baseline;(基线) sub;(下标) super;(下标) top; text-top; middle; bottom; text-bottom;词间距word-spacing: normal; 数值空格white-space: pre;(保留) nowrap;(不换行)显示display:block;(块) inline;(内嵌) list-item;(列表项) run-in;(追加部分) compact;(紧凑) marker;(标记) table; inline-table; table-raw-group;table-header-group; table-footer-group; table-raw; table-column-group; table-column; table-cell; table-caption;(表格标题)方框属性：(Box)width:; height:; float:; clear:both; margin:; padding:; 顺序：上右下左边框属性：(Border)border-style: dotted;(点线) dashed;(虚线) solid; double;(双线) groove;(槽线) ridge;(脊状) inset;(凹陷) outset;border-width:; 边框宽度border-color:#;简写方法border：width style color;列表属性：(List-style)类型list-style-type: disc;(圆点) circle;(圆圈) square;(方块) decimal;(数字) lower-roman;(小罗码数字) upper-roman; lower-alpha; upper-alpha;位置list-style-position: outside;(外) inside;图像list-style-image: url(..);定位属性：(Position)Position: absolute; relative; static;visibility: inherit; visible; hidden;overflow: visible; hidden; scroll; auto;clip: rect(12px,auto,12px,auto) (裁切)css属性代码大全如下一CSS文字属性：color : #999999;font-family : 宋体,sans-serif;font-size : 9pt;font-style:itelic;font-variant:small-caps;letter-spacing : 1pt;line-height : 200%;font-weight:bold;vertical-align:sub;vertical-align:super;text-decoration:line-through;text-decoration:overline;text-decoration:underline;text-decoration:none;text-transform : capitalize;text-transform : uppercase;text-transform : lowercase;text-align:right;text-align:left;text-align:center;text-align:justify;vertical-align属性vertical-align:top;vertical-align:bottom;vertical-align:middle;vertical-align:text-top;vertical-align:text-bottom;二、CSS边框空白padding-top:10px;padding-right:10px;padding-bottom:10px;padding-left:10px;list-style-type:decimal;list-style-type:lower-roman;list-style-type:upper-roman;list-style-type:lower-alpha;list-style-type:upper-alpha;list-style-type:disc;list-style-type:circle;list-style-type:square;list-style-image:url(/dot.gif);list-style-position:outside;list-style-position:inside;四、CSS背景样式：background-color:#F5E2EC; background:transparent; background-image : url(/image/bg.gif); background-attachment : fixed; background-repeat : repeat; background-repeat : no-repeat; background-repeat : repeat-x; background-repeat : repeat-y;指定背景位置background-position : 90% 90%; background-position : top; background-position : buttom; background-position : left; background-position : right; background-position : center;五、CSS连接属性：aa:linka:visiteda:activea:hover鼠标光标样式：链接手指CURSOR: hand十字体cursor:crosshair箭头朝下cursor:s-resize十字箭头cursor:move箭头朝右cursor:move加一问号cursor:help箭头朝左cursor:w-resize箭头朝上cursor:n-resize箭头朝右上cursor:ne-resize箭头朝左上cursor:nw-resize文字I型cursor:text箭头斜右下cursor:se-resize箭头斜左下cursor:sw-resize漏斗cursor:wait光标图案(IE6)p {cursor:url("光标文件名.cur"),text;}六、CSS框线一览表：border-top : 1px solid #6699cc;border-bottom : 1px solid #6699cc;border-left : 1px solid #6699cc;border-right : 1px solid #6699cc;以上是建议书写方式,但也可以使用常规的方式如下:border-top-color : #369border-top-width :1pxborder-top-style : solid其他框线样式soliddotteddoublegrooveridgeinsetoutset七、CSS表单运用：文字方块按钮复选框选择钮多行文字方块下拉式菜单选项1选项2八、CSS边界样式如下：margin-top:10px;margin-right:10px;margin-bottom:10px;margin-left:10px;CSS 属性：字体样式(Font Style)序号中文说明标记语法1 字体样式{font:font-style font-variant font-weight font-size font-family}2 字体类型{font-family:"字体1","字体2","字体3",...}3 字体大小{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}4 字体风格{font-style:inherit|italic|normal|oblique}5 字体粗细{font-weight:100-900|bold|bolder|lighter|normal;}6 字体颜色{color:数值;}7 阴影颜色{text-shadow:16位色值}8 字体行高{line-height:数值|inherit|normal;}9 字间距{letter-spacing:数值|inherit|normal}10 单词间距{word-spacing:数值|inherit|normal}11 字体变形{font-variant:inherit|normal|small-cps }12 英文转换{text-transform:inherit|none|capitalize|uppercase|lowercase}13 字体变形{font-size-adjust:inherit|none}14 字体{font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|no rmal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}文本样式(Text Style)序号中文说明标记语法1 行间距{line-height:数值|inherit|normal;}2 文本修饰{text-decoration:inherit|none|underline|overline|line-through|blink}3 段首空格{text-indent:数值|inherit}4 水平对齐{text-align:left|right|center|justify}5 垂直对齐{vertical-align:inherit|top|bottom|text-top|text-bottom|baseline|middle|sub|super}6 书写方式{writing-mode:lr-tb|tb-rl}背景样式序号中文说明标记语法1 背景颜色{background-color:数值}2 背景图片{background-image: url(URL)|none}3 背景重复{background-repeat:inherit|no-repeat|repeat|repeat-x|repeat-y}4 背景固定{background-attachment:fixed|scroll}5 背景定位{background-position:数值|top|bottom|left|right|center}6 背影样式{background:背景颜色|背景图象|背景重复|背景附件|背景位置}框架样式(Box Style)序号中文说明标记语法1 边界留白{margin:margin-top margin-right margin-bottom margin-left}2 补白{padding:padding-top padding-right padding-bottom padding-left}3 边框宽度{border-width:border-top-width border-right-widthborder-bottom-width border-left-width}宽度值：thin|medium|thick|数值4 边框颜色{border-color:数值数值数值数值}数值：分别代表top、right、bottom、left颜色值5 边框风格{border-style:none|hidden|inherit|dashed|solid|double|inset|outset|ridge|groove}6 边框{border:border-width border-style color}上边框{border-top:border-top-width border-style color}右边框{border-right:border-right-width border-style color}下边框{border-bottom:border-bottom-width border-style color}左边框{border-left:border-left-width border-style color}7 宽度{width:长度|百分比| auto}8 高度{height:数值|auto}9 漂浮{float:left|right|none}10 清除{clear:none|left|right|both}分类列表序号中文说明标记语法1 控制显示{display:none|block|inline|list-item}2 控制空白{white-space:normal|pre|nowarp}3 符号列表{list-style-type:disc|circle|square|decimal|lower-roman|upper-roman|lower-alpha|uppe r-alpha|none}4 图形列表{list-style-image:URL}5 位置列表{list-style-position:inside|outside}6 目录列表{list-style:目录样式类型|目录样式位置|url}7 鼠标形状{cursor:hand|crosshair|text|wait|move|help|e-resize|nw-resize|w-resize|s-resize|se-resiz e|sw-resize}。
HTML字体属性HTML字体属性⼀、⽂字样式设置的基本标签—设置字体样式的基本标签是，被其包含的⽂本为样式作⽤区。
在初学者的HTML代码编写中，容易被多重嵌套，如⽂本。
还有⼀种情况是标签嵌套错位，如⽂本。
为了规范代码的编写，避免不必要的错误，读者在初学时⼀定要谨慎。
⼆、设置⽂字的颜⾊color是标签的属性之⼀，⽤于设置⽂字颜⾊。
编写代码如代码2.1所⽰。
代码2.1 字体颜⾊的设置：font_color.htm浅红⾊⽂字：HTML学习的本质就是该是什么就⽤什么深红⾊⽂字：HTML学习的本质就是该是什么就⽤什么浅绿⾊⽂字：HTML学习的本质就是该是什么就⽤什么深绿⾊⽂字：HTML学习的本质就是该是什么就⽤什么浅蓝⾊⽂字：HTML学习的本质就是该是什么就⽤什么深蓝⾊⽂字：HTML学习的本质就是该是什么就⽤什么浅黄⾊⽂字：HTML学习的本质就是该是什么就⽤什么深黄⾊⽂字：HTML学习的本质就是该是什么就⽤什么浅青⾊⽂字：HTML学习的本质就是该是什么就⽤什么深青⾊⽂字：HTML学习的本质就是该是什么就⽤什么浅紫⾊⽂字：HTML学习的本质就是该是什么就⽤什么深紫⾊⽂字：HTML学习的本质就是该是什么就⽤什么浏览效果如图2.2所⽰。
图2.1 字体颜⾊的设置三、设置⽂字的尺⼨size也是标签的属性，⽤于设置⽂字⼤⼩。
size的值为1-7，默认为3。
我们可以size 属性值之前加上“＋”、“－”字符，来指定相对于字号初始值的增量或减量。
编写代码如代码2.2所⽰。
代码2.2 字体尺⼨的设置：font_size.htmsize为1：HTML学习size为2：HTML学习size为3：HTML学习size为4：HTML学习size为5：HTML学习size为6：HTML学习size为7：HTML 学习浏览效果如图2.2所⽰。
图4.8 字体尺⼨的设置可尝试在size值前⾯加上“＋”、“－”字符，更灵活地设置⽂字尺⼨。
四、设置⽂字的字体face也是标签的属性，⽤于设置⽂字字体（字型）。
03-HTML之body标签body标签HTML标签按作⽤主要分为两类：字体标签和排版标签HTML标签按级别主要分为两类：⽂本级标签和容器级标签⽂本级标签：p、span、a、b、i、u、em。
⽂本标签⾥只能放⽂字、图⽚、表单元素。
容器级标签：div、h系列、li、dt、dd。
容器级标签⾥可以放任何东西。
1.字体标签字体标签主要包含：h1~h6、<font>、<u>、<b>、<strong><em>、<sup>、<sub>1.1- 标题标签<hx></hx>标题使⽤<h1>⾄<h6>标签进⾏定义。
<h1>定义最⼤的标题，<h6>定义最⼩的标题。
具有align属性，属性值可以是：left（左对齐）、center（居中）、right（右对齐）、justify（两端对齐）例：<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><title>我是标题</title></head><body><h1>标题1</h1><h2>标题2</h2><h3>标题3</h3><h4>标题4</h4><h5>标题5</h5><h6>标题6</h6></body></html>1.2- 字体标签<font></font>（已废弃）font标签可以设置⽂字颜⾊、⼤⼩、字体类型等颜⾊：color="红⾊"或color="#ff00cc"或color="new rgb(0,0,255)"：设置字体颜⾊。
HTML+CSS常⽤代码（笔记）注释标签：对代码进⾏说明<!-- 单⾏注释,也可以对多⾏⽂字进⾏注释 -->常⽤格式标签<b>加粗</b><i>斜体</i><u>下划线</u><s>删除线</s><p>段落标签</p><hr>：分割线<br>：换⾏<sup>上标</sup><sub>下标</sub><pre>保留当前格式样式</pre><strong>(粗字体)强调⽂本</strong>../：返回上⼀级（⽗级）⽬录标题标签<h1>我是⼀级标题标签(最⼤)</h1><h2>我是⼆级标题标签</h2><h3>我是三级标题标签</h3><h4>我是四级标题标签</h4><h5>我是五级标题标签</h5><h6>我是六级标题标签(最⼩)</h6>列表标签⽆序列表：<ul type="disc"> <!--disc:圆点；circle：圆圈；square：⽅块--><li>列表项1</li><li>列表项2</li><li>列表项3</li></ul>有序列表：<ol type="1"> <!--1，a/A，i/I--><li>列表项1</li><li>列表项2</li><li>列表项3</li></ol>⾃定义列表：图⽂混排<dl><dt>标题，图⽚</dt><dd>描述</dd></dl>CSS样式 内嵌样式:放在<head>标签之间语法：<style type="text/css">选择器名 {属性名:属性值;}</style>所有标签（*）* {padding:0px; /*清除默认内边距*/margin:0px; /*清除默认外边距*/}⽂本属性line-height:20px; /*⾏⾼*/text-align:center; /*对齐：Left|right|center|justify*/text-decoration:none; /*⽂本修饰None：默认|underline：定义⽂本下的⼀条线|overline：定义⽂本上的⼀条线|line-through：定义穿过⽂本下的⼀条线*/ Letter-spacing:5px; /*字母之间的间距*/Text-indent:40px; /*⾸⾏的缩进⽅式：px/%*/字体标签及属性<font>字体标签</font><!--字体CSS属性--><style type="text/css">font-size:字体⼤⼩（常⽤单位：px/%/em...）;color:颜⾊;font-style:字体样式;font-family:字体系列;font-weight:字体粗细;</style>例：<font size="6" color="#FF0000" face="微软雅⿊">我是字体标签</font>背景相关的属性background-color: red; /*设置背景颜⾊*/background-image: url(图⽚路径); /*设置背景图⽚（图⽚路径没有引号包裹）*/background-repeat: no-repeat; /*设置背景的平铺⽅式：Repeat-x、repeat-y、no-repeat*/Background-attachment: Fixed; /*设置滚动：Scroll、Fixed*/background-position: center; /*设置背景的坐标，偏移量,如left、right、center、button*/background-position:100px -100px;/*第⼀值：左右偏移量，正：向右偏移，负：向左偏移；第⼆值：上下偏移量，正：向下偏移，负：向上偏移*//*可以为px、%、cover、continuecover: 不会造成图⽚失真，会铺满整个标签。
文字标签FONT
FONT<fontsize=“” color=“” face=“”>文字</font>
Face:字体 (比如：宋体黑体)
Size:字号/大小
<em>...</em>斜体=<i>
<b>…</b>加粗=<strong>
<i>…</i>斜体
<u>…</u>下划线=<ins>...</ins>
<s>…</s>删除线=<del>...</del>
<Strike>=<S>
<code>...</code>用code显示计算机代码，code里显示的字符是等宽字符隶书隶读li
对于<ins>/<del>标签大多数浏览器会改写为删除文本和下划线文本。
一些老式的浏览器会把删除文本和下划线文本显示为普通文本
<s>
不赞成使用。
使用 <del> 代替。
<strike>
不赞成使用。
使用 <del> 代替。
<u>
不赞成使用。
使用样式（style）代替。
