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