发表于: 2017-03-27 22:32:23

1 754


今天完成的事情:(一定要写非常细致的内容,比如说学会了盒子模型,了解了Margin

了解CSS 书写顺序

  1. 位置属性 {position, top, right, z-index, display, float 等}

  2. 大小 {width, height, padding, margin 等}

  3. 文字系列 {font, line-height, letter-spacingcolortext-align 等}

  4. 背景 {backgroundborder 等}

  5. 其他 {animation, transition 等}

了解如何编写编写模块化、可扩展和易维护的代码

如何在自己编写的代码实践优良的代码规范

明天计划的事情:(一定要写非常细致的内容)

继续任务12

遇到的问题:(遇到什么困难,怎么解决的)

什么是HTML语义化?为什么要HTML语义化? 

语义化的含义就是用正确的标签做正确的事情,HTML 语义化就是让页面的内容结构化,便于对浏览器、搜索引擎解析;在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于SEO。使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。你不仅应该知道一个链接应该使用 <a> 标签,表格数据应该使用 <table> 标签,段落使用 <p> 等。

更重要的是,语义化的HTML和HTML 文档中的类名(class names)和IDs(类名和IDs为 CSS 和 JavaScript提供额外的机制)让我们更容易去操作和增强 HTML 元素。


开发过程中应该遵守哪些编码规范和class命名规范?


收获:(通过今天的学习,学到了什么知识)

可维护

作为一个开发者,当项目需要新功能或者修改已有的功能的时候,我不需要担心意外的改变的其他模块的代码。我不需要担心会使原来的代码变的更糟。这意味着, 当CSS代码库的大小增长的时候, 维护这些代码不会有任何困难。

模块化

模块是一个特殊的、独立的单元,可以与其他的模块进行组合,以便形成更加复杂的单元。例如在一个客厅,你可以把电视、沙发和墙分别看成模块,这些组合在一起就是一个可以使用的房间。

如果你带走其中一个单元,其他的任然能够工作的很好,没有电视你也能坐在沙发上,在一个网站上,页眉、页脚、产品列表和文章,这些都可以考虑为一个模块。

可理解性

可理解性描述了通过阅读源代码和相关文档来了解系统功能及其如何运行情况的难易程度。一个可理解性高的软件系统一般应具备以下的特征:模块化(系统各个模块结构良好、功能完整),程序代码清晰编程风格具有一致性(代码风格及设计风格的一致性),完整性(对输人数据进行完整性检查),使用有意义的数据名和函数名等。若使用语义化类名,不论你是在修改 HTML 或者 CSS,你都清楚你将造成的影响。而使用视觉化类名(visual class names)的方式,你不得不在每一个元素上写很多类名,最终你可能只是对这些类名有一个模糊的理解,而不清楚它真正的意图是什么。而且,视觉化类名非常难以维护。如果你使用描述性的,非语义化的类名,那么当你修改其中一个类名的时候,样式的改变会影响每一个使用这个类名的元素。基于你使用 CSS 的经验,你能保证你的修改不会在其他地方产生不可预知的问题吗?语义化的类名是唯一的,所以当你编辑其中一个的时候,你 能 自信地说,你的修改只会影响你想要改变的那个模块,维护起来更简单。

HTML5 的规范在 3.2.5.7 里有说,使用类名属性。

“[…] 更鼓励使用能描述内容本质的类名,而不是那些只是描述其外在表像的值。”

命名规范举例

  • 所有命名一律使用小写
  • 所有的命名一律使用英文,不使用中文或者拼音
  • 用 - 代替 _,文件命名时尽量少用 -
  • 文件命名时尽量不使用缩写,除非是一眼就可以看出来该文件是干什么用
  • 文件命名时,如有该文件的版本号,尽量要跟上,如:jquery-2.1.4.min.js
  • 引用外部文件时,尽量选择压缩版的文件,这样可以加快网页的加载速度

返回列表 返回列表
评论

    分享到