htmlcss常用标记.pdf

《htmlcss常用标记.pdf》由会员分享，可在线阅读，更多相关《htmlcss常用标记.pdf（8页珍藏版）》请在淘文阁 - 分享文档赚钱的网站上搜索。

1、html 基本标记网页头部标记：head:head:1)网页标题设置 2)元信息标记，有属性name,http-equiv,content name 属性：描述网页，便于查找分类，取值有keywords,description,generator,author）http-equiv：传送 http 通信协议的标头，content 才有具体的值./设置页面定时跳转。网页主体标记：body:有属性：bgcolor background text leftmargin topmargin link alink vlink 多媒体对象滚动标记：滚动的对象 属性behavior：有 3 个取值 scro

2、ll,alternate,slide;默认取值scroll direction：有 4 个取值 up,down,left,right;默认取值left scrolldelay:滚动延迟，单位是毫秒，越长越慢。scrollamount:滚动速度，单位像素，设置每次滚动时移动的长度。越大越快。loop：滚动循环次数，默认不断循环。width，height：滚动范围bgcolor：滚动背景色hspace，vspace：设置与周围对象的水平和垂直空白空间。经常使用行为：onmouseover=this.stop()onmouseout=this.start()插入媒体：有属性：src width he

3、ight 设置动画为透明可以添加如下属性：wmode=transparent 设置背景音乐：有属性：src loop 插入 Java Applet 使用 css 样式表CSS 语法由三部分构成：选择器、属性和值：selector property:value 选择器(selector)通常是你希望定义的HTML 元素或标签，属性(property)是你希望改变的属性，并且每个属性都有一个值。属性和值被冒号分开，并由花括号包围，这样就组成了一个完整的样式声明.1、字体属性：字体：font-family:取值-如“宋体”;字号：font-size:取值-12px;字体风格：font-style:(

4、normal 默认的,italic 斜体,oblique 中间状态)加粗字体：font-weight:(normal,bold,bolder,lighter,number:100-900)小写字母转为大写：font-variant:(normal,small-caps)字体复合属性：font 用来简化css 代码，可以取值以上所有属性值，之间用空格分开。font:隶书 16px bolder;2、颜色和背景属性：颜色：color（颜色值是英文名称或16 进制 RGB 值：red#ff0000）背景颜色：background-color:取值背景图像：background-image:url(图

5、像地址)背景重复：background-repeat:no-repeat repeat repeat-x repeat-y 背景附件：background-attachment:scroll/fixed 设置背景图像随对象滚动还是固定不动。背景位置：background-position:位置取值（采用数字或关键字描述）background-position:50%0%靠上居中位置background-position:Top center 靠上居中位置背景复合属性：background:取值background:url(images/1.gif)no-repeat left top;3、段落

6、属性:控制段落的属性，包括单词间隔、字符间隔、文字修饰、纵向排列、文本转换、文本排列水平对齐方式、文本缩进，文本行高，处理空白,文本反排。单词间隔：word-spacing：取值（normal 或长度值）字符间隔：letter-spacing：取值文字修饰：text-decoration：取值（none,underline：下划线,overline：上划线,line-through：删除线,blink：文字闪烁）垂直对齐：vertical-align：排列取值（baseline:默认的垂直对齐方式，super 文字的上标，sub 文字的下标，top 垂直靠上，text-top 使元素和上级元素

7、的字体向上对齐，middle 垂直居中对齐，text-bottom 使元素和上级元素的字体向下对齐）文本转换：text-transform：转换值（none:使用原始值，capitalize:每个单词的第一个字母大写，uppercase:每个单词的所有字母大写，lowercase:每个单词的所有字母小写）水平对齐方式:text-align:(left,right,center,justify:两段对齐)文本缩进：text-indent：缩进值（长度或百分比）文本行高：line-height：行高值（长度，倍数，百分比）处理空白：white-space：值（normal 将连续的多个空格合并，n

8、owrap 强制在同一行内显示所有文本，直到文本结束或者遇到对象）文本反排：unicode-bidi:bidi-override,normal,embed,direction:ltr,rtl,inherit 4、边距与填充属性：边距设置元素周围的边界宽度，包括上、下、左、右4 个边界的距离。填充设置边框和元素内容之间的间距，包括上、下、左、右4 个。上、下、左、右边距：margin-top,margin-bottom,margin-left,margin-right,边距的复合属性：margin：长度值|百分比|auto 上、下、左、右填充:padding-top,padding-bottom

9、,padding-left,padding-right 填充的复合属性：padding：长度值|百分比5、边框属性：宽度，颜色，样式3 个属性。border-style:样式值border-top-style:样式值border-right-style:样式值border-bottom-style：样式值border-left-style：样式值样式值:none,dotted,dashed,solid,double,groove,ridge,inset,outset 默认值，点线，虚线，实线，双实线，边框具有立体感的沟槽，脊形，凹陷，凸起border-width:border-width bo

10、rder-top-width:border-right-width:border-bottom-width:border-left-width:border-color:border-top-color:border-right-color:border-bottom-color:border-left-color:复合属性：border:border-top:border-right:border-bottom:border-left:6、定位属性：定位属性-position:static|absolute|fixed|relative 元素位置-top:auto|长度值|百分比；right

11、:auto|长度值|百分比；bottom:auto|长度值|百分比；left:auto|长度值|百分比层叠顺序-z-index z-index:auto|数字;设置层的先后顺序和覆盖关系.默认为 1,表示最底层.浮动属性-float 设置文字在某个元素的周围.float:none|left|right 默认是 none,表示对象浮动;left 表示文字浮动在元素右边;right 表示文字浮动在元素左边;清 除 属 性-clear指 定 一 个 元 素 是 否 允 许 有 其 他 元 素 漂 浮 在 他 的 周 围.clear:none|left|right|both 默认是 none,表示两边

12、都可以对象浮动;left 表示不允许左边有浮动对象;right 表示不允许右边有浮动对象;both 表示不允许有浮动对象可视区域clip-限定只显示裁切出的区域.clip:auto|rect(数字)层的宽度和高度:width,height 可见性 visibility:inherit|visible|hidden 7、列表属性：列表符号：list-style-type:取值取值：disc 默认实心圆；circle 空心圆；square 实心方块；decimal 数字；lower-roman 小写罗马数字；upper-roman 大写罗马数字；lower-alpha 小写英文数字；upper-a

13、lpha 大写英文数字；none 不使用任何项目符号或编号。图像符号：list-style-image:none|url(图像地址)列表缩进：list-style-position:outside|inside 列表复合：list-style:扩展功能：8、光标属性：cursor:auto|形状取值|url（图像地址）形状取值：hand,crosshair,text,help,wait 等。9、滤镜属性：不透明度：filter:alpha(opacity=参数值)动感模糊：filter:blur(add=是否设置原始图,direction=模糊方向以45 度为单位 strenth=整数强度)对

14、颜色透明处理：filter:chroma(color=颜色)阴影效果：filter:dropshadow(color=,offx=,offy=,positive=0或 1)翻转：filter:fliph 水平 filter:fliph 垂直发光：filter:glow(color=,strength=1-255)灰度：filter:gray 反向：filter:invert X 光片效果：filter:xray 遮罩效果：filter:mask(color=)波形滤镜：filter:wave(add=true或false freq=波浪数目 lightstrength=0-100 phase=

15、起始位置 strength=强度)使用表单:name,method,action,enctype=target=表单对象：1.:name:type:text,password,radio,checkbox,submit,submit,reset,image,file;value;文本字段还有size,maxlength 属性。2.菜单和列表 3.文本域 4.id:是一个较为特殊的标记，它主要用于标识一个唯一的元素。可以为文字段，密码域，也可以其他元素，可以使图像，表格。使用表格表格标记：单元格内容 单元格内容 table 有属性：width height align border border

16、color cellspacing:边距cellpadding：填充bgcolor background tr 有属性：height bordercolor bgcolor background align valign td 有属性：width height bgcolor background colspan:水平跨度:跨的列数rowspan：垂直跨度：跨的行数align valign bordercolor bordercolorlight bordercolordark 表格的结构 细线表格的制作：方法 1： 方法 2：   读代码，看布局：&n

17、bsp;     使用框架结构1、设置框架和框架集:src name id scrolling noresize 框架集标记frameset:有属性：rows：水平分割窗口,取值为框架窗口的高度（像素，百分比或相对度量组成列表），有几个取值就分为几个窗口（即几个frame 标记）。1.水平分割窗口实例：cols：垂直分割窗口,取值为框架窗口的宽度，有几个取值就分为几个窗口。2.垂直分割窗口实例：3.嵌套分割窗口实例：frameborder：框架的边框，取值为0、1 或者yes、no。在框架集中对整个框架集有效。framespacing：框架的边

18、框宽度，默认为1。只能对框架集使用，对单个框架无用。bordercolor:框架的边框颜色。framespacing:框架的边框宽度.2、设置窗口属性frame 有属性：src:页面源文件name:页面名称noresize:禁止调整窗口的尺寸marginwidth,marginheight:边框与页面内容的水平和垂直边距。scrolling:控制滚动条显示与否:yes,no,auto;3、不支持框架标记：替换显示的内容 4、浮动框架 有属性：src:指定浮动框架页面的源文件地址。name:页面名称width,height:align:对齐方式left,right,middle,bottom f

19、rameborder：是否显示框架边框，取值为0、1 或者 yes、no。scrolling:控制滚动条显示与否:yes,no,auto;5、创建框架链接A:普通框架结构的链接框架窗口frame 需要设置名称name 属性，在链接对象目标targret 中，设置为name属性值即可。普通框架结构之间通过targret 互相链接起来。一个页面中会有一个框架窗口作为导航页面，其中添加了对另一个框架内容的链接设置，而这些链接则是通过来target 实现的。B:浮动框架的链接方法同普通框架。图像的标记：有属性：src alt width height border vspace hspace alig

20、n 使用图像及超链接一般链接：设置链接的对象 有属性：href：设置链接的目标，各种格式文件均可：htm,jpg,gif,doc,xls,rar,mp3，swf 等。target：目标的显示方式有4 个取值：blank,self,top,parent,默认是 self 方式。锚点链接：设置锚点的对象/此处命名锚记.设置链接的对象/此处设置链接热点链接：实例：E-mail:.空链接：空链接 空链接 脚本链接：click me 前进 后退 关闭 文字与段落标记 /标题级别 1-6，有对齐属性align。/字体标记，有3 个属性size color face。/加粗/斜体/上标标记 /下标标记 大字与小字 下划线 换行 段落 按照书写格式显示 水平线,有如下属性：width size noshade color align 其它标记：空格:  特殊符号:"<>© 列表：有序；：type:1,A,a,i,I start:数值无序；type:Disc,circle,square;