HTML与Script基础文档

HTMLScript教案2第一部分HTML网页设计5.1什么是HTML文件【实训目标】认识HTML文件，即超文本标记语言。是一种特殊的、通过浏览器显示的文档编排语言。【相关技术】html基本框架：1、HTML是英文HyperTextMarkupLanguage的首字母缩写2、HTML文件是一个带标签的文本文件3、浏览器通过标签来正确显示页面4、HTML文件的后缀是“.htm”或“.html”，刚才我们使用的是第一种形式5、一个HTML文件可以由简单的文本编辑器来编辑生成一、创建HTML文件1、打开记事本2、输入如下代码：htmlheadtitle网页基础知识实验（1）/title/headbody这是我的第一个主页b这是我的第一个主页/b/body/html1.保存为htm作后缀的文件“webBasic001.htm”2.在浏览器中浏览该文件35.2HTML元素【实训目标】认识HTML文件的元素及标签。【相关技术】1、HTML文件用标签来标记元素；2、标签由两个“”和“”括起来；3、标签一般是成对出现的，如html/html，第一个标签是开始标签，第二个标签是；结束标签，两个标签之间是HTML元素的内容；4、有个别标签可以单独出现，如br/，一般会在“”前加上个“/”，表示该标签的结束；5、HTML标签对大小写不敏感，所以b和B是一样的意思。【实训过程】一、创建HTML文件1、打开记事本2、输入如下代码：htmlheadtitle网页基础知识实验（2）/title/headbody了解HTML元素br/b我在第二行,我是粗体字/bbr/i我在第三行，我是斜体字/i〉/body/html3.保存为htm作后缀的文件“webBasic002.htm”4.在浏览器中浏览该文件45.3基本的HTML标签【实训目标】认识HTML文件的主要标签。【实训结果】【相关技术】1、HTML文件的主要标签；2、标题标签，h1/h1到h6/h6；3、段落标签，p/p；4、换行标记，br/；5、水平线标签：hr；6、注释部分，如!-下面是段落内容--。常用HTML代码速查表标记或参数定义A连结标记ADDRESS地址标记（斜体效果）AREA连结区域标记（设定各连结区域）alink点击连结时的样式。例：alink=#FF0000align水平方向摆放位置。例：align=centeralternate来回走动，例：behavior=alternatealt在连结中插入文字说明。例：alt=绿叶园autostart媒体文件传输完后是否自动播放。例：autostart=true5auto自动、视情况B字体加粗标记（产生字体加粗的效果）BODY正文标记（设计文件格式及内文所在）BR换行标记（令文字、图片等显示在下一行）BIG字体加大标记（令字体稍为加大）BLINK闪烁文字标记（令文字产生闪烁效果）BGSOUND背景声音标记（于背景播放声音或音乐）BASE连结基准标记（可将网页中所有的相对路径转换成绝对路径）BASEFONT基准字形标记（设定所有字的字形、大小、颜色）BLOCKQUOTE引述文字区块、令文字在表格的上下左右留有一定的空间background背景墙纸。例：background=01.JPGbgcolor背景颜色。例：bgcolor=#ff0000bgproperties固定背景墙纸。例：bgproperties=fixedborder边框。例：border=10bordercolor边框颜色。例：bordercolor=#000080bordercolorlight边框向光部分的颜色。例：bordercolorlight=#000000bordercolordark边框背光部分的颜色。例：bordercolordark=#ffffffbottom置于底端。例：valign=bottombehavior卷动方式。例：behavior=alternate_blank表示连结的目标地址在新建窗口中打开。例：target=_blankCENTER居中标记（令文字、图片、表格等显示于中间）CAPTION表格标题（做成一打通列以填入表格标题）CODE程式码（字体稍为加宽如）CITE引述（斜体效果）colspan该单元格向右打通。例：colspan=5color颜色。例：color=#00FF006cellspacing单元格间距。例：cellspacing=5cellpadding单元格衬距。例：cellpadding=10DIV区域标记DFN述语定义标记（斜体效果）DIR目录清单标记（清单项目将以圆点排列，如UL）DL定义清单标记（清单分两层出现）DT定义条目标记（标示该项定义的标题）DD定义内容标记（标示定义内容）direction方向。例：direction=upEM强调标记（字体出现斜体效果）EMBED多媒体标记FONT字形标记FORM表单标记（决定单一表单的运作模式）FRAME框窗属性标记（设定框窗内的参数属性）FRAMESET框架标记（设定框架、宣告HTML文件为框架模式）frameborder框架的边框厚度。例：frameborder=0framespacing框架与框架之间保留空白的距离。例：framespacing=0face字体。例：face=黑体fixed固定。例：bgproperties=fixedfalse否。例：loop=falseHTML声明这是HTML文件，让浏览器认出并正确处理此HTML文件。HEAD开头标记（提供文件整体资讯）HR水平线（插入一条水平线）H1一级标题标记（变粗变大加宽，程度与级数反比）H2二级标题标记（将字体变粗变大加宽）7H3三级标题标记（将字体变粗变大加宽）H4四级标题标记（将字体变粗变大加宽）H5五级标题标记（将字体变粗变大加宽）H6六级标题标记（将字体变粗变大加宽）height高度。例：height=100hspace图片左右的空间。例：hspace=10href连结。例：href=01.htmI斜体标记（字体出现斜体效果）IMG图形标记（用以插入图形及设定图形属性）IFRAME框架标记（于网页中插入框架）INPUT输入标记（决定输入形式）ISINDEX页内寻找器（可输入关键字寻找于该一页）infinite重复播放。例：loop=infiniteKBD键盘字（字体稍为加宽，单一空白）LI清单项目标记（每一标记标示一项清单项目）LINK关系定义标记（将目前文件与其它URL作连结）link一般情况下的连结样式。例：link=#FF0000leftmargin网页的左边距大小。例：leftmargin=0lowsrc预载图片（先显示低解像图片）。例：IMGLOWSRCleft左边。例：align=leftloop反覆播放。例：loop=infiniteMENU选单清单标记（清单项目将以圆点排列，如UL）META开头定义标记MAP影像地图名称标记（设定影像地图名称）MARQUEE走动标记middle居中。例：align=middlemarginwidth框架左右边缘与框架内的文件保留的空间。8例：marginwidth=0marginhight框架上下边缘与框架内的文件保留的空间。例：marginheight=0NOBR不换行标记（强制文字不自动换行）NOFRAMES不支持框架标记（当旧式浏览器不支援框架时显示提示）name参考点(锚点)。例：aname=#123/ano否。例：scrolling=nonoshade平面显示。例：hrnoshadenoresize锁住框架窗口的大小OL顺序清单标记（清单项目将以数字、字母顺序排列）OPTION选项标记（每一标记标示一个选项）P段落标记（为字、画、表格等之间留一空白行）PRE预设格式标记（令文件按照原始码的排列方式显示）_parent父窗口（连结的目标网页在本窗口中打开）。例：target=_parentplaybutton在媒体播放面板中显示播放按钮pausecutton在媒体播放面板中显示暂停按钮right居右。例：align=rightrows横向分割的宽度。例：rows=30%,70%rowspan向下（单元格向下打通）。例：rowspan=2STRONG加重语气标记（产生字体加粗Bold的效果）SMALL字体缩细标记（令字体稍为缩细）STRIKE划删除线标记（为字体加一删除线）SAMP范例标记（字体稍为加宽如）SUB下标字标记SUP上标字标记STYLE样式表标记9SPAN自订标记（独立使用或与样式表同用）SELECT选择标记（建立pop-up走动清单）SCRIPT引用脚本标记size大小。例：size=7src来源。例：src=logo.gif_self相同窗口（在相同的框架中显示连结的内容）。例：target=_selfstarttime开始播放的时间。例：starttime=00:10smallconsole显示较小的面板。例：controls=smallconsolestopbutton显示停止按钮。例：controls=stopbuttonscrolling滚动条。例：scrolling=noscroll走动。例：behavior=scrollscrollamount走动的速度。例：scrollAmount=25scrolldelay走动的停顿时间。例：scrolldelay=1000slide逐格走动（幻灯式）。例：behavior=slideTITLE网页文件标题标记TABLE表格标记TR表格的行TD表格的列TH表格标头（相等于TD，但其内之字体会变粗）TT打字字体（Courier字体，字母宽度相同）TEXTAREA文字区块（提供文字方盒以输入较大量文字）topmargin网页的上边距。例：topmargin=10top上方。例：valign=toptext整个网页的文字颜色。例：text=#CE0063target超级连接打开窗口模式。例：target=_blank_top将连结的网页显示在没有框架的窗口中。例：target=_toptype样式。例：type=text/csstrue是。例：loop=true10U下划线标记（给文本加上底线）UL无序清单（清单项目将以圆点排列）VAR变数标记（斜体效果）valign摆放位置（垂直方向）。例：valign=topvlink被访问后超链接文字的样式。例：vlink=#0000FFvspace图片上下的空间。例：vspace=20volume音量（设定音量大小）。例：volume=100volumelever显示音量调整钮。例：controls=volumeleverWBR建议换行标记（预设换行部位）width宽度、长度。例：width=540【实训过程】一、创建HTML文件1、打开记事本2、输入如下代码：htmlheadtitle网页基础知识实验（3）/title/headbodyh1这是标题1/h1h2这是标题2/h2h3这是标题3/h3h4这是标题4/h4h5这是标题5/h5h6这是标题6/h6hr/p这是第一段/pp这是第二段/pp这一段比较长一点，br/换一行继续写/p/body11/html3、保存为htm作后缀的文件“webBasic003.htm”一、创建HTML文件1、