HTML5和CSS3基础总结

HTML5

建立在html4的基础上，新增了一些有语义的标签，新增了一些api(application programming interface) 应用程序接口，本地存储，地理位置，绘制图形canvas，音频标签，视频标签

1.h5新增语义标签

<header>头部标签</header>
<nav>导航标签</nav>
<section>主体
	<aside>侧边栏</aside>
	<article>文章标签</article>
</section>
<footer>底部标签</footer>

2.h5新增标签属性

1./* 禁用属性，disabled*/
<input type="text" disabled="disabled"> 

2.<!-- 自动获取焦点 autofocus -->
<input type="text" autocus="autofocus">

3.<!-- 非空验证 required -->
<input type="text" required="required">

4. 浏览器自动补全 autocomplete(off/on) 
 off默认值
 on 要配合name属性使用
33<form action="http:www.baidu.com"> 
 	<input type="text"  autoocomplete="on" name="eifht">
</form>

3.h5表单新增类型

input 新增type值

文本框：
		email  	邮箱类型，提交时进行邮箱验证
.		
		url     网址，提交的时候进行验证
		
		number  数字类型，  属性 max、min、step 
		
		datetime-local   本地时间
		
		data 选择日期 年月日
		
		month		选择月份
		
		week 		周类型
		
		day  		选择天
		
		
		search	搜索框

4.h5音频新增类型

音频标签：
	audio
	source 多个文件
	属性：
		src 音频路径
		controls  控制器面板
		autoplay  自动播放
		loop 	  循环播放
	单个文件引入方式：
	<audio src = "music/yinyue.ogg" controls="controls"  autoplay="autoplay" loop="loop">	</audio>
	
	多个文件引入方式，当文件不被识别时，继续向下识别
	<audio controls="controls" autoplay="autoplay" loop="loop">
			<source src="music/yinyue.ogg"></source>
			<source src="music/yinyue.mp3"></source>
	</audio>	

5.h5视频新增类型

视频标签的单个和多个文件以及属性的方式和音频标签一样

单文件：
<video src = "music/yinyue.ogg" controls="controls"  autoplay="autoplay" loop="loop">	</video>

多文件：
<video controls="controls"  autoplay="autoplay" loop="loop">
		<source src="video/movie.webm"></source>
		<source src="video/movie.ogg"></source>
		<source src="video/movie.MP4"></source>
</video>

CSS3

选择器

1.交集选择器

li.open{}
.item.active{}
ul li.current{}

2.关系选择器

.news-list li{}		后代选择器

.news-list>li{}		子代选择器

.one+span{}  		相邻兄弟选择器 ：紧挨着的下一个兄弟元素
	
.active~p{}			通用兄弟选择器: .one 后面的所有兄弟p元素

3.属性选择器

1.有title属性的
ul li[title]{
	color:blue;
}

2.有class属性的
ul li[class]{			
	color:red;
}

3.class属性=box的
ul li[class = "box"]{}

4.class属性带*号包含box
ul  li[class *= "box"]{
	color:red;
}

5.class属性值以box开头
ul li[class ^="box"]

6.class属性值以box结束
ul li[class $= "box"]{}

7.class属性值是独立单词box
ul li[class ~="box"]{}

4.伪类选择器

第一种类型 会受其他标签影响

1.第一个儿子元素li
ul li:first-child{
	
}

2.最后一个儿子元素li受影响
ul li:last-child{}

3.根据位置编号选择
odd：奇数
even: 偶数
表达式：字母必须是n，n从0开始
ul li:nth-child(n){}

ul li:nth-last-child{} 选择器元素必须是所有兄弟元素中的倒数度n个元素



第二种类型：不受其他标签影响:
ul li:first-of-type{}		第一个儿子元素

ul li:last-of-type{}		最后一个儿子元素

ul li:nth-of-type(){}	   选择的元素必须是所有兄弟元素中同标签类型的第n个

ul li:nth-last-of-type{}   选择的元素必须是所有兄弟元素中同标签类型的倒数第n个



.box span:only-child{}	唯一一个子元素

--------------------------------------
.box2:empty{}	内容必须是空，（不能有空格，文本，标签）

:not(selecter) 排除掉复合selecor的元素否定伪类选择器


第三者:状态选择器

docues伪类，获取焦点。表单标签友谊写默认的属性
kuaijiejtab . takelshuxd 
带前缀的属性，都属于测试属性测试属性，
，测试熟悉几个


cheacked伪类，选中标签 

target伪类 目标伪类，当单击内部跳转时，此时跳到的标签就是目标状态

div：target{}

案例：

5.圆角属性

5.1模拟三角形

盒子的边框：相邻两个边框相交形成平分，增大边框大小，把内容区渐变为0，也就是宽高最后吧不显示的三边框设置为透明色

框和三角形是占位置的

5.2圆角属性

圆角单属性：一个值是水平垂直。两个值：第一个水平，第二个垂直

左上： border-top-left-radius:150px;

右上：border-top-right-radius:150px;

右下：border-bottom-right-radius:150px;

左下border-bottom-left-radius:150px;

5.3圆角符合属性

一个值：左上 右上 右下 左下

border-radius：50%

两个值：左上右下 右上左下

border-radius：10px 20px ;

三个值：左上 右上左下 左下

border-radius：10px 20px 30px;

四个值：左上 右上 右下 左下

border-radius：10px 20px 30px 40px;

水平/垂直

椭圆：

border-radius：100px 100px 100px 100px/50px 50px 50px 50px

6.伪元素

在元素的内部，有一前一后两个盒子，分别是before和after两个伪元素

，伪元素默认是行内显示模式

伪元素中的文本是不会被搜索引擎抓取的

7.理解clearfix清除浮动

.clearfix::after{
	content:"";
	display:block;
 	clear:both;
}

8.理解fontclass方式图标字体的实现

9.标准盒子模型和怪异盒子模型

标准盒子模型：box-sizing:content-box

盒子在网页中的尺寸=content+padding+border，当元素设置padding和border后，会撑大盒子才尺寸。

怪异盒子模型（内减模式）：box-sizing:border-box

1.盒子在网页中的尺寸=content+padding+border,当元素设置padding和border后，不会撑大盒子的尺寸，会自动从content区域减去，盒子尺寸不变

2.要给盒子设置固定宽高

阴影

10.文字阴影

1.文字阴影 可以设置多组，用逗号隔开

水平偏移 垂直偏移 模糊程度（强化）颜色

text-shaow: 20px 20px 30px red;

2.文字凹凸效果

凹  text-shaow：-1px -1px 0px #000,1px 1px 0px #fff

凸  text-shaow：-1px -1px 0px #fff,1px 1px 0px #000

3.文字边框

-webkit-text-stroke:0px yellogreen;     粗细	颜色

4.文字裁减

-webkit-background-clip:text;
color:transparent;

11.盒子阴影 可以设置多组用逗号隔开

水平偏移 垂直偏移 模糊程度 扩展（大小） 颜色 向内(inset)

box-shadow:0px 0px 0px 0px red inset,0px,0px 0px blue;

立体球：

				width: 300px;
				height: 300px;
				box-shadow: -30px -34px 100px 0px #000 inset;
				border-radius: 50%;

12.背景属性

1.背景裁减：

background-clip：content-box;

border-box : 从border-box 区域可见
padding-box  从padding 可见


2.背景起始位置：
/* padding（默认值） 	 起始位置在padding区域
   border-box  			起始位置在border区域
   content-box 			起始位置在content区域
*/
background-origin:padding-box;

3.背景缩放：
图片沿着盒子的最长边铺满，为了保证图片不变形，会截掉一部分
background-size：cover；

图片沿着盒子的最短边铺满，为了保证图片不变形，会有一部分留白
background-size:contain;

4.滚动背景scroll：
背景图默认在盒子的左上，当滚动滚动条时，盒子会随着页面滚动，背景图会随着盒子移动
background-attachment：scroll；
5.固定背景fixed：背景图的参考点永远是浏览器
background-attachment：fixed；

12.1背景案例

设置图片高度，居中center
大背景图居中
.one{
	heigth:956px;
	background:ulr(img)no-repet cneter 0;
}

12.2模糊背景

/*  过滤器 filter
	模糊度 blur(5px) 
    黑白网页 grayscale(100%)
 */
filter：blur(0px);
filter:grayscale(100%)
overflow:hidden;
//单独给图片加模糊

13.过渡属性

• 过渡;设置css的属性值，在单位时间内，从起始值到达结束值的过程，就是过渡

• 过渡的单属性

• 过渡的属性：宽度过渡(能过渡的属性背心是有数值变换的)
  transition-property:width;

• 过渡的时间 单位：秒 s 或者 毫秒ms 1秒=1000毫秒：
  transition-duration: 2s;

• 过渡的方式： http://cubic-bezier.com/

  transition-timing-function: linear;
  linear:线下过渡。等同于贝塞尔曲线(0.0,0.0,1.0,1.0)
  ease：平滑过渡。等同于贝塞尔曲线(0.25,0.1,0.25,0.1)
  ease-in:由慢到快。等同于贝塞尔曲线(0.42,0,1.0,1.0)
  ease-out:由快到慢。等同于贝塞尔曲线(0,0,0.58,1.0)
  ease-in-out:由慢到快在到慢。等同于贝塞尔曲线(0.42,0,0.58,1.0)

• transition-delay过渡的延迟时间

  ​ 单位 秒 s 或者 毫秒ms 1秒=1000毫秒

  ​ transition-delay:100ms;

​ 过渡的复合属性

​ 过的的属性 过渡的时间 过渡的方式 延迟时间

	transition: all 2s	ease-in-out 1s;

transiton-property

14.渐变

14.1.线性渐变

线性渐变：沿着一条轴线，背景色从某一个颜色值过渡到另一个颜色，渐变最少是两种颜色

• to top 由下至上
• to bottom 由上至下
• to left 由右至左
• to right 由左至右
• to left top 右下到左上
• to left bottom 左上到右下
• to right top 左下到右上
• to right bottom 右上 到左下

background-image：linear-gradient(to bottom,red ,yellow,blue);
//deg 角度可以为负
background-image:linear-gradient(45deg,red ,yellow,blue);

//  从0px-50px是red，从50px-100px是red到yellow渐变，从100px-150px是yellow到blue的渐变
	从150px-300px是blue
完整的：	
background-image:linear-gradinet(to right,red 0px ,red 50px,yellow 100px,blue 150px,blue 300px);
简写：
background-image:linear-gradinet(to right,red 50px,yellow 100px,blue 150px);

方向直线的百分比：
 从0%-25%是red，从25%-50%是red到yellow渐变，从50%-80%是yellow到blue的渐变
从80%-100%是blue
background-image:linear-gradinet(to right,red 25%,yellow ,blue 150px);

width：auto； 去掉父元素的宽度值，进行通栏

14.2重复线性渐变

将线性渐变设置的颜色位置值进行一个重复平铺

background-image：repeat-linear-gradient(to right,red 30%,yellow 50%,blue 70%);

14.3径向渐变 radial-gradinet()

background-image：repeat-radial-gradient(to right,red 30%,yellow 50%,blue 70%);

从圆心沿着半径进行从某个颜色的值过渡到某个颜色的值

circle 圆 正方形默认是圆，只能是圆

ellipse 椭圆 长方形默认是椭圆

半径长度：

closest-side：指定径向渐变的半径长多为从圆心到离圆心最近的边

closest-corner: 指定径向渐变的半径长度为从圆心到离圆心最近的角

farthest-side:指定径向渐变的半径长度为从圆心到离圆心最远的边

farthest-corner: 指定径向渐变的半径长度为从圆心到离圆心最远的角

数值和百分比的用法和线性渐变一样

14.4重复径向渐变

background-image;repeating-radial-gradient(ren 50px ,yellow 100px,blue 150px)

/*  圆形	半径长度	圆心位置	，颜色 数值.......*/
backround-image:radial-gradient(circle farthest-corner at center center,red 30%,yelllow 50%,blue 80%);

响应式和媒体查询

1.圣杯布局、双飞翼布局

2.媒体查询

可以检查当前窗口尺寸的变换，根据条件进行布局，本质还是css属性，遵循css的特性

@media：关键字，定义窗口尺寸的条件

min-width:最小宽度 大于等于800px

@media(min-width:800px){
	
}
1. screen 彩屏设备
2. and 连接条件的关键字，and关键字前后至少各有一个空格
	@media screen and (min-width:768px) and (max-width:900px){
		.one{
			width:300px;
			height:300px;
			background:red;
			}
		}

2.横竖屏
landscape	横屏
portrait	竖屏

flex弹性布局

弹性布局：弹性盒子 伸缩布局 伸缩盒子 flex布局

1.弹性布局是父元素和子元素之间的关系（主轴）

父元素：是弹性空间

子元素：是弹性元素，弹性项

主轴：默认主轴是水平方向

侧轴（交叉轴，垂轴，辅轴）：默认是垂直方向

弹性盒子只能是父元素和子元素的关系，不能跨带开启弹性盒子

 <ul class="list">
        <li>
            <a href="">
                <i class="fa fa-book"></i>
                <span>My&nbsp;Courses</span>
            </a>
        </li>
        <li>
            <a href="">
                <i class="fa fa-star"></i>
                <span>My&nbsp;Courses</span>
            </a>
        </li>
        <li>
            <a href="">
                <i class="fa fa-bookmark"></i>
                <span>My&nbsp;Courses</span>
            </a>
        </li>
        <li>
            <a href="">
                <i class="fa fa-download"></i>
                <span>My&nbsp;Courses</span>
            </a>
        </li>
    </ul>
  

  ul{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    li{

        width: 326/40rem;
        height: 104/40rem;
        background-color: #f97053;
        border-radius: 13px;
        margin-top: 24/40rem;
    }
    a{
        display: flex;		//a作为父元素开启弹性盒子
        width: 100%;
        height: 100%;
        font-size: 30/40rem;
        color: #ffffff;
        align-items: center;  //设置子元素的排列方式，因为i，span是单行所以用align-items
        
        i,span{
            margin-left: 37/40rem;
            margin-right: 34/rem;
        }
    }
}

1.1父元素中的常见属性

1.flex-direction:row; 设置主轴方向

• display：flex;  开启弹性盒子
  
  
  flex-direction:row;	设置主轴方向
  		1. row(默认值)：主轴是水平方向，左是开始，右是结束，看上去像是左浮动，侧轴是垂直方向
  					上是开始，下是结束
  		2. row-reverse：主轴是水平方向，左是结束，右是开始，看上去像是右浮动，侧轴是垂直方向
  					上是开始，下是结束
  		
  		3. column：主轴是垂直方向，上是开始，下是结束，看上去像上浮动，侧轴是水平方向，左时候开始，右是结束
  		4. column-reverse:主轴是垂直方向，上是结束，下是开始，看上去像上浮动，侧轴是水平方向，左是结束，右是开始
  

弹性元素在主轴上的位置分布：

2.justify-content：

注意确定好主轴的方向

1.flex-start (默认值)： 居开始

2.flex-end 右对齐（居结束）

3. center 居中

4. space-around (两边留小距离) 空间包含元素，两边留边距，加起来等于完整的一个宽度

5. space-between (两边贴边) 元素包含空间 两端对齐，每个伸缩项之间间隔相等

6. space-evenly （两边距离相等）空间包含元素(每个元素之间是相等的间距) 。两遍距离都相等

弹性元素是否换行 弹性元素当父元素盛不下时，默认不会换行，宽度会压缩

3.flex-wrap

​ 1.nowrap(默认值)：不换行，弹性元素宽度超出父元素时，会将尺寸压缩

​ 2.wrap： 向下换行，弹性元素宽度超出父元素时，不会压缩尺寸，会换行,弹性元素的行数会将的父元素的(宽度或者高度)分成对应的行数，每行元素默认都是当前行侧轴方向居开始的位置

​ 3.wrap-reverse:方向换行(向上换行)

.box2{
	width:1500px;
	height:1500px;
	border:1px solid brown;
	margin-top:15px;
	display:flex;
	flex-wrap:wrap;
	}

​

4.flex-flow：

flex-flow属性是flex-direction和flex-wrap属性的复合属性

flex-flow：row wrap；
//设置主轴为x轴， 换行

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-iCx5hbr6-1597157585014)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20200809140757930.png)]

2.侧轴

1.align-items属性

设置侧轴上的子元素排列方式 (单行，主轴是一行时)

该属性是控制侧轴（默认是y轴）上的排列方式，在子项为单项的时候使用

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JNAE4k3Q-1597157585017)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20200809232455079.png)]

1. flex-start（默认值）：默认从上到下 ，在设置宽高时是默认值

2. flex-end 从下到上

3. center 垂直居中

4. stretch（默认值）： 拉伸（子元素项的高度扩大）再给弹性元素设置固定宽高时不起作用（不设置宽高时是默认值）

   ​ 主轴是水平方向，侧轴是垂直方向，在不设置固定高度时，高度跟弹性元素的当前行的高度一样

   ​ 主轴是垂直方向，侧轴是水平方向，在不设置固定宽度时，宽度跟弹性元素的当前行的宽度一样

侧轴居中
align-items:center

**弹性盒子水平垂直居中让主轴和侧轴都居中**
justify-content：center；
align-items：center；

2.align-content 设置侧轴上的子元素的排列方式

整体和justify-content是一样的

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-c7oLeKTZ-1597157585019)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20200809234925875.png)]

flex-wrap：wrap；  换行
因为用了换行，此时我们侧轴上控制子元素的对齐方式我们用align-content

align-content;center;

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-h0Jviltl-1597157585021)(C:\Users\hp\AppData\Roaming\Typora\typora-user-images\image-20200809235134486.png)]

3.常见子项属性，弹性元素的排序

1.flex

flex：number；份数
flex-grow：

分配剩余空间，用flex表示占多少份

2.align-self

控制子项在侧轴上的方向

当设置align-content属性时，align-items和align-self不起作用

属性值

1.flex-end：

2.order:设置order属性的弹性元素会排在没写order属性元素的后面

弹性元素的压缩率(收缩因子)

flex-shrink：2

1份的数值 = 超出部分（200）/总份数

移动端适配

1.单位

1.em

1em等于一个字号大小

2.rem

1rem是html根标签1个字号的大小

3. vw

1vw = 当前屏幕宽度的1%

在750px屏幕下：

1vm = 7.5px;

100vw = 750px;

1px = 1vw/7.5px = 0.1333333vw;

60px = 60px * 0.1333333vw = 8vw

在375px屏幕下

0.5px = 0.133333vw

3.1 vw单位结合less结合rem

​ 1.设置视口

​ 2.html{

​ font-size：5.33332vw；

​ }

3.浏览器识别的最小字号

浏览器识别的最小字号：在20020之前浏览器能识别的最小字号是12px，如今浏览器能识别的最小字号是1px

2.视口

视口：移动端，视口的尺寸就是当前屏幕的尺寸

移动设备的视口在出厂时，默认都是980px 。苹果公司提出的，将视口的宽度设置和当前设备的宽度一样

视觉视口visual viewport

用户正在看到的网站区域。注意：网站的区域

理想视口：ideal viewport

meta视口标签

html{
	font-size: 5.3332vw;
}