HTML常用标记学习资料.doc

《HTML常用标记学习资料.doc》由会员分享，可在线阅读，更多相关《HTML常用标记学习资料.doc（18页珍藏版）》请在三一文库上搜索。

1、HTML 常 用 标 记HTML常用标记、HTML文档结构v html v headv title标题v title v /head v body网页主体内容v/body v /html 以下是具体标记说明。1. 文件标题v title v/title 2. 文件更新 - v meta【1】10 秒后自动更新一次v meta http-equiv=refreshcontent=10【2】10 秒后自动连结到另一文件v meta http-equiv=refreshcontent=10/ 网页解析开始/ 网页头部定义开始/ 定义标题显示于浏览器的标题栏内/ 网页头部定义结束/ 网页主体定义开始/

2、 网页主体定义结束/ 网页解析结束;URL欲连结文件之URL二、文字标记预设的基准路径 - v basev base href= 放置文件的主机之 URL 版面1. 标题文字v h# v/h# #=16; hl为最大字，h6为最小字2. 字体变化 v font v/font 【1】字体大小v font size=# v/font #=17；数字愈大字也愈大【2】指定字型v font face= 字型名称 v/font 【3】文字颜色v font color=#rrggbb v/font 取值为十六进制数r :表红色（red）色码g :表绿色（green）色码b :表蓝色（blue ）色码3.

3、显示小字体v small v/small 4. 显示大字体v big v/big 5. 粗体字v b v/b 6. 斜体字v i v /i 7. 打字机字体v tt v /tt 8. 底线v u v /u 9. 删除线v strike v/strike 10. 下标字v sub v/sub 11. 上标字 v sup v /sup 12. 文字闪烁效果v blink v/blink 13. 换行 v br 14. 分段v p15. 文字的对齐方向v p align=#号可为left :表向左对齐（预设值）center :表向中对齐 right :表向右对齐 P.S. vp align=# 之後

4、的文字都会以所设的对齐方式显示，直 到出现另一个v p align=#改变其对齐方向，或遇到v hr 或标签时会自动设回预设的向左对齐。16. 水平线（分隔线）v hr 注：多个属性可以同时写。【1】分隔线的粗细v hr size=点数【2】分隔线的宽度v hr size=点数或百分比【3】分隔线对齐方向v hr align=#号可为left :表向左对齐（预设值）center :表向中对齐right :表向右对齐【4】分隔线的颜色v hr color=#rrggbb 【5】实心分隔线v hr noshade 17. 向中对齐v center v /center 18. 依原始样式显示（预定义

5、格式）v pre v/pre 19. v body 标签的属性【1】 背景颜色-bgcolor v bodybgcolor=#rrggbb 【2】背景图案-background v body background=图形文件名【3】 设定背景图案不会卷动 -bgproperties v body bgproperties=fixed 【4】文件内容文字的颜色-text v body text=#rrggbb 【5】超连结文字颜色-link v body link=#rrggbb 【6】正被选取的超连结文字颜色-vli nk v body vli nk=#rrggbb 【7】已连结过的超连结文字颜

6、色-ali nk v body ali nk=#rrggbb 21.特下几符号语法v>& ampII&q uot空白（空格）& nbsp版权& copy注册商标& reg英镑& pound;20. 注解v !-（点表示注释部分）殊字元表示法（常见有以个）、列表（项目符号与编号）1 有序号的清单v ol v li 项目1vli 项目2vli 项目3v/ol 【1】序号形式-type v oltype=# 或 litype=# #号可为A：表以大写英文字母 A BC、D.做为项目编号a：表以小写英文字母a、b、c、d.做为项目编号I :表以大写罗马 数字做为项目编号 i ：表以小写罗马数字做为

7、项目编号1：表以阿拉伯数字做为项目编号（预设值）【2】起始数字 -start v ol start= 欲开始计数的序数【3】指定编号-value v li value =欲指定的序数2、无序号的清单v ul v li 项目1vli 项目2vli 项目3v/ul 【1】项目符号形式-type vul type=# 或 li type=# #号可为disc :实心圆点（预设 值）circle :空心圆点square :实心方块【2】原始清单 -plain v ul plain 【3】清单排列方式-warp1清单垂直排列v ul warp=vert 2清单水平排列v ulwarp=horiz 3、目

8、录式列表vdir v li 项目1 vli 项目2v li 项目3v/dir P.S.目录式清单每一个项目不能超 过 20个字元（即 10个中文字）4、 菜单式列表v menuv li 项目1vli 项目2vli 项目3v/menu5、 定义式列表v dl v dt 项目1 vdd项目1说明v dt 项目2vdd项目2说明v dt 项目3v dd项目3说明v /dl 紧密排列-compact vdlcompact P.S.如此可使v dt 的内容与v dd的内容在同一行，仅 以数格空白相隔而不换行，但若v dt 的文字超过一定的长度后，compact的作用就消失 了！ 四、超链接2、连结至文件

9、内之某一处（外部连结）1起点va href= 档名#名称 v/a2终点v a name=名称3、frame 框架的超链接【1】开启新的浏览器来显示连结文件 -_blank v a href=/URL target=_blank 【2】显示连结文件於目前的 frame-_self v a href=/URL target=_self 【3】以上一层的分割视窗显示连结文件-_parent v a href=/URL target=_parent【4】以全视窗显示连结文件 -_top v a href=/URL target=_top 【5】以特定视窗显示连结文件 - va href=/URL ta

10、rget= 特定视窗名称 五、表格相关属性1. 定义表格 v table v/table 【1】设定边框的厚度 -borderv table border= 点数【2】设定格线的宽度 -cellspacingv table cellspacing= 点数【3】设定资料与格线的距离 -cellpaddingv table cellpadding= 点数【4】调整表格宽度 -widthv table width= 点数或百分比【5】调整表格高度 -heightv table height= 点数或百分比6】设定表格背景色彩 -bgcolorv table bgcolor=#rrggbb 【7】设定

11、表格边框色彩 -bordercolorv table bordercolor=#rrggbb 2. 显示格线v table border 3. 表格标题v caption v /caption 表格标题位置 -alignv caption align=#号可为top :表标题置于表格上方（预设值） bottom :表标题置于表格下方4. 定义列v tr 5. 定义栏位1v td :靠左对齐2v th :靠中对齐、粗体【1】水平位置 -align v th align=#号可为 left :向左对齐 center :向中对齐 right :向右对齐【2】垂直位置 -align v th alig

12、n=# #号可为top :向上对齐 middle :向中对齐bottom :向下对齐【3】栏位宽度 -widthv th width= 点数或百分比【4】栏位垂直合并 -rowspanv th rowspan= 欲合并栏位数【5】栏位横向合并 -colspanv th colspa n= 欲合并栏位数六、表单表单相关属性1 基本架构v form action= 处理资料用的CGI程式之URL method=get或post v /form 2、 输入文件型表单v form actio n=URLmethod=postv in put v in put v /form 【1】栏位类型-type

13、vinput type=# #号可为text :文字输入password:密码 checkbox:多选钮radio :单选钮submit :接受按钮reset :重设按钮image:图形钮 hidden :隐藏栏位【2】栏位名称 -namev input name= 资料栏名 P.S. 若 type 为 submit 、 reset 则 name不必设定【3】文件上的预设值 - value vinput value =预设之字串 【4】设定栏位的宽度 -size v input size= 字元数【5】限制最大输入字串的长度 -maxlength v input maxlength= 字元数【

14、6】 预设 checkbox 或 radio 的初值-checked v in put type=checkboxcheckedv in puttype=radiochecked 【7】指定图形的 URL-srcvinput type=image src= 图档名【8】图文对齐 -align vinput type=image align=#号可为 top :文字对齐图片之顶端middle :文字对齐图片之中间buttom :文字对齐图片之底部3、 选择式表单v form action=URLmethod=postv select v option v option v/select v /f

15、orm A、v select 的属性【1】栏位名称-name v select name=资料栏位名【2】设定显示的选项数-size v select size= 个数【3】多重选项 -multiplev select multiple B、v option 的属性【1】定义选项的传回值 - value voption value =传回值【2】预先选取的选项 -selected v option selected 4、多列输入文字区表单v form action=URLmethod=post v textarea v /textarea v /form 【1】文字区的变数名称 -namev

16、textarea name= 变数名称【2】设定文字输入区宽度 -cols v textarea cols=字元数【3】设定文字输入区高度 -rows v textarea rows= 列数【4】输入区设定预设字串v textarea 预设文字v /textarea 【5】自动换行与否 -wrap v textarea wrap=#号可为 off ：表输入的文字超过栏宽时，不会自动换行（预设值） virtual ：表输入的文字在超过栏宽时会自动换行七、图片1. 插入图片v img src=图形文件名2. 设定图框 -border v img src= 图形文件名 border= 点数3. 设定

17、图形大小 -width 、 height v img src= 图形文件名 width= 宽度点数 height= 高度点 数4. 设定图形上下左右留空 -vspace、hspacev img src=图形文件名vspace=上下留空点数 hspace=&右留空点数5. 图形附注v img src=图形文件名alt=说明文字6. 预载图片vimg src=高解析度图形文件名lowsrc=低解析度图形文件名 P.S.两个图的图形大小最好一致7. （地图链接）影像地图（ ImageMap）vimg src=图形文件名usemap=#图的名称v map name=图的名称v area shape=形

18、状 coords= 区域座标列表 href= 连结点之 URLv area shape=形状 coords= 区域座标列表 href= 连结点之 URLv area shape=形状 coords= 区域座标列表 href= 连结点之 URLv area shape=形状coords=区域座标列表href=连结点之URLv /map【1】定义形状shape=rect ：矩形 shape=circle ：圆形 shape=poly ：多边形【2】定义区域coordsa. 矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标例：v area shape=rectcoords=10

19、0,50,200,75 href=/URL b. 圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度 例：v area shape=circlecoords=85,155,30 href=/URL c. 任意图形（多边形）：将图形之每一转折点座标依序填入例：v area shape=polycoords=232,70,285,70,300,90,250,90,200,78 href=/URL8、背景音乐设定 八、框架属性1、分割视窗标签v frameset v/frameset 【1 】垂直（上下）分割 -rowsvframeset rows=# #号可为点数：如欲分割为

20、100,200,300 三个视窗，则vframeset rows=100,200,300;亦可以 *号代表，如v frameset rows=*,500.百分比：如v frameset rows=30%,70% ，各项总和最好为100%【2】水平（左右）分割 -cols v frameset cols= 点数或百分比2、指定视窗内容 - vframevframeset cols=30%,70% v framev framev /frameset 【1 】指定视窗的文件名称 -src v frame src=HTML 档名 【2】定义视窗的名称 -namev frame name= 视窗名称【3

21、】设定文件与上下边框的距离 -marginheightv frame marginheight= 点数【4】设定文件与左右边框的距离 -marginwidthv frame marginwidth= 点数【5】设定分割视窗卷轴 -scrollingv frame scrolling=#号可为 yes:固定出现卷轴no：不出现卷轴auto :自动判断文件大小需不需要卷轴（预设值）【6】锁住分割视窗的大小 -noresize v frame noresize 不支持框架显示。九、滚动条.v/marquee普通卷动vmarquee behavior=slide.v/marquee 滑动vmarque

22、e behavior=scroll.v/marquee预设卷动vmarquee behavior=alter nate.v/marquee来回卷动 vmarquee direct ion=dow n.v/marquee向上卷动 vmarquee direct ion=rightv/marquee 右卷动vmarquee direct ion=ft v/marquee 左卷动vmarquee loop=2.S 定宽度vmarquee height=30.v/marquee 设定滚动速度vmarquee scrolldelay=300.v/marquee设定卷动时间vmarquee onm ous

23、eover=this.stop().v/marquee 鼠标经过上面时停止滚动vmarquee onm ouseover=this.start().v/marquee 鼠标离开时开始滚动十、CSS(一) CSS结构例：tdfont-size:10.5pt;color:#666666css样式包含两个基础部分，选择符 vtd和声明font-size:10.5pt;color:#666666声明也有两部分组成：属性 font-size,color和值 10.5pt,#666666选择符分为 6 种例：1 、元素选择符当页面上多个元素的样式相同时，可以将多个元素放在一起定义，中间以逗号分开td,p,

24、li,input,selectfont-size:12px;2、class(类)选择符3 、 id 选择符 与class选择附类似，只是把.换成#4、伪元素选择符首行伪元素（ first-line ）和首字符伪元素 （first-letter） 是用来实现首行大写和首行下沉效果的（二）引入样式表1、内嵌式样式表：格式： 2、导入式样式表html3外联式样式表（三）单位1 长度单位数值可以是整数，小数，正数，负数， 0，后加单位（负值不要轻易使用）换算关系：1in（英寸）=6pc（派）1in（英寸）=72pt （磅） 1in（英寸）=2.54（厘米）1cm（厘米）=10m m（毫米）1 cm （

25、厘米） =0.3937（英寸）1pt（磅）=1/72i n（英寸）=0.2478mm（毫米） 1pc（派）=1/6i n（英寸）=我国新四号铅字的尺寸2 百分比单位3 颜色单位4 url 单位div 属性color : #999999 文字颜色 font-family : 宋体 文字字型 font-size : 10pt 文字大小 font-style:itelic 文字斜体育 font-variant:small-caps 小字体 letter-spacing : 1pt 文字间距 line-height : 200% 设定行高 font-weight:bold 文字粗体 vertical-

26、align:sub 下标字 vertical-align:super 上标字 text-decoration:line-through 加？h 除线 text-decoration:overline 加顶线 text-decoration:underline 加底线 text-decoratio n:none ?h 除连接底线 text-transform : capitalize 首字大写text-tra nsform : uppercase英文大写 text-tra nsform : lowercase 英文写text-align:right 文字*右对齐text-align:left 文

27、字*左对齐text-align:center 文字置中对齐这些是一些简单的文字效果，可以应用到CSS的页面中。（四）背景background-color:black 背景颜色background-image : url（image/bg.gif） 背景图片backgro un d-attachme nt : fixed 固定背景background-repeat : repea重复排歹U -网页预设backgro un d-repeat : no-repea不 重复排歹 Ubackground-repeat : repeat-x在 x 轴重复排歹Ubackground-repeat : rep

28、eat-y在 y 轴重复排歹Ubackground-position : 90% 90%背景图片 x 与 y 轴的位置（五）链接A 所有超连接A:link 超连接文字格式A:visited 浏览过的连接文字格式A:active 按下连接的格式A:hover 鼠标移至连接（六）边框border-top : 1px solid black 上框 border-bottom : 1px solid #6699cc 下框 border-left : 1px solid #6699cc 左框 border-right : 1px solid #6699cc 右框 border: 1px solid #6699cc 四边框