Web 开发基础

Web开发基础 第4章添加内容

内容提要 • 1 内容和结构 • 2 <body> • 3 富有意义的部分 • 4 列表 • 5 定义列表 • 6 短语元素 • 7 多用途元素 • 8 嵌入外部内容 • 9 表现性元素 • 10 特殊字符 • 11 用 css控制内容的样式

1 内容和结构 • 依靠某种结构，文本更容易阅读和理解

2 <body> • 任何出现在body元素之外的内容都会使文档无效 • body元素是块级元素，而且只能包含块级子元素 • 任何文本或行内元素都必须嵌套在另一个块级元素之中，不能直接包含在body元素中

3 富有意义的部分 • 让内容和表现因素分离 • 认真分析元素的语义，根据内容的含义选择语义上最适合它的元素来包装它

3 富有意义的部分 • 3.1 <p> • 3.2 标题 • 3.3 <blockquote> • 3.4 <address> • 3.5 <pre>

3.1 <p> • 段落 • 块级元素，只允许包含文本和行内元素

3.2 标题 • 标题用于引出新的一节内容 • <hl>、 <h2>、 <h3>、 <h4>、 <h5>和<h6>

3.3 <blockquote> • 标明一段长引文 • 如书中的一段文字或评论中的推荐辞 • 块级元素，只能包含块级子元素 • 其cite属性中包含了来源的URL

3.4 <address> • 于提供对你阅读的文档负责的人或组织的联系信息 • 署名行或归属声明 • 块级元素，只能包含文本或行内元素 • 默认斜体

3.5 <pre> • 定义预先格式化过的文本 • pre元素是块级元素，只能包含行内元素 4 列表

4 列表 • 相关项的集合 • 无序列表 • 有序列表 • 定义列表

4.1 <ul> • 无序列表：项的顺序不太重要 • u1 元素是块级元素，其子只能是1i元素

4.2 <o1> • 定义有序列表ordered list • 块级元素，只能包含1i

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>

5 定义列表 • 项及其说明的集合 • 由定义术语 (dt) 和定义说明 (dd) 组成

6 短语元素 • 短语元素 • 块元素内部的一些较小的内容片段

短语元素 • <em> • 强调一个词或短语 • 往往显示为斜体 • <strong> • 强调程度比em元素所能提供的更高 • 粗体 • <cite> • 标明对某一资源的引用 • 斜体

短语元素 • <q> • 简短的行内引文 • cite属性 • <dfn> • 术语 • dfn元素的title属性提供简短定义 • 斜体 • <abbr>和<acronnym> • 缩写

短语元素 • <del ><ins> • 修改文档 • cite和datetime • <code><kbd><samp><var> • 计算机代码 • <br /> • 换行 • <hr /> • 横线

7 多用途元素 • 把内容的一部分组织在一起以便与其他部分区分开 • 7.1 <div> • 7.2 <span>

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>

7.1 <div> • 作用 • 在文档中创建一个逻辑部分，将相关内容和元素组织在一起 • “所有东西都属于一个整体并与其他地方的东西分开” • 块级元素，可以包含文本和其他元素，包括块级元素和行内元素 • 内容开始于一个新行，并占据整个可用的横向空间 • 是一种内容组织工具，不是页面布局工具

7.2 <span> • 划出任意一段文本，赋予这些内容额外的信息 <h1>Latest News from Spaghetti and Cruft <span>Last updated on 11/22/2006</span></h1> • 说明 • 用css定义这个span的内容的样式 • em元素不必要地强调了这个日期

8 嵌入外部内容 • 外部内容 • 文件与文档分开保存，在XHTML标记代码中引用

8.1 <object> • 嵌入一个外部的文件或某种类型的媒体 • 行内元素

8.2 <param> • 嵌套在object元素中，用以定义对象的参数 • 空元素 • 结尾斜线(/>)闭合

实例

9 表现性元素 • 谨慎使用 • <i>,<b> • 斜体,粗体 • <big>,<small> • 字体 • <tt> • 等宽字体 • <sup><sub> • 上标或下标

10 特殊字符 • 字符: • 字符实体名 • 预先定义的名字：开始于符号“&”，结束于符号“;" • 数值字符引用（转义(escaping) ） • Unicode编码值：&#62

11 用 css控制内容的样式 • 11.1 声明基础字体样式 • 11.2 控制列袤的样式

11.1 声明基础字体样式 • 字体族 typeface • 一类字体 • 一种字体设计方案的一组变体 • Courier，包含了不同尺寸的正常、斜体、粗体、粗斜体 • font-family:字体族 ; • 字体大小 • font-size属性

字体大小 • 字体大小度量单位 • 像素、毫米、厘米、英寸、磅、 plca • em(1 em等于从大写字母的顶端到基线的高度) • ex (1 ex等于从小写字母的顶端到基线的高度) • 百分数 • 预定义的关键字: xx-small 、x-small 、 small 、 medium、1arge、 x-1arge， xx-1arge

行高 • 文本行的高度 • 从一行文本的基线到其前面一行的基线的距离 • 基线：文本所基于的一条不可见的线 • g和p这些字母的下伸部分位于基线下方 • 1ine-height • 行距：印刷术语，两行之间额外的间隔

11.2 控制列表的样式 • 1. 改变无序列表的项目符号 • 2. 把图像用作列表项目符号 • 3. 改变有序列袤的样式

Web 开发基础

Web 开发基础

Presentation Transcript