前端

HTML

超文本标记语言（超越文本）

网页 <html>                          主体 <body>                               头部 <head>
网页标题 <title>                        段落 <p>                                字体 <font>
换行 <br />                          图片 <img />                            水平线 <hr />
超链接 <a>                           文本标题<h1> --- <h6>                     预格式 <pre>
无序列表 <ul> <li>                    有序列表 <ol> <li>             定义列表 <dl> <dt> <dd>
空格 &nbsp;                          左尖括号 &lt;                             右尖括号 &gt;
表格 <table>                         行 <tr>                                   单元格 <td>
背景颜色 bgcolor                      背景图片 background                        边框 border
宽度 width                            高度height                                颜色 color
图片路径 src                           图片提示字 title                 图片加载失败提示字 alt
字体大小 size                         字体样式 face                           水平对齐 align
链接地址 href                         链接方式 target                      列表符号类型 type
单元格外边距 cellspacing               单元格内边距 cellpadding          单元格垂直对齐 valign
跨行 rowspan                          跨列 colspan表格标题 <caption>                   表格表头<th>                        表格分段头部 <thead>
表格分段主体 <tbody>                 表格分段尾部 <tfoot>                         表单 <form>
表单控件 <input>                    下拉列表 <select> <option>             文本域 <textarea>
框架集 <frameset>                   子框架 <frame>                         内嵌框架 <iframe>
表单提交目的地 action                 表单提交方式 method                        控件类型 type
表单最大输入字符 maxlength             控件默认值 value                           文本框 text
密码框 password                      重置 reset                                  提交submit
隐藏域 hidden                        多选框 checkbox                           单选框 radio
文件上传 file                        普通按钮 button                       图片提交按钮 image
只读 readonly                       下拉默认选中 selected             单选多选默认选中 checked
框架滚动条 scrolling                  框架边框 frameborder               框架固定大小 noresize
框架名 name     内部样式标签 <style>
标签选择器定义及引用方式：  标签{ }
类选择器定义及引用方式 : . 类名{ }
class="类名"
ID选择器定义及引用方式：#ID名{ }
id="ID名"                           文本颜色 color                 文本装饰 text-decoration
文本居中 text-align                  字体大小 font-size                 字体字形 font-family
字体粗细 font-weight                 背景颜色 background-color     背景图片 background-image
背景重复 background-repeat           背景位移 background-position         超链接未访问 a:link
超链接已访问 a:visited                鼠标悬浮超链接 a:hover              超链接点击时 a:active
浮动 float                           边框颜色 border-color             边框样式 border-style
边框粗细 border-width                 外边距 margin                           内边距 padding

head标签一般用于说明一些信息，不直接显示在页面上

body标签一般页面内容，直接显示在页面上

flex弹性布局

ul>li{xxx$}*5(快捷tab)

div标签：容器标签

自定义没有默认样式

表单标签

form表单  action:将表单数据提交到什么地址
提交的方法：get post
get提交方法将数据提交到链接地址上，不安全，效率高  例如：搜素数据
post提交方法将数据放置到请求的body里面，不直接显示，效率低，可以提交表单数据比较大，例如 登录表单
定义输入标签类型：type
提交数据名称：name
提交数据的输入框的值：value
预置文字：placeholder

<form action="https://www.baidu.com/s" method="get"><input type="text" name="wd" placeholder="请输入要搜素的名称" id="" value="" /><input type="submit"  value="搜素" />
</form>

滤镜

居中操作：img{
width: 400px;
height: auto;
display: block;
margin: 0 auto;
}

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">img {width: 400px;height: auto;display: block;margin: 0 auto;transition: all 3s;}/* 鼠标悬浮 */img:hover {-webkit-filter: none;}.img1 {/* 滤镜属性设置灰度  1是百分之百灰 0是正常  3秒过渡  2 曝光*/-webkit-filter: grayscale(1);}.img2 {/* 滤镜属性亮度*/-webkit-filter: brightness(0.5);}.img3 {/* 褐色属性 0是正常1是百分之百褐色*/-webkit-filter: sepia(1);}.img4 {/* 模糊度blur*/-webkit-filter: blur(5px);}.img5 {/* 对比度 、1正常0,没有任何对比度 灰色*/-webkit-filter: contrast(0.5);}.img6 {/* 饱和度0变灰*/-webkit-filter: saturate(2);}.img7 {/* 反相 胶片底色*/-webkit-filter: invert(0);}.img8 {/* 色相旋转360度*/-webkit-filter: hue-rotate(0deg);}.img9 {-webkit-filter: blur(10px) brightness(20) grayscale(1);transition: all 15s;}.img9:hover {-webkit-filter: blur(0) (1) grayscale(1);}</style></head><body><img class="img1" src="img/jjy.jpg" /><img class="img2" src="img/jjy.jpg" /><img class="img3" src="img/jjy.jpg" /><img class="img4" src="img/jjy.jpg" /><img class="img5" src="img/jjy.jpg" /><img class="img6" src="img/jjy.jpg" /><img class="img7" src="img/jjy.jpg" /><img class="img8" src="img/jjy.jpg" /><img class="img9" src="img/jjy.jpg" /></body>
</html>

CSS样式

设置样式的3种方法(层叠样式表)

通过syle标签设置样式
通过style属性设置样式(优先级最高)
通过css文件设置样式

注意：谁在后面优先级高，id比class优先级高继承的样式<浏览器模式的样式<标签样式<class<id<style属性里的样式

提高优先级：!important

.d1{color: pink;font-size: 100px;
}body .d1{color: #FFC0CB;
}
div.d1{color: #FFC0CB;
}既是div又是class

属性选择器

属性名称：单独选择某个属性

[属性名称=属性值]：选择这个属性具体的某个值的元素

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">[data-src]{width: 200px;height: 200px;background: #FFC0CB;}[data-src="a"]{border: 1px solid aquamarine;}</style></head><body><div></div><div></div><div></div><!-- 自定义属性 --><div data-src="a"></div><div data-src="b"></div></body>
</html>

子元素选择器

第几个元素语法

元素：nth-child()

最后一个元素语法

元素：last-child

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><!-- <style type="text/css">/* 选中第二个元素 */li:nth-child(2){background: #FFC0CB;}/* 选中最后一个子元素 */li:last-child{background: #7FFFD4;}</style> --><style type="text/css">/* 继承 *//* .parent div{width: 200px;height: 200px;background: #FFC0CB;} *//* 直接子元素 */.parent>div{width: 200px;height: 200px;background: #FFC0CB;}</style><body></head><ul><li>新闻内容1</li><li>新闻内容2</li><li>新闻内容3</li><li>新闻内容4</li><li>新闻内容5</li></ul><div class="parent"><div class="child"><div class="suzi"></div></div></div></body>
</html>

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">/* 选中后面的元素 */.n+div{width: 200px;height: 200px;background: #FFC0CB;color: #7FFFD4;}</style></head><body><div></div><div></div><div class="n"></div><div>helloworld</div><div>helloworld</div></body>
</html>

伪元素

:before:在元素内部创建一个最前面假的子元素

:after：在元素内部最后面创建一个假的子元素

行元素没有宽高

创建伪元素content必须写

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">#id1 {width: 0;height: 0;/* background: gainsboro; *//* border: 20px solid #7FFFD4; */border-top: 40px solid transparent;border-bottom: 40px solid transparent;border-left: 40px solid yellowgreen;border-right: 40px solid transparent;}.chat {width: 400px;line-height: 100px;padding: 30px;font-size: 30px;background: greenyellow;margin: 0 auto;border-radius: 30px;position: relative;}.chat:before {content: "";display: inline-block;width: 0px;height: 0px;border-top: 40px solid transparent;border-bottom: 40px solid transparent;border-left: 80px solid transparent;border-right: 80px solid greenyellow;position: absolute;left: -160px;top: 40px;}.chat:after {content: "";}</style></head><body><div id="id1"></div><div class="chat">吃饭</div></body>
</html>

浮动

可以解决文字包围图片的问题
可以解决莫名其妙的间隔问题
浮动可以解决向左，向右进行排版对齐

浮动：可以设置元素，脱离正常的文档流，或者向左向右，靠近父元素的边缘或者是设置了浮动的其他元素的边缘靠拢

浮动高度塌陷问题

解决方法

设定父元素高度
清除左右浮动：clear:both
伪元素清除浮动

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.parent{width: 600px;/* height: 600px; */margin: 0 auto;background: lightgreen;/* font-size: 0; */}.child{display: inline-block;width: 200px;height: 200px;background: #7FFFD4;float: left;}/* .clear{clear: both;} */.clear:after{content: "";display: block;clear: both;}</style></head><body><div class="parent clear"><div class="child"></div><div class="child"></div><div class="child"></div><!-- <div class="clear"></div> --></div><p>helloworld</p></body>
</html>

box-shadow属性接收一个由5个参数组成的值，每个值的意思如下：

h-shadow: 水平阴影的位置
v-shadow:垂直阴影的位置
blur：模糊距离
spread：阴影的尺寸
color：阴影的颜色

文字属性

font-size:字体大小
font-family：字体类型
font-weight：字体粗细（100~900）
color：字体颜色text-align
text-align:字体排布（默认向左）
line-height:文字行高
text-shadow:文字阴影  水平偏移距  垂直偏移距 模糊度 阴影颜色

过渡动画

transition-property: width;：过渡属性
transition-duration: ;：过渡周期
transition-timing-function: ease;：整个过渡动画变化的速度 默认值从慢到快在慢下来  linear(平均速度)
transition-delay:设置延迟时间

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><style type="text/css">.d1{width: 200px;height: 100px;background: #90EE90;/* transition: width 2s; */transition-property: width,background-color;transition-duration: 2s,10s;transition-timing-function: ease;/* transition-delay: 3s; */}.d1:hover{width: 800px;height: 100px;background: pink;}</style> </head><body><div class="d1">    </div></body>
</html>

转换

2D动画

transform: translate();：移动
transform: rotate(30deg);：旋转
perspective: 100px;：透明度

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title></title><link rel="stylesheet" type="text/css" href="css/style.css"/><style type="text/css">img{transition: all 3s;}img:hover{-webkit-filter: none;}.img1{-webkit-filter: blur(1px);;}.img2{-webkit-filter: contrast(1);}body{perspective: 1000px;
/*          background: pink; */}.lifang:hover{transform: rotate3d(1,1,1,720deg);}.lifang{width: 200px;height: 200px;margin: 250px auto;position: relative;/* 保留3d */transform-style: preserve-3d;transition: all 8s;animation: rotate linear 10s infinite;}@-webkit-keyframes rotate {              from {transform: rotateX(0deg) rotateY(0deg);}to {transform: rotateX(360deg) rotateY(360deg);}}.page{width: 200px;height: 200px;position: absolute;left: 0;top: 0;/* 设置透明度 */opacity: 0.9;}.front{background-image: url(img/img6.jpg);background-size: 100% auto ;transform: translateZ(100px);}.back{background-image: url(img/img2.jpg);background-size: 100% auto;transform: translateZ(-100px);}.right{background-image: url(img/img.jpg);background-size:auto 100% ;transform: rotateY(90deg) translateZ(100px);}.left{background-image: url(img/img3.jpg);background-size: 100% auto;transform: rotateY(-90deg) translateZ(100px);}.top{background-image: url(img/img5.jpg);background-size: 100% auto;transform: rotateX(90deg) translateZ(100px);}.bottom{background-image: url(img/img4.jpg);background-size: 100% auto;transform: rotateX(-90deg) translateZ(100px);}</style></head><body><section class="showcase"><div class="video-container"><video src="img/video.mov" autoplay muted loop></video><!-- <a href="https://baike.baidu.com/item/%E5%91%A8%E6%9D%B0%E4%BC%A6/129156?fr=aladdin">    <img  class="img2" src="img/zjl.jpg" style="width: 32%; height: auto; float: left; " /></a><a href="https://baike.baidu.com/item/%E8%94%A1%E5%BE%90%E5%9D%A4/8511458?fr=aladdin"><img class="img1" src="img/cxk2.jpg" style="float: right; width: 29%; height: auto;"/></a> --><!-- <img class="img3" src="img/pyy.jpg" style="width: 32%; height: auto; margin-left:100px;"/> --><div class="lifang"><div class="page front"></div><div class="page back"></div><div class="page left"></div><div class="page right"></div><div class="page top"></div><div class="page bottom"></div></div></div></section></body>
</html>

margin顺序：上右下左

输入框

同一个选项name要相同，name值相同为同一选项，只有一个内容会被选中

radio：单选框
checkbox:复选框
label：可绑定选项框id
hidden:隐藏输入框
html{ overflow-x:hidden; overflow-y:hidden;}：去滚动条

定位

固定定位（根据浏览器的位置进行定位,会脱离正常的文档流，必须配合left，right，top，bottom才能定位到浏览器具体位置上）fixed
相对定位（相对于自己当前的位置,不会脱离文档流）relative

注：left就是以左边作为参考系，向右走，以此类推
默认定位（默认情况，不做定位）
绝对定位（相对于设置了父元素或祖先元素进行定位，会脱离正常的文档流）absolute
粘性定位新出模式，一般不兼容）sticky

动画

关键字：animation

animation-name:动画名称
animation-duration：动画周期
animation-timing-function：速度  默认ease 线性linear 也可以设置贝塞尔曲线 ease-in ease-out
animation-delay:延迟时间
animation-iteration-count: 3 ;循环次数  无限次：infinite
animation-direction:模式，方向
默认值:normal    奇数次正常运动，偶数次反方向：alternate    反方向：reverse
偶数次正常运动，奇数次反方向alternate-reverse
animation-fill-mode: forwards;让动画保留最后一帧的效果
animation: lxw 2s steps(16) infinite;一步一步

.id1{width: 200px;height: 200px;background: skyblue;animation: donghua1 3s; }@keyframes donghua1{/* from{}to{} */0%{transform: translate(0,0);}33.3%{transform: translate(500px,0);}100%{transform: translate(500px,400px);}}

字体图标

优点:占用带宽小，不会失真，可以随意调节字体大小和颜色。

图片:比较占用带宽，放大有可能会产生失真的效果，图片改变颜色不方便。

Unicode是字体在网页端最原始的应用方式，特点是：

支持按字体的方式去动态调整图标大小，颜色等等。
默认情况下不支持多色，直接添加多色图标会自动去色。

注意：新版 iconfont 支持两种方式引用多色图标：SVG symbol 引用方式和彩色字体图标模式。（使用彩色字体图标需要在「编辑项目」中开启「彩色」选项后并重新生成。）

第一步：拷贝项目下面生成的 @font-face

@font-face {font-family: 'iconfont';src: url('iconfont.woff2?t=1631457828849') format('woff2'),url('iconfont.woff?t=1631457828849') format('woff'),url('iconfont.ttf?t=1631457828849') format('truetype');
}

第二步：定义使用 iconfont 的样式

.iconfont {font-family: "iconfont" !important;font-size: 16px;font-style: normal;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;
}

第三步：挑选相应图标并获取字体编码，应用于页面

<span class="iconfont">&#x33;</span>

“iconfont” 是你项目下的 font-family。可以通过编辑项目查看，默认是 “iconfont”。

兼容性支持IE6以上

font-class 引用

font-class 是 Unicode 使用方式的一种变种，主要是解决 Unicode 书写不直观，语意不明确的问题。

与 Unicode 使用方式相比，具有如下特点：

相比于 Unicode 语意明确，书写更直观。可以很容易分辨这个 icon 是什么。
因为使用 class 来定义图标，所以当要替换图标时，只需要修改 class 里面的 Unicode 引用。

使用步骤如下：

第一步：引入项目下面生成的 fontclass 代码：

<link rel="stylesheet" href="./iconfont.css">

第二步：挑选相应图标并获取类名，应用于页面：

<span class="iconfont icon-xxx"></span>

兼容性IE8以上含有伪元素

Symbol 引用

这是一种全新的使用方式，应该说这才是未来的主流，也是平台目前推荐的用法。相关介绍可以参考这篇文章这种用法其实是做了一个 SVG 的集合，与另外两种相比具有如下特点：

支持多色图标了，不再受单色限制。
通过一些技巧，支持像字体那样，通过 font-size, color 来调整样式。
兼容性较差，支持 IE9+，及现代浏览器。
浏览器渲染 SVG 的性能一般，还不如 png。

使用步骤如下：

第一步：引入项目下面生成的 symbol 代码：

<script src="./iconfont.js"></script>

第二步：加入通用 CSS 代码（引入一次就行）：

<style>.icon {width: 1em;height: 1em;vertical-align: -0.15em;fill: currentColor;overflow: hidden;
}</style>

第三步：挑选相应图标并获取类名，应用于页面：

<svg class="icon" aria-hidden="true"><use xlink:href="#icon-xxx"></use>
</svg>

兼容性IE9以上

弹性布局

弹性容器：设置了display：flex这个元素为弹性容器，里面的子元素会按照弹性布局的方式进行布局

弹性子元素：设置了display：flex这个元素为弹性容器的直接子元素

弹性主轴方向：默认主轴方向从左到右：flex-direction: row;行按比例压缩

主轴

flex-direction：row:从左到右
column :从上到下
row-reverse:从右到左
column-reverse:从下到上

主轴内容分布

flex-start:向主轴的开始位置靠拢
center:居中
justify-content: flex-end;向结束位置靠拢
justify-content: space-around;平均分布 两边有间距，是中间的一半
justify-content: space-between;平均分布，两边没有间距
justify-content: space-evenly;平均分布，两边和中间间距一样

侧轴内容分布

align-items: flex-start;向侧轴的开始位置靠拢
align-items: stretch;默认值 拉伸  如果设置高度，此拉伸无效

弹性换行

flex-wrap: nowrap;默认不换行
align-content: flex-start;侧轴多行分布

排序问题

使用order number 默认从小到大设置在子元素上

单独设置子元素侧轴的排布

align-self: center;子元素居中

移动端响应式

媒体查询

设定小于600px时的样式
@media only screen and (max-width:600px) {.d1{width: 100%;}}@media only screen and (min-width:600px) and (max-width:1200px){.d1{width: 50%;background: pink;}}

vw:viewport width:100vw=100%viewport width

margin：上左下右

单位

浏览器默认像素16px

px:像素单位

em:相对单位 2em=2*16px 相对于父元素的字体单位

rem:相对单位，相对于根（html）

vw:视窗的宽度 viewport 百分比宽度度 100vw

vh:视窗高度 viewport 百分比高度 100vh

tween;平均分布，两边没有间距
justify-content: space-evenly;平均分布，两边和中间间距一样


侧轴内容分布

align-items: flex-start;向侧轴的开始位置靠拢
align-items: stretch;默认值拉伸如果设置高度，此拉伸无效


弹性换行

flex-wrap: nowrap;默认不换行
align-content: flex-start;侧轴多行分布


排序问题使用order number 默认从小到大  设置在子元素上单独设置子元素侧轴的排布

align-self: center;子元素居中

移动端响应式媒体查询

设定小于600px时的样式
@media only screen and (max-width:600px) {
.d1{
width: 100%;
}
}
@media only screen and (min-width:600px) and (max-width:1200px){
.d1{
width: 50%;
background: pink;
}
}

vw:viewport width:100vw=100%viewport width


margin：`上左下右`# 总结[外链图片转存中...(img-azFUEBgi-1632282800791)][外链图片转存中...(img-CF5whxFW-1632282800793)][外链图片转存中...(img-06d8jfRl-1632282800794)]## 单位浏览器默认像素16pxpx:像素单位em:相对单位  2em=2*16px 相对于父元素的字体单位rem:相对单位，相对于根（html）vw:视窗的宽度  viewport  百分比宽度度  100vwvh:视窗高度     viewport    百分比高度  100vh

HTML5基础知识，3D动画效果实现，定位，弹性布局以及CSS样式的设定,响应式，移动端相关推荐

php 3d animation,如何用HTML5的Canvas制作3D动画效果
HTML5的诞生给web前端界带来了不小轰动,像什么动画旋转.图片滑块.图片轮播等等这些3D特效,也引发了不少朋友想要学习HTML5的好奇心.最近我一直在做canvas动画效果,发现canvas这个东 ...
7 款基于 HTML5 Canvas 的超炫 3D 动画效果
在以前,想要在浏览器中实现3D动画效果是非常困难的,但是自从HTML5诞生之后,这就变得十分简单了.遗憾的是,目前的浏览器对3D渲染效果还不是非常理想,尤其是渲染速度,可能用chrome和safari ...
【web前端特效源码】使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件
b站视频演示效果: [web前端特效源码]使用HTML5+CSS3制作一个会促销广告滚动字幕3D动画效果~~适合初学者~超简单~ |前端开发|IT软件效果图: 完整代码: <!DOCTYPE ...
HTML2d动态效果图,html5+css3实现2D-3D动画效果实例
html5+css3实现2D-3D动画效果实例主要实现的功能就是一些2D.3D的动画效果,如平移.缩放.旋转等等. 文章目录 html5+css3实现2D-3D动画效果实例 2D变换 3D变换案例 ...
html5 相册翻转效果,HTML5 css3：3D旋转木马效果相册
这篇博客的目的是因为上篇HTML5 CSS3专题诱人的实例 CSS3打造百度贴吧的3D翻牌效果中有个关于CSS 3D效果的比较重要的知识点没讲到,就是perspective和tranlateY 效果 ...
html如何实现3d动画,基于webGL和HTML5的网页3D动画的设计与实现.pdf
ISSN 1009-3044 E-mail: eduf@ 第卷第期年月 7 28 (2011 10 ) 与技术 Computer Knowledge and Technology 电脑知识与技 ...
android 动画x轴旋转,Android Roate3dAnimation实现围绕y轴竖直方向或者绕x轴方向旋转的3d动画效果...
概要: ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ Roate3dAnim ...
html5基础知识文档,HTML5基础知识（1）
原标题:HTML5基础知识(1) html5是万维网的核心语言.标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改.2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力, ...
HTML5 基础知识
HTML5 基础知识什么是 HTML? HTML 是一种超文本标记语言,"超文本"就是指页面内可以包含图片.链接.深职音乐.视频.程序等非文字元素 HTML 不是一种编程语言 H ...

HTML5基础知识，3D动画效果实现，定位，弹性布局以及CSS样式的设定,响应式，移动端

前端