作业1.
HTML文档是由各种html元素组成的。如：head元素，title元素，body元素等。
HTML元素是组成HTML文档最基本的部件，它是用标签来实现的。
HTML的元素属性提供了对HTML元素的描述和控制信息。
代码：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>HTML浅谈</title> </head> <body> <!-- 属性举例：颜色和大小 --> <p style="color: brown;font-size: 20px">HTML学习中</p> <!-- 超链接，且在新窗口打开（target属性） --> <a href="//m.sbmmt.com" target="_blank">PHP中文网是个学习的好地方</a> <!-- 图像 --> <img src="images/wk.jpg" alt="小悟空" width="200px" height="150px"> <img src="https://img.php.cn/upload/course/000/000/015/5d4d0b34c7041685.png" alt="PHP中文网" width="200px" height="150px"> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业2和4
列表有三种，分别是有序列表，无序列表和定义列表。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>列表</title> </head> <body> <!-- 无序列表 <ul><li></li></ul>--> <h2>工作计划</h2> <ul> <li>每天保底搬100块砖</li> <li>每月保底完成30块砖</li> <li>无休息日，因为那样就没收入</li> <li>赚够100万回山里结婚</li> </ul> <!-- 有序列表 自带序号 <ol><li></li></ol>--> <h1>有序购物车</h1> <ol> <li>***，1套，10万</li> <li>住宅，1套，100万</li> <li>办公，1套，200万</li> <li>别墅，1套，500万</li> </ol> <!-- 定义列表 <dl></dl>大框架，下面是 <dt>和<dd>--> <h3>几个牛逼的爸爸</h3> <dl> <dt>淘马家爸爸</dt> <dd>***最恨的***</dd> <dt>京刘家爸爸</dt> <dd>全天下认谁都脸盲的***</dd> <dt>假***停爸爸</dt> <dd>全天下最会吹牛B的***</dd> </dl> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业3和5：
列表就像word里面的标题一样，顺着往下数的标题。
表格是由很多小单元格组成。对于多列且每一列之间有关联的数据适合用表格进行组织。
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></title> </head> <body> <table border="1" cellspacing="0" cellpadding="5"> <caption> <h3>销售产值</h3> </caption> <!-- 表头 --> <thead bgcolor="pink"> <th>员工姓名</th> <th>客户单价</th> <th>本月销量</th> <th>销售总额</th> <th>当月总结</th> </thead> <tr> <td bgcolor="yellow">小王</td> <td>100元</td> <td>10</td> <td>1000元</td> <td rowspan="5">做的贼好</td> </tr> <tr> <td bgcolor="yellow">小李</td> <td>80元</td> <td>20</td> <td>1600元</td> </tr> <tr> <td bgcolor="yellow">小张</td> <td>200</td> <td>10</td> <td>2000元</td> </tr> <tr> <td bgcolor="yellow">小杨</td> <td>500</td> <td>5</td> <td>2500元</td> </tr> <tr> <td colspan="2" align="center">总计</td> <td>45</td> <td>7100元</td> </tr> </table> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
作业6：
注册表单
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>注册表单</title> </head> <body> <h4 align="center">用户注册</h4> <form action="login.php" method="post" align="center"> <p> <label for="username">账户:</label> <input type="text" name="username" id="username" placeholder="不能超过6个字符"> </p> <p> <label for="password">密码:</label> <input type="password" name="password" id="password" placeholder="请输入6-12位密码"> </p> <p> <label for="email">邮箱:</label> <input type="email" name="email" id="email" placeholder="xxxx@xx.com"> </p> <p> <label for="phone">电话:</label> <input type="text" name="phone" id="phone" placeholder="请输入11位的手机号码"> </p> <p> <label for="age">年龄：</label> <input type="number" id="age" name="age" min="16" max="80"> </p> <p> <label for="">车辆:</label> <select name="" id=""> <optgroup label="轿车"> <option value="">奔驰</option> <option value="">宝马</option> <option value="">奥迪</option> </optgroup> <optgroup label="SUV"> <option value="">丰田</option> <option value="">大众</option> <option value="">众泰</option> </optgroup> <optgroup label="跑车"> <option value="">保时捷</option> <option value="">宾利</option> <option value="">法拉利</option> </optgroup> </select> </p> <p> <label for="">拥有车辆种类:</label> <input type="checkbox" name="jiaoche" id="jiaoche" value="jiaoche"><label for="jiaoche">轿车</label> <input type="checkbox" name="suv" id="suv" value="suv"><label for="suv">SUV</label> <input type="checkbox" name="paoche" id="paoche" value="paoche"><label for="paoche">跑车</label> </p> <p> <label for="spouse">配偶:</label> <input type="radio" name="spouse" id="yes" value="yes" checked><label for="yes">有</label> <input type="radio" name="spouse" id="no" value="no"><label for="no">没有</label> <input type="radio" name="spouse" id="secrecy" value="secrecy"><label for="secrecy">保密</label> </p> <p> <input type="submit" value="提交"> <input type="reset" value="重置"> <input type="button" value="按钮"> <!-- 或 --> <button type="submit">确认注册</button> </p> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1. HTML文档是由各种HTML元素组成，一定要记住主要的元素才能够快速写出代码。
2. HTML的元素属性非常重要，它提供了对HTML元素的描述和控制信息。
3. 列表和表格是完全两种不一样的展现形式。
4. Target比较重要，它决定了跳转以后新页面的打开位置，会根据情况对用户形成不同的浏览体验。
5. 图片来源可以在本地文件夹索引，也可以在网上超链接进行连接。
6. 表格要用到的标签：<table>然后<caption>，然后<th>表头<tr>行<tf>单元，<thead>表格页面<tbody>表格主题<tfoot>表格页脚<col>表格的列属性
7. 注册页面的<form>用于为用户输入创建html表单，其中的 <form action=”xxx.php” method=”POST/GET”>中action规定提交表单时向什么地方发送表单数据，method规定发送类型
8. Input的type要根据实际情况选择不同的类型，会展示不同的效果，比如password会自动隐藏密码，仅用*号代替，email类型规定格式必须符合邮箱格式等。
