百度前端学院笔记-基础html知识

发表于：March 15, 2016 at 12:19 PM

2016 年春季的百度前端学院正式启动，我也趁此良机把自己的基础部分查漏补缺，同时也会不断的记录自己通过做任务的解决的疑惑和收获，把学到的东西沉淀下来，now let’s start.

先说点题外话吧，因为之前自学了半年，html+css 很熟悉，感觉完成第一阶段的任务还是比较轻松的，但是当我真正去实践的时候，才发现需要了解和掌握的还远远不够。前端在我看来是细节决定成败的，不积跬步无以以致千里，决定从头开始，去和组里的小伙伴一起完成这次的前端学院。也希望自己坚持完成每个任务，去吸收学习好的方法和经验，记录下来。

task_1_1

任务目的和注意事项

这是 IFE 给出的任务目的和注意事项。前两点比较容易理解，就是认识一下 HTML，研读一下给的 MDN 的文档，还有 W3school，就算是入门了。第三个要求应该是为了更熟悉 HTML 的用法，毕竟实践是检验真理的唯一标准。第四个感觉就需要一些经验了，因为之前也写过不少页面，做过小项目，通过合理的分块，再写 css 会舒服很多，HTML 结构也会清爽有序，有一点组件化的思想在里面。第五个是经常说但是没有怎么实践过的一个部分，因为 div+css 的方式非常简单易用，结果当然就是 div 的滥用以及语义化的缺失，通过这次任务又加深了对 HTML 语义化的理解。

收获

认识了更多的标签

header,footer,article,aside,nav,还有之前根本没有注意到的 figure 标签和配合使用的 figcaption 标签，都是语义非常浅显易懂的，极大的增强的 html 的可读性。

补充： 以下两个标签可以用来更好表示语义化的标签。

address 标签定义文档或文章的作者/拥有者的联系信息。 time 标签定义公历的时间（24 小时制）或日期。

这两个标签可以替换我之前所使用的无语义的 span 标签。

<span>文章作者</span>
<span>文章发表时间</span>

只不过主流浏览器都不能支持 time 标签，没有什么特殊的显示效果。

a 标签

之前在用 a 标签的时候，基本只会用到 href 这个属性，但在设计图中我注意到有一个超链接的说明是在浏览器的新窗口中打开，我 review 了很多个代码，发现没有小组实现这个，大概是因为大部分浏览器的默认行为就是在新窗口中打开。但是作为前端经常使用的工具，chrome 的默认行为就是不会在新窗口中打开超链接的，所以我在查阅了 W3school 之后发现了 a 标签的另一个属性，target，其有四个特殊的取值：

_self 默认。在相同的框架中打开被链接文档。 _blank 在新窗口中打开被链接文档。 _parent 在父框架集中打开被链接文档。 _top 在整个窗口中打开被链接文档。

这里我将_blank设置为 target 属性的值，即可实现在新窗口中打开链接。

colspan

这是一个在 table 中会用到的属性，在完成任务的表格时，最后一行的第二个单元格和第三个单元格需要合并，这可犯了难，因为现在很少用到 table 布局，只好求助 W3school，发现了 td 标签的 colspan 属性，规定了单元格可横跨的列数。

<td colspan="2">1000</td>

通过设置 colspan 即可完成单元格合并。

task_1_1_1 的问题到这里就告一段落了，用到的标签很多是 html5 新增的，包括 placeholder 属性，所以对于 IE8 及以下版本的浏览器支持不够好，这也是一个不足之处吧。

task_1_2

任务目的和注意事项

css 这部分比较熟悉了，各种选择器的用法以及选择器的权重，对于一些较为复杂的页面可能还需要用到更为精致 css reset，还有 css 各种属性的应用，因为之前的实践，第二个任务完成的还是比较轻松的。

收获

对于 task_1_2_1,因为使用了很多语义化的标签，所以就减少了很多不必要的类名，进而减少了页面上 class 属性出现的机会，整个 html 结构和 task_1_1_1 基本保持了一致，十分清爽。 在完成这个任务的时候，html 的结构就十分重要了。我在完成一个页面的样式时，习惯的方式是先完成所有 html 内容的编写，合理的 html 结构即使在没有写 css 的时候也是可以很清晰的被阅读，不失为一种向后兼容的方式。 我在最外层包裹了一个大的 div 用来设置最小宽度，从而实现浏览器窗口过小时出现横向滚动条而不会影响其中元素的显示。其中的内容分成了 header，main 和 footer。

补充：对于表格外的阴影来说，可以直接使用 border-style: outset;来实现，不过我觉得 box-shadow 可能更能切合设计稿，各有优劣吧~

表格边框

要实现整个表格的内外边框，不能用常用方法来设置 border，因为在设置内边框的时候，边框会发生叠加的情况，而且默认情况下，td 之间是会存在小的缝隙，对于 1 像素也不能放过的前端来说简直不能忍受。 对于缝隙的问题，我们可以设置 table 的 border-collapse 属性。默认情况下，边框会被分开，设置属性为 collapse 之后边框就会合成单一边框并且忽略之间的空隙。

border-collapse: collapse;

之后按常用的 border 属性设置 table,th,td 边框即可

表单

最初分析设计稿的时候，思维走进了死胡同，以为自己 html 结构有问题，应该像设计稿一样分成左右两部分。后来恍然大悟，只需要将左边的提示信息设置相同的宽度然后设置text-align: right;即可实现左侧信息右对齐而表单元素左对齐。还有一点点小瑕疵的地方就是 radio 和 checkbox 并不是在文字居中显示的。 对于性别选择，从逻辑上应该是单选，这个时候应该设置两个 radio 的 name 属性相同，也是一个小细节吧。同时也要注意表单元素的 value 属性，设置这个可以更好的和后端完成交互。

小结

一开始觉得没什么好写的，结果没想到说着说着就这么多，果然在脑子里想和把这些想法输出出来是完全不同的，但是挺享受这个输出的过程的，写东西也算是自己的一个爱好，虽然现在文笔退化太多了…又想起了当年那个还没有被理工科荼毒的有文艺细胞的自己。 接下来，继续努力。

参考资料

我的 IFE 代码仓库 html5 标签 a 标签的 target 属性 td 标签 CSS border-collapse 属性 CSS 控制 Table 内外边框