




版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
概念(超文本标识语言)是一种用来制作超文本文档的简单标记语言。用编写的超文本文档称为文档。概念(超文本标识语言)文档的编写方法手工直接编写记事本等,存成格式使用可视化编辑器、等由服务器(或称服务器)一方实时动态地生成。文档的编写方法手工直接编写网页文件命名*或*无空格无特殊符号(例如&符号),只可以有下划线“_”,只可以为英文、数字区分大小写首页文件名默认为:或网页文件命名*或*文件结构<>...<><>...<><>...<>元素:是语言的基本部分。元素总是成对出现,每一对元素一般都有一个开始的标记(如<>),也有一个结束的标记(如<>)。元素的标记要用一对尖括号括起来,并且结束的标记总是在开始的标记前加一个斜杠。文件结构<>...<>文件结构
()<><><><><><><>文件的正文<><>文件结构
()<>第一张网页(01)<><> <><><><> !<><>第一张网页(01)<>基本组成部分——
元素属性元素可以有自己的相关属性,每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的<>内,并且和元素名之间有一个空格分隔;属性值用“”引起来。基本组成部分——
元素属性元素可以有自己的相关属性,每一个属第二张网页(02)<><><><><><><p"">!<><><>第二张网页(02)<>基本结构的
有关元素和元素属性元素——1
<>元素出现在文档的开头部分。<>与<>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。<><>元素定义文档的标题。<>与<>之间的内容将显示在浏览器窗口的标题栏。基本结构的
有关元素和元素属性元素——1
<>元素出现在文基本结构的
有关元素和元素属性元素——2<>元素<>元素下面可以插入很多很有用的元素属性。下面介绍四种:<"""">用来标记搜索引擎在搜索你的页面时所取出的关键词。基本结构的
有关元素和元素属性元素——2基本结构的
有关元素和元素属性元素——3<>元素<""“">用来标记文档的作者。基本结构的
有关元素和元素属性元素——3基本结构的
有关元素和元素属性元素——4<>元素<“”“;2312”>用来标记你的页面的解码方式。基本结构的
有关元素和元素属性元素——4基本结构的
有关元素和元素属性元素——5<>元素<“”“5”>用来自动刷新网页基本结构的
有关元素和元素属性元素——5练习(03)编写一个网页,要求3秒钟后自动跳转到知了网首页()。<><><><><“”“3”><><><p“”>三秒钟后本网页自动跳转到知了网首页<><><>练习(03)编写一个网页,要求3秒钟后自动跳转到知了网首页(<>元素及元素属性——1<>元素表明是文档的主体部分。在<>与<>之间,通常都会有很多其它元素;这些元素和元素属性构成文档的主体部分。<>元素及元素属性——1<>元素表明是文档的主体部分。在<><>元素及元素属性——2<>元素中有下列元素属性:(1)属性标志文档的背景颜色。如:""。例:04<>元素及元素属性——2<>元素中有下列元素属性:对颜色的控制对颜色的控制也有自己的语法。使用16进制的颜色值对颜色进行控制。16进制的数码有:0,1,2,3,4,5,6,7,8,9.对颜色的控制对颜色的控制也有自己的语法。使用16进制的颜色值颜色颜色名和值黑色”#000000”银色”0c0c0”红色”0000”蓝色”#0000”白色””黄色”00”绿色”#0000”海蓝色”#00”常见颜色的代码颜色颜色名和值黑色”#000000”银色”0c0c0”红色”<>元素及元素属性——3<>元素中有下列元素属性:(2)属性标志文档的背景图片。如:“"。可以使用的图片格式为,例:05<>元素及元素属性——3<>元素中有下列元素属性:<>元素及元素属性——4<>元素中有下列元素属性:(3)使背景图片成水印效果,即图片不随着滚动条的滚动而滚动。<>元素及元素属性——4<>元素中有下列元素属性:<>元素及元素属性——5<>元素中有下列元素属性:(4)属性标志文档的正文文字颜色。如:“6666”。元素定义的颜色将应用于整篇文档。例:06<>元素及元素属性——5<>元素中有下列元素属性:<>元素及元素属性——6<>元素中有下列元素属性:(5)超级链接颜色、、分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。例:07<>元素及元素属性——6<>元素中有下列元素属性:<>元素及元素属性——7<>元素中有下列元素属性:(6)和设置网页主体内容距离网页顶端和左端的距离如:"20""30“例:08<>元素及元素属性——7<>元素中有下列元素属性:文字标签属性——1文字属性标记1.文字颜色指定颜色<>...<>16进制数码例:09文字标签属性——1文字属性标记文字标签属性——2文字属性标记2.文字字体<“#,#,...,#”>...<>
客户端可获得的字体10文字标签属性——2文字属性标记文字标签属性——3文字属性标记3.文字大小<>...<>1,2,3,4,5,6,7,例:11文字标签属性——3文字属性标记文字标签属性——4文字属性标记4.文字标题<>...<>1,2,3,4,5,6例:12文字标签属性——4文字属性标记文字布局行的控制段()(可以看作是空行)<p>空白占位符;例:13文字布局行的控制文字布局行的控制的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话,就要用到另一个元素,即<>元素。<>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<>元素不是成对出现的。例:14不换行<> 15文字布局行的控制文字与段落格式控制<>……<i>倾斜文本<><b>粗体文本<><u>下划线文本<> <s>删除线文本<>……<>例:16文字与段落格式控制<>……基本组成部分—注释文档可以插入注释。注释内容不会在浏览器窗口显示注释的格式为:
<注释内容>
<多行注释内容>例:17基本组成部分—注释文档可以插入注释。注释内容不会在浏览器窗口文字的对齐<>...<>(1,2,3,4,5,6)<p>...<>(,,)例:18文字的对齐<>...<>(1,2,3,4,5,6)文字的分区显示<>...<>(,,)文字的分区显示<>...<>3段落与分行控制居中<>元素<>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的“”类似
例如:<>居中段落<>3段落与分行控制3段落与分行控制标尺线 <=#>:设定线宽 <>:设定线长 <>:设定对齐方式, <>:设定线的颜色例:193段落与分行控制标尺线3.的段落与分行控制无序列表元素—1
列表在的文档里有重要的地位规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。3.的段落与分行控制无序列表元素—1
列表在的文档里有重要3.的段落与分行控制无序列表元素—2无序列表是由<>和<>元素定义的:<><><><><><><><><><>例:203.的段落与分行控制无序列表元素—23.的段落与分行控制无序列表元素—3无序列表的默认符号是圆点。
<>元素有属性,通过定义不同的属性可以改变列表的项目符号。目前,属性的属性值有:
(圆)、(圆圈)、(方块)例:203.的段落与分行控制无序列表元素—33.的段落与分行控制有序列表元素—1有序列表由<>和<>定义:<><><> <><> <><><>例:203.的段落与分行控制有序列表元素—13.的段落与分行控制有序列表元素—2
<>元素也有自己的属性,属性的属性值有1、A、a、I、i等。例如,我们以A、B、C……作为列表的编号
例:20<>元素还可以定义列表的起始编号,如我们希望列表的第一个编号为5,而不是1,则需要定义<>元素的属性例:203.的段落与分行控制有序列表元素—2
<>元素也有自己的属4.超级链接—普通超级链接1超级链接是整个应用的核心和基础。如果没有超级链接的概念,那么,我们现在所有的的应用将不复存在。所以,对超级链接的掌握具有特殊重要的意义。4.超级链接—普通超级链接1超级链接是整个应用的核心和基础。4.超级链接—普通超级链接2超级链接是用锚元素<a>定义的在<a>元素下,有元素属性的属性值为一个地址如:<a“”>指向知了网的超级链接<>如:<a“15">普通超级链接<>例:214.超级链接—普通超级链接2超级链接是用锚元素<a>定义的4.超级链接—超级链接超级链接可以指向地址如:<a“:983239372">指向地址的超级链接<>例:214.超级链接—超级链接超级链接可以指向地址4.超级链接—新开链接窗口开一个新的(浏览器)窗口()<a""“">...<>例:214.超级链接—新开链接窗口开一个新的(浏览器)窗口()4.超级链接—去除下划线去掉超级连接的下划线:“:”例:214.超级链接—去除下划线去掉超级连接的下划线:“:”4.超级链接——其他超级链接应用仅仅是应用的一种还有其他很多应用,如:等。实际上也属于非应用。我们可以类似的创建指向等的超级链接;指向其他应用的超级链接不是我们掌握的重点。4.超级链接——其他超级链接应用仅仅是应用的一种还有其他很4.超级链接——锚点(书签)1<a""><a"">指向本页面锚点的超级链接<>例:21<a“23”>指向23页面的锚点的超级链接<>例:214.超级链接——锚点(书签)1<a"">练习:标注出学校首页的静态代码练习:标注出学校首页的静态代码对图片的控制1基本语法:<“图片名称”>引用图片必须用<>元素标志。<>元素下的基本元素属性是属性,的属性值为所引用的图片的地址。属性是必须的。的可以是绝对地址,也可以是相对地址例:22对图片的控制1基本语法:对图片的控制2所谓图片的替代文本,指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。定义图片替代文本的方法是:<“图片名称”“这是一张图片”>例:23对图片的控制2所谓图片的替代文本,指图片不能显示时在图片所在对图片的控制3图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。定义图片的显示大小的方法是:<""100100>指定图片的宽度,指定高度。它们的属性值可以是象素,也可以是%。例:24对图片的控制3图片的显示大小对图片的控制4图片的边框我们可以为一幅图片加一个边框以突出显示:<"""2">的属性值为象素数例:25对图片的控制4图片的边框对图片的控制5图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是:<“”“”><“”“”>例:26对图片的控制5图片的对齐方式对图片的控制6图片的对齐方式定义图片的垂直对齐方式:<""""><""""><"""">对于图片的对齐方式不仅是以上几种,但是以上的几种是最常用的。例:26对图片的控制6图片的对齐方式对图片的控制7定义图片与左、右的文本之间的间距图片在显示时,与左右的文本之间可以有一定的间距<""55>()定义水平间距;()定义垂直间距。单位都是象素数.例:27对图片的控制7定义图片与左、右的文本之间的间距对图片的控制8图象的超级链接图象的超级链接是指整个图象的超级链接,当点击图象的任何部分时,都会打开这个超级链接。定义默认超级链接的方法是:<a“”><""><>所以,所谓超级链接实际上就是用<a>元素标志一个图象的引用;例:28对图片的控制8图象的超级链接一月二月三月120010001500单元格(用<>来表示,每个单元格可以有背景颜色和背景图片)表格(用<>来表示,表格可以有背景颜色、背景图片)表格边框每一行可以用<>来表示,单元格放在行中,每行可以有很多的单元格。表头(用<>来表示,表头是特殊的单元格,其中的文字加进去之后默认是居中并且加粗)一月二月三月120010001500单元格(用<>来表示,每表格()标记1<>元素:定义一个表格。每一个表格只有一对<>和<>,一张页面中可以有多个表格。<>元素:定义表格的行,一个表格可以有多行,所以<>对于一个表格来说不是唯一的。<>元素:定义表格的一个单元格。每行可以有不同数量的单元格,在<>和<>之间是单元格的具体内容。需要注意的是:上述的三个元素必须、而且只能够配对使用。缺少任何一个元素,都无法定义出一个表格。表格()标记1<>元素:定义一个表格。每一个表格只有一对<表格()标记2表格的基本结构<>定义表格<> <>定义表头<><><>定义表行<>…<>定义单元格<><>表格()标记2表格的基本结构表格()标记2练习尝试写出这个表格的代码例:11...2...3...4...5...6...7...8...表格()标记2练习1...2...3...4...5...6表格()标记3表格的属性–1属性:指定表格或某一个表格单元格的宽度。单位可以是%或者象素。属性:指定表格或某一个表格单元格的高度。单位可以是%或者象素。属性:表格边线粗细例02表格()标记3表格的属性–1表格()标记2表格的属性–14、属性:指定表格或某一个单元格的背景颜色。5、属性:指定表格或某一个单元格的背景图片。其属性值为一个地址。例:03表格()标记2表格的属性–1表格()标记3表格的属性–26、属性:指定表格或某一个单元格的边框颜色。例:047、属性:亮边框的颜色8、属性:暗边框的颜色例:05表格()标记3表格的属性–2表格()标记3表格的属性–29、属性:指定表格或某一个单元格里的内容(文本、图片等)的对齐方式。例:06表格()标记3表格的属性–2表格()标记3表格的属性–210、属性:单元格间距。例:0611、属性:单元格边距。例:06表格()标记3表格的属性–2表格()标记4单元格属性1、属性:指定某一个单元格里的内容(文本、图片等)的垂直对齐方式。垂直对齐方式的属性值包括::顶端对齐;:居中对齐;:底端对齐;:相对于基线对齐;例:07表格()标记4单元格属性表格()标记5单元格属性2、:属性值表示当前单元格跨越几列例:83、:属性值表示当前单元格跨越几行例:8表格()标记5单元格属性表格进阶表格的嵌套在<><>之间插入表格,实现表格嵌套例:9表格的作用一般只是控制文本和图像的显示,而不显示表格的边框表格进阶表格的嵌套综合案例表格的综合使用利用表格做一张你的课程表做一张最近来访的表格综合案例表格的综合使用表单()标记表单是页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在里,我们可以定义表单,并且使表单与或等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。表单()标记表单是页面与浏览器端实现交互的重要手段。利用表单表单()标记表单是网页上的一个特定区域。这个区域是由一对<>元素定义的。<>元素属性:用来定义表单处理程序(一个、等程序)的位置(相对地址或绝对地址)。定义表单结果从浏览器传送到服务器的方法,一般有两种方法:、。表单()标记表单是网页上的一个特定区域。这个区域是由一对<>表单()标记表单是网页上的一个特定区域。这个区域是由一对<>元素定义的。<>元素属性:规定了用表单传递信息时的编码格式,有和两种选择,前者是默认值,后者一般在表单需要提交文件信息的情况下使用表单()标记表单是网页上的一个特定区域。这个区域是由一对<>表单()标记表单的基本语法:<""*>
...<><><>*有数据量限制,无以上限制,以文件形式传输表单()标记表单的基本语法:表单()标记例:输入以下代码,定义一个基本菜单,并以方式实现提交<:983239372><>表单()标记例:输入以下代码,定义一个基本菜单,并以方式实现表单()标记元素元素是与输入相关的元素,它是一个空元素,因此在其末尾必须添加斜杠“/”。元素有一个重要的属性,该属性决定了的元素类型表单()标记元素表单()标记(1)文本框,“”,用于控制用户仅输入一行文本:控制输入文本框所显示的长度,单位为字符:控制允许最大输入的字符长度,单位为字符:通过表单传递出去的变量的名称:即变量的值,是在表单提交的瞬间,在该输入框内的字符串(如果在元素中定义该属性,则表示设定了输入框的初始值)11表单()标记(1)文本框,“”,用于控制用户仅输入一行文本表单()标记(2)密码框,“”,用户输入时所显示的密码是屏蔽号11(3)隐藏条目,“”,用于输入框不见,但仍然有和属性,一般用于不需要用户填写或选择,变量值已知,又需要将变量发送出去的情况11表单()标记(2)密码框,“”,用户输入时所显示的密码是屏蔽表单()标记(4)复选框,“”,一般由若干个复选项组成,改组元素拥有相同的属性值,而值不同。当表单提交后,变量将成为一个数组,且数组中包含选中复选框的值。“”表示默认将该复选框选中11(5)单选按钮,“”,与复选框类似只能选一个11表单()标记(4)复选框,“”,一般由若干个复选项组成,改组表单()标记(6)提交按钮,“”按下该按钮时,表单向中属性所定义的地址发送表单变量11(7)重置按钮,“”按下该按钮时,表单中所有的内容将被清空11表单()标记(6)提交按钮,“”按下该按钮时,表单向中属性表单()标记(8)自定义按钮,“”该按钮没有预定义的功能,但可以用事件调用自己编写的函数,和属性可参照提交按钮
(9)图像按钮,“”,该按钮与自定义按钮基本相同,但用图片方式来显示。.<“”“”“”“f()”>表单()标记(8)自定义按钮,“”该按钮没有预定义的功能,但表单()标记(10)文件域,“”。使用该属性必须将的属性设置为.该按钮帮助用户选择一个存储在本地计算机上的文件,在提交表单时会将所选中文件发送给服务器,其属性与文本框基本一致11表单()标记(10)文件域,“”。使用该属性必须将的属性设置表单()标记元素用于创建一个下拉菜单或选项表。它是一个非空元素,内容必须包含在<>和<>之间。具有一个属性,其属性值定义了要提交变量的名称.(1)无属性时;下拉菜单(2)“1”且没有属性(表示允许多选);下拉菜单(3)>“1”或有属性;滚动菜单12表单()标记元素表单()标记元素创建多行的,可滚动的文本输入框。非空元素,内容必须包含在<>和<>之间、属性:制定文本框的列数、行数,单位为字符属性:定义变量的名称属性:确定所提交的信息是否包含换行,按其默认值(文本不换行)提交表单()标记元素表单()标记综合练习(*)13表单()标记综合练习(*)13插入外部资源1.插入音乐“音乐地址”插入音乐()是否在音乐传送完自动播放(无限次),(1次),3(3次)音乐重复次数宽度;高度设定播放器面板大小,均为0则可把播放器隐藏0~100设定音量大小隐藏控制面板“分:秒”设定歌曲开始播放的时间插入外部资源1.插入音乐插入外部资源“”()设定控制面板及其周围文字或图片的对齐方式(正常面板),(较小),(只显示播放按钮),(只显示暂停按钮),(只显示停止按钮),(只显示音量调节按钮)设置控制面板的外观插入背景音乐:<“音乐地址”“-1”(表示进行循环播放)>插入外部资源“”()设定控制面板及其周围文字或图片的对齐插入外部资源2.插入视频动画插入<“1”(封面)“1”>何时开始播放<(链接到含该标记的页面时)(当光标移动到播放区域时)>控制条<>(在窗口下方附加—的播放控制条)循环<(循环不止)>延时<(毫秒数)>插入外部资源2.插入视频动画会移动的文字基本语法<>...<>文字移动属性(1)方向:,会移动的文字基本语法会移动的文字2、文字移动属性(2)方式:(循环),(只走一次),(来回走)(3)循环:次数;若未指定则循环不止()会移动的文字2、文字移动属性会移动的文字2、文字移动属性(4)速度:(默认为6,数字越大速度越快)(5)延时:(单位是毫秒)会移动的文字2、文字移动属性会移动的文字3、其他属性(1)底色:16进制颜色代码(2)面积:(3)空白会移动的文字3、其他属性网页中的框架1常用属性:定义上下分割的框架,单位是相对大小或百分比:定义左右分割的框架,单位是相对大小或百分比:取值为,,;是否显示滚动条:禁止在浏览器中调整框架大小
网页中的框架1常用属性网页中的框架2的属性:设置各窗口调用的网页地址:取值为,,1,0;各窗口边框的设置:框架边框的宽度设置:框架边框的颜色设置网页中的框架2的属性:设置各窗口调用的网页地址网页中的框架基本语法<><""><><>您的浏览器不支持框架,请考虑升级您的浏览器!<><><>网页中的框架基本语法网页中的框架分行框架分裂框架嵌套框架网页中的框架分行框架演讲完毕,谢谢观看!演讲完毕,谢谢观看!概念(超文本标识语言)是一种用来制作超文本文档的简单标记语言。用编写的超文本文档称为文档。概念(超文本标识语言)文档的编写方法手工直接编写记事本等,存成格式使用可视化编辑器、等由服务器(或称服务器)一方实时动态地生成。文档的编写方法手工直接编写网页文件命名*或*无空格无特殊符号(例如&符号),只可以有下划线“_”,只可以为英文、数字区分大小写首页文件名默认为:或网页文件命名*或*文件结构<>...<><>...<><>...<>元素:是语言的基本部分。元素总是成对出现,每一对元素一般都有一个开始的标记(如<>),也有一个结束的标记(如<>)。元素的标记要用一对尖括号括起来,并且结束的标记总是在开始的标记前加一个斜杠。文件结构<>...<>文件结构
()<><><><><><><>文件的正文<><>文件结构
()<>第一张网页(01)<><> <><><><> !<><>第一张网页(01)<>基本组成部分——
元素属性元素可以有自己的相关属性,每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的<>内,并且和元素名之间有一个空格分隔;属性值用“”引起来。基本组成部分——
元素属性元素可以有自己的相关属性,每一个属第二张网页(02)<><><><><><><p"">!<><><>第二张网页(02)<>基本结构的
有关元素和元素属性元素——1
<>元素出现在文档的开头部分。<>与<>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。<><>元素定义文档的标题。<>与<>之间的内容将显示在浏览器窗口的标题栏。基本结构的
有关元素和元素属性元素——1
<>元素出现在文基本结构的
有关元素和元素属性元素——2<>元素<>元素下面可以插入很多很有用的元素属性。下面介绍四种:<"""">用来标记搜索引擎在搜索你的页面时所取出的关键词。基本结构的
有关元素和元素属性元素——2基本结构的
有关元素和元素属性元素——3<>元素<""“">用来标记文档的作者。基本结构的
有关元素和元素属性元素——3基本结构的
有关元素和元素属性元素——4<>元素<“”“;2312”>用来标记你的页面的解码方式。基本结构的
有关元素和元素属性元素——4基本结构的
有关元素和元素属性元素——5<>元素<“”“5”>用来自动刷新网页基本结构的
有关元素和元素属性元素——5练习(03)编写一个网页,要求3秒钟后自动跳转到知了网首页()。<><><><><“”“3”><><><p“”>三秒钟后本网页自动跳转到知了网首页<><><>练习(03)编写一个网页,要求3秒钟后自动跳转到知了网首页(<>元素及元素属性——1<>元素表明是文档的主体部分。在<>与<>之间,通常都会有很多其它元素;这些元素和元素属性构成文档的主体部分。<>元素及元素属性——1<>元素表明是文档的主体部分。在<><>元素及元素属性——2<>元素中有下列元素属性:(1)属性标志文档的背景颜色。如:""。例:04<>元素及元素属性——2<>元素中有下列元素属性:对颜色的控制对颜色的控制也有自己的语法。使用16进制的颜色值对颜色进行控制。16进制的数码有:0,1,2,3,4,5,6,7,8,9.对颜色的控制对颜色的控制也有自己的语法。使用16进制的颜色值颜色颜色名和值黑色”#000000”银色”0c0c0”红色”0000”蓝色”#0000”白色””黄色”00”绿色”#0000”海蓝色”#00”常见颜色的代码颜色颜色名和值黑色”#000000”银色”0c0c0”红色”<>元素及元素属性——3<>元素中有下列元素属性:(2)属性标志文档的背景图片。如:“"。可以使用的图片格式为,例:05<>元素及元素属性——3<>元素中有下列元素属性:<>元素及元素属性——4<>元素中有下列元素属性:(3)使背景图片成水印效果,即图片不随着滚动条的滚动而滚动。<>元素及元素属性——4<>元素中有下列元素属性:<>元素及元素属性——5<>元素中有下列元素属性:(4)属性标志文档的正文文字颜色。如:“6666”。元素定义的颜色将应用于整篇文档。例:06<>元素及元素属性——5<>元素中有下列元素属性:<>元素及元素属性——6<>元素中有下列元素属性:(5)超级链接颜色、、分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。例:07<>元素及元素属性——6<>元素中有下列元素属性:<>元素及元素属性——7<>元素中有下列元素属性:(6)和设置网页主体内容距离网页顶端和左端的距离如:"20""30“例:08<>元素及元素属性——7<>元素中有下列元素属性:文字标签属性——1文字属性标记1.文字颜色指定颜色<>...<>16进制数码例:09文字标签属性——1文字属性标记文字标签属性——2文字属性标记2.文字字体<“#,#,...,#”>...<>
客户端可获得的字体10文字标签属性——2文字属性标记文字标签属性——3文字属性标记3.文字大小<>...<>1,2,3,4,5,6,7,例:11文字标签属性——3文字属性标记文字标签属性——4文字属性标记4.文字标题<>...<>1,2,3,4,5,6例:12文字标签属性——4文字属性标记文字布局行的控制段()(可以看作是空行)<p>空白占位符;例:13文字布局行的控制文字布局行的控制的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话,就要用到另一个元素,即<>元素。<>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<>元素不是成对出现的。例:14不换行<> 15文字布局行的控制文字与段落格式控制<>……<i>倾斜文本<><b>粗体文本<><u>下划线文本<> <s>删除线文本<>……<>例:16文字与段落格式控制<>……基本组成部分—注释文档可以插入注释。注释内容不会在浏览器窗口显示注释的格式为:
<注释内容>
<多行注释内容>例:17基本组成部分—注释文档可以插入注释。注释内容不会在浏览器窗口文字的对齐<>...<>(1,2,3,4,5,6)<p>...<>(,,)例:18文字的对齐<>...<>(1,2,3,4,5,6)文字的分区显示<>...<>(,,)文字的分区显示<>...<>3段落与分行控制居中<>元素<>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的“”类似
例如:<>居中段落<>3段落与分行控制3段落与分行控制标尺线 <=#>:设定线宽 <>:设定线长 <>:设定对齐方式, <>:设定线的颜色例:193段落与分行控制标尺线3.的段落与分行控制无序列表元素—1
列表在的文档里有重要的地位规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。3.的段落与分行控制无序列表元素—1
列表在的文档里有重要3.的段落与分行控制无序列表元素—2无序列表是由<>和<>元素定义的:<><><><><><><><><><>例:203.的段落与分行控制无序列表元素—23.的段落与分行控制无序列表元素—3无序列表的默认符号是圆点。
<>元素有属性,通过定义不同的属性可以改变列表的项目符号。目前,属性的属性值有:
(圆)、(圆圈)、(方块)例:203.的段落与分行控制无序列表元素—33.的段落与分行控制有序列表元素—1有序列表由<>和<>定义:<><><> <><> <><><>例:203.的段落与分行控制有序列表元素—13.的段落与分行控制有序列表元素—2
<>元素也有自己的属性,属性的属性值有1、A、a、I、i等。例如,我们以A、B、C……作为列表的编号
例:20<>元素还可以定义列表的起始编号,如我们希望列表的第一个编号为5,而不是1,则需要定义<>元素的属性例:203.的段落与分行控制有序列表元素—2
<>元素也有自己的属4.超级链接—普通超级链接1超级链接是整个应用的核心和基础。如果没有超级链接的概念,那么,我们现在所有的的应用将不复存在。所以,对超级链接的掌握具有特殊重要的意义。4.超级链接—普通超级链接1超级链接是整个应用的核心和基础。4.超级链接—普通超级链接2超级链接是用锚元素<a>定义的在<a>元素下,有元素属性的属性值为一个地址如:<a“”>指向知了网的超级链接<>如:<a“15">普通超级链接<>例:214.超级链接—普通超级链接2超级链接是用锚元素<a>定义的4.超级链接—超级链接超级链接可以指向地址如:<a“:983239372">指向地址的超级链接<>例:214.超级链接—超级链接超级链接可以指向地址4.超级链接—新开链接窗口开一个新的(浏览器)窗口()<a""“">...<>例:214.超级链接—新开链接窗口开一个新的(浏览器)窗口()4.超级链接—去除下划线去掉超级连接的下划线:“:”例:214.超级链接—去除下划线去掉超级连接的下划线:“:”4.超级链接——其他超级链接应用仅仅是应用的一种还有其他很多应用,如:等。实际上也属于非应用。我们可以类似的创建指向等的超级链接;指向其他应用的超级链接不是我们掌握的重点。4.超级链接——其他超级链接应用仅仅是应用的一种还有其他很4.超级链接——锚点(书签)1<a""><a"">指向本页面锚点的超级链接<>例:21<a“23”>指向23页面的锚点的超级链接<>例:214.超级链接——锚点(书签)1<a"">练习:标注出学校首页的静态代码练习:标注出学校首页的静态代码对图片的控制1基本语法:<“图片名称”>引用图片必须用<>元素标志。<>元素下的基本元素属性是属性,的属性值为所引用的图片的地址。属性是必须的。的可以是绝对地址,也可以是相对地址例:22对图片的控制1基本语法:对图片的控制2所谓图片的替代文本,指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。定义图片替代文本的方法是:<“图片名称”“这是一张图片”>例:23对图片的控制2所谓图片的替代文本,指图片不能显示时在图片所在对图片的控制3图片的显示大小我们可以指定一幅图片在浏览器窗口里的显示大小。定义图片的显示大小的方法是:<""100100>指定图片的宽度,指定高度。它们的属性值可以是象素,也可以是%。例:24对图片的控制3图片的显示大小对图片的控制4图片的边框我们可以为一幅图片加一个边框以突出显示:<"""2">的属性值为象素数例:25对图片的控制4图片的边框对图片的控制5图片的对齐方式图片可以相对于页面或单元格有一个对齐方式。定义水平对齐方式的方法是:<“”“”><“”“”>例:26对图片的控制5图片的对齐方式对图片的控制6图片的对齐方式定义图片的垂直对齐方式:<""""><""""><"""">对于图片的对齐方式不仅是以上几种,但是以上的几种是最常用的。例:26对图片的控制6图片的对齐方式对图片的控制7定义图片与左、右的文本之间的间距图片在显示时,与左右的文本之间可以有一定的间距<""55>()定义水平间距;()定义垂直间距。单位都是象素数.例:27对图片的控制7定义图片与左、右的文本之间的间距对图片的控制8图象的超级链接图象的超级链接是指整个图象的超级链接,当点击图象的任何部分时,都会打开这个超级链接。定义默认超级链接的方法是:<a“”><""><>所以,所谓超级链接实际上就是用<a>元素标志一个图象的引用;例:28对图片的控制8图象的超级链接一月二月三月120010001500单元格(用<>来表示,每个单元格可以有背景颜色和背景图片)表格(用<>来表示,表格可以有背景颜色、背景图片)表格边框每一行可以用<>来表示,单元格放在行中,每行可以有很多的单元格。表头(用<>来表示,表头是特殊的单元格,其中的文字加进去之后默认是居中并且加粗)一月二月三月120010001500单元格(用<>来表示,每表格()标记1<>元素:定义一个表格。每一个表格只有一对<>和<>,一张页面中可以有多个表格。<>元素:定义表格的行,一个表格可以有多行,所以<>对于一个表格来说不是唯一的。<>元素:定义表格的一个单元格。每行可以有不同数量的单元格,在<>和<>之间是单元格的具体内容。需要注意的是:上述的三个元素必须、而且只能够配对使用。缺少任何一个元素,都无法定义出一个表格。表格()标记1<>元素:定义一个表格。每一个表格只有一对<表格()标记2表格的基本结构<>定义表格<> <>定义表头<><><>定义表行<>…<>定义单元格<><>表格()标记2表格的基本结构表格()标记2练习尝试写出这个表格的代码例:11...2...3...4...5...6...7...8...表格()标记2练习1...2...3...4...5...6表格()标记3表格的属性–1属性:指定表格或某一个表格单元格的宽度。单位可以是%或者象素。属性:指定表格或某一个表格单元格的高度。单位可以是%或者象素。属性:表格边线粗细例02表格()标记3表格的属性–1表格()标记2表格的属性–14、属性:指定表格或某一个单元格的背景颜色。5、属性:指定表格或某一个单元格的背景图片。其属性值为一个地址。例:03表格()标记2表格的属性–1表格()标记3表格的属性–26、属性:指定表格或某一个单元格的边框颜色。例:047、属性:亮边框的颜色8、属性:暗边框的颜色例:05表格()标记3表格的属性–2表格()标记3表格的属性–29、属性:指定表格或某一个单元格里的内容(文本、图片等)的对齐方式。例:06表格()标记3表格的属性–2表格()标记3表格的属性–210、属性:单元格间距。例:0611、属性:单元格边距。例:06表格()标记3表格的属性–2表格()标记4单元格属性1、属性:指定某一个单元格里的内容(文本、图片等)的垂直对齐方式。垂直对齐方式的属性值包括::顶端对齐;:居中对齐;:底端对齐;:相对于基线对齐;例:07表格()标记4单元格属性表格()标记5单元格属性2、:属性值表示当前单元格跨越几列例:83、:属性值表示当前单元格跨越几行例:8表格()标记5单元格属性表格进阶表格的嵌套在<><>之间插入表格,实现表格嵌套例:9表格的作用一般只是控制文本和图像的显示,而不显示表格的边框表格进阶表格的嵌套综合案例表格的综合使用利用表格做一张你的课程表做一张最近来访的表格综合案例表格的综合使用表单()标记表单是页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。在里,我们可以定义表单,并且使表单与或等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。表单()标记表单是页面与浏览器端实现交互的重要手段。利用表单表单()标记表单是网页上的一个特定区域。这个区域是由一对<>元素定义的。<>元素属性:用来定义表单处理程序(一个、等程序)的位置(相对地址或绝对地址)。定义表单结果从浏览器传送到服务器的方法,一般有两种方法:、。表单()标记表单是网页上的一个特定区域。这个区域是由一对<>表单()标记表单是网页上的一个特定区域。这个区域是由一对<>元素定义的。<>元素属性:规定了用表单传递信息时的编码格式,有和两种选择,前者是默认值,后者一般在表单需要提交文件信息的情况下使用表单()标记表单是网页上的一个特定区域。这个区域是由一对<>表单()标记表单的基本语法:<""*>
...<><><>*有数据量限制,无以上限制,以文件形式传输表单()标记表单的基本语法:表单()标记例:输入以下代码,定义一个基本菜单,并以方式实现提交<:983239372><>表单()标记例:输入以下代码,定义一个基本菜单,并以方式实现表单()标记元素元素是与输入相关的元素,它是一个空元素,因此在其末尾必须添加斜杠“/”。元素有一个重要的属性,该属性决定了的元素类型表单()标记元素表单()标记(1)文本框,“”,用于控制用户仅输入一行文本:控制输入文本框所显示的长度,单位为字符:控制允许最大输入的字符长度,单位为字符:通过表单传递出去的变量的名称:即变量的值,是在表单提交的瞬间,在该输入框内的字符串(如果在元素中定义该属性,则表示设定了输入框的初始值)11表单()标记(1)文本框,“”,用于控制用户仅输入一行文本表单()标记(2)密码框,“”,用户输入时所显示的密码是屏蔽号11(3)隐藏条目,“”,用于输入框不见,但仍然有和属性,一般用于不需要用户填写或选择,变量值已知,又需要将变量发送出去的情况11表单()标记(2)密码框,“”,用户输入时所显示的密码是屏蔽表单()标记(4)复选框,“”,一般由若干个复选项组
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- YY/T 1949-2024人工智能医疗器械数据集专用要求:糖尿病视网膜病变眼底彩照
- 度合同制速记服务与保密全文
- 水产养殖合同范本专业版
- 租赁合同范本:车辆租赁协议
- 建筑设计服务合同样本版
- 生态林地保护承包合同书样本
- 企业贷款合同、利息计算标准
- 企业风险控制反担保合同模板
- 公租房解除合同范本
- 化工原料采购合同范本大全
- DLT 5630-2021 输变电工程防灾减灾设计规程-PDF解密
- 2024年新疆维吾尔自治区专升本考试大学政治测试题含解析
- 边坡喷锚施工工艺
- 2016-2023年娄底职业技术学院高职单招(英语/数学/语文)笔试历年参考题库含答案解析
- 海鲜酒楼营销策划方案
- 电能计量装置配置规范
- 有偿义工招募方案
- 冬春季节传染病防控(流感)
- 潜在供应商审核报告模版13-02
- 《临床疾病概论》课件
- 安全生产费用使用台账
评论
0/150
提交评论