前端项目开发-20_项目实战.pdf

项目实战

王红元coderwhy

目录1代码规范

content

2CSS编写顺序

3组件化开发思想

4meta元素详解

5link网站图标补充

6CSS字符编码

coderwhy代码规范

◼遵守上课的代码规范

◼参考凹凸实验室代码规范：

https://guide.aotu.io/

coderwhyCSS编写顺序

coderwhyCSS编写顺序的思路

◼1.先确定盒子本身是如何布局

*position:absolute

*float:left/right

*display:flex

◼2.盒子的特性和可见性

*display:block/inline-block/inline/none

*visibility/opacity

◼3.盒子模型

*width/height

*box-sizing

*margin/border/padding/content

*box-shadow/text-shadow

◼4.内部的文本文字

*font/text

◼5.background

background-image/size/position/color

◼6.其他

transform/transition/overflow/white-space

coderwhy组件化开发思路

◼事实上目前Vue、React、小程序都采用的是组件化开发思路

coderwhy项目整体思路–各个击破

coderwhymeta元素

◼meta元素用于定义元数据：

在之前讲解head的时候说过，head中用于定义元数据；

比如标题title、样式style、link外部资源等；

meta用于定义那些不能使用其他定元相关（meta-related）元素定义的任何元数据信息；

◼meta元素定义的元数据的类型包括以下几种：

如果设置了charset属性，meta元素是一个字符集声明，告诉文档使用哪种字符编码。

如果设置了http-equiv属性，meta元素则是编译指令。

如果设置了name属性，meta元素提供的是文档级别（document-level）的元数据，应用于整个页面。

◼下面我们介绍一下http-equiv和name的作用。

coderwhymeta元素的http-equiv属性

◼我们会发现，无论是默认创建的html页面还是王者荣耀都有如下代码：

◼它的作用到底是什么呢？网上众说纷纭，我们直接看官方文档的解释：

告知IE浏览器去模仿哪一个浏览器的行为；

IE=edge，告知IE8区使用最高有效模式来模仿；

coderwhymeta元素的name属性

◼name属性的值非常多，具体的内容可以查看文档：

/zh-CN/docs/Web/HTML/Element/meta/name

◼我们介绍几个常用的：

◼robots：爬虫、协作搜寻器，或者“机器人”，对此页面的处理行为，或者说，应当遵守的规则。

◼author：文档作者的名字。

◼Copyright：版权声明；

◼description：一段简短而精确的、对页面内容的描述。

一些浏览器，比如Firefox和Opera，将其用作书签的默认描述。

◼keywords