一: HTML标签,元素,属性
标签: 组成html网页的最基本的单位
<h1></h1> //h1即为标签
元素: 开始标签到结束标签的所有的代码
<h1>这是一个元素</h1>
属性: 为元素的展示提供更多的信息
<a href="https://www.baidu.com">百度</a> //a标签中的href即为a标签的属性
通俗举例
<汽车标签开始 油耗(属性1)="3.8L/100km" 定位(属性2)="SUV">哈佛H6</汽车标签结束> //标签: 汽车标签 //元素: 所有的代码的展示 //属性: 油耗,定位
二: 列表有几种,怎么定义的
列表分为三种:有序列表,无序列表,自定义列表
实例
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表分类与实例</title> </head> <body> <!--有序列表:--> <ol> <li>***中心</li> <li>新闻资讯</li> </ol> <!--无序列表(常用):--> <ul> <li>***中心</li> <li>新闻资讯</li> </ul> <!--自定义列表:--> <dl> <dt>***中心</dt> <dd>手机</dd> <dd>电脑</dd> <dt>新闻资讯</dt> <dd>创业资讯</dd> <dd>热点新闻</dd> </dl> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
三: 列表与表格
可以理解为表格是列表的PRO版本,表格相对于列表的展示效果来的更加的直接,
在我们要展示比较简单的数据的时候的,我们可以使用无线列表来进行展示,而稍微复杂的数据展示的话 可以使用表格来进行 展示
四: 表格实例
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
table{background-color: antiquewhite;text-align: center}
table thead{font-size: 30px;color: red}
</style>
</head>
<body>
<table border="1" cellspacing="0" width="400" align="center">
<thead>
<tr>
<th colspan="4">平均分统计表</th>
</tr>
</thead>
<tr>
<th>班级</th>
<th>人数</th>
<th>平均分</th>
<th>总体评价</th>
</tr>
<tr>
<td>一班</td>
<td>49</td>
<td>93</td>
<td rowspan="3">优秀</td>
</tr>
<tr>
<td>二班</td>
<td>51</td>
<td>89</td>
</tr>
<tr>
<td>平均值</td>
<td>50</td>
<td>91</td>
</tr>
<tr>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
四: 表单实例
实例
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>用户注册表</title>
<style>
table{background-color: antiquewhite;text-align: center;width: 450px}
table thead{font-size: 30px;color: red}
table tr{line-height: 30px}
.sub{text-align: right}
</style>
</head>
<body>
<form action="" method="post">
<table align="center">
<thead>
<tr><th colspan="2">用户注册表:</th></tr>
</thead>
<tr>
<td><label for="username">用户名:</label></td>
<td align="left"><input type="text" name="username" id="username" placeholder="请输入用户名"></td>
</tr>
<tr>
<td><label for="pwd">密码:</label></td>
<td align="left"> <input type="password" name="pwd" id="pwd" placeholder="请输入密码"></td>
</tr>
<tr>
<td><label for="email">邮箱:</label></td>
<td align="left"><input type="email" name="email" id="email" placeholder="examle@qq.com"></td>
</tr>
<tr>
<td>性别:</td>
<td align="left">
<input type="radio" name="sex" value="1">男
<input type="radio" name="sex" value="2">女
<input type="radio" name="sex" value="0" checked>保密
</td>
</tr>
<tr>
<td>爱好:</td>
<td align="left">
<input type="checkbox" name="bobby[]" value="跳">跳
<input type="checkbox" name="bobby[]" value="唱">唱
<input type="checkbox" name="bobby[]" value="Rap">Rap
<input type="checkbox" name="bobby[]" value="篮球">篮球
</td>
</tr>
<tr>
<td><label for="address">地址:</label></td>
<td align="left">
<select name="address" id="address">
<option value="0" selected>请选择</option>
<option value="北京">北京</option>
<option value="上海">上海</option>
<option value="广州">广州</option>
<option value="深圳">深圳</option>
</select>
</td>
</tr>
<tr>
<td class="sub" colspan="2">
<input type="submit" value="注册" id="submit">
<input type="reset" value="重置">
</td>
</tr>
</table>
</form>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例