html 网页排列 基本标签使用.pptx

第2章 排列网页内容 回顾 HTML的基本结构分为两部分，整个HTML包括头部（head）和主体（body）两部分，网页的标题用title标签表示，网页的主要内容用body标签表示。 在HTML中，使用a标签来实现超链接，超链接标签可以实现页面间的链接、页面内的锚点链接以及发送电子邮件链接等功能。 HTML文档中的路径分为绝对路径和相对路径，绝对路径是文件的完整路径，相对路径是指相对于该HTML文档的路径。 理论内容 列表标签 表格标签 表格布局与美化修饰 div标签和span标签 2.1 列表标签 列表标签是HTML中非常重要的标签，通过使用各种列表类标签，能很好地排列网页中的内容。 常见的列表标签包括有序列表、无序列表和定义列表。 无序列表 ul type=”项目符合类型” li列表项内容/li li列表项内容/li li列表项内容/li /ul 有序列表 ol type=”序号类型” li列表项/li li列表项/li li列表项/li /ol 定义列表 dl dt标题/dt dd描述/dd /dl 定义列表的常见应用 body dl dt img src=images/phone1.jpg alt=三星手机/ /dt dd商品名称：三星N7108/dd dd系统：Android/dd dd 网络：移动2G/联通2G（GSM），移动3G（TD-SCDMA） /dd dl /body 2.2 表格标签 使用表格可以使排列的内容简洁、整齐，便于用户浏览网页信息。 表格的基本结构 表格至少由table标签、tr标签和td标签这3种标签组成 table表示表格，tr表示行，td表示一列单元格 使用步骤： 创建表格标签table。 在表格标签中创建行标签tr。 在行标签中创建单元格标签td。 表格的语法 table tr td第1行第1个单元格的内容/td td第1行第2个单元格的内容/td …… /tr tr td第2行第1个单元格的内容/td td第2行第2个单元格的内容/td …… /tr …… /table 使用表格 table border=1 tr td排名/tdtd产品型号/tdtd价格/td /tr tr td1/tdtd联想Y400N-IS/tdtd￥7000/td /tr tr td2/tdtd联想Y480N-IF/tdtd￥5400/td /tr tr td3/tdtd华硕VivoBook/tdtd￥5150/td /tr tr td4/tdtd联想Y500NT-I/tdtd￥9800/td /tr /table 合并单元格 1. 跨列 td colspan=”所跨的列数”单元格内容/d 2. 跨行 td rowspan=”所跨的行数”单元格内容/td 合并行与列 表格的高级标签 表格标题标签caption，用于描述整个表格的标题。 表格表头th，用于定义表格的表头，通常是表格的第一行数据，以粗体、居中的样式显示数据。 表格数据的分组标签thead、tbody和tfoot，这三个标签通常配合使用，主要对表格数据进行逻辑分组。thead对应表格的表头部分，tbody对应表格的数据主体部分，tfoot对应表格的底部页脚部分，各分组标签内由多行tr组成。 高级标签的使用 2.3 表格的美化与布局 表格的美化修饰即从多方面对表格属性进行设置，使表格更漂亮、更美观、更合理。表格需要修饰的内容如下： 表格的高度、宽度和边框。 表格的行与列的背景。 表格内容的对齐方式。 表格单元格的填充、间距的设置。 设置表格的尺寸与边框 table width=”宽度” height=”高度” border=”边框宽度” …… /table 设置表格相关元素的背景 （1）表格背景。 table bgcolor=”整个表格背景颜色” background=”表格背景图像地址” …… /table （2）行背景色。 tr bgcolor=”行的背景颜色”……/tr （3）单元格背景色。 td bgcolor=”单元格的背景颜色”……/td 表格的填充与间距 table cellspacing=”单元格间距” cellpadding=”单元格内填充” …… /table 综合练习：表格布局 2.4 容器标签 在排列网页内容时，我们有时会将某些标签放在一起进行排列，这样就需要使用一个标签将他们组成一个区块。 在HTML中，可以通过div和span将HTML元素组合起来，div标签和span标签均为容器类标签。 div其他标签或者内容/div DIV标签 div元素没有特定的含义，是用于组合其他HTML元素的容器。 其为块级元素，浏览器会在