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

下载本文档

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

文档简介

目录TOC\o"1-5"\h\z\o"CurrentDocument"1HTML基本结构 1\o"CurrentDocument"2列表控制标记 4\o"CurrentDocument"3表格 6\o"CurrentDocument"4图像 9\o"CurrentDocument"5超链接 10\o"CurrentDocument"6表单 12\o"CurrentDocument"7框架 13\o"CurrentDocument"8多媒体 15\o"CurrentDocument"9其他标记 161HTML的基本结构<html><head><title>1HTML的基本结构<html><head><title>标题</title></head><body> 根控制标记 头控制标记 标题标记 头控制标记(尾) 网页显示区域</body> 根控制标记(尾)</html> 根控制标记(尾).<html>...</html>根控制标记开头和结尾成对出现，双标签.<head>...</head>头控制标记.<title>很单纯的文件标题声明.<meta>控制标记的动态文件转换声明.<base>超链接网址基准参考点.Javascript和VBScript程序5.stylesheet可用来设置排版来的声明.<link>可引用外部文件，如CSS排版样本第1页共17页HTML标记.<title>…</title>设置浏览器的视窗标题.<body>...</body>页面可见内容2HTML控制标记的格式.〈标记名称〉单一型，无设置值的。如：<br>.〈标记名称属性二“属性值”〉单一型，有设置值的。如：<hrwidth=”80%”>.(标记名称>...</标记名称〉对称型，无设置值。如：<title>...</title>.〈标记名称属性二"属性值”>...</标记名称〉对称型，有设置值。如：<bodybgcolor=”red”>…</body><fontsize=”7”>...</font>3最常用的控制标记(1).跳行<br>格式：<br>无属性设置(2).段落<p>格式：<palign="排列方式”〉...</p>属性名称属性值说明alignleft往左靠(默认)center往中靠right往右靠(3).水平直线<hr>格式：<hr>属性名称属性值说明size像素绝对设置，以数字表示，属性值越大，线越粗百分比相对设置，以%表示，属性值越大，线越粗width像素绝对设置，长度不会应视窗的改变而改变百分比相对设置，长度会随着视窗宽度而改变noshade实体线(4).向中对齐<center>(被废弃的标签)格式：<center>…</center>第2页共17页HTML标记(5).背景色与文字设置格式：<bodybgcolor-"背景色“text-"文字颜色”〉整体页面的边距，行距<bodyleftmargin-”像素”topmargin-”像素”>.标题文字设置格式：<h1>...</h1><h2>…</h2><h3>…</h3><h4>…</h4><h5>…</h5><h6>…</h6>属性名称 属性值 说明align left 靠左center 靠中right 靠右.特殊字符设置格式：< lt;> gt;& amp;“ quot;.在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>...</big>大字3.<del>…</del>删除4.<ins>…</ins>修改5.<samll>…</small>小字6.<strong>…</strong>加强语气(加粗)7.<em>…</em>加强语气(倾斜).<font>字体控制(被废弃的标签)第3页共17页HTML标记格式：<font>...</font>属性名称 属性值 说明size 0-7 字体大小color 英文或十六颜色face 字体 字体.格式化格式：<pre>...</pre>让书写的文字格式化！.引用文本格式：<blockquote>...</blockquote>属性名称属性值说明cite url被引用的地址2列表控制标记1无序号条例式清单<皿>与<血>格式：<ul><li>...</li><li>...</li><li>...</li><li>...</li></ul>功能:<皿>无序条列清单的开始.</ul>表示结束.<li>...</li>表示一个项目.<li>的属性属性名称属性值说明typedise实心圆(默认值)circle空心圆square实心方块2有序号条例式清单<01>与<1》格式：<ol><li>...</li><li>...</li><li>...</li><li>...</li></ol>功能:<0卜有序条列清单的开始.</ol>表示结束.第4页共17页HTML标记<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><li>...</li><li>...</li><li>...</li></ol></li><li><ol><li>...</li><li>...</li><li>...</li></ol></li></ul>4叙述式清单（定义列表）格式：<dl><dt=..</dt><dd=..</dd><dd=..</dd><dd=..</dd><dt=..</dt><dd=..</dd><dd=..</dd><dd=..</dd></dl>功能:<用>叙述清单的开始<dt>表示一个项目<dd>表示一个项目下的更详细的内容第5页共17页HTML标记3表格在网页中表格是一种经常使用到得设计结构，就像表格的内容中可以包含任何的数据，如文字、图像、表单、超链接、表格等等，所有9tml中可以使用的数据，都可以被设置在表格中，所以有关表格设置的标记与属性页特别多。1表格的基本格式格式：<table><tr>…<th>…</th><th>…</th><th>…</th></tr><tr><td>…</td><td>…</td><td>…</td></tr></table>功能:<table>...</table>用来声明表格开始与结束.<tr>...</tr>用来设置表格的行.<th>...</th>用来设置标题栏位.<td>...</td>用来设置数据栏位.2<table>标签下的属性属性名称属性值说明border像素设置表格的边线cellspacing像素绝对设置，存储格框线宽度百分比相对设置，存储格框线宽度cellpadding像素绝对设置,数据与框线的距离百分比相对设置,数据与框线的距离width像素绝对设置,像素表示表格宽度百分比相对设置,百分比表表格宽度height像素绝对设置，像素表示表格宽度百分比绝对设置,百分比表表格宽度alignleft表格往左靠（默认）center表格往中靠right表格网右靠bgcolor英文/十六表格的背景颜色backgroundURL表格的背景图片summary字符串用来描述表格数据说明第6页共17页HTML标记

bordercolor英文/十六边框的颜色bordercolorlight同上边框的亮色bordercolordark同上边框的暗色3<table>标签下的边框设置属性名称属性值说明framevoid不要显现表格的边线above只要显现出表格的上边线该属性必须在borderbelow只显现出表格的下边线的属性值不为0的状hsides只显示表格的上下边线态下！vsides只显现表格的左右边线lhs只显现表格的左边线rhs只显现表格的右边线border/box会显现出表格的所有边线rulesrows只显示出横行的格框线cols只显示出直行的格框线all显示全部格框线groups表示列组合水平部分none不显示任何格框线4<tr><th><td>标签下的常用属性属性名称属性值说明width像素绝对设置，以像素值设置宽百分比相对设置，以百分比设置宽height像素绝对设置，以像素值设置高百分比相对设置，以百分比设置宽bgcolor英文/十六数据栏的颜色设置align（水平方|明left数据靠左center数据靠中right数据靠右丫己电口（垂直方向）top数据靠上middle数据靠中bottom数据靠下nowrap无在单元格中换行5拆分与合并单元格属性名称属性值说明colspan数字向两边扩展栏位rowspan数字向下扩展栏位第7页共17页HTML标记

6表格的结构化、直列化、标题.结构化格式:<table><thead> </thead> 表头区<tbody> </tbody> 表体区<tfoot> </tfoot> 表尾区</table>.直歹ij化格式：<colgroup>….</colgroup>属性名称属性值说明alignleft靠左center靠中right靠右valigntop靠上middle靠中bottom靠下span数字直列数目width像素/百分比宽度个别直列设置格式:＜col＞功能完全和＜colgroup＞一样.第2章表格的标题：<table><caption></caption></table>＜caption＞＞的属性值有：属性名称属性值说明aligntop标题在表格上方bottom标题在表格下方第8页共17页HTML标记

7嵌套表格的应用：看实例.4图像1背景图案的设置格式：<bodybackground="URL”>2将图片插入到网页中去格式：<imgsrc="URL”>功能:将图片插入到网页中去，单一标签<img>下的属性属性名称属性值说明srcURL图片的路径图片的注解属性名称属性值说明alt 字符串图象大小的设置属性名称 属性值width 像素百分比height 像素百分比图象边框的设置属性名称 属性值border 数字给图片做注解说明绝对设置,宽相对设置,宽绝对设置,高相对设置,高说明图象边框第9页共17页HTML标记文字图象的排列属性名称属性值说明alignleft图象靠左，文字靠右right图片靠右，文字靠左top文字往上靠middle文字靠中bottom文字靠下空隙的设置属性名称属性值说明vspace像素垂直上下两端与物件的距离hspace像素水平左右两段与物件的距离3用图像作为超链接格式：<ahref="URL"><imgsrc="URL"></a>注意点:边框的问题.4地图索引格式：<mapname="图象名称〃id=〃图象名称〃》<areashape="选取区块的形状〃coords="坐标〃href=〃URL〃alt="文字说明〃》</map><imgsrc="URL"USEMAP="#图象名称〃》<map>声明整张图使用地图链接方式进行连接.name,id指此图的名称.<area>表示我们所要链接其中一点的区快shape表示我们所选择的形状，如：rect矩形circle圆poly多边形coords表示地图的坐标位置！！5切片索引使用Firework来进行！！用表格进行定位！！6为网站添加图标<linkrel="shortcuticon"href="favicon.ico"type="image/x-icon”>5超链接超链接也叫URL中文翻译为资源定址器.这个定址器的功能主要告诉浏览器根据URL的地址找到所需的资源。1超链接的基本格式第10页共17页HTML标记格式：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超链接的种类一般常用的分为四种：http声明<ahref=/images/logo.htm>|^^logo</a>file声明 <ahref=file:〃/e/images/pic.jpg>图片</a>ftp声明 <ahref=ftp:〃1/>进入<友>mailto<ahref=mailto:bnbbs@163.com>E-MAIL</a>3相对链接和绝对链接index.htmpage/index.htmpage/top/index.htm../index.htm../../index.htm../page/index.htm4书签的链接<a>下的属性属性名称 属性值 说明name 字符串 设置超链接的标记基本格式：瞄点<aname="音乐”>...</a>链接点<ahref=”#音乐”>...</a>链接到别的网页的书签项目：第11页共17页HTML标记

基本格式:基本格式:瞄点<aname="音乐”>...</a>链接点<ahref="index.htm#音乐”>...</a>5超链接事件LINK颜色的设置vlink=”颜色”〉基本格式：＜bodylink=”颜色"alink=vlink=”颜色”〉link超链接尚被选中的文字alink超链接点选但未被放开的颜色vlink超链接已被点选过的颜色6表单表单是提供让读者在网页上输入，勾选和选取数据，以便提交给服务器数据库的工具。1表单的功能结构：主标记结构：＜from＞...</from>属性 值说明name 字符串给这个表单起个名字method get/post表单的传输方式action url传输目标2文本栏、密码栏、隐藏栏文本栏：<inputtype=”text”name=”栏位名称“value=”栏位内定值“size=”栏位显示宽度”maxlength=”栏位数据输入最大长度”readonly=”readonly”>密码栏：<inputtype=”password”name=”栏位名称”value=”栏位内定值”size=”栏位显示宽度”maxlength=”栏位数据输入最大长度”readonly=”readonly”>隐藏性栏位：<inputtype=”hidden”name="栏位名称”value="栏位值"〉3复选栏、单选栏多重勾选栏位：<inputtype=”checkbox”name=”栏位名称”value=”内定值”checked=”checked”disabled=”disabled”>单选栏位:<inputtype=”radio”name=”栏位名称“value=”内定值”checked=”checked”disabled=”disabled”>4窗体栏位、区块栏位第12页共17页HTML标记窗体选项栏位设置:<selectname="栏位名称“size="数字”><optionvalue=”选项值”selected=”selected”>...<optionvalue="选项值”〉…<optionvalue="选项值”〉…</select>//分组<optgrouplabel="分组名称"></optgroup>〃多选multiple文字区块的设置:<textareacols="设置长度"rows="设置宽度”〉</textarea>5按钮、图像按钮按钮设置:<inputtype=”submit”value=”按钮中显示的文字”〉<inputtype=”reset”value=”按钮中显示的文字”〉按钮图像:<buttonname=”栏位名称“type=”图象形态”〉<imgsrc=”URL”></button>图像按钮:<inputtype="image"src="url"2"="文本”>6允许上传文件上传栏位:<inputtype="file"name="file">7表单加上外框和标题外边框:<fieldset>...</fieldset>标题:<legend>...</legend>7框架浏览器视窗本身就是一个框架，网页就是显示在该单一的框架内，本章将介绍另一种网页呈现的方式，那就是可将原先单一的框架分割成多个框架，且每个框架中可以分别显示出指定的网页，当然这种框架仍然是结构于单一的视窗中。1多窗框的基本结构格式：<frameset><frame><frame><frame>第13页共17页HTML标记</frameset>功能说明:<frameset>用来设置多窗框结构的声明<frameset>下的属性：属性名称属性值说明cols像素设置直排的多窗框环境百分比同上rows像素设置横排的多窗框环境百分比同上border像素边框的宽度framespacing像素页面与页面的边距属性格式：<framesetcols=”120,80,120”><framesetcols="20%,40%,20%”><framesetcols=”40%,*,*”><framesetrows=”120,80,120”><framesetrows=”20%,40%,20%”><framesetrows=”20%,*,*”><frame>下的属性：属性名称属性值说明srcURL链接的页面noresizetrue允许浏览器自行改变框架大小false不允许scrollingyes不管网页内容的大小，都出现滚动条no不管网页内容的大小，都不现滚动条auto浏览器自动判断，是否需要滚动条marginheight像素设置垂直方,向，窗体内容与边界的距离marginwidth像素设置水平方向，窗体内容与边界的距离frameborder0\1不出现框体边/出现窗体边线属性格式：<framesrc=”URL”><framenoresize>2嵌套多窗体设置：格式：<framesetrows="20%,80%”><framesrc="URL"><framesetcols="20%,80%”><framesrc="URL"><framesrc="URL">第14页共17页HTML标记

</frameset></frameset>3多框架与超链接框架式网站的好处就是在同一张页面可以显示多个页面，而且可以跟方便的进行链接。相关属性说明：<frame>的命名属性：格式：<fTamename=”窗体名称”><a>超链接 <ahref=”URL”target三窗体名称”〉多窗体链接的属性：说明打开一个新建的页面说明打开一个新建的页面target _blank4悬浮窗体的设置格式:<iframe>..</iframe>功能:设置悬浮窗框属性名称 属性值说明height像素/%绝对/相对高度width像素/%绝对/相对宽度其余属性除了noresize外，其他都和frameset一样.8多媒体使用Web如此流行的原因之一是可以再网页上加入图像、声音、动画和电影文件。虽然过去对这些文件大小的限制局限了它们的作用，但是新技术（比如流技术及宽带）已经使多媒体网页成为了可能。1FLASH动画的插入使用<embed>...</embed>标记插入FLASH动画属性值说明srcurlflash路径width像素/百分比flash宽度height像素/百分比flash高度wmodewindow使flash自身的矩形窗口来播放opaque使flash隐藏页面上位于它后面transparent使flash某一部分透明使用<object>...</object>标记插入flash动画第15页共17页HTML标记

属性值说明typeapplication/x-shockwave-flashflash类型dataurlflash路径width像素/百分比flash宽度height像素/百分比flash高度注意：必须再使用子标签＜param＞完成flash插入属性 值 说明name 属性 flash属性value 值 flash值3MP3音频及WMV视频的插入使用＜embed＞...＜/embed＞标记插入FLASH动画属性autostartloop值属性autostartloop值true/false数字说明自动/非自动播放音乐循环的次数它的前身是＜bgsoundsrc=”URL”100P=”次数”〉使用＜object＞...＜/object＞标记插入MP3音乐属性 值 说明name src(路径) 音乐路径autoplay(true/false) 是否自动播放9其他标记1自动展示网页内容：格式：＜

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

温馨提示

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

最新文档

评论

0/150

提交评论