任务目的

• 了解HTML的定义、概念、发展简史
• 掌握常用HTML标签的含义、用法
• 能够基于设计稿来合理规划HTML文档结构
• 理解语义化，合理地使用HTML标签来构建页面

任务描述：完成一个HTML页面代码编写（不写CSS，不需要关注样式，只关注文档结构），详情看下图（可右键复制图片到本地自行练习）：

任务注意事项

• 只需要完成HTML代码编写，不需要写CSS
• 示例图仅为参考，不需要完全实现一致，其中的图片、文案均可自行设定
• 尽可能多地尝试更多的HTML标签

任务完成及总结：

问题1：标题元素无法正确显示的怪异现象

源码：

 解决：猜想可能是与头部的<h1>起了冲突，但是具体原理是什么也没想明白是为什么，网上也没有找到相关的解释。后来将其修改为<h2>、<h3>即和效果图一样。

问题2：开始卡在了“图片”那块，一直想不到有哪个元素能够实现该效果。如果使用无序列表<ul>和有序列表<ol>，那么不利用css样式就无法消除其默认的属性，真叫人头大。

解决：后来在洗澡的时候突然想到一个自己不经常使用的3d元素（dl、dt、dd），赶紧用最快速度洗完澡，出来一实验，果然，成功了！

小demo的亮点：

大胆使用了HTML5的新标签，代码几乎完全遵循html的语义化规范。能够比较清晰的知道在哪处使用<article>标签,在哪处使用<section>标签。一开始我对这两个标签的应用场景比较懵逼，相信大部分人也是如此，现在我们来看一下它们之间的区别：

<article>标签可以在网页中定义独立的内容，包括文章、博客和用户评论等，<article>标签是可以嵌套使用的，当该标签进行嵌套使用的时候，内部的<article>标签中的内容必须和外部的<artcle>标签中的内容相关。

<section>标签用于对页面中的内容进行分区。一个section元素通常由内容及其标题组成，<section>标签的作用是对页面中的内容进行分块处理，相邻的<section>标签中的内容应该是相关的，而不是像<article>标签中的内容那样是独立的。

区别：<article>标签更加强调独立性、完整性，<section>标签更加强调相关性。

小demo的不足之处：

表单有一些不符合规范的地方，比如不能很好的与后台进行交互，缺乏id、name和value值。

小demo地址：

https://cruxf.github.io/BaiduTask/test1.html

有不足的地方希望大家多多指出！

任务一：零基础HTML编码练习