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

第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 表格 
<table border="边框宽度" bordercolor="边框颜色" title="表格的提示信息,当鼠标移到表格上方时,所提示的信息">
属性:
宽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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/253582.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

(下)挖掘传统行业日志大数据的无限价值

&#xfffc;8 月 27 日晚上八点&#xff0c;七牛云高级解决方案架构师程雪松在 IT 大咖说进行了题为《挖掘传统行业日志大数据的无限价值》的直播&#xff0c;对传统行业运维常见困境和统一日志管理的必要性进行了深入解析&#xff0c;并通过 Pandora 的一些真实用户案例和大家…

CMOS图像传感器 —— ISOCELL

最近,外媒曝光了三星最新的CIS传感器路线图,路线图显示,三星在2亿像素之外已经规划2025年推出576MP像素的传感器,也就是5亿7千6百万像素。 若5.76亿像素的传感器推出,意味着手机传感器可媲美中高端单反水平了。三星没有提及这个5.76亿像素的传感器是怎样实现的。因…

LeetCode 153. Find Minimum in Rotated Sorted Array (在旋转有序数组中找到最小值)

Suppose an array sorted in ascending order is rotated at some pivot unknown to you beforehand. (i.e., 0 1 2 4 5 6 7 might become 4 5 6 7 0 1 2). Find the minimum element. You may assume no duplicate exists in the array. 题目标签&#xff1a;Array, Binary Se…

YUV图像

YUV420P&#xff0c;Y&#xff0c;U&#xff0c;V三个分量都是平面格式&#xff0c;分为 I420 和 YV12 。 I420 格式和 YV12 格式的不同处在U平面和V平面的位置不同。在I420格式中&#xff0c;U平面紧跟在Y平面之后&#xff0c;然后才是V平面&#xff08;即&#xff1a;YUV&…

色调映射(Tone Mapping)

一、概述 虽然HDR 图像有较大的动态范围,能更细致地反映真实场景,但他的缺点也很明显。一是同尺寸的数据比低动态范围图像大,需要更大的存储空间与传输带宽。二是难以输出,目前大多数显示器、打印机等图形输出设备的动态范围要比普通的高动态范围图像小得多。。因此,色调映…

实用软件工具

1.突破百度网盘下载速度现在&#xff0c;使用 Aria2下载 Aria2-不限速全平台下载利器但是百度网盘账号会被限速 &#xff0c;冲会员解除正常限制网速2.Safari 预览&#xff0c;将网页转化为自定义尺寸 PDF 3.清除Xcode 缓存 删除模拟器运行缓存&#xff0c;找到Developer->…

[原创]Toolbar setNavigationIcon无效

最近在做一个Toolbar&#xff0c;setNavigationIcon()这个方法一直无效&#xff0c;说什么的都有&#xff0c;什么getSupportActionBar().setNavigationIcon()的&#xff0c;说设置style的&#xff0c;说放到setSupportActionBar()之后的。 其实没有说全&#xff0c;还应该放到…

YUV格式详解

分类&#xff1a; H.264 MPEG TV 2008-05-14 09:24 16181人阅读 评论(21) 收藏 举报 YUV是指亮度参量和色度参量分开表示的像素格式&#xff0c;而这样分开的好处就是不但可以避免相互干扰&#xff0c;还可以降低色度的采样率而不会对图像质量影响太大。YUV是一个比较笼统地说…

KVM安装、镜像创建(一)

环境准备 VMware Workstation Pro启动虚拟化 查看启动的系统是否支持vmx或svm grep -E (vmx|svm) /proc/cpuinfo 备注&#xff1a;操作系统centos 7 KVM安装 1、yum查看kvm安装包 yum list |grep kvm 2、安装 yum install -y qemu-kvm qemu-kvm-tools libvirt3、启动libvirtd s…

Sensor 结构——前照、背照、堆栈

优异的工艺和技术可以使得即便不使用更新结构的CMOS,同样拥有更好的量子效率、固有热噪声、增益、满阱电荷、宽容度、灵敏度等关键型指标。在相同技术和工艺下,底大一级的确压死人(全画幅和aps-c)。人类的进步就是在不断发现问题,解决问题。背照式以及堆栈式CMOS的出现,也…

少犯非智力错误

工作节省时间最重要的方法之一就是少犯非智力错误。 同事反馈说不能预览&#xff0c;排查半天找不到问题&#xff0c;最后发现是IP地址配错了。 现场问题同事搞半天找不出原因&#xff0c;结果一看是网域配错了。 还有些问题开始排查定位不到原因&#xff0c;回头看时才发现端口…

搭建分布式hadoop2.x集群

前期准备&#xff1a; 1.我这里用了三台虚拟机&#xff0c;.默认已经配置好静态IP和IP域名映射&#xff0c;它们相互之间可以ping通 第一台&#xff1a;192.168.174.131 hadoopNumber01.medal.com 第二台&#xff1a;192.168.174.132 hadoopNumber02.meda.com 第三台…

ortp库使用入门

原创作品&#xff0c;允许转载&#xff0c;转载时请务必以超链接形式标明文章 原始出处 、作者信息和本声明。否则将追究法律责任。http://ticktick.blog.51cto.com/823160/345642 我们知道&#xff0c; RTP&#xff08;Real-timeTransportProtocol&#xff09;是用于Internet上…

可测性设计技术

传统的设计过程和测试过程是分开的&#xff0c;而且测试往往只在设计阶段的后期才被考虑。近年来&#xff0c;测试越来越早地被考虑并出现在设计过程中&#xff0c;被称为“可测性设计”。可测性设计的主要思路就是在设计之初就考虑关于测试方面的设计&#xff0c;并在设计阶段…

优酷电视剧爬虫代码实现一:下载解析视频网站页面(3)补充知识点:htmlcleaner使用案例...

htmlcleaner 下载地址&#xff1a;htmlcleaner2_1.jar 源码下载&#xff1a;htmlcleaner2_1-all.zip 写一个测试用的html文件&#xff1a;html-clean-demo.html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional" "http://www.w3.org/TR/xhtml1/D…

小程序开发-利用canvas实现保存二维码海报到本机

场景及需求 在小程序开发过程中&#xff0c;经常需要实现保存某个页面为带小程序码的二维码海报图片到本地&#xff0c;然后用于分享或者发朋友圈等操作。 主要技术点及小程序相关api 技术注意事项 小程序的canvas与H5 canvas使用api大部分一致&#xff0c;但由于小程序中没有D…

Docker系统六:Docker网络管理

Docker网络 I. Docer的通信方式 默认情况下&#xff0c;Docker使用网桥&#xff08;brige&#xff09; NAT的通信模型. Docker启动时会自动创建网桥Docker0&#xff0c;并配置ip 172.17.0.1/16 ifconfig docker0 docker0 Link encap:Ethernet HWaddr 02:42:e0:31:ac:10inet …

pthread_cond_wait

1. 首先pthread_cond_wait 的定义是这样的 The pthread_cond_wait() andpthread_cond_timedwait() functions are used to block on a condition variable. They are called withmutex locked by the calling thread or undefined behaviour will result. These functions ato…

HDU 1525 Euclid's Game

题目大意&#xff1a; 题目给出了两个正数a.b 每次操作&#xff0c;大的数减掉小的数的整数倍。一个数变为0 的时候结束。 谁先先把其中一个数减为0的获胜。问谁可以赢。Stan是先手。 题目思路&#xff1a; 无论a,b的值为多少&#xff0c;局面&#xff1a;[a%b&#xff0c;b] 一…

SRAM BIST技术学习

MBIST 方法是目前大容量存储器测试的主流技术&#xff0c;该技术利用芯片内部专门设计的BIST 电路进行自动化测试&#xff0c;能够对嵌入式存储器这种具有复杂电路结构的嵌入式模块进行全面的测试。MBIST 电路将产生测试向量的电路模块以及检测测试结果的比较模块都置于芯片的内…