什么是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制定
Document
这是一个网页？
常用标签
01、第一节 写一篇博客
1级标题
2级标题
3级标题
4级标题
5级标题
6级标题
段落标签 文本会独占一行
文字会出现斜体效果
文本会出现加粗效果
换行标记
水平线
网页上显示一个空格
Document
论数学的重要性
2019.10.30
今天我打电话叫了一个12寸的外卖披萨
服务员告诉我
12寸的没有了 给我换两个6寸的行不行
我想了想说可以
这个故事告诉我们一个道理，
数学是多么重要啊！！！
01、第二节 百度新闻列表
超链接
![]()
图片
无序列表
type:1、disc 实心圆 2、circle 空心圆 3、square 实心方块
有序列表
type:1、数字(1) 2、大小写字母(a,A) 3、大小写罗马字母（i，I）
百度新闻列表
科技 
不常用标签
文字居中
基础（容器）标签
* div： 一个通用容器，不具备任何的特殊功能，仅仅是当做容器来使用。可以包裹任何内容，也可以容器之间互相包裹。
* span：一个容器标签，不具备任何的特殊功能，仅仅是当做容器来使用。用于包裹一段文本，便于给文本增加样式。
绝对地址和相对地址
* 绝对地址 ：在任何情况下，都可以找到的地址。
* 相对地址 ：只有知道当前所在，才能找到
表格
03表格
前端技术划分标准
初级
中级
高级
专家
标准
被产品怼的说不出话来
跟产品互怼不相上下
怼的产品没有话说
直接将其怼辞职
用户A
用户B
用户C
单元格合并
表格的行列合并（简历）
个人简历
姓名
性别
年龄
照片
学历
籍贯
电话
政治面貌
毕业院校
求职意向
关于标签的嵌套问题
在书写标签时要注意标签之前的嵌套问题：
* 超链接不能嵌套超链接
* 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可以，因此不要混用
元素类型
p ul>li h1-h6 div form table
i b span a
img input
认识CSS
如果我们把网页比作一个房子，标签和文字只是完成了一个基本结构，我们需要装修一下这个房子，这个时候我们就用到了css。
-
CSS（层叠样式表）--Cascading Style Sheet
用来修饰网页的语法，叫做层叠样式表
在实际网页开发，作用在同一个元素上的多个样式产生冲突的情况不可避免的经常发生，当多个样式发生重叠式，优先级别高的样式会生效，因此得名：层叠样式表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 + margincss属性的简写
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属性
选择器 + : + hoverHTML5新增语义化标签
header：头部 footer：底部 nav：导航 article：文章（通常指数据内容） aside：侧边栏 main：网页主体 section：区块、片段类似于div容器智能表单
一些特殊元素和某些情况下常用的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一些特殊属性
一个开关 通过一段代码来学习transform动画
位移：translate 缩放：scale（number） 旋转：rotateX（number + deg） rotateY（number + deg） rotateZ（number + deg） 修改原点位置：transform-origin:20%/50%; 透视！！！！一定要写在最前面！！！！ perspective(1000px) 可以加在当前元素上 也可以加载父元素上 让你感觉这个物体是个立体的（3D）transform 
Taylor Swift
Birthday:1989.12.13
Height:180cm
Weight:56kg
CSS帧动画
定义动画： @keyframe 动画名称 { 30%：{ transform:scale(1.3) } 100%{ transform:scale(1) } } 使用动画： span.heart { animation: 动画名称 动画时长 延迟时间 循环方式：infinite 无限循环 }画一个心
Document 波纹效果
Document 什么是响应式？
网页根据分辨率不同 做出不同的响应。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会用三个物理像素