1 / 51

Web 开发基础

Web 开发基础. 2. XHTML 和 css 基础. 内容提要. 1 标记代码的 部件 : 标签、元素和 属性 2 XHTML 文档 3 CSS 基础. 1 标记代码的部件 : 标签、元素和 属性. 标签 (tag) 经过 编码的符号，用于 分隔和 区分内容的不同 部分 名字描述用途和类型 如 标题、段落、列表、图像、 引文 标签 包围在一对 尖括号 < 和 > 之间 < ：标签 的 开头 标签 名 (tag name ) ， > ：结束 < p>. 标签. 标签 名：小写， XHTML 要求 大多数标签都 配对

mechelle-george
Download Presentation

Web 开发基础

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web开发基础 2. XHTML和css基础

  2. 内容提要 • 1 标记代码的部件:标签、元素和属性 • 2 XHTML 文档 • 3 CSS 基础

  3. 1 标记代码的部件: 标签、元素和属性 • 标签(tag) • 经过编码的符号，用于分隔和区分内容的不同部分 • 名字描述用途和类型 • 如标题、段落、列表、图像、引文 • 标签包围在一对尖括号<和>之间 • <：标签的开头 • 标签名(tag name) ， • >：结束 • <p>

  4. 标签 • 标签名：小写，XHTML要求 • 大多数标签都配对 • 开标签(opening tag)，开始标签(start tag) • 标明内容片段的开始 • 闭标签(c1ose tag)，结束标签(end tag) • 标明结束 • <p>Hello, world!</p>

  5. 元素 • 元素(element) • 标签和它们之间的内容 • 是XHTML文档的基本组成要素 • 老版本的HTML 中有些元素不需要闭标签 • XHTML中，几乎所有元素都必须结束于闭标签

  6. 元素 • 空元素(empty element) • 没有内容 • 不需要结束标签 • 使用结尾斜线(tailing slash) 自闭合 • <br/> • 推荐有空格

  7. 元素 • 属性(attribute) • 提供元素的特定属性 • 组成 • 属性名(attribute name) • 属性值(attribute value） • =连接， • 值：引号括起来 • 单引号或双引号，只要匹配 • <p class="greeting">Hello, world!</p>

  8. 元素 • 最小化属性(minimized attribute) • 没有值的属性 • XHTML中最小化属性不允许 • 字母大小写 • 属性名 • XHTML中必须是小写 • HTML中不区分大小写 • 属性值总是不区分大小写

  9. 元素 • 元素的开标签可以具有多个属性，它们彼此用空格隔开

  10. 1.1 块级元素和行内元素 • 元素类 • 块级 • 行内 • 块级元素(b1ock-1eve1 element) • 包含有一大块内容。 • P元素，用于标明文本段落 • 行内( inline)元素 • 通常包含一串较短的文本，同一行其他文本的旁 • em是行内元素

  11. 1.1 • 非空的行内元素则只能包含文本或其他行内元素。 • <em><p>Hello, world!</p></em> /*错误！*/

  12. 1.2 嵌套元素 • 正确嵌套 • 闭合一个包含了内层元素的元素之前，先闭合内层元素 • <p><em>Hello, worldl</p></em> /*错误*/ • <p><em>Hello, world!</em></p>

  13. 1.3 空白符 • Web浏览器会忽略多余的换行和回车符 <p> Wide open spaces ! </p> • Wide open spaces! • 元素pre

  14. 1 .4 标准属性: • (1)核心属性 • (2) 国际化属性 • (3) 焦点属性

  15. (1)核心属性 • class :表示元素所属一个或一组类 • 类名只能由字母、数字、连字符(-)和下划线(_)组成 • 多个元素可属于同一类 • 一个元素可属于多个类 • 多个类名用空格分隔 • id :元素唯一性的标识符 • 必须是唯一 • 第一个字符必须是字母

  16. (1)核心属性 • style:为元素指定css属性 • 内联样式定义(inline styling) • 避免使用(把内容和表现混在一起) • Title: 为元素提供文本标题

  17. (2) 国际化属性 • dir: 把文本的阅读方向设置为ltr(从左到右)或rtl (从右到左) • 1ang: 指定用于书写所包含的内容的语言 • xml:lang:也用于指定用于书写所包含的内容的语言

  18. (3) 焦点属性 • 元素拥有焦点(focus)：处于预激活状态 • 链接和表单控件 • accesskey: 为元素分配一个键盘快捷键 • tabindex: 指定元素在使用制表键遍历链接和表单控件时访问顺序

  19. 注：客户端脚本编程 • 许多事件属性可用于客户端脚本编程 • onclick ,ondb1c1ick,onkeydown,onkeypress,onkeyup, • onmousedown, onmousemove, onmouseout, onmouseover • 每当用户在元素上执行一个事件表示的动作时，就发生这个事件

  20. 1.5 添加注释 • 文档嵌入注释浏览器不显示，查看源标记代码时可以看到 • <!-- Use an h2 for subheadings-->

  21. 2 XHTML 文档 • 文档(document) • 一般说来，指的是含有XHTML源代码的纯文本文件 • 原始文件 • 页面(page) • 图形浏览器呈现得到的可见结果 • 看到和使用的东西

  22. 基本文档

  23. 2.1 Doctype • 文档类型声明(Document Type Declaration. doctype) • 必需组成

  24. 文档类型 • 文档类型声明不是XHTML元素 • 不需要闭标签 • 文档类型声明切换(doctype switch) • 包含有完整、正确的文档类型声明:合式的并且遵守web标准 • 遵从模式(compliance mode) 或严格模式(strict mode) • 没有文档类型声明，或声明不完整或不正确 • 假定是一个旧式支档，转而采用其宽松和宽容的呈现模式: • 怪异模式(quirks mode)，兼容模式(compatibility mode)

  25. 2.2 <html>元素 • 实际的标记代码从html 元素开始 • html 元素是整个文档的容器，根元素(root element) • 没有自己特有的属性，纯用于定义文挡的开始和结尾的容器 • 出现在这个元素之外的任何元素或内容(除了并非元素的文档类型声明)都将导致整个文档无效

  26. html属性 • xmlns: 指定XML命名空间的URL • XHTML，http://www.w3.org/1999/xhtml • 命名空间(namespace) ：XML语言中规定元素和属性名称的地方 • <html xmlns=“http://www.w3.org/1999/xhtml” lang=“en” xml: lang="en">

  27. 内容类型(content type) • 内容类型 • 因特网媒体类型(Internet media type) • MIME类型，多用途网际邮件扩展(Mu1tipurpose Internet Mail Extensions)，Web也用到这个标准 • 未格式化文本：text/plain • HTML正文档：text/html • XHTML最正确：application/xml+html • HTML可以：text/html

  28. 2.3 其他部分 • head和body 元素 • head元素包含关子文档自身的信息(包括必需的title元素)， • body元素包含所有最终由浏览器呈现并供访问者浏览和使用的内容 • 总而言之， XHTML文档有 • 一条文档类型声明 • 一个根元素 • 一个具有title元素的head元素 • 一个body元素

  29. 2.4 文档树

  30. 3 CSS 基础 • CSS能够为页面添加样式，增强和改进内容的外观 • XHTML提供结构 • 元素标明了内容中的不同部分 • 属性传达元素的更多信息 • CSS影响XHTML元素呈现外观 • 颜色、字，体、文本大小、背景以及元素在页面上的布局

  31. 3.1 CSS 规则剖析 • CSS的构建基础：规则(rule) • 一个指令集，浏览器可以按照其指示基于所提供的描述性的值改变XHTML元素的外观

  32. 选择符(selector) • 选择符(selector)：确定样式所应用到的目标元素范围 • 样式声明 • 属性：元素的表现形式中将被修改的方面 • 颜色、宽度或在页面上的位置 • 值：应用到的特定样式 • 取决于属性本身，可多个值，空格分隔 • 格式 • 样式声明位于一对大括号之间 • 属性与其值之间用冒号(; )分隔， • 样式声明以一个分号(;)结尾。 • 分号可以把多个样式声明分隔开

  33. CSS验证服务 • W3C提供了一个CSS验证服务 • http://jigsaw.w3.org/css-validator/

  34. 3.2 CSS 选择符 • 从XHTML文档中选择元素 (1)全体选择符 • *，选择文档中的每一个元素 • * { color: b1ue; } (2) 元素选择符[类型(type) 选择符] • 使用标签名选择一种元素的所有实例 • em { color: red; }

  35. 3.2 CSS 选择符 (3) 类选择符 • 以class属性中有指定类名的元素为目标 • 以一个圆点(.)开始 • .info { color: purple; } (4) ID选择符 • 选择具有指定标识符的元素 • 以一个"#"符号开头 • #introduction { color: green; }

  36. 3.2 CSS 选择符 (5) 伪类选择符 • 选择处于特定状态的元素 • 以冒号( : )开头。 :link { color: blue; } :visited { color: purple; } :active { color: red; } :hover { color: green; } :focus { color: orange; }

  37. 3.2 CSS 选择符 (6). 后代选择符[上下文选择符(contextual selector)] • 两个或多个用空格分隔的基本类型的选择符(全体、元素、类、伪类和ID选择符) • 选择文档树中匹配该位置的元素。 • #introduction .info p * { color: pink; }

  38. 3.2 CSS 选择符 (7). 组合选择符 • 把两种或多种类型的选择符组合使用 • 如一个元素选择符加一个ID选择符，或者一个ID选择符加一个类选择符 • 组合能够进一步增强选择符的具体性 • p.info { color: blue; }

  39. 3.2 CSS 选择符 (8) 分组选择符 • 把几个选择符聚集起来作为一条规则的组成部分 • 避免重复 • 逗号分隔 • p, hl, h2 { color: blue; }

  40. 3.2 CSS 选择符 (9). 高级选择符(新的版本) • 属性选择符(attribute se1ector) • 伪元素选择符(pseudo element selector) • 子选择符(child selector) • 毗邻同胞选择符(adjacent sibling selector)

  41. 3.3 具体性与层叠 • 比较具体的选择符>较不具体的选择符

  42. (1) 具体性

  43. (2)层叠 • 后面的声明会盖过前面的声明

  44. 3.4 将样式表附加到文档 • (1) 内联样式 • (2) 嵌入式样式表 • (3) 外部样式表

  45. (1) 内联样式 • style属性中加入css样式声明 • 避免使用内联样式 • 把表现性因素与标记代码放一起

  46. (2) 嵌入式样式表 • 把样式规则嵌入到文档的head元素内部

  47. (3) 外部样式表 • 外部样式表（css规则） • .CS5纯文本文件

  48. 3.5 层叠顺序 • 层叠顺序 (cascade order)机制 • 按其出现的顺序：后面的规则盖过前面的规则 • 最靠近内容的样式获胜！

  49. 3.6 ! important • 强迫给予最高级别优先级 • 如果有其他!important，具体性，层叠性 • h1 { color: red !important; }

  50. 3.7 编排CSS格式 • 个人偏好

More Related