HTML常用标记9页.doc

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

1、如有侵权，请联系网站删除，仅供学习与交流HTML常用标记【精品文档】第 9 页HTML常用标记一、HTML文档结构html/网页解析开始head/网页头部定义开始title标题title/定义标题显示于浏览器的标题栏内/head/网页头部定义结束body/网页主体定义开始网页主体内容/body/网页主体定义结束/html/网页解析结束以下是具体标记说明。1.文件标题title./title2.文件更新-meta【1】10秒后自动更新一次meta http-equiv=refreshcontent=10【2】10秒后自动连结到另一文件meta http-equiv=refreshcontent=

2、10；URL=欲连结文件之URL二、文字标记预设的基准路径-basebase 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.

3、打字机字体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

4、=点数或百分比【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】文件内容文字

5、的颜色-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、

6、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清单水

7、平排列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

8、 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】设定

9、边框的厚度-bordertable border=点数【2】设定格线的宽度-cellspacingtable cellspacing=点数【3】设定资料与格线的距离-cellpaddingtable cellpadding=点数【4】调整表格宽度-widthtable width=点数或百分比【5】调整表格高度-heighttable height=点数或百分比【6】设定表格背景色彩-bgcolortable bgcolor=#rrggbb【7】设定表格边框色彩-bordercolortable bordercolor=#rrggbb2.显示格线table border3.表格标题captio

10、n./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】栏位横向合并-col

11、spanth colspan=欲合并栏位数六、表单表单相关属性1、基本架构form action=处理资料用的CGI程式之URL method=get或post./form2、输入文件型表单form action=URLmethod=postinputinput./form【1】栏位类型-typeinput type=#号可为text：文字输入password：密码checkbox：多选钮radio：单选钮submit：接受按钮reset：重设按钮image：图形钮hidden：隐藏栏位【2】栏位名称-nameinput name=资料栏名P.S.若type为submit、reset则name

12、不必设定【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：文字对齐图片之中间butt

13、om：文字对齐图片之底部3、选择式表单form action=URLmethod=postselectoptionoption./select/formA、select的属性【1】栏位名称-nameselect name=资料栏位名【2】设定显示的选项数-sizeselect size=个数【3】多重选项-multipleselect multipleB、option的属性【1】定义选项的传回值-valueoption value=传回值【2】预先选取的选项-selectedoption selected4、多列输入文字区表单form action=URLmethod=posttextarea

14、./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.设定图形大小-

15、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=连结点之URLarea shap

16、e=形状coords=区域座标列表href=连结点之URLarea shape=形状coords=区域座标列表href=连结点之URLarea shape=形状coords=区域座标列表href=连结点之URL/map【1】定义形状shape=rect：矩形shape=circle：圆形shape=poly：多边形【2】定义区域coords a.矩形：必须使用四个数字，前两个数字为左上角座标，后两个数字为右下角座标例：area shape=rectcoords=100,50,200,75 href=/URLb.圆形：必须使用三个数字，前两个数字为圆心的座标，最后一个数字为半径长度例：area

17、shape=circlecoords=85,155,30 href=/URLc.任意图形（多边形）：将图形之每一转折点座标依序填入例：area shape=polycoords=232,70,285,70,300,90,250,90,200,78 href=/URL8、 背景音乐设定八、框架属性1、分割视窗标签frameset./frameset【1】垂直（上下）分割-rowsframeset rows=#号可为点数：如欲分割为100,200,300三个视窗，则frameset rows=100,200,300；亦可以*号代表，如frameset rows=*,500,*百分比：如frames

18、et 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】设定分割视窗卷轴-scrollingfram

19、e scrolling=#号可为yes：固定出现卷轴no：不出现卷轴auto：自动判断文件大小需不需要卷轴（预设值）【6】锁住分割视窗的大小-noresizeframe noresize 不支持框架显示。九、滚动条.普通卷动 .滑动 .预设卷动 .来回卷动 .向下卷动 .向上卷动 向右卷动 向左卷动 .卷动次数 .设定宽度 .设定高度 .设定背景颜色 .设定滚动速度 .设定卷动时间 .鼠标经过上面时停止滚动 .鼠标离开时开始滚动 十、CSS（一）css结构 例：tdfont-size:10.5pt;color:#666666 css样式包含两个基础部分， 选择符和声明font-size:10.

20、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、内嵌式样式表： 格式： 2、导入式样式表 html impo

21、rt url(css/home.css); 3外联式样式表 （三）单位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-

22、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除连接底

23、线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 固定背景ba

24、ckground-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 四边框