利用前面的知识点，完成一个综合案例。我们先来分析一下这个案例。第一个标题是：标题标签，标题中的文字居中，标题下方有两个段落，段落后面有一张图片，居中显示。图片下方分别是有序列表和无序列表，有序列表中添加了链接，无序列表的项目符号为方形，无序列表下方是图文混合格式的自定义列表。我们打开编辑器新建一个case_list.html页面，在页面中使用！使用tab键自动补全基本结构，在正文中使用ctrl+/敲出评论代码，添加评论内容：Thisisthetitleofcase，在评论结束位回车换行。标题使用h1标签，将准备好的文字复制粘贴到标签中，因为标题要水平居中显示，所以需要为h1定义一个属性align，设置其值为center，保存页面。接下来，完成这两段并返回给编辑器。在h1结束标签的外面，换行并添加注释：第一段。在评论下，添加一个p标签，写第一段文字，用同样的方法，再添加一个p标签，写第二段文字，保存。回到浏览器，刷新，两段就完成了。我们还需要为每个段落添加自然的段落缩进。回到编辑器，在每个段落的开头添加四个保存。返回浏览器并刷新。仔细观察后发现，缩进距离并不正好是两个汉字的大小。我们应该做什么？我们必须改变一个空格符号。回到编辑器把四个换成两个，一个代表一个汉字大小的空格，保存页面，回到浏览器，刷新，完美的自然段落就实现了。接下来制作居中图片，回到编辑器，在第二个p标签结束后添加第三个p标签，在p标签内添加img标签，并定义src属性导入图片，由于页面文件和images文件处于同一级别。图片标签的路径可以直接设置为图片的名称。为了让图片在页面水平居中，需要给p标签加上align属性，值为center，保存。返回浏览器刷新图片显示在中央。接下来是标题和带链接的有序列表。回到编辑器，在第三个p标签的末尾，输入新行，添加注释：orderedlist在注释标签的末尾，继续输入新行，添加一个h1标签，并填写标题内容：费曼学习法。h1后回车换行，加入emmet语句：ol>li*4>a[href]中括号定义标签的属性，将光标移动到语句末尾，按tab键，一组有序地写好清单的标签，填写费曼学习法的四个步骤：快速将所学记录在一张纸上，练习教别人，查漏补缺，找不足，优化完善，保存页面.回到浏览器，刷新，实现了带超链接的有序列表效果。接下来是标题和列表符号是小方点的无序列表返回编辑器，在无序列表ol标签的末尾，按回车和换行，添加注释：无序列表。在comment标签结束后的位置，继续回车换行，添加一个h1标签，在h1后填写标题内容：asmallpoem，回车换行，添加emmet语句：ulgreaterthansignli乘以6ul>li*6.将光标移动到语句末尾，按tab键，会写入一组无序列表的标签，然后给ul标签加上type属性，最后填上诗的内容，保存页面。回到浏览器刷新，无序列表也实现了。在最后一部分，让我们对标题和自定义列表进行图形和文本的混合排列。回到编辑器，在ul下面添加注释，自定义列表。再添加一个h1标签，标题内容填写图文混合排版。h1后输入回车换行，加入emmet语句：dl>dt+dd*4将光标移动到语句末尾。按制表键。此时。一个dl四个dd的基本代码结构就完成了。在dt中添加一个img标签，定义src属性，值为我和我的祖国图片的路径，然后在四个dds中分别放上对应的电影名，男主角，导演，类型。保存返回浏览器刷新图文混合列表就做好了由于第二部分布局一致，复制粘贴之前的dl布局格式，更改相应的图片路径和电影名称等，第二部分可以实现图片文字列表混合。文章配套视频链接
