1、谈谈你对html标签, 元素与属性的理解, 并举例说明
1.1 HTML是超文本标记语言,我的理解是:超文本是其功能的概括,即该语言不仅表达文本本身的字面意义,还表达了文本的样式、功能等其他属性。标记则是“超文本”功能的实现方式,即通过“标签”和“属性”来区分和设置文本的样式、功能属性。
1.2 正如下图所示:a元素通过“<a></a>”标签的形式进行标记, href属性设置了该链接的目标位置,target属性则设置了该链接打开的方式,文本内容“百度首页”则是外化形式。
2、列表有几种, 如何定义?
目前,HTML中有3种基本的列表形式,分别是:
2.1 无序列表
2.2 有序列表
2..3 定义列表
这三种列表形式,其标签都有若干属性及默认属性值,更改各属性值可以得到更多形式的列表。我们可以理解为这三种列表是默认状态下的三种样式,用于表达了“无序列表”、“有序列表”和“定义列表”这三种列表语义。
3、列表与表格的区别与联系?什么时候用列表,什么时候用表格, 为什么?
列表list与表格table在语义和形式上差别较大,可以粗略的理解成列表是简单的“列举、枚举”,即一条一条的简单展示,而table则是采用“二维表格”的形式展示“数据”的关系,相对更加复杂。
4、编程实现,用列表制作你的工作计划,要求使用三种类型全部实现一次:
实例
<!-- 有序列表:工作计划 --> <h3>工作计划</h3> <ol> <li>07:00【查房交班】</li> <li>08:00【开会】</li> <li>08:30——18:00【手术】</li> <li>18:20——20:00【工作任务1】</li> <li>20:20——22:00【工作任务2】</li> </ol>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!-- 无序列表:工作计划 --> <h3>工作计划</h3> <ul> <li>07:00【查房交班】</li> <li>08:00【开会】</li> <li>08:30——18:00【手术】</li> <li>18:20——20:00【工作任务1】</li> <li>20:20——22:00【工作任务2】</li> </ul>
运行实例 »
点击 "运行实例" 按钮查看在线实例
实例
<!-- 定义列表:工作计划 --> <h3>工作计划</h3> <dl> <dt>上午</dt> <dd>开晨会</dd> <dd>任务二</dd> <dd>任务三</dd> <dt>下午</dt> <dd>开会</dd> <dd>任务二</dd> <dd>任务三</dd> </dl>
运行实例 »
点击 "运行实例" 按钮查看在线实例
(用定义列表做任务计划不符合语义要求,仅尝试使用。)
5、编程实现一张商品清单, 使用表格实现,要求有行与列的合并,用到colspan, rowspan
实例
<table border="1" width="800" cellspacing="0" cellpadding="5"> <caption> <h3>购物车</h3> </caption> <thead> <tr bgcolor="lightblue"> <th>编号</th> <th>分类</th> <th>名称</th> <th>数量</th> <th>单价</th> <th>金额</th> </tr> </thead> <tr> <td>1</td> <td rowspan="2">水果</td> <td>茄</td> <td>1</td> <td>10</td> <td>10</td> </tr> <tr> <td>2</td> <td>苹果</td> <td>2</td> <td>30</td> <td>60</td> </tr> <tr> <td>3</td> <td rowspan="2">电器</td> <td>电脑</td> <td>1</td> <td>10000</td> <td>10000</td> </tr> <tr> <td>4</td> <td>热水壶</td> <td>3</td> <td>100</td> <td>300</td> </tr> <tr> <td colspan="3">总计</td> <td>7</td> <td>-</td> <td>103700</td> </tr> </table>
运行实例 »
点击 "运行实例" 按钮查看在线实例
6、编程实现一张注册表单, 要求使用到课堂上讲到全部控件,并掌握所有属性的使用场景与意义
实例
<!-- 表单------------账号注册 --> <h3>账号注册</h3> <form action="" method="POST"> <!-- input标签 --> <p> <label for="username">账号:</label> <input type="text" name="username" id="username" class="" placeholder="不少于6个字符"> </p> <p> <label for="password">密码:</label> <input type="password" name="password" id="password" class="" placeholder="不少于6个字符,不多余12个字符"> </p> <p> <label for="email">邮箱:</label> <input type="email" name="email" id="email" class="" placeholder="eg@email.com"> </p> <p> <label for="age">年龄:</label> <input type="number" name="age" id="age" class="" placeholder="" min="16" max="80"> </p> <!-- 复选框 --> <p> <label for="">爱好:</label> <input type="checkbox" name="hobby[]" value="game" id="game"><label for="game">玩游戏</label> <input type="checkbox" name="hobby[]" value="program" id="program" checked><label for="program">撸代码</label> <input type="checkbox" name="hobby[]" value="movie" id="movie"><label for="movie">看电影</label> </p> <p> <label for="male">性别:</label> <input type="radio" name="gender" id="male"><label for="male">男</label> <input type="radio" name="gender" id="female"><label for="female">女</label> <input type="radio" name="gender" id="secret" checked><label for="secret">保密</label> </p> <!-- 下拉列表 --> <p> <label for="">课程:</label> <select name="" id=""> <optgroup label="高中"> <option value="请选择">请选择</option> <option value="语文">语文</option> <option value="数学">数学</option> <option value="英语">英语</option> <option value="生物">生物</option> </optgroup> <optgroup label="前端"> <option value="请选择">请选择</option> <option value="html">html</option> <option value="css">css</option> <option value="js">js</option> <option value="其他">其他</option> </optgroup> </select> </p> <!-- 按钮 --> <p> <input type="submit" name="submit" value="提交"> <input type="reset" name="reset" value="重置"> <input type="button" name="reset" value="重置"> <button type="submit">提交</button> </p> </form>
运行实例 »
点击 "运行实例" 按钮查看在线实例
7、写出总结, 对于这些常用标签的应用场景进行分析
这些常用标签的使用,原则上应该按照标签的语义对文本内容进行对应标记。
比如:普通段落,就使用p标签进行标记;标题根据其意义和上下文关系选择对应的h标签标记。
应该尽量按照标签意义进行使用,若无法根据标签语义进行选择时,可以使用无语义标签,通过class、name、id等属性设置进行语义或功能明确。