网页设计与制作HTML5+CSS3

任务4制作“学习动态”子页面

第2章网页的基本结构实现知识目标技能目标素质目标（1）掌握常用块元素的用法。（2）掌握常用行元素的用法。（1）能够熟练使用段落、标题、列表、通用块标签。（2）能够熟练使用超级链接、图像、通用行标签。（3）能够使用合适的HTML标签创建图文并茂的网页。（1）培养自主学习能力。（2）培养具一反三的能力和吃苦耐劳的精神。（3）培养学生从知识到实践的的程序思维。

常用的块元素常用的行元素任务实现第2章网页的基本结构实现

1.常用的块元素1.1段落与标题1.2通用块元素1.3常用列表块元素1.4语义块元素第2章网页的基本结构实现

1.1段落与标题1.常用的块元素HTML网页中一篇文章要结构清晰，就需要有标题和段落。段落标签：P格式：palign=对齐方式段落文本/p注：align属性规定段落中文本的对齐方式。属性值有left，right，center，justify。但不建议使用，建议使用样式取代。段落标签：pre与p标签用法基本相同，区别是pre内文本内容将保留空格和换行符。

1.1段落与标题1.常用的块元素bodyp这是段落文字这是段落文字这是段落文字这是段落文字/phrpre这是段落文字这是段落文字这是段落文字这是段落文字/pre/body

1.1段落与标题1.常用的块元素HTML网页中一篇文章要结构清晰，就需要有标题和段落。标题标签：h1~h6标签可定义标题元素。注：h1定义最大的标题。h6定义最小的标题。

1.2通用块元素1.常用的块元素div标签：div标签用来定义文档中的分区或节（division/section），把文档分割为独立的、不同的部分。div标签是一个容器标签，其中的内容可以是任何HTML元素。id和class是div标签最重要的两个属性，区别在于class用于元素组（某一类元素），而id用于标识单独的唯一的元素

1.3常用列表块元素1.常用的块元素HTML支持有序、无序和定义列表，本质是组织文本的一种方式。有序列表：特定顺序的列表项集合格式：oltype=编号类型start=valueli第一项/lili第二项/lili第三项/li/oltype值描述1阿拉伯数字：1、2、3……A大写英文字母：A、B、C……a小写英文字母：a、b、c……I大写罗马数字：I、II、III……i小写罗马数字：i、ii、iii……表2-1有序列表type属性取值

1.3常用列表块元素1.常用的块元素...olli苹果/lili香蕉/lili菠萝/li/ololtype=astart=3li咖啡/lili牛奶/lili茶/li/ol...

1.3常用列表块元素1.常用的块元素HTML支持有序、无序和定义列表，本质是组织文本的一种方式。无序列表：列表中列表项的前导符合没有一定的次序，而是黑点、圆圈、方框等一些特殊符号标识。格式：ultype=编号类型li第一项/lili第二项/lili第三项/li/ultype值描述disc表示实心圆(默认)circle表示表示空心圆square表示小方块表2-2无序列表type属性取值

1.3常用列表块元素1.常用的块元素...bodyulli首页/lili学校概况/lili教学在线/lili院系设置/lili党的建设/li/ul/body...

1.3常用列表块元素1.常用的块元素HTML支持有序、无序和定义列表，本质是组织文本的一种方式。定义列表：又称为释义列表或字典列表，主要用到3个HTML标签：dl标签、dt和dd标签。格式：dldt名词1/dtdd名词解释1/dddt名词2/dtdd名词解释2/dd…/dl

1.3常用列表块元素1.常用的块元素...bodydldtWeb前端课程/dtdd这里有html教程/dddd这里有css教程/dddtJava课程/dtdd这里有java开发教程/dd/dl/body...

1.4语义块元素1.常用的块元素语义元素是拥有语义的元素，它清楚地向浏览器和开发者描述其意义。例如，form、table以及img能清晰地定义其内容。标签名描述header表示页面中一个内容区块或整个页面的标题section页面中的一个内容区块比如章节、页眉、页脚或页面的其他部分可以和h1、h2…等元素结合起来使用表示文档结构article表示页面中一块与上下文不相关的独立内容比如一篇文章aside表示article标签素内容之外的、与article标签内容相关的辅助信息可用作文章的侧栏hgroup表示对