标记语言和元数据

1、学时32本课程共32学时任课教师史书明Scarlett Xiao教学目标了解标记语言的相关概念了解使用标记语言中的元数据 能使用标记语言编写代码HTML/XHTMLCSSXMLHTML1.HTML 是用来描述网页的一种语言。2.HTML 指的是超文本标记语言 (Hyper Text Markup Language) 3.HTML 不是一种编程语言，而是一种标记语言 (markup language) 4.标记语言是一套标记标签 (markup tag) 5.HTML 使用标记标签来描述网页 XHTML1.XHTML 指可扩展超文本标签语言（EXtensible HyperText Markup

2、 Language）。 2.XHTML 的目标是取代 HTML。 3.XHTML 与 HTML 4.01 几乎是相同的。 4.XHTML 是更严格更纯净的 HTML 版本。 5.XHTML 是作为一种 XML 应用被重新定义的 HTML。 6.XHTML 是一个 W3C 标准http:/ 指可扩展标记语言指可扩展标记语言XML 被设计用来传输和存储数据被设计用来传输和存储数据XML与与HTML的区别的区别 XML 用来描述数据，而 HTML 则用来显示数据。XML、HTML以及以及XHTML的关系的关系 今天的市场中存在着不同的浏览器技术，某些浏览器运行在计算机中，某些浏览器则运行在移动电话和

3、手持设备上。而后者没有能力和手段来解释糟糕的标记语言。 因此，通过把 HTML 和 XML 各自的长处加以结合，我们得到了在现在和未来都能派上用场的标记语言 - XHTML。XHTML 可以被所有的支持 XML 的设备读取，同时在其余的浏览器升级至支持 XML 之前，XHTML 使我们有能力编写出拥有良好结构的文档，这些文档可以很好地工作于所有的浏览器，并且可以向后兼容。一、XHTML（ EXtensible HyperText Markup Language ）可扩展超文本标记（标签）语言，是表示网页的一种规范一组标记符的集合使用XHTML语言描述的文件，能独立于各种操作系统平台（如UNIX

4、，WINDOWS等），访问它只需要一个WWW浏览器，我们所看到的网页，是浏览器对HTML文件进行解释的结果。学习网站 ：http:/ 、Dreamweaver2.网页创建步骤(使用“记事本”创建网页)打开“程序/附件/记事本”在“记事本”的窗口中输入HTML代码选择“文件”菜单的“另存为”命令在“文件名”框中输入网页的名称，文件名以.html为后缀名编码为编码为unicode单击保存3.网页测试IE工具即现HTML语法XHTML改进HTML,使之更严格CSS美化HTML页面XML脱离网页，数据的描述HTML5 中的一些有趣的新特性：用于绘画的 canvas 元素用于媒介回放的 video 和

5、audio 元素对本地离线存储的更好的支持新的特殊内容元素，比如 article、footer、header、nav、section新的表单控件，比如 calendar、date、time、email、url、searchHTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。例1-”About Google”标签（小写，成对出现）元素（父子关系，正确嵌套）属性（属性名=“值 ”）HTML 标记标签通常被称为 HTML 标签 (HTML tag)。HTML 标签是由尖括号尖括号包围的关键词，比如 HTML 标签通常是成对出现成对出现的，比如 和 标签对中的第一个标签

6、是开始标签开始标签，第二个标签是结束标签结束标签开始和结束标签也被称为开放标签开放标签和闭合标签闭合标签HTML 元素指的是从开始标签（start tag）到结束标签（end tag）的所有代码。某些 HTML 元素具有空内容（empty content）空元素在开始标签中进行关闭（以开始标签的结束而结束）如: 等Web 世界中存在许多不同的文档。只有了解文档的类型，浏览器才能正确地显示文档。HTML 也有多个不同的版本，只有完全明白页面中使用的确切 HTML 版本，浏览器才能完全正确地显示出 HTML 页面。这就是 的用处。 不是 HTML 标签。它为浏览器提供一项信息（声明），即 HTML

7、 是用什么版本编写的。 声明位于文档中的最前面的位置，处于 标签之前。此标签可告知浏览器文档使用哪种 HTML 或 XHTML 规范。如果使用的是HTML4.01或XHTML,该标签可声明三种 DTD （文件类型定义）类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档常见声明HTML 4.01 XHTML 1.0核心元素html head body 表明文档中的标记属于此名称空间，指示使用的XHTML版本， Strict XHTML 必须指明该属性 用于链接到外部样式表 用于包含与文档相关信息，如关键字等;另外meta还可以实现页面重定向。 用于包含脚本 指定页面标题 请到w3sc

8、hool去查找重定向的方法所有 XHTML 文档必须进行文件类型声明（DOCTYPE declaration）。在 XHTML 文档中必须存在html、head、body元素，而 title 元素必须位于在 head 元素中基本文本格式 空格和换行的处理 显示多个空格，可以用转义字符 http:/ 标题体现结构和内容 -最重要，共六级标题 （逐渐淘汰） 段落 换行练习1使用基本元素创建网页表现元素 粗体 斜体 等宽 上标 下标 大一号 小一号 水平线 预先格式化 用于显示列表而不使用表格 表示计算机源代码更多请查看W3School短语元素-描述内容 用于强调 用于强调 缩写词 Sat. 首字母

9、缩写 XHTML 关键术语 通常仅在第一次引入关键术语时使用 表示段落引用 表示文本引证,如出自哪本书 表示短引用，如出自某人所说 地址 计算机代码便于其他程序找到内容，并加以应用列表 无序列表 有序列表 指定列表项排序方式，A/a/I/i 定义列表 用于提供术语，且术语后面跟上简短文本定义或描述 术语描述 列表的嵌套 练习2使用表现短语列表标签点击更多细节分组元素分组元素自身不会影响页面外观，通常与css一起使用，允许用户添加样式到页面的某个部分。 块级元素和内联元素 块级前后都将换行 内联一般出现在句子中，显示时不会换行 块级分组元素 内联级分组元素 与css结合起来使用.ultypehe

10、ight:200px;width:200px;background-color:#C9F; 链接和导航 基本链接 链接到其他文档 显示给用户 内容 链接到email地址 发邮件给shism target =“_blank” 指定在新窗口打开 目录和目录结构目录层次目录层次引用方式引用方式相同目录help.html子目录music/index.html父目录./index.html根目录/entertainment/music/index.html链接和导航 链接到页面特定部分 id和 name(早期IE3) href=“#id名称” 高级email链接 subject 主题 cc抄送 body

11、主体 bcc 秘密抄送 href=“mailto:?subject=test&body=hello”练习3修改name_id_org.html1.给页面加上相应链接2.在页面底部添加自己的地址以及email联系方式图像和对象浏览器通常支持3种常用的位图图形格式GIF:适合具有大面积单调颜色区域图像。如图表、文本或徽标JPEG：存储和压缩具有很多种图像，如照片PNG：用途与gif类似，优于gif，但要高版本浏览器支持 src alt aligntop/middle/bottom/left/right height width border(逐渐淘汰) hspace vspace(逐渐淘汰

12、) id 使用图像作为链接 图像映射图像和对象 图像映射 图像映射允许用户指定单个图像不同区域的多个链接，当用户单击图像不同部分时，可以到达不同的页面 步骤1标签中使用属性usemap=“#地图名称” 步骤2 使用标签 创建映射地图 步骤3 使用作为子标签，创建具体映射区域图像和对象 图像映射 imageusemap ismap mapname/id (建议同时写上，以便不同浏览器支持） areashape=“rect/poly/circ” coords href target alt +image的ismap属性，可以查看图片上点的坐标练习4根据本例，创建页面usemap.html表 在ta

13、ble元素内，通过逐行的方式创建表。 一行包含 一个tr元素内 每行内使用td元素编写每个单元格 如果一行或一列需要包含题头，可以使用th代替td第1行第1列第1行第2列第2行第1列第2行第2列如，一张课表表属性 border cellpadding规定单元边沿与其内容之间的空白 cellspacing规定单元格之间的空白 width frame规定外侧边框的哪个部分是可见的 rules规定内侧边框的哪个部分是可见的 colspan规定单元格可横跨的列数 rowspan规定单元格可横跨的行数。练习5创建电影放映表movie.html表单 希望从用户处收集信息时，通常需要使用表单。表单是一个包含

14、表单元素的区域。表单元素是允许用户在表单中（比如：文本域、下拉列表、单选框、复选框等等）输入信息的元素。表单使用表单标签（）定义。表单 任何表单都位于元素中。在form元素中存在一些表单控件，如文本框、下拉框、复选框、提交按钮等。 多数情况下被用到的表单标签是输入标签-。输入类型是由类型属性（type）定义的。大多数经常被用到的输入类型如下： button 普通按钮 image 图片按钮 reset 清空表单按钮 submit 提交按钮 password 密码框 text 单行文本 checkbox 复选按钮 radio 单选按钮 file 上传文件 hidden 隐藏字段 form的注意点

15、1. 的属性 action=“处理信息的服务器端页面地址/mailto:邮箱” method=“post” enctype=“text/plain”文本形式编码 2.form的子标签的属性 name=“名字”，如果该属性的值需要传递就需要name value=“默认值”，尤其是checkbox,radio每个选项都需要指定value值表单控件 下拉列表. 文本区 创建区域-在同类控件外加个框 可利用optgroup对选项进行分组 标题 练习6 创建如下表单框架 使用框架，可以在浏览器窗口同时显示多个网页 创建框架集文档，需要使用元素，替代元素，通过子元素指明每个框架内容。 有cols属性和rows属性。使