HTML基本结构与标记_第1页
HTML基本结构与标记_第2页
HTML基本结构与标记_第3页
免费预览已结束，剩余13页可下载查看

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

1、目录1HTML基本结构12列表控制标记43表格64图像95超链接106表单127框架138多媒体159其他标记161HTML基本结构1HTML的基本结构<html>根控制标记<head>头控制标记<title>标题</title>标题标记</head>头控制标记(尾)<body>网页显示区域</body></html>根控制标记(尾).<html>-</html>根控制标记开头和结尾成对出现，双标签1. .<head>-</head>头控制标记<

2、title>很单纯的文件标题声明<meta>控制标记的动态文件转换声明<base>超链接网址基准参考点Javascript和VBScript程序stylesheet可用来设置排版来的声明<link>可引用外部文件，如CSS排版样本.<title>-</title>设置浏览器的视窗标题.<body></body>页面可见内容2HTML控制标记的格式.<标记名称>单一型，无设置值的。如：<br>.<标记名称属性=”属性值”>单一型，有设置值的。如：<hrwidth=&

3、quot;80%'>.<标记名称></标记名称>对称型，无设置值。如：<title>-</title>(4).<标记名称属性=”属性值”></标记名称对称型，有设置值。如:<bodybgcolor="red"></body><fontsize="7"></font>3最常用的控制标记(1).跳行<br>格式：<br>无属性设置(2).段落<p>属性名称align格式：<palign=排列

4、方式></p>属性值说明left彳主左靠(默认)(3).水平直线属性名称sizecenter往中靠right往右靠<hr>格式：<hr>属性值说明像素绝对设置，以数字表示，属性值越大，线越粗width百分比相对设置，以球示，属性值越大，线越粗像素绝对设置，长度不会应视窗的改变而改变noshade百分比相对设置，长度会随着视窗宽度而改变实体线(4).向中对齐<center>(被废弃的标签)格式:<center>-</center>(5).背景色与文字设置格式:<bodybgcolor=整体页面的边距,<bo

5、dyleftmargin=”背景色”text=”文字颜色”>行距”像素topmargin-像素>(6).标题文字设置格式:<h1></h1><h2>-</h2><h3>-</h3><h4>-</h4><h5></h5><h6>-</h6>属性名称属性值说明alignleft时center靠中right(7).特殊字符设置格式:<It；>gt;&amp;quot;(8).在HTML&注格式:<!->(9

6、).实体字符控制标记<b></b>粗<i></>斜<s>-</s>删<u></u>下戈U<tt>-</tt>电报<sub>-</sub>下标<sup>-</sup>上标（10）.语意字符控制1.<address>-</address>地址2.<big>-</big>大字3.<del>-</del>删除4.<ins>.</ins>修改5

7、.<samll>-</small>小字6.<strong>-</strong>加强语气（加粗）7.<em>.</em>加强语气（倾斜）（11）.<font>字体控制（被废弃的标签）格式：<font>-</font>属性名称属性值说明size0-7子体大小color央文或十K颜色face字体字体.格式化格式：<pre>-</pre>让书写的文字格式化！.引用文本格式：<blockquote>.</blockquote>属性名称属性值说明cit

8、eurl被引用的地址2列表控制标记1无序号条例式清单<ul>与<li>格式：<ul><li>-</li><li>-</li><li>-</li><li>-</li></ul>功能：<ul>无序条列清单的开始.</ul>表示结束.<li>-</li>示一个项目.<li>的属性说明实心圆(默认值)空心圆实心方块属性名称属性值typedisecirclesquare2有序号条例式清单<ol&g

9、t;与<li>格式：<ol><li>-</li><li>-</li><li>-</li><li></li></ol>功能：<ol>有序条列清单的开始.</ol>表示结束.<ol>的属性属性名称属性值说明type1母以1,2,3,4来母a以a,b,c,d来表示A表示以A,B,C,D来表示i母以i,ii,iii来表示I母以I,II,III来表示3无序列表和有序列表的结合应用格式:<ul><li><ol&

10、gt;<li>-</li><li>-</li><li>-</li></ol></li><li><ol><li>-</li><li>-</l><li>-</li></ol></li></ul>4叙述式清单（定义列表）格式：<dl><dt>-</dt><dd></dd><dd></dd>&l

11、t;dd></dd><dt>-</dt><dd></dd><dd></dd><dd></dd></dl>功能:<dl>叙述清单的开始<dt>表示一个项目<dd>表示一个项目下的更详细的内容3表格在网页中表格是一种经常使用到得设计结构，就像表格的内容中可以包含任何的数据，如文字、图像、表单、超链接、表格等等，所有在HTML中可以使用的数据，都可以被设置在表格中，所以有关表格设置的标记与属性页特别多。1表格的基本格式格式：<tabl

12、e><tr><th>-</th><th>-</th><th>-</th></tr><tr><td>-</td><td>-</td><td>-</td></tr></table>功能：<table></table用来声明表格开始与结束<tr>-</tr湘来设置表格的行.<th>仙用来设置标题栏位.<td>加用来设置数据栏位.2&l

13、t;table>标签下的属性菖性名称属性值说明border像素设置表格的边线cellspacing像素绝对设置，存储格框线宽度百分比相对设置，存储格框线宽度cellpadding像素绝对设置，数据与框线的距离百分比相对设置，数据与框线的距离width像素绝对设置，像素表示表格见度百分比相对设置，百分比表表格宽度height像素绝对设置，像素表示表格见度百分比绝对设置，百分比表表格宽度alignleft表格往左靠（默认）center表格往中靠right表格网右靠bgcolor英文/十八表格的目早颜色backgroundURL表格的背景图片summary字符串用来描述表格数据说明第6页共17

14、页HTML标记bordercolorbordercolorlightbordercolordark英文/十K同上同上边框的颜色边框的亮色边框的暗色3<table>标签下的边框设置属性名称属性值说明framevoid不要显现表格的边线above只要显现出表格的上边线该属性必须在borderbelow只显现出表格的下边线的属性值/、为0的状hsides只显示表格的上下边线态下！vsides只显现表格的左右边线lhs只显现表格的左边线rhs只显现表格的右边线border/box会显现出表格的所有边线rulesrows只显示出横行的格框线cols只显示出直行的格框线all显示全部格框线gr

15、oups表示列组合水平部分none不显示任何格框线4<tr><th><td>标签下的常用属性属性名称属性值说明width像素绝对设置，以像素值设置宽百分比相对设置，以百分比设置宽height像素绝对设置，以像素值设置高百分比相对设置，以百分比设置宽bgcolor英文/十六数据栏的颜色设置align（水平方向）left数据靠左center数据靠中right数据靠右valign（垂直方向）top数据靠上middle数据靠中bottom数据靠下nowrap无在单元格中换行5拆分与合并单元格属性名称属性值说明colspan数字向两边扩展栏位rowspan数字向下扩展

16、栏位6表格的结构化、直列化、标题.结构化格式:<table><thead>-</thead>-表头区<tbody>-</tbody>-表体区<tfoot>-</tfoot>-表尾区</table>(2).直列化格式：<colgroup>-.</dgroup>属性名称属性值说明alignleftcenterrightvaligntop靠上middlebottom靠下span数字直列数目width像素/百分比宽度个别直列设置格式:<col>功能完全和<colgr

17、oup>样.第2章.表格的标题：<table><caption>-.</caption></table><caption>下的属性值有：说明标题在表格上方标题在表格下方属性名称属性值aligntopbottom!M3ft*UKe父5$，健凝5种用r是皆WIt母55AB希招学彰事#,E童也盘兄，脚或蒙if切坷峪芯商费SS9停T%弟岫畏t>riHH22一%W1'Luckyntffifc3仁7嵌套表格的应用：看实例.4图像1背景图案的设置格式：<bodybackground="URt>2将图片插入到

18、网页中去格式:<imgsrc="URL">功能:将图片插入到网页中去，单一标签<img>下的属性属性名称src属性值URL说明图片的路径图片的注解属性名称属性值说明alt字符串给图片做注解图象大小的设置属性名称属性值说明width像素绝对设置，宽百分比相对设置，宽height像素绝对设置，高百分比相对设置，高图象边框的设置属性名称属性值说明border数字图象边框文字图象的排列属性名称属性值alignleftrighttopmiddlebottom空隙的设置属性名称属性值vspace像素hspace像素说明图象靠左，文字靠右图片靠右，文字靠左文字往上

19、靠文字靠中文字靠下说明垂直上下两端与物件的距离水平左右两段与物件的距离3用图像作为超链接格式:<ahref="URL"><imgsrc="URL"></a>注意点：边框的问题.4地图索引格式:<mapname="图象名称"id=”图象名称”><areashape="选取区块的形状"coords="坐标"href="URL"alt="文字说明"></map><imgsrc=&quo

20、t;URL"USEMAP="#图象名称"><map>声明整张图使用地图链接方式进行连接.name,id指此图的名称.<area>表示我们所要链接其中一点的区快shape表示我们所选择的形状，如:rect矩形circle圆poly多边形coords表示地图的坐标位置！5切片索引使用Firework来进行！用表格进行定位！6为网站添加图标<linkrel="shortcuticon"href="favicon.ico"type="image/x-icon">5超链接超

21、链接也叫URL中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据URL的地址找到所需的资源。1超链接的基本格式格式：scheme:/host:post/path/filenamescheme指的是http,ftp,file,mailto,news,gopher,telnet七种host指的是IP地址或计算机名称post指的是服务器端口path指的是文件路径filename指的是文件名<ahref=scheme:/host:post/path/filename>-</a>2超链接的种类一般常用的分为四种：1. httplogo</a>声明<ahre

22、f=1. 3相对链接和绝对链接index.htmpage/index.htmpage/top/index.htm./index.htm././index.htm./page/index.htm4书签的链接<a>下的属性属性名称属性值说明name字符串设置超链接的标记基本格式：瞄点<aname='音乐”></a>链接点<ahref="></a>链接到别的网页的书签项目:基本格式:瞄点<aname='音乐"></a>链接点<ahref=index.htmW">

23、;.</a>5超链接事件LINK颜色的设置基本格式：<bodylink=颜色"alink=颜色"vlink=颜色">link超链接尚被选中的文字alink超链接点选但未被放开的颜色vlink超链接已被点选过的颜色6表单表单是提供让读者在网页上输入，勾选和选取数据，以便提交给服务器数据库的工具。1表单的功能结构：主标记结构:<from>-</from>属性值说明name字符串给这个表单起个名字methodget/post表单的传输方式actionurl传输目标2文本栏、密码栏、隐藏栏文本栏：<inputtype=

24、textname栏位名称"value="栏位内定值"size="栏位显示宽度"maxlength=栏位数据输入最大长度"readonly="readonly">密码栏：<inputtype="password"name栏位名称"value="栏位内定值"size='栏位显示宽度"maxlength=栏位数据输入最大长度"readonly="readonly">隐藏性栏位：<inputtype=&

25、quot;hidden"name位名称"value=栏位值">3复选栏、单选栏多重勾选栏位：checked="checked”<inputtype=disabled=":"checkbox"disabled"_»name=>栏位名称"value=”内定值”单选栏位:<inputchecked="checked"type="radio"name=disabled="disabled"栏位>名称”value=&

26、quot;内定值”4窗体栏位、区块栏位窗体选项栏位设置：selectname=栏位名称"size瑚字"><optionvalue=选项值"selected="selected"><optionvalue=选项值"><optionvalue=选项值"></select>/分组<optgrouplabel="分组名称"></optgroup>/多选multiple文字区块的设置:<textareacols="设置长度

27、"rows=设置宽度"></textarea>5按钮、图像按钮按钮设置：<inputtype="submit"value询T中显示的文字"><inputtype="reset”0&申显尔的文字”>按钮图像:<buttonname="栏位名称"type=图象形态"><imgsrc="URL'></button>图像按钮:<inputtype="image"src="ur

28、l"alt="文本">6允许上传文件上传栏位:<inputtype="file"name="file">7表单加上外框和标题外边框:<fieldset>.</fieldset>7框架7框架题:<legend>.</legend>浏览器视窗本身就是一个框架，网页就是显示在该单一的框架内，本章将介绍另一种网页呈现的方式,那就是可将原先单一的框架分割成多个框架，且每个框架中可以分别显示出指定的网页，当然这种框架仍然是结构于单一的视窗中。1多窗框的基本结构格式：<

29、;frameset><frame><frame><frame></frameset>功能说明:<frameset>用来设置多窗框结构的声明<frameset>下的属性：属性名称属性值说明cols像素设置直排的多窗框坏境百分比同上rows像素设置横排的多窗框环境百分比同上border像素边框的宽度framespacing像素贝面与贝面的边距属性格式：<framesetcols=”120,80,120”><framesetcols=”20%,40%,20%><framesetcols=”40

30、%,*,*”><framesetrows=”120,80,120”><framesetrows="20%,40%,20%”><framesetrows=”20%,*,*”><frame>下的属性：属性名称属性值说明srcURL链接的贝面noresizetrue允许浏览器自行改变框架大小false不允许scrollingyes/、管网页内容的大小，都出现滚动条no/、管网页内容的大小，都/、现滚动条marginheightauto浏览器自动判断，是否需要滚动条像素设置垂直方向，囱体内谷与边界的距离marginwidth像素设置水平方

31、向，窗体内容与边界的距离frameborder01不出现框体边/出现窗体边线属性格式：<framesrc="URL'><framenoresize>2嵌套多窗体设置：格式：<framesetrows="20%,80%”><framesrc="URL"><framesetcols="20%,80%"><framesrc="URL"><framesrc="URL">3多框架与超链接框架式网站的好处就是在同一张

32、页面可以显示多个页面，而且可以跟方便的进行链接。相关属性说明：<frame>的命名属性：格式：<framename=窗体名称"><a>超链接<ahref="URL'target名称">多窗体链接的属性:属性名称target属性值_blank说明打K个新建的页面4悬浮窗体的设置格式:<iframe>-</iframe>功能:设置悬浮窗框属性名称属性值说明height像素/%绝对/相对高度width像素/%绝对/相对宽度其余属性除了noresize外，其他都和frameset一样.8多媒体

33、使用Web如此流行的原因之一是可以再网页上加入图像、声音、动画和电影文件。虽然过去对这些文件大小的限制局限了它们的作用，但是新技术（比如流技术及宽带）已经使多媒体网页成为了可能。1FLASH动画的插入使用<embed>.</embed>标记插入FLASH动画属性值说明srcurlflash路径width像素/百分比flash宽度height像素/百分比flash高度wmodewindow使flash自身的矩形窗口来播放opaque使flash隐藏页面上位于它后面transparent使flash某一部分透明使用<object>.</object>

34、标记插入flash动画第15页共17页HTML标记属性值说明typeapplication/x-shockwave-flashflash类型dataurlflash路径width像素/百分比flash宽度height像素/百分比flash高度注意：必须再使用子标签<param>完成flash插入属性值说明name属性flash属性value值flash值3MP3音频及WMV%频的插入使用<embed>.</embed>标记插入FLASH动画属性值说明autostarttrue/false自动/非自动播放loop数字音乐循环的次数它的前身是<bgsoundsrc="URLloop云数”>使用<object>.</object>标记插入MP3音乐属性值说明namesrc（路径）音乐路径autoplay(true/false)是否自动播放9其他标记1自动展示网贝内容：格式：<metahttp-equiv="

人人文库> 全部分类> 行业资料 > 信息产业

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论