前端学习day002：列表，表格，表单

拾歡

已于 2022-07-02 22:03:15 修改

阅读量98

点赞数

文章标签：前端 html

于 2022-06-07 21:28:35 首次发布

本文链接：https://blog.csdn.net/qq_45926448/article/details/125173183

版权

1.列表
无序列表 ul UNorderlist 和li嵌套使用 li代表列表的每一项
   默认每一项前面小黑点无序列表基本形态
   ul中只能嵌套li,li可以嵌套其他标签但不要嵌套div
取消默认装饰：<ul style="list-style-type: none;">
有序列表 or orderlist 默认有序列表每一项前面都有序号
<ol style="list-style-type: none;">
<ol type="A">
自定义列表 dl dt dd dt作为大标题，dd作为大标题的注解
   有注解形式的可用
<dl>
<dt></dt>
<dt></dt>
<dt></dt>
   <dd></dd>//注释
</dl>
列表嵌套：原则任意类型的列表都可以嵌套嵌套的列表一定在li和dd中
p标签不能嵌套块标签

2.表格
嵌套形式标签
一般用于课程表简历发票等具有网格状的外观
一般把表格分为3部分表头表体表尾
表格最外层是以table标签内部使用thead tbody tfoot 作为表的结构
tr th作为行标签 td作为每行的单元格
可以省略thead tbody tfoot ，浏览器会自动添加

表格添加边框设置宽高设置边框距离 align让表格居中 text-align让文本居中
<table border="1" width="600" height="500" cellspacing="0" cellpadding="50" align="center" style="text-align: center;">

表格单元格去边框
<th style="border: 0;">星期一</th>
<th style="border: 0;">星期二</th>

表格单元格合并分为行合并列合并
列合并 colspan
<td colspan="2">123</td>
行合并 rowspan
<td rowspan="2">werewf</td>

3.表单
<form action=""></form>
action 用户提交数据的地址（路径）
<form action="">登录：<input type="text"></form>
type 代表input标签的类型
label标签作为input标签的标注信息
for属性关联label与input 保持for和ID内容一致时，点击label会自动激活对应input标签
<form action=""><label for="accontInput">账号：</label><input type="text" id="accontInput" placeholder="请输入账号名" value="123"></form>
placeholder:预输入内容
value：当前输入框内容
maxlength：最大输入长度
<input type="radio">单选按钮：一般不会单独存在，需要利用name的互斥效果 name的属性值保持一致才能产生互斥效果

例：

<label for="">男</label><input type="radio" name="sex">

<label for="">女</label><input type="radio" name="sex">

<!-- 多选框 -->
    <input type="checkbox">
    <!-- 滑动条 -->
    <input type="range">
    <button type=" button">普通按钮</button>
    <button type="submit">提交按钮</button>
    <!-- submit会默认触发form的action属性 -->
    <button type="reset">重置按钮</button>
    <input type="image" src="">
    <!-- 其他类型 可能会有兼容问题 -->
    <input type="month">
    <input type="color">
    <input type="date">
    <!-- 下拉菜单 -->
    <select name=" " id=" ">
        <optgroup label="水果 ">
            <option value=" ">1223</option>
            <option value=" ">wrdef</option>
            <option value=" ">sdfsad</option>
            <option value=" ">vfgdsf</option>
        </optgroup>
        <optgroup label="水果 ">
            <!-- selected会默认内容 -->
            <option value=" " selected>banana</option>
            <option value=" ">apple</option>
            <option value=" ">ora</option>
            <option value=" ">xzvcxv</option><button type=""></button>
        </optgroup>
    </select>

疑难解决：

1.表格table的border=“1”，如何让表格中的一些单元格的边框消失

取消border=“1”，用选择器将边框设为有像素的实线，然后根据情况用选择器将一些表格的左右上下边框设为0；

 <!-- <table border="1" cellspacing="0" style="height: 80px; width: 770px;" align="center">
                
            <table cellspacing="0" style="height: 480px; width: 800px; " align="center">

<style>
        tr th,
        td {
            border: 1px solid;
            border-bottom: 0;
            border-right: 0;
        }
        
        .mt td {
            border-top: 0ch;
            border-left: 0;
        }
    </style>

2.让文字竖起来排列：

vertical-rl;//从左向右；

从右向左是vertical-lr;

文字间距属性：letter-spacing: 3px;

文字行间距属性：line-height：18px;

<th rowspan="10 "
 style="width: 30px;
 border-top: 0;
writing-mode: 
vertical-rl;//从左向右；从右向左是vertical-rl;
letter-spacing: 3px;">
白联存根 红联客户 蓝联回单
<br>黄联记账
</th>