HTML
<!doctype> #规定文档类型
<!-- 注释 -->
转义字符以&;包裹 #在&;中间单词简写,详情查看8-1
<head> 头标签
<body> 体标签
<html> 根标签,全局的属性写在这里 ,标签种类等详情查看8-3
<div> 用来搭建页面结构的标签
width: 200px # 标签的宽
height: 200px # 标签的高
border-radius: 50%; #边框圆角设置
background-color: blue; #标签的底色设置
border: 1px solid black; # broder边框,1px就是1像素,solid就是实线,black就是定义边框的颜色
color: hotpink; #字体颜色
font-size: 30px; # 字体大小
transition: 1s 1s all linear; # 就是动画效果过渡效果,1s 1s过渡效果展开的时间和延迟时间,延迟时间一般不会写,用户体验度不好,动画属性默认all,渡曲线linear(线性)
.box:hover{} # hover给鼠标添加悬停效果
cursor:pointer; # 鼠标样式
list-style: none; # 清除列表样式
text-decoration: none; # 清除字体下划线
margin: 0; # 清除盒模型的margin属性
padding: 0; # 清除盒模型的padding属性
margin-top: 100px; # 设置外边距顶部
margin-left: 100px; # 设置外边距左边
border: 1px solid black; # 设置边框区间,solid就是边框样式实线和虚线,
margin: 100px 0 0 200px; # margin四个参数上下左右,用来设置整个标签在页面的什么位置
padding: 10px 20px 30px 40px; # pading四个参数上下左右,用来设置padding区域在色块区域的位置
float: left; # 设置浮动布局,左浮动
margin-right: auto; #设置外边距右边的属性为自动
calc(-155px - 157px) # clac函数是在html页面中做计算的,括号中一定要用空格分开
background-position-y:-48px; # 用来定位图像,这句是定位y轴
position: relative; # 就是相对定位
position: absolute; # 绝对定位
z-index: 66; # 定位布局中,可以用这个设定显示的层级,以数字的大小来获取显示优先级
position: fixed; # 固定定位,就是窗口上下拖动,这个窗口不会被拖动,一般网页的悬浮广告原理
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
css
选择器:head标签的后面写一个style,在style标签下,将需要控制的标签的类名或者id名写在这个标签下,后的{}就是作用域,作用域内写的参数就是样式块,这样一个组合可以达到控制html的样式,这就是选择器
css样式引入的方式
行间式:直接将css的样式写在标签的style属性中
内联式:在head标签下写style标签,在style标签内写样式块
外联式:在html文件内写好选择器和样式块,通过link标签导入
PS:<link rel="stylesheet" href="./css/index.css">
普通选择器
1、标签选择器 | 语法:div{}
2、通配选择器 | 语法: *{}
3、class选择器(类选择器) | 语法: .class{]
4、id选择器 | 语法: #box
5、!import选择器 | 语法: div{">!important;}
PS:这个语法比较特殊,在语句的值和结束符中间写
优先级!import > 行间式 > id > class> 标签 > 通配
高级选择器
群组选择器
div,p,h1{ } # 同时选中div标签下的几个类名的标签做控制
后代选择器(使用率最高),有两种写法 空格 和 >
空格写法 .sup .sub{}
PS:.sup可以为.sub的父亲,也可以为父辈
>号写法
.sup > .sub{}
PS:.sup只能为.sub的父亲
兄弟选择器,有两种写法 ~ 和 +
~ 写法 .div1 ~ .div2{}
PS:.div2在.div1下的兄弟,.div1是修饰词,.div1与.div2之间可以有其他兄弟,可以直接定位到其他兄弟
+写法 .div1 + .div2{}
PS:.div2在.div1下的兄弟,.div1是修饰词,.div1与.div2之间不可以有其他兄弟,可以直接定位到其他兄弟
交叉选择器
h2.hd{}
PS:是h2标签且有一个class名为hd
多类名选择器
.h.h61{}
PS:有一个标签有多个类名
伪类选择器的语法: 选择器类型:语法(数字) #详情见8-8
class-name:nth-child(number){}
PS:伪类选择器是从页面结构开始查找,number代表结构层,填写数字即可
伪类选择器优先级:高于标签低于id等于class
盒模型
盒模型解析:盒模型就是标签,标签显示存在四个部分
1、最外面是margin :位置区间(外边距),就是控制在页面的位置
2、然后是border :边框区间
3、然后是padding :留白区间(内边距,就是内容和border之间留白)
4、然后是宽 X 高(content) :内容区间
PS:每一个区间不会重叠,都有自己独立的区域
字体操作
text-align: center; # 改变文本的水平居中方式
line-height: 100px; # 行高
font-weight: 900; # 字重:字越粗越重,越细越轻,范围100~900的整数
font-size: 30px; # 字体大小
font-family: SimSun-ExtB,Shruti; # 字族 = 字体,可以写备用字体,就是字体后面以逗号分隔,再写一个字体,备用字体一般选用系统默认字体
font: 900 30px/100px "SimSun-ExtB","Shruti" # 以上所有功能的简写方式,整体写法:font: 字重 字体大小/行高 字族
精灵图操作
background-image: url("img/bg.png"); # 加载背景图片
background-repeat: no repeat; # 处理平铺:repeat-x就是x轴平铺 | repeate-y就是y轴平铺 | no repeate就是没有平铺
background-size: 100px 200px; # 背景尺寸(这个不常用),会缩放背景图
background-position: 10px 20px; # 背景定位,往右移10(x轴左右偏移)、往下移20(y轴上下偏移)(-10、20往左移10,往下移20)
background: url("img/bg.png") red no-repeat 10px 20px; # 以上所有功能的简写方法:这叫整体赋值
清浮动
这个就是清浮动的写法,用父类伪类来写,子浮动,父级开启清浮动,父级的兄弟显示区域正常
.sup:after{content: "";display: block;clear: both;}
--------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
javaScript
什么是javaScript
HTML用来做页面的架构,CSS用来做页面样式的布局
javaScript就是用来完成页面用户交互的,JS写的就是叫脚本
js就是弱语言类型,不同类型的时候可以相互转换
js写在script标签内,script标签可以出现在html的任意位置
script标签一般书写在body标签的最底部,但写在body标签和html标签之间,会被解析在body的最底部,所有代码书写在该位置也是合理的
PS:html的解析是由上而下的,所以脚本的执行也是根据html标签的顺序执行的
常用语句
alert('弹出警告') # alert 会在网页的上部弹出一个窗口
<script src="js的引入.js"> # js需要通过script标签从外部引入脚本
var 变量名 = 变量值; # var是定义变量的关键词
var m = new Number(100) # new是创建新的对象的关键词
print # 这个功能就是通过浏览器调用打印机打印页面
console.log (xxx) # 在终端打印
// # 这个是js的注释
! # 是取反的意思
isNaN # 检查是不是NaN
var n=10; # 定义一个数字类型的变量
var s = 'str' ; # 定义一个字符串类型的变量
var b = true; # 定义一个布尔值类型的变量
console.log(m,typeof (m)) #在终端查看值的类型,查看类型m时候可以不加括号
var x = Number('123'); # 值类型的转换,这里是将字符串123转换成数字123
var s = '字符串'; # 定义字符串,'' "" 单双引号都可,js中没有 ''' '''三引号
var abc; # 定义一个未定义类型
== # 这个是用来判断值是否相等,这个是做值比较
=== # 判断本质上是否相等,就是做值与类型比较
var num = 666 + ''; # 数字转换成字符串
var res1 = '10' + 5; # js中字符串的拼接优先级高于数字运算的加法,所以这里识别成字符串的拼接
var res2 = '10' - 5; # 这里有减法,字符串不能做减法,所以字符串10识别成数字做了减法
var res = '888' - 0; #字符串转换成数字,-0就是表示值不变,字符串不能做减法,所以自动识别成数字做计算,类型也改变了
var ress = +'888'; #字符串转换成数字的另外一种方式,字符串必须是纯数字的字符串,不能是数字加字幕的字符串
isNaN(结果) # 判断转换的结果是否是非数字类型
res = parseInt('3.1.4abc'); # 将非纯数字的字符串转换成数字类型,这个方法就会从前往后找,找到的第一个数字就是返回值
res = parseFloat('3.1.4abc'); # 将非纯数字的字符串转换成数字类型,这个方法就会从前往后找,找到的第一个小数点后的第一个数字就是返回值
var arr = [1,2,5,3,4]; # 定义数组,js中数组就是列表
console.log(arr[2]); # 数组的查询 => 索引即可
delete arr[4]; # 数组的索引删除
delete arr[arr.length - 1]; # 删除数组中最后一个,arr.length - 1就是最后一个,以此类推-2就就是删除最后第二个
arr[4] = 100; # 修改数组中索引的值
arr.unshift(123); # 在数组的头位置增加值
arr.shift(); # 删除数组头位置的值
arr.push(888); # 在数组的尾部增加一个值
arr.pop(); # 将数组的尾部的值删除
arr.splice(1,1,999); # splice可以完成除了查的所有功能,包含插入。spilce(从什么索引开始,操作多少位,操作成什么(这个可以用逗号添加多个值,如果是空不写值就是删除))(省略第三个参数就是从第几位开始索引,操作几个位进行删除)
newarr = arr.splice(1,2); # slice 切片操作,切片之后数组内的值就没有了,被切掉了。slice (n,m) 从索引位置n开始截取到索引位置m之前。这里将切片后的值放入一个新的变量中
var str =arr.join('-'); # 将数组中的值以指定的符号拼接成字符串
narr = str.split('-'); # 字符串对应有一个逆运算,将字符串以指定的符号拆分成数组,拆分后数组内的值是以字符串形式存在,可以通过索引修改类型
narr[2] = narr[2] - 0; # 索引数组内指定位置的值改变类型
var dic = {name:'liuxx',age:'100'}; # js没有字典类型,但可以通过对象完全表现字典类型,对象可以当成字典来使用
console.log(dic.name); # 查找字典中指定的值,对象的调用就是对象加.来调用
console.log(dic['age']); # 查找字典中指定的值,对象中对象中所有的key都是字符串形式,和42的指令是一样的效果,知识写法不同
dic.sex = 'male'; # 字典的增加
dic.age = 99; # 修改字典内的指定key的值
delete dic.age; # 字典内的值删除
函数的定义 function fn1() {console.log('我是函数fn1');}
fn1(); # js中函数的调用方法
var fn2 = function () {console.log('我是函数fn2');}; # 定义函数的另一种方式
匿名函数的定义 (匿名函数只能在定义阶段被调用一次)(第一个(),是将定义的代码作为整体拿到内存地址,后面的()就是调用的意思,这就是匿名函数的定义方式和原理(function () {console.log('我是匿名函数')})();
onmouseout \ onmouseover # 添加鼠标悬浮事件out是离开,over是悬浮(就是鼠标悬停)
s的基本数据类型(值类型、引用类型、特殊类型)
值类型:
1、number:数字类型 # js里面没有整型和浮点型,负数小数的区别,只有一个类型就是数字类型
2、string:字符串类型
3:boolean : 布尔类型
4、underfined : 未定义类型
--------------------------------------------------------------------------------------------------------------------------------------------------------
来源:https://www.cnblogs.com/shizhengquan/p/10665851.html