Embed Size (px)
DESCRIPTION
Web 开发基础. 2. XHTML 和 css 基础. 内容提要. 1 标记代码的 部件 : 标签、元素和 属性 2 XHTML 文档 3 CSS 基础. 1 标记代码的部件 : 标签、元素和 属性. 标签 (tag) 经过 编码的符号，用于 分隔和 区分内容的不同 部分 名字描述用途和类型 如 标题、段落、列表、图像、 引文 标签 包围在一对 尖括号 < 和 > 之间 < ：标签 的 开头 标签 名 (tag name ) ， > ：结束 < p>. 标签. 标签 名：小写， XHTML 要求 大多数标签都 配对 - PowerPoint PPT Presentation
Citation preview
Web开发基础
2. XHTML和 css基础
内容提要 1 标记代码的部件 : 标签、元素和属性 2 XHTML 文档 3 CSS 基础
2
1 标记代码的部件 : 标签、元素和属性 标签 (tag)
经过编码的符号，用于分隔和区分内容的不同部分 名字描述用途和类型
如标题、段落、列表、图像、引文 标签包围在一对尖括号 <和 >之间
<：标签的开头 标签名 (tag name) ， >：结束 <p>
3
标签 标签名：小写， XHTML要求 大多数标签都配对
开标签 (opening tag)，开始标签 (start tag) 标明内容片段的开始
闭标签 (c1ose tag)，结束标签 (end tag) 标明结束
<p>Hello, world!</p>
4
元素 元素 (element)
标签和它们之间的内容 是 XHTML文档的基本组成要素 老版本的 HTML 中有些元素不需要闭标签 XHTML中，几乎所有元素都必须结束于闭标签
5
元素 空元素 (empty element)
没有内容 不需要结束标签
使用结尾斜线 (tailing slash) 自闭合 <br /> 推荐有空格
6
元素 属性 (attribute)
提供元素的特定属性 组成
属性名 (attribute name) 属性值 (attribute value） =连接， 值：引号括起来
单引号或双引号，只要匹配 <p class="greeting">Hello, world!</p>
7
元素 最小化属性 (minimized attribute)
没有值的属性 XHTML中最小化属性不允许
字母大小写 属性名
XHTML中必须是小写 HTML中不区分大小写
属性值总是不区分大小写
8
元素 元素的开标签可以具有多个属性，它们彼此用空格隔开
9
1.1 块级元素和行内元素 元素类
块级 行内
块级元素 (b1ock-1eve1 element) 包含有一大块内容。 P元素，用于标明文本段落
行内 ( inline)元素 通常包含一串较短的文本，同一行其他文本的旁
em是行内元素
10
1.1
非空的行内元素则只能包含文本或其他行内元素。 <em><p>Hello, world!</p></em> /*错误！ */
11
1.2 嵌套元素 正确嵌套
闭合一个包含了内层元素的元素之前，先闭合内层元素 <p><em>Hello, worldl</p></em> /*错误 */ <p><em>Hello, world!</em></p>
12
1.3 空白符 Web浏览器会忽略多余的换行和回车符
<p>Wide open
spaces !
</p> Wide open spaces! 元素 pre
13
1 .4 标准属性 :
(1)核心属性 (2) 国际化属性 (3) 焦点属性
14
(1)核心属性 class :表示元素所属一个或一组类
类名只能由字母、数字、连字符 (-)和下划线 (_)组成 多个元素可属于同一类 一个元素可属于多个类
多个类名用空格分隔 id :元素唯一性的标识符
必须是唯一 第一个字符必须是字母
15
(1)核心属性 style:为元素指定 css属性
内联样式定义 (inline styling) 避免使用 (把内容和表现混在一起 )
Title: 为元素提供文本标题
16
(2) 国际化属性 dir: 把文本的阅读方向设置为 ltr (从左到右 )或 rtl
(从右到左 ) 1ang: 指定用于书写所包含的内容的语言 xml:lang:也用于指定用于书写所包含的内容的语言
17
(3) 焦点属性 元素拥有焦点 (focus)：处于预激活状态
链接和表单控件 accesskey: 为元素分配一个键盘快捷键 tabindex: 指定元素在使用制表键遍历链接和表单控件时访问顺序
18
注：客户端脚本编程 许多事件属性可用于客户端脚本编程
onclick ,ondb1c1ick,onkeydown,onkeypress,onkeyup, onmousedown, onmousemove, onmouseout, onmouseover
每当用户在元素上执行一个事件表示的动作时，就发生这个事件
19
1.5 添加注释 文档嵌入注释浏览器不显示，查看源标记代码时可以看到 <!-- Use an h2 for subheadings-->
20
2 XHTML 文档 文档 (document)
一般说来，指的是含有 XHTML源代码的纯文本文件 原始文件
页面 (page) 图形浏览器呈现得到的可见结果 看到和使用的东西
21
基本文档
22
2.1 Doctype
文档类型声明 (Document Type Declaration. doctype) 必需组成
23
文档类型 文档类型声明不是 XHTML元素
不需要闭标签 文档类型声明切换 (doctype switch)
包含有完整、正确的文档类型声明 :合式的并且遵守 web标准
遵从模式 (compliance mode) 或严格模式 (strict mode) 没有文档类型声明，或声明不完整或不正确
假定是一个旧式支档，转而采用其宽松和宽容的呈现模式 :
怪异模式 (quirks mode)，兼容模式 (compatibility mode)
24
2.2 <html>元素 实际的标记代码从 html 元素开始 html 元素是整个文档的容器，根元素 (root element)
没有自己特有的属性，纯用于定义文挡的开始和结尾的容器
出现在这个元素之外的任何元素或内容 ( 除了并非元素的文档类型声明 )都将导致整个文档无效
25
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">
26
内容类型 (content type)
内容类型 因特网媒体类型 (Internet media type) MIME类型，多用途网际邮件扩展 (Mu1tipurpose
Internet Mail Extensions)，Web也用到这个标准 未格式化文本： text/plain HTML正文档： text/html XHTML最正确： application/xml+html
HTML可以： text/html
27
2.3 其他部分 head和 body 元素
head元素包含关子文档自身的信息 (包括必需的 title元素 )，
body元素包含所有最终由浏览器呈现并供访问者浏览和使用的内容
总而言之， XHTML文档有 一条文档类型声明 一个根元素 一个具有 title元素的 head元素 一个 body元素
28
2.4 文档树
29
3 CSS 基础 CSS能够为页面添加样式，增强和改进内容的外观 XHTML提供结构
元素标明了内容中的不同部分 属性传达元素的更多信息
CSS 影响 XHTML元素呈现外观 颜色、字，体、文本大小、背景以及元素在页面上的布
局
30
3.1 CSS 规则剖析 CSS的构建基础：规则 (rule)
一个指令集，浏览器可以按照其指示基于所提供的描述性的值改变 XHTML元素的外观
31
选择符 (selector)
选择符 (selector)：确定样式所应用到的目标元素范围 样式声明
属性：元素的表现形式中将被修改的方面 颜色、宽度或在页面上的位置
值：应用到的特定样式 取决于属性本身，可多个值，空格分隔
格式 样式声明位于一对大括号之间 属性与其值之间用冒号 (; )分隔， 样式声明以一个分号 (;)结尾。 分号可以把多个样式声明分隔开
32
CSS验证服务 W3C提供了一个 CSS 验证服务
http://jigsaw.w3.org/css-validator/
33
3.2 CSS 选择符 从 XHTML文档中选择元素(1) 全体选择符
*，选择文档中的每一个元素 * { color: b1ue; }
(2) 元素选择符 [类型 (type) 选择符 ] 使用标签名选择一种元素的所有实例 em { color: red; }
34
3.2 CSS 选择符(3) 类选择符
以 class属性中有指定类名的元素为目标 以一个圆点 (.)开始 .info { color: purple; }
(4) ID 选择符 选择具有指定标识符的元素 以一个 "#"符号开头 #introduction { color: green; }
35
3.2 CSS 选择符(5) 伪类选择符
选择处于特定状态的元素 以冒号 ( : )开头。
:link { color: blue; }
:visited { color: purple; }
:active { color: red; }
:hover { color: green; }
:focus { color: orange; }
36
3.2 CSS 选择符(6). 后代选择符 [上下文选择符 (contextual selector)]
两个或多个用空格分隔的基本类型的选择符 ( 全体、元素、类、伪类和 ID 选择符 )
选择文档树中匹配该位置的元素。 #introduction .info p * { color: pink; }
37
3.2 CSS 选择符(7). 组合选择符
把两种或多种类型的选择符组合使用 如一个元素选择符加一个 ID 选择符，或者一个 ID 选择符加一个类选择符
组合能够进一步增强选择符的具体性 p.info { color: blue; }
38
3.2 CSS 选择符(8) 分组选择符
把几个选择符聚集起来作为一条规则的组成部分 避免重复 逗号分隔 p, hl, h2 { color: blue; }
39
3.2 CSS 选择符(9). 高级选择符 ( 新的版本 )
属性选择符 (attribute se1ector) 伪元素选择符 (pseudo element selector) 子选择符 (child selector) 毗邻同胞选择符 (adjacent sibling selector)
40
3.3 具体性与层叠 比较具体的选择符 >较不具体的选择符
41
(1) 具体性
42
(2)层叠 后面的声明会盖过前面的声明
43
3.4 将样式表附加到文档 (1) 内联样式 (2) 嵌入式样式表 (3) 外部样式表
44
(1) 内联样式 style属性中加入 css样式声明
避免使用内联样式 把表现性因素与标记代码放一起
45
(2) 嵌入式样式表 把样式规则嵌入到文档的 head元素内部
46
(3) 外部样式表 外部样式表（ css 规则）
.CS5 纯文本文件
47
3.5 层叠顺序 层叠顺序 (cascade order) 机制
按其出现的顺序：后面的规则盖过前面的规则
最靠近内容的样式获胜！
48
3.6 ! important
强迫给予最高级别优先级 如果有其他 !important，具体性，层叠性
h1 { color: red !important; }
49
3.7 编排 CSS格式 个人偏好
50
3.8 css 注释
51
