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 ,浏览器会自动添加
<table>
<thead><tr><th></th></tr></thead>
<tbody><tr><td></td></tr></tbody>
<tfoot></tfoot>
</table>
表格添加边框 设置宽高 设置边框距离 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>