上周内容回顾
-
HTML
# HTTP协议 # 超文本标记语言 就是一堆标签 每个标签具有特定的含义 是浏览器展示页面所公用的一套标准 # 注释 <!----> # web服务的本质 服务端 客户端 文件(.html) （你在浏览器上看到的花里胡哨的页面内部都是由HTML组成的） # HTML文档结构 html head body # 标签的分类 1. 单标签 双标签 2. 块儿级标签 行内标签 特例:p标签 # 一堆标签 标题:h1~h6 u i s b hr br 段落:p # 特殊符号 & > < © ® ¥ # 标签笔记重要的两个属性 id class # 常用标签 div span 自己联想简易版本的博客园页面搭建，体会上述标签的作用 a链接标签 href 1.放url 点击跳转 2.放其他标签的id值 锚点功能 target 默认是当前页面跳转 _self 也可以新建页面打开 _blank img图片标签 src 图片的地址 alt 图片加载不出来的情况下展示提示信息 title 鼠标悬浮上去之后展示的提示信息 height、width # 列表标签 ul li list-style-type:none padding-left:0px ol li dl dt dd # 表格表格 表格标签不一定非要讲thead和tbody都写出来 也可以只有tbody没有thead table thead tr th/td tbody colspan rowspan # form表单 朝后端发的获取用户数据的标签 一定要写在form表单内 action 控制数据提交的路径 1.不写 2.全写 3.后缀 method 控制提交方式get/post form默认是get请求 enctype 控制数据提交的编码格式 urlencoded formdata ... # input标签 type属性 text password date radio checked 属性名和属性值相同的情况下可以简写 checkbox checked file submit button标签也可以 button reset # select标签 默认是单选 可以设置成多选multiple 一个个的下拉选项是由一个个的option标签组成 selected # textarea标签 获取大段文本 # label标签 """ 获取用户数据的标签都应该有name属性用来表明数据的含义 类似于字典的key 获取到的用户数据类似于字典的value(也是存储到标签的value属性中了) """ -
CSS
# 样式 # 注释 /**/ # 引入方式 三种方式 1.style 2.link 3.行内 # 如何查找标签 选择器 {属性名:属性值;...} # 基本选择器 id选择器 #d1 class选择器 .c1 标签选择器 div 通用选择器 *
# 组合选择器 我们将标签的嵌套关系比喻成了亲戚关系 div span div>span div+span div~span
# 属性选择器 input[username='jason']
# 不同选择器之间可以并列、混用 div,p,span div,#d1,.c1 # 伪类选择器 a标签的四个状态 :link :hover 鼠标放上去 :active :visited :focus 聚焦
# 伪元素选择器 :first-letter :before :after 解决浮动带来的影响 .clearfix:after { }
# 选择器的优先级 行内 id class 标签 # 属性相关 font-family font-size font-weight color red #eee rgb() rgba() 取色工具 text-align center text-decoration none a标签自带的下划线 text-indent backgroud:red url('') no-repeat center center 背景图片不动 葫芦娃... border:3px solid red; border-radius 50% 圆形头像 display none block inline inline-block 盒子模型 margin border padding content 浮动 float 0.浮动多用于前期页面布局 1.浮动的元素会造成父标签塌陷 清除浮动 1.clear 2.通用的方式 哪里塌陷加哪里 .clearfix:after{ content:''; display:block; clear:both }
溢出 overflow 圆形头像 定位 静态 static 相对定位 relative 绝对定位 absolute 固定定位 fixed z-index 模态框 透明度 opacity box-shadow:3px 3px 3px rgba(0,0,0,0.5) -
JS
# 面向对象的编程语言 # 注释 // /**/ # 引入方式 script # 数据类型 # 变量 var 5.1版本及之前的 let 6.0版本新出的 变量命名规范 1.数字 字母 下划线 $ 2.驼峰命名 userName 3.不能有关键字 # 常量 const # 数值类型 number NaN # 字符类型string 模版字符串 res = ` sd ads ` res=` asdsa ${name} ... ` # 布尔值boolean true、false # null与undefined 厕纸图片 # 数组对象 python中的列表 [] # 运算符 ++ === && || ! # 流程控制 （）条件 {}代码块 if-else if -else if(){}else if(){}else{} switch for for(let i=0;i<10;i++){} while while(i<100){} # 三元运算 1>2?3:4 # 函数 function func(arg1,arg2,...){ arguments return 不能返回多个 需要你自己构造容器类型返回 } # 箭头函数 var func1 = v => v # 自定义对象 """ 在js中创建对象有一个关键字new """ d1 = {'name':'jason','password':123} d1.name d2 = new Object() d2.name = 'jason' # Date对象 # JSON对象 JSON.stringify() dumps JSON.parse() loads # RegExp对象 1.全局模式下有一个lastIndex属性 2.什么都不写默认匹配undefined # Math对象(了解)