文章目录
前言HTML文档的声明zeal的下载使用与W3C在线文档的使用VScode插件live Sever的安装meta标签hgroup标签blockquote块引用语义化标签（了解）超链接图片标签和图片格式（了解）内联框架标签iframeCSS选择器补充1.兄弟元素2.属性选择器3.伪类补充选择第几个元素来进行修饰选择器名:not()超链接的伪类伪元素overflow属性outline属性元素脱离文档流的特点用BFC解决高度塌陷问题粘滞定位图标字体水平对齐补充网页空白处理和多余内容处理背景补充1.背景框2.背景图的偏移background-origin3. background-attachment颜色渐变表格属性补充表单补充用z-index提高优先级过渡transition关键帧-自动（无需触动）变形（transform）1.平移2.旋转3.缩放3.变形原点less弹性盒子1.弹性容器的样式2.弹性元素的样式像素1.基本介绍2.手机像素3.完美视口4.像素单位vw媒体查询实战练习小米商城在网页上实现动画的效果1.米兔练习2.奔跑的少年3.用动画（animation）和rotaeZ(旋转)实现钟表4.旋转的正方体前言
这是我第二次关于Web前端零基础入门HTML5+CSS3基础的学习笔记，主要是从两个不同讲师的角度全方面的学习一下web前端基础和顺带复习一下。所以我会在这里记录一下在第一个学习笔记中不熟悉或没有的部分，大家可以结合第一个笔记来一起看一下，第一个笔记比较详细。
这次学习B站尚硅谷的视频，想看是视频的小伙伴可以一用上面的链接。
HTML
首先我们回顾一下整体架构，再认识一下HTML,CSS,JS的作用。
文档的声明
HTML发展到现在有多个版本，在使用前你需要对浏览器声明一下，你所要使用的HTML的文档（doctype）版本
/*声明使用最新版本的HTML*/<!DOCTYPE html>
zeal的下载使用与W3C在线文档的使用
zeal是一个离线文章的查看器，可以在没有网络的情况下查看文档。文档是我们编程时的说明书，对于每一个语言或者程序、软件都会有其的文档供我们在编程学习中使用。
zeal下载知道说明，亲测有用。不过有个很明显的缺点是zeal是英文版的，需要一定的英语基础，而且由于是国外的软件在下载文档时需要耐心等待几分钟。
W3C在线使用教程是中文版，内容也是比较全面的。不过要在联网时使用，而且版本较老。
VScode插件live Sever的安装
VScode是我们编程的使用的编程软件，这里是下载链接。根据自己的操作系统版本选择下载即可，具体的是全程同意的傻瓜式下载。
live Sever是一个VScode的插件，一个具有实时加载功能的小型服务器，可以使用它来破解html/css/javascript，但是不能用于部署最终站点。也就是说我们可以在项目中实时用live-server作为一个实时服务器实时查看开发的网页或项目效果。
下载后可以直接右键点击“open with live sever”使用。
meta标签
meta是html语言head区的一个辅助性标签。meta标签的作用有：搜索引擎优化(SEO)，定义页面使用语言，自动刷新并指向新的页面，实现网页转换时的动态效果，控制页面缓冲，网页定级评价，控制网页显示的窗口等。
注意：
标签通常位于 区域内。元数据通常以 名称/值 对出现。如果没有提供 name 属性，那么名称/值对中的名称会采用 http-equiv 属性的值。
属性如下：
hgroup标签
hgroup是在两个标题之间有关系时使用，如在一个h1标题为大标题，一个h2为小标题时使用。
<hgroup><h1>Calculus I</h1><p>Fundamentals</p></hgroup><p>This course will start with a brief introduction about the limit of a function. Then we will describe how the idea of derivative emerges in the Physics and Geometry fields. After that, we will explain that the key to master calculus is …</p>
blockquote块引用
blockquote是块引用，在引用时可以使用该标签，因为其的显示方式时块，所以时独占一行。
<blockquote><p>Words can be like X-rays, if you use them properly—they’ll go through anything. You read and you’re pierced.</p></blockquote>—Aldous Huxley, Brave New World
语义化标签（了解）
内容分区元素，即语义化标签允许将文档内容组织到逻辑片段中。使用分区元素为页面内容创建大致的大纲，包括头部header、页尾 footer、导航navigation, 以及用于标识内容部分的标题元素。
这部分是HTML5新增的部分，并不常用，仅作了解，实际上这些功能都可以用div和span来实现。
下面是zeal中关于此部分的文档内容的说明。
超链接
在这里补充一下第一个笔记
在超链接处的遗漏，即href=“#”,在表示空链接，也可以跳转页面的各个位置。
图片标签和图片格式（了解）
在img标签中，存在一个alt的属性，该属性是在图片无法显示时，才可以被用户看见。写不写都不影响整体页面的运行。但如果写了，除了如下方所示的内容外，还可以被浏览器基于关键词（alt的内容）智能搜索。
各种图片格式在使用时的优缺点如下
内联框架标签iframe
作用：用于向当前页面引入一个其它页面
代码形式如下
<!-- frameborder是内联框架的边框的宽度 --><iframe src="引入页面的路径" height="高度" width="宽度" frameborder="0"></iframe>
CSS
选择器补充
1.兄弟元素
兄弟元素：拥有相同父级元素的元素
<!-- 选择下一个兄弟 -->兄+弟{css}<!-- 选择下面所有弟弟 -->兄~弟{css}
2.属性选择器
即通过属性来选择对应修饰的标签，书写格式如下
3.伪类补充
选择第几个元素来进行修饰
/*第一个*/选择器名：first-of-type{css}/*最后一个*/选择起名：last-of-type{css}/*第n个*/选择器名：nth-of-type(n){css}
选择器名:not()
作用：将符合条件的元素从选择器中去除
如 li:not(nth-of-type(3)) 是将li中第三个剔除
超链接的伪类
伪元素
overflow属性
作用：处理子元素溢出
使用：overflow: 属性值；
属性值如下
outline属性
代码形式
outline:宽度 颜色 边框的形式（soild实线,dashed虚线，dotted点线）;
元素脱离文档流的特点
用BFC解决高度塌陷问题
提前说明，如果用BFC是可以解决高度塌陷的问题，但会有一定的副作用。下面有第三种的副作用最小，但仍有副作用。建议是用clear或：before 与：after来解决，效果较好。
高度塌陷
BFC的特点如下
粘滞定位
如京东商城的右边导航使用了这样的定位，效果如下
图标字体
图标字体是如同下方的一样的图像，它的本质是矢量图，可以像字体一样自由放大而不失真，具体使用方法请参考这篇文章
水平对齐补充
水平对齐补充一个属性值：justify两端对齐
网页空白处理和多余内容处理
作用：采用下面的三行代码可以将多余的文字内容以省略号的形式显示。
背景补充
1.背景框
2.背景图的偏移background-origin
3. background-attachment
颜色渐变
表格属性补充
表单补充
表单数据提交步骤，一般要提交给服务器，但在下方临时搭一个HTML来接受，方便演示
注意：选择框，要注明value值
用z-index提高优先级
为了解决谁覆盖谁的问题，我们可以采用 z-index:数字（优先级级数); 来解决这个问题，优先级高的覆盖优先级低的。一般我会把最高优先级设置为9999。
优先级详细介绍
过渡transition
关键帧-自动（无需触动）
from默认为0，to默认为100%，即从过程的开始到结束
可以根据这样的特点设置中间的几个过程
变形（transform）
1.平移
注意：这种方式是可以确定元素的位置，但只能确定有固定宽高的元素的位置。
2.旋转
3.缩放
3.变形原点
less
less是一门css的预处理语言，是css的增强版，通过less可以编写更少的代码实现更强大的样式。
特点:
在less中添加了许多的新特性，像对变量的支持，对mixin的支持less的语法大体上与css语法一致，但是less中田佳琳许多对css的扩展浏览器无法直接运行less代码，要执行必须像less转化为css，然后浏览器执行。
缺点是老版本的浏览器不兼容
详细介绍在这里
弹性盒子
1.弹性容器的样式
下面的属性值和上面一致
下面的属性值和上面一致
2.弹性元素的样式
像素
1.基本介绍
2.手机像素
3.完美视口
4.像素单位vw
媒体查询
实战练习
小米商城
代码自取
链接：/s/1kiVODIV7Gz3Fhmy54DUniA
提取码：akcu
/89c5b862aa5849099e80af2c945a2eb8.png)
在网页上实现动画的效果
图片仅用于演示，来自他人博客
1.米兔练习
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.box1{width: 132px;height: 271px;background-image: url(./米兔.png);background-position: 0 0;transition: 0.3s steps(3);margin: 0 auto;}.box1:hover{background-position: -396px 0;}</style></head><body><div class="box1"></div></body></html>
米兔练习
2.奔跑的少年
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{padding: 0;margin: 0;}.box1{width: 120px;height: 136px;margin: 100px auto ;background-image: url(./奔跑的少年.png);animation: run 1s steps(10) infinite ;}@keyframes run{from{background-position: 0 0;}to{background-position: -1200px 0;}}</style></head><body><div class="box1"></div></body></html>
奔跑的少年
3.用动画（animation）和rotaeZ(旋转)实现钟表
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>*{margin: 0;padding: 0;}.clock{width: 265px;height: 265px;/* background-color: #bfa; */margin: 100px auto;/* animation: run 60s; */border-radius: 50%;border: 1px solid #000;background-image: url(./img/表盘.jpg);position: relative;}.hour-wrapper{position: absolute;height: 50%;width: 50%;top: 0;left: 0;bottom: 0;right: 0;margin: auto;animation: run 3600s linear infinite;/* background-color: aqua; */}.sec-wrapper{position: absolute;height: 80%;width: 80%;margin: auto;top: 0;left: 0;bottom: 0;right: 0;animation: run 1s steps(60) infinite;/* background-color: red; */}.min-wrapper{position: absolute;height: 65%;width: 65%;margin: auto;top: 0;left: 0;bottom: 0;right: 0;/* animation: run 60s steps(60) linear infinite; */animation: run 60s steps(60) infinite;}.hour{height: 50%;width: 8px;background-color: #000;margin: 0 auto;}.min{height: 50%;width: 6px;background-color: #000;margin: 0 auto;}.sec{height: 50%;width: 4px;background-color: rgb(231, 12, 12);margin: 0px auto;/* animation: run 60s; */}@keyframes run {from{transform: rotateZ(0);}to{transform: rotateZ(360deg);}}</style></head><body><div class="clock"><div class="hour-wrapper"><div class="hour"></div></div><div class="min-wrapper"><div class="min"></div></div><div class="sec-wrapper"><div class="sec"></div></div></div></body></html>
用动画和旋转实现钟表
4.旋转的正方体
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title><style>html{perspective: 800px;}.cube{width:200px ;height: 200px;margin: 0 auto;margin-top: 250px;animation: run 20s infinite linear;transform-style: preserve-3d;}.cube> div{width: 200px;height: 200px;opacity: .7;position:absolute;}img{vertical-align: top;width: 200px;height: 200px;}.box1{transform: rotateY(90deg) translateZ(100px);}.box2{transform: rotateY(-90deg) translateZ(100px);}.box3{transform: rotateX(90deg) translateZ(100px);}.box4{transform:rotateX(-90deg) translateZ(100px)}.box5{transform: rotateY(180deg) translateZ(100px);}.box6{transform: rotateY(0deg) translateZ(100px);}@keyframes run{from{transform: rotateX(0) rotateZ(0);}to{transform: rotateX(1turn) rotateZ(1turn);}}</style></head><body><div class="cube"><div class="box1"><img src="./img/01.gif" alt=""></div><div class="box2"><img src="./img/02.gif" alt=""></div><div class="box3"><img src="./img/03.gif" alt=""></div><div class="box4"><img src="./img/04.jpg" alt=""></div><div class="box5"><img src="./img/05.gif" alt=""></div><div class="box6"><img src="./img/06.gif" alt=""></div></div></body></html>
素材图片
旋转正方形
