第六章——HTML语言2014.ppt

多媒体技术及应用 第1页 总28页 第六章超文本标记语言 本章主要内容HTML文档HTML标签与属性字符样式超链接表格标签与属性HTML编辑器 第2页 总28页 6 1HTML文档 HTML HypertextMarkupLanguage 文档Web 万维网 主要依赖的三种技术 统一地址资源 UniformResourceLocator URL 超文本传输协议 HypertextTransferProtocol HTTP 超文本链接技术 HyperText的HyperLink HTML 超文本标记语言 是Web上使用的通用出版语言 所有计算机都能理解 其功能包括 出版联网文档 图文声像 表格 列表等等 检索和阅读联网信息设计交易单 如 酒店预定 第3页 总28页 6 1HTML文档 文档元素与标签文档元素 简称文素 element 文档头 head 文档名称 title 表格 table 段落 paragraph 列表 list 文素使用标签 tag 来标识 分为三个部分左尖括号 开始标签和结束标签成对出现 如文素包含属性 attribute 如 背景颜色 字体属性 大小 颜色 正体 斜体 对齐方式等不分大小写 第4页 总28页 6 1HTML文档 HTML文档的结构HTML文档是一种没有格式的文档 可使用任何文本编辑器编辑每个HTML文档都由标签开始 由结束 每个HTML文档分成两个部分 文档头 head 正文 body 文档头标签中包含的是文档的名称 第5页 总28页 6 2HTML标签和属性 基本标签标签 告诉浏览器在 之间的文件是用HTML编写的文档 文件头标签 之间包含的是HTML文档名称 文档名称标签 之间包含的是具体的HTML文档名称 字符数通常不超过64 正文标签 之间是正文部分 标题标签 HTML定义了六个等级的标题标签 n 1 2 6 段落标签 之间包含的是一段文本 无论有多少行 无论每行多长多短 无论有多少空格 浏览器都会作为一段处理 第6页 总28页 一个简单的HTML文档举例 清华大学 htm 清华大学清华大学本科课程多媒体技术及应用第六章 HTML语言 HTML文档标签 文档头标签 文档名称 正文标签 文素 段落 文素 一级标签 6 2HTML标签和属性 第7页 总28页 6 2HTML标签和属性 基本标签 之间的项目表示无编号 之间的项目有编号 OrderedList 列出项目举例 食物 htm 水果苹果香蕉 蔬菜茄子白菜 第8页 总28页 6 2HTML标签和属性 基本标签 标签 表示定义列表 DefinitionList 标签 表示后面的项是定义术语 DefinitionTerm 标签 表示后面的项是定义释义 DefinitionDescription 举例 定义 htm FDM频分多路复用TDM时分多路复用 第9页 总28页 6 2HTML标签和属性 基本标签 标签 预格式文本 PreformattedText 用于产生固定宽度的字符 在 之间的空格 新行 空行 表格都与HTML源文档保持一致 标签 用来引用一个比较长的引用语 强行换行 邮政地址标签 ForcedLineBreaks PostalAddresses 使用标签可强制文本换行 并且不在行与行之间增加空白行 例如 地址 htm 清华大学自动化系系统工程研究所中央主楼809室邮政编码 100084电话 010 62794355Email hujm 第10页 总28页 6 2HTML标签和属性 基本标签水平线标签 生成一条用于分割文档的水平线 其长度与浏览器窗口等宽 粗细和长短都可设置 表单标签 用来收集用户的信息 可以包含让用户输入文本和选择项目的接口构件 例如 文本域 按钮 复选框 Checkbox 单选按钮 RadioButton 和选择列表 使用标签时需要注意 1 每个接口构件必须和输入标签 或选择标签 一起定义 2 表单中的所有构件必须在 之间定义 举例 检验身份 htm 第11页 总28页 6 2HTML标签和属性 属性是指用来修改HTML标签之间的文素特性 如对齐方式 图像大小等等 例1 理解字符属性的概念例2 本段落居中 举例 属性 htm 第12页 总28页 6 3字符样式 物理样式与逻辑样式逻辑样式 按文本的意思显示文句的外貌物理样式 说明标签之间的文句的特定外貌各自的优点 逻辑样式 可以强制文档中同一文素类型的一致性 物理样式 浏览器会严格遵照标记的样式显示文本 第13页 总28页 6 3字符样式 物理样式与逻辑样式部分物理样式举例 第14页 总28页 6 3字符样式 物理样式与逻辑样式部分逻辑样式举例 第15页 总28页 6 4超链接 基本概念超链接 是超文本链接 HypertextLink 的简称 或者简称为链接 链接是指文档中的文素或者图像与另一个文档 文档的一部分或者一幅图像链接在一起 链接标签为 也称作锚 anchor 签 基本语法 或 其中 HREF是HypertextReference的缩写 第16页 总28页 6 4超链接 绝对路径与相对路径绝对路径 一个完整的路径相对路径 相对于当前的工作路径如果一个文档在同一路径下 可使用二者之一来链接该文档 否则只能使用绝对路径 注意事项相对路径比绝对路径运行效率高 移动一组文档更容易UNIX系统区分大小写 编写HTML文档时 要严格区分大小写 否则UNIX系统可能无法读取路径名使用标准UNIX系统的句法 a b d 绝对路径 是根 d 可以是文件也可以是目录s d 相对路径 当前文件夹是s adc 表示父目录 x 表示当前目录 第17页 总28页 6 4超链接 使用URLURL UniformResourceLocator 统一资源地址 是识别因特网 Internet 上任何一个文件地址或资源地址的标准表示法 一个信息资源在网络上的URL地址由三部分构成请求服务的类型 说明用什么网络协议来存取资源 如 www服务程序使用http 文件传输使用ftp 等等 网络上的主机名服务器上的文件名举例 HTTP协议 存放信息的主机名 所在服务器上的目录和文件名 第18页 总28页 6 4超链接 文档内部之间的链接对于比较长的文档 在文档内部建立的相互链接 首先 对被链接的文素进行命名 即变化 然后 建立它们之间的链接关系链接内联图像内联图像 inlineimage 是指在网页中与文本一起下载和显示的图像 也称为内嵌图像或内插图像 Web上最普遍的图像格式是GIF和JPEGHTML文档中插入图像文件的格式 其中 ImageName是图像文件的URL地址 其功能与相同 第19页 总28页 6 4超链接 链接外联图像为什么要使用外联图像 externalimage 当内联图像文件过大时 浏览主文档时 需要很长时间等待下载该图像 链接外联图像过程在编写HTML文档时 用文字或者小的内联图标来代表大图像 而把大图像文件当作一个单独的文档 把文字或图标与大图像文件链接在一起 当用鼠标激活这个链接后 在下载并显示在另一个窗口中 举例链接外联图像 第20页 总28页 6 4超链接 在文档中链接和嵌入声音 影视文件在文档中链接声音 影视文件我的声音一段视频文件在文档中嵌入声音 影视文件 1 嵌入声音我的声音 2 嵌入影视一段视频文件 第21页 总28页 6 4超链接 用图像作网页的背景语法表示 背景为绿色 文字为红色 带链接但还未用鼠标单击过时 文素为浅蓝色 在文档中嵌入背景声音语法URL是背景音乐的文件名 LOOP表示循环次数 在文档中链接电子邮件语法Email 第22页 总28页 6 4超链接 DEMO 超链接 htm 第23页 总28页 6 5表格标签及其属性 基本概念表格由表素 tableelement 组成 比如 表的名称 caption 表行 tablerow 列表标题 tableheader 列表数据单元 tabledatacell 等等 表素标签 第24页 总28页 6 5表格标签及其属性 表素属性举例 表格 htm 第25页 总28页 6 6HTML编辑器