HTML常用标记学习资料.doc

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="refresh"content=10【2】10 秒后自动连结到另一文件v meta http-equiv="refresh"content="10/ 网页解析开始/ 网页头部定义开始/ 定义标题显示于浏览器的标题栏内/ 网页头部定义结束/ 网页主体定义开始/ 网页主体定义结束/ 网页解析结束>URL欲连结文件之URL>二、文字标记预设的基准路径 - v base>v 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. 显示小字体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 p>15. 文字的对齐方向v p align="#">#号可为left :表向左对齐（预设值）center :表向中对齐 right :表向右对齐 P.S. vp align="#" >之後的文字都会以所设的对齐方式显示，直 到出现另一个v p align="#">改变其对齐方向，或遇到v hr >或< h#>标签时会自动设回预设的向左对齐。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. 依原始样式显示（预定义格式）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】已连结过的超连结文字颜色-ali nk v body ali nk=#rrggbb >21.特下几符号语法v>&gt&& 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 ：表以小写罗马数字做为项目编号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、目录式列表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、连结至文件内之某一处（外部连结）1起点va href=" 档名#名称" > v/a>2终点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" target=" 特定视窗名称 ">五、表格相关属性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】设定表格边框色彩 -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 align="#"> #号可为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="URL"method="post">v in put >v in put >v /form >【1】栏位类型-type 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= 字元数>【6】 预设 checkbox 或 radio 的初值-checked v in put type=checkboxchecked>v in puttype=radiochecked >【7】指定图形的 URL-srcvinput type=image src=" 图档名">【8】图文对齐 -align vinput type=image align="#">#号可为 top :文字对齐图片之顶端middle :文字对齐图片之中间buttom :文字对齐图片之底部3、 选择式表单v form action="URL"method="post">v select >v option >v option> v/select >v /form >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="URL"method="post" >v textarea> v /textarea >v /form >【1】文字区的变数名称 -namev 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. 设定图形大小 -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=形状 coords= 区域座标列表 href=" 连结点之 URL">v area shape=形状 coords= 区域座标列表 href=" 连结点之 URL">v area shape=形状 coords= 区域座标列表 href=" 连结点之 URL">v area shape=形状coords=区域座标列表href="连结点之URL">v /map>【1】定义形状shape=rect ：矩形 shape=circle ：圆形 shape=poly ：多边形【2】定义区域coordsa. 矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标例：v area shape=rectcoords=100,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="/URL">8、<bgsound src=MID 音乐文件地址 >背景音乐设定 八、框架属性1、分割视窗标签v frameset > v/frameset >【1 】垂直（上下）分割 -rowsvframeset rows=# >#号可为点数：如欲分割为 100,200,300 三个视窗，则vframeset rows=100,200,300>亦可以 *号代表，如v frameset rows=*,500.百分比：如v frameset rows=30%,70% >，各项总和最好为100%【2】水平（左右）分割 -cols v frameset cols= 点数或百分比>2、指定视窗内容 - vframe>vframeset cols=30%,70% >v frame>v frame>v /frameset >【1 】指定视窗的文件名称 -src v frame src=HTML 档名> 【2】定义视窗的名称 -namev frame name= 视窗名称>【3】设定文件与上下边框的距离 -marginheightv frame marginheight= 点数>【4】设定文件与左右边框的距离 -marginwidthv frame marginwidth= 点数>【5】设定分割视窗卷轴 -scrollingv frame scrolling=#>#号可为 yes:固定出现卷轴no：不出现卷轴auto :自动判断文件大小需不需要卷轴（预设值）【6】锁住分割视窗的大小 -noresize v frame noresize > <noframe> </noframe> 不支持框架显示。九、滚动条<marquee>.v/marquee普通卷动vmarquee behavior=slide>.v/marquee 滑动vmarquee behavior=scroll>.v/marquee预设卷动vmarquee behavior=alter nate>.v/marquee来回卷动 vmarquee direct ion=dow n>.</marquee 下卷动vmarquee direct ion=up>.v/marquee向上卷动 vmarquee direct ion=right>v/marquee> 右卷动vmarquee direct ion='ft '>v/marquee> 左卷动vmarquee loop=2>.</marquee卷动次数vmarquee width=180>.</marquee>S 定宽度vmarquee height=30>.</marquee设定高度vmarquee bgcolor=FF0000>.</marquee 设定背景颜色vmarquee scrollam oun t=30>.v/marquee 设定滚动速度vmarquee scrolldelay=300>.v/marquee设定卷动时间vmarquee onm ouseover="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,li,input,selectfont-size:12px;2、class(类)选择符3 、 id 选择符 与class选择附类似，只是把'.'换成'#'4、伪元素选择符首行伪元素（ first-line ）和首字符伪元素 （first-letter） 是用来实现首行大写和首行下沉效果的（二）引入样式表1、内嵌式样式表：格式： <p style="font-size:10.5pt">2、导入式样式表html><head><style type="text/css"><!-import url（css/home.css）;-></style><body></body></html>3外联式样式表<link rel="stylesheet" href="/css/default.css" >（三）单位1 长度单位数值可以是整数，小数，正数，负数， 0，后加单位（负值不要轻易使用）换算关系：1in（英寸）=6pc（派）1in（英寸）=72pt （磅） 1in（英寸）=2.54（厘米）1cm（厘米）=10m m（毫米）1 cm （厘米） =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-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 文字*左对齐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 : repeat-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 四边框