第四章 CSS+HTML 项目实战

        

一、 文档查询

W3CThe World Wide Web Consortium (W3C) develops standards and guidelines to help everyone build a web based on the principles of accessibility, internationalization, privacy and security.https://www.w3.org/

MDN Web DocsThe MDN Web Docs site provides information about Open Web technologies including HTML, CSS, and APIs for both Web sites and progressive web apps.https://developer.mozilla.org/zh-CN/https://developer.mozilla.org/zh-CN/涵义：

        ​

<transform-function> +：一个或者多个，并且多个之间以空格分隔

transform: scale() translate();

<box-shadow> #: 一个或者多个，多个之间以，分隔

box-shadow: 3px 3px red, -1em 0 .4em olive;

二、规范

2.1 代码规范：

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

Aotu.io - 前端代码规范Best Coding Guidelines or Front-End Developer.https://guide.aotu.io/​

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

2.3 组件化开发思路

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

三、 HTML CSS结构补充

3.1 meta 元素

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

---

<meta charset="UTF-8">

告诉浏览器采用什么编程

---

<meta http-equiv="X-UA-Compatible" content="ie=edge">

告知IE浏览器去模仿哪一个浏览器的行为；
IE=edge，告知IE8区使用最高有效模式来模仿；

---

<meta name="robots" content="all">

name属性的值非常多，具体的内容可以查看文档：
标准元数据名称 - HTML（超文本标记语言） | MDN
robots：爬虫、协作搜寻器，或者 “机器人”，对此页面的处理行为，或者说，应当遵守的规则。
author：文档作者的名字。
Copyright：版权声明；
description：一段简短而精确的、对页面内容的描述。
        一些浏览器，比如 Firefox 和 Opera，将其用作书签的默认描述。
keywords：与页面内容相关的关键词，使用逗号分隔。某些搜索引擎会进行收录；

---

移动端窗口适配

有些浏览器会忽视禁止掉缩放，所以要设置最小和最大

    <!--meta:vp-->
    <meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=no, minimum-scale=1.0, maximum-scale=1.0">

3.2 link 元素

<link rel="icon" href="/favicon-48x48.cbbd161b.png">

Favicon是favorites icon的缩写，亦被称为website icon（站点图标）、page icon（页面图标）；
icon图标一般放在根目录

3.3 CSS样式的字符编码

开发中推荐在CSS的开头编写@charset指定编码：

@charset "UTF-8";