第2章--块级标签.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,2.1,基本块级标签,2.2,用于布局的块级标签,2.3,实训,制作什锦果园关于页面,第,2,章 块级标签,基本块级标签包括标题标签、段落标签和水平线标签。,2.1.1,标题标签,在页面中，标题是一段文字内容的核心，所以总是用加强的效果来表示。网页中的信息可以分为主要点、次要点，可以通过设置不同大小的标题，增加文章的条理性。标题文字标签的格式为：,标题文字,【,演练,2-1】,列出,HTML,中的各级标题。,2.1,基本块级标签,2.1.2,段落标签,段落标签放在段落的头部和尾部，用于定义一个段落。,标签不但能使后面的文字换到下一行，还可以使两段之间多加一空行，相当于,标签。段落标签的格式为：,文字,其中，属性,align,用来设置段落文字在网页上的对齐方式：,left,（左对齐）、,center,（居中）和,right,（右对齐），默认为,left,。格式中的,“,|,”,表示,“,或者,”,，即多项选其一。,【,演练,2-2】,列出包含,标签的多种属性。,2.1,基本块级标签,2.1.3,水平线标签,在页面中插入一条水平标尺线（,horizontal rules,），可以将不同功能的文字分隔开，看起来整齐、明了。当浏览器解释到,HTML,文档中的,标签时，会在此处换行，并加入一条水平线段。线段的样式由标签的参数决定。水平线标签的格式为：,其中，属性,size,设定线条粗细，以像素为单位，默认值为,2,。,【,演练,2-3】,标签的基本用法。,2.1,基本块级标签,2.1.4,案例,制作网络鞋城常见问题解答页面,【,演练,2-5】,使用文字与段落的基本排版知识制作网络鞋城常见问题解答页面，本例文件,2-6.html,在浏览器中显示的效果如图,2-6,所示。,2.1,基本块级标签,常用于布局的块级标签包括无序列表、有序列表、表格、表单、分区,。,2.2.1,无序列表,无序列表中每一个表项的前面是项目符号（如、等符号）。建立无序列表可使用,标签和,表项标签。格式为：,第一个列表项,第二个列表项,【,演练,2-6】,制作网络鞋城支付方式的无序列表。,2.2,用于布局的块级标签,2.2.2,有序列表,有序列表是一个有特定顺序的列表项的集合。在有序列表中，各个列表项有先后顺序之分，它们之间以编号来标记。使用,标签可以建立有序列表，表项的标签仍为,。,格式为：,表项,1,表项,2,【,例,2-7】,制作网络鞋城网银在线支付步骤的有序列表。,2.2,用于布局的块级标签,2.2.3 表格,1,使用表格的优点,表格是由行和列组成的二维表，每个表格均有若干行，每行有若干列，行和列围成的区域是单元格，单元格的内容是数据，也称数据单元格，数据单元格可以包含文本、图片、列表、段落、表单、水平线或表格等元素。表格中的内容按照相应的行或列进行分类和显示如图所示。,行,列,单元格,2.2,用于布局的块级标签,2,.,表格的基本语法,表格主要通过,3,个标签来构成：,、,和,。表格的语法格式为：,标题,表头,1,表头,2,表头,n,表项,1,表项,2,表项,n,表项,1,表项,2,表项,n,【演练2-9】在页面中添加一个3行2列的表格,。,2.2,用于布局的块级标签,3,.,跨行跨列的表格,（,1,）跨行,跨行是指单元格在垂直方向上合并，语法如下：,单元格内容,其中，,rowspan,表示跨行的意思。,【演练2-10】制作一个跨行展示的不同鞋类的库存表格,。,2.2,用于布局的块级标签,（,2,）跨列,跨列是指单元格在水平方向上合并，语法如下：,单元格内容,其中，,colspan,表示跨列的意思。,【演练2-11】制作一个跨列展示的不同鞋类的库存表格,。,2.2,用于布局的块级标签,（,3,）跨行、跨列,【演练2-12】制作一个跨行跨列展示的不同鞋类的库存表格,。,2.2,用于布局的块级标签,4表格数据的分组标签,表格数据的分组标签包括,、,和,，主要用于对报表数据进行逻辑分组。其中，,标签定义表格的头部；,标签定义表格主体，即报表详细的数据描述；,标签定义表格的脚部，即对各分组数据进行汇总的部分。,【演练2-13】制作一个鞋城季度销量数据报表,。,2.2,用于布局的块级标签,5表格内文字的对齐方式,（,1,）水平对齐,align,的属性值分别为：,center,（表项数据的居中）、,left,（左对齐）、,right,（右对齐）或,justify,（左右调整）。,（,2,）垂直对齐,valign,的属性值分别为：,top,（靠单元格顶）、,bottom,（靠单元格底）、,middle,（靠单元格中）或,baseline,（同行单元数据项位置一致）。,6.,表格在页面中的对齐方式,设置表格在页面中的位置，格式为：,2.2,用于布局的块级标签,7,.,表格的应用,（,1,）使用表格显示数据,【演练2-14】制作鞋城季度销量一览表,。,2.2,用于布局的块级标签,7.,表格的应用,（,2,）使用表格实现页面局部布局,【演练2-15】制作网络鞋城商品分类页面,。,2.2,用于布局的块级标签,2.2.4,表单,1表单的工作原理,表单的作用是从客户端收集信息。当访问者在表单中输入信息，单击提交按钮后，这些信息将被发送到服务器，服务器端脚本或应用程序将对这些信息进行处理。服务器进行响应时，会将被请求信息发送回用户（或客户端），或者基于该表单内容执行一些操作，表单的工作原理如图2-18所示。,2.2,用于布局的块级标签,2,.,表单标签,网页上具有可输入表项及项目选择等控制所组成的栏目称为表单。,标签用于创建供用户输入的,HTML,表单。表单的基本语法及格式为：,name,属性：表单的名字，在一个网页中用于唯一识别一个表单。,action,属性：表单处理的方式，往往是,E-mail,地址或网址。,method,属性：表单数据的传送方向，是获得（,GET,）表单还是送出（,POST,）表单。,2.2,用于布局的块级标签,2.2.5 分区标签,分区标签常用于页面布局时对区块的划分，它相当于一个大,“,容器,”,，可以容纳无序列表、有序列表、表格、表单等块级标签，同时也可以容纳普通的标题、段落、文字、图片等内容。由于标签没有明显的外观效果，所以需要为其添加CSS样式属性，才能看到区块的外观效果。,分区标签的格式为：,文本、图像或表格,2.2,用于布局的块级标签,【实训】本实训练习通过标签组织网页内容，制作什锦果园关于页面。本例文件2-17.html在浏览器中显示的效果如图2-20所示。,2.3 实训制作什锦果园关于页面,1使用嵌套的列表制作如图2-21所示的鞋类商品分类列表。,2使用跨行跨列的表格制作网络鞋城促销活动分类信息，如图2-22所示。,3使用表格布局网络鞋城支付选择页面，如图2-23所示。,4使用标签组织段落、列表等网页内容，制作网络鞋城经营模式页面，如图2-24所示。,习题,2,