html_css_提高笔记

---

html5 的新特性

1. html新增的多媒体标签

新的多媒体标签主要包含两个：

1. 音频audio
2. 视频video

使用它们可以很方便的在页面中嵌入音频和视频，不再去使用flash或者其他浏览器插件

01-视频video

video元素支持三种视频格式：尽量使用MP4格式

浏览器	MP4	WebM	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES从 Firefox 21 版本开始Linux 系统从 Firefox 30 开始	YES	YES
Safari	YES	NO	NO
Opera	YES从 Opera 25 版本开始	YES	YES

语法：

<video src="文件地址" controls="controls"></video>

属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则视频在就绪后马上播放。(谷歌：需要添加muted属性)
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
height	pixels	设置视频播放器的高度。
loop	loop	如果出现该属性，则当媒介文件完成播放后再次开始播放。
muted	muted	规定视频的音频输出应该被静音。
poster	URL	规定视频下载时显示的图像，或者在用户点击播放按钮前显示的图像。
preload	preload	如果出现该属性，则视频在页面加载时进行加载，并预备播放。如果使用 “autoplay”，则忽略该属性。
src	url	要播放的视频的 URL。
width	pixels	设置视频播放器的宽度。

02-音频audio

audio 标签定义声音，比如音乐或其他音频流。

目前，audio 元素支持的3种文件格式：MP3、Wav、Ogg。

浏览器	MP3	Wav	Ogg
Internet Explorer	YES	NO	NO
Chrome	YES	YES	YES
Firefox	YES	YES	YES
Safari	YES	YES	NO
Opera	YES	YES	YES

语法：

<audio src="someaudio.wav"></audio>

属性：

属性	值	描述
autoplay	autoplay	如果出现该属性，则音频在就绪后马上播放。
controls	controls	如果出现该属性，则向用户显示控件，比如播放按钮。
loop	loop	如果出现该属性，则每当音频结束时重新开始播放。
src	url	要播放的音频的 URL。

03-多媒体标签总结

1. 音频标签和视频标签使用方式基本一致
2. 浏览器支持情况不同
3. 谷歌浏览器把音频和视频自动播放禁止了
4. 视频标签是重点，经常设置自动播放，不适用controls控件，循环和设置大小属性

2.新增的input类型

属性：

属性值	说明
date:	用于输入日期的控件（年，月，日，不包括时间）
color：	用于指定颜色的控件的控件dao
time：	用于输入不同时区的时间控件
email:	用于编辑email字段
month:	用于输入年月的控件不带时区
number:	用于输入浮点数的控件
url:	用于编辑URL的字段
search:	用于输入搜索字符串的单行文本字段 ，换行会被从输入的值中自动移除
Tel:	用于输入电话号码的控件

week : 用于输入一个由星期-年组成的 日期日期不包括市区

重点记住：number，tel，search三个

3.新增表单属性

属性：

属性	值	描述
required	required	指示输入字段的值是必需的。
*placeholder	text	规定帮助用户填写输入字段的提示。
autofocus	autofocus	规定输入字段在页面加载时是否获得焦点。（不适用于 type=“hidden”）
autocomplete	on/off	规定是否使用输入字段的自动完成功能。
multiple	multiple	如果使用该属性，则允许一个以上的值。

/*可以通过以下方式修改placeholder里面的字体颜色*/
input::placeholder {
    color: red;
}

css3的新特性

现状

1. 新增的css3特性有兼容性问题，ie9+才支持
2. 移动端支持优于pc端
3. 不断改进中
4. 应用相对广泛
5. 主要学习：新增选择器和盒子模型以及其它特性

1. css3新增选择器

更加便捷、更加自由

1. 属性选择器
2. 结构伪类选择器
3. 伪元素选择器

2. 属性选择器

可以根据元素特定属性来选择元素，不借助类或者id选择器

选择符	简介
E[attr]	只使用属性名，但没有确定任何属性值；
E[attr=“value”]	指定属性名，并指定了该属性的属性值；
E[attr*=“value”]	指定了属性名，并且有属性值，而且属值中包含了value；
E[attr^=“value”]	指定了属性名，并且有属性值，属性值是以value开头的；
E[attr$=“value”]	指定了属性名，并且有属性值，而且属性值是以value结束的；

注意：类选择器、属性选择器、伪类选择器，权重为10

3. 结构伪类选择器

选择符	简介
Selector:first-child	匹配符合Selector选择器，且必须是其父元素的第一个子节点的元素。
Selector:last-child	匹配符合Selector选择器，且必须是其父元素的最后一个子节点的元素。
Selector:nth-child(n)	匹配符合Selector选择器，且必须是其父元素的第n个子节点的元素。
Selector:first-of-type	匹配符合Selector选择器，且是与它同类型、同级的兄弟元素中的第一个元素。
Selector:last-of-type	匹配符合Selector选择器，且是与它同类型、同级的兄弟元素中的最后一个元素。
Selector:nth-of-type(n)	匹配符合Selector选择器，且是与它同类型、同级的兄弟元素中的第n个元素。

举例：

/*style*/
ul li:nth-child(2) {
    background-color: #ceffa7;
}
<!--    body-->
<ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
</ul>

01-nth-child(n)

1. n可以是数字，也可以是关键字和公式

2. n如果是数字，就是第n个元素，从1开始

3. n可以是关键字，even偶数，odd奇数

4. n可以是公式，常见公式如下(如果n是公式，从0开始 每次加1 往后计算 这里面必须是n 不能是其他的字母

   超出了元素的个数会被忽略)

公式	取值
2n	偶数
2n+1	奇数
5n	5 10 15
n+5	从第5个开始(包括5)到最后
-n+5	前五个(包括5)

02-nth-child(n)和nth-of-type(n)区别

用法上相同

区别：

1. nth-child(n)对父元素里面的所有子元素排序选择(序号固定)，先找第n个孩子，然后看是否匹配
2. nth-of-type(n)对父元素里面指定子元素进行排序选择，选区匹配select，然后再根据select找第n个孩子

4. 伪元素选择器(重点)

伪元素选择器可以帮我们利用css创建新标签元素，而不需要html标签，从而简化HTML结构

选择符	简介
::before	在元素内部的前面插入内容
::after	在元素内部的后面插入内容

注意：

• before和after创建一个元素，但是属于行内元素
• 新创建的这个元素在文档树中是找不到的，所有称之为伪元素
• 语法：element::before()
• before和after必须有content属性
• 伪元素选择器和标签选择器一样权重为1

01-使用场景

1. 场景1

如果.tudou::before { display:none }

鼠标经过实现显现：.tudou:hover::before { display:block }

2. 场景2

也可以用来做数字图标

3. 场景3：清除浮动

.clearfix::after {
    content: "";
    display: block;
    height: 0;
    clear: both;
    /*不要看见这个盒子*/
    visibility: hidden;
}

5. 盒子模型

css3可以通过box-sizing来指定盒模型，即可指定为content-box、border-box。

分为两种情况：

1. content-box：box盒子大小为width + padding + border(以前默认的)
2. border-box：box盒子大小为width

如果盒子模型为box-sizing:border-box，那么padding和border就不会撑大盒子(前提padding和border不会超过width宽度 )

6. 其他特性(理解)

1. 图片模糊
2. 计算盒子宽度width:cale函数

01-滤镜filter

filter 属性定义元素（通常是 img）的视觉效果（如模糊和饱和度）。

语法：

filter: 函数(); 例如：filter:blue(5px); blur模糊处理 数值越大越模糊

img {
  filter: blue(100%);
}

属性：

滤镜	描述
none	默认值。规定无效果。
blur(px)	对图像应用模糊效果。较大的值将产生更多的模糊。如果为指定值，则使用 0。
brightness(%)	调整图像的亮度。0％ 将使图像完全变黑。默认值是 100％，代表原始图像。值超过 100％ 将提供更明亮的结果。
contrast(%)	调整图像的对比度。0％ 将使图像完全变黑。默认值是 100％，代表原始图像。

02-calc函数

calc()此css函数让你在声明css属性值时执行一些计算

语法：

width:calc(100%-80px);

括号里面可以使用+ - * / 来进行计算

7. 过渡(重点)

过度动画：是从一个状态 渐渐的过度到另外一个状态

经常和hover一起搭配使用

定义：

transition 属性是一个简写属性，用于设置四个过渡属性：

• transition-property
• transition-duration
• transition-timing-function
• transition-delay

语法：

transition: property(要过度的属性) duration(花费的的时间) timing-function(运动曲线) delay(何时开始;

属性：

值	描述
transition-property	规定设置过渡效果的 CSS 属性的名称。如果想要多个属性都变化直接写all
transition-duration	规定完成过渡效果需要多少秒或毫秒。单位(s)必须写
transition-timing-function	规定速度效果的速度曲线。
transition-delay	定义过渡效果何时开始。

transition-duration属性

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-8u4xO20u-1644307944639)(D:\A_study\html-css\study_image\css_过度.png)]

注意：

1. 如果写多个属性用逗号隔开。
2. 谁做过渡给谁加

网站favicon图标

目前主要浏览器都支持favicon.ico图标

1. 制作favicon图标

1. 先切出图片为png文件
2. 将png图片转换成ico文件，在网页www.bitbug.net在线转

2. favaicon图标放到网站根目录下

3. HTML页面引入favaicon图标

在html页面里面的head元素之间引入代码

<link rel="shortcut icon" href=" /favicon.ico" />

网站TDK三大标签SEO优化

SEO 汉译为搜索引擎优化，一种利用搜索引擎的规则提高网站有关搜索引擎内自然排名的方式

目的是对网站进行深度优化，提高网站排名和知名度，获取免费流量

页面必须有三个标签来符合SEO优化：title、description、keyword

1. title网站标签

title不可替代，是内页第一个重要标签，是搜索引擎了解网页的入口和主题归属的最佳判断点

建议：网站名(产品名)-网站介绍

2. description

<!--网站说明-->
<meta name="description" content="">

3. keyword关键字

最好限制6-8个

Web服务器

1. 什么是服务器

服务器是提供计算服务的设备，它也是一台计算器

web服务器一般指网站服务器，放置网站文件

服务器在网站中的位置不同，可分为 本地服务器和远程服务器

01-本地服务器

把自己电脑设置为本地服务器，这样一个局域网内的同学可以访问你的网站

02-远程服务器

远程服务器是通常别的公司为我们提供的一台电脑(主机)，之后可以通过域名访问网站

2. 将自己网站上传到服务器

注意：一般稳定的服务器都是需要收费的，比如：阿里云

免费的远程服务器(免费空间) http://free.3v.do/

步骤：

1. 去免费空间网站注册账号
2. 记录下主机名、用户名、密码、域名。
3. 利用cutftp软件 上传网站到远程服务器
4. 在浏览器中输入域名，即可访问网站

css3 2D转换

转换(transform)是css3中具有颠覆性特征之一，可以实现元素的位移、旋转、缩放效果

1. 移动：translate
2. 旋转：rotate
3. 缩放：scale

1. 二维坐标

横向为x轴，大小从左到右越来越大

纵向为y轴，大小从上到下越来越大

2. 移动translate

01-语法

transform: translate(x,y);或者分开写
transform: translateX(x);
transform: translateY(y);

移动盒子的方法:

1. 定位
2. 盒子外边距
3. 2D转换

02-重点

定义2D转换中的移动，沿x和y轴移动元素

translate最大优点：不影响其他元素的位置

translate百分比单位是相对于自身元素的

对行内标签没有效果

3. 旋转rotate

2D旋转是让元素在2维平台内顺时针旋转或者逆时针旋转

01-语法

transform: rotate(度数);

02-重点

rotate里面跟度数，单位为deg，比如 rotate(45deg)

角度为正时，顺时针；负时，为逆时针

默认旋转中心为元素的中心点

03-转换中心点

语法：

transform-origin: x y;

重点：

注意后面参数x y用空格隔开

xy默认转换中心点是元素的中心点(50% 50%)

还可以给x y设置像素或者方位名词(top bottom left right center)

4. 缩放scale

缩放：可以控制元素放大或者变小

01-语法

transform: scale(x,y);

02-注意

1. 其中x和y用逗号隔开
2. transform: scale(1,1); 宽和高都放大一倍，相对于没有放大
3. transform: scale(2,2); 宽和高放大了2倍
4. transform: scale(2); 相当于scale(2,2);
5. transform: scale(0.5,0.5); 缩小
6. scale缩放的最大优势：可以设置转换中心点缩放，默认以中心点缩放的，而且不影响其他盒子

5. 转换综合写法

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

css3 动画

动画(animation)是css3中颠覆性特征之一，可以设置多个节点精准控制一个或一组动画，常用来实现复杂的动画效果，相比于过度，动画可以实现更多变化，更多控制，连续自动播放等效果

1. 动画基本使用

制作动画分为两步：

1. 先定义动画
2. 在使用(调用)动画

01-定义动画

用keyframes定义动画(类似定义类选择器)

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

动画序列

1. 0%是动画开始，100%是动画完成，这积水动画序列
2. @keyframes中规定某项css样式，就能创建由当前样式逐渐改为样式的动画效果
3. 动画是从一个样式逐渐变化为另一种样式效果，可以任意多的样式任意多的次数
4. 也可以用关键词“from”和“to“，等同于0%和100%

02-使用动画

语法

div {
	animation-name: 动画名称;
	animation-duration: 持续时间;
}

animation语法简写：

animation: name(动画名称) duration(持续时间) timing-function(运动曲线) delay(何时开始) iteration-count(播放次数) direction(是否反向播放);

name，duration属性一定要写

参考：https://www.w3school.com.cn/cssref/pr_animation.asp

属性

值	描述
animation-name	规定需要绑定到选择器的 keyframe 名称。。
animation-duration	规定完成动画所花费的时间，以秒或毫秒计。
animation-timing-function	规定动画的速度曲线。
animation-delay	规定在动画开始之前的延迟。
animation-iteration-count	规定动画应该播放的次数。
animation-direction	规定是否应该轮流反向播放动画。

注意：

1. 简写属性不包含animation-play-state
2. 暂停动画：animation-play-tate: puased; 经常和鼠标经过等其他配合使用
3. 想要动画走回来，而不是直接调回来：animation-direction: alternate;
4. 盒子动画结束后，停在结束位置：animation-fill-mode: forwards;

css3 3D转换

3D转换学习常用的3D位移和3D旋转

主要内容

1. 3D位移：translate3d(x,y,z)
2. 3D旋转：rotate3d(x,y,z)
3. 透视：perspective
4. 3D呈现：transfrom-style

1. 位移translate3d

Z轴正值向外移动(向眼睛移动)，负值向内移动

语法:

transform: translate3d(x,y,z);
transform: translateX(x);
transform: translateY(y);
transform: translateZ(z);//z一般使用px为单位

注意：xyz不能省略，不用就写0

2. 透明perspective(重要)

产生3D效果

1. 模拟人类视觉位置
2. 透视也称为视距：视距是人的眼睛到屏幕的距离
3. 距离视觉点越近成像越大，越远成像约小
4. 透视单位是px

透视观察

​ d：就是视距，视距是一个距离人的眼睛到屏幕的距离

​ z：物体距离屏幕的距离

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-JfmQxKSZ-1644307944640)(D:\A_study\html-css\study_image\css_视距.jpg)]

3. 旋转rotate3d

3D旋转可以沿着x轴、y轴或者z轴旋转

语法：

transform: rotate3d(x,y,z);//了解即可
transform: rotateX(x);
transform: rotateY(y);
transform: rotateZ(z);

左手准则：

1. 左手手指指向轴正方向
2. 其余手指弯曲方向就是该元素沿x轴旋转方向

4. 呈现transform-style

语法：

transform-style: flat; //默认不开启3D立体空间
transform-style: preserve-3d; //开启3D立体空间

浏览器私有前缀

私有前缀是为了兼容老版本写法，比较新版本的游览器无序添加

私有前缀：

1. -moz-：代表firefox浏览器私有属性

2. -ms-：代表ie浏览器私有属性

3. -webkit-：代表safari、chrome浏览器私有属性
   3D效果

4. 模拟人类视觉位置

5. 透视也称为视距：视距是人的眼睛到屏幕的距离

6. 距离视觉点越近成像越大，越远成像约小

7. 透视单位是px

透视观察

​ d：就是视距，视距是一个距离人的眼睛到屏幕的距离

​ z：物体距离屏幕的距离

[外链图片转存中…(img-JfmQxKSZ-1644307944640)]

3. 旋转rotate3d

3D旋转可以沿着x轴、y轴或者z轴旋转

语法：

transform: rotate3d(x,y,z);//了解即可
transform: rotateX(x);
transform: rotateY(y);
transform: rotateZ(z);

左手准则：

1. 左手手指指向轴正方向
2. 其余手指弯曲方向就是该元素沿x轴旋转方向

4. 呈现transform-style

语法：

transform-style: flat; //默认不开启3D立体空间
transform-style: preserve-3d; //开启3D立体空间

浏览器私有前缀

私有前缀是为了兼容老版本写法，比较新版本的游览器无序添加

私有前缀：

1. -moz-：代表firefox浏览器私有属性
2. -ms-：代表ie浏览器私有属性
3. -webkit-：代表safari、chrome浏览器私有属性
4. -o-：代表Opera私有属性