网页就是由图片、链接、声音、视频等元素组成，就是一个.html文件

html超文本标记语言，专门制作网页的语言，有一套标签的组成

常用浏览器：IE、火狐、谷歌、Safari和Opera.

浏览器内核：负责读取网页内容，国内浏览器常用Webkit(Safari)、Blink(Chrome/opera)内核

web标准的构成：

主要包括结构（structure）、表现（presentation）和行为（behavior）三个方面

结构：用于对网页元素进行整理和分类，现阶段主要学html

表现：用于设置网页元素的版式、颜色、大小等外观样式，主要指CSS

行为：指网页模型的定义及交互的编写，现阶段主要学 javascript

DOCTYPE和lang及lang的作用

<!DOCTYPE html><!--文档类型声明，告知使用哪种html版本-->
<html lang="en"><!--当前文档的显示语言-->
<head>
    <meta lang="UTF-8"><!--设置字符编码类型-->
    <title>我的第一个页面</title>
</head>
<body>

</body>
</html>

div和span没有语义,都是一个盒子,用来装内容的

<th>和<td>的区别是:<th>中的文字会居中加粗,常用于表头单元格

CSS

一、基础选择器

  1. 标签选择器
  2. 类选择器
  3. id选择器
  4. 通配符选择器

id选择器和类选择器的区别是,类选择器可以多个组件使用,而id是唯一的,相当于只能一个组件使用

二、字体属性总结

  1. 设置字号:font-size

  2. 设置字体:font-family

  3. 字体粗细:font-weight:700相当于bold,400相当于normal

  4. 字体样式:font-style: italic(倾斜),normal(不倾斜)

  5. font字体连写:字体连写是有顺序的,不能随意换位,字体和字号必须存在

三、文本属性

1.设置颜色:color,其值可以为预定义的颜色值、16进制的数、或者是rgb(x,y,z)

2.对齐文本:text-align:设置元素内文本内容水平对齐,其值为left、center、right

3.装饰文本:text-decoration,值为:none,underline(下划线),overline(上划线),line-through(删除线)

4.文本缩进:text-indent,其值为缩进距离,可以为px和em,em是相对单位,1em对应当前一个文字的大小

5.行间距:line-height,用于设置行与行之间的距离

四、CSS引入方式

按照书写位置不同可分为三类：链接式、**:行内式、嵌入式**

链接式：

<link rel='stylesheet' href='Css相对路径'>

行内式：

<div style="color:blue">这是行内式样式</div>

嵌入式：

<style></style>

五、复合选择器

标签属性选择器、关系选择器、伪类选择器

1.标签属性选择器

这些选择器允许基于一个元素自身是否存在（例如href）或者基于各式不同的按属性值的匹配，来选取元素。

选择器 示例 描述
[attr] a[title] 匹配带有一个名为attr的属性的元素——方括号里面的值
[attr=value] a[herf=”https://example.com"] 匹配带有名为attr的属性的元素，其值正为value——引号中的字符串
[attr~=value] p[class~=”special”] 匹配带有一个名为attr的属性的元素，其值正为value，或者匹配带有一个attr属性的元素，其值有一个或者更多，至少有一个和value匹配。
注意，在一列中的好几个值是用空格隔开的。
[attr|=value] div[lang|=”zh”] 匹配带有一个名为attr的属性的元素，其值可正为value，或者开始为value，后面紧随一个连字符。

子字符串匹配选择器

选择器 示例 描述
[attr^=value] li[class^=”box-“] 匹配带有一个名为attr的属性的元素，其值开头为value子字符串。
[attr$=value] li[class$=”-box”] 匹配带有一个名为attr的属性的元素，其值结尾为value子字符串
[attr*=value] li[class*=”box”] 匹配带有一个名为attr的属性的元素，其值的字符串中的任何地方，至少出现一次value子字符串

如果你想在大小写不敏感的情况下，匹配属性值的话，你可以在闭合括号之前，使用i值

2.关系选择器

1.后代选择器

典型用单个空格（” “）字符——组合两个选择器

元素1 元素2{

}
意思为选择元素1中所有元素2进行渲染
元素1 元素2可以为任意的基础选择器

2.子代关系选择器

子代关系选择器是个大于号（>），只会在选择器选中直接子元素的时候匹配。继承关系上更远的后代则不会匹配

语法:

元素1>元素2{
}

3.邻接兄弟

邻接兄弟选择器（+）用来选中恰好处于另一个在继承关系上同级的元素旁边的物件

元素1 + 元素2{
}

4.通用兄弟

如果你想选中一个元素的兄弟元素，即使它们不直接相邻，你还是可以使用通用兄弟关系选择器（~）

元素1 ~ 元素2{
}

3.伪类选择器

它用于选择处于特定状态的元素，一些伪类只会在用户以某种方式和文档交互的时候应用，这些用户行为的伪类，有时叫做动态伪类。

伪类选择器用(:)冒号表示

以下的伪类选择器就是用户行为的伪类选择器

<style>
    /*未访问的链接a:link,把没有访问过的链接选出来*/
    a:link{
    }
    /*当a标签被访问过,则使用当前样式*/
    a:visited{
    }
    /*选择鼠标经过的那个链接*/
    a:hover{
        
    }
    /*选择的是鼠标当前点击的a标签*/
    a:active{
    }
</style>

注意事项:在书写伪类选择器时,最好按照上面顺序写。

参考节

伪类和伪元素 - 学习 Web 开发 | MDN (mozilla.org)

六、元素显示模式

1.块元素和行内元素

html元素一般分为块元素和行内元素两种类型

<!--块元素-->
<p><div><h(x)>等
<!--注意:文字类标签不能放块级元素,如<p>和<h(x)>里不能放其他的块级元素-->
<!--行内元素-->
<a><span>等
<!--宽高直接设置无效
默认高宽就是它本身的宽度
行内元素只能容纳文本或其他的行内元素
链接a标签里面不能嵌套a标签
特殊情况链接a里面可以放块级元素-->

2.行内块元素

<img/><input/><td>
<!--其一行可以显示多个,并且可以控制宽度和高度还有外边距以及内边距-->

3.元素显示模式转换

a{
    display:block/*把行内元素转化为块级元素*/
    display:inline/*把块级元素转化为行内元素*/
    display:inline-block/*转化为行内块元素*/    
}

七、CSS背景颜色

1.背景颜色

background-color

2.背景图片

background-image: none | url

3.背景平铺

background-repeat: repeat | no-repeat | repeat-x | repeat-y

4.背景图片位置

background-position: x y(分别代表x坐标和y坐标)可以是方位名次也可以是精确单位
1.方位名词

  • 如果指定的两个都是方位名词,则位置与前后两值顺序无关
  • 如果指定了一个方位词,另外一个默认居中对齐

2.精准单位

  • 前面一个参数是x,后面是y,若只有一个值,则代表x,y默认为垂直居中

3.混合单位

div{
    background-position:20px center;//代表x为20,y是居中
    background-position:center 20px;//代表x为居中,y是20
}

5.背景固定

background-attachment: scroll | fixed

6.背景复合写法

background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置

7.背景色半透明

background: rgba(r,g,b,a)a代表透明度,取值在0-1,0是完全透明,1则相反

八、CSS三大特性

1.层叠性

它定义了多个样式规则应用于同一元素时的优先级和冲突解决方式。通过层叠性，可以根据选择器的特定性、样式规则的来源和重要性，确定最终应用到元素上的样式。

原则:样式冲突,遵循的原则是就近原则
样式不冲突,则不层叠

2.继承性

是指元素会从其父元素继承某些样式属性的值。具有继承性的属性可以在父元素上设置，然后自动应用到其子元素。这样，可以减少样式规则的重复性，并使得整个文档的样式管理更加便捷。但并非所有的属性都具有继承性，只有被规定为可继承的属性才会被子元素继承。
子元素可以继承父元素的样式(text-,font-,line-,以及color)
行高继承 (行高可跟单位也可以不跟单位,不跟单位代表子元素的行高等于子元素字体大小*该数值)

3.选择性

选择性指定了CSS中用于选择特定元素的选择器。选择器可以根据元素的标签名、类名、ID、属性等进行匹配，从而选择要应用样式的特定元素

  • 选择器相同则执行层叠性

  • 选择器不同,则根据选择器权重选择

    权重占比排序:

    继承/*<元素选择器<类选择器/伪类选择器<ID选择器<行内样式<!important

权重叠加

九、CSS盒子模型

概念：CSS盒子模型是用于布局和定位HTML元素的一种概念。它描述了一个元素在文档中所占据的空间以及如何计算元素的大小。
盒子分为：块级盒子和内联盒子
块盒（block box）的行为：

  • 在内联的方向上扩展并占据父容器在该方向上的所有可用空间
  • 每个盒子都会换行
  • width和height属性可生效
  • 内边距、外边距、边框都会将其他元素从当前盒子推开

行盒（inline box）的行为：

  • 盒子不会换行
  • width和height不会生效
  • 垂直方向的内边距、外边距以及边框会被应用但是不会把其他处于inline状态的盒子推开
  • 水平方向的内边距、外边距以及边框会被应用而且会把其他处于inline状态的盒子推开

将display设置为inline-block,实现行盒和块盒特征的结合

  • 设置width、height属性会生效
  • padding、margin，以及border会推开其他元素
  • 不会跳转到新行

组成:边框、外边距、内边距、内容区域。

1.边框（border）

边框有三部分组成:宽度、样式、颜色
border-width:xx（px）单位以px结尾
border-style:solid（实现边框）| dashed（虚线边框）|dotted（点线边框）
border-color：颜色值
边框简写border后面直接跟上面属性值即可，没有顺序要求，如border：1px soild red
还可单独设置一边的边框，如：border-top、border-bottom、border-left，border-right
border-collapse: collapse,合并两边的边框,避免边框重叠导致边框看起来很粗
注意：盒子边框会影响盒子大小

2.内边距（padding）

用于设置边框与内容之间的距离
padding-left | right | top | bottom
内边距复合写法：

padding:10px 5px 15px 20px;//上、右、下、左
padding:10px 5px 15px;//上，右左、下
padding:10px 5px;//上下、左右
padding:10px;//上下左右

注意内边距padding也会影响盒子的大小
如果盒子本身没有指定width/height属性，则此时padding不会撑开盒子大小

3.外边距（margin）

用于设置盒子与盒子之间的距离
margin-left | right | top | bottom
margin简写方式和padding简写方式一致，同上
外边距典型应用
可以使块级盒子可以水平居中，但必许满足两个条件：必须指定了宽度，盒子左右的外边距都设置auto
外边距合并：相邻块元素如果上面块元素定义了下外边距，下面的块元素定义了上外边距，则取两个中较大者，这种现象称为相邻块元素垂直外边距的合并
嵌套块元素塌陷：对于父元素有上边距的同时子元素也有上边距，此时父元素会塌陷较大的外边距值，解决方法如下：

  1. 为父元素添加边框
  2. 为父元素定义上边内距
  3. 为父元素添加overflow：hidden

清除内外边距

*{
	padding:0
	margin:0
}

行内元素尽量只设置左右边距

4.圆角边框

border-radius：length（length可以使数值或百分比，百分比一半代表齐高度或者宽度的比例）
border-radius：左上，右上，右下，坐下（控制不同四个不同的圆角）
border-radius：左上，右上/左下，右下

5.盒子阴影

box-shadow：h-shadow（必需），v-shadow（必需），blur，spread，color，insert
分别代表：水平阴影的位置，垂直阴影的位置，模糊距离，阴影尺寸，阴影的颜色，将外部阴影改成内部阴影

box-shadow:10px 10px 10px 10px blue insert//默认为outside

6.文字阴影

text-shadow：h-shadow（必需），v-shadow（必需），blur，spread
分别代表：水平阴影的位置，垂直阴影的位置，模糊距离，阴影尺寸

十、三种传统的布局方式

标准流、浮动、定位

1、 标准流（普通流）

所谓标流：就是标签按照规定好默认方式排列

2、浮动

（1）什么是浮动?

用于创建浮动框，将一个元素移动到一边，直到左边缘或是右边缘触及包含块或另一个浮动框的边缘，允许文本和内联元素环绕它。该元素从网页的正常流动（文档流）中移除，但是仍然保持部分的流动性（与绝对定位相反）。

（2）浮动特性

  1. 脱离标准普通流的控制移动到指定位置（脱标）浮动的盒子不再保留原先的位置
  2. 如果多个盒子都设置浮动，则他们按照属性值一行内显示并且顶端对齐排列
  3. 浮动元素具有行内块元素特性

（3）浮动元素经常和标准流父级搭配使用

先用标准流的父元素排列上下位置，之后内部子元素采取浮动排列左右位置
通常一个盒子内的块级元素浮动了，其余子盒子也应该浮动

（4）清除浮动的本质

清除浮动元素造成的影响，清除浮动后，父级就会根据浮动盒子自动检测高度。父级有了高度，就不会影响下面的标准流了

（5）清除浮动的策略

闭合浮动，只让浮动在父子内部影响，不影响外面的其他盒子

clear:left、right、both
//分别代表：不允许左侧有浮动元素，不允许右侧有浮动元素，同时清除左右两侧浮动的影响

（6）清除浮动的方法

  1. 额外标签法

    在最后一个子元素后面额外增加一个空标签，并设置样式属性：clear，且这个标签必须是块级元素

  2. 父级添加overflow属性

    为父级添加**overflow属性，并将其值设置为hidden、auto、scroll**

    {
        /*overflow:hidden*/
    	/*overflow:auto*/
    	overflow:scroll
    }

  3. 父级添加alter伪元素

    其实相当于额外标签法的升级

    .clearfix:after{
        content:"";
        display:block;
        height:0;
        clear:both;
        visibility:hidden;
    }
    .clearfix{ /*IE6.7专用*/
        *zoom: 1;
    }

  4. 为父级添加双伪元素

    .clearfix:before,clearfix:after{
     	content:"";
        display:table;
    }
    .clearfix:after{
        clear:both;
    }
    .clearfix{ /*IE6.7专用*/
        *zoom: 1;
    }

    清除浮动的情况为：

    父级没有高度、子盒子浮动了、影响了下面布局，我们就应该清除浮动

3.定位

定位可以让一个盒子自由的在某一个盒子内移动位置或者固定在屏幕中某个位置，并且可以压住其他盒子。

（1）定位组成

定位=定位模式+偏移量

（2）定位模式

通过CSS的position属性

值 语义
static 静态定位
relative 相对定位
absolute 绝对定位
fixed 固定定位
  1. Static（静态）定位：
    • 静态定位是默认的定位模式，当没有指定其他定位属性时，元素将处于静态定位。
    • 元素按照正常的文档流布局，不受其他定位属性的影响。
    • 无法使用top、bottom、left和right属性来调整元素的位置。
  2. Relative（相对）定位：
    • 相对定位通过设置相对偏移量来定位元素，相对于其自身在文档流中的位置进行偏移。
    • 使用top、bottom、left和right属性可以调整元素相对于其正常位置的位置。
    • 元素仍然占据原始的空间，并在文档流中保持位置，其他元素不会受到影响。
  3. Absolute（绝对）定位：
    • 绝对定位将元素从文档流中完全脱离，并相对于其最近的已定位（非静态定位）祖先元素进行定位。
    • 使用top、bottom、left和right属性可以精确地定位元素的位置。
    • 绝对定位的元素不会占据文档流中的空间，其他元素可能会填补它们离开的空间。
  4. Fixed（固定）定位：
    • 固定定位将元素相对于视窗（浏览器窗口）进行定位，即使页面滚动，元素也会保持固定的位置。
    • 使用top、bottom、left和right属性可以精确地定位元素相对于视窗的位置。
    • 固定定位的元素不会占据文档流中的空间，其他元素可能会填补它们离开的空间。

（3）边偏移

有top、bottom、left和right共四个属性

边偏移属性 示例 描述
top top：80px 顶部偏移量，定义元素相对于其父元素上边线的距离
bottom bottom：80px 底部偏移量，定义元素相对于其父元素下边线的距离
left left:80px 左部侧偏移量，定义元素相对于其父元素左边线的距离
right right:80px 右侧偏移量，定义元素相对于其父元素右边线的距离

（8）粘性定位（了解）

语法：

选择器{
    position:sticky;
    top:10px
}

特点：

  1. 以浏览器的可视窗口为参照物移动元素
  2. 粘性定位占有原先的位置
  3. 必须添加偏移量中的任何一个才有效果

跟页面滚动搭配使用。兼容性较差，IE不支持

（9）定位总结

定位模式 是否脱标 移动位置 是否常用
static静态定位 否 不能使用边偏移 很少
relative相对定位 否（占有位置） 相对于自身位置移动 常用
absolute绝对定位 是（不占用位置） 带有定位的父级 常用
fixed固定定位 是（不占用位置） 浏览器可视区 常用
sticky粘性定位 否 浏览器可视区 当前阶段少

（10）定位叠放顺序

可使用z-index来控制盒子的前后次序

选择器{
    z-index:1;
    //其数值可取整数和零，数值越大，盒子越靠上
    //如果属性值相同，则按照书写顺序，后来者居上
    //注意数值不能加单位
}

（11）定位的拓展

  1. 行内元素添加了绝对或者固定定位，可以直接设置高度和宽度
  2. 块级元素添加绝对或者固定定位，如果不设置宽度和高度，则默认是内容大小
  3. 浮动元素、绝对定位元素都不会触发外边距合并的问题
  4. 绝对定位会完全压住盒子，浮动元素不同，只会压住它下面标准流的盒子，但是不会压住下面标准流盒子里面的文字（浮动之所以不会压住文字，是因为浮动产生的目的最初是为了做文字环绕效果的。文字会围绕浮动元素）

（12）元素的显示与隐藏

  1. display显示隐藏

    display：none:隐藏对象，并且不再占有原来的位置
    display：block:除了转化为块级元素之外，同时还有显示元素的意思

  2. visibility显示隐藏

    visibility:hidden:元素隐藏，继续占用原来的位置

    visibility:visible:元素可视

  3. overflow溢出显示隐藏

    overflow：visible显示

    overflow：hidden隐藏

    overflow：scroll溢出部分显示滚动条，不溢出也显示滚动条

    overflow：auto不溢出不显示滚动条，溢出显示

十一、精灵图

精灵技术：为了有效地减少服务器接受和发送请求得次数，提高页面加载的速度

核心原理：将网页中的一些小背景图像整合到一张大图中，这样服务器只需要一次请求就可以了

1.使用

主要是移动背景图位置，覆盖住对应的盒子即可

background-position移动位置

并且精灵图主要针对于背景图

十二 、字体图标

展示的是图标，本质是字体

优点：

  1. 轻量级，一但字体加载就会马上渲染出来
  2. 灵活性，本质是字体，可以随意更改颜色、产生阴影、透明效果等
  3. 兼容性：几乎支持所有的浏览器

注意：字体图标只是优化精灵图，结构简单的小图片可以使用字体图标，复杂的使用精灵图

字体图标可下载后，直接引入，

推荐网站：http://icomoon.io、http://www.iconfont.cn/

引入：

  1. 把下载的fonts文件夹放在根目录下

  2. 通过CSS引入

    @font-face{
        font-family:'icomoon';
        src:url('fonts/icomoon.eot?7kkyc2');
        src:url('fonts/icomoon.eot?7kkyc2')format('embedded-opentype'),
            url(fonts/icomoon.woff?7kkyc2)format('truetype'),
            url('fonts/icomoon.svg?7kkyc2#icomoon')format('svg');
        font-weight:normal;
        font-style:normal;
    }

    3.在html中复制小图标，小图标可以在下载文件中的demo.html找到

    4.必须指定字体样式font-family='icomoon'

字体图标的追加：

十三、CSS三角做法

先将高宽设置为0，然后将边框改为透明，最后为一边的边框指定颜色即可

div{
    width:0;
    height:0;
    //以下两句为了兼容性
    line-height:0;
    font-size:0;
    border:50px solid transparent;
    border-left-color:pink;
}

十四、CSS用户界面样式

1.鼠标样式

{
    cursor：pointer;//小手
    cursor：move;//移动样式
    cursor：text;//文本样式
    cursor：not-allowed;禁止
}

2.轮廓线 outline

给表单添加outline：0；或者outline：none；之后就可去掉默认的蓝色边框。

input{
    outline:0//none
}

3.防止文本域拖动 resize

textarea{
    resize:none;
}

4.vertical-align属性应用

经常用于设置图片或者表单（行内块元素）和文字垂直对其

{
    vertical-align:baseline | top |middle | bottom;
    //分别代表基线对齐（默认），顶部对齐，居中对齐，底部对齐
}

解决图片底部默认空白缝隙问题

bug：图片底部会有一个空白缝隙，原因是行内块元素会和文字的基线对齐

主要解决办法有两种：

  1. 给图片添加vertical-align:middle | top |bottom等//提倡使用
  2. 把图片转化为块级元素display：block

5.溢出文字省略号显示

单行文本溢出显示省略号—必须满足三个条件

  1. 先强制一行内显示文本（white-space：nowrap）
  2. 超出部分溢出（overflow：hidden）
  3. 文字用省略号替代超出部分（text-overflow：ellipsis）

多行文本溢出显示省略号

有较大的兼容性问题，适合于webKit浏览器或移动端

  1. 超出部分溢出（overflow：hidden）

  2. 文字用省略号替代超出部分（text-overflow：ellipsis）

  3. 弹性伸缩盒子显示模型（display：-webkit-box）

  4. 限制在一个块元素显示的文本的行数（-webkit-line-clamp：2）

  5. 设置或检索伸缩盒对象的子元素的排列方式（-webkit-box-orient：vertical；）

    更推荐后端人员做

6.常见布局技巧

  1. margin负值运用

    用于浮动元素边重合导致边框像素增加

  2. 文字围绕浮动元素

    巧妙运用浮动元素不会压住文字的特性

  3. 行内块的巧妙运用

    各块级元素加text-align：center会使子盒子中的行内元素和行内块元素水平居中

  4. css三角强化

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            .box{
                width: 0;
                height: 0;
                border-top: 50px solid #88BBCC;
                border-right: 100px solid #AAFF88;
                border-bottom: 0 solid #FFFF88;
                border-left: 0 solid #AABBCC;
                /*简写*/
                /*
                border-color: #88BBCC #AAFF88 #FFFF88 #AAFF88;
                border-style: solid;
                border-width: 50px 100px 0 0;
                */
            }
        </style>
    </head>
    <body>
    <div class="box"></div>
    </body>
    </html>

7.CSS初始化

指重设浏览器的样式，目的是消除不同浏览器对HTML文本呈现的差异

每个网页必须对CSS进行初始化

十五、HTML5和CSS3

1.HTML5新特性

增加了一些新的标签、新的表单和新的表单属性等

1.HTML5新增的语义化标签

  • header:头部标签
  • nav：导航标签
  • article：内容标签
  • section：定义文档某个区域
  • aside：侧边栏标签
  • footer：尾部标签

注意：

  • 这些新标签主要是针对搜索引擎的
  • 这些新标签页面中可以使用多次
  • 在IE9中，需要把这些元素转化为块级元素
  • 移动端更喜欢使用这些标签(移动端没有兼容性问题)

2.HTML新增的多媒体标签

  • audio：音频标签

    音频支持三种格式（MP3、Wav、Ogg）：尽量使用mp3

    <audio controls="controls">
        <source src="文件地址.mp3" type="video/mpeg">
        <source src="文件地址.ogg" type="video/ogg">
        您的浏览器暂不支持<zudio>标签
    </audio>
    属性 值 描述
    autoplay autoplay 音频就绪自动播放（google禁用）
    controls controls 向用户显示播放控件
    loop loop 播放完是否继续播放该音频，循环播放
    src url 音频url地址

  • video：视频标签

    支持三种视频格式（mp4,webM,Ogg）：尽量使用mp4格式

    <video controls="controls">
        <source src="文件地址.mp4" type="video/mp4">
        <source src="文件地址.ogg" type="video/ogg">
        您的浏览器不支持视频播放
    </video>
    //从上往下一次判断你浏览器支持哪种视频播放

    常用属性

    属性 值 描述
    autoplay autoplay 视频就绪自动播放（google需要添加muted来解决自动播放）
    controls controls 向用户显示播放控件
    width pixels（像素） 设置播放宽度
    height pixels(像素) 设置播放宽度
    loop loop 播放完是否继续播放该视频，循环播放
    preload auto(预先加载视频)
    none（不应加载视频）    		 规定是否预加载视频，如果有autoplay，就该忽略该属性
    src url 视频url地址
    poster Imgurl 加载等待的画面图片
    muted muted 静音播放

3.HTML新增的input类型

属性值 说明
email 限制用户输入必须为Email类型
url 限制用户输入必须为URL类型
date 限制用户输入必须为日期类型
time 限制用户输入必须为时间类型
month 限制用户输入必须为月类型
week 限制用户输入必须为周类型
number 限制用户输入必须为数字类型
tel 电话号码
search 搜索框
color 生成一个颜色选择表单

4.HTML新增表单属性

属性 值 说明
required required 表单拥有该属性表示其内容不能为空
placeholder 提示文本 表单的提示信息，存在默认值将不显示
autofocus autofocus 自动聚焦属性，页面加载完成自动聚焦到指定的表单
autocomplete off/on 当用户在字段开始键入是，浏览器基于之前输入过的值，应该显示出在字段中填写的选项
默认已经打开，如autocomplete=“on”，关闭autocomplete=“off”/
需要放在表单内，同时加上name属性，同时成功提交
multiple multiple 可以多选文件提交

2.CSS3的新特性

  • 新增的CSS3特性有兼容性问题，ie9+才支持
  • 移动端支持优于PC端

1.新增选择器

  • 属性选择器

    1. 利用属性选择器就可以不用借助于类或者id选择器

      标签名[特定的属性]

    2. 属性选择器还可以根据选择属性=值的某些元素

      标签名[属性=“特定的值”]

    3. 属性选择器还可以根据选择属性值开头的某些元素

      标签名[属性^=“开头值”]

    4. 属性选择器还可以根据选择属性值结尾的某些元素

      标签名[属性$=”结尾值”]

    类选择器、属性选择器、伪类选择器的权重是10

  • 结构伪类选择器

    选择符 简介
    E:first-child 匹配父元素中的第一个子元素E
    E:last-child 匹配父元素中的最后一个E元素
    E:nth-child(n) 匹配父元素中第n个子元素E，
    n可以为关键词：even偶数，odd奇数
    n可以是公式：如2n代表所有偶数下标的孩子，5n代表下标为5倍数的孩子
    E:first-of-type 指定类型E的第一个
    E:last-of-type 指定类型E的最后一个
    E:nth-of-type 指定类型E的第n个

    nth-child和nth-of-type的区别

    nth-child会把所有子盒子排序

    执行时，先看nth-child()，之后再看是否与前面类型匹配

    nth-of-type：会把指定元素子盒子排上序号

  • 伪元素选择器

    利用CSS创建新标签，而不需要HTML标签，从而简化HTML结构

    选择符 简介
    ::before（单冒号也行） 在元素内部的前面插入内容
    ::after 在元素内部的后面插入内容

    注意：

    1. before和after创建一个元素，但是属于行内元素
    2. 新创建的这个元素在文档树中是找不到的，所以我们称为伪元素
    3. 语法:element::before{}
    4. before和after必须有content属性
    5. before在父元素内容前面创建元素，after在元素内容后插入元素
    6. 伪元素选择器和标签选择器一样，权重为1

    使用场景：

    1. 伪元素字体图标

    2. 伪元素清除浮动

      .clearfix:after{
          conten:"";            /*伪元素必须写的属性*/
          display:block;        /*插入元素必须是块级*/
          height:0;             /*不要看见这个元素*/
          clear:both;           /*核心代码清除浮动*/
          visibility:hidden;    /*不要看见这个元素*/
      }
      .clearfix:before,.clearfix:after{
          conten:"";            /*伪元素必须写的属性*/
          display:table;        /*转化为块级元素并且一行显示*/
      }
      .clearfix:after{
          clear:both;           /*核心代码清除浮动*/
      }

2.CSS3盒子模型

可通过box-sizing来指定盒子模型，有两个值：即可指定为**content-box**、**border-box**

  1. 默认为content-box，大小为width+padding+border
  2. border-box，大小为width

3.图片变模糊

filter:blur(5px);/*模糊处理，数值越大越模糊*/

opacity:设置div元素的不透明级别，从0.0(完全透明)-1.0(完全不透明)

4.计算盒子宽度：calc函数

calc(100%-80px);/*可进行+、- 、*、/*/

5.过渡效果

从一个状态渐渐的变到另外一个状态，经常和:hover一起使用

transition:width 1s, height .5s;
/*要过渡的属性 花费时间 花费时间(s) 运动曲线(linear匀速、ease逐渐变慢，ease-in加速，ease-out减速、ease-in-out先加速后减速)   何时开始(单位为s)  */ 
/*若需要所有属性都有过渡效果，可以在将属性直接写成all*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .start{
            width: 200px;
            height: 200px;
            background-color: #88BBCC;
            transition: all 1s;
        }
        .start:hover{
            width: 400px;
            height: 300px;
            background-color: #FFFF88;
        }
    </style>
</head>
<body>
<div class="start"></div>
</body>
</html>

进度条实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bar{
            width: 150px;
            height: 15px;
            border: 1px solid red;
            border-radius: 7px;
        }
        .bar_in{
            width: 20%;
            height: 100%;
            background-color: red;
            transition: width 1s;
        }
        .bar:hover .bar_in{
            width: 100%;
        }
    </style>
</head>
<body>
<div class="bar">
    <div class="bar_in"></div>
</div>
</body>
</html>

6.2D转换

可实现元素的位移、旋转、缩放等效果
改变二维平面上的位置

transform:translate(x,y);/*或者分开写*/
transform:translateX(n);
transform:translateY(n);
/*不会影响其他盒子的位置*/
/*对行内标签没有效果*/
/*参数可以为百分数，其参考值为自身的宽和高*/
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .father div:nth-child(n) {
            width: 400px;
            height: 400px;
            transition: all 1s;
        }

        .father .bar {
            background-color: #88BBCC;
        }

        .father .one {
            background-color: #AAFF88;
        }

        .father .two {
            background-color: #FFFF88;
        }

        .father .bar:hover, .one:hover, .two:hover {
            transform: translate(100px, 100px);
        }
    </style>
</head>
<body>
<div class="father">
    <div class="bar"></div>
    <div class="one"></div>
    <div class="two"></div>
</div>
</body>
</html>
6.1、水平垂直居中
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .bar {
            position: relative;
            width: 800px;
            height: 800px;
            background-color: #88BBCC;
        }

        p {
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: #FFFF88;
             top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div class="bar">
    <p></p>
</div>
</body>
</html>
6.2、2D转换之旋转-rotate

语法：transform:rotate(度数)

  • 单位为：deg，比如rotate(45deg)
  • 角度为正时，顺时针旋转，负时为逆时针旋转
  • 默认旋转的中心点是元素的中心点
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 150px;
            height: 35px;
            border: #88BBCC solid 1px;
            position: relative;
        }
        div::after{
            content: "";
            position: absolute;
            top:7px;
            right: 10px;
            width: 10px;
            height: 10px;
            border-width: 1px 1px 1px 1px;
            border-style: solid solid solid solid;
            border-color: transparent black black transparent;
            transform: rotate(45deg);
            transition: all .2s;
        }
        div:hover::after{
            top:12px;
            transform: rotate(225deg);
        }
    </style>
</head>
<body>
<div class="bar">
</div>
</body>
</html>
6.3、2D转换中心点-transform-origin

  1. 语法：transform-origin: x y;

  2. 重点

    • 注意后面的x和y用空格隔开
    • x y默认转换的中心点是元素的中心点（50% 50%）
    • 还可以给x y设置像素 或者 方位名称（top bottom left right center）

    旋转中心点案例

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
        <style>
            div{
                width: 200px;
                height: 200px;
                background-color: #88BBCC;
                border: black solid 1px;
                margin: 10px;
                float: left;
                overflow: hidden;/*溢出隐藏*/
            }
            div::before{
                content: "黑马";
                width: 100%;
                height: 100%;
                display: block;
                background-color: #AAFF88;
                text-align: center;
                transform: rotate(180deg);
                transform-origin: left bottom;/*设置中心点*/
                transition: all 1s;
            }
            div:hover::before{
                transform: rotate(0);
            }
        </style>
    </head>
    <body>
    <div class="bar"></div>
    <div class="bar"></div>
    <div class="bar"></div>
    </body>
    </html>
    4.2D转换之缩放scale

    1. 语法

      transform:scale(x,y);

    2. 注意

      • 注意其值用逗号隔开
      • transform:scale(1,1)；高和宽都放大一倍，相对于没有放大
      • transform:scale(2,2)；高和宽都放大了两倍
      • transform:scale(2)；只写一个参数，第二个参数则和第一个参数一样
      • transform:scale(0.5,0.5)；缩小
      • scale缩放的最大优势：可以设置转化中心点缩放，默认以中心点缩放，而且不影响其他盒子
      <!DOCTYPE html>
      <html lang="en">
      <head>
          <meta charset="UTF-8">
          <title>跳动爱心</title>
          <style>
              div {
                  width: 200px;
                  height: 200px;
                  background-color: #88BBCC;
                  margin: 200px auto;
                  transition: all 1s;
              }

              div:hover {
                  transform: scale(1.5, 1.5);
              }
          </style>
      </head>
      <body>
      <div></div>
      </body>
      </html>
6.4、2D转换综合写法

注意：

  1. 同时使用多个转换，其格式为：transform：translate() rotate() scale()等
  2. 其顺序会影响转换效果（先旋转会改变坐标轴方向）
  3. 当我们同时有位移和其他属性的时候，记得要将位移放到最前

7.CSS3动画

步骤：

  1. 先定义动画

    使用keyFrames（关键帧）定义动画（类似定义类选择器）

    @keyframes动画名称{
        0%{
            width:100px;
        }
        100%{
            width:200px;
        }
    }

    动画序列：

    1. 0%是动画开始，100%是动画完成。这样的规则但就是动画序列
    2. 在**@keyframes**中规定某种CSS样式，就能创建出由当前样式逐渐改为新样式的动画效果
    3. 动画元素是一种样式逐渐变化为另一种样式的效果，可以改变任意多的样式任意多的次数
    4. 请用百分比来规定变化发生的时间，或用关键词“from”和“to”，等同于0%和100%

  2. 再使用（调用）动画

    animation-name:动画名称；

    anmition-duration:持续时间；

7.1、常见动画属性
属性 描述
@keyframes 规定动画
animation 所有动画属性的简写属性，除了animation-play-state属性
animation-name 规定@keyframes动画名称（必须得）
animation-duration 规定动画完成一个周期所花费的秒或毫秒，默认是0（必须得）
animation-timing-function 规定动画的速度曲线：默认是ease
animation-delay 规定动画何时开始，默认是0
animation-iteration-count 规定动画被播放次数，默认是1，还有infinite
animation-direction 规定动画是否在下一周期逆向播放，默认是“normal”，alternate逆播放
animation-play-state 规定动画是否正在运行或暂停，默认是“running”，还有”pause“
可以结合:hover使用
animation-fill-mode 规定动画结束后状态，保持forwards回到起始backwards

动画简写：名称 持续时间 运动曲线 何时开始 播放次数 是否反向 动画起始或结束状态

7.2、速度曲线细节

animation-timing-function：规定动画的速度曲线，默认是“ease”

steps(n)步长，写了steps()就不要写ease和linear

8.CSS 3转换

三维坐标系：

  • x轴：水平向右为正
  • y轴：垂直向下为正
  • z轴：垂直屏幕向外为正
8.1、3D移动

语法：transform:translateZ()
translate3d(x,y,z)

8.2、透视

让我们的网页产生3D效果

perspective：10px，透视加在被观察物体的父盒子上，透视值越小，物体越大

8.3、3D旋转

rotate3d:可以让元素在三维平面内沿着x轴、y轴、z轴或者自定义轴进行旋转
语法：

  • transform:rotateX(45deg);沿着x轴正方向旋转45度

  • transform:rotateY(45deg);沿着y轴正方向旋转45度

  • transform:rotateZ(45deg);沿着z轴正方向旋转45度

  • transform:rotate3d(x，y，z,deg);沿着自定义轴旋转deg度(了解即可)

    上述x，y，z均为矢量

注意：上述方向可通过左上定则，左手大拇指指向对应轴的正方向，其旋转正方向为其余手指的指向的方向

8.4、3D呈现（重要）

transform-style:

  • 控制子元素是否开启3D立体环境

  • tranform-style:flat子元素不开启3d立体空间（默认的）

  • transform-style：preserve-3d:preserve-3d;子元素开启立体空间

  • 代码写个父盒子，受影响的是子盒子

    两面盒子翻转案例.html

    3D导航栏.html

8.5、浏览器私有前缀
  1. 私有前缀
    • -moz-：代表firefox浏览器私有属性
    • -ms-：代表ie浏览器私有属性
    • -webkit-：代表safari、chrome私有属性
    • -o-:代表Opera私有属性

十六、移动web开发

1.浏览器现状

兼容移动端主流浏览器，处理webkit内核浏览器即可

2.视口

就是浏览器显示页面内容的屏幕区域，视口可以分为布局视口、视觉视口和理想视口

2.1布局视口

  • 一般移动设备的浏览器都默认设置了一个布局视口，用于解决早期的PC端页面在手机上显示的问题
  • IOS、Android基本将这个视口分辨率设置为980px，所以PC上的网页大多都能在手机上显示，只不过元素看上去很小，一般默认为手动缩放页面

2.2视觉视口

  • 字面意思，它是用户正在看到的网站的区域。注意：是网站的区域
  • 我们可以通过缩放去操作视觉视口，但不会影响布局视口，布局视口仍保持原来的宽度

2.3理想视口

  • 为了使网站在移动端有最理想的浏览和阅读宽度而设定
  • 理想视口，对设备来讲，是最理想的视口尺寸
  • 需要手动添加meta视口标签通知浏览器操作
  • meta视口标签的主要目的：布局视口的宽度应该与理想视口一致
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scalable=1.0,maximum-scale=1.0,minimum-scale=1.0">

属性：

属性 解释说明
width 宽度设置的是viewport宽度，可以设置device-width特殊值
initial-scale 初始缩放比，大于0的数字
maximum 最大缩放比，大于0的数字
minimum-scale 最小缩放比，大于0的数字
user-scalable 用户是否可以缩放，yes或no（1或0）

3.二倍图

3.1物理像素&物理像素比

  • 物理像素点指的是屏幕显示的最小颗粒，是物理真实存在的
  • 我们开发时候的1px不是一定等于1个物理像素
  • PC端页面，1个px等于1个物理像素的，但是移动端就不一样
  • 一个px的能显示的物理像素点的个数，称为物理像素比或屏幕像素比

3.2多倍图

  • 对于一张50px*50px的图片 直接放到我们的iphone8里会放大两倍 100*100就会模糊
  • 我们可以直接放一个100px*100px图片，然后手动把这个图片缩小为50px*50px
  • 我们准备的图片比我们实际所需要的大小大两倍，这种方式就是2倍图

3.3背景缩放

background-size属性规定背景图像的尺寸

  • 单位：长度 | 百分比 | cover | contain
  • cover把背景图像扩展至足够大，以使背景完全覆盖背景区域
  • contain把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域

4.移动端开发选择

4.1单独制作移动端页面（主流）

通常情况下，网址域名前面加m(mobile)可以打开移动端。通过判断设备吗如果是移动设备打开，则跳转到移动端页面

4.2响应式兼容PC移动端

缺点：制作麻烦、需要花很多时间去解决兼容性问题

5.移动端技术解决方案

5.1移动浏览器

移动浏览器以webkit内核为主，因此我们就考虑webkit兼容性问题
我们可以放行使用H5和CSS3样式
同时我们浏览器的私有前缀只需考虑添加webkit即可

5.2 CSS初始化

移动端CSS初始化推荐使用normalize.css/

  • Normalize.css：保护了有价值的默认值
  • Normalize.css：修复了浏览器bug
  • Normalize.css：是模块化的
  • Normalize.css：拥有详细的文档
    官网地址：http://necolas.github.io/normalize.css/

5.3特殊样式

/*点击高亮我们需要清除，设置为transparent完成透明*/
-webkit-tap-highlight-color:transparent;
/*在移动端浏览器默认的外观在ios上加这个属性才能给按钮和输入框自定义样式*/
-webkit-appearance：none;
/*禁用长按页面时的弹出菜单*/
img,a{-webkit-touch-callout:none;}

6.移动端常见布局

6.1流式布局（百分比布局）

  • 流式布局也称为非固定像素布局

  • 通过盒子的宽度设置成百分比来根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充

  • 流式布局方式是移动web开发使用的比较常见的布局方式

  • max-width：最大宽度

  • min-width：最小宽度

    流式布局.html

7、flex布局

7.1传统布局与flex布局

  • 传统布局：兼容性好、布局繁琐、局限性，不能在移动端很好地布局
  • flex弹性布局：操作方便，布局极为简单，移动端应用很广泛、PC端浏览器支持情况较差、IE11或更低版本不支持或仅部分支持

flex布局.html

7.2布局原理

flex用来为盒状模型提供最大的灵活性，任何一个容器都可以指定flex布局

  • 当我们为父盒子设为flex布局以后，子元素的float、clear和vertical-align属性将失效
  • 伸缩布局=弹性布局=伸缩盒布局=弹性和盒布局=flex布局
    采用flex布局的元素称为flex容器，他所有子元素自动称为容器成员

7.3常见父项属性

  • flex-direction:设置主轴的方向

  • justify-content：设置主轴上的子元素排列方式

    属性值 说明
    flex-start 默认值从头部开始 如果主轴是x则从左到右
    flex-end 从尾部开始排列
    center 在主轴居中对齐（如果主轴是x轴 水平居中）
    space-around 平分剩余空间
    space-between 先两边贴再平分剩余空间（重要）

  • flex-warp：设置子元素是否换行

    nowarp:默认为不换行

    warp:允许换行

  • align-content：设置侧轴上的子元素的排列方式（多行）

    属性值 说明
    flex-start 默认值在侧轴的头部开始排列
    flex-end 在侧轴的尾部开始排列
    center 在侧轴的中间显示
    space-around 子轴在侧轴平分剩余空间
    space-between 子项在侧轴先分布在两头，在平分剩余空间
    stretch 拉伸（默认值）（子盒子不能给高度）

  • align-item：设置侧轴上的子元素排列方式（单行）

    属性值 说明
    flex-start 从上到下
    flex-end 从下到上
    center 挤在一起居中（垂直居中）
    stretch 拉伸（默认值）（子盒子不能给高度）

  • flex-flow：复合属性，相当于同时设置了flex-direction和flex-wrap

7.4align-content和align-items区别

  • align-items适用于单行情况下，只有上对齐、居中、和拉伸
  • align-content适应于换行（多行）的情况下（当行情况下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值
  • 总结就是单行找align-items多行找align-content

7.5flex-flow

复合属性，相当于同时设置了flex-direction和flex-wrap

/*把设置主轴方向和是否换行（换列）简写*/
flex-flow:row warp

7.6flex布局子项常见属性

  • flex子项占的份数

    定义子项目分配剩余空间，用flex来表示占多少份数

  • align-self控制子项在自己的侧轴的排列方式

    允许单个项目有与其他项目不一样的对齐方式，可覆盖align-item属性

    默认值为auto，表示继承父元素的align-items属性，如果没有父元素，则等同于stretch

  • order属性定义子项的排列顺序

    数值小，排列在前，默认为0；

十七、移动Web开发之rem适配布局

1.rem基础

是一个相对单位，类似于em，em是父元素字体大小
不同的是rem的基准是相对于html元素的字体大小
比如，根元素设置font-size=12px，非根元素设置width：2rem；则换成px表示就是24px

rem优势：可以通过修改html里面的文字大小，来改变页面中所有元素的大小

2.媒体查询

  • 只用@media查询，可以针对不同的媒体类型定义不同的样式
  • @media可以针对不同的屏幕尺寸设置不同的样式
  • 当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
@media mediatype and|not|only (media feature){
    CSS-Code;
}

  • 用@media开头 注意@符号

  • mediatype媒体类型

    all用于所有设备、print用于打印机和打印预览、scree用于电脑屏幕、平板电脑、智能手机等

  • 关键字：and：将多个媒体特性连接到一起

    ​ not：排除某个媒体类型

    ​ only：指定某个特定的媒体类型

  • 媒体特性：width：定义输出设备中页面可见的区域

    ​ min-width：定义输出设备中页面最小可见区域宽度

    ​ max-width：定义输出设备中页面最大可见区域宽度

2.1媒体查询+rem实现元素动态大小变化

rem单位是跟着html来走的，有rem页面元素可以设置不同大小的尺寸
媒体查询可以根据不同设备宽度来修改样式
媒体查询+rem就可以实现不同设备宽度，实现页面元素大小的动态变化

media+rem.html

2.2媒体资源的引入

语法：

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

3.Less基础

3.1维护css的弊端

CSS是一门非程序式语言，没有变量，函数，SCOPE(作用域)等概念

  • CSS需要书写大量看似没有逻辑的代码，CSS冗余度是比较高的
  • 不方便维护及扩展，不利于复用
  • CSS没有很好地计算能力
  • 非前端工程师来讲，往往会因为缺少CSS编写经验而很难写出组织良好且易于维护的CSS代码项目

3.2Less介绍

Less是一门CSS扩展语言，也称为CSS预处理器
作为CSS的一种形式的扩展，他并没有减少CSS的功能，而是在现有的CSS语法上，为CSS加入程序式语言的特性
它在CSS的语法基础之上，引入了变量，Mixin（混入），运算以及函数等功能，大大简化了CSS的编写，并且降低了CSS的维护成本。
Less中文网址：http://lesscss.cn/

3.3Less编译

我们需要将Less文件变成css文件后才能使用

3.4less的嵌套

如果遇见（交集|伪类|伪元素选择器）

  • 内层选择器的前面没有&符号，则它被解析为父选择器的后代
  • 如果有&，他就被解析为父元素自身或父元素的伪类

my.less

3.5less运算

任何数字、颜色或者变量都可以参与运算。就是Less提供了+，-，*，（./)算术运算

4.rem适配方案

  1. 让一些不能等比自适应的元素，达到当设备尺寸发生变化的时候，等比例适配当前的设备
  2. 使用媒体查询根据不同设备按比例设置html的字体大小，然后页面元素使用rem做尺寸单位，当html字体大小变化元素尺寸也会发生变化，从而达到等比缩放的适配

4.1 rem+媒体查询+less

动态设置html标签font-size大小

4.2 flexible.js

github地址：https://github.com/amfe/lib-flexible

十八、响应式布局

需要一个父级作为布局容器，来配合子级元素来实现变化效果
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式的变化

响应式开发页面.html

bootstrap前端开发框架

推荐网站：http://boostrap.css88.com/

vw和vh是什么
vw和vh都相对于视口来说的
1vw是当前视口宽度的1/100

vw和百分比的区别
百分比是相对于父元素来说的
vw和vh相对于当前视口来说的

vw和vh怎么用
元素单位直接使用vw和vh就行