太原理工大学Web程序设计基础 第二章HTMLppt课件.ppt

《太原理工大学Web程序设计基础 第二章HTMLppt课件.ppt》由会员分享，可在线阅读，更多相关《太原理工大学Web程序设计基础 第二章HTMLppt课件.ppt（99页珍藏版）》请在三一办公上搜索。

1、1,HTML,田玉玲,2,HTML,3,HTML Introduction,4,Small ExampleHTML file, Title of Page This is my first homepage. This text is bold ,提示浏览器该怎么处理后面的数据,Example.html,浏览器中显示，但受到标记的约束,5,Small Example,6,Small Example,7,Explanation, Title of Page This is my first homepage. This text is bold ,tag tells your browser t

2、hat this is the start of an HTML document.,tag tells your browser that this is the end of an HTML document.,8,Explanation, Title of Page This is my first homepage. This text is bold ,The text between the tag and the tag is header information. Header information is not displayed in the browser window

3、s.,9,Explanation, Title of Page This is my first homepage. This text is bold ,The text between the tags is the title of your document. The title is not displayed in the browsers caption.,10,Explanation, Title of Page This is my first homepage. This text is bold ,The text between the tags is the text

4、 that will be displayed in the browser.,The text between the and tags will be displayed in a bold font.,11,HTML 语言的结构, 浏览器标题栏中的内容 网页中的内容Visible text ,文件头,文件体,12,HTML 文件组成,13,HTML Elements,The HTML elements starts with a start tagThe content of the HTML elementThe HTML element ends with an end tag Th

5、is text is bold,Element content,end tag,start tag,14,Tag Attributes,15,Small Example1, Title of Page This is my first homepage. This text is bold ,Example1.html,16,HTML Backgrounds,17, Title of Page This is a paragraph. This is a paragraph. This is a paragraph. This is a paragraph. This is a paragra

6、ph. ,Example2.html,18, Title of Page Image Background Both gif and jpg files can be used as HTML backgrounds.If the image is smaller than the page, the image will repeat itself. ,Example3.html,19,Header,Headings are defined with the to tags. defines the largest heading . defines the smallest heading

7、. HTML automatically adds an extra blank line before and after a heading .,20,Example for Header Element, Title of Page This is a heading. This is a heading. This is a heading. This is a heading. This is a heading. This is a heading. ,Example4.html,21,Header Element,对齐属性 属性名 align属性值left, center或rig

8、ht left-标题居左center -标题居中right-标题居右,22,Example for Header Element, Title of Page This is a heading. This is a heading. This is a heading. This is a heading. This is a heading. This is a heading. ,Example5.html,23,Comments in HTML,The comment tag is used to insert a comment in the HTML source code. A

9、comment will be ignored by the browser.You can use comments to explain youre the source code help you when you edit the source code at a later date.,24,Example for Comments, Title of Page This is a heading. ,Example6.html,25,Spaces, Tabs, and NewLine,Browsers that display HTML documents ignore extra

10、 spaces, tabs, blank lines, and newlines in the HTML document, If you need to specify these, you must use an appropriate (element) HTML tag to accomplish what you want to do.,26,Small Example2, Title of Page This is a heading. This is my first homepage. This text is bold This is another paragraph. ,

11、Example7.html,27,Paragraphs,Paragraphs are defined with the tag.HTML automatically adds an extra blank line before and after a paragraph.,28,Example for Paragraphs, Title of Page This is a heading. This is my first homepage. This text is bold This is another paragraph.end ,Example8.html,29,Paragraph

12、s 属性,对其属性 属性名align属性值left, center或right left-段落居左center -段落居中right-段落居右,30,Example for Paragraphs, Title of Page This is a heading. This is my first homepage. This text is bold This is another paragraph.end ,Example9.html,31,Line Breaks换行,The tag is used when you want to end a line, but dont want to

13、 start a new paragraph. The tag forces a line break wherever you place it.The tag is an empty tag. It has no closing tag.,32,Example for Line Breaks, Title of Page To breaklinesin a paragraph, use the br tag. ,Example10.html,33,Difference, Title of Page To breaklinesin aparagraph, use the br tag. ,E

14、xample11.html,34,Horizontal rule 横线,一般用于分隔同一文本的不同部分。Horizontal rule 的属性属性名size属性值n表示线宽，单位是像素属性名width属性值n表示长宽，单位是像素属性名align属性值left, right或center,35,Horizontal rule横线, ,36,Horizontal rule横线,37,Example for Horizontal rule, Title of Page The hr tag defines a horizontal rule:This is a paragraphThis is a

15、paragraphThis is a paragraph ,Example12.html,38,Example for Horizontal rule, Title of Page The hr tag defines a horizontal rule:This is a paragraphThis is a paragraphThis is a paragraph ,Example13.html,39,特殊字符,Computer Output These tags are often used to display computer/programming code Element 预排版

16、文本，浏览器在输出时，对这部分内容几乎不做修改地输出Element 居中,40, Title of Page This ispreformatted text.It preserves both spacesand line breaks.Wonderful!The pre tag is good for displaying computer code:for i=1 to 10print inext i ,Example16.html,41,Linking,HTML uses a hyperlink to link to anther document on the Web.Hyperli

17、nk 由两部分组成：指向的目标-同一文件中的另一部分，另一台主机中的一个文件，可以是动画或音乐指向目标的连接指针例如新浪网,42,Linking,HTML uses the (anchor) tag to create a link to another document .用作超链接的文字或图像The href attribute is used to address the document to link to -指向的目标The words between the open and dose of the anchor tag will be displayed as a hyperl

18、ink -指向目标的指针,43, This text is a link to a page on this Web site.This text is a link to a page on the World Wide Web. ,相对URL lastpage.htm与该HTML文件位于同一目录下,Example17.html,绝对URL 要访问的HTML文件与该HTML文件不位于同一目录下,Linking,44,Linking,With the target attribute, you can define where the linked document will be opene

19、d.Target attribute在新窗口打开连接Target=“_blank”,45, Title of Page lastpage ,Example18.html,Linking,46, Title of Page lastpage ,Example19.html,Linking,mailto: tells browser to load default email client with given address,47,Image,In HTML, images are defined with the tag.Element img attributes Attribute src

20、Image locationAttribute height Image height Attribute width Image widthAttribute alt Defines text if image cannot be displayed,48, ,Example22.html,49,Use an image as a link, You can also use an image as a link: ,Example23.html,50,HTML list 列表,List 用于例举事实，常用的列表有3种格式：无序列表 (unordered list)有序列表(ordered

21、list)定义列表(definition list),51,Unordered list,An unordered list starts with the tag. Each list item starts with the tag.The list items are marked with bullets (typically small black circles).例如 Coffee Milk,52, An Unordered List:CoffeeTeaMilk ,Example24.html,53,Ordered list,An ordered list starts with

22、 the tag .Each list item starts with the tag.The list items are marked with numbers.例如 1. Coffee 2. Milk,54, An Ordered List:CoffeeTeaMilk ,Example25.html,55,Definition list,This is a list of terms and explanation of the terms.A definition list starts with the tag. Each definition-list term starts w

23、ith the tag. Each definition-list definition starts with the tag.,56, An Definition List:CoffeeBlack hot drinkMilkWhite cold drink ,Example26.html,57,HTML Tables,Tables Organize data into rows and columns Element table Designates start of table Element trNew table rowElement th Header data cell Elem

24、ent tdTake data cell,58,HTML Tables,If you do not specify a border attribute the table will be displayed without any borders .To display a table with borders, you will have to use the border attribute .,59, Table header:NameTelephoneTelephoneBill Gates555 77 854555 77 855 ,Example30.html,60,HTML Tab

25、les,61, Vertical header:First NameBill GatesTelephone555 77 854Telephone555 77 855 ,Example31.html,62,Empty Cells in a Table,Table cells with no content are not displayed very well in most browsers.Note that the borders around the empty table cell are missing.To avoid this, add a non-breaking space

26、(,63,有通栏的表,的colspan横向栏距属性的rowspan纵向栏距属性,64, Cell that spans two columns:NameTelephoneBill Gates555 77 854555 77 855 ,Example32.html,65,有通栏的表,66, Cell that spans two rows:First NameBill GatesTelephone:555 77 854555 77 855 ,Example33.html,67,Table Attribute,tag的属性有width表宽属性heigth表高border边框宽cellspacing

27、划分表格的线的粗细cellpadding说明文本与边框的距离align说明文本输出的位置(left, center, right),border,cellspacing,cellpadding,heigth,width,68,表格颜色, tag 的属性有 bgcolor属性指定整个表格的颜色用background属性指定整个表格的背景图案tag的属性bgcolor属性指定某个单元格的颜色background属性指定某个单元格的背景图案,69, Username: ,Example34.html,Basic HTML Forms,70,Basic HTML Forms,Basic HTML Fo

28、rmsObtain input from the client Element formBegins formAttribute methodType of request Attribute action Location of processing script,71,Basic HTML Forms,In an HTML page, the FORM tag acts as a container for a specific set of GUI component.,72,Basic HTML Forms,用户在表单form中填写信息，这些信息填写后，需要发送给谁？有那个程序来处理。

29、通过tag的action属性来设定。 The forms action attribute defines the name of the file to send the content to. The file defined in the action attribute usually does something with the received input.tag 的method 属性定义了表单传送的方式post 或get HTTP协议中的两种方式。,73,Basic HTML Forms,Web clients,Form属性：Actionmethod,Web server,表单

30、Form内的信息,Web page,HTTP协议中的方法post 或get,表单form内的action指定由那个程序处理这些信息,Web page使用HTML或者XML来生成用户界面,74,HTML Forms and Input,要定义一个表单就必须以tag开始，tag结尾。然后在表单内，包含定义Form element。&,75,INPUT,The most used form tag is the tag. 用来定义表单上输入信息的输入域。 tag 有两个参数 name-用来指定输入域名称 type-用来指定输入域的类型value-用来指定输入域的初始值,text,password,r

31、adio,checkbox,submitreset,76,INPUT Text Fields,Text fields are used when you want the user to type letters, numbers.The form itself is not visibleThe width of the text field is 20 characters by defaultsize指定单行文本域的显示空间大小, First name:Last name: ,firstname,lastname,Example35.html,77,INPUT Radio Buttons

32、,Radio Buttons are used when you want the user to select one of a limited number of choices.Note that only one option can be chosen., Male:Female: ,radio,sex,Example36.html,78,INPUT Checkboxes,Checkboxes are used when you want the user to select one or more options of a limited number of choices.Che

33、cked 表示选中, I have a bike:I have a car: ,checkbox,bike,car,Example37.html,79,Submit buttons,The submit buttons triggers an HTTP request from this HTML form., ,Example38.html,80,Simple drop down box, VolvoSaabFiatAudi ,Example39.html,81,textarea,用来定义一个多行的文本输入域参数：Cols用来定文本输入域的可视宽度Rows用来定义文本输入域的可视高度,The

34、 cat is playing in gardon.,Example40.html,82,Basic HTML Forms,83, Your Name Password what is your genderfemalemaleHow old are you(select one)Under 16 years old1728 years old2945 years old4560years oldover 60 years old ,Example41.html,84,HTML Frames 框架,Frames Allow presentation of multiple documents

35、Increase usability and functionalityElement frameset Informs browser the page contains frames Attribute cols Defines number of columns Attribute rows Defines number of rows,85,The Frameset Tag,The tag defines how to divide the window into frames rows 和cols属性Each frameset defines a set of rows or col

36、umns The values of the rows /columns indicate the amount of screen area each row/column will occupy,86,HTML Frames,Frames Element frame Defines each frame Attribute name Identifying name for frameAttribute are URL location of frame,87,The Frame Tag,The tag defines what HTML document to put into each

37、 frame,Frame_a.htm,Frame_b.htm,rows或cols属性,src属性,88,The frame are not resizable,Example42.html,89,具有导航功能的frame,90,具有导航功能的frame,Frame aFrame bFrame c,Example43.html,91,具有导航功能的frame,Example44.html,92,具有导航功能的frame,Jump to a specified section with frame navigationExampleJlinkFrame.htm,93,具有导航功能的frame,Jl

38、inkFrame.htm,94,具有导航功能的frame, jump Link without AnchorLink with Anchor,jump.htm,95, link Chapter 1This Chapter explains ba bla blaChapter 2This Chapter explains ba bla blaChapter 3This Chapter explains ba bla blaChapter 4This Chapter explains ba bla blaChapter 5This Chapter explains ba bla blaChapte

39、r 6This Chapter explains ba bla blaChapter 7This Chapter explains ba bla blaChapter 8This Chapter explains ba bla blaChapter 9This Chapter explains ba bla blaChapter 10This Chapter explains ba bla blaChapter 11This Chapter explains ba bla blaChapter 12This Chapter explains ba bla bla ,link.htm,96,会移

40、动的文字,基本语法 ,啦啦啦，我会移动,Example45.html,97,会移动的文字,tag的属性文字移动属性direction属性值left, right ,up.down文字移动方式behavior属性值scroll, slide, alternate循环次数loop若未指定则循环不止(infinite),98,啦啦啦，我从右往左移！啦啦啦，我从左往右移！啦啦啦，我一圈一圈绕着走！啦啦啦，我只走一次就歇了!啦啦啦，我来回走耶！啦啦啦，我只走3趟哟！啦啦啦，我只走3趟哟！啦啦啦，我只走3趟哟！,Example46.html,99,99,Example47.html, 活动字幕内容第一行 活动字幕内容第二行 活动字幕内容第三行 ,