一、HTML

1、标签

1）普通标签

<h1>一级标题标签</h1>
<h2>一级标题标签</h2>
<h3>一级标题标签</h3>
<h4>一级标题标签</h4>
<h5>一级标题标签</h5>
<h6>一级标题标签</h6>  标题标签不能嵌套标题标签
<p>段落标签，文字会独占一行</p>  p标签不能嵌套p标签
<i>文字会出现斜体效果</i>
<b>文字会出现加粗效果</b>

<a href="超链接地址路径" target="_blank">超链接标签</a>
target="_blank"  表示会在新窗口跳转
超链接不能嵌套超链接

无序列表标签
<ul type="disc">  <li>列表项目</li>
</ul>
type="disc"  表示实心圆
type="circle"  表示空心圆
type="square"  表示方块

有序列表标签
<ol type="1">  <li>列表项目</li>
</ol>
type="1"  表示数字排序
type="a"或"A"  表示字母排序
type="i"或"I"  表示罗马数字排序

不常用标签

<del>给文字增加删除线</del>
<sup>把文字变成上标，适合数学书写</sup>
<u>给文字增加下划线</u>
<center>将文字居中显示</center>

2）单标签

<br>  换行标签
<hr>  水平线标签

<img src="指向图片的路径" alt="图片加载失败时显示此值" title=“鼠标悬停时提示”>  图片标签

3）表格标签

<table border="1px" cellspacing=“0”>  表格标签 <col>  表示表格的第一列<col>  表示表格的第二列<tr align="center">  行标签  align="center"：表示文字居中显示<th></th>  相当于td加粗又居中<td></td>  单元格标签</tr><tr><td></td><td></td></tr>
</table>
border：表示表格边框，值表示边框宽度大小
cellspacing：表示边看间距大小，0就表示没有间距，合并边框
<!--单元格合并，td的属性-->
colspan：横向合并，需要把要多于的单元格删除掉，然后用剩下的单元格使用此属性填充，值为要填充的个数
rowspan：纵向合并，同上在列存在很多的情况下，使用列分组来取代
<colgroup span="要取代的列数"></colgroup><table><thead>表格的页眉</thead><tbody>表格的主体</tbody>  最重要，即使不写，也会浏览器也会修复补上<tfooter>表格的页脚</tfooter>
</table>

4）表单标签

<form action="表单提交地址" method="表单提交方式"><input type="类型" name="元素名称" value="元素的值"  size="表单元素的宽度，一般只适用于text和password"><fieldset>表单字段集</fieldset>相当于一个方框，在字段及集中可以包含文本和其他元素。该元素用于对表单中的元素进行分组并在文档中区别标出文本。fieldset元素可以嵌套，在其内部可以再设置多个fieldset对象。disabled定义空间禁制可用<legend>字段集标题</legend>legend元素可以再fieldset对象绘制的方框内插入一个标题。legend元素必须是fieldset内的第一个元素。<label for="绑定控件id名"></label>label元素用来定义标签，为页面上的其他元素指定提示信息。要将label元素绑定到其他控件上，可以将label元素的for属性设置为与该控件的id属性值相同</form>
type="text"  文本框
type="password"  密码框
type="radio"  单选按钮
type="checkbox"  复选框
type="file"  文件域
type="button"  普通按钮
type="submit"  提交按钮
type="reset"  重置按钮
type="hidden"  隐藏域
type="image"  图片提交按钮
maxlength="最大字符数，一般只适用于text和password"
checked="checked"  默认被选中，一般适用于radio和checkbox

get请求和post请求的区别

get请求通常表示获取数据
post请求退出表示提交数据
get请求发送的数据都写在地址栏上，用户可见
post请求发送的数据用户不可见
get请求不能提交大量数据，但post可以名，因此不要混用

5）容器标签

<div>可以包裹任何内容，也可以容器嵌套包裹</div>
一个通用容器标签，不具备任何特殊功能，仅当作容器来使用。<span>用来包裹一段文本，便于给文本增加样式</span>
一个容器标签，不具备任何特殊功能，仅当作容器来使用。

6）特殊符号

&nbsp;  网页上显示一个空格

7）HTML5新增标签

特点：语义化标签，就是尽量使用有对应的结构的含义的HTML标签

优点：结构更好，更利于搜索引擎的抓取（SEO的优化）和开发人员的维护

更有利于特殊终端的阅读（手机，个人助理等）

尽量使用有结构语义的，少用无语义的，如，

无意义，看不出是什么东西，可是

一看就知道这里面是地址，标签一看就知道这个是强调的内容，区分于不同内容。

<header></header>
header元素表示页面中的一个内容区块或者整个页面的标题<footer></footer>
footer元素表示整个页面或者页面中的一个内容区块的脚注。一般来说，他会包含创作者的姓名、创作日期以及创作者联系信息。<article></article>
article元素表示页面中的一块与上下文不相关的独立内容，譬如博客中的一篇文章或者报纸中的一篇文章。<aside></aside>
aside元素表示article元素内容之外的，与article元素的内容相关的辅助信息<section></section>
section元素表示页面中的一个内容区块，比如章节、页眉、页脚或页面中的其他重要部分。它可以与h1、h2、h3、h4、h5、h6等元素结合起来使用，标示文档结构<nav></nav>
nav元素表示页面中导航链接的部分，导航条<figure><figcaption>figure的标题（只能有一个）</figcaption>
</figure>
figure元素表示一段独立的流内容，一般表示文档主体流内容中的一个独立单元。使用figcaption元素为figure元素添加标题。
figure是一种元素的组合，带有可选标题。用来表示网页上一块独立的内容。
figcaption表示figure的标题。从属于figure，并且figure中只能放置一个figcaption<mark></mark>
mark元素主要用来在视觉上向客户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向向用户高亮显示搜索关键词。

下载图片步骤

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-zDOE0oD2-1580814757274)(C:\Users\小孟快跑\AppData\Roaming\Typora\typora-user-images\1566911777191.png)]

二、CSS

1、CSS选择器

ID选择器：#ID名{ }
类选择器：.class名{ }
标签选择器：标签名{ }
通用选择器：*{ }

属性选择器：

E[att] {sRules}：用于选取带有指定属性的元素
E[att="val"] {sRules}：用于选取带有指定属性和值的元素
E[att~="val" {sRules}：用于选取属性值中包含指定词汇的元素，该值必须是整个单词
E[att|="val"] {sRules}：用于选取带有以指定开头的属性值的元素，该值必须是整个单词
E[att^="val"] {sRules}：匹配属性值以指定开头的每个元素
E[att$="val"] {sRules}：匹配属性值以指定值结尾的每个元素
E[att*="val"] {sRules}：匹配属性值中包含指定值的每个元素

伪类选择器：

结构性伪类选择器：

first-child 与 last-child：单独指第一个子元素和最后一个子元素的样式

nth-child 与 nth-last-child：对指定序号的子元素使用样式

nth-child(odd){}：所有正数下第奇数个子元素

nth-child(even){}：所有正数下第偶数个子元素

nth-last-child(odd){}：所有到数上去第奇数个子元素

nth-last-child(even){}：所有倒数上去第偶数个子元素

nth-of-type 与 nth-last-of-type：使用这两种选择器时，CSS3在计算子元素是第奇数个子元素还是低偶个子元素的时候，就只针对同类型的子元素进行计算了

nth-child(αn+β) 与 nth-last-child(αn+β)：循环使用样式，αn+β形式，

α表示每次循环中共包括几种样式

β表示指定的样式在循环中所处的位置

only-child：只有一个元素的时候使用

目标伪类选择器：

target：突出显示活动的HTML锚

URL带有后面更有锚名称#，指向文档内某个具体的元素。这个被连接的元素就是目标元素（target element）

:target 选择器可用于选取当前活动的目标元素。

使用该选择器来对页面中的某个target元素（该元素的id当做页面中的超链接来使用）
层级选择器：

E > F {sRules}：子元素选择器（Child selectors）只能选择作为某元素子元素的元素，选择匹配的F元素，且匹配的F元素为所匹配的E元素的子元素。

**E + F {sRules}：**相邻兄弟选择器可以选择紧接着在另一元素后的元素，而且他们具有一个相同的父元素，E F量元素具有一个相同的父元素，而且F元素在E元素后面，而且相邻

E ~ F {sRules}：用来指定位于同一父元素之中的某个元素之后的所有其他某个种类的兄弟元素所使用的样式。

选择某元素后面的所有兄弟元素，需要在同一个元素之中，E和F元素是属于同一个父元素之内，并且F元素在E元素之后，娜美E ~ F选择器将选择中所有E元素后面的F元素

浏览器前缀：

-webkit-：所有基于webkit引擎的浏览器（如Chrome、Safari）专属的CSS需添加 -webkit- 前缀
-moz-：所有基于Gecko引擎的浏览器（如Firefox）专属的CSS属性需添加 -moz- 前缀
-ms-：IE浏览器专属的CSS属性需添加 -ms- 前缀
-o-：Oprea浏览器专属的CSS属性需添加 -o- 前缀

2、样式表及优先级

行内样式表 > 内部样式表 ? 外部样式表

？：取决于顺序

3、选择器优先级

行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器

<…style="…"> #box{ } .class{ } div{ } *{ }

1000 100 10 1 0

4、CSS文本属性

颜色：color: red
字体：font-family: 字体类型
行高：line-height: 行高
大小：font-size: 字体大小
加粗：font-weifht: 700
倾斜：font-style: italic
首行缩进：text-indent: 缩进距离
水平对齐：text-align: center
文字修饰：text-decoration: underline

5、图片格式

jpg：采用有损压缩算法，体积较小，不支持透明，不支持动画
gif：支持动画，只有全透明和不透明两种模式，只有256种颜色
png：采用无损压缩算法，体积相对较小，支持背景透明，不支持动画
svg：只用于保存颜色和图形相对简单的图片

都属于压缩格式

6、背景图片

background-image: url( 图片地址 );

background-repeat: no-repeat; 不平铺

background-position: right bottom; 位置在容器的右下

7、元素浮动

float：left/right 左/右浮动

浮动元素在排列时，只参考前一个元素位置即可

右浮动会将代码编写顺序万全弄反

浮动元素不会覆盖文字内容、不会覆盖图片内容、不会覆盖表单元素

8、盒模型

margin：外边距

padding：内边距

overflow：定义溢出元素内容区的内容会如何处理

值	描述
visible	默认值。内容不会被修剪，会呈现在元素框之外。
hidden	内容会被修剪，并且其余内容是不可见的。
scroll	内容会被修剪，但是浏览器会显示滚动条以便查看其余的内容。
auto	如果内容被修剪，则浏览器会显示滚动条以便查看其余的内容。
inherit	规定应该从父元素继承 overflow 属性的值。

9、CSS属性简写

背景

background：背景颜色 url( 背景图片地址 ) no-repeat;

边框

border：边框宽度边框样式边框颜色;

外边距

margin：上右下左

margin：上左右下

margin：上下左右

内边距

padding：上右下左

padding：上左右下

padding：上下左右

颜色

color：red;

color：#ccc;

color：#cccccc;

color：rgb( 184,124,11 );

10、锚点连接

步骤1

给元素定义命名锚记名

<h1 id="命名锚记名"></h1>
例如：
<h1 id="p1"></h1>

步骤2

命名锚记连接

<a href="#命名锚记名"></a>
例如：
<a href="#p1"></a>

11、宽高自适应

宽度自适应

元素宽度设置为100%。（块元素宽度默认为100%）

高度自适应

元素高度自适应窗口高度

html,body{height:100%}

自适应元素高度

父元素：height：value；

需要自适应父元素高度的子元素：height：100%；

height：auto；是指根据块内内容自动调节高度。

兼容写法

min-height：value；

_height：value；

min-height：value；

height：auto!important；

height：value；

12、浏览器兼容

1、图片间隙

问题描述：div中的图片间隙（该bug出现在IE6及更低版本中）在div中插入图片是，图片会将div下方撑大三像素

方法一：将与写在一行上（不一定有效）；

方法二：将转为块状元素，给 img 元素添加：display：block；

2、双倍浮向（双倍边距）

问题描述：当Ie6及更低版本浏览器在在解析浮动元素时，会错误的把浮向边界加倍显示。

方法：给浮动元素添加声明：display：inline；

3、默认高度（IE6）

问题描述：在IE6及以下版本中，部分块元素拥有默认高度（低于18px高度）

方法一：给元素添加声明：font-size：0；

方法二：给元素添加声明：overflow：hidden；

4、表单元素行高不一致（IE，MOZ，C，O，S）

问题描述：表单元素行高对齐方式不一致

方法：给表单元素添加声明：float：left；

5、按钮元素默认大小不一

问题描述：个浏览器中按钮元素大小不一致

方法一：统一大小/（用a标记模拟）

方法二：在input上写按钮的样式，一定要把input的边框去掉

方法三：如果这个按钮是一个图片，直接把图片作为按钮的背景图片即可

6、百分比bug

问题描述：在IE6及以下版本中在解析百分比时，会按四舍五入方式计算从而导致50%加50%大于100%的情况

方法：给右面的浮动元素添加声明：clear:right；

7、鼠标指针bug

问题描述：cursor属性的hand属性值只有IE浏览器识别，其他浏览器不识别该声明，cursor属性的pointer属性值IE6.0以上及其他内核浏览器都能识别该声明

方法：如统一某元素鼠标指针形状为手型，应添加声明：cursor：pointer；

8、透明属性

IE浏览器写法：filter：alpha(opacity=value)；取值范围1-100；

兼容其他浏览器写法：opacity：value；(value的取值范围0-1)

9、过滤器（filter）

1、下划线属性过滤器

当在一个属性前面增加了一个下划线后，由于符合标准的浏览器不能识别带有下划线的属性而忽略了这个声明，但是在IE6及更低版本浏览器中会继续解析这个规则

语法：选择符:{ _属性：属性值; }

2、!important关键字过滤器

它表示所附加的声明具有最高优先级的意思。但由于IE6及更低版本不能识别它，我们可以利用IE6的这个bug作为过滤器来兼容IE6和其他标准浏览器。

语法：选择符{ 属性：属性值!important; }

3、*属性过滤器

当在一个属性前面增加了*后，该属性是你被IE7浏览器失败，其它浏览器混略该属性的作用。

语法：*选择符{ 属性：属性值; }

13、服务端字体和iconfont

1、服务器端字体

概念：就是网页中可以使用安装在服务器端的字体，只要某个字体在服务器端已经安装，网页中就能够正常显示类。

语法：@font-face

说明：

@font-face{font-family:WebFont;src:url("fonts/Fontin_Sans_B_45b.otf") format("opentype");
}
div{font-family:WebFont;
}WebFont是用来声明使用服务器端的字体，是自己取的名字。
format是用来声明字体文件的格式，可以省略文件格式的声明而单独使用src属性值
字体文件的格式有OpenType与TrueType，
前者的属性值为opentype，文件扩展名为.otf
后者的属性值为truetype，文件扩展名为.ttf

2、iconfont

概念：是图标字体，就是用字体文件取代图片文件，来展示图标、特殊字体等元素的方法。几乎所有的网站都有用到。

百度阿里巴巴矢量图标库，选择官方图标库中任意一种
点击图标上的购物车，将选中图标字体的加入到购物车中
点击右上角的购物车按钮，点击下载代码（注意：需要登录）

将下载好的压缩包解压到你需要的地方，文件夹改名iconfont（为了好记）

<link href="iconfont/iconfont.css" rel="stylesheet" type="text/css" />
<!-- link引入图标字体文件 -->
<body><!-- 使用时使用<i>标签，class为iconfont，标签内容为指定的数据 --><ul><li><i class="iconfont">&#xe644</i>列表项目</li><li><i class="iconfont">&#xe645</i>列表项目</li><li><i class="iconfont">&#xe646</i>列表项目</li><li><i class="iconfont">&#xe647</i>列表项目</li></ul>
</body>

14、CSS3新增属性

1、背景属性

background-clip

background-clip:border-box/padding-box/content-box

说明：

在CSS3中，可以使用 background-clip 来修改背景的显示范围

如果将background-clip的属性值设定为border：背景范围包括边框

如果设定为padding，则不包括边框

border-box：背景被裁剪到边框盒

padding-box：背景被裁剪到内边距框

content-box：背景被裁剪到内容框

background-origin

background-origin:border-box/padding-box/content-box

说明：

在绘制背景图像时，默认是从内部的padding区域的左上角开始，但是可以利用background-origin属性来指定绘制时从边框的左上角开始，或者从内容的左上角开始。

background-size

background-size:length/percentage/cover/contain

说明：

在CSS3中，可以使用background-size属性来指定背景图像的大小

length：设置背景图像的高度和宽度，第一个值设置宽度，第二个值设置高度，如果只设置一个值，则第二个值会被设置为auto
percentage：以父元素的百分比来设置背景图像的宽度和高度
cover：把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain：把图像扩展至最大尺寸，以使其宽度和高度万全适应内容区域

在一个元素中添加多张背景图片

语法：

div{background-image:url(img1.png),url(img2.png),url(img2.png);background-repeat:no-repeat,repeat-x,no-repeat;background-position:3% 98%,center,right top;width:300px;
}

说明：

第一个定义的背景图片在最上面，最后定义的在最下面的。使用background-repeat和background-position可以单独指定背景图像中某个文件的平铺方式与放置的位置

2、边框属性

border-raidus

说明：圆角边框

border-raidus：左上角右上角右下角左下角

border-raidus：左上角右下角右上角左下角

border-top-left-raidus：左上角

border-top-right-raidus：右上角

border-bottom-lefft-raidus：左下角

border-bottom-right-raidus：右下角

border-image

border-image:url("url") A B C D/border-image-width border-image-repeat

说明：

让处于随时变化状态的元素的长或宽的边框统一使用一个图像文件来绘制

第一个参数作为边框使用图像的路径，

A B C D表示当浏览器自动把边框所使用到的图像进行分隔时的上边距，右边距，下边距，左边距，四个边距相同时可以缩写成一个，不需要单位。

border-width：表示边框的宽度

border-image-repeat：表示图像边框是否应平铺（repeat）、铺满（round）或者拉伸（stretch）

box-shadow

box-shadow:h-shadow v-shadow blur spread color inset

说明：让盒子在显示时产生阴影效果

h-shadow：必需。水平阴影的位置。允许负值

v-shadow：必需。垂直阴影的位置。允许负值

blur：可选。模糊距离

spread：可选。阴影的尺寸

color：可选。阴影的颜色

inset：可选。将外部阴影改为内部阴影

15、2D效果

1、CSS3过渡 transition

概念：通过CSS3，我们可以在不使用Flash动画或者JavaScript的情况下，当元素从一种样式变换为另一种样式时为元素添加效果

IE10、Firefox、Chrome以及Opera支持transition属性

Safari需要前缀 -webkit-

IE9以及更早的版本，不支持transition属性

Chrome25以及更早的版本，需要前缀-webkit-

属性	描述
transition	简写属性，用于在一个属性中设置四个过渡属性
transition-property	规定应用过渡的CSS属性的名称
transition-duration	定义过渡效果话费的时间。默认是0
transition-timing-function	规定过渡效果的时间曲线。默认是“ease”
transition-delay	规定过渡效果何时开始，默认是0

transition-property:none|all|property;
none：没有属性会获得过渡效果
all：所有属性都将获得过渡效果
property：定义应用过渡效果的CSS属性名称列表，列表以逗号分隔

transition-duration:time;
time：规定完成过渡效果需要花费的时间，以秒或毫秒计。默认值为0

transition-timing-function:linear|ease|ease-in|ease-out|ease-in-out|cubic-bezier(n,n,n,n);
linear：相同的速度，线性，匀速
ease：逐渐慢下来
ease-in：加速
ease-out：减速
ease-in-out：先加速后减速
cubic-bezier(n,n,n,n)：在函数中定义自己的值，可能的值是0至1之间的数值

transition-delay:time;
time：规定在过渡效果开始之前需要等待的时间，以秒或毫秒计算

2、2D变形 transorm

概念：就是变形改变的意思

在CSS3中transform主要包括以下几种：

旋转rotate、扭曲skew、缩放scale、移动translate、矩阵变形matrix

旋转：rotate( )

通过指定的角度参数对原元素指定一个2D rotation（2D旋转），需现有 **transform-origin **属性的定义

transform-origin定义的是旋转的机电，其中angle是指旋转角度，如果是正值表示顺时针，父值表示逆时针

例如：

transform:rotate(30deg);

移动：translate( )

translate( x，y )：水平方向和垂直方向同时移动

translateX( x )：仅水平方向移动

translateY( y )：仅垂直方向移动

例如：

transform:translate(100px,20px);
transform:translateX(100px);
transform:translateY(20px);

缩放：scale( )

scale(x，y)：水平方向和垂直方向同时缩放

scaleX(x)：元素仅水平方向缩放

scaleY(y)：元素仅垂直方向缩放

缩放基数为1，大于1就放大，小于1就缩小

例如：

transform:scale(2,1.5);
transform:scaleX(2);
transform:scaleY(1.5);

扭曲：skew( )

skew(x，y)：在水平和垂直方向同时扭曲

skewX(x)：仅在水平方向扭曲

skewY(y)：仅在垂直方向扭曲

例如：

transform:skew(30deg,10deg);
transform:skewX(30deg);
transform:skewY(10deg);

改变元素基点：transform-origin

作用就是在进行transform动作前可以改变元素的基点位置，因为元素默认基点就是其中心位置。

语法：

transform-origin:x-axis y-axis;
X和Y的值可以是百分值，em，px
X也可以是left、center、right
Y也可以是top、center、bottom

16、3D效果

3D移动：translateX/Y/Z( )

说明：

该函数是一个元素在三维空间移动。这种变形的特点是，使用三位向量的坐标定义元素在每个方向移动多少。

随着px的增加，直观效果上：

X：从左向右

Y：从上向移动

Z：以方框中心为原点，变大

3D旋转：rotateX/Y/Z( )

说明：

该函数在Z轴方向上进行旋转

随着度数的增加，直观效果上：

X：以方框X轴，从下向上旋转

Y：以方框Y轴，从左向右旋转

Z：以方框中心为原点，顺时针旋转

3D缩放：scale3d( )

说明：

通过使用3D缩放函数，可以让元素在Z轴上按比例缩放。默认值为1，当值大于1时，元素放大，反之小于1大于0.01，元素缩小。当sacle3d( )中X轴和Y轴同时为1，即scale3d(1,1,sz)，其效果等同于scaleZ(sz)

随着放大倍数的增加，直观效果上：

X：以方框Y轴，左右边框

Y：以方框X轴，上下变高

Z：看不出变换。scaleZ( )和scale3d( )函数单独使用是没有任何效果

3D transform转换属性、

属性	描述
transform	向元素应用2D或3D转换
transform-origin	允许你改变被转换元素的位置
transform-style	规定被嵌套元素如何在3D空间中显示
perspective	规定3D元素的透视效果
perspective-origin	规定3D元素的底部位置
backface-visibility	定义元素在不面对屏幕时是否可见

transform-origin：x-axis y-axis z-axis；

说明：

变形的原点。默认情况，变形的原点在元素的中心点，或者是元素X轴和y

轴50%处

transform-style：flat|preserve-3d；

说明：

规定如何在3D空间中呈现被嵌套的元素

flat：子元素将不保留其3D位置

preserve-3d：子元素将保留其3D位置

perspective：透视值

说明：

perspective取值为none或不设置，就没有真3D空间。

perspective取值越小，3D效果就越明显，也就是你的眼睛越靠近真3D

perspective的值无穷大，或值为0时与取值为none效果一样

perspective-origin：x-axis y-axis；

说明：

定义3D元素所基于的X轴和Y轴。该属性运行您改变3D元素的底部位置。该属性的默认值为“50% 50%”（也就是center）。它可以是长度值，百分比，或以下三个关键词之一：left、center、right。

第一个长度值指定相对于元素的包含框的X轴上的位置。

第二个长度值指定相对于元素的包含框的Y轴上的位置。

backface-visibility：visible|hidden;

说明：

定义当元素不面向屏幕时是否可见。如果在旋转元素不希望看到起背面时，该属性很有用。

visible：为backface-visibility的默认值，表示反面可见。

hidden：表示反面不可见

17、CSS3动画

关键帧动画 keyframes

说明：

关键帧动画可以定义多个状态，或者用关键帧来说的话，过渡动画只能定义第一帧和最后一帧这两个关键帧，而关键帧动画则可以定义任意多的关键帧，因而能实现更复杂的动画效果。

语法：

通过**@keyframes**规则

以百分比来规定改变发生时间，或者通过关键词 “from” 和 “to” ，等价于0%和100%。0%是动画的开始时间，100%动画的结束时间。为了获得最佳的浏览器支持，您应该始终定义 0% 和 100% 选择器。

当您在@keyframes中创建动画时，请把它捆绑到某个选择器，否则不会产生动画效果。

@keyframes animationname{keyframes-selector{css-style;}
}animationname：声明动画的名称，可以任意自取
keyframes-selector：用来划分动画的时长，可以使用百分比形式，也可以使用“from”和“to”的形式等价于0% 和 100%
“from” 和 “to” 的形式等价于 0% 和 100%
建议始终使用百分比形式。@keyframes aa{from {left:0;top:0;}to{left:200px;top0;}
}@keyframes aa{0% {left:0;top:0;}25% {left:200px;top0;} 75% {left:0;top:0;}100% {left:200px;top0;} }animation:aa 2s;

@keyframes规则和所有动画属性

属性	描述
animation	所有动画属性的简写属性，除了animation-play-state属性
animation-name	规定@keyframes动画的名称
animation-duration：time	规定动画完成一个周期所花费的秒或毫秒。默认是0
animation-timing-function：value	规定动画的速度曲线。linear、ease、ease-in、ease-in-out、ease-in-out
animation-delay：time	规定动画从何时开始。默认是0。就是延迟时间
animation-iteration-count：n\|infinite	规定动画被播放的次数。默认是1。n：定义动画播放次数的数值。Infinite：规定动画应该无限次播放。
animation-play-state：pause\|runing	规定动画正在运行还是暂停。可以在JavaScript中使用该属性，这样就能在播放过程中暂停动画。

18、弹性布局 flex

概念：

弹性盒子由弹性容器和弹性子元素组成。弹性同期通过设置display属性的值为flex将其定义为弹性容器。弹性同期内包含了一个或多个弹性子元素。

19、媒体查询

媒体查询可以让我们根据设备显示器的特性为其设定CSS样式，媒体查询由媒体类型和一个或多个检查媒体特性的条件表达式组成。

语法一：

@media mediatype and|not|only(media feature){   CSS-Code;
}

语法二：

针对不同的媒体使用不同stylesheets

<link rel="stylesheet" media="mediatype and|not|only(media feature)" href="mystylesheet.css"

media query语法格式中支持设备如下：

-	-
all	适用于所有的设备
aural	适用于语音和音频合成器
braille	适用于触觉反馈设备
embossed	适用于凸点文字印刷设备
handheld	适用于小型或者手提设备
print	适用于打印机
projection	适用于投影图像，如幻灯片
sceen	适用于计算机显示器（最常用的一个）
tty	适用于使用固定间距字符的设备，如电传打字机和终端
tv	适用于电视设备

特性	合理的特性值	是否支持max/min	说明
width	带单位的长度值，如100px	是	匹配浏览器宽度
height	带单位的长度值，如100px	是	匹配浏览器高度
aspect-radio	比例值，如：16/9	是	匹配浏览器的宽度值和高度值的比例
device-width	带单位的长度值，如100px	是	匹配设备分辨率的宽度值
device-height	带单位的长度值，如100px	是	匹配设备分辨率的高度值
device-aspect-radio	比例值，如：16/9	是	匹配设备分辨率的宽度值与高度值的比例
color	整数值	是	匹配设备使用多少的色深
color-index	整数值	是	匹配色彩表中的颜色数

超过1200px红色
@meida screen and (min-width:1200px) {body {background:red;}
}
800px到1200px绿色
@meida screen and (min-width:800px) and (max-width:1200px) {body {background:green;}
}
8000px以内黄色
@meida screen and (max-width:800px) {body {background:yellow;}
}

20、移动端布局

1、百分比（弹性）布局的原理及应用

2、rem（等比缩放）布局的原理及应用

rem就是匹配当前的大小的倍数

三、JS基础

JS介绍

ECMAScript：ECMAScript是一种由Ecma国际（前身为欧洲计算机制造商协会，European Computer Manufacturers Association）通过ECMA-262标准化的脚本程序设计语言。
BOM：Browse Object Model，提供与浏览器交互的方法和接口
DOM：Document Object Model，提供访问和操作网页

数据类型

数字类型：number 100 3.14
字符串：string 所有带双引号/单引号
布尔值：boolean
特殊数据类型：特殊数据类型 null空 undefined未声明

声明变量（var）

通过关键字 var

声明变量同时赋值，叫做初始化

var age = 18;
age = 20;
var name = "xxx", age = 18, sex = "男";

标识符

标识符：用户自己定义的所有名字叫做标识符。变量名

运算符

算数运算符：+ - / * %
关系运算符：> >= < <= !=
逻辑运算符：
赋值运算符：=
自增、自减运算符： ++ –

任何类型的数据 + 字符串数据 = 字符串数据

任何数据与 NaN 做运算的救国始终是NaN

布尔值在做数学运算时：true = 1，false = 0

数据类型转换

Number（）：将其他类型转换成数据类型

布尔值：true => 1 false => 0
字符串：纯数字字符串 => 对应的数字，否则NaN
特殊数据类型：null => 0 undefined => NaN

parseInt（）：强制转换为整数

parseFloat（）：强制转换为浮点数

一元运算符

只能操作一个值的运算符叫做一元运算符

前置++：先进行自增+1，再取值

后置++：先进行取值，在进行自增+1

–同理

ECMA5 第五版

严格模式

从字面意思理解，即这种严格模式下，浏览器会对JS的要求更加的苛刻。

function m1(){//如果在给变量赋值时，没有使用var声明变量，那么当做全局变量进行处理max=10;
}
m1();
alert(max);

function m1(){"use strict" //该声明表示开启严格模式，写在哪个作用域下，这个作用域下的所有的代码都遵从严格模式var max=10;        //严格模式必须要加var
}
m1();
alert(max);

日期对象Date(格式化方法)

//以特定的格式显示星期几、月、日和年
alert(box.toDateString());//以特定的格式显示时、分、秒和时区
alert(box.toTimeString());//以特定地区格式显示星期几、月、日和年
alert(box.toLocaleDateString());//以特定地区格式显示时、分、秒和时区
alert(box.toLocaleTimeString());//以特定的格式显示完整的UTC日期
alert(box.toUTCString());//带UTC的返回的都是格林尼治的时间set/getDate()//从Date对象中返回一个月中的某一天(1~31)
getDay()//从Date对象返回一周中的某一天(0~6)
set/getMonth()//从Date对象中返回月份(0~11)
set/getFullYear()//从Date对象以四位数返回年份
set/getHours()//返回Date对象的小时(0~23)
set/getMinutes()//返回Date对象的分钟(0~59)
set/getSeconds()//返回Date对象的秒数(0~59)
set/getMilliseconds()//返回Date对象的毫秒
set/getTime()//返回1970年1月1日至今的毫秒数
getTimezoneOffset()//返回本地时间与格林威治标准时间(GMT)的分钟

定时器setInterval( )

<script>
/*setInterval( )【格式】setInterval(函数，毫秒数);功能：每隔所传参数的毫秒数，就调用一次所传参数的函数setInterval(function(){}, 毫秒数);功能：每隔所传参数的毫秒数，就调用一次所传参数的函数【返回值】当前页面上对于这个定时器的唯一标识，定时器的ID。clearInterval(定时器ID)功能：取消定时器参数：定时器ID
*/var i = 0;
function show(){document.write(i++ + "<br />");
}window.onload = function(){var btn = document.getElementById("btn");btn.onclick = function(){setInterval(show, 1000);}
}
</script>
<body><input type="button" id="btn" value="按钮">
</body>

BOM对象

BOM（Browser Object Model）

BOM就是浏览器的对象模型

window—document—anchors

—frames forms

—history images

—location links

—navigator location

—screen

windows对象及下属属性方法

浏览器可以通过调用系统对话框，向用户显示信息

系统提供了三个函数，可以完成系统对话框

/*【注意】window下的函数，都可以省略window直接去调用。【功能】直接弹出警告框【参数】警告框上显示的内容
*/
alert();/*【功能】弹出一个带有确定和取消按钮的警告框【返回值】返回true（确定）或false（取消）【参数】警告框上显示的内容
*/
confirm("请选择确定和取消");/*【功能】弹出一个带输入框的提示框【参数】第一个参数：要在提示框上显示的内容第二个参数：输入框内默认的值【返回值】就是输入框内的内容，或者是null
*/
prompt("请输入一个值", 9);

open方法

/*window.open();open();1、要加载的URL2、窗口的名称或者窗口的目标3、一串具有特殊意义的字符串【注意】如果只有一个参数，调用open方法会打开新窗口，加载url第二个参数是给打开的新窗口起名字，以后只会在起好名字的目标窗口加载url第三个参数就是设置当前打开窗口的一些参数，包括宽高和位置
*/
open("http://www.baidu.com");
open("http://www.baidu.com", "百度");
open("http://www.baidu.com", "百度", "width=800,height=800,top=200,left=200");
/*opener    打开当前窗口的父窗口的window对象【注意】IE不支持该对象
*/

location属性

location 是BOM对象之一，它提供了与当前窗口中加载的文档有关信息，还提供了一些导航功能。事实上，location对象是window对象的属性，也是document对象的属性

window.location = window.document.location

alert(window.location);  //获取当前的URL
alert(location);    //window可以省略，功能同上
alert(window.document.location);    //功能同上/*location 我们浏览器上的地址栏输入框【注意】它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能
*/

属性	描述的URL内容
hash	如果该部分存在，表示锚点部分
host	主机名：端口号
hostname	主机名
href	整个URL
pathname	路径名
port	端口号
protocol	协议部分
search	查询字符串

location对象的方法

assign();    //跳转到指定的urlreload();    //重载当前的url，如果传参，参数为true的时候，强制加载，从服务器源头重新加载replace();    //用新的url替换当前页面

history对象

history对象是window对象的属性，它保存着用户上网的记录，从窗口被打开的那一刻算起

属性：

history.length;----history对象中的记录数

方法：

history.back( );----前往浏览器历史条目前一个url，类似后退

history.forward( );----前往浏览器历史条目下一个url，类似前进

history.go(num);----浏览器在history对象中向前或向后

参数：0 重载当前页面

正数前进对应数量的记录

负数后退对应数量的记录

DOM对象

DOM document object model 文档对象模型

【注意】“W3C 文档对象模型（DOM）是中立于平台和语言的接口，它允许程序和脚步动态访问和更新文档的内容、结构和样式。”

html css 页面内容

js 页面行为操作

【注】DOM是打通html、css和JS壁垒的一个工具

DOM中节点的种类一共有三种

【注意】在JS中所有的节点都是对象

元素节点
属性节点 title = “ ”
文本节点测试div

<div title="属性节点">测试div
</div>

元素节点属性

当我们通过getElementById( )获取到特定的元素节点时，这个节点对象就被我们获取到了，而通过这个节点对象，我们可以访问他的一系列属性

属性	说明
tagName	获取元素节点的标签名
innerHTML	获取元素节点里的内容，非W3C DOM规范

获取当前有效样式

//getComputedStyle(元素节点)[获取样式类型]alert(getComputedStyle(node)["width"]);    //  火狐/谷歌/safari
元素节点.currentStyle[获取样式类型];  //  IE//获取当前样式的兼容函数
function getStyle(elem, attr){return elem.currentStyle ? elem.currentStyle[attr] : getComputedStyle(elem)[attr];
}

节点类型	nodeName	nodeType	nodeValue
元素	元素名称	1	null
属性	属性名称	2	属性值
文本	#text	3	文本内容（不包含html）

元素节点操作

方法	说明
write( )	这个方法可以把任意字符串插入到文档中
createElement( )	创建一个元素节点
appendChild( )	将新节点追加到子节点列表的末尾
createTextNode( )	创建一个文件节点
insertBefore( )	将新节点插入在前面
replaceChild( )	将新节点替换旧节点
cloneNode( )	复制节点
removeChild( )	移除节点

事件Event

1、事件基础

JavaScript事件是由访问Web页面的用户引起的一系列操作。

当用户执行某些操作的时候，再去执行一系列代码。或者用来获取事件的详细信息，如鼠标位置、键盘按键等。

2、事件处理函数

JavaScript可以处理的事件类型为：

鼠标事件
键盘事件
HTML事件

所有的事件处理函数都会有两个部分组成，on+事件名称

3、事件对象

当触发某个事件时，会产生一个事件对象，这个对象包含着所有与事件有关的信息。包括导致事件的元素、事件的类型、以及其他与特定事件相关的信息。

通过事件绑定的执行函数是可以得到一个隐藏参数的。说明，浏览器会自动分配一个参数，这个参数其实就是event对象

Event对象获取方式：

e.clientX / Y
e.pageX / Y
e.offsetX / Y

4、事件默认行为及阻止方式

事件流描述的是页面接收事件的顺序

事件流的三个阶段：捕获，目标，冒泡

阻止冒泡：

//阻止冒泡
inner.onclick = function(e){var evt = e || event;console.log("inner");//阻止冒泡evt.cancelBubble = true;
}

5、DOM2级事件处理程序

添加事件监听器：addEventListener(事件名，处理函数，布尔值)

移除事件监听器：removeEventListener(事件名，处理函数)

IE下的事件监听器：attachEvent(事件名，处理函数)、detachEvent(事件名，处理函数)

6、事件委托机制

利用事件冒泡的原理，把本应该添加给某元素上的事件委托给他的父级（外层）

ES6

解构赋值

//数组
let[a, b, c] = [1, 2, 3]
//默认赋值
[a, b=2] = [3]
let c;
[a=3] = [c];
//对象：
let{a, b} = {a:"aaa",b:"bbb"};
let{a:b} = {a:"aaa"};
let{a, b=5} = {a:1}

set结构

let set = new Set([1, 2, 3, 4, 4]);//构造函数，值不重复[...set]//扩展运算符，将类数组对象转换以逗号分割的序列for of //遍历set.size//长度
set.add(0);
set.delete(0);
set.has(0);
set.clear();keys();//返回键名的遍历器 for(let item of set.keys()){console.log(item)}
values();//返回键值的遍历器
entries();//返回键值对的遍历器
forEach();//使用回调函数遍历每个成员 set.forEach((value, key) => console.log(value*2));

map结构

let map = new Map([["name", "john"], ["age", 30]]);
map.size//长度
map.set(key, value);//新增一个键值对
map.get(key);//根据key值获取对应的value值
map.delete(key);//根据key值，删除value值
map.has(key);//根据key值判断map中是否存在该value值
map.clear();//清空mapkeys();//返回键名的遍历器
values();//返回键值的遍历器
//返回键值对的遍历器 for(let [key, value] of map.entries()){console.log(key, value);}
entries();
forEach();//使用回调函数遍历每个成员 map.forEach((value, key) => console.log(value*2));

四、webpack

网页中引入过多的静态资源会产生什么问题？

1、网页加载速度慢，因为我们要发起很多的二次请求

2、要处理错综复杂的依赖关系

如何解决上述问题？

1、合并、压缩、精灵图、图片的Base64编码

2、可以使用requireJS、也可以使用webpack可以解决各个包之间的复杂依赖关系

什么是webpack？

webapck 是前端的一个项目构建工具，它是基于Node.js开发出来的一个前端工具

webpack可以做什么事情？

webpack能够处理 JS 文件的相互依赖关系
webpack能够处理 JS 兼容问题，把高级的、浏览器不识别的语法，转为低级的，浏览器能识别的语法

webpack的两种安装方式

1、全局安装

运行 npm i webpack -g 全局安装webpack，这样就能在全局使用webpack的命令

2、局部安装

在项目根目录中运行 npm i webpack --save-dev 安装到项目依赖中

初步使用wepack打包构建列表隔行变色案例

1、运行npm init -y 初始化项目，使用npm管理项目中的依赖包

2、创建项目基本的目录结构

3、使用 cnpm i jquery --save 安装jquery类库

4、创建 main.js 并书写各行变色的代码逻辑

5、命令：webpack 要打包的文件路径打包好的输出文件路径

在控制台，直接输入webpack命令执行的时候，webpack做了以下几步

1.首先， webpack 发现，我们并没有通过命令的形式，给它指定入口和出口

2.webpack 就会去项目的根目录，查找一个叫做 ‘webpack.config.js’ 的配置文件

3.当找到配置文件后，webpack 会去解析执行这个配置文件，当解析执行完配置文件后，就得到了配置文件中，导出的配置对象

4.当webpack 拿到配置对象后，就拿到了配置对象中，指定的入口和出口，然后进行打包构建

webpack实现自动打包编译的功能

使用webpack-dev-server这个工具，来实现自动打包编译的功能，也就是热更新处理

1.命令 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖

2.安装完毕后，这个工具的用法，和webpack命令的用法，完全一样

3.由于是在项目中。本地安装的webpack-dev-server，所以，无法把它当做脚本命令，在powershell终端中直接运行（只有那些安装到全局 -g 的工具，才能在终端中正常执行）

4.注意：webpack-dev-server 这个工具，如果想要正常运行，要求，在本地项目中，必须安装webpack

5.webpack-dev-server 帮我们打包生成的bundle.js 文件，并没有存放到实际的物理磁盘上；而是，直接托管到了电脑的内存中，所以，我们在项目根目录中，根本找不到这个打包好的bundle.js文件

6.我们可以认为，webpack-dev-server 把打包好的文件以一种虚拟的形式，托管到了咱们项目的根目录中，虽然我们看不见它，但是可以认为，和dist、src、node_modules平级,有一个看不见的文件，叫做bundle.js

webpack命令的参数

–open：自动打开浏览器

–port 3000：将端口号设置为3000

–contentBase src：将src设置为打开的默认路径

–hot：热更新，可以实现浏览器的无刷新重载

将页面托管到内存中的工具html-webpack-plugin

html-webpack-plugin -D 在内存中安装此工具

2.在webpack.config.js配置文件中导入刚刚安装的

作用1.自动在内存中根据指定页面生成一个内存的页面

作用2.自动，把打包好的bundle.js文件追加到页面中去

配置第三方loader

注意：webpack，默认只能打包处理JS类型的文件，无法处理其他的非JS类型的文件

如果要处理非JS类型的文件，我们需要手动安装一些合适第三方loader加载器

1.如果想要打包处理css文件，需要安装npm i style-loader css-loader -D

2.打开webpack.config.js配置文件，在里面新增一个配置节点，叫做module，它是一个对象，在这个module对象上，有一个rules属性，这个rules属性是个数组，这个数组中存放了所有第三方文件的匹配和处理规则；

module: {//这个节点用于配置所有的第三方模块加载器//所有第三方模块的匹配规则rules: [//配置处理.css文件的第三方loader规则{//匹配所有以css结尾的文件格式test: /\.css$/,//使用刚刚加载的style-loader和css-loader两个模块use: ['style-loader','css-loader']}]
}

注意：webpack处理第三方文件类型的过程

1.发现这个要处理的文件不是JS文件，然后就去配置文件中，查找有没有对应的第三方loader规则；

2.如果能找到对应的规则，就会调用对应的loader处理这种文件类型；

3.在调用loader的时候，是从后往前调用的；

4.当最后一个loader调用完毕，会把处理的结果，直接交给webpack进行打包合并，最终输出到bundle.js中去

项目安装less-loader

1.npm i less-loader -D安装关于less-loader

2.在webapck.config.js配置文件中添加匹配规则

module: {//这个节点用于配置所有的第三方模块加载器//所有第三方模块的匹配规则rules: [//配置处理.css文件的第三方loader规则{//匹配所有以css结尾的文件格式test: /\.css$/,//使用刚刚加载的style-loader和css-loader两个模块use: ['style-loader','css-loader']},//配置处理 .less 文件的第三方 loader 规则{test: /\.less$/,use: ['style-loader', 'css-loader', 'less-loader']}]
}

处理.scss文件的loader

cnpm i sass-loader node-sass sass -D

安装sass-loader、node-sass、sass这三个模块

处理图片路径的url-loader

cnpm i url-loader file-loader -D

url-loader 模块依赖于flie-loader模块，所以file-loader也要一并安装，但是使用时只使用url-loader模块

webpack的babel配置

在webpack中，默认只能处理一部分ES6的新语法，一些更高级的ES6语法或者ES7语法，webpack是处理不了的；这个时候，需要借助第三方的loader，来帮助webpack处理这些高级语法，当第三方loader把高级语法转为低级语法后，会把结果交给webpack去打包到bundle.js中

通过 Babel ，可以帮我们将高级的语法转换为低级的语法

在webpack中，可以运行如下两套命令，安装两套包，全安装babel相关的loader功能

1.1 第一套包：cnpm i babel-core babel-loader@7.1.5 babel-plugin-transform-runtime -D

1.2 第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D

打开webpack配置文件，在module节点下的rules数组中，添加一个新的匹配规则：

2.1 { test: /.js$/, use: ‘babel-loader’, exclude: /node_modules/ }

2.2 注意：在配置babel的loader规则的时候，必须把node_modules目录，通过exclude选项排除掉，原因有两，而且babel-loader必须是7.1.5版本，8.0.0以后版本会报错

2.2.1 但如果不排除node_modules，则babel会把node_modules中所有的第三方JS文件都进行打包编译，这样会非常耗费cpu，使得编译速度很慢

2.2.2 哪怕，最终babel把所有node_modules中的JS文件转换完毕了，但是项目也无法正常运行

在项目的根目录中，新建一个叫做 .babelrc 的配置文件，这个配置文件属于JSON格式，所以在写 .babelrc 配置的时候，必须符合JSON语法规范：不能写注释，字符串必须双引号*

3.1 在 .babelrc 写如下的配置：可以把preset翻译成【语法】的意思

{

“presets”: [“env”, “stage-0”],

“plugins”: [“transform-runtime”]

}

了解：目前，我们安装的 babel-preset-env 是比较新的ES语法插件

export default 和 export 的使用方式

这是node中向外暴露成员的形式

module.exports = { }

在node中，使用 var 名称 = require(‘模块标识符’)

module.exports 和 exports 来暴露成员

在ES6中，也通过规范的形式，规定了ES6中如何导入和导出模块

ES6中导入模块，使用了 import 模块名称 from ‘模块标识符’ 或 import ‘表示路径’

在ES6中，使用 export default 和 export 向外暴露成员

export default {name: 'zs',age: 20
}

注意：export default 向外暴露的成员，可以使用任意变量来接收

注意：在一个模块中，export default 只允许向外暴露一次

注意：在一个模块中，可以同时使用 export default 和 export 向外暴露成员

export var title = '小星星'
export var content = '哈哈哈'

注意：使用 export 向外暴露的成员只能使用 { } 的形式来接收，这种形式，叫做【按需导出】

注意：export可以向外暴露多个成员，同时，如果某些成员，我们在import的时候，不需要，则可以不在 { } 中定义

注意：使用export导出的成员，必须严格按照导出时候的名称，来使用 { } 按需接收

注意：使用export导出的成员，如果想换个名称，可以使用 as 来起别名

import m1, { title as title123, content } from './test.js'
console.log(m1)
console.log(title123)
console.log(content)

HTML和CSS基础学习相关推荐

全栈学习之CSS基础学习
CSS基础学习 1. CSS导入方式行内样式内部样式外部样式 2. 三种基本选择器 2.1 标签选择器 2.2 类选择器 2.3 id选择器 2.4 关联 3. 层次选择器 3.1 后代选择器 ...
CSS基础学习-背景、边框的学习
CSS基础学习-背景.边框的学习背景属性属性描述 background 简写属性,作用是将背景属性设置在一个声明中. background-attachment 背景图像是否固定或者随着页面的其 ...
CSS基础学习--6 CSS Text（文本）
一.文本颜色 color:red; 颜色属性被用来设置文字的颜色. 颜色是通过CSS最经常的指定: 十六进制值 - 如: #FF0000 一个RGB值 - 如: RGB(255,0,0) 颜色的名称 ...
CSS基础学习--17 布局 - 水平垂直对齐
一.元素居中对齐要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;.设置到元素的宽度将防止它溢出到容器的边缘.元素通过指定宽度,并将两边的空外边距平均分配: ...
前端——CSS基础学习【part 2】
前端--CSS基础学习[part 2] Emmet CSS的复合选择器 CSS的元素显示模式 CSS的背景 CSS的三大特性 CSS 盒子模型 Emmet 快速生成HTML结构语法 (1)生成标签,输 ...
CSS基础学习--16 Float(浮动)
一.定义 CSS 的 Float(浮动),会使元素向左或向右移动,其周围的元素也会重新排列. Float(浮动),往往是用于图像,但它在布局时一样非常有用. 元素的水平方向浮动,意味着元素只能左右移动 ...
在慕课上学习的，HTML和CSS基础学习笔记1
// 在此之前,看了一遍慕课上的HTML和CSS基础教程,还有就是上过大约一周的前端课.但是学习时间不集中,不够清晰. // 现在打算专心学习,重新开始学习:复习一遍慕课上的基础教程,再看一遍Head ...
CSS基础学习教程（一）
一.CSS基础教程 1.1 CSS介绍 CSS1 是一种描述 HTML 文档样式的语言.CSS 描述应该如何显示 HTML 元素. 定义: CSS 指的是层叠样式表* (Cascading Style ...
HTML+CSS基础学习
一.(预习) 浏览器是网页的载体,网页需要在浏览器里运行 PC端常见的浏览器:谷歌.火狐.IE.QQ浏览器.欧朋手机端常见的浏览器:Safari.chrom.QQ浏览器编写网页的语言叫做HTML, ...
CSS基础学习三：CSS语法
CSS语法分为基础语法和高级语法. 一CSS 基础语法 (1)CSS 语法 CSS 规则由两个主要的部分构成:选择器,以及一条或多条声明,请使用花括号来包围声明. selector {declarat ...