什么是html5？
全栈 > WEB前端 ≈ HTML5 = H5
H5与人工智能和大数据的关系
数据处理与逻辑计算（后端）<=> 界面展示（前端）<=> 人（用户）
网页（网站）
浏览器时网页（网站）的载体 网页需要在浏览器里运行
都有哪些常用的浏览器？（市场份额）
1、Opra 欧朋 2.31%
2、FireFox 火狐 12.21%
3、Internet Explorer IE浏览器（数字）7.71%
4、Safari 苹果特有 6.29%
5、Chrome 谷歌 64.72%
6、QQ浏览器 （微信等内置的QQ X5内核浏览器）
等等
W3C --- 非盈利组织
万维网联盟 world wide web Consortium
联盟成员：
麻省理工学院
欧洲数学与信息学研究联盟
东京庆应大学
北京航空航天大学
OpenSSL --非盈利组织
全世界80%以上的网络通信都使用了openssl提供的加密工具保障信息的安全
初识HTML
超文本标记语言 Hyper Text Markup Language
编写网页的语言叫HTML 规则是W3C制定
<!--这一句声明，就是告诉浏览器，请使用HTML5标准来解析这个网页-->
<!DOCTYPE html>
<html lang="en">
<!--head表示网页的头部 这里的信息都是对网页整体说明-->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<!--表示网页的身体 网页的主要内容都写在这里-->
<body>
<center>这是一个网页？</center>
<button>这是一个按钮</button>
</body>
</html>
<!--
这些<标记文字>不再是普通的文字内容
他们不会显示在页面上
每个标记都有自己的作用
这些标记超越了普通文本的意义
叫做HyperText
他们全是以标记的形式来书写的
-->
常用标签
01、第一节 写一篇博客
<h1></h1> 1级标题
<h2></h2> 2级标题
<h3></h3> 3级标题
<h4></h4> 4级标题
<h5></h5> 5级标题
<h6></h6> 6级标题
<p></p> 段落标签 文本会独占一行
<i></i> 文字会出现斜体效果
<b></b> 文本会出现加粗效果
<br> 换行标记
<hr> 水平线
网页上显示一个空格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>论数学的重要性</h1>
<!-- <h2></h2>
<h3></h3>
<h4></h4>
<h5></h5>
<h6></h6> -->
<i>2019.10.30</i>
<hr>
<p>
今天我打电话叫了一个12寸的外卖披萨
</p>
<p>
服务员告诉我
</p>
<p>
12寸的没有了 给我换两个6寸的行不行
</p>
<p>
我想了想说可以
</p>
<p>
这个故事告诉我们一个道理，<br><b> 数学是多么重要啊！！！</b>
</p>
</body>
</html>
01、第二节 百度新闻列表
<a href="" target="_blank"></a> 超链接
<img src="" alt=""> 图片
无序列表
<ul type=""> type:1、disc 实心圆 2、circle 空心圆 3、square 实心方块
<li></li>
</ul>
有序列表
<ol> type:1、数字(1) 2、大小写字母(a,A) 3、大小写罗马字母（i，I）
<li></li>
</ol>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>百度新闻列表</title>
</head>
<body>
<h1>科技 <img src="img/icon-mark_775fa74.png" alt=""></h1>
<!-- 无序列表 -->
<ul>
<li><a href="http://baijiahao.baidu.com/s?id=1685708036673160482">百度李莹：百度如流智领工作方式变革 推动企业数字化..</a></li>
<li><a href="https://sghexport.shobserver.com/html/baijiahao/2020/12/10/312387.html">好书·书评丨人类未来细思量</a></li>
<li><a href="http://baijiahao.baidu.com/s?id=1685700801721740698">中国·四川首届国际直播电商节开启 220个网红达人..</a></li>
<li><a href="http://baijiahao.baidu.com/s?id=1685675548031409410">2020资讯平台大盘点：高品质，多样化成用户刚需</a></li>
</ul>
<!-- 有序列表 -->
<ol>
<li><a href="http://baijiahao.baidu.com/s?id=1685708036673160482">百度李莹：百度如流智领工作方式变革 推动企业数字化..</a></li>
<li><a href="https://sghexport.shobserver.com/html/baijiahao/2020/12/10/312387.html">好书·书评丨人类未来细思量</a></li>
<li><a href="http://baijiahao.baidu.com/s?id=1685700801721740698">中国·四川首届国际直播电商节开启 220个网红达人..</a></li>
<li><a href="http://baijiahao.baidu.com/s?id=1685675548031409410">2020资讯平台大盘点：高品质，多样化成用户刚需</a></li>
</ol>
</body>
</html>
不常用标签
<del></del> 删除线
<sup></sup> 上标
<u></u> 下划线
<center>文字居中<center>
基础（容器）标签
* div： 一个通用容器，不具备任何的特殊功能，仅仅是当做容器来使用。可以包裹任何内容，也可以容器之间互相包裹。
* span：一个容器标签，不具备任何的特殊功能，仅仅是当做容器来使用。用于包裹一段文本，便于给文本增加样式。
绝对地址和相对地址
* 绝对地址 ：在任何情况下，都可以找到的地址。
* 相对地址 ：只有知道当前所在，才能找到
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>03表格</title>
</head>
<body>
<h3>前端技术划分标准</h3>
<table border="1px" cellspacing='0'>
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<col width="200px">
<tr align="center">
<td></td>
<td>初级</td>
<td>中级</td>
<td>高级</td>
<td>专家</td>
</tr>
<tr align="center">
<td>标准</td>
<td>被产品怼的说不出话来</td>
<td>跟产品互怼不相上下</td>
<td>怼的产品没有话说</td>
<td>直接将其怼辞职</td>
</tr>
<tr align="center">
<td>用户A</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>用户B</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
<tr align="center">
<td>用户C</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</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>
</head>
<body>
<table border="1px" cellspacing="0">
<!--
colgroup标签
<colgroup span="6" width="100px"><colgroup>
表示：前六列是一组 每一列宽度都是100px
<colgroup span="1" width="200px"><colgroup>
表示：最后一列单独为一组 列宽是200px
-->
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="100px">
<col width="200px">
<tr align="center" height="30px">
<td colspan="7">个人简历</td>
</tr>
<tr align="center" height="30px">
<!--th 文字加粗并水平居中的td-->
<td>姓名</td>
<td></td>
<td>性别</td>
<td></td>
<td>年龄</td>
<td></td>
<td rowspan="4">照片</td>
</tr>
<tr align="center" height="30px">
<td>学历</td>
<td></td>
<td>籍贯</td>
<td colspan="3"></td>
</tr>
<tr align="center" height="30px">
<td>电话</td>
<td></td>
<td>政治面貌</td>
<td colspan="3"></td>
</tr>
<tr align="center" height="30px">
<td>毕业院校</td>
<td colspan="5"></td>
</tr>
<tr align="center" height="30px">
<td>求职意向</td>
<td colspan="6"></td>
</tr>
</table>
</body>
</html>
<!--
按照W3C书写表格时要包括
<table>
<thead>表格页眉</thead>
<tbody>表格主体</tbody>
<tfooter>表格页脚</tfooter>
</table>
-->
关于标签的嵌套问题
在书写标签时要注意标签之前的嵌套问题：
* 超链接不能嵌套超链接
* P标签不能嵌套P标签
* 标题标签h1...h6也不能互相嵌套
表单
input类型
* text * 文本
* password * 密码
* radio * 单选框
* checkbox * 复选框
* button * 按钮
* submit * 提交
* reset * 重置
* file * 文件
form表单提交
1、form表单必须有action属性，标识提交的地址
2、所有需要提交的数据，input必须有name属性
3、input按钮的文字 使用value属性表示
4、input必须放在form标签内才能提交
get和post请求的区别：
1、get请求通常表示获取数据
2、post请求通常表示提交数据
3、get请求发送的数据都会写在地址栏上，用户可见
4、post请求发送的数据用户不可见
5、get请求不能提交大量的数据，但是post可以，因此不要混用
元素类型
<!--* 块元素：可以设置宽高大小，默认宽度是100%，并且独占一行。-->
p ul>li h1-h6 div form table
<!--* 内联（行内）元素：无法设置宽高，元素大小随内容变化，所有的元素默认排在一行。-->
i b span a
<!--* 内联块元素：既能设置宽高大小，又能排在一行显示。-->
img input
认识CSS
如果我们把网页比作一个房子，标签和文字只是完成了一个基本结构，我们需要装修一下这个房子，这个时候我们就用到了css。
-
CSS（层叠样式表）--Cascading Style Sheet
用来修饰网页的语法，叫做层叠样式表
在实际网页开发，作用在同一个元素上的多个样式产生冲突的情况不可避免的经常发生，当多个样式发生重叠式，优先级别高的样式会生效，因此得名：层叠样式表<!--行内样式：作为属性写在标签内部的样式表叫行内样式。--> <div style="width:100px;height:100px;"><div> <!--内联样式：写在style标签中，并通过选择器去调用的样式表叫内联样式。--> <style> div{ width:100px; height:100px; } </style> -
css选择器
id选择器：id表示身份，在页面中元素的id不允许重复，一次id选择器只能选择单个元素。 标签选择器：根据标签名称 选择对应的所有标签。 类（class）选择器：选择拥有这个类（class）的多个元素。 通用（*）选择器：针对页面上所有的标签生效
选择器的权重：
行内样式 > ID选择器 > 类选择器 > 标签选择器 > 通用选择器
| 选择器 | 权重 |
|---|---|
| 通用选择器 | 0 |
| 标签选择器 | 1 |
| 类选择器 | 10 |
| ID选择器 | 100 |
| 行内样式 | 1000 |
选择器选择的范围越小越精确权重（优先级）越高
CSS的文本属性
color：文本颜色
font-family：字体类型
font-size：字体大小
font-weight：字体粗细
font-style：字体倾斜
text-indent：首行缩进
text-align：水平居中
line-height：行高
text-decoration：文本修饰
常见图片格式和区别
gif：
支持动画
只有全透明和不透明两种模式
只有256中颜色
jpg：
采用有损压缩算法
体积较小
不支持透明
不支持动画
png：
采用无损压缩算法
体积相对较小
支持背景透明
不支持动画
svg：
用来保存相对简单的图像
css的背景属性
background：
background-image:url('路径') //引入背景图片
background-repeat:no-repeat;//背景图平铺
background-position:水平 垂直;//背景图位置
background-size：宽 高 或者 一个属性;//背景图大小
css的浮动属性
float: left right
浮动：浮动元素会脱离网页文档，与其他元素发生重叠，但是不会与文字内容发生重叠
浮动重叠：
1、浮动元素不会覆盖文本内容
2、浮动元素不会覆盖图片内容（因为图片本身也属于文本，可以将图片看做是一个特殊的文字）
3、浮动元素不会覆盖表单元素（输入框、单选按钮、复选框、按钮、下拉选择框等）
clear:
left:当前元素不受到左浮动的影响
right:当前元素不受到右浮动的影响
both:当前元素不受到浮动的影响
注意：浮动元素在排列时，只参考前一个元素位置即可
盒子模型
元素本身 + padding + border + margin
css属性的简写
1、background: 颜色 背景图 平铺方式 位置/大小
2、border: 类型 宽度 颜色;
3、font:斜体 加粗 字号/行高 默认字体/备用字体;
4、margin: 上 右 下 左;上 左右 下;上下 左右;上下左右;
5、padding: 上 右 下 左;上 左右 下;上下 左右;上下左右;
css颜色取值
color:DarkGoldenRod;
color:rgba(184,134,11,1)
color:#B8860B;
通过css设置元素属性
display
block/块元素
inline/内联（行内）元素
inline-block 内联块元素
定位
position:
relative//相对定位
absolute//绝对定位
默认相对于有定位的父元素 left:0 right:0 最终以我们的浏览器为参考系
fixed:固定定位。
hover属性
选择器 + : + hover
HTML5新增语义化标签
header：头部
footer：底部
nav：导航
article：文章（通常指数据内容）
aside：侧边栏
main：网页主体
section：区块、片段类似于div容器
智能表单
<input type="email"></input>
<input type="url"></input>
<input type="number"></input>
一些特殊元素和某些情况下常用的css属性
textarea：
resize:both/none/vertical/horizontal
鼠标：
cursor:auto/crosshair（十字线）/pointer（小手）/move（十字箭头）
outline:颜色 类型 宽
outline-offset：-27px
overflow：visible（默认）/ hidden（溢出隐藏）/auto（适当加入滚动条）
:nth-of-type --同级兄弟元素选择器
a[href='.pptx']--属性选择器 [属性名 = 内容]
a[href$='.pptx'] $为结尾的意思
a[href^='.pptx'] ^为结尾的意思
BFC 块级格式化上下文
如何触发元素的BFC规则？
元素浮动
元素绝对定位
元素类型为inline-block
overflow不等于默认值（visible）
BFC的具体表现：
父子元素的上下边距不再合并
父元素的高度会将浮动元素计算在内
通过一个开关来学习 伪类选择器 和css一些特殊属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>一个开关</title>
<style>
*{
padding: 0;
margin: 0;
}
input[type="checkbox"]{
/* 取消复选框默认的样式 */
-webkit-appearance: none;
margin: 50px;
border: 10px solid #c1c1c1;
border-radius: 50px;
width: 150px;
height: 70px;
background: #888;
position: relative;
box-shadow: 0 0 10px 1px #3f3f3f inset;
/* transition: 属性值 过渡时间 方式 延迟时间;
方式：ease 先慢后快再慢
linear 线性
ease-in 慢速开始
ease-out 慢速结束
ease-in-out 快速开始 慢速结束 */
transition: 0.6s;
outline:none;
}
input[type="checkbox"]:checked{
background: #6FB500;
}
/* 通过伪元素选择器来设置一个元素 开关的圆 */
input[type="checkbox"]::after{
content: "";
display: block;
width: 60px;
height: 60px;
position: absolute;
left: -5px;
top: -5px;
border-radius: 30px;
/*
线性渐变
background:linear-gradient(to 方向,颜色1，颜色2)
*/
background: linear-gradient(to bottom,#d3d3d3,#9e9e9e);
/* box-shadow: left值 top值 模糊值 扩大值 影子颜色 阴影方向（内，外）; */
box-shadow: 0 2px 2px 0px #eee inset,2px 1px 2px 0px #333;
transition: 0.6s;
}
input[type="checkbox"]:checked::after{
left: 70px;
}
</style>
</head>
<body>
<input type="checkbox">
</body>
</html>
通过一段代码来学习transform动画
位移：translate
缩放：scale（number）
旋转：rotateX（number + deg） rotateY（number + deg） rotateZ（number + deg）
修改原点位置：transform-origin:20%/50%;
透视！！！！一定要写在最前面！！！！
perspective(1000px) 可以加在当前元素上 也可以加载父元素上 让你感觉这个物体是个立体的（3D）
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>transform</title>
<style>
*{
margin: 0;
padding: 0;
}
.box{
float: left;
position: relative;
width: 300px;
height: 300px;
margin: 100px 200px;
overflow: hidden;
}
.box > img{
width: 300px;
height: 300px;
}
.box > *{
transition: 1s;
position: absolute;
left: 0px;
top:0px;
}
.box h2{
color: white;
width: 200px;
transform: translateX(10px) translateY(250px);
}
.box p {
color: white;
}
.box p:nth-of-type(1){
transform: translateY(140px) translateX(-150px);
}
.box p:nth-of-type(2){
transform: translateY(180px) translateX(-110px);
transition: 1s 0.1s;
}
.box p:nth-of-type(3){
transform: translateY(220px) translateX(-100px);
transition: 1s 0.2s;
}
.box:hover img{
transform: scale(1.3) rotateZ(30deg);
/* transform-origin: 原点/起点; */
}
.box:hover p:nth-of-type(1){
transform: translateY(140px) translateX(10px);
}
.box:hover p:nth-of-type(2){
transform: translateY(180px) translateX(10px);
transition: 1s 0.1s;
}
.box:hover p:nth-of-type(3){
transform: translateY(220px) translateX(10px);
transition: 1s 0.2s;
}
</style>
</head>
<body>
<div class="box">
<img src="https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=167073903,3799291455&fm=26&gp=0.jpg" alt="">
<h2>Taylor Swift</h2>
<p>Birthday:1989.12.13</p>
<p>Height:180cm</p>
<p>Weight:56kg</p>
</div>
</body>
</html>
CSS帧动画
定义动画：
@keyframe 动画名称 {
<!--关键帧-->
<!--
比如：
-->
30%：{
transform:scale(1.3)
}
100%{
transform:scale(1)
}
}
使用动画：
span.heart {
animation: 动画名称 动画时长 延迟时间 循环方式：infinite 无限循环
}
画一个心
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body{
padding: 100px;
}
span{
display: inline-block;
}
.heart-left,.heart-right{
width: 50px;
height: 80px;
background-color: red;
border-top-left-radius: 25px;
border-top-right-radius: 25px;
}
.heart-left{
transform: rotateZ(-45deg);
}
.heart-right{
transform: translateX(-28px) rotateZ(45deg);
}
.heart{
/* transform-origin: 50% 50%; */
animation: beat 1.6s infinite;
}
@keyframes beat {
30%{
transform: scale(1.3);
}
100%{
transform: scale(1);
}
}
</style>
</head>
<body>
<span class="heart">
<span class="heart-left"></span><span class="heart-right"></span>
</span>
</body>
</html>
波纹效果
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
*{
margin: 0;
padding: 0;
}
.point{
width: 10px;
height: 10px;
display: block;
background: #6AD7E9;
border-radius: 50%;
position: absolute;
left: 200px;
top: 200px;
}
.ripple-1{
animation: ripple 4500ms 225ms infinite;
}
.ripple-2{
animation: ripple 4500ms 1575ms infinite;
}
.ripple-base{
width: 120px;
height: 120px;
border: 2px solid #00cdec;
border-radius: 50%;
transform: scale(0.01);
position: absolute;
left: -57px;
top: -57px;
}
@keyframes ripple{
100%{
opacity: 0;
transform: scale(1);
}
}
</style>
</head>
<body>
<div class="container">
<div class="point">
<div class="ripple-base ripple-1"></div>
<div class="ripple-base ripple-2"></div>
</div>
</div>
</body>
</html>
什么是响应式？
网页根据分辨率不同 做出不同的响应。
CSS媒体查询：media
@media screen and (max-width:1024px)
@media 屏幕 and (最小尺寸)
移动端像素
例：iphone8
最大分辨率 750 * 1334 ==> 物理像素
默认分辨率 375 * 667 ==> 设备独立像素
dpr(设备像素比) == 2
======>
当我们应css写一个1px的边框
移动端dpr为1会用一个物理像素
移动端dpr为2会用两个物理像素
移动端dpr为3会用三个物理像素
<meta name="viewport" content="width=device-width,initial-scale= 1 / dpr>
移动端适配
1、百分比布局 （计算复杂）
2、媒体查询 （需要写多种样式！）
3、rem布局
1 rem = html标签的font-size
弹性盒
display:flex;
注意：在弹性盒中：
① float（浮动）会失效
② vertical-align失效
justify-content: 内容排版
① flex-start 开始对齐
② flex-end 结束对齐
③ center 居中对齐
④ space-between 两端对齐
⑤ space-around 自动分配间隔
主轴变换：
flex-direction：row / column
换行
flex-wrap:nowrap / wrap
交叉轴
align-items
容器瓜分
flex-grow
元素的多余空间削减比例
flex-shrink
