网页前端：
静态网页：html+css
动态网页：javascritpt（js)
网页后端：
java php：数据库
wed：网络
ktml+css
HTML：结构。网页结构
css：样式，美化网页
javascript（JS）：行为。用户产生交互动作
http:hypertext transfer protocol超文本传输协议
https：加密传输
www：worlf wide wed 万维网
.com域名（商业性） .cn (中国) .edu（教育）
html：hyper text makeup language超文本标记语言。会被浏览器翻译
超文本：比文本更厉害、除了文字还有图片、视频、还有链接、音频。超越文本的限制
<!DOCTYPE HTML> //docutement type 文档类型：网页文档（html）
<html> //网页开始，根元素
<head> //网页头部开始
<meta cgharsrt="utf-8">//元数据定义：定义字符集为UTF-8
<title>hello</title> //网页标题开始 标题名称 网页标题结束//网页头部结束//网页主体结束 身体 hello html5! //网页内容//网页主体结束 身体` //网页结束
扩展：
1.双标签：由两个组成，<开始标签> </结束标签>
2.单标签：只有一对<>,<开始 />
3.注释标签：<！-- -->·，
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
<!-- 图片标签：单标签<img /> -->
<!-- scr：属性，指向图片地址 -->
<!-- l链接标签：<a></a> -->
<!-- href：属性，指向链接地址-->
···
QQ音乐排行榜
最佳播放量排名
- 手心的蔷薇
- 修炼爱情
- 云与海
随机榜单
创作作者中心 空连接
···<!-- 自定义列表 --> <dl> <dt>小标题</dt> <dd>分类1</dd> <dd>分类2</dd> <dd>分类3</dd> <dt>小标题2</dt> <dd>分类1</dd> <dd>分类2</dd> <dd>分类3</dd> </body><html> <head> <meta charset="utf-8" /> <title>基础标签</title> </head> <body> <!--表单标签：手机用户信息.包括<form></form>表单域、标签控件、提示信息 --> <form action="test.php" method="get"> <!--表单标签：输入控件、下拉列表、文本域 --> <!--输入控件、<input> --> 用户名：<input type="text"/> <br>密码：<input type="password"/> <br />性别：<input type="radio"name="xingbie"/>男 <input type="radio"name="xingbie"/>女 <br />爱好：<input type="checkbox"/>打篮球<input type="checkbox"/>王者荣耀<input type="checkbox"/>跳舞 <br /><input type="submit"/> <input type="reset"/> <input type="button" value="发送验证码"/> <!-- 下拉列表： --> <br />籍贯：<select> <optgroup value="guiyang" label="贵阳市"> <option>云岩区</option> <option>花溪区</option> <option>南明区</option> </optgroup> <optgroup value="zunyi" label="遵义市"> <option>红花岗区</option> <option>汇川区</option> </optgroup> </select> <!-- 文本域 --> <br />留言：<textarea></textarea> </form> </body> </html>input:输入
type:|类型
text:文本
password:密码
radio:收音机、广播、单选
name：名字
checkbox:多选、复选框
submit:提交
reset:重置
button：按钮
value：价值、值
select:选择
option:选项
optgroup:定义选项组
textarea:文本域。可输入多行文本<html> <head> <meta charset="utf-8" /> <title>图书信息管理系统</title> </head> <body> <h3>图书信息表格</h3> <!-- 表格标签：<table></table> --> <!-- 表头<thead></thead>和表格数据部分<tbody></tdobyt> --> <!-- 表格的行： <tr></tr> table row --> <!-- px:像素单位 border：边框 cellspacing:s数据单元格之间的距离 cellpadding；文字的填充大小 --> <!-- 表头:<th></th> table head --> <!-- 数据单元格：、<td></td》 table data --> <table border="1px" cellspacing="0" cellpadding="5px"> <thead> <tr> <th>书名</th> <th>作者</th> <th>价格</th> <th>购买链接</th> </tr> </thead> <tabody> <!-- 第一行： --> <tr> <td>世界上的另一个你</td> <td>丹弗·朗</td> <td>￥64.0</td> <td> <a href="#">当当网</a> </td> </tr> <!-- 第二行 --> <tr> <td>快乐的人</td> <td>卡耐基</td> <td>￥34.0</td> <td> <a href="#">当当网</a> </td> </tr> <!-- 第三行 --> <tr> <td>生死场</td> <td>萧红</td> <td>￥36.5</td> <td> <a href="#">当当网</a> </td> </tr> <!-- 第四行 --> <tr> <td>大象无影</td> <td>泽凡</td> <td>￥43.0</td> <td> <a href="#">当当网</a> </td> </tr> <!-- 第五行 --> <tr> <td>第一行代码</td> <td>郭霖</td> <td>￥54.0</td> <td> <a href="#">当当网</a> </td> </tr> </tabody> </table> </body> </html>html:Hyper Text Makeup language 超文本标记语言 网页结构
CSS：Cascading Style Sheet 层叠样式表、级联样式表
color：颜色
三种引入样式的方式：
1.内联样式：把样式直接写在开始标签里
2.内部样式：用标签书写
3.外部样式：用<link href =“css"文件位置” rel=“stylesheet”/>引入写好的css文件。
内联样式、内部样式和外部样式三个一起用的时候，内联样式权限最高（最终一定用内联样式）
内部样式和外部样式谁在后面听谁的<html> <head> <meta charset="utf-8" /> <title></title> <!-- 2.内部样式:用<style></style>标签书写 --> <style> p{ color:green; font-size: 45px; } body{ background: url(img/Desert.jpg); } </style> <!-- 3.外部样式引入： --> <link href="css/style.css" rel="stylesheet"/> </head> <body> <!-- 1内联样式：把样式直接写在开始标签里--> <p style="color:red; font-size: 24px;">层叠样式表</p> <p>层叠样式表</p> </body> </html>盒子：边框border、内容、padding内边距
版心（大盒子）
盒子的作用：给网页布局
width:宽
htight:高
border：边框
solid：实线
dotted：虚线：
padding：内边距
left：左
right:右
top：上
bottom:下<html> <head> <meta charset="utf-8" /> <title></title> <style> .box{ width: 1266px; height: 52px; border-left: solid 10px black; /* 写一个值：上下左右都是同一个内边距 */ /* 写两个值：第一个值代表上下，第二个值左右 */ /* 三个值:第一个代表上,第二个代表左右,第三个代表下 */ /* 第四个值：上 右，下，左 顺时针 */ padding: 20px 10px 30px 5px; /* padding-left:左内边距 */ padding-left: 30px; } .box2{ width: 200px; height: 50px; border: solid 1px green; } </style> </head> <body> <div class="box"> <div class="box2"></div> </div> </body> ```</html> background-clor:背景颜色 margin:外边距 auto：自动 外边距合并：相邻两个盒子之间同时设置margin，最终取的值是最大的那一个 避免相邻盒子外边距合并：只给其中一个盒子设置外边距。 外边距塌陷：嵌套的两个盒子之间同时设置margin，最终取的值也是最大的一个 避免嵌套盒子外边距塌陷：给父盒子添加边框、或添加padding、或添加overflow：hidden；``` 权重
ID的权重是100
类的权重是10
标签的权重是1
样式最后使用权重大的块元素
- 比较霸道，自己独占一行
- 可以控制width、height、对齐属性
- 宽度默认是容器（父级元素宽度）的100%；
- 块元素内可以包含行内元素或元素。
常见的块元素有~
,
,
,-
,
- ,
- ……
文字类的标签内不能使用块元素，比如,
~
等标签
主要用于存放文字，因此标签内不能放块元素
-
,
转换成块的元素：display：inline；
Inline:行内元素
转换成块元素：display：block;
Block:块
转换成行内块元素display：inline-block；
Inline-block：行内块行内块元素
同时具有块元素和行内元素的特点
一行显示
元素显示模式转换
使用场景：一个模式的元素需要另一种模式的特性。列：
增加a链接的触发范围。
转换为块元素displayblock
转换为行元素display：inline；
转换为行内块元素display：inline-block音频和视频插入
多媒体的格式
元素支持三种音频格式文件：MP3,Wav和Ogg:
···音频视频插入
··· **背景插入** ···</video> </body>···唐欢是猪
代欣慧是猪
唐欢是猪
代欣慧是猪
唐欢是猪
代欣慧是猪
唐欢是猪
代欣慧是猪
唐欢是猪
代欣慧是猪
唐欢是猪
代欣慧是猪
唐欢是猪
代欣慧是猪
</div> </body>动画
transition:过渡
over：鼠标放上去:鼠标悬停
transform:转换
*translate(x,y)位移
skew(deg)斜切
rotate:旋转
animation:动画名称<html> <head> <meta charset="utf-8" /> <title></title> <style type="text/css"> .box{ width:200px; height:300px; background-color:hotpink; /* 2.绑定动画 */ /* animation:动画名称 动画持续时间 重复次数/infinite无数次 延迟时间 速度曲线; */ animation:zhangsan .3s infinite 5s; } /* 动画 */ /* 1.创建关键帧 */ /* @keyframes 动画名称{ from/0%{从...开始} to100%{到...结束} } */ @keyframes zhangsan{ from{ background-color:pink; } to{ background-color:skyblue; } } </style> </head> <body> <div class="box"></div> </body> </html><!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>转换</title> <style> body{ width: 100vw; height: 100vh; position:absolute; } .box{ position:absolute; top: 50%; left: 50%; transform:translate(-50%,-50%); width:300px; height:200px; background-color:pink; /* transition:过渡 */ transition:transform:.3s linear; } /* hover：鼠标放上去:鼠标悬停 */ .box:hover{ /* transform:转换 */ /* transform:translate(800px,200px); */ /*translate(x,y)位移*/ /* transform: translateY(400px); */ /* translatey(Y)y轴方向位移,translatex(X)x轴方向位移 */ /* transform:rotate(45deg); */ /* deg:度 rotate(deg); 正数（顺时针旋转）/负数（逆时针旋转）*/ /* transform: skew(45dge); */ /* skew(deg)斜切 */ /* transform: scale(0.5); */ /* 大小放大或缩小倍数,数字 */ transform:translate(100px,200px) rotate(45deg); } .bo{ width: 300px; height: 200px; background-color:pink; transition:transform 5s; /* transform-origin:转换中心点.top/bottom/left/right/center */ transform-origin:top left; } .bo:hover{ transform:rotate(-45deg); } </style> </head> <body> <div class="box"></div> <!-- <div class="bo"></div> --> </body> </html> ` 3D转换： translateX:X轴位移 translateY:Y轴位移 translateZ:Z轴位移 只能位移大小，不能位移百分比 translate3d(x,y,z):三个轴线一起位移 transition；过渡 transform:转换 translate:平移 rotate：旋转 scale：缩放 skew:斜切 rotatex(deg) rotatey(deg) rotatez(deg) rotate3d(1,0,1,45deg) rotate3d(x,y,z,angle):旋转，xyz的值0或1. 1.表示要旋转true；0：表示不旋转false. rotate3d（1,1,1，angle（角度））:rotateX(angle) rotateY(angle)rotateZ(angle) rotate3d（1,0,1，angle）:rotateX(angle) rotateZ(angle) rotate3d（0,0,1，angle）rotateZ(angle) Main axis:水平的主轴 Cross axis：垂直的交叉轴 Main start：主轴的开始位置 main end:主轴的结束位置 cross start：交叉轴的开始位置 cross end：交叉轴的结束位置 项目默认沿主轴排列 单项目占据的主轴空间叫main size 单个项目占据的交叉轴空间叫cross size flex-direction:row/row-reverse/column/column-reverse:改变主轴； row:默认值，从左到右； row-reverse:从右到左； column:从上往下； column-reverse:从下往上； justify-content:定义项目在主轴的对齐方式 justify-content:space-between/flex-start/flex-end/space-around/center space-between:两端对齐 flex-start：从主轴的开始位置开始排列 flex-end：从主轴的结束位置排列 center:居中 space-around：拉手对齐/环绕对齐 flex-wrap；决定项目换行 nowrap;默认值，不换行 wrap：换行显示 wrap-reverse:反向换行 
429
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
