表单控件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 定义一片表单区域 -->//允许用户输入数据的区域，例如登入页面等和按钮有关
<form action="http://www.baidu.com"//(一般是后台网址) method="get" //get比较明显post和表单元素一块传输>
用户名：<input type="text"//文本 name="username" value="12345" placeholder="请输入用户名" //只读readonly>//行级元素
密码：<input type="password"//密码 name="password" placeholder="请输入密码"//提示性文字 disabled禁用>布尔属性
type = ""text password radio cheacked
<!-- 换行符 -->
<br>
<!-- 单选框 -->//单选
男：<input type="radio" name="gender" value="man" checked//默认已经选择 >
女：<input type="radio" name="gender" value="woman" >
<br>
汉族 <input type="radio" name="minzu"//控件名称 value="han"//控件值 checked>//后台服务器通过控件来识别用户输入内容
藏族 <input type="radio" name="minzu" value="zang">
彝族 <input type="radio" name="minzu" value="yi">
<br>
<!-- 多选框 -->//复选框
唱 <input type="checkbox" name="hobby" value="sing" checked>
跳 <input type="checkbox" name="hobby" value="jump" checked>
rap <input type="checkbox" name="hobby" value="rap">
篮球 <input type="checkbox" name="hobby" value="ball">
<br>
<!-- 下拉菜单 -->//下拉菜单
<select name="city">//控件名称
<option value="cdc">成都</option>控件值
<option value="cqc" selected>重庆</option>
<option value="bjc">北京</option>
<option value="whc">武汉</option>
</select>
<textarea rows="5"行cols=""列></textarea>
<br>
<input type="color" name="color"> /也可以定义颜色/>
<br>
<input type="url" name="" id="">
<input type="search"//搜索框!!!!!! name="" id="">
<input type="range"//拉杆 min="0" max="10" name="num">
<input type="date" name="" id=""日期!!!!!!!>
<br>
<button>登录按钮</button>
</form>
</body>
</html>表格的制作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
table{
border: 1px solid red;
/* 表格专用样式：合并单元格的边框 */
border-collapse: collapse;
width: 500px;
height: 400px;
text-align: center;
margin: 100px auto;
}
th{
border: 1px solid red;
text-align: center;
}
td{
border: 1px solid red;
}
thead tr{
}
tbody tr:nth-child(2n){
background-color: #ccc;
}
</style>
</head>
<body>
<table>//定义表格
<thead>//定义表头
<tr>//行
<th>姓名</th>//标题
<th>年龄</th>
<th>性别</th>
</tr>
</thead>
<tbody>//定义表身
<tr>
<td colspan="3">张三</td>//把列打通
<!-- <td>18</td> -->
<!-- <td>男</td> -->
</tr>
<tr>
<td rowspan="3">李四</td>//把行打通
<td>20</td>
<td>女</td>
</tr>
<tr>
<!-- <td>王五</td> -->
<td>22</td>
<td>女</td>
</tr>
<tr>
<!-- <td>王五</td> -->
<td>22</td>
<td>女</td>
</tr>
</tbody>
<!-- <tfoot>
<td></td>
</tfoot> -->
</table>
<div>
</div>
</body>
</html>字体图标技术，利用font awesome，来进行引入
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
/* div{
font-family: '宋体';
} */
@font-face{
font-family: 'myFont';
src: url(./fonts/徐静蕾字体.ttf),url(./fonts/徐静蕾字体.woff);
}
div{
font-family: 'myFont';
}
</style>
</head>
<body>
<div>这是1个文字</div>
</body>
</html>
656
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
