1、 html基本结构：
<!--文档类型-->
<!doctype html>
<!--文档根元素-->
<html lang=”en”>
<!--头部-->
<head></head>
<!--身体-->
<body></body>
</html>
2、无序列表可以做导航栏
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>无序列表的基本使用</title>
<style>
ul li{
float:left;
width:100px;
list-style:none;
border:1px solid;
text-align:center;
background:pink;
}
</style>
</head>
<body>
<!--无序列表可以做导航栏-->
<ul>
<li><a href="http://www.baidu.com">百度</a></li>
<li><a href="https://www.youku.com/">优酷</a></li>
<li><a href="http://www.iqiyi.com/">爱奇艺</a></li>
</ul>
</body>运行实例 »
点击 "运行实例" 按钮查看在线实例
3、实例演示表格的用法以及行列合并的应用
实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实例演示表格的用法以及行列合并的应用</title>
<style>
table{
border-collapse:collapse;
}
td{
border:1px solid;
width:100px;
height:30px;
text-align:center;
}
</style>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td colspan="2">6</td>
<td>7</td>
<td rowspan="2">8</td>
<td>9</td>
</tr>
<tr>
<td>10</td>
<td>11</td>
<td>12</td>
<td>13</td>
</tr>
</table>
</body>
</html>运行实例 »
点击 "运行实例" 按钮查看在线实例
4、实例演示表单以及常用控件元素的使用
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>实例演示表单以及常用控件元素的使用</title> </head> <body> <form action="" method="get" name="register"> <p>表单</p> <p> <label for="username">帐号:</label> <input type="text" id="username" name="username" placeholder="请输入账号" autofocus> </p> <p> <label for="password">密码:</label> <input type="password" id="password" name="password" placeholder="请输入密码"> </p> <p> <label for="tel">手机号</label> <input type="text" id="tel" name="tel" placeholder="请输入手机号"> </p> <p> <label for="male">性别</label> <input type="radio" name="gender" value="male" id="male" checked><label for="male">男</label> <input type="radio" name="gender" value="female" id="female"><label for="female">女</label> </p> <p> <label for="programme">爱好</label> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">打游戏</label> <input type="checkbox" name="hobby[]" value="programme" id="programme"><label for="programme">撸代码</label> <input type="checkbox" name="hobby[]" value="programme" id="movies"><label for="movies">看片</label> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例