HTML标签学习(下)
一、 列表标签
1. 无序列表
2.有序列表
3.自定义列表
二、 表格标签
1.表格的基本标签
2.表格的相关属性
3.表格标题和表头单元格标签
4.表格的结构标签(了解)
5.合并单元格
三、 表单标签
1.input系列标签
2.input标签总结
<!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>input系列标签</title>
</head>
<body>
<form>
昵称:<input type="text" placeholder="请输入昵称">
<br><br>
密码:<input type="password" placeholder="请输入密码">
<br><br>
性别:<input type="radio" name="sex"> 男
<input type="radio" name="sex"> 女
<br><br>
爱好:<input type="checkbox">敲代码
<input type="checkbox">熬夜
<input type="checkbox">掉头发
<br><br>
<input type="file" multiple>
<br><br>
<input type="submit">
<input type="reset">
<input type="button" value="普通按钮">
</form>
</body>
</html>
3.button按钮标签
4.select下拉菜单标签
4.textarea文本域标签
5.label标签
四、语义化标签
1.没有语义的布局标签
2.有语义的布局标签
五、字符实体
1.HTML中空格合并现象
2.常见字符实体
综合案例
1.优秀学生信息表格
<!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>优秀学生信息表格案例</title>
</head>
<body>
<table border="1" width="400" height="400">
<caption><h3>优秀学生信息表格案例</h3></caption>
<tr>
<th>年级</th>
<th>姓名</th>
<th>学号</th>
<th>班级</th>
</tr>
<tr>
<td rowspan="2">高三</td>
<td>张三</td>
<td>110</td>
<td>三年二班</td>
</tr>
<tr>
<td>赵四</td>
<td>120</td>
<td>三年三班</td>
</tr>
<tr>
<td>评语</td>
<td colspan="3">你们都很优秀</td>
</tr>
</table>
</body>
</html>
2.会员注册表单
<!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>会员注册表单</title>
</head>
<body>
<h2>青春不常在,抓紧谈恋爱</h2>
<hr>
<form>
<label>昵称:<input type="text" placeholder="请输入昵称"></label>
<br><br>
性别:
<label>
<input type="radio" name="sex">男
</label>
<label>
<input type="radio" name="sex">女
</label>
<br><br>
生日:<input type="date">
<br><br>
城市:<select>
<option selected>重庆</option>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
</select>
<br><br>
婚姻情况:
<label>
<input type="radio" name="marry">未婚
</label>
<label>
<input type="radio" name="marry">已婚
</label>
<label>
<input type="radio" name="marry">保密
</label>
<br><br>
个人介绍:<br>
<textarea cols="30" rows="10"></textarea>
<h3>我承诺</h3>
<ul>
<li>年满18岁,单身</li>
<li>抱着严肃的态度</li>
<li>真诚寻找另一半</li>
</ul>
<label>
<input type="checkbox">我同意所有条款
</label>
<br><br>
<button type="submit">免费注册</button>
<button type="reset">重置</button>
</form>
</body>
</html>
HTML就暂时告一段落了,未来的路还很长
未来可期!!!