基础常识 (了解)

对元素语义化的理解

就是用正确的元素做正确的事情。虽然理论上所有的html元素都可以通过样式实现相同的事情，但这么做会使事情复杂化，需要使用元素语义化降低复杂度

优点：

提高代码阅读性
减少coder之间沟通成本
能让语音合成工具正确识别网页元素的用途，以便做出正确的反应
有利于SEO

对SEO的理解

SEO就是搜索引擎优化，SEO通过了解搜索引擎的运行规则来调整网站，以提高网站的曝光度以及网站排名

Coogle搜索引擎的工作流程主要分为三个阶段：

抓取：Google 会使用名为“抓取工具”的自动程序搜索网络，查找新网页或更新后的网页。将这些网址存储在一个大型列表中，以便日后查看。我们通过许多不同的方法查找网页，但主要方法是跟踪我们已知的网页中的链接。
编入索引：Google 会访问它通过抓取得知的网页，并会尝试分析每个网页的主题。Google 会分析网页中的内容、图片和视频文件，尝试了解网页的主题。这些信息存储在 Google 索引中，而 Google 索引是一个存储在海量计算机中的巨大数据库。
呈现搜索结果：当用户在 Google 上进行搜索时，Google 会尝试确定最优质的搜索结果。“最佳”结果取决于许多因素，包括用户的位置、语言、设备（桌面设备或手机）以及先前用过的搜索查询。

什么是字符编码

计算机只认识0和1，但我们各个国家的人都需要在计算机上使用各自的文字，为了在计算机上也能存储和处理像文字、符号等等之类的字符，就必须将这些字符转换成二进制。于是就出现了字符编码

字符编码将我们的自然语言编码成二进制给计算机看，然后再把这些二进制解码为自然语言给我们看。

文本属性

.demo{
    font-size: 20px;/*字体大小*/
    font-weight: 700; /*加粗：100-900 每一个数字表示一个重量 normal：等于400 bold：等于700*/
    font-variant: small-caps;/*大写字母*/
    font-style: italic;/*斜体*/
    font-style：italic /*斜体：用字体的斜体,通常会有专门的字体*/
    font-style：oblique /*倾斜：文本倾斜，仅仅是让文字倾斜*/
    font-family: Serif,serif; /*字体名称*/
    line-height: 30px; /*行高*/
    text-decoration: revert; /*删除线*/
    text-indent: 2em; /*首行缩进*/
    text-align: center; /*文字居中*/
}
//缩写
.demo{
    font: italic small-caps 700 30px/30px serif;
}
// font-size、font-family不可以调换顺序，不可以省略
//line-height必须跟在font-size后面
//其余的可以随意调换顺序和省略

web-safe字体

这里提供一个网站来生产对应的字体文件:font.qqe2.com/#

下载一个字体, 默认下载下来的是ttf文件: www.fonts.net.cn/fonts-zh-1.…

@font-face 用于加载一个自定义的字体

// 普通使用
@afont-face {
  font-family:"hyfonto1";
  src:  ur1( ./fonts/AaJianHaoTi-2.ttf);
}
body {
  font-family:"hyfonte1";
}

// 兼容使用
@afont-face {
  font-family:"hyfonto3";
  src: ur1("./fonts2/AaianHaoTi.eot");
  src: ur1("./fonts2/AaJianHaoTi.eot?#iefix") format("embedded-opentype")，
  ur1("./fonts2/AaJianHaoTi.woff") format("woff"，
  ur1("./fonts2/AaJianHaoTi.ttf") format("truetype")，
  urI("./fonts2/AaJianHaoTi.svg#uxfonteditor") format("svg");
}

css Sprit精灵图

CSS Sprite是一种CSS图像合成技术，将各种小图片合并到一张图片上，然后利用CSS的背景定位来显示对应的图片部分

生成精灵图：www.toptal.com/developers/…

获取精灵图位置：www.spritecow.com/

.sprite {
  background: url('imgs/example.png') no-repeat -319px -469px;
  width: 122px; 
  height: 32px; 
}

好处：

减少网页的http请求数量，加快网页响应速度，减轻服务器压力
减小图片总大小
解决了图片命名的困扰，只需要针对一张集合的图片命名

省略号

// 单行显示省略号
.box1{
    white-space: normal; /*文本不换行*/
    overflow: hidden;/*超出隐藏*/
    text-overflow: ellipsis;/*超出显示省略号*/
}

// 多行显示省略号
.box2{
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;/*保留几行（必写）*/
    -webkit-box-orient: vertical;/*box方向（必写）*/
}

cursor光标样式

cursor可以设置鼠标指针（光标）在元素上面时的显示样式

auto：浏览器根据上下文决定指针的显示样式，比如根据文本和非文本切换指针样式
default：由操作系统决定，一般就是一个小箭头
pointer：一只小手，鼠标指针挪动到链接上面默认样式
text：一条竖线，鼠标指针挪动到文本输入框上面默认样式
none：没有任何指针显示在元素上面

CSS选择器

什么是css选择器

按照一定的规则选出符合条件的元素，为之添加CSS样式

开发中用的最多的选择器:

选择器的权重 | !important | 内联样式 |id选择器|类选择器、属性选择器、伪类|元素选择器|通配符| | --- | --- | --- | --- | --- | ---| | 10000 | 1000 | 100 | 10 | 1 | 0|

什么是伪类

伪类是选择器的一种，它用于选择处于特定状态的元素

动态伪类：

a:link{
    color: red; /*a元素未被访问*/
}
a:visited{
    color: #f58739; /*a元素被访问过*/
}
a:hover{
    color: palegreen; /*鼠标放在上面(重要)*/
}
a:active{
    color: royalblue; /*点下去了，但还没有松手*/
}
a:focus{
    color: pink; /*聚焦的时候(点击)*/
}

结构伪类：

nth-child(1) //父元素中的第1个子元素
nth-child(2n) //父元素中的第偶数个子元素
nth-child(2n + 1) //父元素中的第奇数个子元素
nth-child(-n + 2) //代表前2个子元素
nth-last-child(1) //代表倒数第一个子元素
nth-last-child(-n + 2) //代表最后2个子元素
div:first-child //等同于:nth-child(1)
div:last-child //等同于:nth-last-child(1)
div:first-of-type //等同于:nth-of-type(1)
div:last-of-type //等同于:nth-last-of-type(1)
div:only-child //是父元素中唯一的子元素 :only-of-type，是父元素中唯一的这种类型的子元素

常用的伪元素有:

// 为了区分伪元素和伪类，建议伪元素使用2个冒号，比如::first-line
// 伪元素是行内非替换元素，不能直接设置宽高
:first-line、::first-line /*第一行的内容*/
:first-letter、::first-letter /*选中第一个字符*/
:before、::before /*在元素之前插入内容*/
:after、::after /*在元素之后插入内容*/

hTML元素类型

块级元素: 独占父元素的一行,可以设置宽高，高度默认由内容决定

行内级元素 : 多个行内级元素可以在同一行中显示，行内非替换元素不可以设置宽高

行内替换元素 : 和其他行内级元素在同一行中显示，可以设置宽高（例：img、input）

元素隐藏

通过display属性，能修改元素的显示类型

block：让元素显示为块级元素

inline：让元素显示为行内级元素

inline-block：让元素同时具备行内级、块级元素的特征

none：隐藏元素，不占据任何空间

通过overflow用于控制内容溢出时的行为

visible：溢出的内容照样可见

hidden：溢出的内容直接裁剪

scroll：溢出的内容被裁剪，可以通过滚动查看，会一直显示滚动条区域

auto：自动根据内容是否溢出来决定是否提供滚动机制

元素隐藏的方法的区别

display:none 元素不显示出来，不占据任何空间

visibility:hidden 会占据元素应该占据的空间

background: rgb(41, 157, 157,0);设置颜色,可以设置透明度, 不影响子元素

opacity：0 设置透明度,设置整个元素的透明度, 会影响所有的子元素

CSS-文本属性