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

HTML导论 基础篇 段会川山东师范大学信息科学与工程学院2006年10月 2020 3 30 参考 2 目录 什么是HTML文件 HTML文件示例HTML元素 elements 标签属性 attributes 基本的HTML标签 标题 段落 断行 注释基本的HTML标签 要点HTML文本格式化计算机输出代码地址 缩略语和引用 2020 3 30 参考 3 目录 字符实体 Characterentities 最常用的字符实体特别的字符实体HTML超链接 Hyperlink 链接到网页中的某个特定位置HTML框架 frames 框架集 frameset 标签框架单元 frame 标签框架示例HTML表格 tables 表格举例 2020 3 30 参考 4 目录 HTML列表 Lists HTML表单 Forms HTML图片网页背景HTML颜色 Colors HTML4 01快速列表 2020 3 30 参考 5 什么是HTML文件 HTML代表 超文本标记语言 HyperTextMarkupLanguage HTML文件 file 文档 document 包括许多小的标记标签 markuptags 这些标记标签告诉Web浏览器怎样显示HTML文件 网页 中的内容HTML文件必须取 htm或 html为扩展名 类型名 前者是由早期的系统仅支持3个字符的扩展名延续下来的 后者更流行HTML文件可以使用简单 纯 文本编辑器创建和编辑Windows系统中最常用的纯文本编辑器是Notepad 记事本 2020 3 30 参考 6 HTML文件示例 将下列内容保存为simpleHTML htm 并用浏览器打开我的网页这是我的第一个网页 这里的文本是粗体 2020 3 30 参考 7 示例解释 HTML标签放在尖括号中和表示HTML文档的开始和结束和部分是文档的头部信息 它们不在浏览器的窗口中显示标签中的信息显示在浏览器的标题栏中标签中的信息将显示在浏览器的窗口中标签中的内容将以粗体显示 2020 3 30 参考 8 新修改的HTML怎么在浏览器中未体现出来 浏览器使用缓存功能 保持着访问过的网页 这样能够极大地提高网页访问效率要经常使用浏览器的 刷新 功能显示网页的最新变化 2020 3 30 参考 9 HTML元素 elements HTML文档是由HTML元素构成的文本文件HTML元素由HTML标签定义HTML标签HTML标签用于标记HTML元素HTML标签由尖括号界定HTML标签通常成对出现 如和 前者称为起始标签 后者称为结束标签在起始和结束标签中的内容称为元素内容HTML标签不区分大小写 2020 3 30 参考 10 使用小写的标签 W3C WWW联盟 WorldWideWebConsortium 在HTML4建议书中推荐使用小写的标签XHTML 下一代HTML 要求使用小写的标签使用小写的标签是一个好习惯 因为这能使你更容易地学习和使用下一代HTML 2020 3 30 参考 11 标签属性 attributes 标签可以带有属性 属性为HTML元素提供了额外的显示参数表示body标签有一个bgcolor 背景 属性 其值为 red 红色 是带有border 边框宽度 属性的table 表格 标签属性通常以 名字 值 对 name valuepair 的方式出现 Name value 属性通常加在HTML元素的起始标签中多个属性间用空格分开属性值通常用双引号界定 但也可以使用单引号 当属性内容中需要双引号时 则应使用单引号界定 反之依然Attrributes htm 2020 3 30 参考 12 基本的HTML标签 标题 标题 Heading 一级标题二级标题三级标题四级标题五级标题六级标题HTML自动将标题放在独立的行上使用align center 属性可使标题居中headings htm 2020 3 30 参考 13 基本的HTML标签 段落 段落使用标签这是一个段落这是另一个段落HTML自动在段落前后插入空行Paragraphs htm 2020 3 30 参考 14 基本的HTML标签 断行 断行标签用于将文字开始一个新行 而不是一个新的段落这是一个带有断行的段落 标签本身就构成了标记元素 它不需要结束标签 自然也就不需要内容但新的HTML4 01标准要求使用br htm 2020 3 30 参考 15 基本的HTML标签 注释 注释标签用于在HTML源文件中对HTML文件的设计进行解释和说明 其内容将被浏览器忽略 因而不会显示在浏览器的窗口中注意 注释标签与其它标签格式上的不同Comment htm 2020 3 30 参考 16 基本的HTML标签 要点 网页文件可能在各种不同种类和配置的浏览器上显示 尽量避免使用空格和换行格式化文本多个连续的空格会压缩为一个空格使用而不是产生空行要使用严格的HTML标记规范 如虽然可以不使用 但网页制作者却不要有这样的习惯HTML会自动为一些网页元素 如 标题 段落等 增加空行经常使用水平标尺 Horizontalrule 水平线 分隔文本内容 hr htm 新的HTML4 01标准要求使用 2020 3 30 参考 17 HTML文本格式化 FormatText htm 2020 3 30 参考 18 计算机输出代码 ComputerOutput htmPreformattedText htm 2020 3 30 参考 19 地址 缩略语和引用 Address htmAbbr Acronym htmQuotation htm 2020 3 30 参考 20 字符实体 Characterentities 有些字符如 被HTML定义作了特别用途 字符实体 使我们可以在文本中使用这些字符字符实体由三部分组成 命名实体便于记忆 而编号则能解决命名的不统一性CharacterEntities htm 2020 3 30 参考 21 最常用的字符实体 2020 3 30 参考 22 特别的字符实体 2020 3 30 参考 23 HTML超链接 Hyperlink HTML使用超链接将Web上的网页连结起来超链接使用 锚位 标签实现其href属性指明链接的目标超链接可以链接Web上的任何资源 如 HTML网页 图片 声音 或影片等例 显示为超链接的文本target属性用于决定在哪个窗口中打开目标网页 blank 指明在新的浏览器窗口中打开目标网页例 访问山东师范大学 HyperLinks htm 2020 3 30 参考 24 链接到网页中的某个特定位置 标签的name属性可标识网页中一个特定的链接位置 即命名的锚位例 要点小节命名的锚位文本没有什么特别的显示效果链接到当前网页的某个锚位转到要点小节链接到某个网页的锚位转到 要点 2020 3 30 参考 25 HTML框架 frames 使用框架可以在同一个浏览器窗口中显示多个Web网页VFrames htm HFrames htm框架网页的缺点Web开发者需要同时处理多个HTML文档很难打印整个网页 2020 3 30 参考 26 框架集 frameset 标签 框架集标签定义了如何将窗口分割为框架单元每个框架集定义一组行或列分割方法行与列的分割值决定了每个框架单元所占用的屏幕空间 2020 3 30 参考 27 框架单元 frame 标签 框架单元标签决定了在某个框架单元中显示的HTML文档 2020 3 30 参考 28 框架示例 为不支持框架的浏览器提供提示信息使用标签 NoFrames htm行列混合的框架MixedFrames htm不允许改变大小的框架使用noresize属性 NoResizeFrames htm用框架实现导航NaviFrames htm内联式框架使用标签 InlineFrames htm 2020 3 30 参考 29 HTML表格 tables 表格使用table标签表格行使用tr标签表格的标题使用th标签表格中数据使用td标签table标签的border属性用于说明表格边框的粗细不指明border属性的表格即是border为0空的td标签 即 通常产生不理想的表格显示 如果确实存在空的表格单元 则应使用 2020 3 30 参考 30 表格举例 基本表格 Tables htm表格边框 TableBorders htm表头 TableHeadings htm表格标题 TableCaption htm跨跃多行或多列的单元格 TableSpan htm含有特别对象的表格单元格 TableTags htm表格填充 TablePadding htm表格背景 TableBg htm单元格背景 TableCellBg htm单元格对齐方式 TableAlign htm 2020 3 30 参考 31 HTML列表 Lists 无编号列表 UnorderedLists 使用小的图标表示列表项目编号式列表 OrderedLists 使用数字表示列表项目定义列表 DefinitionLists 用于描述一些术语及其解释举例无编号列表 UnOrderedList htm UnOrderedLists htm编号式列表 OrderedList htm OrderedLists htm嵌套式列表 NestedList htm NestedListA htm定义列表 DefinitionList htm 2020 3 30 参考 32 HTML表单 Forms 表单是含有表单元素的区域表单元素是一些允许用户输入信息的网页元素文本框 text TextFields htm口令框 password PasswordFields htm单选钮 radio RadioButtons htm复选框 checkbox CheckBoxes htm下拉框 select DropDownLists htm多行文本框 textarea TextArea htm按钮 button Button htm带标题的边框元素FieldSet htm 2020 3 30 参考 33 HTML表单 Forms 表单的动作 action 属性用于指定一个网页 通常是一个动态网页 如asp php等 表单的提交按钮 submit 可将各表单元素的值发到action指定的网页表单的重置按钮用于取消当前表单各表单元素的输入值SubmitAForm htm 2020 3 30 参考 34 HTML图片 在HTML网页中插入图片使用标签其src属性指明图片的来源使用alt属性可以指定当图片不能装载时显示的文字举例 images htm您也可以用图片实现超链接举例 ImagesA htm 2020 3 30 参考 35 网页背景 使用标签的bgcolor属性可以为网页指定背景颜色 text属性可以指定网页上文字的颜色BgColor htm BgColorA htm也可使用background属性为网页指定背景图片BgImageA htm BgImageB htm BgImageC htm 2020 3 30 参考 36 HTML颜色 Colors 可以使用 号开始的16进制数字表示颜色 也可以使用rgb 函数 表示颜色ColorValues htm也可以使用命名的颜色ColorNames htm 2020 3 30 参考 37 HTML4 01快速列表 基本HTML文档这里是文档名要呈现的文本在这里 2020 3 30 参考 38 HTML4 01快速列表 标题 Heading 元素最大号标题 最小号标题 2020 3 30 参考 39 HTML4 01快速列表 文本 Text 元素这里是一个段落 断行 最好使用 水平标尺 即水平线 最好使用这里是预格式化的文本 2020 3 30 参考 40 HTML4 01快速列表 文本样式 Styles 这里是加重的文本这里是强加重的文本这是是计算机代码这里是粗体文本这里是斜体文本正常文本上标正常文本下标 2020 3 30 参考 41 HTML4 01快速列表 链接 锚位和图片元素这是一个链接发送e mail有益的要点跳转到 有益的要点 2020 3 30 参考 42 HTML4 01快速列表 无编号列表第一条第二条编号式列表第一条第二条 2020 3 30 参考 43 HTML4 01快速列表 定义列表项目一定义项目二定义 2020 3 30 参考 44 HTML4 01快速列表 表格列名列名内容内容 2020 3 30 参考 45 HTML4 01快速列表 框架 2020 3 30 参考 46 HTML4 01快速列表 表单 2020 3 30 参考 47 HTML4 01快速列表 表单ApplesBananasCherries 2020 3 30 参考 48 HTML4 01快速列表 字符实体等同于 2020 3 30 参考 49 HTML4 01快速列表 其它元素从某个文献中引用的文本 地址行一地址行二城市 2020 3 30 参考 50 TheEnd