发表于: 2018-07-24 20:48:59

2 583


今天完成的事情:今天完成了任务十二还有深度思考还有任务总结,然后看了一下任务十三,看了一下js的基本语法.


明天计划的事情:明天写任务十三。


遇到的问题:

底部,用flex的时候定高了,所以并没有垂直居中,然后把高去掉使用align-items: center;解决问题.


收获:

js基础知识.

JavaScript 是属于网络的脚本语言!

JavaScript 被数百万计的网页用来改进设计、验证表单、检测浏览器、创建cookies,以及更多的应用。


JavaScript 能够改变页面中的所有 HTML 元素

JavaScript 能够改变页面中的所有 HTML 属性

JavaScript 能够改变页面中的所有 CSS 样式

JavaScript 能够对页面中的所有事件做出反应




深度思考:

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

1、好的编码规范可以尽可能的减少一个软件的维护成本,并且几乎没有任何一个软件,在其整个生命周期中,均由最初的开发人员来维护;

2、好的编码规范可以改善软件的可读性,可以让开发人员尽快而彻底地理解新的代码;

3、好的编码规范可以最大限度的提高团队开发的合作效率;

4、长期的规范性编码还可以让开发人员养成好的编码习惯,甚至锻炼出更加严谨的思维。

符合web标准,语义化html,结构表现行为分离,兼容性优良。页面性能方面,代码要求简洁明了有序,尽可能的减小服务器负载,保证最快的解析速度。

html规范

1、页面的第一行添加标准模式声明<!DOCTYPE html>

2、代码缩进:tab键设置四个空格(通常在软件右下角设置相应空格大小)

3、html中除了开头的DOC和'UTF-8'或者head里特殊情况可以大写外,其他都为小写,css类都为小写

4、建议为html根元素指定lang属性,从而为文档设置正确的语言lang="zh-CN"

5、不同doctype在不同浏览器下会触发不同的渲染模式< meta http-equiv="X-UA-Compatible" content="IE=Edge">

6、非特殊情况下样式文件必须外链至< head >...< /head>之间;非特殊情况下JavaScript文件必须外链至页面底部

7、尽可能减少div嵌套

8、在页面中尽量避免使用style属性,即style="…";写在相应的样式文件中

9、对于属性的定义,确保全部使用双引号,绝不要使用单引号

10、背景图片请尽可能使用sprite技术,减小http请求

11、给区块代码及重要功能(比如循环)加上注释,方便后台添加功能

12、不要使用@import,与<link>标签相比,@import指令要慢很多,不光增加了额外的请求次数,还会导致不可预料的问题。

CSS规范

排版规范

1、如果是在html中写内联的css,则必须写成单行

2、每一条规则的大括号{前后加空格

3、属性名冒号之前不加空格,冒号之后加空格

4、每一个属性值后必须添加分号,并且分号后加空格

5、多个selector共用一个样式集,则多个selector必须写成多行形式

class命名

1、规则命名中,一律采用小写加中划线的方式,不允许使用大写字母或_

2、命名避免使用中文拼音,应该采用更简明有语义的英文单词进行组合

3、不允许通过1、2、3等序号进行命名;避免class与id重名

4、class用于标识某一个类型的对象,命名必须言简意赅

5、尽可能提高代码模块的复用,样式尽量用组合的方式

6、规则名称中不应该包含颜色(red/blue)、定位(left/right)等与具体显示效果相关的信息。应该用意义命名,而不是样式显示结果命名


2.那种规范才是最好的规范?

减少网站解析时的负担,尽可能的减少一个软件的维护成本


例如css书写顺序;

css样式书写顺序


(1)定位属性:position  display  float  left  top  right  bottom   overflow  clear   z-index

(2)自身属性:width  height  padding  border  margin   background

(3)文字样式:font-family   font-size   font-style   font-weight   font-varient   color   

(4)文本属性:text-align   vertical-align   text-wrap   text-transform   text-indent    text-decoration   letter-spacing    word-spacing    white-space   text-overflow

(5)css3中新增属性:content   box-shadow   border-radius  transform……

按照上述1 2 3 4 5的顺序进行书写。

目的:减少浏览器reflow(回流),提升浏览器渲染dom的性能

原理:浏览器的渲染流程为——

①解析html构建dom树,解析css构建css树:将html解析成树形的数据结构,将css解析成树形的数据结构

②构建render树:DOM树和CSS树合并之后形成的render树。

③布局render树:有了render树,浏览器已经知道那些网页中有哪些节点,各个节点的css定义和以及它们的从属关系,从而计算出每个节点在屏幕中的位置。

④绘制render树:按照计算出来的规则,通过显卡把内容画在屏幕上。

css样式解析到显示至浏览器屏幕上就发生在②③④步骤,可见浏览器并不是一获取到css样式就立马开始解析而是根据css样式的书写顺序将之按照dom树的结构分布render样式,完成第②步,然后开始遍历每个树结点的css样式进行解析,此时的css样式的遍历顺序完全是按照之前的书写顺序。在解析过程中,一旦浏览器发现某个元素的定位变化影响布局,则需要倒回去重新渲染正如按照这样的书写书序:

width: 100px;

height: 100px;

background-color: red ;

position: absolute;


css-12任务总结;

任务完成时间3天,未超出预期。

任务链接:https://wjxhd.github.io/task/html/task12.html

脑图:

收获:学习并熟悉使用sass,对任务12的代码进行重构,对margin、padding,图片、背景图片的定位、大小使用等更加熟悉;

变量($Variable)

变量以$开头,既可以用于选择器(Selector),也可以用于属性(Property)和属性值(Value)。 

当用于属性值时,通常可以直接引用;当用于选择器、属性和某些复杂属性值(e.g. font-size/line-height)时,使用 #{$var} 的形式引用。

<p "margin-top:="" 0px;="" margin-bottom:="" 10px;="" line-height:="" 26px;"="">
<p "margin-top:="" 0px;="" margin-bottom:="" 10px;="" line-height:="" 26px;"=""><p "margin-top:="" 0px;="" margin-bottom:="" 10px;="" line-height:="" 26px;"="">

嵌套(Nesting)

嵌套可以分为选择器嵌套和属性嵌套,使用 & 表示在嵌套中对父元素的引用。

<p "margin-top:="" 0px;="" margin-bottom:="" 10px;="" line-height:="" 26px;"="">

混合(Minxin)

可传递参数,通常与 @include 配合使用,提高代码复用率。

<p "margin-top:="" 0px;="" margin-bottom:="" 10px;="" line-height:="" 26px;"="">

继承(Extend)

当某一类元素拥有大量相同属性时,可以通过继承来简化代码,提高代码复用率。

<p "margin-top:="" 0px;="" margin-bottom:="" 10px;="" line-height:="" 26px;"="">

函数及运算 (Function)

SASS内置了颜色、数字等函数,并支持四则运算及分支、遍历等特性,同时允许自定义函数。





返回列表 返回列表
评论

    分享到