HTML常用标记9页.doc

如有侵权，请联系网站删除，仅供学习与交流HTML常用标记【精品文档】第 9 页HTML常用标记一、HTML文档结构html/网页解析开始head/网页头部定义开始title标题title/定义标题显示于浏览器的标题栏内/head/网页头部定义结束body/网页主体定义开始网页主体内容/body/网页主体定义结束/html/网页解析结束以下是具体标记说明。1.文件标题title./title2.文件更新-meta【1】10秒后自动更新一次meta http-equiv="refresh"content=10【2】10秒后自动连结到另一文件meta http-equiv="refresh"content="10；URL=欲连结文件之URL"二、文字标记预设的基准路径-base>base href="放置文件的主机之URL"版面1.标题文字h#./h#=16；h1为最大字，h6为最小字2.字体变化font./font【1】字体大小font size=#./font#=17；数字愈大字也愈大【2】指定字型font face="字型名称"./font【3】文字颜色font color=#rrggbb./font取值为十六进制数r：表红色（red）色码 g：表绿色（green）色码 b：表蓝色（blue）色码3.显示小字体small./small4.显示大字体big./big5.粗体字b./b6.斜体字i./i7.打字机字体tt./tt8.底线u./u9.删除线strike./strike10.下标字sub./sub11.上标字sup>./sup12.文字闪烁效果blink./blink13.换行br14.分段p15.文字的对齐方向p align="#"#号可为left：表向左对齐（预设值）center：表向中对齐right：表向右对齐P.S.p align="#"之後的文字都会以所设的对齐方式显示，直到出现另一个p align="#"改变其对齐方向，或遇到hr或h#标签时会自动设回预设的向左对齐。16.水平线（分隔线）hr 注：多个属性可以同时写。【1】分隔线的粗细hr size=点数【2】分隔线的宽度hr size=点数或百分比【3】分隔线对齐方向hr align="#"#号可为left：表向左对齐（预设值）center：表向中对齐right：表向右对齐【4】分隔线的颜色hr color=#rrggbb【5】实心分隔线hr noshade17.向中对齐center./center18.依原始样式显示（预定义格式）pre./pre19.body标签的属性【1】背景颜色-bgcolorbodybgcolor=#rrggbb【2】背景图案-backgroundbody background="图形文件名"【3】设定背景图案不会卷动-bgpropertiesbody bgproperties=fixed【4】文件内容文字的颜色-textbody text=#rrggbb【5】超连结文字颜色-linkbody link=#rrggbb【6】正被选取的超连结文字颜色-vlinkbody vlink=#rrggbb【7】已连结过的超连结文字颜色-alinkbody alink=#rrggbb20.注解!-.- （点表示注释部分）符号语法&"空白（空格）版权& copy注册商标& reg英镑& pound;21.特殊字元表示法（常见有以下几个）三、列表（项目符号与编号）1、有序号的清单olli项目1li项目2li项目3/ol【1】序号形式-typeoltype=#或litype=#号可为A：表以大写英文字母A、B、C、D.做为项目编号a：表以小写英文字母a、b、c、d.做为项目编号I：表以大写罗马数字做为项目编号i：表以小写罗马数字做为项目编号1：表以阿拉伯数字做为项目编号（预设值）【2】起始数字-startol start=欲开始计数的序数【3】指定编号-valueli value=欲指定的序数2、无序号的清单ulli项目1li项目2li项目3/ul【1】项目符号形式-typeul type=#或li type=#号可为disc：实心圆点（预设值）circle：空心圆点square：实心方块【2】原始清单-plainul plain【3】清单排列方式-warp1清单垂直排列ul warp=vert2清单水平排列ulwarp=horiz3、目录式列表dirli项目1li项目2li项目3/dirP.S.目录式清单每一个项目不能超过20个字元（即10个中文字）4、菜单式列表menuli项目1li项目2li项目3/menu5、定义式列表dldt项目1dd项目1说明dt项目2dd项目2说明dt项目3dd项目3说明/dl紧密排列-compactdlcompactP.S.如此可使dt的内容与dd的内容在同一行，仅以数格空白相隔而不换行，但若dt的文字超过一定的长度后，compact的作用就消失了！四、超链接1、连结至其他文件a href="/URL"说明文字或图片/a2、连结至文件内之某一处（外部连结）1起点a href="档名#名称"./a2终点a name="名称"3、frame框架的超链接【1】开启新的浏览器来显示连结文件-_blanka href="/URL" target=_blank【2】显示连结文件於目前的frame-_selfa href="/URL" target=_self【3】以上一层的分割视窗显示连结文件-_parenta href="/URL" target=_parent【4】以全视窗显示连结文件-_topa href="/URL" target=_top【5】以特定视窗显示连结文件-a href="/URL" target="特定视窗名称"五、表格相关属性1.定义表格table./table【1】设定边框的厚度-bordertable border=点数【2】设定格线的宽度-cellspacingtable cellspacing=点数【3】设定资料与格线的距离-cellpaddingtable cellpadding=点数【4】调整表格宽度-widthtable width=点数或百分比【5】调整表格高度-heighttable height=点数或百分比【6】设定表格背景色彩-bgcolortable bgcolor=#rrggbb【7】设定表格边框色彩-bordercolortable bordercolor=#rrggbb2.显示格线table border3.表格标题caption./caption表格标题位置-aligncaption align="#"#号可为top：表标题置于表格上方（预设值）bottom：表标题置于表格下方4.定义列tr5.定义栏位1td：靠左对齐2th：靠中对齐、粗体【1】水平位置-alignth align="#" #号可为left：向左对齐 center：向中对齐right：向右对齐【2】垂直位置-alignth align="#"#号可为 top：向上对齐middle：向中对齐 bottom：向下对齐【3】栏位宽度-width th width=点数或百分比【4】栏位垂直合并-rowspan th rowspan=欲合并栏位数【5】栏位横向合并-colspanth colspan=欲合并栏位数六、表单表单相关属性1、基本架构form action="处理资料用的CGI程式之URL" method="get或post"./form2、输入文件型表单form action="URL"method="post"inputinput./form【1】栏位类型-typeinput type=#号可为text：文字输入password：密码checkbox：多选钮radio：单选钮submit：接受按钮reset：重设按钮image：图形钮hidden：隐藏栏位【2】栏位名称-nameinput name="资料栏名"P.S.若type为submit、reset则name不必设定【3】文件上的预设值-valueinput value="预设之字串"【4】设定栏位的宽度-sizeinput size=字元数【5】限制最大输入字串的长度-maxlengthinput maxlength=字元数【6】预设checkbox或radio的初值-checkedinput type=checkboxcheckedinput type=radiochecked【7】指定图形的URL-srcinput type=image src="图档名"【8】图文对齐-aligninput type=image align="#"#号可为top：文字对齐图片之顶端middle：文字对齐图片之中间buttom：文字对齐图片之底部3、选择式表单form action="URL"method="post"selectoptionoption./select/formA、select的属性【1】栏位名称-nameselect name="资料栏位名"【2】设定显示的选项数-sizeselect size=个数【3】多重选项-multipleselect multipleB、option的属性【1】定义选项的传回值-valueoption value="传回值"【2】预先选取的选项-selectedoption selected4、多列输入文字区表单form action="URL"method="post"textarea./textarea/form【1】文字区的变数名称-nametextarea name=变数名称【2】设定文字输入区宽度-colstextarea cols=字元数【3】设定文字输入区高度-rowstextarea rows=列数【4】输入区设定预设字串textarea预设文字/textarea【5】自动换行与否-wraptextarea wrap=#号可为off：表输入的文字超过栏宽时，不会自动换行（预设值）virtual：表输入的文字在超过栏宽时会自动换行七、图片1.插入图片img src="图形文件名"2.设定图框-borderimg src="图形文件名"border=点数3.设定图形大小-width、heightimg src="图形文件名"width=宽度点数height=高度点数4.设定图形上下左右留空vspace、hspaceimg src="图形文件名"vspace=上下留空点数hspace=左右留空点数5.图形附注img src="图形文件名"alt="说明文字"6.预载图片img src="高解析度图形文件名" lowsrc="低解析度图形文件名"P.S.两个图的图形大小最好一致7.（地图链接）影像地图（ImageMap）img src="图形文件名"usemap="#图的名称"map name="图的名称"area shape=形状coords=区域座标列表href="连结点之URL"area shape=形状coords=区域座标列表href="连结点之URL"area shape=形状coords=区域座标列表href="连结点之URL"area shape=形状coords=区域座标列表href="连结点之URL"/map【1】定义形状shape=rect：矩形shape=circle：圆形shape=poly：多边形【2】定义区域coords a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标例：area shape=rectcoords=100,50,200,75 href="/URL"b.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度例：area shape=circlecoords=85,155,30 href="/URL"c.任意图形（多边形）：将图形之每一转折点座标依序填入例：area shape=polycoords=232,70,285,70,300,90,250,90,200,78 href="/URL"8、<bgsound src=MID音乐文件地址> 背景音乐设定八、框架属性1、分割视窗标签frameset./frameset【1】垂直（上下）分割-rowsframeset rows=#号可为点数：如欲分割为100,200,300三个视窗，则frameset rows=100,200,300；亦可以*号代表，如frameset rows=*,500,*百分比：如frameset rows=30%,70%，各项总和最好为100%【2】水平（左右）分割-colsframeset cols=点数或百分比2、指定视窗内容-frameframeset cols=30%,70%frameframe/frameset【1】指定视窗的文件名称-srcframe src=HTML档名【2】定义视窗的名称-nameframe name=视窗名称【3】设定文件与上下边框的距离-marginheightframe marginheight=点数【4】设定文件与左右边框的距离-marginwidthframe marginwidth=点数【5】设定分割视窗卷轴-scrollingframe scrolling=#号可为yes：固定出现卷轴no：不出现卷轴auto：自动判断文件大小需不需要卷轴（预设值）【6】锁住分割视窗的大小-noresizeframe noresize<noframe> </noframe> 不支持框架显示。九、滚动条<marquee>.</marquee>普通卷动 <marquee behavior=slide>.</marquee>滑动 <marquee behavior=scroll>.</marquee>预设卷动 <marquee behavior=alternate>.</marquee>来回卷动 <marquee direction=down>.</marquee>向下卷动 <marquee direction=up>.</marquee>向上卷动 <marquee direction=right></marquee>向右卷动 <marquee direction=left></marquee>向左卷动 <marquee loop=2>.</marquee>卷动次数 <marquee width=180>.</marquee>设定宽度 <marquee height=30>.</marquee>设定高度 <marquee bgcolor=FF0000>.</marquee>设定背景颜色 <marquee scrollamount=30>.</marquee>设定滚动速度 <marquee scrolldelay=300>.</marquee>设定卷动时间 <marquee onmouseover="this.stop()">.</marquee>鼠标经过上面时停止滚动 <marquee onmouseover="this.start()">.</marquee>鼠标离开时开始滚动 十、CSS（一）css结构 例：tdfont-size:10.5pt;color:#666666 css样式包含两个基础部分， 选择符<td>和声明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(厘米)=10mm(毫米) 1cm(厘米)=0.3937(英寸) 1pt(磅)=1/72in(英寸)=0.2478mm(毫米) 1pc(派)=1/6in(英寸)=我国新四号铅字的尺寸 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-decoration:none ?h除连接底线text-transform : capitalize 首字大写text-transform : uppercase 英文大写text-transform : lowercase 英文写text-align:right 文字*右对齐text-align:left 文字*左对齐text-align:center 文字置中对齐 这些是一些简单的文字效果，可以应用到css的页面中。（四）背景background-color:black 背景颜色 background-image : url(image/bg.gif) 背景图片background-attachment : fixed 固定背景background-repeat : repeat 重复排列-网页预设background-repeat : no-repeat 不重复排列background-repeat : repeat-x 在x轴重复排列background-repeat : repeat-y 在y轴重复排列background-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 四边框