Web前端开发实例教程——HTML5 CSS3 JavaScript 第4章 网页布局与交互.pptVIP

第4章 网页布局与交互 Web前端开发实例教程 ——HTML5+CSS3+JavaScript 4.1 表格 4.1.1 表格的结构 表格是由行和列组成的二维表，而每行又由一个或多个单元格组成，用于放置数据或其他内容。表格中的内容按照相应的行或列进行分类和显示如图4-1所示。 4.1 表格 4.1.2 表格的基本语法 在HTML语法中，表格主要通过3个标签来构成：table、tr和td。表格的标签为table，行的标签为tr，表项的标签为td。表格的语法格式为： table border=n width=x|x% height=y|y% cellspacing=i cellpadding=j caption align=left|right|top|bottom valign=top|bottom标题/caption tr th表头1/th th表头2/th th…/th th表头n/th/tr tr td表项1/td td表项2/td td…/td td表项n/td/tr … tr td表项1/td td表项2/td td…/td td表项n/td/tr /table 4.1 表格 4.1.3 表格的属性 1．设置表格的边框 2．设置表格大小 3．设置表格背景颜色 4．设置表格背景图像 5．设置表格单元格间距 6．设置表格单元格边距 7．设置表格在网页中的对齐方式 8．表格数据的对齐方式 4.1 表格 4.1.4 不规范表格 1．跨行 跨行是指单元格在垂直方向上合并，语法如下： td rowspan=所跨的行数单元格内容/td 其中，rowspan指明该单元格应有多少行的跨度，在th和td标签中使用。 2．跨列 跨列是指单元格在水平方向上合并，语法如下： td colspan=所跨的行数单元格内容/td 其中，colspan指明该单元格应有多少列的跨度，在th和td标签中使用。 3．跨行、跨列 4.1 表格 4.1.5 表格数据的分组 表格数据的分组标签包括thead、tbody和tfooter，主要用于对报表数据进行逻辑分组。 【例4-3】制作产品销量季度数据报表，本例文件4-3.html的浏览效果如图4-4所示。 4.1 表格 4.1.6 使用表格实现页面布局 使用表格可以导入表格化数据，设计页面分栏，定位页面上的文本和图像等。 【例4-4】使用表格布局珠宝商城产品展示页面，本例文件4-4.html在浏览器中显示的效果如图4-5所示。 4.2 使用结构元素构建网页布局 使用结构元素构建网页布局 在HTML5中，为了使文档的结构更加清晰明确，使用文档结构元素构建网页布局。使用结构元素构建网页布局的典型布局如图4-6所示。 4.2 使用结构元素构建网页布局 使用结构元素构建网页布局 1．section标签 section标签用来定义文档中的节（section、区段）。 2．nav标签 nav标签用来定义导航链接的部分。 3．header标签 header标签用来定义文档的页眉。 4．footer标签 footer标签用来定义section或document的页脚。 5．article标签 article标签用来定义独立的内容，该标签定义的内容可独立于页面中的其他内容使用。 4.2 使用结构元素构建网页布局 使用结构元素构建网页布局 6．aside标签 aside标签用来表示当前页面或新闻的附属信息部分。 【例4-7】使用aside标签定义了网页的侧边栏信息，本例文件4-7.html在浏览器中的显示效果如图4-9所示。 4.3 div标签 div标签 div标签是一个块级元素，用来为HTML文档中大块内容提供结构和背景，它可以把文档分割为独立的、不同的部分，其中的内容可以是任何HTML元素。 由于div标签没有明显的外观效果，所以需要为其添加CSS样式属性，才能看到区块的外观效果。div标签的格式为： div align=left|center|right HTML元素 /div 4.4 span标签 4.4.1 基本语法 span标签用来定义文档中一行的一部分，是行级元素。行级元素没有固定的宽度，根据span元素的内容决定。span元素的内容主要是文本，其语法格式为： span内容/span 4.4 span标签 4.4.2 span与div的区别 1．区域内是否换行 div标签区域内的对象与区域外的上下文会自动换行，而span标签区域内的对象与区域外的对象不会自动换行。 2．标签相互包含 div与span标签区域可以同时在网页上使用，一般在使用上建议用div标签包含span标签；但span标签最好不包含div标签，否则会造成span