作业一：
在html中标签是最基本的单位，标签包含两种，一种是具有开始标签和结束标签的双标签类似于<div></div>、<p></p>等，一种是单标签类似于<hr />，<br />，<img>等。
元素是从开始标签到结束标签的所有代码，<p>这是一个段落</p>，则可以解释为这是一个p元素，内容是“这是一个段落”。
属性可以用来装饰html标签，属性总是以名称/值对的形式出现，name="value"
实例
<p class="content" id="content" align="center">这是一个段落</p> <!--这里的class="content"规定p元素的类属性为content，id="content"规定p元素的id属性为content，align="center"对p元素内容进行水平对齐-->
运行实例 »
作业二：
列表包括有序列表<ol><li></li></ol>，无序列表<ul><li></li></ul>，定义列表<dl><dt></dt><dd><dd></dl>
作业三：
表格是一个加强版的列表，列表可以看做是一个单列多行的表格。一般情况下，需要使用单列多行的情况下使用列表，而在多列且每列之间有一定的联系的时候使用表格。
作业四：
实例
<!--有序列表--> <ol> <li>这是有序列表1</li> <li>这是有序列表2</li> <li>这是有序列表3</li> <li>这是有序列表4</li> </ol> <!--无序列表--> <ul> <li>这是无序列表</li> <li>这是无序列表</li> <li>这是无序列表</li> <li>这是无序列表</li> </ul> <!--定义列表--> <dl> <dt>HTML</dt> <dd>html是超文本标记语言</dd> <dt>HTTP<dt> <dd>HTTP是超文本传输协议</dd> </dl>
运行实例 »
作业五：
实例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>购物车表格</title> </head> <body> <table border="1" width="500" cellspacing="0" cellpadding="5"> <caption><h3>购物车<h3></caption> <thead> <tr bgcolor="yellowgreen"> <th>编号</th> <th>名称</th> <th>单价</th> <th>数量</th> <th>金额</th> </tr> </thead> <tbody> <tr> <td>01</td> <td>机油</td> <td>800</td> <td>1</td> <td>800</td> </tr> <tr> <td>02</td> <td>京东摄像头</td> <td>300</td> <td>2</td> <td>600</td> </tr> <tr> <td rowspan="2">03</td> <td>联想本电脑</td> <td>7000</td> <td>1</td> <td>7000</td> </tr> <tr> <td>小米笔记本电脑</td> <td>7000</td> <td>1</td> <td>7000</td> </tr> </tbody> <tfoot> <tr> <td colspan="3" rowspan="">数量总计</td> <td colspan="" rowspan="">5</td> <td colspan="" rowspan="">15400</td> </tr> </tfoot> </table> </body> </html>
运行实例 »
作业六：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <title>这是一个注册表单</title> </head> <body> <h3>用户注册</h3> <form action="reg.php" method="post"> <p> <label>账号： <input type="text" id="username" name="username" placeholder="不能超过8个字符" /> </label> </p> <p> <label>密码： <input type="password" id="password" name="password" placeholder="必须在6到12个字符之间" /> </label> </p> <p> <label for="email">邮箱：</label> <input type="email" name="email" placeholder="example@email.com" /> </p> <p> <label for="age">年龄： <input type="number" id="age" name="age" min="16" max="80" /> </label> </p> <p> <label for="age">课程：</label> <select name="" id=""> <option value="" selected>请选择课程</option> <optgroup label="前端课程"> <option value="">HTML</option> <option value="">CSS</option> <option value="">JavaScript</option> </optgroup> <optgroup label="后端课程"> <option value="">PHP</option> <option value="">mysql</option> <option value="">laravel</option> </optgroup> </select> </p> <p> <label for="">爱好：</label> <input type="checkbox" name="hobby[]" value="game" /><label for="game">玩游戏</label> <input type="checkbox" name="hobby[]" value="programme" checked/><label for="programme" >编程</label> <input type="checkbox" name="hobby[]" value="movie" /><label for="movie">看电影</label> </p> <p> <label for="">性别：</label> <input type="radio" id="male" name="gender" value="male"><label for="male">男</label> <input type="radio" id="female" name="gender" value="female"><label for="female">女</label> <input type="radio" id="secrecy" name="gender" value="secrecy" checked><label for="secrecy">保密</label> </p> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> <input type="button" name="button" value="按钮"> <button>注册</button> </p> </form> </body> </html>
运行实例 »
作业七：
学习了html的文档结构，常见的几种标签。有序列表，无序列表，定义列表，表格，表单的使用。
实例
<!DOCTYPE html> <!-- 文档声明，声明这个文档是html文档 --> <html lang="en"> <!-- html是html文档的根标签，所有内容都应该在html标签内，lang是声明语言的，可以改为lang="zh-cn" --> <head> <!-- head头部标签，head标签内的内容除了title以外，其他的都对用户不可见 --> <!-- meta标签可以提供一些不可见的元描述，如关键词，描述等 --> <meta charset="UTF-8" /><!-- 这的charset是用来设置html文档的编码的，如果编码不正确会出现乱码的情况，常见的编码为UTF-8和GBK，大多时候都是使用的UTF-8 --> <title>页面结构</title><!-- title是显示在浏览器标签页中内容，用来提示基本信息的 --> </head> <body> <a href="http://php.cn">php中文网</a> <!-- a标签通常用来给内容添加超链接的，进行页面跳转 --> <p>这是一个段落</p> <!-- p标签是一个段落标签，通常情况下是用来写一个段落的 --> <div>这是一个div容器</div> <!-- div是html中最常用的容器，没有实际意义，但我们通常用它进行网页的布局 --> <img src="https://img.php.cn/upload/course/000/000/015/5d4d0b34c7041685.png" alt="图片" width="100"> <!-- img是图片标签，通常是用来展示图片的 --> </body> </html>
运行实例 »
