HTML语言课件

《HTML语言课件》由会员分享，可在线阅读，更多相关《HTML语言课件（40页珍藏版）》请在装配图网上搜索。

1、 HTL语言一 HTL简介二 HTML的基本标记三 TML的格式化标记四 HTM的链接标记五 HM的列表标记六 HTML的图片标记七 HTM的框架标记八 TL的表格标记九 HTML的表单标记十 HTML的层标记十一 HM的文献头标记一 HML简介1.1 什么是HTMLHTL是一种构成网页基本的语言,同步由某些简朴的英文单词构成；HT是一种超文本标记语言;HTML是由浏览器解释执行的一种语言;HTML是由成对的标记构成的。1.2 学习TML的目的HTML是WE开发的基本；HTM是电子商务平台的基本;HTML是后续学习的基本;HTM是JSP的基本。1.3 HTL的发展史993年，超文本标记语言（第

2、一版）被推出;1995年,HTL.0的原则被推出，W3推荐；99年,HTM.0推出，3推荐;199年，TML4.推出,3C推荐；199年,HTL4.1推出，WC推荐,至今为止的一种最后版本;后来，XML、XM兴起,大有取代HML之意,但是举步维艰；,HTML5.0的草案推出;，HTML5.0的第二个草案推出,W3C承认。 HTML文档构造Welcome to Web Site1.4 TL的文档构造1.5 第一种HML文档:是HTL文档的起始和结束标记；:是L文档的头标记,涉及所有网页关联内容,如字符集、核心字、搜索引擎等;til：是一种标题标记,用于控制网页标题栏的显示;:是HT的主体标记，因

3、此页面显示内容都涉及在BOY标记中;:是HML的文字标记,用于控制文字的显示；o=”red”：coor是标记的一种属性,也就意味着所有的标记都可以定制特定的属性;1.6 HTML的元素 HTL是由标记和属性两种元素构成的。1.7 推荐学习平台推荐学习网站:3cool.c.c推荐浏览器:gol、IE.、火狐、Opera、Safari。 推荐学习软件：Eus、Dreamear CS6。1.8 注意事项文献夹和文献名尽量使用英文、单词、字母、数字及其组合；网上下载的内容一律规定更改文献名;代码一定要采用缩进格式。二 HTML的基本标记 Hn标记 静夜思 床前明月光，疑是地上霜；举头望明月，低头思家乡

4、。 2.标题标记：H Hn标记是用来控制文本的标题，n的取值范畴为16，数字越大，标题大小越小，同步会产生一种换行分段的效果。. 段落标记:P P标记 静夜思 床前明月光，疑是地上霜； 举头望明月，低头思家乡。 P标记用于控制文本的分段,产生换行分段效果；P标记可以只有开始部分,即可以成为一种单标记。23 换行标记:BR BR标记 静夜思 床前明月光，疑是地上霜； 举头望明月，低头思家乡。 BR标记只是纯正的单标记。BR标记和P标记的区别:BR标记可以持续使用多种,但是标记不能。 HR标记 静夜思 作者： 李白 床前明月光，疑是地上霜； 举头望明月，低头思家乡。 4 水平线标记:HRH标记用于

5、给文字划线或者辨别上下文的关系。R标记我们可以使用idth属性控制它的宽度,使用color属性控制它的色彩，使用alin属性控制它的基本位置。 Hn标记 静夜思 作者： 李博 床前明月光，疑是地上霜； 举头望明月，低头思家乡。 2.5 注释标记!- 注释标记： 用来给设计者阐明目前位置的代码的作用，起到一种解释的效果。三 HTML的格式化标记HM的格式化标记用于控制文本的显示。 Font标记 静夜思 床前明月光， 疑似地上霜； 举头望明月， 低头思家乡。 3.1 字体标记：ont 阐明:fnt：font标记用于控制文字的字体,但是目前的网页中已经被取消了,替代它的就是我们后续课程要学到的CS；

6、face:控制文字的字体，一般状况下,不要设立特殊字体或者平时用量较少的字体;如果设立了前者，默认会以宋体的形式浮现；siz：控制文字的大小，一般状况下,可以使用默认形式或者像素大小来描述;如果采用默认形式，iz的取值范畴为17,默觉得2；如果采用像素大小描述,背面要加上单位p,一般范畴取值为9p或者12p;3. 格式化标记：一组标记 格式化标记 静夜思 床前明月光， 疑似地上霜； 举头望明月， 低头思家乡。 格式化标记用于控制文字的某些特殊属性,如：上标、下标、加粗、倾斜等，但是有诸多标记事实上已经不常用或者被同化掉。除了标记和u标记以外, 常用的格式化标记尚有big、ma、sub等。3 预

7、解决标记：R PRE标记 静夜思 床前明月光，疑似地上霜； 举头望明 月，低头思 家乡。 PE标记是将网页设计的文档内容保持,并以网页的形式在浏览器中解释执行，但是它会使文字缩小。.4特殊字符标记:&在ML中,由于有诸多的字符无法直接在文本文档中输入或者无法直接被浏览器解释，因此需要将此类字符以特殊的形式浮现；如：空格、红桃等。在HTML中定义了以&开头的特殊字符。如：空格：bsp; :> 红桃：harts;35 其她文字标记kbabb四 HML的链接标记HTML的链接标记是HTM标记中最重要的一种标记,也是HTML页面之间唯一的切换方式。TM的链接方式在目前的网页设计中有诸多种,但是在

8、本学期的网页设计中,我们只针对静态页面进行解说,因此，只波及到两大类链接。1. HM链接的重要方式 外部链接：通过链接可以切换到或者跳转到其她网站或者其她网站的某个页面。格式：链接名称/a 外部链接 新浪网新浪网其中：URL地址是指具体的网页的网络地址或者网页的I地址。 内部链接：通过链接可以切换到或者跳转到目前网站的其她页面或者目前页面的其她位置。格式:ahre=”链接页面相对地址（相对途径)”链接名称/a 内部链接1 第一种页面第二个页面2. HTM内部链接的具体体现1) 链接到目前网站的某一种页面:此类链接操作比较简朴，其体现形式为内部链接的基本形式。2) 链接到目前网站的某一种文献或图

9、片： 内部链接2 下载WORD文档打开图片显示图片此类链接操作体现形式有多种，例如：下载文献、显示图片、打开图片。3) 链接到目前网站的目前页面的某一种位置或其她页面的某一种位置：此类链接操作体现形式也被称为“锚接”,也称为“书签链接”。其具体体现格式为:命名锚:a ne=”锚名”指定锚名链接锚：链接名称 内部链接2 春天   |    夏天   |    秋天   |    夏天第一种页面:rsthtm 内部链接2 春天 夏天秋天冬天第二个页面:scond.htl此类链接还

10、可以体现为同一种页面中内容的跳转。3. ML链接的链接技巧1) 设定链接目的：在设立链接时,可以通过ARGET属性链接目的显示的方式。默认状态下,显示方式有四种,分别是:_bak：在新窗口中打开_paent:在父级框架集中打开（仅针对于框架)_sef:在目前窗口中打开tp:在目前的窗口主体打开除此以外,还可以通过设定框架集中的子框架的nme属性设定链接目的。如：a hre=”first.t” tage”_lnk”第一种页面a2) 使用键盘快捷键实现链接:在设立链接时,可以通过ACSKE属性设定键盘快捷方式打开链接。如:第一种页面（At+）/3) B键的使用：在设立链接时，可以通过ABINDEX

11、属性设定TAB快捷键的逻辑方式。如:a ef=”frsthtml” tabind=”1”第一种页面/ar第二个页面/a第三个页面4) 变化链接颜色:在设立链接时，可以通过ODY标记的l属性设定链接的色彩。4. 相对途径与绝对途径相对途径:相对途径是指从目前页面出发到链接目的的计算机实际逻辑途径。目前页面是不断变化的，相对途径也是不断变化的。绝对途径：绝对途径是指从计算机根目录出发到链接目的的计算机实际逻辑途径。计算机根目录是不变的，绝对途径是不变的。五 TM的列表标记 列表标记是目前网页中大量采用的一种标记形式，应用于网页目录显示、标题栏标题等。列表标记包涵：有序列表、无序列表和自定义列表（定

12、义列表）。1.列表的种类有序列表:ol无序列表:ul,mn，dir定义列表：dl2.列表的实现)有序列表按照一定的顺序将内容排列，并且有指定的序列号;格式：ol /l或 li li /o其中，li标记代表了有序列表的每一种列，即列数；有关属性:type属性：这个属性可以用于ol或li标记;如果用于ol则表达整个列表的序列号类型;如果用于l则表达目前列的序列号类型；此属性有5个默认选项,分别为：,A,，i。tart属性和alue属性:此类属性效果完全一致,tart属性用于o标记，aue属性用于i标记,用于控制序列号的起始值； New Document 第一章 第二章 第三章 “就近原则”2)无序

13、列表无序列表是将内容按照一定的方式排列,使得内容看上去整洁；格式:和有序列表是完全一致的。ul li 或 l lil mu、di和l标记的使用效果是完全一致的。有关属性:te属性:可以用于或li标记，默认有四种类型：实心圆disc;空心圆circle；实心方块和空心方块sqare; New Document 第一章 第二章 第三章 第一章 第二章 第三章 第一章 第二章 第三章 “显示效果与浏览器密切有关”3）定义列表定义列表用于名词或者有关术语的解释，由于有诸多标记可以替代它,因此目前的网页设计中使用量很少。格式: -名词 d -用于阐明解释 -dd可有可无,可多可少 d 3列表标记的复合使

14、用将多种不同的列表标记或者相似的列表标记混合使用;不管如何去嵌套或者复合使用，都只是在相应的或dt/d标记之后加入一种新的列表标记,同步一定要注意好缩进格式。4.使用有关图片来做列表标记的序列标示一般会使用无序列表，在后续的CS课程中我们将进一步阐明。六 HM的图片标记图片标记是HML标记中最常用的标记,也是网页中用量最多的一种标记。1. 图片标记的基本格式格式： 其中：img是图片标记,rc是图片的寄存途径即相对途径。2. 图片标记的有关属性1) alt属性:这个属性在图片显示成功时,会在鼠标的右下角浮现lt属性所相应的文字或在图片显示不成功时，会在图片显示位置的左上角显示属性所相应的文字;

15、img src”marth.jp” al=”星球”2) border属性:这个属性用于控制图片的外框,这个属性在最新的HTM中已经不使用的。3) eiht和id属性:这两个属性用于控制图片的宽度和高度。4) al属性:（慎用）这个属性可以控制图片的位置,也可以控制图片与文字的对齐关系。左右 lft nt rih上下 top iddle bottom注意:ign所显示的效果是与文字相相应的,但是它无法实现复杂的图文显示效果，复杂的图文显示需要通过表格或层来实现；当alig的属性是设立cetr或midle时，效果规定文字在图片的中间,那么这个效果是以图片的中轴线为基线的；5) space和hsac

16、e属性:这两个属性是控制图片距离左右上下的距离,即在左右上下形成一种指定宽度的空白空间,这两个在最新的HTML的已经不使用了。6) dynsrc属性：这个属性可以使得图片标记播放avi等视频文献，但是能不能正常播放与浏览器和视频自身有一定关系。7) start属性:这个属性控制m播放的视频,它有两个属性：leopen：文献打开时播放moueoer：鼠标滑过时播放3. 图片标记的特殊使用-图片映射由于在实际中有诸多的图片具有特殊性,如:地图、气象图、星云图等，这种特殊的图片往往我们需要在一种图片中实现多种不同的链接,在这种状况下，我们需要采用图像映射的方式来实现此类特殊操作。在使用图像映射时，我

17、们需要掌握如下几种方面的内容:1） 图片的形状；2） 图片的图像解决操作；3） 可以记住图像的坐标。 New Document 实际操作是复杂的,我们可以借助某些软件来设计。4. HTML的色彩这里重要是简介TL中两种色彩的来源，一种是通过图片，一种是通过直接的颜色选择。以BDY为例:如果BODY标记的背景是一种图片，那么使用bakground属性定义一张图片；如果O标记的背景是一种颜色，那么使用bgclr属性来定义。问题:如果将一种图片设立为背景图片,那么如果保证这张图片不会反复浮现？那么在设立色彩时,我们可以通过三种方式来设立：1） 英文 d，yellw2） RGB色 #fffff，#98

18、ffa3 范畴：00000#fffff七 HTM的框架标记框架标记是HM的页面布局三大标记之一。框架标记目前使用量很少，重要用于后台页面的设计、特殊页面的设计。目前重要的框架标记是framee标记，但是尚有一种标记用于局部页面的框架,即ra标记。1. 框架标记的格式框架标记与我们此前学到的标记不同样,框架标记不属于任何标记，即不可以放在BO标记中；此外,框架标记不涉及任何实质的内容。一旦使用了框架标记,那么意味着，你的页面构造大小等同于你的屏幕大小。2. 框架标记的有关属性1) r和cols属性:ows和cols属性控制框架的格子划分。ws属性:将整个页面水平分割。在使用时，我们一般书写格式为

19、：rows=” 10x ,00 ， ”其中,划分除了可以采用像素的形式以外，还可以采用比例形式。不管何种形式，最后一格都要使用*号。 使用row属性时，在framest标记里面,需要与之匹配同等数量的fame标记。 cos的使用与rows完全一致,将整个页面垂直分割。 一旦使用了rows或cols属性，将不可逆。一旦分割，分割后的子格子互相无关联。 同步,rws属性和cols属性可以嵌套使用,即在已经分割的格子下继续分割。 在嵌套使用时，我们只需要将需要再次分割的格子相应的frame标记替代为amet，即可。2) frmebordr属性:这个属性用来控制框架的边线与否显示。其默认值为0/1。但

20、是，看不见不意味着没有。3) borr属性：这个属性用来控制框架的边线的宽度。默认值为。4) brcolor属性:这个属性用来控制框架的边框的颜色。5) magnheight和mrgiwdt属性：这两个属性用来控制框架的边线与格子中内容的间距。6) scrollng属性：这个属性用于re标记,是的单个的格子可以有滚动条，其默认值为：yes、o、auo。7) noesize属性:这个属性严禁框架的边线的移动,也是用于frame标记。8) nae属性：这个属性用来定义格子的名称。3. 框架的内容框架自身是没有内容的，它的所有内容都是其她页面的。4. 框架内的链接形式框架标记要实现内容显示,必须要使

21、用链接。在框架标记中，链接重要有两种形式：1） 直接使用sr属性来链接：frasc”2） 框架内页面的跳转链接:在框架里面实现页面跳转到想要的地方。在实现这种页面跳转时，我们需要先将框架中的格子命名;然后将超级链接的ARGET属性指向格子名称。在EDIPLUS中使用框架和在DWCS6中措施不同样。5. 其她注意事项在目前的网络中，诸多浏览器已经不支持框架,使用框架标记的页面无法正常显示,因此,我们需要在rmeet的背面加上rmes标记进行有关阐明。fameset ws50px，00px,* ramborde=0 brde=0px /mse 浏览器版本过低，请使用IE.0以上的版本 /nofra

22、es6. fram标记fam标记的使用格式类似于img标记,它可以实目前页面的局部位置的框架，但是ame标记不可以乱用,否则会导致严重的后果。格式:除此以外，irame标记还可以与CSS以及脚本联合操作。使用:必须使用在bdy标记之中。八 HML的表格标记表格标记是目前网页设计和网站应用里波及面最广、使用量最多的一种HTML标记。1 表格标记的基本格式 -表格标记 tr/tr -行标记 tr /th-标题单元格标记 ttd -一般单元格标记 tr/tr /tble2 基本属性和使用措施建立一种4行列的表格: ale ttd/d/dd/t td/td/td td/ttddtdtdd /tr td

23、/tdtr 建好后来我们发现,无法正常显示，那么必须添加有关属性,有关属性如下:1)bodr:建立表格的边框;2）规定在所有的标记中放入内容，如果没有内容,也必须填入&nbs;)celpadig：用来控制单元格的内容与单元格的边框的距离；4）cllspacin：用来控制表格的外框和内框的距离；)bodrclor：用来控制边框的颜色；6)widh和hgt：用来控制表格的大小;这两个属性可以用于tabe、tr三种标记,但是只有在tb可以同步存在，在t中只能有heght，在td中只能有with；如果是作为整个页面布局来进行设计,我们规定严格控制宽度,不能不小于或等于屏幕辨别率的宽度;如果在一种表格的

24、同一列的每一种单元格都设立wdth会怎么样?如果我们已经设立了一种表格的整体的高度和宽度,那么如果我在表格的每一行或每一列也设立高度或宽度，并且只有整体的一半，会如何?)bckround和bgolr:用来设立背景图片和颜色的,可以用于table、tr、td之中；当我们使用bakrond设立背景图片时，我们是无法控制背景图片大小的，因此需要选择合适的图片做背景；)owpan和colsn:用于合并单元格；在HTML中，表格的合并和拆分和我们平时所熟悉的or是不同样的，在HTM中,表格默认只有合并,没有拆分；此外，合并不是简朴的合二为一,而是一种占有,即合并时，被合并的单元格所相应的td标记要删除掉

25、。试图设计下面的这个表格形式:23513）aign和valig：控制水平方向和垂直方向上文字的对齐方式；这两个可以使用在table、tr、td标记之后；1）rame：11）rule:）tdy、thea、tfot：重要是针对表格的人性化而言的，自身不具有具体的内容。3.表格的使用行为1） 单表格使用一般会在tl标记之后加入一种caion标记,用来作为表格的表头/caption2） 表格的叠加3） 表格的嵌套嵌套的表格放置于td标记中；一般在进行网页布局设计时，我们会采用表格叠加和表格嵌套混合使用的方式来进行设计九 HTL的表单标记表单是TML中很重要的一种标记，也是HTML里面唯一与后台服务器有

26、关的一种标记。顾客登记 顾客登记 亲爱的顾客，欢迎您访问我们的网站，请填写您的个人信息，便于我们及时与您联系。 姓名：年龄：性别：男 女 文化限度： 小学 高中 大学 职业： 医疗 公务员 在读学生 E-mail: 你的爱好： 电影 运动 音乐 跳舞 阅读 上网 聊天 交友 9表单标记格式格式:form id=” nm=” ethod=” aton”/frm其中：i是一种编号;name是表单的名字; mthod：是描述表单的内容如何传递到服务器的（措施）；默认值为p或e; action:是描述表单的内容传递到服务器的哪一种页面；事实上，我们如果没有服务器，我们可以测试表单时，将tion的值设立

27、邮箱地址；如:acion=mailo:。.2表单的具体体现1. 文本框:text姓名:姓名：其中,iput描述的是表单的基本内容标记； type描述的是内容的类型； nme描述的是文本框的名字; alue描述的是文本框的初始值; sie描述的是文本框的最大宽度; axeng描述的是文本框的最大字符数。2. 密码框：assod密码：密码框的属性和文本框的属性描述是完全一致的。3. 文本域：exarea个人简历：textareanmtxtarea cs100rows5 a=virtal i=textrea12346其中，textr描述表单的内容为文本域（多行文本框)； cos描述的是文本域的宽度;

28、 rows描述的是文本域的行数（高度）; wrp描述的是文本域的换行方式；默认值为:默认、off(关)、virtual(虚拟)、psical（实体)； 文本域的初始值没有相相应的属性;4. 按钮：btton在HTML的表单中，按钮只有两类形式：一类是确认按钮,用来确认你输入的内容为对的的，并提交服务器,如:提交、确认、下一步、完毕、注册、登陆等;一类是撤销按钮,用来取消输入内容，如:取消、撤销、关闭、上一步、退出等。按钮的实现形式有三种：（基本类型)第一种,采用表单中默认的按钮形式：inpt yp=bmit name=tiio vale=拟定 /其中：type描述按钮的类型:sumit为确认按

29、钮;se为撤销按钮；下一步 alue描述按钮的名称;上一步一步第二种,采用图片来实现按钮操作:一方面，我们需要制作一张图片或者寻找到一张用于按钮实现的图片;将图片放入到表单中相应的位置；使用超级链接标记（a标记)来实现。ig rc=qure.pgwith=4pxheight=5x/a hef=# 第三种，采用表单默认的图片按钮：(图像域)5. 单选按钮(单选框)：rdi政治面貌:nt tpe=rdio name=o vluegdy /中共党员npt type=radio me=rdio va=t 共青团员 input type=ra nae=rdovlermqz/人民群众br其中，type描述

30、表单的内容为单选按钮； ame描述的是单选按钮的组别； 注意: 如果多种单选按钮为同一组选择,则应当保证她们的nam一致；否则会导致多选; 如果多种单选按钮不在同一组选择,则应当保持不同组的name要不一致；政治面貌:br /中共党员 共青团员 人民群众性别:男 女br / lue描述的是单选按钮的名称; cee描述默认选择项,每一组单选按钮最多只能有一种cheked;6. 多选按钮（复选框)：heb你的爱好：b 电影运动音乐跳舞阅读聊天交友7. 下拉列表（菜单)/多选列表（列表）：select / opio出生年月:selt nae=sect 1981/option 182 983 opti

31、oalue=184194年1 option vlue=2 3 option vlue=44月其中，slc用来控制列表的框架；option用来控制列表中的值；除此以外,我们还可以通过option的seected属性来设立默认选项；如果我们需要将一种列表设立为多选列表,唯一需要修改的是在select标记后加入ultil=ulipl属性和iz属性控制多选列表的行数即可。8. 文献上传：ile上传图片：其属性和文本框属性的用法一致。9. 定义域集合（字段集）：fildset /legend在表单中,我们往往需要将某某些内容独立开来,对于这样的操作,我们可以用定义域集合的方式来实现。ieleinputyperdio nae=radio augdy /中共党员 inpt typeradio name=rio vale=gqy/共青团员 iput type=radio nameadiovurqz /人民群众fieldseleend你的爱好/legend电影运动pu typecheboxname=aihao alue=usc音乐跳舞上网聊天i