目录
1.列表标签
无序列表
给数据添加列表语义且没有先后之分的列表
可以通过type来对列表的点的样式进行修改，也可以使用 list-style:none; 来去除列表前的点
<!-- 无序列表 ul 块级元素-->
<ul type="square">
<li>北海</li>
<li>南宁</li>
<li>柳州</li>
</ul>
<!--
<ul type="value"></ul>
disc 默认值 实心圆
circle 空心圆
square 实心方块
<!-- 可以去除列表前的点 --》
<style>
li{
list-style:none;
}
</style>
-->
注意：
1.切记 ul 标签是用来给数据添加列表语义的，不是用来给数据添加小圆点的
2.ul和li一般同时出现，ul和li是一个组合，一般不会单独出现
3.ul和li是一个组合，一般不推荐在ul中嵌套li以外的标签
4.需要丰富列表可以在li标签中进行丰富
无序列表的使用场景：导航栏、新闻列表等
有序列表
给数据添加列表语义且有先后之分的列表
<!-- 有序列表 ol li 块级元素 -->
<ol type="1">
<li>螺狮粉</li>
<li>老友粉</li>
<li>桂林米粉</li>
</ol>
<!--
type的属性值
1 默认值。数字有序列表。（1、2、3、4）
a 按字母顺序排列的有序列表，小写。（a、b、c、d）
A 按字母顺序排列的有序列表，大写。（A、B、C、D）
i 罗马字母，小写。（i, ii, iii, iv）
I 罗马字母，大写。（I, II, III, IV）
-->
大致同无序列表
定义列表
给数据添加列表语义，dt是列表的标题，dd是列表标题的描述信息
<!-- 定义列表 dl dt dd 块级元素-->
<dl>
<!-- 列表标题 -->
<dt>螺狮粉</dt>
<!-- 对列表标题的描述 -->
<dd>好吃的螺狮粉</dd>
<dt>老友粉</dt>
<dd>好吃的老友粉</dd>
</dl>
注意：
1. dl和dt、dd为一个组合一般情况下不会单独出现
2. 因为dl和dt、dd为一个组合，所以dl中推荐只放dt、dd标签，不推荐放其他的标签
3.推荐一个dt对应一个dd，不推荐一个dt对应多个dd
4.需要丰富列表可以在dt和dd标签中进行丰富
2.表格标签
给数据添加语义，适合大量数据时使用以便于清晰展示数据
tr是一行数据 td是一行数据中的一个单元格
除td外，有时也会用到th，th内部的文本通常会呈现为居中的粗体文本，而td元素内的文本通常是左对齐的普通文本。
<table>
<tr>
<th>11</th>
<th>12</th>
<th>13</th
</tr>
<tr>
<td>21</td>
<td>22</td>
<td>23</td>
</tr>
<tr>
<td>31</td>
<td>32</td>
<td>33</td>
</tr>
</table>
<!-- tr是一行数据 td是一行数据中的一个单元格
除td外，有时也会用到th，th内部的文本通常会呈现为居中的粗体文本，
而td元素内的文本通常是左对齐的普通文本。
-->
table表格可以进行水平对齐和垂直对齐，table tr td能设置水平对齐 align:left/center/right，
tr td能设置垂直对齐 valign:top/mid/bottom
cellspacing 单元格和单元格外边距，cellpadding 单元格和文字内边距
边框合并 cellspacing="0"，利用css样式 边框合并，border-collapse:collapse;
<!-- table标签就是一个表格 -->
<!-- cellspacing 单元格和单元格外边距 -->
<!-- cellpadding 单元格和文字内边距
表格而有的属性
-->
<!-- 边框合并 cellspacing="0"
利用css样式 边框合并
border-collapse:collapse;
-->
<table border="10" width="400px" height="400px"
align="center" cellspacing="10" cellpadding="5" class="text">
<!-- 一个tr代表一行 -->
<!-- 一个td代表一个单元格或者一列 -->
<tr>
<!-- th是表头标题标签 默认居中加粗效果 -->
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td align="left">张三</td>
<td align="center">15</td>
<td align="right">男</td>
</tr>
<tr align="center">
<td>李四</td>
<td>18</td>
<td>女</td>
</tr>
<tr>
<td valign="top">王五</td>
<td valign="mid">16</td>
<td valign="bottom">女</td>
</tr>
<tr valign="top">
<td>赵六</td>
<td>20</td>
<td>男</td>
</tr>
</table>
细线表格
设置好table的bgcolor="black" cellspacing="1px"和tr的bgcolor="white"，可以将表格的线变成西线的类型
<table bgcolor="black" cellspacing="1px" align="center">
<tr bgcolor="white">
<td>姓名</td>
<td>性别</td>
<td>年龄</td>
</tr bgcolor="white">
<tr bgcolor="white">
<td>张三</td>
<td>男</td>
<td>15</td>
</tr bgcolor="white">
<tr bgcolor="white">
<td>李四</td>
<td>男</td>
<td>20</td>
</tr bgcolor="white">
</table>
完整的表格结构
完整的表格结构
caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息
<!-- 完整的表格结构
caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息
-->
<table>
<!-- 表格标题标签 默认居中-->
<caption>个人信息</caption>
<!-- 表头标签 每一列的标题-->
<thead>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>性别</td>
</tr>
</thead>
<!-- 标体标签 数据 如果没写tbody 浏览器会自动补全-->
<tbody>
<tr>
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
</tr>
</tbody>
<!-- 表脚标签 -->
<tfoot>
<tr>
<td>李四</td>
<td>20</td>
<td>女</td>
</tr>
</tfoot>
</table>单元格合并
列合并 colspan='3' 合并3列
行合并 rowspan='3' 合并3行
<table border="1" align="center" width="200px" height="200px">
<tr>
<!-- 列合并 colspan='3' 合并3列-->
<!-- 行合并 rowspan='3' 合并3行-->
<td colspan='3'>11</td>
<!-- <td>12</td>
<td>13</td> -->
<td>14</td>
<td>15</td>
<td>16</td>
</tr>
<tr>
<td>21</td>
<td rowspan="2">22</td>
<td>23</td>
<td colspan="3" rowspan="2">24</td>
<!-- <td>25</td>
<td>26</td> -->
</tr>
<tr>
<td>31</td>
<!-- <td>32</td> -->
<td>33</td>
<!-- <td>34</td>
<td>35</td>
<td>36</td> -->
</tr>
</table>
3.表单元素
表单格式
<form action="提交的服务器接口地址">
<表单元素>
</form>常见的表单元素
例如单选框、单选按钮、复选框等
<form action="test.html">
<!-- 单选框 单选按钮 复选框 -->
<!-- 明文输入框 -->
<!-- naem：表单提交时，会作为参数的名称，结合输入的值进行匹配，组成 参数名=参数值的结构
placeholder:提示
readonly disabled
-->
<!-- 明文输入框 -->
账号: <input type="text" name="account" placeholder="请输入账号" readonly><br>
<!-- 暗文输入框 -->
密码: <input type="password" name="pwd" placeholder="请输入密码" disabled><br>
<!-- 单选按钮 默认选中checked-->
角色:
管理员: <input type="radio" name="role" value="admin" checked>
顾客: <input type="radio" name="role" value="vustomer">
员工: <input type="radio" name="role" value="employee"><br>
<!-- 复选框 -->
爱好:
唱: <input type="checkbox" name="hobbies" value="sing">
跳: <input type="checkbox" name="hobbies" value="dance">
rap: <input type="checkbox" name="hobbies" value="rap"><br>
<!-- 附件上传表单元素 -->
<input type="file" name="file"><br>
<!-- 普通按钮 配合JS做一些动作-->
<input type="button" value="我是一个按钮">
<!-- 图片按钮 -->
<input type="image" src="../day01/day03_images/2.jpg" alt="" style="width: 100px; height: 100px;">
<!-- 重置按钮 将用户在表单中所选重置-->
<input type="reset" value="重置">
<!-- 隐藏域 如果你希望悄悄的往服务器提交一些数据 不被用户发现-->
<input type="hidden" name="token" value="123">
<!-- 提交按钮 -->
<input type="submit" value="提交">
<!-- json格式字符串 -->
<!-- {
"username":"admin"
} -->
<!-- 查询字符串 -->
<!-- a=a&b=b&c=c -->
</form>
关于网页的大刷和小刷：
F5小刷 会从浏览器缓存中获取资源
url地址 大刷 会从服务器请求资源
其他表单元素
例如label、下拉框、多行文本框等
<!-- label 作用：使文字和输入框关联 聚焦输入框 -->
<form action="#">
<label for="one">用户名: </label>
<input type="text" name="username" id="one"><br>
<!-- 下拉框 -->
<select name="city">
<optgroup label="广西城市" disabled>
<option value="nanning" selected>南宁</option>
<option value="liuzhou">柳州</option>
<option value="beihai">北海</option>
</optgroup>
</select>
<!-- 多行文本框 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- filedset类似于div加边框 -->
<fieldset>
<legend>请登入</legend>
账号:<input type="text">
密码:<input type="password">
<input type="submit" value="提交">
</fieldset>
</form>
h5新增表单元素
例如进度条、滑块、邮箱、域名、日期、颜色、时间日期、数字等
<!-- datalist 给输入框绑定待选项
list属性设置给input输入框
给idatalist标签设置id属性=list属性值
-->
<form action="#">
<input type="text" list="input_ref">
<datalist id="input_ref">
<option>周一</option>
<option>周三</option>
<option>周六</option>
</datalist><br>
<!-- 进度条 -->
进度条：<progress value="70" max="100"></progress><br>
<!-- 滑块 -->
滑块：<input type="range" step="20" max="100" min="0" value="20"><br>
<!-- 邮箱 -->
邮箱：<input type="email"><br>
<!-- 电话 利用正则表达式 pattern -->
电话：<input type="tel" pattern="1[0-9]{10}"><br>
<!-- 域名 -->
域名：<input type="url"><br>
<!-- 日期 -->
日期：<input type="date"><br>
<!-- 颜色 -->
颜色：<input type="color"><br>
<!-- 时间日期 -->
时间日期：<input type="datetime-local"><br>
<!-- 数字 -->
数字：<input type="number"><br>
<!-- 其他h5新特性 -->
<mark>高亮效果</mark>
<cite>倾斜效果</cite>
<pre>
<code>var a=1;</code>
</pre>
<strike>删除线</strike>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
扫一扫
2278
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
