网络应用程序设计HTML导论(基础篇).ppt

《网络应用程序设计HTML导论(基础篇).ppt》由会员分享，可在线阅读，更多相关《网络应用程序设计HTML导论(基础篇).ppt（50页珍藏版）》请在三一办公上搜索。

1、HTML导论(基础篇),段会川山东师范大学信息科学与工程学院2006年10月,2023/7/2,参考:,2,目 录,什么是HTML文件?HTML文件示例HTML元素(elements)标签属性(attributes)基本的HTML标签标题、段落、断行、注释基本的HTML标签要点HTML文本格式化计算机输出代码地址、缩略语和引用,2023/7/2,参考:,3,目录,字符实体(Character entities)最常用的字符实体特别的字符实体HTML超链接(Hyperlink)链接到网页中的某个特定位置HTML框架(frames)框架集(frameset)标签框架单元(frame)标签框架示例H

2、TML表格(tables)表格举例,2023/7/2,参考:,4,目录,HTML列表(Lists)HTML表单(Forms)HTML图片网页背景HTML颜色(Colors)HTML 4.01快速列表,2023/7/2,参考:,5,什么是HTML文件?,HTML代表”超文本标记语言”(Hyper Text Markup Language)HTML文件(file,文档,document)包括许多小的标记标签(markup tags)这些标记标签告诉Web浏览器怎样显示HTML文件(网页)中的内容HTML文件必须取.htm或.html为扩展名(类型名),前者是由早期的系统仅支持3个字符的扩展名延续下

3、来的,后者更流行HTML文件可以使用简单(纯)文本编辑器创建和编辑Windows系统中最常用的纯文本编辑器是Notepad(记事本),2023/7/2,参考:,6,HTML文件示例,将下列内容保存为simpleHTML.htm,并用浏览器打开我的网页这是我的第一个网页.这里的文本是粗体.,2023/7/2,参考:,7,示例解释,HTML标签放在尖括号中和表示HTML文档的开始和结束和部分是文档的头部信息,它们不在浏览器的窗口中显示标签中的信息显示在浏览器的标题栏中标签中的信息将显示在浏览器的窗口中标签中的内容将以粗体显示,2023/7/2,参考:,8,新修改的HTML怎么在浏览器中未体现出来?

4、,浏览器使用缓存功能,保持着访问过的网页,这样能够极大地提高网页访问效率要经常使用浏览器的”刷新”功能显示网页的最新变化,2023/7/2,参考:,9,HTML元素(elements),HTML文档是由HTML元素构成的文本文件HTML元素由HTML标签定义HTML标签HTML标签用于标记HTML元素HTML标签由尖括号界定HTML标签通常成对出现,如和,前者称为起始标签,后者称为结束标签在起始和结束标签中的内容称为元素内容HTML标签不区分大小写,2023/7/2,参考:,10,使用小写的标签,W3C(WWW联盟,World Wide Web Consortium)在HTML4建议书中推荐使

5、用小写的标签XHTML(下一代HTML)要求使用小写的标签使用小写的标签是一个好习惯,因为这能使你更容易地学习和使用下一代HTML,2023/7/2,参考:,11,标签属性(attributes),标签可以带有属性,属性为HTML元素提供了额外的显示参数表示body标签有一个bgcolor(背景)属性,其值为”red”(红色)是带有border(边框宽度)属性的table(表格)标签属性通常以”名字/值”对(name/value pair)的方式出现:Name=“value”属性通常加在HTML元素的起始标签中多个属性间用空格分开属性值通常用双引号界定,但也可以使用单引号,当属性内容中需要双引

6、号时,则应使用单引号界定,反之依然Attrributes.htm,2023/7/2,参考:,12,基本的HTML标签标题,标题(Heading)一级标题二级标题三级标题四级标题五级标题六级标题HTML自动将标题放在独立的行上使用align=“center”属性可使标题居中headings.htm,2023/7/2,参考:,13,基本的HTML标签段落,段落使用标签这是一个段落这是另一个段落HTML自动在段落前后插入空行Paragraphs.htm,2023/7/2,参考:,14,基本的HTML标签断行,断行标签用于将文字开始一个新行,而不是一个新的段落这是一个带有断行的段落.标签本身就构成了标

7、记元素,它不需要结束标签,自然也就不需要内容但新的HTML 4.01标准要求使用br.htm,2023/7/2,参考:,15,基本的HTML标签注释,注释标签用于在HTML源文件中对HTML文件的设计进行解释和说明,其内容将被浏览器忽略,因而不会显示在浏览器的窗口中注意:注释标签与其它标签格式上的不同Comment.htm,2023/7/2,参考:,16,基本的HTML标签要点,网页文件可能在各种不同种类和配置的浏览器上显示,尽量避免使用空格和换行格式化文本多个连续的空格会压缩为一个空格使用而不是产生空行要使用严格的HTML标记规范,如虽然可以不使用,但网页制作者却不要有这样的习惯HTML会自

8、动为一些网页元素,如:标题,段落等,增加空行经常使用水平标尺(Horizontal rule,水平线)分隔文本内容(hr.htm)新的HTML 4.01标准要求使用,2023/7/2,参考:,17,HTML文本格式化,FormatText.htm,2023/7/2,参考:,18,计算机输出代码,ComputerOutput.htmPreformattedText.htm,2023/7/2,参考:,19,地址、缩略语和引用,Address.htmAbbr&Acronym.htmQuotation.htm,2023/7/2,参考:,20,字符实体(Character entities),有些字符如

9、“”被HTML定义作了特别用途,“字符实体”使我们可以在文本中使用这些字符字符实体由三部分组成:命名实体便于记忆,而编号则能解决命名的不统一性CharacterEntities.htm,2023/7/2,参考:,21,最常用的字符实体,2023/7/2,参考:,22,特别的字符实体,2023/7/2,参考:,23,HTML超链接(Hyperlink),HTML使用超链接将Web上的网页连结起来超链接使用”锚位”标签实现其href属性指明链接的目标超链接可以链接Web上的任何资源,如:HTML网页,图片,声音,或影片等例:显示为超链接的文本target属性用于决定在哪个窗口中打开目标网页,“_b

10、lank”指明在新的浏览器窗口中打开目标网页例:访问山东师范大学!HyperLinks.htm,2023/7/2,参考:,24,链接到网页中的某个特定位置,标签的name属性可标识网页中一个特定的链接位置,即命名的锚位例:要点小节命名的锚位文本没有什么特别的显示效果链接到当前网页的某个锚位转到要点小节 链接到某个网页的锚位转到”要点”,2023/7/2,参考:,25,HTML框架(frames),使用框架可以在同一个浏览器窗口中显示多个Web网页VFrames.htm,HFrames.htm框架网页的缺点Web开发者需要同时处理多个HTML文档很难打印整个网页,2023/7/2,参考:,26,

11、框架集(frameset)标签,框架集标签定义了如何将窗口分割为框架单元每个框架集定义一组行或列分割方法行与列的分割值决定了每个框架单元所占用的屏幕空间,2023/7/2,参考:,27,框架单元(frame)标签,框架单元标签决定了在某个框架单元中显示的HTML文档,2023/7/2,参考:,28,框架示例,为不支持框架的浏览器提供提示信息使用标签:NoFrames.htm行列混合的框架MixedFrames.htm不允许改变大小的框架使用noresize属性:NoResizeFrames.htm用框架实现导航NaviFrames.htm内联式框架使用标签:InlineFrames.htm,2

12、023/7/2,参考:,29,HTML表格(tables),表格使用table标签 表格行使用tr标签表格的标题使用th标签表格中数据使用td标签table标签的border属性用于说明表格边框的粗细不指明border属性的表格即是border为0空的td标签,即:通常产生不理想的表格显示,如果确实存在空的表格单元,则应使用,2023/7/2,参考:,30,表格举例,基本表格:Tables.htm表格边框:TableBorders.htm表头:TableHeadings.htm表格标题:TableCaption.htm跨跃多行或多列的单元格:TableSpan.htm含有特别对象的表格单元格:

13、TableTags.htm表格填充:TablePadding.htm表格背景:TableBg.htm单元格背景:TableCellBg.htm单元格对齐方式:TableAlign.htm,2023/7/2,参考:,31,HTML列表(Lists),无编号列表(Unordered Lists)使用小的图标表示列表项目编号式列表(Ordered Lists)使用数字表示列表项目定义列表(Definition Lists)用于描述一些术语及其解释举例无编号列表:UnOrderedList.htm,UnOrderedLists.htm编号式列表:OrderedList.htm,OrderedLists

14、.htm嵌套式列表:NestedList.htm,NestedListA.htm定义列表:DefinitionList.htm,2023/7/2,参考:,32,HTML表单(Forms),表单是含有表单元素的区域表单元素是一些允许用户输入信息的网页元素文本框:text,TextFields.htm 口令框:password,PasswordFields.htm单选钮:radio,RadioButtons.htm复选框:checkbox,CheckBoxes.htm下拉框:select,DropDownLists.htm多行文本框:textarea,TextArea.htm按钮:button,B

15、utton.htm带标题的边框元素FieldSet.htm,2023/7/2,参考:,33,HTML表单(Forms),表单的动作(action)属性用于指定一个网页(通常是一个动态网页,如asp,php等)表单的提交按钮(submit)可将各表单元素的值发到action指定的网页表单的重置按钮用于取消当前表单各表单元素的输入值SubmitAForm.htm,2023/7/2,参考:,34,HTML图片,在HTML网页中插入图片使用标签其src属性指明图片的来源使用alt属性可以指定当图片不能装载时显示的文字 举例:images.htm您也可以用图片实现超链接举例:ImagesA.htm,20

16、23/7/2,参考:,35,网页背景,使用标签的bgcolor属性可以为网页指定背景颜色,text属性可以指定网页上文字的颜色BgColor.htm,BgColorA.htm也可使用background属性为网页指定背景图片BgImageA.htm,BgImageB.htm,BgImageC.htm,2023/7/2,参考:,36,HTML颜色(Colors),可以使用#号开始的16进制数字表示颜色,也可以使用rgb”函数”表示颜色ColorValues.htm也可以使用命名的颜色ColorNames.htm,2023/7/2,参考:,37,HTML 4.01快速列表,基本HTML文档这里是文

17、档名要呈现的文本在这里,2023/7/2,参考:,38,HTML 4.01快速列表,标题(Heading)元素最大号标题.最小号标题,2023/7/2,参考:,39,HTML 4.01快速列表,文本(Text)元素这里是一个段落(断行),最好使用(水平标尺,即水平线),最好使用这里是预格式化的文本,2023/7/2,参考:,40,HTML 4.01快速列表,文本样式(Styles)这里是加重的文本这里是强加重的文本这是是计算机代码 这里是粗体文本这里是斜体文本正常文本上标正常文本下标,2023/7/2,参考:,41,HTML 4.01快速列表,链接,锚位和图片元素这是一个链接发送 e-mail

18、有益的要点跳转到”有益的要点”,2023/7/2,参考:,42,HTML 4.01快速列表,无编号列表第一条第二条 编号式列表第一条第二条,2023/7/2,参考:,43,HTML 4.01快速列表,定义列表项目一定义项目二定义,2023/7/2,参考:,44,HTML 4.01快速列表,表格列名列名内容内容,2023/7/2,参考:,45,HTML 4.01快速列表,框架,2023/7/2,参考:,46,HTML 4.01快速列表,表单,2023/7/2,参考:,47,HTML 4.01快速列表,表单ApplesBananasCherries,2023/7/2,参考:,48,HTML 4.01快速列表,字符实体 等同于,2023/7/2,参考:,49,HTML 4.01快速列表,其它元素从某个文献中引用的文本.地址行一地址行二城市,2023/7/2,参考:,50,The End,