HTML基本结构与标记_第1页
HTML基本结构与标记_第2页
HTML基本结构与标记_第3页
HTML基本结构与标记_第4页
HTML基本结构与标记_第5页
已阅读5页，还剩12页未读， 继续免费阅读

下载本文档

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

文档简介

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

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

3、lt;标记名称 属性=”属性值”>单一型，有设置值的。如：<hr width=”80%”>(3).<标记名称></标记名称>对称型，无设置值。如：<title></title>(4).<标记名称 属性=”属性值”></标记名称>对称型，有设置值。如：<body bgcolor=”red”></body><font size=”7”></font>3 最常用的控制标记(1).跳行 <br>格式：<br>无属性设置(2).段落 <p

4、>格式：<p align=”排列方式”></p>属性名称属性值说明 align left往左靠（默认） center往中靠 right 往右靠(3).水平直线 <hr>格式：<hr>属性名称属性值说明 size 像素绝对设置，以数字表示，属性值越大，线越粗百分比相对设置，以%表示，属性值越大，线越粗 width 像素绝对设置，长度不会应视窗的改变而改变百分比相对设置，长度会随着视窗宽度而改变noshade 实体线(4).向中对齐 <center> (被废弃的标签)格式：<center></center>(

5、5).背景色与文字设置格式：<body bgcolor=”背景色” text=”文字颜色”> 整体页面的边距，行距 <body leftmargin=”像素” topmargin=”像素”>(6).标题文字设置格式：<h1></h1> <h2></h2> <h3></h3> <h4></h4> <h5></h5> <h6></h6>属性名称属性值说明 align left靠左 center靠中 right靠右(7).特殊字符设置

6、格式：< lt;> gt;& amp;“ quot;(8).在HTML备注格式：<!->(9).实体字符控制标记1.<b></b>粗2.<i></i>斜3.<s></s>删4.<u></u>下划5.<tt></tt>电报6.<sub></sub>下标7.<sup></sup>上标(10).语意字符控制1.<address></address> 地址2.<big>

7、</big>大字3.<del></del>删除4.<ins>.</ins> 修改 5.<samll></small>小字6. <strong></strong>加强语气(加粗)7. <em>.</em> 加强语气(倾斜)(11).<font>字体控制 (被废弃的标签)格式：<font></font>属性名称属性值说明 size 0-7字体大小 color英文或十六颜色 face 字体字体(12).格式化格式：<pre>

8、;</pre>让书写的文字格式化！(13) .引用文本格式：<blockquote>.</blockquote>属性名称属性值说明 cite url 被引用的地址2 列表控制标记1 无序号条例式清单<ul>与<li>格式: <ul><li></li><li></li><li></li><li></li></ul>功能: <ul>无序条列清单的开始. </ul>表示结束. <li>&

9、lt;/li>表示一个项目. <li>的属性属性名称属性值说明 type dise 实心圆(默认值) circle空心圆 square 实心方块2 有序号条例式清单<ol>与<li>格式:<ol><li></li><li></li><li></li><li></li></ol>功能: <ol>有序条列清单的开始. </ol>表示结束. <li></li>表示一个项目.<ol>

10、的属性属性名称属性值说明 type 1 表示以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><li></li><li></li><li></li></ol></li><li> .<ol><li></li><li></li>&

11、lt;li></li></ol></li> </ul>4 叙述式清单(定义列表)格式:<dl><dt></dt><dd></dd><dd></dd><dd></dd><dt></dt><dd></dd><dd></dd><dd></dd></dl>功能: <dl>叙述清单的开始 <dt>表示一个项目 &l

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

13、d> </td></tr></table>功能: <table></table>用来声明表格开始与结束. <tr></tr>用来设置表格的行. <th></th>用来设置标题栏位. <td></td>用来设置数据栏位.2 <table>标签下的属性属性名称属性值说明 border 像素 设置表格的边线 cellspacing 像素 绝对设置,存储格框线宽度 百分比 相对设置,存储格框线宽度 cellpadding 像素 绝对设置,数据与框线的距离

14、百分比 相对设置,数据与框线的距离 width 像素 绝对设置,像素表示表格宽度百分比 相对设置,百分比表表格宽度 height 像素 绝对设置,像素表示表格宽度百分比 绝对设置,百分比表表格宽度 align left 表格往左靠(默认)center 表格往中靠right 表格网右靠 bgcolor英文/十六 表格的背景颜色 background URL 表格的背景图片 summary字符串 用来描述表格数据说明 bordercolor英文/十六 边框的颜色 bordercolorlight同上 边框的亮色 bordercolordark 同上 边框的暗色3 <table>标签下的

15、边框设置 属性名称属性值说明 frame void不要显现表格的边线该属性必须在border的属性值不为0的状态下! above只要显现出表格的上边线 below只显现出表格的下边线 hsides只显示表格的上下边线 vsides只显现表格的左右边线 lhs只显现表格的左边线 rhs只显现表格的右边线 border/box 会显现出表格的所有边线 rules rows 只显示出横行的格框线 cols只显示出直行的格框线 all显示全部格框线 groups 表示列组合水平部分 none不显示任何格框线4 <tr><th><td>标签下的常用属性属性名称属性值说

16、明 width像素绝对设置,以像素值设置宽百分比相对设置,以百分比设置宽 height像素绝对设置,以像素值设置高百分比相对设置,以百分比设置宽 bgcolor英文/十六数据栏的颜色设置 align(水平方向)left数据靠左center数据靠中right 数据靠右 valign(垂直方向) top数据靠上middle数据靠中bottom数据靠下 nowrap无在单元格中换行5 拆分与合并单元格属性名称属性值说明 colspan 数字向两边扩展栏位 rowspan 数字向下扩展栏位6 表格的结构化、直列化、标题(1).结构化格式：<table><thead></t

17、head> -表头区<tbody></tbody> -表体区<tfoot></tfoot> -表尾区</table>(2).直列化格式：<colgroup>.</colgroup>属性名称属性值说明 alignleft 靠左 center靠中right 靠右 valigntop靠上middle靠中bottom靠下 span数字直列数目 width像素/百分比宽度个别直列设置格式:<col>功能完全和<colgroup>一样.第2章 .表格的标题：<table><c

18、aption>.</caption></table><caption>下的属性值有:属性名称属性值说明 align top标题在表格上方 bottom 标题在表格下方7 嵌套表格的应用: 看实例.4 图像1 背景图案的设置格式：<body background=”URL”>2 将图片插入到网页中去格式:<img src="URL">功能:将图片插入到网页中去,单一标签<img>下的属性属性名称属性值说明 src URL图片的路径图片的注解属性名称属性值说明 alt 字符串 给图片做注解图象大小的设

19、置属性名称属性值说明 width 像素绝对设置,宽百分比相对设置,宽 height 像素绝对设置,高百分比相对设置,高图象边框的设置属性名称属性值说明 border 数字图象边框文字图象的排列属性名称属性值说明 align left图象靠左,文字靠右 right 图片靠右,文字靠左 top 文字往上靠 middle 文字靠中 bottom 文字靠下空隙的设置属性名称属性值说明 vspace 像素垂直上下两端与物件的距离 hspace 像素水平左右两段与物件的距离3 用图像作为超链接格式:<a href="URL"><img src="URL&qu

20、ot;></a>注意点:边框的问题.4 地图索引格式:<map name="图象名称" id="图象名称"> <area shape="选取区块的形状" coords="坐标" href="URL" alt="文字说明"> </map> <img src="URL" USEMAP="#图象名称"> <map>声明整张图使用地图链接方式进行连接. name,id

21、指此图的名称. <area>表示我们所要链接其中一点的区快 shape表示我们所选择的形状,如:rect矩形 circle圆 poly多边形 coords 表示地图的坐标位置!5 切片索引使用Firework来进行!用表格进行定位!6 为网站添加图标<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">5 超链接超链接也叫URL中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据URL的地址找到所需的资源。1 超链接的基本格式格式:

22、scheme:/host:post/path/filenamescheme指的是http,ftp,file,mailto,news,gopher,telnet七种host指的是IP地址或计算机名称post指的是服务器端口path指的是文件路径filename指的是文件名<a href=scheme:/host:post/path/filename ></a>2 超链接的种类一般常用的分为四种:1. http声明 <a href=2. file声明<a href=file:/e/images/pic.jpg>图片</a>3. ftp声明 &l

23、t;a href=1/>进入</a>4.mailto<a href=mailto:bnbbs>E-MAIL</a>3 相对链接和绝对链接1. index.htm2. page/index.htm3. page/top/index.htm4. ./index.htm5. ././index.htm6. ./page/index.htm4 书签的链接<a>下的属性属性名称属性值说明 name字符串设置超链接的标记基本格式： 瞄点<a name=”音乐”></a> 链接点<a href

24、=”#音乐”></a>链接到别的网页的书签项目：基本格式： 瞄点<a name=”音乐”></a> 链接点<a href=”index.htm#音乐”></a>5 超链接事件LINK 颜色的设置基本格式：<body link=”颜色” alink=”颜色” vlink=”颜色”>link 超链接尚被选中的文字alink 超链接点选但未被放开的颜色vlink 超链接已被点选过的颜色6 表单表单是提供让读者在网页上输入，勾选和选取数据，以便提交给服务器数据库的工具。1 表单的功能结构：主标记结构：<from>

25、</from>属性值说明name字符串给这个表单起个名字methodget/post表单的传输方式actionurl传输目标2 文本栏、密码栏、隐藏栏文本栏：<input type=”text” name=”栏位名称” value=”栏位内定值” size=”栏位显示宽度” maxlength=”栏位数据输入最大长度” readonly=”readonly”>密码栏：<input type=”password” name=”栏位名称” value=”栏位内定值” size=”栏位显示宽度” maxlength=”栏位数据输入最大长度” readonly=”read

26、only”>隐藏性栏位：<input type=”hidden” name=”栏位名称” value=”栏位值”>3 复选栏、单选栏多重勾选栏位：<input type=”checkbox” name=”栏位名称” value=”内定值” checked=”checked” disabled=”disabled”>单选栏位:<input type=”radio” name=”栏位名称” value=”内定值” checked=”checked” disabled=”disabled”>4 窗体栏位、区块栏位窗体选项栏位设置:<select nam

27、e=”栏位名称” size=”数字” > <option value=”选项值” selected=”selected”> <option value=”选项值”> <option value=”选项值”> </select>/分组<optgroup label="分组名称"></optgroup>/多选multiple文字区块的设置:<textarea cols=”设置长度” rows=”设置宽度”> </textarea>5 按钮、图像按钮按钮设置: <input

28、 type=”submit” value=”按钮中显示的文字”> <input type=”reset” value=”按钮中显示的文字”>按钮图像:<button name=”栏位名称” type=”图象形态”> <img src=”URL”> </button> 图像按钮:<input type="image" src="url" alt="文本">6 允许上传文件上传栏位:<input type="file" name="fil

29、e">7 表单加上外框和标题外 边 框:<fieldset>.</fieldset> 标题:<legend>.</legend>7 框架浏览器视窗本身就是一个框架，网页就是显示在该单一的框架内，本章将介绍另一种网页呈现的方式，那就是可将原先单一的框架分割成多个框架，且每个框架中可以分别显示出指定的网页，当然这种框架仍然是结构于单一的视窗中。1 多窗框的基本结构格式：<frameset><frame><frame><frame></frameset>功能说明:<fra

30、meset>用来设置多窗框结构的声明<frameset>下的属性：属性名称属性值说明 cols像素设置直排的多窗框环境百分比同上 rows像素设置横排的多窗框环境百分比同上 border像素边框的宽度 framespacing 像素页面与页面的边距属性格式：<frameset cols=”120,80,120”><frameset cols=”20%,40%,20%”><frameset cols=”40%,*,*”><frameset rows=”120,80,120”><frameset rows=”20%,40%,2

31、0%”><frameset rows=”20%,*,*”><frame>下的属性：属性名称属性值说明 srcURL链接的页面 noresizetrue允许浏览器自行改变框架大小false不允许 scrolling yes不管网页内容的大小，都出现滚动条no不管网页内容的大小，都不现滚动条auto浏览器自动判断，是否需要滚动条 marginheight 像素设置垂直方向，窗体内容与边界的距离 marginwidth 像素设置水平方向，窗体内容与边界的距离 frameborder01不出现框体边/出现窗体边线属性格式：<frame src=”URL”>&l

32、t;frame noresize> 2 嵌套多窗体设置： 格式：<frameset rows="20%,80%"><frame src="URL"><frameset cols="20%,80%"><frame src="URL"><frame src="URL"></frameset></frameset>3 多框架与超链接框架式网站的好处就是在同一张页面可以显示多个页面，而且可以跟方便的进行链接。相关属

33、性说明：<frame>的命名属性：格式：<frame name=”窗体名称”><a>超链接 <a href=”URL” target=”窗体名称”>多窗体链接的属性：属性名称属性值说明 target _blank打开一个新建的页面4 悬浮窗体的设置格式:<iframe></iframe>功能:设置悬浮窗框属性名称属性值说明 height像素/%绝对/相对 高度 width像素/%绝对/相对 宽度其余属性除了noresize外,其他都和frameset 一样.8 多媒体使用Web如此流行的原因之一是可以再网页上加入图像、声音

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

35、ication/x-shockwave-flashflash类型dataurlflash路径width像素/百分比flash宽度height像素/百分比flash高度注意：必须再使用子标签<param>完成flash插入属性值说明name属性flash属性value值flash值3 MP3音频及WMV视频的插入使用<embed>.</embed>标记插入FLASH动画属性值说明 autostarttrue/false自动/非自动播放loop数字音乐循环的次数它的前身是<bgsound src=”URL” loop=”次数”>使用<object>.</object>标记插入MP3音乐属性值说明 namesrc(路径)音乐路径autoplay(true

人人文库> 全部分类> 教育资料 > 备课教案

温馨提示

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

最新文档

评论

0/150

提交评论