第一个任务只需要使用基础的html标签即可完成，难度并不大，但是完成的过程中会发现许多小问题，导致与设计稿并不符合。如：一些缩进需要使用特定标签实现，和不同模块之间的间距可以由标签划分开来。
在学习的过程中，我发现对于html以及html5的常用标签使用的问题不大，但对于一些不太常用的标签，就需要通过查标签手册来深入了解再进行使用。
对于一些我不经常使用的标签，做出笔记如下
一、figure标签
figure标签规定独立的流内容（图像、图表、照片、代码等等）。figure 元素的内容应该与主内容相关，但如果被删除，则不应对文档流产生影响。
"figcaption" 元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。标签定义figure元素的标题（caption）。
在本次作业中主要使用figure元素进行一些缩进处理，如下图：
二、label 标签
lable标签为 input 元素定义标注（标记）。
label 元素不会向用户呈现任何特殊效果。不过，它为鼠标用户改进了可用性。如果您在 label 元素内点击文本，就会触发此控件。就是说，当用户选择该标签时，浏览器就会自动将焦点转到和标签相关的表单控件上。
标签的 for 属性应当与相关元素的 id 属性相同。提示和注释：注释："for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。
请点击文本标记之一，就可以触发相关控件：
例：
<form>
<label for="male">Male</label>
<input type="radio" name="sex" id="male" />
<br />
<label for="female">Female</label>
<input type="radio" name="sex" id="female" />
</form>
结果实现了点击文本触发相应空间的功能
三、input的某些属性
placeholder:规定帮助用户填写输入字段的提示。
size:定义输入字段的宽度。
checked:规定此 input 元素首次加载时应当被选中。
type:button(可点击按钮),checkbox（复选框）,file（输入字段和 "浏览"按钮）,hidden（隐藏的输入字段）,image,password（密码）,radio（单选框）,reset（重置键）,submit（确认键）,text（单行输入文本框）
四、语义化标签
HTML 标签语义化是让大家直观的认识标签(markup)和属性(attribute)的用途和作用，很明显Hx系列看起来很像标题，因为拥有粗体和较大的字号。strong,em用来区别于其他文字，起到了强调的作用。 语义化的网页的好处，最主要的就是对搜索引擎友好，有利于SEO(搜索引擎优化)。有了良好的结构和语义你的网页内容自然容易被搜索引擎抓取，你网站的推广便可以省下不少的功夫。
<article> 标签规定独立的自包含内容。
一篇文章应有其自身的意义，应该有可能独立于站点的其余部分对其进行分发。
<article> 元素的潜在来源：论坛帖子、报纸文章、博客条目、用户评论
<aside>的内容可用作文章的侧栏
