HTML4介绍
超文本标记语言，扩展名.html和.htm，文件名称区分大小写，标签都是成对出现的，标签里面的代码是不区分大小写的，属性先<br />后无顺序，值要用单双引号引起来，代码里不支持空格（支持一个空格，因为英文单词区分为一个空格）和回车的。<br /> 标签写作：<br /> 1.<!--注释--><br /> <!--<br /> 页面：复习HTML4内容<br /> 作者：魏老师<br /> 时间：2018年3月6日<br /> --><br /> 2.<!DOCTYPE html>注记 编译HTML翻译给计算机，当前写法版本是HTML5 <br /> 3.<html>主标签 其它标签都包含在HTML里面<br /> 4.<head>头部 窗体内容和外部导入的文件<br /> 5.<body>身体 页面上现实的东西都放在这里<br /> 6.<meta charset="UTF-8"> 修改字符集 iso8859-1欧美字符集 gbk简易中文 big5繁体字 utf-8本地字符集<br /> 7.<title></title> 窗体名称<br /> 8.<h1>~<h6>标题标记 1最大 加粗换行文字变大效果<br /> 9.<p>段落标记 自动填充行间距和行高 同级换行<br /> 10.<span>行级文字 同级不换行 可以嵌套在<p>里面进行变色等操作 <br /> 11.<a href="#"></a>超链接 href定义路径 #空链接 防止你页面跳转<br /> 绝对路径：http://www.baidu.com D://text/work.html（不建议使用）<br /> 相对路径：定义文件名称和文件夹名称，不同路径下要用../返回上一级<br /> 12.<img src="">图片<br /> src定义路径 <br /> jpg静态图 png退底图 gif 动态图<br /> 13.列表<br /> 无序列表 <br /> <ul type="square"><br /> <li>计算机</li><br /> <li>小说</li><br /> <li>漫画</li><br /> <li>诗集</li><br /> </ul><br /> type定义排序方式 dic实心圆 circle空心圆 square方块<br /> 有序列表<br /> <ol type="a"><br /> <li>男装</li><br /> <li>童装</li><br /> <li>女装</li><br /> <li>女装</li><br /> </ol><br /> type定义排序方式 1数字排序 a小写字母排序 A大写字母排序 i小写罗马排序 I大写罗马排序<br /> 14.表格<br /> <table>表格<br /> <tr>行<br /> <td>单元格 <br /> <th>标题单元格 居中加粗 <br /> 表格属性<br /> width宽度 单位：像素px或百分比%（百分比是其父类）<br /> height高度<br /> border边框 单位：正整数，默认为0 只能设置在table上<br /> align水平对齐 left左 center居中 right右 valign垂直对齐 top上 bottom下 middle中 <br /> cellpadding 内边距 文字与边框四周的距离<br /> cellspacing 外边距<br /> rowspan 跨行 单位：正整数<br /> colspan 跨列
表单
1.<input type="text">普通文本框<br /> 2.<input type="password">密码框<br /> 3.<input type="radio" name="sex">单选框<br /> 4.<input type="radio" name="sex">复选框<br /> 5.<select name="" id=""> 下拉框<br /> <option value="">学生</option><br /> <option value="">老师</option><br /> <option value="">程序员</option><br /> </select><br /> 6.<input type="file">上传附件<br /> 7.<textarea></textarea>文本域<br /> 8.提交按钮 <input type="submit"><br /> 9.重置按钮 <input type="reset"><br /> 10.图片按钮 <input type="image" src=""><br /> 11.表单<form></form><br /> 作用：1.用来跳转页面并传值<br /> 2.让按钮有点击事件<br /> action定义路径<br /> 表单属性<br /> 1.type定义表单显示类型<br /> 2.name定义名字，表单时通过name进行传值<br /> 3.value定义按钮名称 定义文本框的默认值<br /> 4.checked 定义选框为选中的状态<br /> <br /> <br />
CSS1-2介绍
层叠样式表，用来美化页面，试图将HTML和CSS代码相分离，代码写作简单，减少工作量，加快浏览器速度，css代码可以进行导出<br /> css注释 /*多行注释*/<br /> css语法 最近原则<br /> 行内样式 <h1 style="color: blue";font-family:'楷体'>这是一个h1标签内容</h1> 写在body里 更改一个标签<br /> 内嵌样式 <style> h2{color: blue;font-family: '楷体'} </style> 更改一个页面<br /> 外部应用样式 <link rel="stylesheet" href="../css/css6.css"> 写在head里 更改多个页面
css选择器
1.*{}通配符选择器
2.h1{}标签选择器
3..font{}类选择器，选择class属性
4.#text{}id选择器，选择id属性 唯一 优先级更高 id 属性只能在每个 HTML 文档中出现一次
5.ul li{}后代选择器
css字体属性
1.color文字颜色
定义单词：red 定义十六进制值：#0f0f0f 定义色阶值：rgb(255,0,1)
2.font-family文字类型 font-family:’楷体’ Arial 空格分开可以定义多个字体
3.font-size字体大小 单位：像素px或百分比% 浏览器默认12-14px
4.font-weight字体粗细 100-900 默认为400
5.font-style字体斜体 normal正常 italic斜体
字体修饰
1.letter-spacing字体间距 单位：像素px或百分比% 要比字体像素大 h1是30px
2.word-spacing单词间距 单位：像素px或百分比% 要比字体像素大
3.text-indent首行缩进 单位：像素px或百分比% 2个字符的像素
4.line-height行高 单位：像素px或百分比% 1:1.2/1.5 和父类一样
5.text-decoration文本装饰 none无 underline下划线 line-through删除线 overline上划线
6.text-align水平对齐 left right center 块级元素才可以
7.vertical-align垂直居中 top bottom middle sub上标 supper下标
同级元素文字大小不同才可用,必须要有参照物，如果想要一行文字大小相同的字对齐
可以设置行高等于父类高度 对齐是行高减去字体高度即大小，上下平分填充剩余像素
尺寸
1.width宽度 单位：像素px或百分比%
2.height高度 单位：像素px或百分比%
边框
1.border-weight边框粗细 单位：像素px或百分比%
2.border-style边框样式 none无边框 solid实线 dotted点线 dashed虚线 double双边线
3.border-color边框颜色 简写:border:1px solid red;
背景
1.background-color背景颜色
2.background-image：URL（“”）背景图片
3.background-repeat背景平铺方式 repeat平铺（默认） repeat-x水平平铺 repeat-y垂直平铺 no-repeat不平铺
4.background-position背景位置 方向：left right top bottom center 单位：像素px或百分比% 先x轴再y轴
5.background-attachment背景固定 scroll背景滚动 fixed背景固定
边距
1.内边距padding 单位：像素px或百分比%
2.外边距margin 单位：像素px或百分比%
单位：像素px或百分比% 方向：left right top bottom
例如：margin-left，padding-right
简写：margin：50px 100px 设置四边的距离 先上下后左右
margin：50px 100px 200px 设置四边的距离 上 左右 下
margin：50px 100px 200px 240px 设置四边的距离 上右下左（顺时针顺序）
作用：
1.用来调整浏览器默认空白
由于浏览器默认的空白大小不一致，所以调整浏览器兼容用 *{margin: 0px;padding: 0px;}
2.用来设置块级元素水平对齐
margin: 20px auto;
设置图片居中：
1.设置一个块级父类元素，让父类与图片有一个相同的宽度，设置margin: 0px auto;
2.设置一个块级父类元素，给父类设置text-align: center;
设置文字居中：
1.让行高等于父类高度
3.用边距设置四边距离大小一致可居中padding: 50px 80px;
浮动
1.float浮动
left左浮动 right右浮动
2.clear清除浮动（不浮动的才能设置）
left right both
3.overflow设置超出内容的显示方式
visible不见剪切也不添加滚动条 hidden超出隐藏 auto自动添加滚动条 scroll总是添加滚动条
注意：1.谁浮动，谁就脱离标准流，就会漂浮起来，让出原来的位置
2.当设置一个元素浮动，下面的元素会被浮动的元素盖住，可以设置不浮动的元素为清除浮动
3.当所有孩子都为浮动，父类就会没有高度（怎么解决）
（1）给父类设置一个高度，但是需要计算
（2）给父类里添加一个新的孩子，给当前孩子设置清除浮动
（3）给父类设置overflow：hidden/auto
选择器
关系选择器
1.ul>li{}子选择器
2.h1+p{}相邻选择器（下一个元素，兄弟元素）
3.div,#text,.d1{选择多个标签}
伪类选择器
1.a:link{}没访问的效果
2.a:visited{}被访问过的效果
3.a:hover{}鼠标悬停效果
4.a:active被选中的效果
顺序：hover必须写作link，visited之后，active必须写在悬停之后
定位：
1.position页面定位方式
static无特殊定位 absolute绝对定位 relative 相对定位 fixed 固定定位
2.z-index设置定位的层叠布局 单位：整数，默认为零，可以为负数
方向：left right top bottom
固定定位：会脱离标准流，会让原来的面积，永远按照父类会按照父类设置定位
绝对定位：会脱离标准流，会让原来的面积，如果没有父类会按照body进行定位，有父类会按照父类定位设置定位
相对定位：不会脱离标准流，永远参照自己进行定位
父类相对定位，孩子绝对定位，返回顶部和收藏固定定位
列表
1.list-style 设置元素的样式 none无样式 disc实心圆 circle空心圆 square方块 decimal数字
lower-roman小写罗马 upper-roman小写罗马 lower-alpha小写字母 upper-alpha大写字母
2.list-style-position设置列表对齐方式 outside对齐文字 inside对齐图形
3.list-style-image：url(“”)设置列表图片
元素的隐藏显示
1.visibility设置元素隐藏显示 visible可见 hidden隐藏
2.display设置元素显示方式 none隐藏 block显示成块级 inline显示成行级
区别：visibility的隐藏会保留当前元素原来的面积，display的隐藏不会保留面积
CSS3
文字
1.text-shadow文字阴影<br /> 例如：text-shadow：1px 1px 1px red<br /> 值的顺序：水平距离 垂直距离 模糊效果 颜色<br /> 2.word-wrap文本是否换行<br /> normal正常（默认） break-word换行<br /> 3.text-overflow文本是否显示省略<br /> clip裁剪 elipsis省略号<br /> 注意：如果想要显示省略号，必须要添加overflow：hidden；white-space：normal；不支持空格和回车
透明度
1.background-color：rgba(255,0,0,0.5)背景透明<br /> 透明度0-1之间的值，可以为小数<br /> 2.opacity透明度<br /> 透明度0-1之间的值，可以为小数<br /> 区别：前者设置的是背景透明，后者设置的是当前元素下所有元素透明
边框
1.border-radius边框圆角 单位：像素px或百分比% 方向：left right top bottom<br /> 简写：一个值：四边圆角 两个值：左上/右下 右上/左下 三个值：左上 右上/左下 右下 四个值：顺时针<br /> 2.box-shadow边框阴影<br /> 例如：box-shadow：1px 1px 1px red<br /> 写作顺序：水平距离 垂直距离 模糊效果 颜色
inset内阴影
背景（背景图片占有padding面积）
1.background-size 背景大小 单位：像素px或百分比% 方向：宽度 高度
2.background-clip背景裁切
border-box按边框裁切 padding-box按边距裁切 content-box按填充裁切 text按形状裁切（浏览器端支持不好）
3.浏览器前之前缀(可以写在所有css3之前)：
-webkit:谷歌 -moz：火狐 -o:欧朋 -khtml:苹果 -ms:IE
例如：-moz-background-clip:text
渐变色
1.线性渐变<br /> background: -webkit-gradient(linear,center top,center bottom,from(green),to(red),color-stop(0.4,#cccccc));<br /> 线性写作顺序：线性渐变，开始位置，结束位置，开始颜色，结束颜色，设置颜色的指定位置（0-1之间）<br /> background: -webkit-linear-gradient(left top,red,blue,#ccc);<br /> 写作顺序：开始位置，颜色1，颜色2，...<br /> 2.径向渐变<br /> background: -webkit-gradient(radial,100 100,30,60 60,200,from(red),to(blue),color-stop(0.4,#ccc));<br /> 写作顺序：径向渐变，内圆的中心点xy轴，内圆半径，外圆的中心点xy轴，外圆半径，开始颜色，结束颜色，设置颜色添加的指定位置可设置多个（0-1之间）<br /> background: radial-gradient(circle at 40px,red,blue);<br /> background: radial-gradient(circle at 50%,red,blue);<br /> 写作顺序：开始位置，颜色1，颜色2，...<br />
变换属性transform 里面的属性用空格隔开
1.translate（x，y）平移 单位：像素px或百分比% <br /> translateX x轴平移水平移动 translateY y轴平移垂直移动 只给一个值默认给x轴<br /> 2.scale（x，y）缩放 单位：数值，可以为小数，不可以为负数 只给一个值默认给x和y轴<br /> scaleX 宽度缩放 scaleY 高度缩放<br /> 3.skew（x,y） 单位：deg度<br /> skewX 水平扭曲 skewY 垂直扭曲 只给一个值默认给x轴<br /> 4.rotate（）旋转角度 单位：deg度 有正负 正顺时针负逆时针<br /> <br />
过渡
1.transition-property 指定要过渡的CSS属性<br /> all所有 none不指定<br /> 2.transition-duration过渡时间<br /> 单位：秒数s（可以有小数）<br /> 3.transition-timing-function动画类型<br /> linear线性(速度快) ease平滑(速度慢) ease-in由慢到快 ease-out由快到慢 ease-in-out由慢到快再到慢<br /> 4.transition-delay延迟时间<br /> 单位：秒数s<br /> 简写：transition:width 1s ease 2s; 默认none 0s ease 0s; <br /> 注意：transition变化不要写在动态hover里，要写在静态里，<br /> display不支持动画效果，visibility支持但是无过渡，<br /> opacity支持动画有过度效果<br />
3D变换 transform
1.translateZ（前后平移）<br /> 2.scaleZ（）厚度缩放<br /> 3.rotateX（）水平旋转 rotateY()垂直旋转 rotateZ（）中心轴旋转<br /> transform-style：preserve-3d 设置3D效果<br /> perspective立体视觉 单位：像素px或百分比%<br /> transform-origin移动中心点 方向:xyz 单位：像素px或百分比%<br />
自定义动画：
1.animation-name动画名称<br /> 2.animation-duration动画执行时间 单位：秒数s<br /> 3.animation-timing-function动画类型 属性和过渡属性一致<br /> 4.animation-delay延迟时间 单位：秒数s<br /> 5.animation-iteration-count循环次数 单位：正整数 infinite无限循环<br /> 6.animation-direction是否反向运动 normal正常方向 alternate反向运动<br /> 7.animation-paly-state动画状态 running运行 paused停止<br /> 8.animation-fill-mode动画时间之外的状态 none默认 forwards结束状态 bockwards开始状态<br /> 简写：animation：text1 5s ease 2s infinite ...(1-8)<br /> 默认：animation：text1(必写) 0s 线性 0s 1 normal running bockwards<br /> 执行方法：<br /> @keyframes text1{<br /> 方法1<br /> from{left：0px} to{left:1000px}<br /> 方法2<br /> 0%{left：0px} 100%{left:1000px}<br /> }<br /> <br />
HTML5
1.日期：<input type="date"><br /> 2.月份：<input type="month"><br /> 3.星期：<input type="week"><br /> 4.小时：<input type="time"><br /> 5.数字：<input type="number" min="18" max="80" step="5"> step移动步长<br /> 6.电话号：<input type="tel"><br /> 7.颜色：<input type="color"><br /> 8.滚动条：<input type="range" min="18" max="80"> 默认0-100 属性和数字一致<br /> 9.邮箱：<input type="email"><br /> 10.搜索框：<input type="search"> required="required"让文本框必输<br /> <br />
媒体文件
1.音频
src路径 autoplay自动播放 controls显示控件
2.视频
src路径 autoplay自动播放 controls显示控件
Html5的canvas画图
1.创建一个画布 <canvas id="con" width="800px" height="600px"></canvas><br /> 2.定义js，在<head>标签里定义<script><br /> 3.通过window.onload=function () {}让js标签在页面加载完成之后执行<br /> 4.获得画布document.getElementById("con");<br /> 5.创建画笔con.getContext("2d");
画直线
1.cxt.strokeStyle=”red”; //线条样式颜色，默认黑色
2.cxt.lineWidth=10; //线的粗细，默认为1
3.cxt.moveTo(50,50); //开始节点位置
4.cxt.lineTo(500,500); //结束节点位置
5.cxt.stroke(); //连接两点形成线体
画曲线
cxt.quadraticCurveTo(x1,y1,x2,y2); //二次元曲线
其他属性和直线一致
矩形
空心
ctx.strokeRect(x,y,width,height); 边框矩形
填充
cxt.fillStyle=”blue”; 设置填充颜色
cxt.fillRect(x,y,width,height); 填充矩形
三角形
空心
cxt.moveTo(400,0); //开始位置
cxt.lineTo(0,400);
cxt.lineTo(800,400);
cxt.lineTo(400,0); //结束位置与开始位置一样
填充
cxt.fillStyle=”blue”;//设置颜色
cxt.fill();//填充颜色
圆形
空心
cxt.arc(400,300,200,0,Math.PI*2,false);
值：x轴，y轴，半径，开始位置，结束位置，顺序（true逆时针，false顺时针）
填充
cxt.fillStyle=”blue”;//设置颜色
cxt.fill();//填充颜色，必须是合并图片
文字
空心
cxt.font=”80px 黑体”;//设置文字
cxt.strokeText(“文字效果eee”,100,100);
值：文字内容，x轴，y轴
填充
cxt.fillText(“这是实心文字”,100,300)
图片
var img=new Image(); //创建图片对象
img.src=”../../img/01.jpeg”;//添加路径
cxt.drawImage(img,0,0,con.width,con.height);
值：图片变量，x轴，y轴，图片宽度，图片高度
con.width获得画布宽度 con.height获得画布高度 （HTML中的所有属性都可以被js引用获得）
变换
移动
cxt.translate(x,y);
缩放
cxt.scale(x,y);
旋转
cxt.rotate(Math.PI*2);弧长
矩阵
cxt.transform(1,0,0,1,0,0);
值：宽度缩放，水平扭曲，垂直扭曲，高度缩放，水平移动，垂直移动
阴影
cxt.shadowOffsetX=20;水平距离
cxt.shadowOffsetY=20;垂直距离
cxt.shadowBlur=5;模糊效果
cxt.shadowColor=”#666”;阴影颜色
渐变色
线性渐变
var line=cxt.createLinearGradient(50,50,400,400);
创建线性渐变，设置位置（线性渐变覆盖背景色）
值：开始x轴，开始y轴，结束x轴，结束y轴
lin.addColorStop(0,”red”); //设置颜色，先后无顺序
line.addColorStop(0.8,”blue”);//位置0-1之间的值
cxt.fillStyle=line;//设置到填充颜色里
径向渐变
var rad=cxt.createRadiaGradient(400,300,100,400,300,200);
值：内圆x轴，内圆y轴，内圆半径，外圆x轴，外圆y轴，外半径
若有收获，就点个赞吧
0 人点赞
