7月2日作业
1. 默写HTML文档的基本结构
第一次默写如下：
实例
<!DOCTYPE html> <html> <head> <meta lang="en"> <title>首页</title> </head> <body> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
发现错误后，进行修正，第二次默写如下：
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>首页</title> </head> <body> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
2. 实例演示无序列表的基本使用
3. 实例演示表格的用法以及行列合并的应用
4. 实例演示表单以及常用控件元素的使用(必须掌握)
实例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>2019年7月2日直播课作业</title> </head> <body> <!--作业1：html框架--> <h2>作业1：html框架</h2> <p>已完成</p> <br> <!--作业2：无序列表实例--> <h2>作业2：无序列表实例</h2> <ul> <li>无序列表内容1</li> <li>无序列表内容2</li> <li>无序列表内容3</li> <li>无序列表内容4</li> <li>无序列表内容5</li> <li>无序列表内容6</li> <li>无序列表内容7</li> </ul> <br> <!--作业3：表格实例--> <h2>作业3：表格实例</h2> <table border="1" cellspacing="0" cellpadding="5" align="center" > <caption>采购单</caption> <tr> <td>序号</td> <td>名称</td> <td>单价</td> <td>数量</td> <td>总价</td> <td>备注</td> </tr> <tr> <td>1</td> <td>CPU</td> <td>1350</td> <td>1</td> <td>1350</td> <td rowspan="5"></td> </tr> <tr> <td>2</td> <td>内存</td> <td>450</td> <td>2</td> <td>900</td> </tr> <tr> <td>3</td> <td>显卡</td> <td>1800</td> <td>1</td> <td>1800</td> </tr> <tr> <td>4</td> <td>硬盘</td> <td>320</td> <td>1</td> <td>320</td> </tr> <tr> <td colspan="3">合计</td> <td>5</td> <td>4370</td> </tr> </table> <br> <!--作业4：表单实例--> <h2>作业4：表单实例</h2> <h3>注册新用户</h3> <p>请按照提示填写一下信息：</p> <form> <p> <!--单行文本--> <label for="username">账户：</label> <input type="text" id="username" name="username" placeholder="不超过12字符" autofocus required> <!--autofocus：自动获取焦点,required 必填项--> <!--for与id必须相同，以便绑定控件--> <!--name为控件实例名称，便于程序控制--> </p> <p> <!--密码框--> <label for="password">密码：</label> <input type="password" id="password" name="password" placeholder="6-18个字符" autofocus required> <!--placeholder：框内默认显示文字--> </p> <p> <!--邮件框--> <label for="email">邮箱：</label> <input type="email" id="email" name="email" placeholder="example@mail.com" autofocus required> <!--required 必填项--> </p> <p> <!--纯数字框--> <label for="age">年龄：</label> <input type="number" id="age" name="age" placeholder="最小12，最大35。" min="12" max="35" autofocus> <!--min、max：限制最小和最大可输入的数字--> </p> <p> <!--日期控件--> <label for="birthday">生日：</label> <input type="date" id="birthday" name="birthday" > </p> <p> <!--下拉列表框控件--> <!-- select: 下拉列表,也叫下拉框,与前面表单控件不一样,它的值都是预置的,不需要用户输出,是枚举类型--> <!-- 与其它input元素不同, 它的name和value属性分别在二个标签中: name在select中, value在option中--> <label for="usertype">用户类型：</label> <select id="usertype" name="usertype" size="1"> <option value="0" selected>请选择</option> <optgroup label="个人用户："> <option value="0">个人用户</option> <option value="1">家庭用户</option> </optgroup> <optgroup label="企业用户："> <option value="2">股份公司</option> <option value="3">独资公司</option> <option value="4">外资企业</option> </optgroup> </select> </p> <p> <!--单选框控件--> <label for="nan">性别：</label> <!-- 点击"性别"标签会自动定位到"男"选项上，所以这里跟“男”的id值一样--> <!-- for应该与id一直，这样就可以实现文字点选，同一个id可以有多个for与之对应。 --> <input type="radio" name="gender" value="nan" id="nan"><label for="nan">男</label> <input type="radio" name="gender" value="nv" id="nv"><label for="nv">女</label> <input type="radio" name="gender" value="baomi" id="baomi"><label for="baomi">保密</label> </p> <p> <!--多选框控件--> <label for="game">爱好：</label> <input type="checkbox" name="aihao" id="game" value="game"><label for="game">游戏</label> <input type="checkbox" name="aihao" id="read" value="read"><label for="read">看书</label> <input type="checkbox" name="aihao" id="movie" value="movie"><label for="movie">电影</label> </p> <p> <!--文本域控件--> <label for="comment">说明：</label><br> <!-- 文本域其实就是一个多行文本框--> <!-- 不要设置value属性, 返回的文本在value属性中--> <textarea name="comment" id="comment" cols="30" rows="10" maxlength="30" placeholder="不超过30个汉字"></textarea> </p> <p> <!--按钮控件--> <!--常用按钮分为2种：提交、重置--> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> <!-- 重置不是清空, 只是恢复表单控件的默认状态或者默认值--> <!-- 重置按钮现在极少用到啦--> <input type="button" name="button" value="普通按钮"> <!-- 普通按钮, 没有具体的功能, 通过JavaScript将它的行为重新定义, 例如Ajax异步提交数据--> <!-- 推荐使用button标签定义按钮--> <!-- 默认也input:submit功能是一样的--> <button>提交1</button> <!-- 等价于--> <button type="submit">提交2</button> <!-- 普通按钮, 点击执行的行为, 由用户自定义--> <button type="button">提交3</button> </p> <!-- 总结： 1、使用input标签的有：单行文本、密码框、数字框、日期控件、单选框、多选框、按钮。通过type属性确定控件类型。 常用属性： type：确定控件类型； name：为控件命名名称。 id：与label标签的 for 属性对应，用于绑定控件； value：多选框、单选、按钮用于存储提交的值，与页面上显示的值对应； placeholder：用于显示提示性文字； autofocus：自动获取焦点； required：必填项； min、max：最小、最大值； 注意：单选、多选的多个选项中，name值必须一致，才能成为一组选项。value值必须不同，才能产生不同的选项。 2、使用select标签的有：下拉框。 常用属性： name：为控件命名名称。 id：与label标签的 for 属性对应，用于绑定控件； value：用于存储提交的值，与页面上显示的值对应； 通过option标签添加选项； 通过optgroup标签对选项进行分组； 3、使用textarea标签的有：文本域（多行文本）。 常用属性： name：为控件命名名称。 id：与label标签的 for 属性对应，用于绑定控件； cols、rows：设置行数和列数； maxlength：设置总字符数； placeholder：用于显示提示性文字； value：用于存储提交的值，但不需要设置，在文本域中填写的内容会自动赋值给value； 4、使用label标签的有：标签控件。 常用属性： for：与其他控件的 id 属性对应，用于绑定控件； 5、使用button标签的有：按钮控件，按钮控件也可以使用input标签产生，通过type属性确定为按钮类型。 常用属性： type：确定是那种按钮类型（提交、重置、普通按钮）； name：为控件命名名称。 使用JS语言来确定按钮行为。 --> </form> </body> </html>
运行实例 »
点击 "运行实例" 按钮查看在线实例
总结：
1、使用input标签的有：单行文本、密码框、数字框、日期控件、单选框、多选框、按钮。通过type属性确定控件类型。
常用属性：
type：确定控件类型；
name：为控件命名名称。
id：与label标签的 for 属性对应，用于绑定控件；
value：多选框、单选、按钮用于存储提交的值，与页面上显示的值对应；
placeholder：用于显示提示性文字；
autofocus：自动获取焦点；
required：必填项；
min、max：最小、最大值；
注意：单选、多选的多个选项中，name值必须一致，才能成为一组选项。value值必须不同，才能产生不同的选项。
2、使用select标签的有：下拉框。
常用属性：
name：为控件命名名称。
id：与label标签的 for 属性对应，用于绑定控件；
value：用于存储提交的值，与页面上显示的值对应；
通过option标签添加选项；
通过optgroup标签对选项进行分组；
3、使用textarea标签的有：文本域（多行文本）。
常用属性：
name：为控件命名名称。
id：与label标签的 for 属性对应，用于绑定控件；
cols、rows：设置行数和列数；
maxlength：设置总字符数；
placeholder：用于显示提示性文字；
value：用于存储提交的值，但不需要设置，在文本域中填写的内容会自动赋值给value；
4、使用label标签的有：标签控件。
常用属性：
for：与其他控件的 id 属性对应，用于绑定控件；
5、使用button标签的有：按钮控件，按钮控件也可以使用input标签产生，通过type属性确定为按钮类型。
常用属性：
type：确定是那种按钮类型（提交、重置、普通按钮）；
name：为控件命名名称。
使用JS语言来确定按钮行为。
