DIV+CSS网页制作实战第09次课(2课时)段落-DIV-SPAN.pptx
/ 15,1,/ 15,2,知识技能目标 HTML文档结构 段落、转行及水平线标签 div与span标签,/ 15,任务2.3 HTML文档及常用标签 2.3.1 任务分析(熟练掌握HTML常用标记及其属性) 2.3.2 HTML文档 1HTML文档的基本结构 HTML文档即网页，其代码的基本结构如下 网页头部内容 网页主体内容 ,3,/ 15,4,2HTML文档的基本标记 HTML的标记都用号括起，多数标记由标记头和标记尾成对匹配，标记尾是在标记名前加/组成，例如、等。以下是HTML文档的几个基本标记 (1)HTML版本信息 HTML版本信息用以标明文档遵守HTML的哪一个版本，常用的文档版本声明如下 1)HTML 5 格式 2)HTML 4.01 Strict 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。 格式 3)HTML 4.01 Transitional 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。 格式,/ 15,5,4)HTML 4.01 Frameset 该 DTD 等同于 HTML 4.01 Transitional，但允许框架集内容。 格式 5)XHTML 1.0 Strict 该 DTD 包含所有 HTML 元素和属性，但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。 格式 6)XHTML 1.0 Transitional 该 DTD 包含所有 HTML 元素和属性，包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 XML 来编写标记。 格式,/ 15,6,7)XHTML 1.0 Frameset 该 DTD 等同于 XHTML 1.0 Transitional，但允许框架集内容。 格式 8)XHTML 1.1 该 DTD 等同于 XHTML 1.0 Strict，但允许添加模型(例如提供对东亚语系的 ruby 支持)。 格式 Dreamweaver CS6创建的HTML文档最开头会自动加上以下的HTML版本信息代码 ,/ 15,7,(2)html标记 是HTML文档标志，放在文档头和尾，表明这是一个HTML文档。 (3)head标记 是头部标记，放在文档的起始部分，其中放置一些用来说明文档的有关信息的其他标记。 (4)meta标记 meta是元信息标记，可以说明和定义文档的一些特征信息，例如 文档类型和字符集 定义关键字,/ 15,8, 浏览器渲染 用IE9渲染 用极速内核渲染 用ie兼容内核渲染 用ie标准内核渲染 每隔10秒钟刷新页面,/ 15,9,(5)title标记 标记应放在头部内，用来在浏览器标题栏显示当前页面的标题。例如 欢迎访问电子信息学院网站。 (6)body标记 为文档主体标记，其中放置各种页面元素的HTML标记，网页正文中的所有显示内容如文字、图像、表格、动画、视频等都放置在这对标记之间。 3HTML的语法规则 HTML文档应遵循以下语法规则 (1)HTML文档为文本文件，扩展名为“.html”或“.htm”。,/ 15,10,(2)HTML文档中有双标记和单标记之分 双标记格式为 单标记格式为 注意格式中属性不是必须的，当然也可以同时定义多个属性，多个属性间以空格隔开，Web标准建议属性值应用双引号括起。 (3)HTML标记及属性不区分字母大小写，例如，和是等效的，但Web标准建议都使用小写字母。 (4)HTML标记可以嵌套，但不能交叉，各层标记是全包容关系。 例如 欢迎进入本网站 是错误的写法。,/ 15,11,(5)HTML文档一行可以书写多个HTML标记，一个标记也可以分多行书写，不用任何续行符号，但HTML标记中的一个单词不能分在两行书写。 (6)在Dreamweaver的代码视图中输入的换行、回车和多个连续空格在浏览时都是无效的，浏览网页时，会自动忽略代码中输入的换行、回车、多于一个的连续英文空格(字串常量除外)，所有的相应显示效果都必须用标记来控制，如需要在网页中插入新的段落时，必须使用分段标记。换行可以使用标记，需要多个英文空格，可以使用多个“”转义符号。 (7)在Dreamweaver的设计视图中输入的换行、回车和多个连续英文空格等将自动在代码视图中生成相应的HTML代码。 (8)浏览器不能识别的格式写法通常将被浏览器自行解析，不会提示错误信息。,/ 15,12,2.3.3 段落、转行及水平线标签 1段落标签 例如This is a HTML Document 2转行标签 例如 3. 水平线标签 例如 标记的width属性用来控制标尺线的长度。例如 线长为50像素宽 线长为容器宽度的50,/ 15,13,标记的size属性控制标尺线的粗细；noshade属性将标尺线设置为黑色；align属性指定标尺线的位置。例如 右对齐 左对齐 居中(默认) 标记的color属性控制水平线的颜色。例如 ,/ 15,14,2.3.4 div与span标签 1div标签 标签作为页面元素的容器，可定义文档中的分区或节(division/section)，也可以把文档分割为独立的、不同的部分，它作为严格的组织工具，通常用来实现页面布局与排版，如果用 id 或 class 来定义的样式，该标签的作用会变得更加有效，这两者的主要差异是，class 用于元素组(类似的元素，或者可以理解为某一类元素)，而 id 用于标识单独的唯一的元素。 是一个块级元素，这意味着它的内容自动地开始一个新行。用法举例 或 或 ,/ 15,15,2span标签 标签常被用来组合文档中的行内元素。如果不对 span 应用样式，那么 span 元素中的文本与其他文本不会有任何视觉上的差异。使用span除了可对元素进行排版，也可应用相应样式。用法举例 或 或 应注意的是div占用一行，span不会占用一行，内容占多大宽度，span就有多宽。,
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
