任务目的：
- 了解HTML的定义、概念、发展简史
- 掌握常用HTML标签的含义、用法
- 能够基于设计稿来合理规划HTML文档结构
- 理解语义化，合理地使用HTML标签来构建页面
任务描述：完成一个HTML页面代码编写（不写CSS，不需要关注样式，只关注文档结构）
注意事项：
- 只需要完成HTML代码编写，不需要写CSS
- 尽可能多地尝试更多的HTML标签
总结：
一、涉及到的HTML标签
1、<header>标签：为文档或节规定页眉，应该被用作介绍性内容或一组导航链接的容器。一个文档可以有多个<header>元素。
2、<nav>标签：定义一组导航链接集合。
3、<main>标签：页面主体内容，该内容在页面中是唯一的，且不包含页面中的重复内容，比如：侧边栏、导航链接、版权信息、网站和搜索框等。
4、<aside>标签：定义一些与周围内容相关的其他内容。
5、<footer>标签：定义页面的脚部，可包含作者信息、版权信息、联系信息、返回页面顶部的链接等。一个页面可有多个<footer>标签。
6、<article>标签：定义一段独立、自成体系的内容，它本身有完整的含义，可以独立于页面其他内容存在。
7、<hgroup>标签：是<h1>-<h6>标签的集合，用来定义多层级标题。
8、<input>标签：定义一个用户可以输入数据的输入区域。
9、<datalist>标签：为<input>元素规定预定义选项列表。<input>元素的list属性必须引用<datalist>元素的id属性。
10、<select>标签：产生下拉列表。<select>标签内部的<option>标签定义列表的可选项。效果等同于<input>和<datalist>，例子见下文。
11、<textarea>标签：多行文本输入框，可由cols和rows属性定义文本框大小。
12、<placeholder>属性：规定用以描述输入字段预期值的提示（样本值或有关格式的简短描述）。该提示会在用户输入值之前显示在输入字段中。
适用于以下输入类型：text、search、url、tel、emai、password。
13、<label>标签：为<input>元素定义标注，改进了表单控件的可用性。当点击到label标签时，会自动聚焦到对应控件上。<label>的for属性与控件的id对应。
二、部分代码示例
1、创建一个有预定义值的下拉列表（2种方式）：
<form> 城市： <input list="cities" name="cities"> <datalist id="cities"> <option value="北京"> <option value="上海"> <option value="广州"> </datalist> </form>
<form> <select> <option value="Beijing" selected=“selected”>北京</option> <option value="Shanghai">上海</option> <option value="Guangzhou">深圳</option> </select> </form>
注意：下拉选择框selected="selected"设置默认选中，复选框checked="checked"设置默认选中。<input type="checkbox" checked="checked">
2、<lable>标签的使用
在使用单选按钮时，若要点击“男”字，也能选中单选框。
方法：使用<lable>标签，把标签中的for属性设置为单选按钮的id属性。另外，对于同一组单选按钮，如男和女，需要设置同样的name属性。
<input type="radio" id="man" name="gender"> <label for="man">男</label> <input type="radio" id="woman" name="gender"> <label for="woman">女</label>
三、HTML元素的语义化
请参见：关于语义化标签的一些思考