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

HTML导论 高级篇 段会川山东师范大学信息科学与工程学院2006年10月 2020 2 2 参考 2 目录 HTML布局 layout HTML字体 fonts HTML文档的有效性HTML样式 Styles 外部样式单 ExternalStyleSheet 内部样式单 InternalStyleSheet 内联样式 InlineStyles HTML头部 head Meta元素统一资源定位URL UniformResourceLocators 到email地址的链接 2020 2 2 参考 3 目录 HTML脚本 scripts HTML4 0标准属性 standardattributes 核心属性 coreattributes 语言属性 languageattributes 键盘属性 keyboardattributes HTML事件属性 eventattributes HTML小测验 quiz 2020 2 2 参考 4 HTML布局 layout 以报刊的分栏和分块方式对网页内容进行整体规划称为网页的布局HTML网页布局可以使用两种技术 表格和框架HTML4 01中不建议使用框架使用表格进行布局用表格的单元对窗口进行分列和分块设置表格的边框宽度为0设置必要的填充数值 以留出必要的内边空设置必要的背景颜色或图片Layout htm 2020 2 2 参考 5 HTML字体 fonts 字体标签为使用size属性指定大小使用face属性指定字体名使用color指定字体颜色Fonts htm新的HTML4 0标准及XHTML标准不鼓励使用标签 而且趋势是取消它 代之以样式 Style Style htm 2020 2 2 参考 6 HTML文档的有效性 为使HTML文档得到有效的验证 应该在文档的开始增加验证文档所需的文档类型定义 DocumentTypeDefinition DTD 说明严格的HTML4 01DTD宽松的过渡阶段HTML4 01DTD带框架集的过渡阶段HTML4 01DTD 2020 2 2 参考 7 HTML样式 Styles 在HTML4 0中 所有的格式化信息都可从HTML文档中独立出去 存放在另一个称为样式单 stylesheet 的文件中样式可有三种使用方式外部样式单 ExternalStyleSheet 内部样式单 InternalStyleSheet 内联样式 InlineStyles 2020 2 2 参考 8 外部样式单 ExternalStyleSheet 当一种样式要应用到许多网页时 外部样式单是最理想的方法使用这种方法你可以通过只修改一个文件改变整个Web站点的面貌每个网页需要在其head部分使用标签链接到样式单示例CSSDemoC0 htmCSSDemoC1 htmCSSDemoC2 htm 2020 2 2 参考 9 内部样式单 InternalStyleSheet 当某个单独的网页需要特殊的样式时 可以通过在其head部分使用标签定义内部样式body background color red p margin left 20px 示例 FontStyle htm 2020 2 2 参考 10 内联样式 InlineStyles 内联样式用在某个网页元素需要使用特殊的样式的场合你需要在相关的标签中使用style属性实现内联样式 该属性中可以使用任何的CSS格式定义这是一个段落 PosClip htm 2020 2 2 参考 11 HTML头部 head head元素包括文档的普适性信息 它们也被称为元信息 meta information 元数据 meta data 是关于数据的信息 元信息 meta information 是关于信息的信息head中的信息不会直接显示在浏览器的窗口中HTML标准仅仅为head部分规定了很少几个标签 和为网页中所有的超链接定义基本URL定义资源引用Base htm 2020 2 2 参考 12 Meta元素 大部分时候 meta元素中的内容与浏览器或搜索引擎有关下面的meta元素提供了关于网页的描述下面的meta元素提供了关键字MetaDescription htm MetaKeywords htm MetaRedirect htm注意 由于许多网站通过使用keyword提高其在搜索引擎中的排序位次 有些搜索引擎不再使用keyword提供的信息 2020 2 2 参考 13 统一资源定位URL UniformResourceLocators URL用于在WWW上定位一个文档 或其它数据 scheme host domain port path filenamescheme Internet服务的类型 最常用的服务是http 其它常用的服务有 ftp file等domain是域名host是主机名 默认为wwwport是端口号 默认为80path是服务器中文档的路径 默认是根filename是待访问的文件名 默认为default asp index html等 2020 2 2 参考 14 到email地址的链接 下面是到email地址的链接示例请给我发邮件 2020 2 2 参考 15 HTML脚本 scripts 网页中使用脚本可增加动态和交互功能JavaScript htm 2020 2 2 参考 16 HTML4 0标准属性 standardattributes HTML标签有许多属性 大部分标签都有其特有的属性 然而有些属性是各标签公有的 除极个别标签外 核心属性 coreattributes 语言属性 languageattributes 键盘属性 keyboardattributes 2020 2 2 参考 17 核心属性 coreattributes 这些属性不能用在base head html meta param script style 以及title等元素上 2020 2 2 参考 18 语言属性 languageattributes 这些属性不能用在base br frame frameset hr iframe param 和script等元素上 2020 2 2 参考 19 键盘属性 keyboardattributes 2020 2 2 参考 20 HTML事件属性 eventattributes HTML4 0的新特征之一是它允许HTML事件触发浏览器的动作 如当用户点击一个HTML元素时运行一段JavaScript程序 这些事件可分为以下4类 窗口事件 windowevents onload onunload表单元素事件 formelementevents onchange onsubmit onreset onselect onblur onfocus键盘事件 keyboardevents onkeydown onkeypress onkeyup鼠标事件 mouseevents onclick ondblclick onmousedown onmousemove onmouseout onmouseover onmouseup 2020 2 2 参考 21 HTML小测验 quiz HTML代表什么 HomeToolMarkupLanguageHyperlinksandTextMarkupLanguageHyperTextMarkupLanguage什么组织制定Web标准 ISO InternationalStandardOrganization W3C TheWorldWideWebConsortium NIC TheNetworkInformationCenter 2020 2 2 参考 22 HTML小测验 quiz 最大字号的HTML标题标签是 HTML的断行标签是 2020 2 2 参考 23 HTML小测验 quiz 为网页增加背景的标签是 yellow使文字以粗体显示的标签是 2020 2 2 参考 24 HTML小测验 quiz 使文字以斜体显示的标签是 能够创建http超链接的标签是 abc 2020 2 2 参考 25 HTML小测验 quiz 能够创建e mail超链接的标签是 xxx yyy使链接在新窗口打开的标签是 2020 2 2 参考 26 HTML小测验 quiz 下面的标签中全部是表格有关的标签的是 使表格单元内容左对齐的标签是