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

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

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

task_1_1

任务目的和注意事项

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

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

收获

认识了更多的标签

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

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

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

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

1
2
<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属性,规定了单元格可横跨的列数。

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

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

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

task_1_2

任务目的和注意事项

  • 了解CSS的定义、概念、发展简史
  • 掌握CSS选择器的含义和用法
  • 实践并掌握CSS的颜色、字体、背景、边框、盒模型、简单布局等样式的定义方式

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之后边框就会合成单一边框并且忽略之间的空隙。

1
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内外边框