HTML功能元素
一. 无序列表:
无序列表格式:
<ul type="circle">
<li>苹果</li>
<li>香蕉</li>
<li>榴莲</li>
</ul>
无序列表样式:
<ul type="value"></ul>
disc 默认值 实心圆
circle 空心圆
square 实心方块
无序列表应用场景:
(1).新闻列表
(2).商品列表
(3).导航条
二. 有序列表
有序列表格式:
<ol type="1">
<li>螺蛳粉</li>
<li>老友粉</li>
<li>桂林米粉</li>
</ol>
有序列表样式:
<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>钓鱼岛</dt>
<!-- 对列表标题的描述 -->
<dd>钓鱼岛是中国的</dd>
<dt>火山</dt>
<dd>火山爆发是日本的</dd>
</dl>
定义列表的应用场景:
(1).做网站尾部的相关信息
(2).做图文混排
定义列表的注意点:
一个dt可以没有对应的dd,也可以有多个对应的dd, 但是无论有或者没有dd都不推荐使用.推荐使用一个dt对应一个dd.
四. 表格标签
表格标签格式:
<table>
<tr>
<td>姓名</td>
<td>年龄</td>
<td>身高</td>
</tr>
<tr>
<td>张三</td>
<td>19</td>
<td>1.78</td>
</tr>
</table>
表格标签样式:
<table border="1" width="300px" height="400px" align="center" cellsapcing="0" cellpadding="3">
<tr>
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr>
<td>张三</td>
<td>15</td>
<td>男</td>
</tr>
</table>
border:边框属性
width height: 宽高属性
align:水平方向对齐 center水平居中 left水平向左对齐 right水平向右对齐
valign:垂直方向对齐 top向上对齐 mid垂直居中对齐 bottom向下对齐
cellsapcing:外边距 默认外边距为2px
cellpadding:内边距 默认内边距为1px
五.细线表格
细线表格的制作方式:
(1).给table标签设置bgcolor=“black”，cellspacing = “1px”
(2).给tr标签设置bgcolor=“white”
细线表格的样式:
<table bgcolor="black" cellspacing="1px">
<tr bgcolor="white">
<th>姓名</th>
<th>年龄</th>
<th>性别</th>
</tr>
<tr bgcolor="white">
<td>张三</td>
<td>18</td>
<td>男</td>
</tr>
</table>
表格的完整结构:
(1). 表格的标题
(2). 表格的表头信息
(3). 表格的主题信息
(4). 表格的尾体信息
表格的完整结构样式:
<table border="1">
<!-- 标题标签 -->
<caption align="left">个人信息</caption>
<!-- 表头标签 -->
<thead>
<tr>
<th>年龄</th>
<th>姓名</th>
<th>性别</th>
</tr>
</thead>
<!-- 表体标签 tbody -->
<tbody>
<tr>
<td>15</td>
<td>十大</td>
<td>男</td>
</tr>
</tbody>
<!-- 表脚标签 -->
<tfoot>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</tfoot>
</table>
注意点:
如果我们没有编写tbody, 系统会系统给我们添加tbody
单元格合并:
列合并: colspan=’ ’
行合并: rowspan=’ ’
<table border="1" align="center">
<tr>
<!-- 列合并 colsapn='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>
结果:
注意点:
由于把某一个单元格当做了多个单元格来看待, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示.一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并.
六. form表单
表单的格式:
<form action="提交的服务器接口地址">
<表单元素>
</form>
常见的表单元素:
- 明文输入框:
<input type="text" name="accout" value="admin" placeholder="请输入密码">
name:表单提交时，会作为参数的名称，结合输入的值进行匹配，组成 参数名=参数值 (name=value)的结构
placeholder:提示
- 暗文输入框:
<input type="password" name="password" placeholder="请输入密码">
- 单选按钮:
角色:
管理员:<input checked type="radio" name="role" value="admin">
顾客:<input type="radio" name="role" value="customer">
员工:<input type="radio" name="role" value="employee">
注意点:
(1).默认情况下单选框不会互斥, 要想单选框互斥那么必须给每一个单选框标签都设置一个name属性, 然后name属性还必须设置相同的值。
(2).要想让单选框默认选中某一个, 那么可以给input标签添加一个checked属性.
(3).单选框的value值，才是我们最终需要的值，并不是单选框显示的值。
4. 复选框:
爱好:
唱:<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="submit" value="提交">
注意点:
要想把表单中填写好的数据提交到远程服务器, 必须具备两个条件:
(1).需要给form表单添加一个action的属性, 通过这个action属性指定需要提交到的服务器地址
(2).需要给需要提交到服务器的表单元素添加一个name属性
6. 附件上传表单元素:
<input type="file" name="file">
- 普通按钮:
<input type="button" value="我是一个按钮">
作用: 用来配合js做一些动作
8. 图片按钮:
<input type="image" src="">
作用: 用来配合js做一些动作
9. 重置按钮:
<input type="reset" value="重置">
作用: 将用户在表单中所选重置
10. 隐藏域:
<input type="hidden" name="token" value="dadasfewgefghtajhre">
作用: 悄悄地往服务器提交一份数据
11. lable标签:
lable标签作用:使文字和输入框关联 聚焦输入框
lable标签绑定的格式:
(1)将文字利用label标签包裹起来
(2)给输入框添加一个id属性
(3)在label标签中通过for属性和输入框中的id进行绑定即可
lable标签样式:
<label for="one">用户名:</label>
<input id="one" type="text" name="username" value="">
- select标签:
select标签作用:下拉框
select标签格式:
<select name="city" id="">
<optgroup label="一线城市">
<option value="上海">上海</option>
<option value="北京">北京</option>
<option value="杭州" selected>杭州</option>
</optgroup>
</select>
注意点:
(1).下拉列表不能输入内容, 但是可以直接在列表中选择内容
(2).可以通过给option标签添加一个selected属性来指定列表的默认值
(3).可以通过给option标签包裹一层optgroup标签来给下拉列表中的数据分类
13. textarea标签:
作用: 定义一个多行输入框
格式:
<textarea name="" id="" cols="30" rows="10"></textarea>
14.filedset组件:
filedset类似于div+边框
fieldset组件用于在一个web表单中对多个控件和标签进行分组
格式:
<fieldset>
<legend>请登录</legend>
账号: <input type="text">
密码:<input type="password" name="" value="">
<input type="submit" value="提交">
</fieldset>
七. HTML5新增表单元素
1.datalist标签:
作用:
给输入框绑定待选项
如何给输入框绑定待选列表:
(1). list属性设置给input输入框
(2). 给datalist标签设置id属性=list属性值
格式:
<input type="text" name="" value="" list="input_ref">
<datalist id="input_ref">
<option value="">周一</option>
<option value="">周三</option>
<option value="">周六</option>
</datalist>
2.进度条:
<progress value="70" max="100"></progress>
3.滑块:
<input type="range" step="1" max="100" min="0" value="80">
4.邮箱:
<input type="email">
5.电话:
利用正则表达式pattern
<input type="tel" pattern="1[0-9]{10}">
6.域名
<input type="url">
7.时间日期
<input type="datetime-local">
8.日期
<input type="date">
9.数字
<input type="number">
10.颜色
<input type="color">
11.高亮效果
<mark>高亮效果</mark>
12.倾斜
<cite>倾斜效果</cite>
13.删除线
<strike>删除线</strike>
136
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
