这篇文章上次修改于 2440 天前，可能其部分内容已经发生变化，如有疑问可询问作者。
HTML（HyperText Markup Language，超文本标记语言） 是用来定义网页结构的一种描述语言。
HTML:超文本标记语言
一．标签按照语法分类：
1.单标签：开始标签
<标签名>例如：meta
2.双标签:开始标签/结束标签构成
<标签名></标签名>
例如：
3.注释标签(Ctrl+ / )：
1. 表单控件（属于行内块元素）：文本框 <input type = “button” value(值)=搜索按钮>
二．按照页面中的呈现效果分类：
1.块元素
特性：可以设置宽高，独占一行。
例如：div p(段落) pre等等;h1-h6\
列表标签：
无序列表:ul;li ul下边必须嵌套的是li
有序列表:ol;li …
项目列表：dl\dt;dd dl→dt→dd
2.行内元素
特性：在一行内显示，不可以设置宽高。
b(加粗);em着重文字；i倾斜;span
span标签不可以设置宽高，浮动之后可以设置宽高
3.行内块元素
特性：在一行内显示，可以设置宽高。
例如：img\表单控件（input）
元素级别：
块元素>行内块元素>行内元素
元素的转换（display）
块元素：block
行内元素：inline
行内块元素：inline-block
div.btn{$$}\19 点tab键同时复制19句
文档流：
从左到右，从上到下
一个元素实际的宽高：
实际的宽度 = border-left+padding-left+width+padding-right+border-right
实际的高度 = border-top+padding-top+height+padding-dottom+border-bottom
元素的嵌套规则：
相同级别可以相互嵌套。级别高的元素可以嵌套元素级别低的元素
属性：
语法：1.位置在哪里？在开始标签中。
2.<meta 属性名(如charset)=“属性值”>
3.<div 属性名=“属性值1 属性值2”>
例如：
路径的两种方式：
1.绝对路径：从盘符开始的路径；
2.相对路径：一个文件和另一个文件的关系
返回上一级： …/
CSS层叠样式表：
选择器 和 样式
一．选择元素
1.标签选择器:选择页面中所有的标签
语法：
标签名{
样式名：样式值;
样式名：样式值;
…
}
div{
width:600px;
height:600px;
background-color:red;
}
2.类名选择器：选择页面中类名为的全部元素。
语法：.类名{
样式名:样式值;
}
3.后代选择器：****
元素一 元素二{ }
4.群组选择器：
元素一,元素二…{ }
5、通用选择器
*{
Width:100px;
}
6、交叉选择器：选择类名一样的其中的一个标签
tabName.className{}
7、子类选择器
E>F{}
.box >div
8、兄弟选择器
E+F 相邻的兄弟元素
9、伪类选择器（选中元素的一种状态）：
1、：hover{} 选中元素的鼠标移入状态
2、:Link{} 默认时的状态
3、:active{} 跳转点击时的状态
4、:visited{} 访问过后的状态
三．伪元素选择器（选择不存在的元素）
1**、*****::before{content:” ”;} **** **在内容之前添加的伪元素（行内元素）
2**、*****::after{content:” ”;} **** 在内容之后添加的伪元素**
3**、*****::first-letter{content:” ”;} **** **在内容中添加首字母的伪元素
4**、*****::first-line{content:” ”;} **** **在内容中添加行的伪元素
定义属性时：必须**content:” ”; **转换块元素
四、结构伪类：
.box{}****
1**、.box p:nth-child(1){} 作为box中里面第一个子元素的P标签
2、.box p:nth-last-child(3){} 作为box中里面倒数第三个子元素的P标签
3、.box p:nth-first-child{} 作为box中里面第一个子元素的P标签
4、.box div:nth-of-type(1){} 作为box中里面同类型的第一个子元素的div标签
5、.box div:nth-last-of-type(1){} 作为box中里面同类型的第一个子元素的div标签
6、.box div:nth-first-of-type{} 作为box中里面同类型的倒数第一个子元素的div标签
7、.box div:nth-child(1){} 作为box中里面第一个子元素的div
8、.box div:last-child{} 作为box中里面倒数第一个子元素的div
9、.box div:first-child{} 作为box中里面第一个子元素的div
10、.box div:empty{} 选中一个没有内容的div（一切元素都没有的时候）
11、 html:root{} 选中根元素
12、 .box div:only-child{} 选中元素的唯一元素（比.box div的优先级别高）
13、.box div:only-of-type{} 选中元素的唯一同类型元素
样式表的引入方式：
1.外链式样式
2.嵌入式样式表
3.行内样式表
行内样式优先级最高。嵌入式和外链式的优先级由引入页面中的顺序决定，离元素越近，优先级越高。****
** **
A B C D E
1 2 3 3 0
-----------------------------------------------------------------------------------------------
A style
B ID 选择器的数量
C class类名选择器的数量/ 伪类选择器的数量/属性选择器的数量
D 标签选择器的数量/伪元素选择器的数量
E 通用选择器
---------------------------------------------------------------------------------------------------
ID 选择器的优先级：100（#代表id）
类名选择器的优先级：10
标签选择器的优先级：1
选择器的优先级原则：越具体优先级越高。
五**.盒子模式：**
content(width,height)
padding(内填充，内容和边框的距离)
border(边框)
margin（外间距 元素和元素之间的距离）
** **
margin:0 auto :让块元素在父元素中水平居中
text-align:行内元素水平方向的对齐元素
line-height:120px;定义行高
margin:50px 100px 上下 左右
margin:50px 100px 50px 上 左右 下
margin:50px 100px 200px 300px 上右下左
** **
** **
盒子模型中的一些问题：****
1. 默认情况下大部分元素的margin\padding都为0，但是有一些元素的margin\padding不为** 0.比如说：h1-h6标签\P\body\ul,li\ol,li\dl dt dd******
2. 相邻的两个块元素的margin值会重合。值会取得最大值。****
3. 行内元素的margin只有左右没有上下。****
4. margin可以设置为负数，padding不可以。
5. 当两个元素发生嵌套关系，如果父元素没有上边边框，上padding值，父子之间没有其他内容。此时子元素的margin-top值回作用到父元素身上。（解决方法一：给父元素加padding-top来代替子元素加margin-top；解决方法二：给父元素添加****overflow:hidden/*超出部分：隐藏/）*
** **
** **
六．float浮动****
原理：让元素脱离文档流。
解决：块元素独占一行。
浮动的子元素撑不开父元素
1.给父元素添加 overflow:hidden;
2clear:left/right/both;在父元素最后添加一个拥有清除浮动属性的子元素.
.box::affter{
Content:””;
Display:block;
Clear:both;
}
浮动之后宽度会自动参照内容。
字体：font-weight:normal 正常不加粗
bold加粗
100-900（单位，加粗程度）
Padding-left:2em; 当前字体的2倍 em指字数的二倍
所有字体的设置都可以被继承****
auto:高度参照内容元素
宽度参照父元素 子元素的border+padding+margin值不会大于父元素
box-sizing:border-box 容器的宽高变成实际尺寸
cursor**：**pointer;鼠标样式手型
List-style:none; 清除列表样式
Border-radius:3px 边框的半径
Max-height 最大高度
Min-height 最小高度
Display:none; 超出部分消失 // display:block; 超出部分出现
Visibility:hidden ; 超出元素隐藏 // visibility:visible 超出部分出现
** **
** **
CSS3样式
1.过渡（transition）：
transition:all /width 1s ease/ease-in/…/linear[匀速] 1s;
样式 过渡时间 [时间函数,默认ease] [延迟]
Transition-property:width height;
Transition-duration:1s;
Transition-timing-function:linear;
Transition-timing-function:cubic-bezier(0.98,0.38,0.21,1.06) 贝塞尔曲线
Transition-delay:initial;
Transition-delay:1s;****
1. ** 2D****（transform）******
(1)平移
样式名：transform;
样式值：translate;(x,y)平移 / translateX(number); /translateY(number);
1. 旋转****
** Rotate(value); 角度45deg/-45deg rad弧度 turn圈数**
(3)缩放
** Scale(x,y) scaleX(value) ScaleY(valuer)******
1. 斜切****
** Skew(x,y) SkewX(value) skexY(value)******
** **
** **
**Box-shadow:0 10px 10px 5px rgba(0,0,0,1) ******
阴影：Box-shadow
Box-shadow:;****
X轴偏移量
Y轴偏移量
阴影的模糊程度****
阴影的大小****
阴影的颜色****
[inset]****
** **
** **
1. ** 3D******
**场景：Perspective:500px; 灭点 /perspective-origin：**x,y 观察者的位置
平移：沿z轴平移** Transform:translateZ(length); trsnslate3d(length,length,length)******
旋转：transform:rotateY/X/Z(*turn); / **** rotate3d(0,0,0,angle) **** / ****Transform-origin: Top content left;
-
rotate3d(1,0,1,45deg) 改变圆点
-
Transform-style:preseve-3d 保持3d效果
动画：
@keyframes animation1(*动画1){
From/0%{
Width:100px;
Height:100px;
Border-radius:50%;
}
To/100%{
Width:200px;
Height:200px;
Border-radius:0;
}
.box{
Animation:animation1 2s ease 0s;
Forwards 2;
}
}
**渐变：**background-image
-
**线性渐变：**background-image:repeating-linear-gradient(to right/45deg, red 50%,green,blue);
-
重复渐变 默认上
-
径向渐变：background-image：****repeating-radial-gradient(red 50%,green 70%);
颜色的表示方式：
1. 颜色的单词：black,pink,yellow等等；
2. 十六进制的色值：#000 #fff #202020等等；
3. RGB(red,green,blue的程度（0-255）)：RGB(255,0,0)红色 RGB(0 255 0)绿色 RGB(000) 黑色 RGB(255,255,255)白色
4. Rgba([0-255] [0-255] [0-255] [0-1]设置成0为透明色)
** **
背景图****
Background-image:url(“…/img/**.jpg”)
Background-color:pink;（背景颜色）
Background-size:200px auto:背景图尺寸 仅有200px 值为背景图的宽度
Background-size:cover; 覆盖铺买整个界面
Background-size:contain; 背景图片优先，最大程度的呈现图片（背景图为图片的原尺寸）
Background-repeat:no-repeat; 取消重复设置
Background-repeat:repeat-x/y; 在x轴或y轴重复设置
Background-position:100px 100px; 背景图片的定位(100px为x轴和y轴的数值)
Background-position:right bottom; 背景图片在右下角
Background-position:right ; 背景图片在右中
Background-origin:border-box; 盒子背景图的渲染位置
Border-box 边框内 / padding-box 内填充内（默认） / content-box 内容内
Background-clip:content-box; 盒子背景图裁剪位置
Border-box 边框外裁剪（默认） padding-box content-box
Background-attachment:fixed(固定);
图片精灵（雪碧图）
.fanke1{
width: 113px;
height: 42px;
border: 1px solid red;
text-align: center;
margin: 0 auto;
margin-top: 200px;
background-image:url(‘…/img/spritesbgtop.png’) ;
background-repeat: no-repeat;
background-position: 0 -581px;
}
定位**(position)脱离文档流：**
1. 相对定位**(relative)******
相对自身去定位。保留原来的位置（文档层中的位置）****
1. 绝对定位**(absolute)******
相对于“拥有定位属性（样式）”的父元素去定位。如果父元素没有定位属性，会一直向上一级寻找，直到找到拥有定位属性定位的元素停止。如果一直找不到相对于html定位。完全脱离文档流。****
3.固定定位(fixed)****
相对于浏览器的四个边去定位**.完全脱离文档流**
定位的元素会多出五个样式：****
Top right bottom left z-index(层级)****
** **
** **
定位的居中方式：****
1. 水平居中****
2. position:absolute;****
** Top:0;******
** Left:50%;******
** Margin-left:50%;******
1. position:absolute;****
Top:0;****
Left:0;****
Right:0;****
Margin:0 auto;****
·left权重比right权重高****
** Top权重比bottom权重高**
1. 垂直居中****
** (1)Position:absolute;******
** Top:0;******
** Margin-top:-50px;******
** (2)Position:absolute;******
** Top:0;******
** Bottom:0;******
** Margin:0 auto; ******
1. 绝对居中** ******
(1)position:absolute****
** Top:50%;******
** Margin-top:-50px;******
Left:50%;****
Margin-left:-50pxs;****
** **
(2)position:absolute****
** Top:0;******
Right:0;****
Bottom:0;****
Left:0;****
Margin:auto;****
** **
** **
***Cursor:pointer 鼠标经过时变成手型
***list-style:none 清除列表样式
**Outline:none ******
***border-radius:50% 矩形转换为圆
**.box:hover .bottom{} box的子元素移入【只能是子元素】 ******
Opacity:0/1;透明度
** **
Ctrl+f查找
****
移动端口****
视口：viewport
缩放：Initial-scale=1.0,maximum-scale=1.0,user-scalable=0(不允许用户进行缩放)
布局视口：屏幕分配出来可供用户布局的范围。一般是980px。
视觉视口：设备屏幕的大小。
理想视口：<meta name=”viewport” content=”Initial-scale=1.0,maximum-scale=1.0,user-scalable=0”>
像素
物理像素：屏幕理所能呈现的最小颜色单元。
逻辑像素：固定的大小
css像素：css样式表里所写的像素
Web css像素==逻辑像素==物理像素（浏览器不放大的情况下）
移动端>css像素>逻辑像素
弹性布局：display:flex
父元素称作为容器，子元素称作为项目，宽度被子元素平分，高度为 auto参照父元素
引入方式：@import url(“base css”)
**是否换行：****flex-wrap:**wrap（换行）/no warp(默认不换行)/warp-reverse（反向换行，第一行在下）
**在主轴的对齐方式：justify-content:**flex-start（轴开始的位置）/center（轴中心）/flex-end（轴结束位置）/Space-between（两端对齐）/space-around(平均分配) ****
**主轴方向排列：****flex-direction:**row(行) row-reverse(行反向)/ column(列) column-reverse
主轴方向row从左到右，row-reverse从右到左
Column从上到下 column-reverse 从下到上
** **
**项目在单行的对齐方式，单行操作:**align-items:**flex/flex-end/center/baseline
Flex 轴开始
Center 轴中心（在一行内居中）
Flex-end 轴结束
Baseline 基线
**项目在多行的对齐方式，多行操做：**Align-content:**flex-start/center/flex-end/space-between/space-around
对项目的操作：order:0(默认为0，容器中的项目从小到大排列)
**放大项目：****flex-grow:**0;(默认为不放大为0)
**缩小项目：****flex- Shrink:**1;(默认为1)
**项目自身对齐：**Align-self:**flex-start/center/flex-end/space-between/space-around;
**项目宽度：Flex-basis:**200px;相当于width:200px;
Git分布式版本控制工具
工作区 暂存区（本地仓库） 远程仓库
Cd 打开指令后边空格
Cd 打开指令后边空格
Git分布式版本控制公具
Cd 打开指令后边空格
Git分布式版本控制公具
工作区 暂存区(本地仓库) 远程仓库
Cd 打开指令后边空格
Git分布式版本控制公具
工作区 暂存区(本地仓库) 远程仓库
Git clone克隆 git clone http//.
Cd 打开指令后边空格
Git分布式版本控制公具
工作区 暂存区(本地仓库) 远程仓库
Git clone克隆 git clone http//.
Git add . (添加 .代表新建以及修改过得文件)
Cd 打开指令后边空格
Git分布式版本控制公具
工作区 暂存区(本地仓库) 远程仓库
Git clone克隆 git clone http//.
Git add . (添加 .代表新建以及修改过得文件)
Git Status( 查看创建的文件状态) git commit –m”初始化”
Cd 打开指令后边空格
Git分布式版本控制公具
工作区 暂存区(本地仓库) 远程仓库
Git clone克隆 git clone http//.
Git add . (添加 .代表新建以及修改过得文件)
Git Status( 查看创建的文件状态) git commit –m”初始化”
Git push 回车(推送) git log 查看历史版本 git reset --hard
Cd 打开指令后边空格
Git分布式版本控制公具
工作区 暂存区(本地仓库) 远程仓库
Git clone克隆 git clone http//.
Git add . (添加 .代表新建以及修改过得文件)
Git Status( 查看创建的文件状态) git commit –m”初始化”
Git push 回车(推送) git log 查看历史版本 git reset --hard
桌面创建coding文件夹
Cd 打开指令后边空格
Git分布式版本控制公具
工作区 暂存区(本地仓库) 远程仓库
Git clone克隆 git clone http//.
Git add . (添加 .代表新建以及修改过得文件)
Git Status( 查看创建的文件状态) git commit –m”初始化”
Git push 回车(推送) git log 查看历史版本 git reset --hard
桌面创建coding文件夹
Cd空格(coding文件夹地址)
Cd 打开指令后边空格
Git分布式版本控制公具
工作区 暂存区(本地仓库) 远程仓库
Git clone克隆 git clone http//.
Git add . (添加 .代表新建以及修改过得文件)
Git Status( 查看创建的文件状态) git commit –m”初始化”
Git push 回车(推送) git log 查看历史版本 git reset --hard
桌面创建coding文件夹
Cd空格(coding文件夹地址)
Git空格clone空格coing网页地址
Cd 打开指令后边空格
Git分布式版本控制公具
工作区 暂存区(本地仓库) 远程仓库
Git clone克隆 git clone http//.
Git add . (添加 .代表新建以及修改过得文件)
Git Status( 查看创建的文件状态) git commit –m”初始化”
Git push 回车(推送) git log 查看历史版本 git reset --hard
桌面创建coding文件夹
Cd空格(coding文件夹地址)
Git空格clone空格coing网页地址
Cd空格xiaomi 5. git add空格.
**
H5表单控件
<Form action=”index.php” method=”/get/post” enctype="multipart/form-data">
提交方式
<input type=”text”name=”username” value=”” required minlength=”5” maxlength=”10” readonly auto/autocomplete =”off”(自动补充开关)><br>
属性 名字 属性值 必填项 最少输入字符数 最多输入字符数 只读
密码:<input type=”password” name=”password” value=”123456”><br>
男:<input type=”radio” name=”sex”value=”1”>
女:<input type=”radio” name=”sex” value=”0”><br>
爱好：<input type=”checkbox” checked(默认选中) name=”hobby” value=”0”>游泳
<input type=”checkbox” name=”hobby” value=”1”>轮滑
<input type=”checkbox” name=”hobby” value=”2”>篮球<br>
文件：<input type=”file” multiple(多选)>
下拉框：
<select name=”city” id=”” size=”2”(框内显示个数)>
<option value=”0”>上海</option>
<option value=”1” selected(默认选中)>北京</option>
<option value=”2”>广州</option>
</select>
简介：<textarea name=”info” id =”” cols=”30”(字数) rows=”10”（行）></textarea>
数字：<input type=”number” name=”number” max=”10” min=”0” step=”2”(步进值)>
滑块：<input type=”range” name=”number” max=”10” min=”0” step=”2”(步进值) value=”1”>
日历：<input type=”date”>/<input type=”month”>/<input type=”week”>/<input type=”time”>
年 年+月 年+周 年+时间
颜色 ：<input type=”color”>
网址：<input type=”url”required>
邮箱：<input type=”email”>
电话：<input type=”tel”>
搜索：<input type=”search”>
提示：<input type=”text” value=”” autofocus placeholder=”请输入用户名”>
提示信息
提交:<input type=”submit”disabled (不可使用)>
按钮：<input type=”button”>
重置：<input type=”reset”>
<label for="IDName">姓名：</label>
</form>