常见HTML元素用法

,*,单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,3.5 HTML,文档的结构,3.5.1,文档结构简介,HTML,一个HTML文档实例通常由2个部分组成,一个说明性的文档头由HEAD元素所界定，HTML文档头中包含了有关当前文档的信息，例如，对于搜索引擎有用的title,keywords等，以及其它一些不属于文档内容的数据,一个文档体包含了文档真正的内容，由BODY元素或Frameset所实现,An simple example,hello.html,1,3.5 HTML,文档的结构(续),3.5.2,文档头,TITLE,元素与,title,属性, TITLE元素,每个HTML文档在文档头部分必须有一个TITLE元素，该元素可用于概括文档的内容，浏览器通常将TITLE元素显示在文档窗口的标题中,title,属性,在HTML文档中，有些元素具有title属性，作者可以使用该属性来为元素提供概括信息，浏览器可以采用多种方式来显示该属性，例如，作为tool tip (a short message that appears when the pointing device pauses over an object)., 示例,参见,structure,2,3.5 HTML,文档的结构(续),META,元素,meta是用来在HTML文档中模拟HTTP协议的响应头报文。meta 标签用于网页的与中，meta 标签的用处很多。,meta 的属性有两种：name和http-equiv。,3,3.5 HTML,文档的结构(续),1. ,用以说明生成工具（如Microsoft FrontPage 4.0）等,2. 向搜索引擎说明你的网页的关键词,3. meta name=DEscription content=“Military, weapon, missile告诉搜索引擎你的站点的主要内容,4,3.5 HTML,文档的结构(续),4. 告诉搜索引擎你的站点的制作的作者,5. ,其中的属性说明如下：,设定为all：文件将被检索，且页面上的链接可以被查询；,设定为none：文件将不被检索，且页面上的链接不可以被查询；,设定为index：文件将被检索；,设定为follow：页面上的链接可以被查询；,设定为noindex：文件将不被检索，但页面上的链接可以被查询；,设定为nofollow：文件将不被检索，页面上的链接可以被查询。,5,3.5 HTML,文档的结构(续),1. 和 用以说明主页制作所使用的文字以及语言,2. 定时让网页在指定的时间n内，跳转到页面；,3. 可以用于设定网页的到期时间，一旦过期则必须到服务器上重新调用。需要注意的是必须使用GMT时间格式；,4. 是用于设定禁止浏览器从本地机的缓存中调阅页面内容，设定后一旦离开网页就无法从Cache中再调出；,Meta,程序见,structure,6,3.5 HTML,文档的结构(续),3.5.3 文档体,HTML文档的主要内容,bgcolor - 背景色彩,text - 非可链接文字的色彩,link - 可链接文字的色彩,alink - 正被点击的可链接文字的色彩,vlink - 已经点击(访问)过的可链接文字的色彩,#=rrggbb,色彩是用 16 进制的 红绿蓝(red-green-blue, RGB) 值来表示。16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.,7,3.6 字体,3.6.1标题字体(Header), . #=1, 2, 3, 4, 5, 6,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！ 今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,- 这些标记显示黑体字。,- 这些标记自动插入一个空行，不必用 标记再加空行。因此在一行中无法使用不同大小的字体。,8,3.6字体(续),3.6.2字体大小, . #=1, 2, 3, 4, 5, 6, 7,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,今天天气真好！,9,3.6字体(续),3.6.3物理字体,: black,:italic,:underline,and so on,10,3.6字体(续),3.6.4字体颜色, . ,#=rrggbb,色彩是用 16 进制的 红绿蓝(red-green-blue, RGB) 值来表示。16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.,11,3.7,文字布局,3.7.1行的控制,-段(Paragraph) ,你好吗？很好。,你好吗？,很好。,-换行 ,你好吗？很好。,你好吗？,很好。,-不换行, content ,12,3.7,文字布局(续),3.7.2文字的对齐,.,.,#=left, center, right,13,3.7,文字布局(续),3.7.3文字的分区(Division)显示, . ,Can you feel happiness without unpleasant? Please show me your smile.,14,3.7,文字布局(续),3.7.4 列表,无序列表 .,TodayTommorow,有序列表 .,TodayTommorow,定义列表(Definition lists) .,TodayToday is yesterday.TomorrowTomorrow is today.,15,3.7,文字布局(续),3.1-3.4 example,samplefont_1_4.html,16,3.7,文字布局(续),3.7.5定制列表元素,定制表中的标记 #=disk, circle, square,ONETWOTHREE,定制有序列表表中的序号 #=A, a, I, i, 1,ONE-ONE,ONE-TWO,定制有序列表表中的序号的起始值 #=number, ONE-ONE ONE-TWO,17,3.7,文字布局(续),3.7.6,预格式化文本.,Please use your card.VISA MasterHere is an order form.FaxAir Mail,Similar tags: listing, xmp.,18,3.7,文字布局(续),3.7.7 其他,块引用 .,Her Song:When I was young, I listened to the radio waiting for my favorite songs.,19,3.7,文字布局(续),Example of 3.5-3.7,samplefont_5.html,20,3.8 图像,3.8.1 链入图象的基本语法, #=图象的 URL, #=在浏览器尚未完全读入图象时，在图象位置显示的文字。,21,3.8 图像(续),3.8.2图象和文字的对齐, #=top, middle, bottom,4.3图象在页面中的对齐/布局(Floating Image),4.4边框, #=value,22,3.8 图像(续),4.1-4.4 example,sampleimage.html,23,3.9,表单,3.9.1基本语法,表单的基本语法,. . ,*=GET, POST,表单中提供给用户的输入形式,*=text, password, checkbox, radio, image, hidden, submit, reset,*=Symbolic Name for CGI script,24,3.9,表单(续),3.9.2文字输入和密码输入,*=text, password,您的姓名:,您的主页的网址:,密码: , ,25,3.9,表单(续),3.9.3复选框(Checkbox) 和 单选框(RadioButton), Banana, Apple, Orange, ,26,3.9,表单(续),3.9.4,列表框(Selectable Menu),基本语法, .,Banana Apple,Orange, ,27,3.9,表单(续),3.9.5,文本区域, . , , ,28,3.9,表单(续),表单例程,sampleform.html,29,3.10,表格,3.10.1,表格的基本语法,. - 定义表格 - 定义表行 - 定义表头 - 定义表元(表格的具体数据),带边框的表格：, FoodDrinkSweet ABC,30,3.10,表格(续),3.10.2,跨多行、多列的表元(Table Span),跨多列的表元, Morning Menu,Food Drink Sweet,ABC ,跨多行的表元,31,3.10,表格(续),3.10.3表格尺寸设置,边框尺寸设置： ,表格尺寸设置： ,表元间隙设置： ,32,3.10,表格(续),3.10.4,表格内文字的对齐/布局,水平方向, #=left, center, right,竖直方向, #=top, middle, bottom, baseline,33,3.10,表格(续),3.10.5表格在页面中的对齐/布局(Floating Table),34,3.10,表格(续),3.10.6表格的标题, . #=left, center, right, . #=top, bottom,35,3.10,表格(续),Examples,sampletable.html,36,3.11 框架,3.11.1,基本语法, . , . ,在 标记后的文字将只出现在不支持 FRAMES 的浏览器中。, . ,37,3.11 框架(续),3.11.2,各窗口的尺寸设置,纵向排列多个窗口：,sampleframe1.html, ,横向排列多个窗口：,sampleframe2.html, ,纵横排列多个窗口：COLS & ROWS,sampleframe3.html, , , ,38,3.12,滚动,3.12.1基本语法, . ,啦啦啦，我会移动耶,39,3.12,滚动,(续),3.12.2文字移动属性的设置,方向 #=left, right,方式 #=scroll, slide, alternate,循环 #=次数；若未指定则循环不止(infinite),速度 ,延时 ,40,3.12,滚动,(续),3.12.3外观(Layout)设置,对齐方式(Align) #=top, middle, bottom,底色 ,#=rrggbb,16 进制数码，或者是下列预定义色彩：Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yellow, Aqua,面积 ,41,3.12,滚动,(续),例程,samplemarquee.html,42,