非零基础自学前端最后一遍一 HTML+CSS 19 项目实战

阳光穿透心脏的1/2处 2024-03-22 19:35 9阅读 0赞

#### 非零基础自学前端最后一遍 ####

#### 文章目录 ####

*   *   *  非零基础自学前端最后一遍
         *  一 HTML+CSS
         *  19 项目实战
         *   *  19.1 代码规范说明
             *   *  19.1.1 代码规范
             *  19.2 CSS编写顺序整理
             *   *  19.2.1 CSS编写顺序
                 *  19.2.2 CSS编写顺序的思路
             *  19.3 组件化开发思想
             *   *  19.3.1 组件化开发思路
             *  19.4 知识补充
             *   *  19.4.1 项目整体思路-各个击破
                 *  19.4.2 meta元素
                 *  19.4.3 meta元素的http-equiv属性
                 *  19.4.4 meta元素的name属性
                 *  19.4.5 link图标
                 *  19.4.6 CSS样式的字符编码

![在这里插入图片描述][107f9d130f314e9fa23a2b9ff367109c.png_pic_center]

#### 一 HTML+CSS ####

#### 19 项目实战 ####

##### 19.1 代码规范说明 #####

###### 19.1.1 代码规范 ######

*  遵守上课的代码规范
 *  参考凹凸实验室代码规范：
    
    https://guide.aotu.io/

![在这里插入图片描述][4536b5dc32ad44a7b77fe3d1016d6405.png_pic_center]

![在这里插入图片描述][bc61461d981c442f9b98d5acffc22e97.png_pic_center]

##### 19.2 CSS编写顺序整理 #####

###### 19.2.1 CSS编写顺序 ######

![在这里插入图片描述][a0f7ff7262a84509bf615a0702c722de.png_pic_center]

###### 19.2.2 CSS编写顺序的思路 ######

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

##### 19.3 组件化开发思想 #####

###### 19.3.1 组件化开发思路 ######

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

![在这里插入图片描述][695d4f7e6da24cb1aa7b11d5a32f8978.png_pic_center]

##### 19.4 知识补充 #####

###### 19.4.1 项目整体思路-各个击破 ######

![在这里插入图片描述][a34f66fc5b2b4fed9975a27cb71ad9c2.png_pic_center]

###### 19.4.2 meta元素 ######

*  meta元素用于定义元数据：
    
     *  在之前讲解head的时候说过，head中用于定义元数据；
     *  比如标题title、样式style、link外部资源等；
     *  meta用于定义那些不能使用其他定元相关（meta-related）元素定义的任何元数据信息；
 *  meta 元素定义的元数据的类型包括以下几种：
    
     *  如果设置了 charset 属性，meta 元素是一个字符集声明，告诉文档使用哪种字符编码。
     *  如果设置了 http-equiv 属性，meta 元素则是编译指令。
     *  如果设置了 name 属性，meta 元素提供的是文档级别（document-level）的元数据，应用于整个页面。

###### 19.4.3 meta元素的http-equiv属性 ######

*  我们会发现，无论是默认创建的html页面还是王者荣耀都有如下代码：
    
    ![在这里插入图片描述][769187ccd7e544de87d4eb02fda43197.png_pic_center]
 *  它的作用到底是什么呢？网上众说纷纭，我们直接看官方文档的解释：
    
     *  告知IE浏览器去模仿哪一个浏览器的行为；
     *  IE=edge，告知IE8区使用最高有效模式来模仿；
    
    ![在这里插入图片描述][8447fb32072347ec9455a17f8dcc8c84.png_pic_center]

###### 19.4.4 meta元素的name属性 ######

*  name属性的值非常多，具体的内容可以查看文档：
    
     *  https://developer.mozilla.org/zh-CN/docs/Web/HTML/Element/meta/name
        
        ![在这里插入图片描述][91483d136a1048fc877ca0cfdb0c30af.png_pic_center]
 *  我们介绍几个常用的：
    
     *  robots：爬虫、协作搜寻器，或者 “机器人”，对此页面的处理行为，或者说，应当遵守的规则。
     *  author：文档作者的名字。
     *  Copyright：版权声明；
     *  description：一段简短而精确的、对页面内容的描述。
     *  一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。
     *  keywords：与页面内容相关的关键词，使用逗号分隔。某些搜索引擎会进行收录；

###### 19.4.5 link图标 ######

*  Favicon是favorites icon的缩写，亦被称为website icon（站点图标）、page icon（页面图标）；
 *  前面我们已经学习了它的用法：
    
    ![在这里插入图片描述][9a88bbca15d945e78ea57450e1712306.png_pic_center]
 *  事实上它还有很多兼容性的写法：
    
    ![在这里插入图片描述][ae1430c3e5844f33b0aa5de1510a2bb5.png_pic_center]
 *  这里有一个疑惑？ 为什么王者荣耀没有link元素也可以正常显示图标呢？
    
    ![在这里插入图片描述][3d87a02e9ab04849aad790ff9e2958f6.png_pic_center]
 *  下面的link使用方法表示有另一个可替换的网站供选择：
    
    ![在这里插入图片描述][031fb69415d14ca4953b1db5b1bd0396.png_pic_center]

###### 19.4.6 CSS样式的字符编码 ######

*  之前我们有制定过HTML页面的编码，但是并没有制定CSS样式的编码。
    
     *  那么CSS样式的字符编码会按照什么规则来使用呢？
 *  在样式表中有多种方法去声明字符编码，浏览器会按照以下顺序尝试下边的方法（一旦找到就停止并得出结果）：
    
    1.  文件的开头的 Unicode byte-order（字节顺序标记） 字符值。
        
         *  https://en.wikipedia.org/wiki/Byte\_order\_mark
            
            ![在这里插入图片描述][7edbb5fff489411f830c01eb608f8ff8.png_pic_center]
    2.  由Content-Type：HTTP header 中的 charset 属性给出的值或用于提供样式表的协议中的等效值。
    3.  CSS @规则 @charset。
    4.  使用参考文档定义的字符编码： 元素的 charset 属性。
        
         *  该方法在 HTML5 标准中已废除，无法使用。
    5.  假设文档是 UTF-8。
 *  开发中推荐在CSS的开头编写@charset指定编码：
    
    ![在这里插入图片描述][64453ff279f148618205ab1bb4033a30.png_pic_center]

[107f9d130f314e9fa23a2b9ff367109c.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/528d05b9a0084a32b51e501b3b08bc0a.png
[4536b5dc32ad44a7b77fe3d1016d6405.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e229669f869645d9af30e0b4baf16a4f.png
[bc61461d981c442f9b98d5acffc22e97.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8b6fd79a8d974b5c87ec81b02bcf3785.png
[a0f7ff7262a84509bf615a0702c722de.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/cc71ccd27a7a4f21aaf858e1f6dcca3a.png
[695d4f7e6da24cb1aa7b11d5a32f8978.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/9c9641f33c244c60b579d5b5280e19bf.png
[a34f66fc5b2b4fed9975a27cb71ad9c2.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/68659632b35942e392af02356e5b194a.png
[769187ccd7e544de87d4eb02fda43197.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/708b420463f84d04b9ba21c6cc5c1b6c.png
[8447fb32072347ec9455a17f8dcc8c84.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e230c3f2b5324435bc223aaf1f0b739a.png
[91483d136a1048fc877ca0cfdb0c30af.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/7daf4dc9326c4866aa86f7537e882cd7.png
[9a88bbca15d945e78ea57450e1712306.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e47f9b281cb94d67925a9bfa127999ed.png
[ae1430c3e5844f33b0aa5de1510a2bb5.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e35ddef77bd041ad8f879cf064be3aa1.png
[3d87a02e9ab04849aad790ff9e2958f6.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/3b86b32e4b584ffe8694ebe42464a2d7.png
[031fb69415d14ca4953b1db5b1bd0396.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/6bc1be25bf274a7d8675bd9ff6f5b1dd.png
[7edbb5fff489411f830c01eb608f8ff8.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/e9c152d22ca043f0a60fc329c858e77a.png
[64453ff279f148618205ab1bb4033a30.png_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/18/8e73b88ec4ba459b9ea84856effe5655.png