博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
跟随我在oracle学习php(3)
阅读量:6271 次
发布时间:2019-06-22

本文共 2186 字,大约阅读时间需要 7 分钟。

这次讲一下html中的列表和比较重要的表格

 

列表分为有序和无序,有序列表与无序列表都是块状元素

 

<ul>(父标签)

定义无序列表。复合标签(由父标签和子标签组成),不单独出现,用<li></li>(子标签)表示每一行

 

 

<ol>

有序列表,子标签同<ul>

 

Exp:

<ul>

<li>这是列表项</li>

</ul>

<ol>

<li>这是有序列表项</li>

</ol>

<ol>样式属性

css语言,可以有两个值

           (样式的名称)  (样式的值)

<ol style="list-style-type:序号的样式的数值">

样式属性级别比<ol>高,可以将其定义为无序

两个属性之间用;和一个空格分开

<ul>type属性

 

disc

默认值。实心圆。

circle

空心圆。

square

实心方块。

 

 

reversed

reversed

规定列表顺序为降序。(9,8,7...)

type

  • 1
  • A
  • a
  • I
  • i

规定在列表中使用的标记类型。

 

通过css能控制列表的3个属性:

List-style-type : 列表项的显示标志

描述

none

无标记。

disc

默认。标记是实心圆。

circle

标记是空心圆。

square

标记是实心方块。

decimal

标记是数字。

decimal-leading-zero

0开头的数字标记。(01, 02, 03, 等。)

lower-roman

小写罗马数字(i, ii, iii, iv, v, 等。)

upper-roman

大写罗马数字(I, II, III, IV, V, 等。)

lower-alpha

小写英文字母The marker is lower-alpha (a, b, c, d, e, 等。)

upper-alpha

大写英文字母The marker is upper-alpha (A, B, C, D, E, 等。)

lower-greek

小写希腊字母(alpha, beta, gamma, 等。)

lower-latin

小写拉丁字母(a, b, c, d, e, 等。)

upper-latin

大写拉丁字母(A, B, C, D, E, 等。)

hebrew

传统的希伯来编号方式

armenian

传统的亚美尼亚编号方式

georgian

传统的乔治亚编号方式(an, ban, gan, 等。)

cjk-ideographic

简单的表意数字

hiragana

标记是:a, i, u, e, o, ka, ki, 等。(日文片假名)

katakana

标记是:A, I, U, E, O, KA, KI, 等。(日文片假名)

hiragana-iroha

标记是:i, ro, ha, ni, ho, he, to, 等。(日文片假名)

katakana-iroha

标记是:I, RO, HA, NI, HO, HE, TO, 等。(日文片假名)

 

List-style-image: 用于替换显示标志的图片.

 

 

exp:

 

表格

 

使用tr来表示“一行”,用th或td表示一个具体的单元格,通常th作为thead的tr当中的子元素,td作为tbody或tfoot的tr当中的子元素。

表格标签名:table tr th(表头,默认居中加粗) td thead tbody caption

 

table属性

border(边框)="粗细" 只是外面加粗

 

table样式属性

Border-collapse: 边框是否融合.

可选值: separate(表格与表格相互独立的边框,默认值)

Collapse,(表格之间的边框共用).

Border-spacing: 边框间距

用法: border-spacing: xpx ypx (给两个像素值,分别代表单元格在x,y轴的距离)

Cellpadding(边距)内容与框的距离

Cellspacing(间距)两个单元格距离

Align (对齐方式)=“center居中”

<center>居中标签</center>

 

 

tr属性

Height

Align-text

 

td属性

Width

Align

Valign垂直对齐方式

 

合并单元格

<td colspa="向右合并几个单元格包括它本身”>

竖向合并单元格

<td rowspan"向下合并几个单元格包括它本身”>

*注意:合并单元格只是将其他的单元格挤原本位置,并没有减少单元格数量,在设置合并时,为“需合并单元格”的左上方第一个单元格设置rowspan或colspan属

性,而其他行或列则直接删除掉多余的td或th元素。

 

 

 

 

Exp:

 

 

第一行表格只有三项,其中“收入” “支出”合并了两个单元格。

 

如有Thead和tbody为table的下一级

<caption><tr>theadtbody同级,为table直接子标签。

 

表格的嵌套规则

  table元素下只能直接包含captiontheadtbodytfootcolcolgroup元素;thead

tbodytfoot下可直接包含trtr下可包含thtd。通常th出现在theadtr标签中。

转载于:https://www.cnblogs.com/RighTgraM/p/10444811.html

你可能感兴趣的文章
深入分析由前序和中序重构二叉树问题
查看>>
leetcode 题解 || Valid Parentheses 问题
查看>>
将图片转成base64字符串并在JSP页面显示的Java代码
查看>>
什么是WeakHashMap--转
查看>>
js 面试题
查看>>
第二十二节,三元运算
查看>>
Yacc 与 Lex 快速入门
查看>>
Unity中HDR外发光的使用
查看>>
Flume负载均衡配置
查看>>
Ajax详解
查看>>
Ubuntu C/C++开发环境的安装和配置
查看>>
百世汇通快递地区选择插件,单独剥离
查看>>
Linux系统调用---同步IO: sync、fsync与fdatasync【转】
查看>>
【MyBatis学习06】输入映射和输出映射
查看>>
[LeetCode] Decode String 解码字符串
查看>>
数字逻辑的一些基本运算和概念
查看>>
ant重新编译打包hadoop-core-1.2.1.jar时遇到的错
查看>>
【★★★★★】提高PHP代码质量的36个技巧
查看>>
3 weekend110的配置hadoop(格式化) + 一些问题解决 + 未免密码配置
查看>>
JavaScript Creating 对象
查看>>