web 开发基础
Post on 05-Jan-2016
61 Views
Preview:
DESCRIPTION
TRANSCRIPT
Web 开发基础
第 4 章 添加内容
内容提要 1 内容和结构 2 <body> 3 富有意义的部分 4 列表 5 定义列表 6 短语元素 7 多用途元素 8 嵌入外部内容 9 表现性元素 10 特殊字符 11 用 css 控制内容的样式
2
1 内容和结构 依靠某种结构，文本更容易阅读和理解
3
2 <body>
任何出现在 body 元素之外的内容都会使文档无效
body 元素是块级元素，而且只能包含块级子元素 任何文本或行内元素都必须嵌套在另一个块级元素之中，
不能直接包含在 body 元素中4
3 富有意义的部分 让内容和表现因素分离
认真分析元素的语义，根据内容的含义选择语义上最适合它的元素来包装它
5
3 富有意义的部分 3.1 <p> 3.2 标题 3.3 <blockquote> 3.4 <address> 3.5 <pre>
6
3.1 <p>
段落 块级元素，只允许包含文本和行内元素
7
3.2 标题 标题用于引出新的一节内容
<hl> 、 <h2> 、 <h3> 、 <h4> 、 <h5> 和 <h6>
8
3.3 <blockquote>
标明一段长引文 如书中的一段文字或评论中的推荐辞
块级元素，只能包含块级子元素 其 cite 属性中包含了来源的 URL
9
3.4 <address>
于提供对你阅读的文档负责的人或组织的联系信息 署名行或归属声明
块级元素，只能包含文本或行内元素 默认斜体
10
3.5 <pre>
定义预先格式化过的文本 pre 元素是块级元素，只能包含行内元素
11
4 列表
4 列表 相关项的集合
无序列表 有序列表 定义列表
12
4.1 <ul>
无序列表：项的顺序不太重要 u1 元素是块级元素，其子只能是 1i 元素
13
4.2 <o1>
定义有序列表 ordered list 块级元素，只能包含 1i
14
4.3 <1i>
列表项，块级 可以包含文本或其他元素，甚至是新的列表
<h2>Specialty Pizzas</h2>
<ul>
<li>
<h3>Barbecue Chicken Pizza</h3>
<p>This hearty American departure from Italian
tradition is one of our most popular pizzas.</p>
<ul>
<li>Spicy barbecue sauce.</li>
<li>Chunks of mesquite grilled chicken.</li>
<li>Blend of three cheeses:
<ul>
<li>Mozzarella</li>
<li>Monterey Jack</li>
<li>Smoked Gouda</li>
</ul>
</li>
<li>Thin-sliced red onion.</li>
<li>Roasted red peppers.</li>
</ul>
</li>
</ul>15
5 定义列表 项及其说明的集合
由定义术语 (dt) 和定义说明 (dd) 组成
16
6 短语元素 短语元素
块元素内部的一些较小的内容片段
17
短语元素 <em>
强调一个词或短语 往往显示为斜体
<strong> 强调程度比 em 元素所能提供的更高 粗体
<cite> 标明对某一资源的引用 斜体
18
短语元素 <q>
简短的行内引文 cite 属性
<dfn> 术语 dfn 元素的 title 属性提供 简短定义 斜体
<abbr> 和 <acronnym> 缩写
19
短语元素 <del ><ins>
修改文档 cite 和 datetime
<code><kbd> <samp><var> 计算机代码
<br /> 换行
<hr /> 横线
20
7 多用途元素 把内容的一部分组织在一起以便与其他部分区分开 7.1 <div> 7.2 <span>
21
7.1 <div> 示例：<div id="main-content">
<h1>About Us</h1>
<p>Spaghetti and Cruft opened our doors in 1999, bringing great pizza and
pasta to the heart of the city's trendy Riverbend district. We handcraft
our pizzas on the spot using only the best ingredients, and then we bake them to
perfection in our rustic wood-fired brick oven. We sell pizza by the slice
or by the pie and even offer catering for any occasion all around the
neighborhood.</p>
</div>
22
7.1 <div>
作用 在文档中创建一个逻辑部分，将相关内容和元素组织在
一起 “ 所有东西都属于一个整体并与其他地方的东西分
开” 块级元素，可以包含文本和其他元素，包括块级元素
和行内元素 内容开始于一个新行，并占据整个可用的横向空间
是一种内容组织工具，不是页面布局工具
23
7.2 <span>
划出任意一段文本，赋予这些内容额外的信息
<h1>Latest News from Spaghetti and Cruft
<span>Last updated on 11/22/2006</span></h1>
说明 用 css 定义这个 span 的内容的样式 em 元素不必要地强调了这个日期
24
8 嵌入外部内容 外部内容
文件与文档分开保存，在 XHTML 标记代码中引用
25
8.1 <object>
嵌入一个外部的文件或某种类型的媒体 行内元素
26
8.2 <param>
嵌套在 object 元素中，用以定义对象的参数 空元素
结尾斜线 (/>) 闭合
27
实例
28
9 表现性元素 谨慎使用 <i>,<b>
斜体 , 粗体 <big>,<small>
字体 <tt>
等宽字体 <sup><sub>
上标或下标
29
10 特殊字符 字符 :
字符实体名 预先定义的名字：开始于符号“ &” ，结束于符号“ ;"
数值字符引用（转义 (escaping) ） Unicode编码值： >
30
11 用 css 控制内容的样式 11.1 声明基础字体样式 11.2 控制列袤的样式
31
11.1 声明基础字体样式 字体族 typeface
一类字体 一种字体设计方案的一组变体 Courier ，包含了不同尺寸的正常、斜体、粗体、粗斜
体 font-family: 字体族 ;
字体大小 font-size 属性
32
字体大小 字体大小度量单位
像素、毫米、厘米、英寸、磅、 plca em(1 em 等于从大写字母的顶端到基线的高度 ) ex (1 ex 等于从小写字母的顶端到基线的高度 ) 百分数 预定义的关键字 : xx-small 、 x-small 、 small 、
medium 、 1arge 、 x-1arge ， xx-1arge
33
行高 文本行的高度
从一行文本的基线到其前面一行的基线的距离 基线：文本所基于的一条不可见的线
g 和 p 这些字母的下伸部分位于基线下方 1ine-height
行距：印刷术语，两行之间额外的间隔
34
11.2 控制列表的样式 1. 改变无序列表的项目符号 2. 把图像用作列表项目符号 3. 改变有序列袤的样式
35
top related