技术标签: css html5 前端 html # 前端基础 css3
前端小白简单总结,参考黑马课程以及其他内容整合,还望各位大佬多多指教~
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改,作为HTML语言,具有新的元素、属性和行为。
以前布局,我们基本用div来做,div对于搜索引擎来说,是没有语义的
header
— 头部标签nav
— 导航标签article
— 内容标签section
— 块级标签aside
— 侧边栏标签footer
— 尾部标签注意
- 这种语义化标签主要针对搜索引擎的
- 这些新标签在页面中可以使用多次
- 在
IE9
浏览器中,需要把这些语义化标签都转换为块级元素- 语义化标签,在移动端支持比较友好
多媒体标签包含两个:
HTML5在不使用插件的情况下也可以原生的支持音频格式文件的播放,当然支持格式是有限的。
<audio src='media/test.mp3 ' controls='controls'></audio>
因为不同浏览器支持不同格式,我们采取的解决方案是我们为这个音频准备多个格式
<!-- 谷歌浏览器把autoplay属性给我们禁用了 -->
<audio controls="controls">
<source src="media/test.mp3" type="audio/mpeg">
<source src="media/test.mp3" type="audio/ogg">
</audio>
您的浏览器不支持audio标签播放音频
<video src='media/video.mp4 ' controls='controls'></video>
<!-- 谷歌浏览器把autoplay属性给我们禁用了 有解决方案:给视频添加静音属性-->
<video muted = "muted" loop = "loop" poster="media/pig.jpg">
<source src="media/move.ogg" type="video/mpeg"/>
<source src="media/move.mp4" type="video/ogg"/>
</video>
您的浏览器不支持video标签播放视频
<ul>
<li>邮箱:<input type="email" /></li>
<li>网址:<input type="url" /></li>
<li>日期:<input type="date" /></li>
<li>时间:<input type="date" /></li>
<li>数量:<input type="number" /></li>
<li>手机号码:<input type="tel" /></li>
<li>搜索:<input type="search" /></li>
<li>颜色:<input type="color" /></li>
<input type="submit" value="提交">
</ul>
<form action="">
用户名:<input type="text" required="required" placeholder="请输入用户名" autofocus="autofocus" name="username" autocomplete="off" >
<input type="submit" value="提交">
上传头像:<input type="file" name="" id="" multiple="multiple">
nth-child 详解
注意:本质上就是选中第几个子元素
n 可以是数字、关键字、公式
n 如果是数字,就是选中第几个
常见的关键字有 even
偶数、odd
奇数
常见的公式如下(如果 n 是公式,则从 0 开始计算)
但是第 0 个元素或者超出了元素的个数会被忽略
nth-child
和 nt-of-type
的区别
nth-child
选择父元素里面的第几个子元素,不管是第几个类型
nt-of-type
选择指定类型的元素
注意事项:
before
和 after
必须有 content
属性before
在内容前面,after 在内容后面before
和 after
创建的是一个元素,但是属于行内元素Dom
中查找不到,所以称为伪元素p {
width: 220px;
height: 22px;
border: 1px solid lightseagreen;
margin: 60px;
position: relative;
}
p::after {
content: '\ea50';
font-family: 'icomoon';
position: absolute;
top: -1px;
right: 10px;
}
过渡动画:是从一个状态渐渐的过渡到另外一个状态,IE9以下不支持,经常和:hover一起搭配使用
语法格式:
transition:要过渡的属性 花费时间 运动曲线 何时开始
属性 | 描述 | CSS |
---|---|---|
transition | 简写属性,用于在一个属性中设置四个过渡属性。 | 3 |
transition-property | 规定应用过渡的 CSS 属性的名称。属性就是你想要变化的 css 属性, 宽度高度 背景颜色 内外边距都可以 。如果想要所有的属性都变化过渡, 写一个all 就可以。 | 3 |
transition-duration | 定义过渡效果花费的时间(必须写单位)。默认是 0。 | 3 |
transition-timing-function | 规定过渡效果的时间曲线。默认是 “ease”。 | 3 |
transition-delay | 规定过渡效果何时开始,可以设置 延迟触发时间。默认是 0,鼠标触发就立即开始。 | 3 |
运动曲线示意图: | ||
样例: |
div {
width: 200px;
height: 100px;
background-color: pink;
/* transition: 要过渡的属性 花费时间 运动曲线 何时开始; */
/* transtion 过渡的意思 这句话写到div里面而不是 hover里面
过渡写到本身上,谁做动画,给谁加*/
transition: width 0.6s ease 0s, height 0.3s ease-in 1s;
}
div:hover {
/* 鼠标经过盒子,我们的宽度变为400 */
width: 600px;
height: 300px
}
transition: all 0.6s; /* 所有属性都变化用all 就可以了 后面俩个属性可以省略 */
常见效果:
按钮变换底色 图片移动 小米效果 (阴影效果) 传智导航栏效果 等等
转换(transform)是CSS3中具有颠覆性的特征之一,可以实现元素的位移、旋转、缩放等效果。
转换(transform)可以简单理解为变形
2D转换是改变标签在二维平面上的位置和形状的一种技术,
2D移动是2D转换里的一种功能,可以改变元素在页面中的位置,类似定位
transform: translate(x, y);
/* 或者分开写 */
transform: translateX(x);
transform: translateY(y);
2D旋转指的是让元素在2维平面内顺时针旋转或者逆时针旋转。
transform: rotate(度数);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>三角形</title>
<style>
div {
position: relative;
width: 249px;
height: 35px;
border: 1px solid #000;
}
div::after {
content: "";
position: absolute;
top: 8px;
right: 15px;
width: 10px;
height: 10px;
border-bottom: 1px solid #000;
border-right: 1px solid #000;
transform: rotate(45deg);
transition: all 0.2s;
}
/* 鼠标经过div 里面的三角旋转 */
div:hover::after {
transform: rotate(225deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如图:
我们可以设置元素转换的中心点
transform-origin: x y;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转案例</title>
<style>
div {
width: 200px;
height: 200px;
border: 1px solid pink;
margin: 100px auto;
overflow: hidden;
}
div::before {
content: "黑马";
display: block;
width: 200px;
height: 200px;
background-color: lightgreen;
transform: rotate(180deg);
transform-origin: left bottom;
transition: all 0.2s;
}
/* 鼠标经过div 里面的before复原 */
div:hover::before {
transform: rotate(0deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如图:
可以放大和缩小,只要给元素添加上了这个属性就能控制它放大还是缩小
transform: scale(x, y);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>图片放大</title>
<style>
div {
overflow: hidden;
float: left;
margin: 10px;
}
div img {
transition: all .4s;
}
div img:hover {
transform: scale(1.1);
}
</style>
</head>
<body>
<div>
<a href="#"><img src="media/scale.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="media/scale.jpg" alt=""></a>
</div>
<div>
<a href="#"><img src="media/scale.jpg" alt=""></a>
</div>
</body>
</html>
结果如图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>分页按钮案例</title>
<style>
li {
float: left;
width: 30px;
height: 30px;
line-height: 30px;
text-align: center;
margin-left: 10px;
margin-top: 20px;
border-radius: 50%;
list-style: none;
border: 1px solid green;
cursor: pointer;
transition: all .4s;
}
li:hover {
transform: scale(1.2);
}
</style>
</head>
<body>
<div>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
</ul>
</div>
</body>
</html>
结果如图:
注意:
动画(animation)是CSS3中具有颠覆性的特征之一,可通过设置多个节点来精确控制一个或一组动画,常用来实现复杂的动画效果。
相比较过渡,动画可以实现更多的变化,更多的控制,连续自动播放等效果。
制作动画分为两步:
@keyframes 动画名称 {
0%{
width: 100px;
}
100%{
width: 200px;
}
}
div{
width: 200px;
height: 200px;
background-color: green;
margin: 100px auto;
/* 调用动画 */
animation-name: 动画名称;
/* 持续时间 */
animation-duration: 持续时间;
}
animation:动画名称 持续时间 运动曲线 何时开始 播放次数 是否反方向 动画起始或者结束的状态;
animation: name duration timing-function delay iteration-count direction fill-mode;
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>热点图</title>
<style>
body{
background-color: #333;
}
.map{
position: relative;
width: 747px;
height: 616px;
margin: 0 auto;
background: url('media/map.png') no-repeat;
}
.city{
position: absolute;
top: 227px;
right: 191px;
}
.tb{
top: 499px;
right: 80px;
}
.dotted{
width: 8px;
height: 8px;
border-radius: 50%;
background-color: #09f;
}
div[class^='pulse']{
position: absolute;
top: 50%;
left: 50%;
width: 10px;
height: 10px;
transform: translate(-50%, -50%);
border-radius: 50%;
box-shadow: 0 0 12px #009dfd;
animation: pulse 1.2s linear infinite;
}
.city .pulse2{
animation-delay: 0.4s;
}
.city .pulse3{
animation-delay: 0.8s;
}
@keyframes pulse {
0%{
}
70%{
/* 用scale会导致阴影也放大 */
/* transform: scale(2); */
width: 40px;
height: 40px;
opacity: 1;
}
100%{
width: 70px;
height: 70px;
opacity: 0;
}
}
</style>
</head>
<body>
<div class="map">
<div class="city">
<div class="dotted">
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
<div class="city tb">
<div class="dotted">
<div class="pulse1"></div>
<div class="pulse2"></div>
<div class="pulse3"></div>
</div>
</div>
</div>
</body>
</html>
结果如图:
如果用scale结果如图:
animation-timing-function:规定动画的速度曲线,默认是ease
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>速度曲线案例</title>
<style>
div{
width: 0;
height: 20px;
background-color: lightgreen;
font-size: 12px;
/* 让文字强制一行显示 */
white-space: nowrap;
/* steps就是分几步来完成动画 */
animation: move 5s steps(8) forwards;
}
@keyframes move {
0%{
width: 0;
}
100%{
width: 100px;
}
}
</style>
</head>
<body>
<div>
是日前端欢迎您!
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>奔跑的熊</title>
<style>
body{
background: url('media/bg1.png') no-repeat;
animation: bgback 6s steps(8) infinite;
}
div{
position: absolute;
width: 200px;
height: 100px;
background: url('media/bear.png') no-repeat;
animation: bear 0.4s steps(8) infinite, move 2s steps(8) forwards;
}
@keyframes bear {
0%{
background-position: 0 0;
}
100%{
background-position: -1600px 0;
}
}
@keyframes move {
0%{
left: 0;
top: 200px;
}
100%{
left: 50%;
top: 200px;
transform: translateX(-50%);
}
}
@keyframes bgback {
0%{
background-position: 0 0;
}
100%{
background-position: -1600px 0;
}
}
</style>
</head>
<body>
<div></div>
</body>
</html>
结果如图:
三维坐标系其实就是指立体空间,立体空间是由3个轴共同组成的。
3D移动在2D移动的基础上多加了一个可以移动的方向,就是z轴方向
在2D平面产生近大远小视觉立体,但是只是效果是二维的
transform: translateZ(100px):仅仅是在Z轴上移动,有了透视,就能看到translateZ引起的变化了。
3D旋转指可以让元素在三维平面内沿着x轴,y轴,z轴或者自定义轴进行旋转。
语法
左手准则
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D导航栏</title>
<style>
body {
perspective: 400px;
}
.box {
position: relative;
width: 300px;
height: 300px;
margin: 200px auto;
transition: all .5s;
/* 让背面的盒子保留立体空间,给父级添加 */
transform-style: preserve-3d;
}
.front,
.back {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
border-radius: 50%;
font-size: 24px;
text-align: center;
line-height: 300px;
}
.front {
background-color: lightcoral;
z-index: 1;
}
.back {
background-color: lightgreen;
/* 像手机一样背靠背旋转 */
transform: rotateY(180deg);
}
.box:hover {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div class="box">
<div class="front">是日前端</div>
<div class="back">在这里等你</div>
</div>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>3D导航栏</title>
<style>
li {
list-style: none;
perspective: 500px;
}
ul {
margin: 100px;
}
ul li {
float: left;
width: 100px;
height: 50px;
margin-left: 10px;
}
.box {
position: relative;
width: 100%;
height: 100%;
transition: all .5s;
transform-style: preserve-3d;
}
.front,
.bottom {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
line-height: 50px;
text-align: center;
}
.front {
background-color: lightgreen;
transform: translateZ(25px);
}
.bottom {
background-color: yellowgreen;
/* 这里的x轴一定是负值 */
/* 如果有移动或者其他样式,必须先写移动 */
transform: translateY(25px) rotateX(-90deg);
}
.box:hover {
transform: rotateX(90deg);
}
</style>
</head>
<body>
<ul>
<li>
<div class="box">
<div class="front">是日前端</div>
<div class="bottom">在这里等你</div>
</div>
</li>
<li>
<div class="box">
<div class="front">是日前端</div>
<div class="bottom">日拱一卒</div>
</div>
</li>
<li>
<div class="box">
<div class="front">是日前端</div>
<div class="bottom">在这里等你</div>
</div>
</li>
</ul>
</body>
</html>
结果如图:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>旋转木马</title>
<style>
body{
perspective: 800px;
}
section{
position: relative;
width: 300px;
height: 200px;
margin: 100px auto;
transform-style: preserve-3d;
animation: rotate 8s linear infinite;
background: url(images/pig.jpg) no-repeat;
}
section div {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: url(images/dog.jpg) no-repeat;
}
section div:first-child{
transform: rotateY(0deg) translateZ(300px);
}
section div:nth-child(2){
transform: rotateY(60deg) translateZ(300px);
}
section div:nth-child(3){
transform: rotateY(120deg) translateZ(300px);
}
section div:nth-child(4){
transform: rotateY(180deg) translateZ(300px);
}
section div:nth-child(5){
transform: rotateY(240deg) translateZ(300px);
}
section div:last-child{
transform: rotateY(320deg) translateZ(300px);
}
section:hover{
animation-play-state: paused;
}
@keyframes rotate {
0%{
transform: rotateY(0);
}
100%{
transform: rotateY(360deg);
}
}
</style>
</head>
<body>
<section>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</section>
</body>
</html>
结果如图:
HTML结构:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>01.《阴阳师》二维码</title>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="scan">
<img class="qrcode" src="images/57b280b496dee47507111c56NRN73rVj.png" alt="">
<img class="line" src="images/line_dd0b705.png" alt="">
</div>
</body>
</html>
CSS样式:
*{
margin: 0;
padding: 0;
}
body{
padding: 50px;
}
.scan{
position: relative;
/* margin: 50px; */
width: 145px;
height: 297px;
background: url(../images/index_z_71df05e.png) 0 0 no-repeat;
}
.qrcode{
position: absolute;
display: block;
left: 19px;
top: 45px;
width: 107px;
}
.line{
position: absolute;
left: 9px;
top: -3px;
width: 120px;
height: 15px;
-webkit-animation: sao 4s linear infinite;
-moz-animation: sao 4s linear infinite;
-ms-animation: sao 4s linear infinite;
animation: sao 4s linear infinite;
}
@keyframes sao{
0%{
top: 42px;
}
50%{
top: 145px;
}
100%{
top: 42px;
}
}
结果如图:
浏览器私有前缀是为了兼容老版本的写法,比较新版本的浏览器无需添加。
配套资料请关注公众号“是日前端”,输入关键词"html5"或者“css3”获取相关资源
文章浏览阅读122次。16、interface中的成员变量默认为public static final类型,方法只能是public(默认为public)17、内部类访问外部类成员:Outer.this.num;18、一道有趣的题目 使用内部类实现该程序。(答案附在本文末尾)interface Inter { void show();}clas..._public
文章浏览阅读1k次。智慧交通正在成为新基建的主力军,伴随着新能源汽车和汽车融入智能制造产业链的结构性深化,智慧交通产业构架成为中国经济发展进入新常态下融入碳中和、碳达峰的绿色发展和以新基建为代表的的中国智能制..._智能交通 智慧交通 芯片
文章浏览阅读1.4k次。阿里云服务器在docker上部署MySQL(图文详细教程)设置容器、运行容情做数据挂载、端口映射、目录映射。_阿里云服务器docker安装数据库
文章浏览阅读1.5k次。描述在线性代数、计算几何中,向量点积是一种十分重要的运算。给定两个n维向量a=(a1,a2,…,an)和b=(b1,b2,…,bn),求点积a·b=a1b1+a2b2+…+anbn。输入第一行是一个整数n。1 <= n <= 1000。第二行包含n个整数a1,a2,…,an。第三行包含n个整数b1,b2,…,bn。相邻整数之间用单个空格隔开。输出一个整数,即两个向量的点积结果。样例输入31 4 62 1 5样例输出36n = int(input())s = li_python 给定两个n维向量a=(a1,a2,...,an)和b=(b1,b2,...,bn),求点积a·b=a1b1+a2b
文章浏览阅读3.8k次。描述输入三个整数或小数,输出它们的和如果结果是整数,就保留小数点后面一位的0(用python写则不用特别处理,程序自然会如此)输入输入三个整数或小数输出和样例输入1 2.3 4.7样例输出8.0代码:s = input().split()a = float(s[0])b = float(s[1])c = float(s[2])print(a+b+c)..._python如果三个数全部是整数,则结果也是整数。如果三个数中有小数,则结果
文章浏览阅读627次。//////////////转载:雷神博客http://blog.csdn.net/leixiaohua1020/article/details/40525591/////////////本文记录SDL播放视频的技术。在这里使用的版本是SDL2。实际上SDL本身并不提供视音频播放的功能,它只是封装了视音频播放的底层API。在Windows平台下,SDL封装了Direct3D_用c语言调用sdl2播放yuv
文章浏览阅读999次。Activity页public class MainActivity extends AppCompatActivity { private ListView mlv1; @Override protected void onCreate(Bundle savedInstanceState) { super.onCreate(savedInstanceState); setContentView(R.layout.activity_main);_zy-2021-10-21-0119
文章浏览阅读1.6k次。1,动态设置事件: function F1(){ alert('In F1'); } function F2{ alert(In F2); }_javascript curtd
文章浏览阅读685次。R语言ggplot2可视化:使用ggplot2可视化散点图、使用labs参数自定义X轴的轴标签文本(customize X axis labels)_r语言中的labs()的用法
文章浏览阅读4.1k次。今天讨论班一个师姐讲到L1 norm还有L2 norm 的regularization问题,还有晚上和一个同学也讨论到这个问题,具体什么时候用L1,什么时候用L2,论文上写道一般当成分中有几个成分是principal factor的时候我们会使用L1 norm penalty,但是为什么L1会有这个效果。一个网上的讨论:http://www.quora.com/Machine-Lear_the differences between l1 snd l2
文章浏览阅读8.7k次,点赞13次,收藏40次。类的继承结构中,越往上的类越具有通用性,也就越抽象。当它抽象到一定程度,就变成概念成框架,不能再产生实例化的对象了。例如“交通工具”,就无法用它来产生一个实例。对应这一现象,Java中提供了抽象类,它只能作为父类,不能实例化。定义抽象类的作用是将一类对象的共同特点抽象出来,成为代表该类共同特性的抽象概念,其后在描述某一具体对象时,只要添加与其他子类对象的不同之处,而不需要重复类的共同特性。这样就使得程序概念层次分明,开发更高效。与抽象类紧密相连的是抽象方法一它总是用在抽象类或接口中。_抽象方法怎么定义
文章浏览阅读2.0k次。从海外客户端Bidding看,移动开发者应如何应对竞价模式变化2021年,对于渴望通过广告进行变现的移动开发者来说,可能注定是风云变幻的一年,也将是移动互联网广告程序化购买这个行业程碑式的一年,对此很多国内出海开发者会有更早的感触。自2020年三四季度始,大洋彼岸的美国就掀起了一轮“移动流量的客户端竞价革命”。其实,对于流量竞价(Realtime Bidding)很多PC时代的开发者并不陌生,简而言之,流量竞价就是APP的每一次广告曝光的机会都可以分发至多个买方平台,比如DS、Adnetwork_admob竞价和瀑布的区别和文档