一、列表标签
语义：标记一堆数据是一个整体/列表
html中列表标签分为三种
1、无序列表（列表标签中使用最多的一种，非常重要）：unordered list
#1、作用：制作导航条、商品列表、新闻列表等#2、组合使用ul>li <ul> <li>秒杀</li> <li>优惠券</li> <li>PLUS会员</li> <li>闪购</li> <li>拍卖</li> <li>京东服饰</li> <li>京东超市</li> <li>生鲜</li> <li>全球购</li> <li>京东金融</li> </ul>#3、ul标签的属性type（这属于列表的样式，所以了解即可）type：列表标识的类型 disc：实心圆(默认值) circle：空心圆 square：实心矩形 none：不显示标识可以通过css直接去掉小圆点<style type="text/css"> ul { list-style: none; }</style>#4、注意ul与li是组合标签应该一起出现，并且ul的子标签只应该是li，而li的子标签则可以是任意其他标签2、有序列表（极少使用）
<h1>智商排名</h1> <ol> <li>Egon</li> <li>刘清正</li> <li>武佩奇</li> <li>alex</li> <li>元昊</li> </ol> <!--有序列表能干的事，完全可以用无序列表取代--> <h1>智商排名</h1> <ul style="list-style: none"> <li>1. xiwang</li> <li>2. dabao</li> <li>3. xiaoer</li> <li>4. wangxing</li> <li>5. ayca</li> </ul>
3、自定义列表（也会经常使用）
#1、作用分析选择用什么标签的唯一标准，是看文本的实际语义，而不是看长什么样子无序列表：内容是并列的,没有先后顺序有序列表：内容是有先后顺序的自定义列表：对一个题目进行解释说明的时候，用自定义列表,可以做网站尾部相关信息，网易注册界面的输入框#2、自定义列表也是一个组合标签：dl>dt+dddl:defination list，自定义列表dt：defination title，自定义标题dd：defination description，自定义描述<dl> <dt>自定义标题1<dt> <dd>描述1<dd> <dd>描述2<dd> <dd>描述3<dd> <dt>自定义标题2<dt> <dd>描述1<dd> <dd>描述2<dd> <dd>描述3<dd> <dt>自定义标题3<dt> <dd>描述1<dd> <dd>描述2<dd> <dd>描述3<dd></dl> #3、注意: 3.1 dl>dt+dd应该组合出现，dl中只应该存放dt和dd，而可以在dt和dd中添加任意其他标签 3.2 一个dt可以可以没有对应的dd，也可以有多个，但建议一个dt对应一个dd
用法举例
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> ul { list-style: none; } </style></head><body><!--无序列表--><ul> <li> <h2>标题栏</h2> </li> <li>1.秒杀</li> <li>2.优惠券</li> <li>3.PLUS会员</li></ul><!--无序列表--><!--有序列表--><ol> <li>秒杀</li> <li>优惠券</li> <li>PLUS会员</li></ol><!--有序列表--><!--自定义列表--><dl> <dt>智商排名</dt> <dd>1、egon</dd> <dd>2、lxx</dd> <dd>3、alex</dd> <dd>4、hxx</dd> <dt>颜值排名</dt> <dd>egon</dd> <dd>lxx</dd> <dd>hxx</dd> <dd>alex</dd></dl><!--自定义列表--><!--练习题--><dl> <dt>购物流程</dt> <dd>1111</dd> <dd>1111</dd> <dd>1111</dd> <dt>配送方式</dt> <dd>1111</dd> <dd>1111</dd> <dd>1111</dd> <dt>支付方式</dt> <dd>1111</dd> <dd>1111</dd> <dd>1111</dd></dl><hr><h1>物品清单</h1><ul> <li> <h2>蔬菜</h2> <ul> <li>黄瓜</li> <li>茄子</li> <li>萝卜</li> </ul> </li> <li> <h2>水果</h2> <ul> <li>西红柿</li> <li>香蕉</li> <li>苹果</li> </ul> </li></ul></body></html>列表标签用法举例
二、table标签
语义：标记一段数据为表格
1、介绍
#1、作用表格标签是一种数据的展现形式，当数据量非常大的时候，使用表格的形式来展示被认为是最清晰的#2、格式<table> <tr> <td></td> </tr></table>tr代表表格的一行数据td表一行中的一个普通单元格th表示表头单元格#3、注意点：表格标签有一个边框属性，这个属性决定了边框的宽度。默认情况下这个属性的值为0，所以看不到边框
2、表格属性
#1、宽度和高度 可以给table和td设置width和height属性 1.1 默认情况下表格的宽高是按照内容的尺寸来调整的，也可以通过给table标签设置widht和height来手动指定表格的宽高 1.2 如果给td标签设置width和height属性，会修改当前单元格的宽度和高度，只要不超过table的宽高，则不会影响整个表格的宽度和高度#2、水平对齐和垂直对齐 水平对齐align可以给table、tr、td标签设置 垂直对齐valign只能给tr、td标签设置 ========水平对齐=========== 取值 align="left" align="center" align="right" 2.1 给table标签设置水平对齐，可以让表格在水平方向上对齐 强调：table只能设置水平方向 2.2 给tr设置水平对齐，可以控制当前行所有单元格内容都水平对齐 2.3 给td设置水平对齐，可以控制当前单元格内容水平对齐，tr与td冲突的情况下，以td为准 ========垂直对齐=========== 取值 valign="top" valign="center" valign="bottom" 2.4 给tr设置垂直对齐可以让当前行所有单元格内容都垂直对齐 2.5 给td设置垂直对齐可以让当前单元格内容垂直对齐#3、外边距和内边距 只能给table设置 3.1 外边距：单元格与单元格之间的间隔，cellspacing="3px"，默认值为2px 3.2 内边距：单元格边框与文字之间的距离:cellpadding="200px"
3、三种细线表格
#1、方式一 在标签中，想通过指定外边距为0来实现细线表格是不靠谱的，其实他是将2条线合成了一条线.所以看上去很不舒服,如下实现<table width="200px" height="200px" bgcolor="black" border="1" cellspacing="0px"> <tr bgcolor="white"> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr bgcolor="white" > <td>Egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>ALex</td> <td>male</td> <td>73</td> </tr> <tr bgcolor="white"> <td>Wxx</td> <td>female</td> <td>84</td> </tr></table>#2、方式二 细线表格的制作方式： 1、给table标签设置bgcolor 2、给tr标签设置bgcolor 3、给table标签设置cellspacing="1px" 注意： table、tr、td标签都支持bgcolor属性<table width="200px" height="200px" bgcolor="black" cellspacing="1px"> <tr bgcolor="white"> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr bgcolor="white" > <td>Egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>ALex</td> <td>male</td> <td>73</td> </tr> <tr bgcolor="white"> <td>Wxx</td> <td>female</td> <td>84</td> </tr></table>#3、方式三（）<table border="1px" style="border-collapse: collapse;border: 1px solid red"> <tr> <td>姓名</td> <td>性别</td> <td>年龄</td> </tr> <tr> <td>egon</td> <td>male</td> <td>18</td> </tr> <tr> <td>alex</td> <td>female</td> <td>19</td> </tr></table>
4、表格的结构
5、表的结构详解
ps:
整张表格table只能水平对齐，默认左对齐
垂直方向都是默认中对齐
tr td可以水平左右对齐
为了方便管理维护以及提升语义，我们将表格中存储的数据分为四类：#1、表格的标题:caption 特点:相对于表格宽度自动居中对齐 注意: 1.1 该标签一定要写在table标签里，否则无效 1.2 caption一定要紧跟在table标签内的第一个#2、表格的表头信息:thead 特点：专门用来存储每一列的标题，只要将当前列的标题存储在这个标签中就会自动居中+加粗文字#3、表格的主体信息:tbody 注意： 3.1 如果没有添加tbody，浏览器会自动添加 3.2 如果指定了thread和tfoot，那么在修改整个表格的高度时，thead和tfoot有自己默认的高度，不会随着 表格的高度变化而变化#4、表尾信息:tfoot<html><head> <meta charset="utf-8"/></head><body> <table bgcolor="black" border="1" width="300px" height="300px" cellspacing="1px"> <caption>学员信息统计</caption> <thead> <tr bgcolor="white"> <th>姓名</th> <th>性别</th> <th>年龄</th> </tr> </thead> <tbody> <tr bgcolor="white"> <td>egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>egon</td> <td>male</td> <td>18</td> </tr> <tr bgcolor="white"> <td>egon</td> <td>male</td> <td>18</td> </tr> </tbody> <tfoot> <tr bgcolor="white"> <td>3</td> <td>3</td> <td>3</td> </tr> </tfoot> </table></body></html>
6、表格单元格合并
#1、水平向上的单元格colspan 可以给td标签添加一个colspan属性，来把水平方向的单元格当做多个单元格来看待 <td colspan="2"></td>#2、垂直向上的单元格rowspan 可以给td标签设置一个rowspan属性，来把垂直方向的的单元格当成多个去看待#注意注意注意:1、由于把某一个单元格当作了多个单元格来看待，所以就会多出一些单元格，所以需要删掉一些单元格2、一定要记住，单元格合并永远是向后或者向下合并，而不能向前或向上合并
单元格合并举例：
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><table border="1px" align="center" width="500px" height="500px" style="border-collapse: collapse;border: 1px solid green"> <caption>老爷们培训学员信息统计</caption> <thead> <th>姓名</th> <th>年龄</th> <th>智商</th> </thead> <tbody> <tr> <td>艾莉克斯</td> <td>73</td> <td>70</td> </tr> <tr> <td>egon</td> <td>18</td> <td>70</td> </tr> <tr> <td>艾莉克斯</td> <td>73</td> <td>70</td> </tr> </tbody> <tfoot> <td>统计</td> <td>43.6</td> <td>90</td> </tfoot></table></body></html>单元格合并
7、传统布局
传统的布局方式就是使用table来做整体页面的布局，布局的技巧归纳为如下几点：#1、定义表格宽高，将border、cellpadding、cellspacing全部设置为0#2、单元格里面嵌套表格#3、单元格中的元素和嵌套的表格用align和valign设置对齐方式#4、通过属性或者css样式设置单元格中元素的样式传统布局目前应用：#1、快速制作用于演示的html页面#2、商业推广EDM制作(广告邮件)
原文转载：http://www.shaoqun.com/a/481289.html
友家速递：https://www.ikjzd.com/w/1341
杨帆：https://www.ikjzd.com/w/1648
瀚霖：https://www.ikjzd.com/w/2345
一、列表标签语义：标记一堆数据是一个整体/列表html中列表标签分为三种1、无序列表（列表标签中使用最多的一种，非常重要）：unorderedlist#1、作用：制作导航条、商品列表、新闻列表等#2、组合使用ul>li<ul><li>秒杀</li><li>优惠券</li><li>PLUS会员</li><
dojo：https://www.ikjzd.com/w/2052
李群：https://www.ikjzd.com/w/1767
百万葵园有薰衣草吗？番禺百万葵园薰衣草好看吗？：http://tour.shaoqun.com/a/28662.html
广交会期间广州酒店报价翻番 ：http://tour.shaoqun.com/a/52553.html
惠州响水河漂流自驾游怎么走？：http://tour.shaoqun.com/a/2410.html
No comments:
Post a Comment