实例
<!doctype html> <html> <head> <title>0702作业</title> <meta charset="UTF-8"> </head> <body> <!-- 无序列表 --> <ul> <li>PHP程序员从布衣到大牛的必经之路</li> <li>全程直播实战边学边练边辅导</li> <li>线上***（第七期）</li> </ul> <hr> <!-- 表单结构及input常用的type属性 --> <form action="#" method="post"> <p> <label for="username">账号：</label> <input type="text" id="username" name="username" placeholder="请输入账号"> </p> <p> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="请输入密码"> </p> <p> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="请输入邮箱"> </p> <p> <label for="chifan">爱好：</label> <input type="checkbox" id="chifan" name="chifan"> <label for="chifan">吃饭</label> <input type="checkbox" id="shuijiao" name="shuijiao"> <label for="shuijiao">睡觉</label> <input type="checkbox" id="ddd" name="ddd"> <label for="ddd">打豆豆</label> </p> <p> <label for="nan">性别：</label> <input type="radio" id="nan" name="redio"> <label for="nan">男</label> <input type="radio" id="nv" name="redio"> <label for="nv">女</label> <input type="radio" id="bm" name="redio "> <label for="bm">保密</label> </p> <p> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="按钮"> </p> </form> <hr> <!-- 表格的结构及基本属性的使用 --> <table width="400px" border="1px" align="left" cellspacing="0"> <caption>购物车</caption> <thead> <tr bgcolor="pink"> <th>ID</th> <th>名称</th> <th>数量</th> <th>价钱</th> </tr> </thead> <tbody> <tr align="center" > <td width="50px">1</td> <td width="200px">洗发水</td> <td width="50px">2</td> <td rowspan="2">138元</td> </tr> <tr align="center"> <td>2</td> <td>沐浴露</td> <td>1</td> </tr> <tr align="center"> <td>3</td> <td>香皂</td> <td>3</td> <td>15元</td> </tr> <tr align="center"> <td colspan="2">合计：</td> <td>6</td> <td>153元</td> </tr> </tbody> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
针对以上代码知识点做总结：
一、 <!doctype html> 表示对此文档类型的声明
<html>内分为<head>和<body>两大部分：
其中<head>：常放置<title>(标题)、<meta>(字符编码类型)、<link>(css外部链接或标题图片的使用)、<script>(javascript外部链接)、<style>(css内部样式的使用)等等。
而<body>:是网页布局的主体部分，页面中所显示的内容在这里编译。
二、无序列表
ul与li是父子关系组合。
三、表单
form标签内的属性：
action //表示表单要提交的链接。
method //表示表单提交的请求类型 （get与post）。
name //表单的名称。
input标签type的表现形式有：
text //文本框 password //密码框 radio //单选框 (name值需一致) checkbox //多选框
email //邮箱输入框 submit//表单提交按钮 reset //重置按钮 button //纯按钮
input标签内使用placehold属性为输入框内的文字提示。
label中的属性for值与input中ID值一致形成绑定关系。
四、表格：
caption标签是表格的标题，居中于表格头部
th标签是表头部分，具有字体加粗的表现
align可以对文字的位置左中右的定位
bgcolor是对背景增加颜色
cellpadding是调整外边框与文字间的距离
cellspacring 是调整内边框之间的距离
当需要表格设置宽高时在<table>内添加width、height标签。
