无序列表
<ul type="disc"></ul>
disc 默认值 实心圆
circle 空心圆
square 实心方块
有序列表
<ol type="A"></ol>
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)
定义列表
<!-- 定义列表 dl dt dd 块级元素-->
<dl>
<!-- 列表标题 -->
<dt>北京</dt>
<!-- 列表标题的描述 -->
<dd>北京是中国的首都</dd>
</dl>
表格
<!-- 对齐 table tr td设置水平对齐 align:left center right-->
<!-- table 标签就是一个表格 -->
<!-- cellspacing 单元格和单元格外边距 2px cellpadding 单元格和文字内边距
表格特有的属性
-->
<!-- 边框合并 cellspacing="0" 利用css 边框合并 border-cllapse:collapse-->
<table border="1" width="300px" height="400px" align="center" cellspacing="0" cellpadding="3">
<!-- 一个tr代表一行 -->
<!-- 一个th代表一个单元格或者一列 ctrl+d-->
<tr>
<!-- th是表头标题标签 默认居中 -->
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<!-- <tr align="center"> -->
<tr>
<!-- valign是垂直对齐 top bottom mid -->
<td valign="top">张三</td>
<td>15</td>
<td>男</td>
</tr>
</table>
细线表格
<table bgcolor="black" cellspacing="1">
<tr bgcolor="white">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr bgcolor="white">
<td>李四</td>
<td>15</td>
<td>男</td>
</tr>
</table>
单元格合并
<table border="1" align="center">
<tr>
<!-- 列合并 colspan='3' 合并三列 -->
<!-- 行合并 rowspan='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>
结果
11 | 14 | 15 | 16 | ||
21 | 22 | 23 | 24 | ||
31 | 33 |
表单元素
<!-- 表单元素 -->
<!-- action提交表单的服务器 -->
<form action="">
<!-- 单选框 单选按钮 复选框 -->
<!-- 明文输入框 value默认值-->
<!-- readonly 只读 disbaled 禁用 -->
账号:<input type="text" readonly name="account" value="admin"><br>
<!-- 暗文输入框 -->
密码:<input type="password" name="pwd" id=""><br>
角色:
<br>
管理员: <input type="radio" name="role" value="admin">
顾客:<input type="radio" name="role" value="customer">
员工:<input type="radio" name="role" value="employee">
<br>
<!-- 复选框 默认选中checked-->
爱好:
唱:<input checked type="checkbox" name="hobbies" value="sing">
跳:<input type="checkbox" name="hobbies" value="dance">
rap:<input type="checkbox" name="hobbies" value="rap">
<input type="file" name="file">
<!-- 普通按钮 配合js做一些动作-->
<input type="button" value="我是一个按钮">
<!-- 图片按钮 -->
<input type="image" src="../../音视频/2.jpg" alt="">
<!-- 隐藏域 如果你希望悄悄地往服务器提交一些数据 -->
<input type="hidden" name="token" value="xfsdsfiggfdasgre">
<!-- 重置按钮 将用户在表单中所选重置 -->
<input type="reset" value="重置">
<br>
<input type="submit" value="提交">
</form>
其它表单元素
<!-- lable作用:使文字和输入框关联 聚焦输入框 -->
<form action="xxx">
<label for="one">用户名:</label>
<input type="text" name="username" id="one">
<br>
<!-- 下拉框 -->
<select name="city">
<optgroup label="一线城市" disabled>
<option value="shnghai">上海</option>
<option value="beij">北京</option>
<!-- selected默认选中 -->
<option value="zhejiang" selected>浙江</option>
</optgroup>
</select>
<br>
<!-- 多行文本框 -->
<textarea name="" id="" cols="30" rows="10"></textarea>
<!-- filedset类似于div加边框 -->
<fieldset>
<legend>请登录</legend>
账号: <input type="text">
<br>
密码: <input type="password">
<input type="submit" value="提交">
</fieldset>
</form>
h5新增表单元素
<!-- datalist给输入框绑定一个待选项
list属性设置给input输入框
给datalist标签设置id属性=list属性值
-->
<form action="xxx">
<input type="text" list="input_ref">
<datalist id="input_ref">
<option>周一</option>
<option>周三</option>
<option>周六</option>
</datalist>
<!-- 进度条 -->
<progress value="70" max="100"></progress>
<!-- 滑块 -->
<input type="range" step="20" max="100" min="0" value="60">
<!-- 邮箱 -->
<input type="email">
<!-- 电话 利用正则表达式 pattern-->
<input type="tel" pattern="1[0-9]{10}">
<!-- 域名 -->
<input type="url">
<!-- 时间日期 -->
<input type="datetime-local">
<!-- 日期 -->
<input type="data">
<!-- 颜色 -->
<input type="color">
<!-- 数字 -->
<input type="number">
<!-- 其它h5新特性 -->
<mark>高亮效果</mark>
<cite>倾斜效果</cite>
<pre>
<code>var a=1;</code>
</pre>
<strike>删除线</strike>
<!-- 提交按钮 -->
<input type="submit" value="提交">
</form>
结果