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

第2章 排列网页内容回顾HTML的基本结构分为两部分，整个HTML包括头部（head）和主体（body）两部分，网页的标题用title标签表示，网页的主要内容用body标签表示。在HTML中，使用a标签来实现超链接，超链接标签可以实现页面间的链接、页面内的锚点链接以及发送电子邮件链接等功能。HTML文档中的路径分为绝对路径和相对路径，绝对路径是文件的完整路径，相对路径是指相对于该HTML文档的路径。理论内容列表标签表格标签表格布局与美化修饰div标签和span标签2.1 列表标签列表标签是HTML中非常重要的标签，通过使用各种列表类标签，能很好地排列网页中的内容。常见的列表标签包括有序列表、无序列表和定义列表。无序列表ul type=”项目符合类型”li列表项内容/lili列表项内容/lili列表项内容/li/ul有序列表ol type=”序号类型”li列表项/lili列表项/lili列表项/li/ol定义列表dl dt标题/dt dd描述/dd/dl定义列表的常见应用bodydl dt img src=images/phone1.jpg alt=三星手机/ /dt dd商品名称：三星N7108/dd dd系统：Android/dd dd 网络：移动2G/联通2G（GSM），移动3G（TD-SCDMA） /dddl/body2.2 表格标签使用表格可以使排列的内容简洁、整齐，便于用户浏览网页信息。表格的基本结构表格至少由table标签、tr标签和td标签这3种标签组成table表示表格，tr表示行，td表示一列单元格 表格的语法tabletr td第1行第1个单元格的内容/tdtd第1行第2个单元格的内容/td……/trtr td第2行第1个单元格的内容/tdtd第2行第2个单元格的内容/td……/tr……/table使用步骤：创建表格标签table。在表格标签中创建行标签tr。在行标签中创建单元格标签td。使用表格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=”所跨的列数”单元格内容/d2. 跨行 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其他标签或者内容/divdiv元素没有特定的含义，是用于组合其他HTML元素的容器。其为块级元素，浏览器会在块级元素的起始和结束处换行。总结常见的列表标签包括有序列表、无序列表和定义列表。表格的基本标签包括：table标签用于定义表格，tr标签用于定义表格的行，td标签用于定义表格的列。表格的常用属性有：background：定义表格的背景图像。width：定义表格的宽