代码拉取完成，页面将自动刷新
# 2019-07-22
一、联系方式
name:韩强
tel/wx:13866130652
QQ:95243611
二、软件安装
HBuilder
Webstrom
FireFox
google
notePad++ 记事本
三、课程体系
课程：
1、html+css+js+手机端页面
2、jquery+nodejs+小程序
3、vue.js
四、HTML记事本开发
1、打开记事本
2、在记事本中编写html标签
3、保存文件类型(后缀).html
4、使用浏览器打开html文件
五、html常用的标签
1、<html>:html文档的根目录
2、<body>:html文档的主体
3、<meta>:html文档的描述性标签
4、<title>:标题标签
5、<p>:段落标签 块元素
6、<div>:块元素标签 块元素
7、<h1>-<h6>:标题标签 块元素
8、<a>:超链接标签 行内元素
9、<hr>:水平线 块元素
10、<!-- -->:html注释
11、<strong>:文字加粗标签 行内元素
12、<em>、<i>:文字斜体 行内元素
13、<span>:空标签，默认是行内元素
六、代码规范
1、大小写：建议小写（特殊部分除外）
2、缩进：使用tab
3、正确嵌套标签：不能链式嵌套
4、双引号和单引号：双引号
#2019-07-24
一、特殊符号
1、 空格
2、> >
3、< <
4、" "
二、img
<!-- .. 代表当前这个文件demo3.html所在文件夹html的上级20190724目录 -->
<img src="../img/jerry1.jpg" alt="图片找不到时显示的内容" title="猫和老鼠" width="100" height="100"/>
1、../ 代表当前文件demo3.html所在文件夹html的上级20190724目录
2、src：表示图片资源的位置
3、alt：当图片异常时显示的内容
4、title：鼠标悬停时显示的内容
5、width：设置的图片的宽度 默认px
6、height:图片的高度 默认px
三、a链接
<a href="https://www.sohu.com" target="_self" >我的青春我做主</a>
<a href="tom.html" target="_blank">
<img src="../img/jerry1.jpg" title="Tom and Jerry"/>
</a>
<a href="mailto:95243611@qq.com">联系我们</a>
1、a标签主要用来进行页面跳转或数据请求
2、href属性表示请求资源及资源所在的位置
3、target属性表示在何处显示资源，_self、_blank
4、a标签中经常使用一些图片作为链接资源
5、a标签还可以链接自己页面中的资源位置，称a为锚链接
6、功能性链接
四、元素
1、从开始标签开始到结束标签结束，包含的所有内容，称元素，元素必须是标签。
自闭合标签是元素
2、元素的分类
·块元素(block)
默认占一整行，哪怕没有填充一整行的内容。
·行内元素(inline)
默认是在同一行中显示,当内容在一行中无法存放才换行
<span>,<a>,<img>...
不能设置宽和高属性
3、元素的显示方式是可以设置的
#2019-07-26
一、使用hbuilder创建项目
1、新建项目
文件--->新建--->项目
填写项目名称：要求小写字母，项目名称要有意义
选择工作空间目录
选择创建html项目
2、项目的结构
-img
-css
-js
-index.html
3、运行和预览html文件
运行--->运行到浏览器--->选择要使用的浏览器
点击右边的预览可以预览当前的页面
二、CSS
1、Cascading Style Sheet 级联样式表
2、历史
1996 1.0
2004 2.1
2010 3.0
3、优势
·文件内容和表现的分离
·提高代码从重用
·提高程序的执行效率
·便于搜索引擎的抓取
4、行内样式
定义在开始标签中的style属性里
<p style="color:red;">demo1.html</p>
5、内部样式
定义在style标签中
<style>
p{
color:blue;
边框
border:1px solid blue;
}
</style>
6、外部样式
·定义在外部的demo.css文件中，使用link标签属于html范畴 先加载
<link href="../css/demo.css" rel="stylesheet" type="text/css"/>
·定义在style标签中使用 @import 属于css范畴 后加载
<style>
@import url("demo.css") ;
</style>
7、优先级
行内>内部>外部
就近原则
样式冲突时才有优先级，否则是层叠样式，是累加效果
三、基本选择器
1、标签选择器
使用html的标签作为选择器，h1 ，body，p,a... 匹配当前页面中的所有tag标签
匹配页面中的所有p元素
p{
background:blue;
}
匹配所有的h1
h1{
font-size:12px;
}
2、类选择器
给元素添加class属性，可以有多个类名，可以在不同的标签中重复使用
<p class="code pt">加载类属性的p段落</p>
<h1 class="code">加载类属性的h1</h1>
3、id选择器
给元素添加id属性，id属性值在页面中只能唯一，
即使浏览器可以正确显示，也不可重复使用定义
<p id="code" class="code p1">加载id属性的p段落</p>
<h1 id="code" class="code">加载类属性的h1</h1> ：不能重复定义和使用id属性
4、优先级
id>class>tag
四、层次选择器
1、后代选择器
E F：E元素中的所有F元素。包括子、孙元素
2、子选择器
E>F: E中的直接子类F元素。只包括子元素，不包括孙及以下的元素
3、相邻兄弟选择器
E+F: E后面第一个F兄弟元素
4、兄弟选择器
E~F： E后面的所有F兄弟元素
五、属性选择器
1、[attr] 有属性attr的所有元素
2、E[attr] 有属性attr的所有元素E
3、E[attr=value] 有属性attr且值为value的元素E
4、E[attr^=value] 有属性attr且开头为value的元素E
5、E[attr$=value] 有属性attr且以value结尾的元素E
6、E[attr*=value] 有属性attr且包含value的元素E
六、字体样式
1、font-family：字体类型
2、font-size：字体大小
3、font-weight：字体的粗细
4、font-style：字体风格
5、font：字体 style weight size family顺序
七、文本样式
1、color:文本颜色
2、text-align:文本对齐，左，中，右
3、text-indent：文本缩进
4、text-decoration:文本修饰
5、line-height:行高
6、letter-spacing：字符间距
7、word-spacing：单词间距
8、vertical-align:垂直对齐方式
八、a标签伪类样式
1、a:link：鼠标未点击
2、a:visited:鼠标点击后
3、a:hover:鼠标悬停
4、a:active:鼠标点击未松开
love-hate顺序规则
hover效果可以使用到任意元素：div:hover .pt:hover p:hover...
九、列表样式
1、list-style
常用的值
none 没有样式
disc 实心圆
circle 空心圆
decimal 数字
square 方块
十、背景设置
1、背景色
background-color: yellow;
2、背景图
background-image:url("../img/pic.png");
网络图片
background-image:url("https://gitee.com/assets/homepage/illus_hero.png?t=1561111735894");
3、背景图片重复
background-repeat:no-repeat;
repeat-x： 背景图像在横向上平铺
repeat-y： 背景图像在纵向上平铺
repeat： 背景图像在横向和纵向平铺
no-repeat： 背景图像不平铺
round： 当背景图像不能以整数次平铺时，会根据情况缩放图像。（CSS3）
space： 当背景图像不能以整数次平铺时，会用空白间隙填充在图像周围。（CSS3）
4、背景图片位置
background-position: -500px -500px;
background-position: -50% -50%;
background-position: center right;
5、背景图片的大小
background-size: 100% 100%;
6、背景(background-size要单独设置，不可设置在当前的background中)
background: url("../img/pic.jpg") round center right yellow;
#2019-07-29
一、列表
ul 、ol 、dl
二、表格
table：表格标签，块元素
tr： 表格的行 块
th：表格的头部，默认有样式 行内块
td：表格的单元格，cell，行内块
border="1"
cellspacing="0"
cellpadding="0"
demo:
<!-- 1、table -->
<table class="tb" border="1" cellspacing="0" cellpadding="0">
<!-- 2、tr -->
<tr>
<!-- 3、th -->
<th>序号</th>
<th>姓名</th>
<th>年龄</th>
<th>分数</th>
<th>备注</th>
</tr>
<tr>
<!-- 3、td -->
<td>1</td>
<td>狗娃</td>
<td>18</td>
<td>72.8</td>
<td></td>
</tr>
<tr>
<td>2</td>
<td>狗胜</td>
<td>19</td>
<td>73.8</td>
<td></td>
</tr>
<tr>
<td>3</td>
<td>赵四</td>
<td>17</td>
<td>76.8</td>
<td></td>
</tr>
<tr>
<td>合计</td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</table>
合并单元格
<td colspan="5">223.4</td> 合并列
<td rowspan="2">T100</td> 合并行
三、表单
1、html中使用form定义表单
2、表单域：表单中的各个模块，是根据表单元素的属性不同而具有不同特征
常用的表单域:
1、文本框
2、密码框
3、单选框
4、复选框
5、下拉框
6、文件域
7、日期域
8、文本域<textarea>
9、提交按钮
10、重置按钮
11、隐藏域
3、编写form表单
<form action="demo1.html" method="get">
<input type="hidden" name="id" value="1"/>
<!-- 用户名 -->
<div>
<label for="userName">用户名</label>
<input placeholder="输入用户名" required type="text" name="userName" class="userName" id="userName"/>
<span>*</span>
</div>
<!-- 密码 -->
<div>
<label for="password">密码</label>
<input type="password" name="password" id="password" class="password" required placeholder="输入密码"/>
<span>*</span>
</div>
<!-- 性别单选框 -->
<div>
<label>性别</label>
<input type="radio" name="gender" value="男" checked/>男
<input type="radio" name="gender" value="女"/>女
<span>*</span>
</div>
<!-- 爱好复选框 -->
<div>
<lable>爱好</lable>
<input type="checkbox" name="hobby" value="LOL"/>LOL
<input type="checkbox" name="hobby" value="王者"/>王者
<input type="checkbox" name="hobby" value="吃鸡" checked/>吃鸡
<input type="checkbox" name="hobby" value="飞车"/>飞车
<span>*</span>
</div>
<!-- 生日 -->
<div>
<label for="birthday">生日</label>
<input type="date" id="birthday" name="birthday"/>
<span>*</span>
</div>
<!-- 电话 -->
<div>
<label for="phone">电话</label>
<input type="tel" id="phone" name="phone" placeholder="输入电话"/>
<span>*</span>
</div>
<!-- 邮箱 -->
<div>
<label for="email">邮箱</label>
<input type="email" id="email" name="email" placeholder="输入邮箱"/>
<span>*</span>
</div>
<!-- 个人评价 -->
<div>
<label for="resume">个人评价</label>
<textarea id="resume" cols="20" rows="10" style="vertical-align: middle;"></textarea>
<span>*</span>
</div>
<!-- 城市 -->
<div>
<label>所属城市</label>
<select id="province" name="province">
<option value="ah">安徽</option>
<option value="zj">浙江</option>
<option value="js">江苏</option>
<option value="jx">江西</option>
</select>
省
<select id="city" name="city">
<option value="hf">合肥</option>
<option value="hz">杭州</option>
<option value="nj">南京</option>
<option value="nc">南昌</option>
</select>
市
<select id="district" name="district">
<option value="bh">滨湖</option>
<option value="xh">西湖</option>
<option value="jy">建邺</option>
<option value="lcq">老城</option>
</select>
区
</div>
<!-- 头像 -->
<div>
<label for="pic">头像</label>
<input id="pic" type="file" name="pic"/>
<span>*</span>
</div>
<!-- 提交和重置 -->
<div>
<input type="submit" value="Submit"/>
<input type="reset" value="Reset"/>
</div>
</form>
http:
//localhost:63342/
ui12_css_20190729/
html/
demo1.html?
userName=root123
&
password=root123
4、get和post的不同
get方式提交数据时，url中会显示提交的信息，不安全，同时提交数据的大小有限制，不能提交文件
post方式url中不显示提交的信息，安全，提交数据大小没有限制，可以提交文件，文件上传必须使用post方式
5、多文件上传要求
method='post'
enctype="multipart/form-data"
http://localhost:63342/ui12_css_20190729/html/demo1.html?
id=1&
userName=root123&
password=root123&
gender=%E7%94%B7&
hobby=LOL&
hobby=%E7%8E%8B%E8%80%85&
hobby=%E5%90%83%E9%B8%A1&
birthday=2019-07-30&
phone=13877778888&
email=hao123%40qq.com&
province=ah&
city=hf&
district=bh&
pic=pic.jpg
#2019-07-31
一、盒子模型
1、页面中的任意一个元素都可以看成一个盒子(box)，这个盒子就是盒子模型
2、盒子模型包含的部分
·元素的内容 content
·元素的边框 border
·元素的内边距 padding
·元素的外边距 margin
二、边框样式
边框有四个方向：top、right、bottom、left
1、border-style
none： 无轮廓。当定义了该值时，border-color将被忽略，border-width计算值为0，除非边框轮廓应用了border-image。
hidden： 隐藏边框。
dotted： 点状轮廓。
dashed： 虚线轮廓。
solid： 实线轮廓
double： 双线轮廓。两条单线与其间隔的和等于指定的border-width值
groove： 3D凹槽轮廓。
ridge： 3D凸槽轮廓。
inset： 3D凹边轮廓。
outset： 3D凸边轮廓。
border-top-style: dotted;
border-right-style: solid;
border-bottom-style: double;
border-left-style: groove;
4个值：top,right,bottom,left
3个值：top,right-left,bottom
2个值：top-bottom,right-left
1个值：全部
border-style: groove;
2、border-color
border-top-color: red;
border-right-color: green;
border-bottom-color: blue;
border-left-color: yellow;
border-color:red green blue yellow;
3、border-width
border-top-width: 5px;
border-right-width: 10px;
border-bottom-width: 15px;
border-left-width: 20px;
border-width: 5px 10px 15px 20px;
4、border(没有顺序)
border: 1px red solid;
三、外边距
margin:边框向外延申的间距
margin-top: 10px;
margin-left: 10px;
margin-right:10px;
margin-bottom: 10px;
margin: 30px 20px 10px 5px;
四、内边距
内容与边框直间的间距
padding: 10px 20px 30px 10px;
padding-top: 20px;
padding-left: 20px;
padding-right: 20px;
padding-bottom: 20px;
五、盒子类型
box-sizing
content-box:内容盒子模型，width和height是内容的宽高，这种盒子模型是浏览器默认的模型
.box1{
box-sizing: content-box;默认，可以省略
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
}
border-box:边框盒子模型，width是左边框到右边框的距离，height是上边框到下边框距离
.box {
box-sizing: border-box;
border: 1px solid black;
width: 100px;
height: 100px;
text-align: center;
}
六、块和行内元素的区别
1、行内不能设置width和height，width由内容自动撑开，可以设置margin和padding
2、块元素默认占父级元素的width的100%，占一整行，可以设置width和height，margin和padding
3、使用display属性可以修改块为行，修改行内为块。
4、一般情况下，块可以嵌套行内元素，反之不成立。
七、display
1、none
不显示
2、block
按块显示
3、inline
按行内元素显示
4、inline-block
按行内块元素显示
#2019-08-01
一、浮动 float
1、属性值
none
left
right
2、浮动元素的特性
脱离文档流，父级元素会塌陷，元素自身会缩小到最小，浮动元素之间没有间隙
3、浮动常用的场合
导航列表
图文混排的行内平铺
二、清除浮动 clear
1、属性值
left
right
both
2、作用
主要是解决元素的塌陷
三、解决父类元素的塌陷
1、给父级元素设置固定的高度
.container {
border: 1px solid blue;
1、通过设置元素的宽高解决塌陷
height: 150px;
4、使用overflow属性
overflow: hidden;
}
2、在浮动元素后面添加空div
<div class="container clearFix">
<img src="../img/webpack.png"/>
<img src="../img/react.png"/>
<div class="empty"></div>
</div>
.empty {
clear: both;
padding: 0;
margin: 0;
}
3、使用伪类样式
<div class="container clearFix"></div>
.clearFix:after {
content: "";
display: block;
clear: both;
}
4、使用overflow属性
.container {
border: 1px solid blue;
/*4、使用overflow属性*/
overflow: hidden;
}
#2019-08-02
一、定位 position
属性值
static 默认
relative 相对自己原来位置定位
absolute 相对第一个加定位的父级元素
fixed 固定定位，相对于窗口
二、如何移动定位元素
top:在元素上部设置尺寸
right：在元素的右边设置尺寸
bottom：在元素的底部设置尺寸
left：在元素的左边设置尺寸
以上的值可以是负值，也同时设置1个或2个
三、z-index
元素在z轴上的层级，朝向你的方向为正，朝向电脑屏幕的方向为负值，默认是0
注意：一定要和定位属性同时使用，否则没有效果
四、relative
1、没有脱离文档流
2、自己的原来位置被保留
3、对周边的元素和父级元素没有影响
.box2 {
background-color: blue;
position: relative;
/*top: -50px;*/
/*right: -50px;*/
bottom:50px;
left:50px;
z-index: 0;
}
五、绝对定位 absolute
1、清浮动，解决不了父级元素塌陷，要设置高度解决
2、绝对地位元素脱离文档，会漂浮在父级元素之上，多个会层叠
3、元素的原有位置被占
六、固定定位 fixed
相对浏览器的边框进行定位
#2019-08-08
一、变型 transform
translate()：平移函数，基于X、Y坐标重新定位元素的位置
scale()：缩放函数，可以使任意元素对象尺寸发生变化
rotate()：旋转函数，取值是一个度数值
skew()：倾斜函数，取值是一个度数值
二、修改元素旋转的基准点
transform-origin:0 0;
1、 可以设置 x,y,z三个轴的位置,默认的基准点是几何中心
2、数值类型
1) 50px 30px;
2) left bottom;
3) 100% 100%;
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。