HTML之列表标签

376 阅读3分钟

一、列表元素

1.无序列表 ul、li

无序列表类似班级与同学的关系,给一堆数据添加列表语义,并且这一堆数据中没有先后之分

<ul type="value">
        <li>要展示的数据<li>
</ul>

li其实是英文list item的缩写

list是列表的意思

item是条目的意思

所以结合起来就是列表条目的意思

type:
    disc    默认值 实心圆
    circle  空心圆
    square  实心方块
2.有序列表 ol、li
 给一堆数据添加列表语义,并且这一堆数据中有先后之分(排行榜)
 type:
    1   默认值。数字有序列表。(1234a   按字母顺序排列的有序列表,小写。(ab、c、d)
    A   按字母顺序排列的有序列表,大写。(AB、C、D)
    i   罗马字母,小写。(i, ii, iii, iv)
    I   罗马字母,大写。(I, II, III, IV)
3.定义列表 dl-dd/dt
先通过dt标签定义列表中的所有标题,然后再通过dd标签给每个标题加以描述信息
<dl>
  <dt></dt>
  <dd></dd>
  <dt></dt>
  <dd></dd>
</dl>

dt: definition title, 标题

dd: definition description, 描述

二、表格标签

    一对table标签就是一个表格
    一对tr标签就是表格中的一行
    一对td标签就是一行中的一个单元格
<table>
        <tr>
            <td>需要展示的内容</td>
        </tr>
</table>

【注意】:

  1. 表格标签有一个border边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0,所以看不到边框(属性之间用;隔开)
  2. 表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
  3. 高度和宽度可以给table标签和td标签使用
  4. 表格的宽度和高度:默认是按内容的尺寸来调整的,也可以手动改变table的width、height
  5. 如果给td标签设置widht/height属性, 会修改当前单元格的宽度和高度, 不会影响整个表格的宽度和高度
1.表格内单元格水平、垂直对齐
  • 水平:align table(表格水平对齐方式)、 tr、td(当前单元格内容水平对齐方式)
  • 垂直:valign tr、td(当前单元格内容垂直对齐方式)
2.表格的外边距与内边距
  • cellspacing外边距:单元格和单元格之间的距离 默认情况下2px
  • cellpadding内边距:单元格的边框和文字之间的间隙(调整表格内内容与边距的距离)默认情况为1px
3.细线表格的制作方式
  1. 给table标签设置bgcolor="black",cellspacing = "1px"
  2. 给tr标签设置bgcolor="white" 【注意】:table标签和tr标签以及td标签都支持bgcolor属性
4.单元格合并
  • colspan 水平方向上的单元格合并,合并列
  • rowspan 垂直方向上的单元格合并,合并行
5.form表单

表单元素一定要写在表单中

<form action="提交的服务器接口地址">
        <表单元素>
</form> 
6.基本表单元素
input标签
明文输入框 
	<input type="text" placeholder="请输入用户名">
暗文输入框 
	<input type="password" placeholder="请输入密码">
单选框 
	<input type="radio" name="xx" value="xxx" checked>
    checked  默认选中
    互斥操作:给每一个单选框设置相同name属性还必须设置相同值
多选框 
	<input type="checkbox" name="xxx" value="xxx" checked>
提交按钮 
	<input type="submit">
  作用: 将表单中已经填写好的数据, 提交到远程服务器(action属性:服务器地址)
  【注意】:若想将表单数据提交给后台,元素需要name属性
  单选框的value值,才是我们最终需要的值,并不是单选框显示的值
  
图片按钮 
	<input type="image" src="">
重置按钮 
	<input type="reset" value="xx">  清空表单中已经填写好的数据