第7章列表和表格

7.1 有序列表

    <ol type="A"><li>这里是第1个li</li><li>这里是第2个li</li><li>这里是第3个li</li></ol>

ol属性：

type : 数字(1),大小写字母(A,a),大小写罗马数字(I,i)

start: "起始编号位序"表示列表项的开始编号所处的位置序号，即li前面开始的数值 --> <ol type="a" start="3">

7.2 无序列表

    <ul type="square"><li>这里是第1个li</li><li>这里是第2个li</li><li>这里是第3个li</li></ul>

ul属性：

type->实心圆(disc)->空心圆(circle)->实心矩形(square)

该属性顺序是li中继续包含ul后的type默认属性,后面默认为实心矩形

注意：无论是有序列表还是无序列表，ul和ol能接的标签只能是li，但li中可以添加任意标签

7.3 定义列表

    <dl><dt>html是什么</dt><dd>HyperText Markup Languagehtml<br/>是一种超文本标记语言</dd></dl>

dd标签相当于其他列表中的li标签，可以在其中添加任意标签，不过建议只放dt和dd标签，一般情况下使用标签+样式实现文本的解析，不使用多个dd或dt标签

定义列表的应用场景 1.做网站尾部的相关信息 2.做图文混排

7.4 嵌套列表

    <ul> -->无序列表<li><ol> -->有序列表<li>...</li>          -->无序列表中嵌套了一个有序列表</ol></li></ul>

7.5 表格

属性：

宽width 高height 对齐方式align 背景颜色bgcolor 背景图片background 边距cellpadding 间距cellspacing 摘要summary 边框显示：frame和rules

对齐属性:

align : 水平方向对齐,值为left,center,right. 适用于table,tr,td

valign: 垂直方向对齐。值为top,middle,bottom. 适用于tr,td

cellspacing : 单元格之间的空白(默认2px) 适用于table

cellpadding : 内容与单元格的空白适用于table

bgcolor、background 两个属性也适用与表格。(table,tr,td)

在表格里面给宽度并不能真正的限制死表格的宽度，如果内容超出表格的实质宽高，依然会将表格的单元格甚至整个表格撑开

▷ table的三个基本组成部分：行，列，单元格

▷ 表格标题标记:<caption align="水平对齐方式(左中右)" valign="垂直对齐(上下)"></caption>

▷ 表格可以分成表头、主体和表尾三部分，在HTML语言中分别用thead、tbody、tfoot表示

★这里有三个注意点：

（1）thead和tfoot在一张表中都只能有一个，而tbody可以有多个。

（2）tfoot必须出现在tbody前面，这样浏览器在接收主体数据之前，就能渲染表尾，有利于加快表格的显示速度。这一点对大型表格尤其重要。

（3）thead、tbody和tfoot里面都必须使用tr标签。

▷ CSS中的table-layout语句 table { table-layout: fixed/auto/inherit }

auto表示单元格的大小由内容决定。fixed表示单元格的大小是固定的，由第一个指定大小的单元格决定；如果所有单元格都没有指定大小，则由第一个单元

格的默认大小决定；如果单元格中的内容超出单元格的大小，则用CSS中的overflow命令控制。微软公司声称使用这个命令，表格的显示速度可以加快100倍。

inherit:从父元素继承table-layout属性的值，任何版本的IE都不支持。

▷ tr 定义表格的行 th 定义标题单元格 td 定义表格的列,为一般单元格

▷ colspan 合并列单元格 rowspan 合并行单元格

其他属性还有

summary 属性规定表格内容的摘要。summary 属性不会对普通浏览器中产生任何视觉变化。屏幕阅读器可以利用该属性。

frame和rules属性，可以控制边框的显示。frame属性控制着表格最外围的四条边框的可见性，而 rules 则控制着表格内部边框的可见性。

▶ frame属性可取的值及含义如下：

● void - 默认值，表示不显示表格最外围的边框

● above - 显示上部的外侧边框 ● below - 显示下部的外侧边框

● lhs - 显示左边的外侧边框 ● rhs - 显示右边的外侧边框

● hsides - 显示上部和下部的外侧边框 ● vsides - 显示左边和右边的外侧边框

● box - 在所有四个边上显示外侧边框 ● border - 在所有四个边上显示外侧边框

▶ rules 属性可取的值有五个，分别是：

● none - 默认值，无边框

● rows - 为行加边框 ● cols - 为列加边框

● groups - 为行组或列组加边框 ● all - 为所有行列（单元格）加边框

demo：

 1 <table border="1" width="600" frame="hsides" rules="groups">
 2         <caption>My Ultimate Table</caption>
 3         <colgroup span="1" width="200"></colgroup>
 4         <!-- tbody可以用来对"行"进行分组，而colgroup则用来对"列"进行分组 -->
 5         <colgroup span="3" width="400"></colgroup>
 6         <!-- colgroup这里将后三列为一组，每组宽度为400像素 -->
 7         <thead> <tr> <td>cell 1-1</td> <td>cell 1-2</td> <td>cell 1-3</td> <td>cell 1-4</td> </tr> </thead>
 8         <tfoot> <tr> <td>cell 4-1</td> <td>cell 4-2</td> <td>cell 4-3</td> <td>cell 4-4</td> </tr> </tfoot>
 9         <tbody> <tr> <td>cell 2-1</td> <td>cell 2-2</td> <td>cell 2-3</td> <td>cell 2-4</td> </tr>
10                 <tr> <td>cell 3-1</td> <td>cell 3-2</td> <td>cell 3-3</td> <td>cell 3-4</td> </tr> </tbody>
11 </table>

在浏览器中的显示效果如下图：

转载于:https://www.cnblogs.com/chenhaoqiang/p/6266791.html

列表和表格---学习笔记02相关推荐

JavaWeb-综合案例(用户信息)-学习笔记02【登录功能】
Java后端学习路线笔记汇总表[黑马程序员] JavaWeb-综合案例(用户信息)-学习笔记01[列表查询] JavaWeb-综合案例(用户信息)-学习笔记02[登录功能] JavaWeb-综合案 ...
Servlet和HTTP请求协议-学习笔记02【Servlet_体系结构与urlpartten配置、HTTP请求协议】
Java后端学习路线笔记汇总表[黑马程序员] Servlet和HTTP请求协议-学习笔记01[Servlet_快速入门-生命周期方法.Servlet_3.0注解配置.IDEA与tomcat相关配置 ...
Bootstrap学习笔记02【全局CSS样式、组件和插件、案例_黑马旅游网_首页】
Java后端学习路线笔记汇总表[黑马程序员] Bootstrap学习笔记01[快速入门.栅格布局][day01] Bootstrap学习笔记02[全局CSS样式.组件和插件.案例_黑马旅游网][d ...
JavaScript学习笔记02【基础——对象（Function、Array、Date、Math）】
w3school 在线教程:https://www.w3school.com.cn JavaScript学习笔记01[基础--简介.基础语法.运算符.特殊语法.流程控制语句][day01] JavaS ...
HTML/CSS学习笔记02【表单标签】
w3cschool菜鸟教程.CHM(腾讯微云):https://share.weiyun.com/c1FaX6ZD HTML/CSS学习笔记01[概念介绍.基本标签.表单标签][day01] HTML ...
JDBC学习笔记02【ResultSet类详解、JDBC登录案例练习、PreparedStatement类详解】
黑马程序员-JDBC文档(腾讯微云)JDBC笔记.pdf:https://share.weiyun.com/Kxy7LmRm JDBC学习笔记01[JDBC快速入门.JDBC各个类详解.JDBC之CR ...
django学习笔记02
原创博客地址:django学习笔记02 第一章:模型层 1.8 查询操作一.创建对象 1 2 3 4 5 >>> from blog.models import Blog > ...
CMake 学习笔记 02 - 更复杂的项目
CMake 学习笔记 02 - 更复杂的项目源代码见 https://github.com/fengyc/cmake-tutorial 源代码目录组织一般的项目,会划分为多个子目录,每个子目录中包 ...
python pandas修改列名,Python_Pandas学习笔记02：DataFrame获取列名和修改列名
Python_Pandas学习笔记02:DataFrame获取列名和修改列名 Python_Pandas学习笔记02:DataFrame获取列名和修改列名一.参考资料 [1].?Pandas获取列名 ...

列表和表格---学习笔记02

第7章列表和表格

列表和表格---学习笔记02相关推荐

最新文章

热门文章

列表和表格---学习笔记02

第7章 列表和表格

列表和表格---学习笔记02相关推荐

最新文章

热门文章

第7章列表和表格