HTML_CSS_JS学习笔记

学习视频

• 解决github的dns问题
• 前端路线图
• 练习代码
• idea 部分快捷键 ctrl 简写C shift简写S
  • C+alt+l 快速对齐
  • C+shift+/ 快速注释
  • S+d 向下复制一行
• bgcolor 是HTML标签属性 background-color 是CSS 样式属性
• 宽度 cols和width 长度 rows和height 具体看属性有哪个用哪个textarea中cols和rows不随页面大小变化 width和height是随着变化的
• padding内边距 < p >~<> 中有
• 对于布尔类型变量
• * 表示通配符 对整个内容都起作用

1. 声明属性不赋值
2. 声明属性赋值true
3. 声明属性赋值为空
4. 属性值默认 false

HTML

• 开始标签 元素内容 结束标签 （部分没有结束标签）
• HTML 标签
  • < body > <>
    • bgcolor 背景颜色
    • background 设置背景图片
    • < h1 > ~<> ——< h6 >~< >
    • align 标题对齐方式
  • < p > <> 标签定义段落 类似于回车
  • < a > <> 链接
    • href=“” 地址 打开链接地址
      • < a href=" http:// www.baidu.com"> baidu </ a > http 很重要
    • target 链接打开方式
      • _self 在自身框架中打开
      • _parent 在父框架中打开
      • _blank 在新标签页打开
      • _top 在本标签页打开
  • < img src=“” > 没有< img >
  • < br/ > 换行
  • < b > <> 粗体文字
  • < em > <> 着重文字
  • < i > <> 斜体文字
  • < small > <> 小号子
  • < strong > <> 加重语气
  • < sub > <> 上标
  • < sup > <> 下标
  • < ins > <> ++插入字++
  • < del > <> 删除字
• 通用属性
  • class 规定元素的类名
  • id 规定元素唯一id
  • style 规定元素的样式
  • title 规定元素的额外信息
• HTML 样式
  • 三种样式表的插入方法
    • 外部样式表 < head > ~<>
      • ~: < ink rel=“stylesheet” type=“text/css” href=“filename.css”>
    • 内部样式表<style type= type=“text/css”> ~<> type是其中的一个属性
      • ~: p:{}
    • 内联样式表 对应标签
      • < a style=“color:red”>~<>
• HTML 链接
  • 文本链接
    • href 转向另外的文本链接
    • name 创建文档内链接
      [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-hd3XeB5e-1595075134875)(name.png)]
    • 点击 go to top 能回到文档内top的所在位置
• 图片链接
  • src 图片显示
  • width 图片宽度
  • height 图片高度
  • alt 图片加载失败时的文字描述
• HTML 表格的使用
  • < table >~<> 表格
    • cellpadding 单元格边距 格变大了
    • cellspacing 单元格间距 框变粗了
    • border 边框形式
    • background 背景图片
    • bgcolor 颜色
  • < caption>~<> 表格表头
  • < tr >~<>表格中的一行
  • < td >~<>一行中的一个单元格
    • 其中可以穿插列表
  • < th >~<>单元格的表头
• HTML 列表
  • 无序列表
    • < ul >~<> < li >~<>
    • type= disc circle square 前面是实心圆 空心圆 实心方框 和md一样
  • 有序列表
    • < ol >~<> < li >~<>
    • start = 开始数字或字母等等
  • 混合列表
    • < ul > < ol > < li > 支持嵌套
    • 每一个< ul > 或者< lo > 后都要至少跟着一个< li > 否则没有效果
    • 项目地址 E:/HtmlLearn/L_02
  • 自定义列表
    • < dl>~<>创建一个自定义列表
    • < dt>< dd>和混合列表一样 只是没有点和数字等
    • < dt>是表头< dd>是列表内容 和< ul> < li> 关系一样
• HTML块
  • 块元素 以新行开始
    • < h1>< p>< ul>
  • 内联元素 不会以新行开始
    • < b>< a>< img>
  • 元素 是一个块元素 一个组合HTML的容器
  • 元素 是一个内联元素 作为文本的容器
  • div 和span 通常配合css一起使用
    • 项目位置 E:\HtmlLearn\L_03
• HTML 布局
  • 位置E:\HtmlLearn\L_04和L_04_2
  • margin 与外边界的距离
  • 容器的width和height必须有具体数
  • color 设置文本颜色
• HTML表单 < form>~<>
  • P35-P42 表单 后续跟进学习
  • E:\HtmlLearn\L_05
  • < input>无</ input> 需要陈述内容则在input标签之前或之后添加
    • type =text 用户名
    • type = password 密码
    • type = checkbox 复选框
    • type =radio name= 单选框 单选框要限定小组 组内单选
    • type =button value =buttonname 创建按钮和名字
    • type =summit value =summiename 创建提交和名字
  • < select>~<> 下拉列表
    • < option>~<> 通过多个option来制定列表内容
  • < textarea>~<> 文本域
    • cols 宽度
    • rows 长度
• HTML实体 通过&+字母来代替 类似转义字符 随用随搜
• HTML 新增的主体结构元素
  • article section nav aside time pubdate p26-p31
• HTML 新增的非主体结构元素
  • header footer hgroup address p32-34
  • 多留意一下p34的网页编排示例

CSS

• 基础语法
  • selector {
    property ： value
    }
  • 例h1{color ：red；}
• 选择器
  • 派生选择器 h1 p 表示h1中的p标签变成该样式
    • css中 h1,p表示两个标签都变成该样式 h1 p 表示h1中的p标签变成该样式，具体什么样式根据准确标签样式来定
  • id选择器 在id名字前加# 表示对这个id的内容进行样式修改
  • 类选择器(class) 和id相似 在class名字前加. 其余相同
  • 属性选择器 title 如果不对title进行赋值 则表示对全文进行修改 若赋值则只对赋值的元素进行修改 写法[title] {] 也可以不是title 这个可以人为自己命名
• CSS背景
  • background-color 设置元素的背景颜色
  • background-image 设置图片为背景
    • url (filename.jpg) 设置该图片
  • background-position 设置图片的位置 前面为左中右 后面为上中下有三种表达方式 图片位置是基于当前标签空间下的位置
    • left center right top center bottom
    • 100px 100px
    • 20% 30%
  • background-repeat 当图片不够大时 师傅通过复制图片来达到占满全屏的效果
  • background-attachment 图片是否跟随滚动条一起运动
  • background-size 规定背景图片的尺寸
  • background-origin 规定背景图片的定位区域
  • background-clip 规定图片的绘制区域
• CSS文本
  • color 设置文本中的颜色
  • text-align 文本对齐方式：左侧对齐 右侧对其 中间对其
  • text-indent 设置首行缩进一般以em为单位 em是和字体有关的大小
  • text-transform 修改文本中的字母 词开头大写 词全部大写 词全部小写等
  • text-shadow 向文本添加阴影 需要填写四个数值
    • 阴影距离文本的右移距离
    • 阴影距离文本的下移距离
    • 阴影的清晰度
    • 阴影的颜色
  • word-warp 规定文本的换行规则
• CSS字体
  • font-family 字体格式
  • font-size 字体大小
• CSS链接
  • 链接的四种状态 属性通常为color 以下四种是{}前的标签
  • a:link 普通的，未访问过的链接时的状态
  • a:visited 已经访问过的链接
  • a:hover 指针位于链接上方时
  • a:active 指针点击链接时间
  • 其他属性
    • text-decoration 去掉链接中的下划线 none时为去掉下划线
    • background-color 设置背景颜色
• CSS列表
  • list-style-type 列表项标签的效果 实心点等
  • list-style-imange 列表项图片 url(.jpg)
  • list-style-position 列表项标志位置
  • list-style-type 列表位置
• CSS表格
  • border 表格边框 属性
    • 边框厚度 1px
    • 边框颜色 solid red
  • border-collapse 折叠边框
  • width height 表格宽高
  • text-align 表格内文本对齐
  • padding 表格内边距
  • color表格颜色
• CSS轮廓 outline
  • outline-color 设置轮廓颜色
  • outline-style 设置轮廓样式 实线虚线双线等
  • outline-width 设置轮廓厚度
• 背景到轮廓的练习项目 E:\HtmlLearn\L_06
• CSS定位 针对div
  • position 把元素放在静态、相对、绝对、固定的位置上 fixed可以随滚动条滚动
  • top bottom left right 向上、下、左、右的偏移量
  • z-index 设置堆叠顺序 数字大的在上面
• CSS浮动 针对div
  • float
    • left 元素向左浮动
    • right 元素向右浮动
    • none 不浮动
  • clear
    • left right both 去掉左 右 两个浮动
• CSS盒子模型
  • 内边距 padding 有三个属性值 边距 线性 颜色
    • 四个边可以单独设置边距
  • 边框 border 四个边可以单独设置
    • style 边框样式
    • width 边框宽度
    • color 边框颜色
    • border-radius 圆角边框
    • box-shadow 边框阴影 同样有4个属性值
    • border-image 边框图片
• 外边距 margin四个边可以单独设置
• 两个属性值先是上下然后左右 0px auto 表示上下外边距0px 左右自适应
• 外边距合并 两个盒子之间的外边距选择margin属性值较大的那一个
• 盒子模型练习项目 E:\HtmlLearn\L_08
• CSS的常用操作
  • 对齐
    • margin
      • margin-left auto （margin-right auto） 水平对齐
      • margin 0px auto 同样可以实现水平对中
    • position absolute
      • right 0px右对齐 left 0px 左对齐
    • float left （right）向左或向右浮动
  • 行高 line-height
  • 设置元素最大宽度（最大高度）max-width（max-height ）
  • 分类操作
    • cursor 当位于某元素之上的指针类型
    • display 是否以及如何显示元素
    • visibility 设置元素是否可见
  • 导航栏 基于列表制作导航栏
    • href =#idname 可以传送至id的位置
    • 垂直导航栏
    • 水平导航栏
      • li中的display属性值为inline一行
    • 导航栏的效果
  • 图片
    • opacity 透明度 从0到1
  • 练习项目 E:\HtmlLearn\L_09
  • css中的background-img可以被css中的height等修改 而html中的img不能被css修改
  • text-decoration none去掉链接中的下划线 display none是不显示该链接
• 选择器
  • 元素选择器 < a>等普通标签
  • 选择器分组
  • 类选择器 多类选择器
    • .classname
    • a.classnam结合元素选择器来使用
    • .classname.classname 同时兼具以上两个class的特性并可以继续增加特性
      在html中用p1 p2 中间用空格
  • ID选择器
  • 属性选择器
    • 简单属性选择器
      • [title]{ color = red }
      • < p [title]=“”>~<> 相当于替代title属性值
    • 根据属性值选择
      • [href=“www.baidu.com”]{}
      • < a href=“www.baidu.com”>
    • 根据部分属性值选择
      • [title~=“title”]{}
      • < p [title]=“title qwe”>~<> 相当于替代title属性值
      • 只能识别一个单词 不能识别一个单词中的字母
  • 后代选择器
  • 子元素选择器 p>strong 只能两代
  • 相邻兄弟选择器 不常用
  • 练习项目 E:\HtmlLearn\L_10
• CSS转换 transform
  • 一个div中只能有一个transform
  • 目前CSS中最好用translateX translateY 已经不生效translate(10px 10px)了但生效translate(10px) 向右平移10px
  • 转换 transform:translatex()
    • translatex(50px) 向右 平移50px
    • scale(1,2) x缩放1倍 y缩放2倍
    • skewx(20deg) x方向倾斜20°
    • rotateX(40deg) 绕着x轴旋转40°
    • rotateY(40deg) 绕着y轴旋转40°
  • 练习项目 E:\HtmlLearn\L_11
• CSS 过渡
  • transition: width 2s （height 2s ） 宽度2s过渡 （长度2s过渡）
    • transition 2s 表示2s完成两个方向的过渡
  • transition-delay:2s 延迟两秒发生过渡动画
  • .class：hover{} 当鼠标放上面时发生的动作 {}中填写transform中的动作以及width height 等信息
• CSS动画
  • animation:animationname time 动画名 动画持续时间
  • 属性值还可以有infinite alternate 无限更改方向循环重复
  • @keyframes animationname { 0%{动画动作} 25% 50% 75% 100%}
• CSS 多列
  • column-count 分成几列
  • column-gap 间隔之间的像素宽度
  • column-rule 列之间线的参数·
    • column-rule-width 设置列之间的宽度规则。
    • column-rule-style 设置列之间的样式规则。
    • column-rule-color 设置列之间的颜色规则
• 练习项目E:\HtmlLearn\L_12
• CSS瀑布流
• 简单练习项目 E:\HtmlLearn\L_13
  • position relative 后加right left 和 距离 相对是针对父级元素的距离
  • margin: 0 auto; 的对象是div容器
  • vertical-align: middle; 的对象是元素 主要在行内实现垂直对中 text-align 也是

javascricpt

• alert 弹出一个对话框
• 语法
• document.write(“”) 输出内容为HTML语言如

  ~

• document.getElementbyID(“”).innerHTML 得到制定ID标签中开始到结束的信息
• document.getElementbyID(“”).innerHTML=“” 可以修改其中的信息
• 变量
  • 变量的声明都用使用var来声明的
  • 变量类型 var 变量名 = 变量内容
    • 字符串
      • 字符串拼接
      • i=“5” j=“5” i+j = “55”
      • i=5 j=“5” i+j=“55” 任何类型与字符串相加都是字符串类型
    • 数字
    • 布尔
      • 布尔类型返回 true 和false
    • 数组
      • arr=new Array()
    • 对象
    • 空
    • 未定义
    • 可以通过赋值为空的方式清除变量
  • 判断
  • i=10 j=“10” i==j为真 i===j为假
  • i=10 j=“10” i!=j为假 i！==j为真
  • 在函数中，var声明的是局部变量，不带var的是隐式全局变量

*

• switch 后的break不要忘记 case后有个： break后是分号
• 输出换行 document.write(num[j]+’
  ');
• 按钮button 属性οnclick=“function（）” 表示点击后会运行的函数等
• 异常捕捉
  • try{ 异常代码块 } catch (err) {如果发生异常时的处理}
  • throw 输出自己设想的异常情况
  • try{ throw }catch(e) 的思路就是执行try的语句 在一定条件下触发throw语句抛出异常（if条件等），catch()再对收到的异常做特殊处理
  • 如果在 try 子句运行时发生错误，或者使用 throw 语句主动抛出异常，则执行 catch 子句中的代码，同时传入一个参数，引用 Error 对象。
• 鼠标相应 都是在HTML中写的但是响应函数用JS写 在HTML中在相应条件下运行js中的函数
  • onClick 鼠标点击按钮时发生的事件
  • onMouseOver 鼠标在其上时发生的时间
  • onMouseOut 鼠标移开时发生的事件
  • onChange 内容改变时发生的事件
  • onSelect 内容选中时发生的事件
  • onFocus 光标聚集事件
  • onBlur 移开光标事件
  • onLoad 网页加载事件
  • onUnload 关闭网页事件
  • 练习项目 E:\HtmlLearn\L_14 onunload关闭页面不会触发
• DOM操作HTML
  • 不要在文档加载完成后使用document.write() 会覆盖原文档
  • innerHTML 是改变开始标签到结束标签之间的内容
  • 可以改变其中的任何一个属性
    • document.getElementById(“”).innerHTML=“” 改变两个标签之间的内容
    • document.getElementById(“”).href=“” 改变标签中的href的属性值
  • 通过标签名去 找到HTML元素
    • document.getElementByTagName(“”) 其得到的是一个数组 动态加入script会有用
• DOM操作CSS 通过其中的style样式的属性来改变CSS样式
  • document.getElementById(“”).style.backgroundcolor=“blue”
• EventLisenter 句柄
  • 添加句柄 addEventListen();x.addEventListen(“click” function());
  • 移除句柄 removeEventListen();x.removeEventListen(“click” function());
  • 一般通过句柄来实现上述的鼠标响应事件 因为当函数不用时直接remove就可以不需要更改很多东西
• DOM2级事件处理
  • addEventListen(“事件名”， “事件处理程序”，“布尔值“) 布尔值常常省略
    true 事件捕获 false 事件冒泡
  • onclick是鼠标点击时触发的事件
    click本身是方法作用是触发onclick事件，只要执行了元素的click()方法，就会触发onclick事件
    click方法中的function代码会在onclick事件执行完后执行，此时click方法起到追加事件的作用
    练习项目 E:\HtmlLearn\L_15
• 事件对象event 下面全是event类中的对象和函数
  • .type 获取事件的类型 例如：click
  • .target 获取事件的目标 表示程序完成该事件需要找到的目标
  • .stopPropagation() 阻止事件冒泡
  • .preventDefault() 阻止事件的默认行为
  • 练习项目 E:\HtmlLearn\L_16
• String 字符串对象
  • .length 字符串长度
  • .indexof(”“) 查找“”的所在位置 如不存在返回-1
  • .match(”“) 目标字符串中匹配“”，若找到返回“”的内容，若没找到返回null
  • .replace(“原字符串” “替换字符串”) 替换字符串
  • .toUpperCase()/toLowerCase() 字符串全部转成大写/全部转换成小写
  • .split(“分隔符”) 根据分隔符将字符串分割成数组
• Date 日期对象
  • .getFullYear(); 获取年份
  • .getTime()； 获取毫秒
  • .setFulllYear();设置具体的日期 月份比较特殊 类似于数组 0表示January
  • .getDay(); 获取星期
• Array 数组对象 document.write(array) 输出是数组内容
  • .concat() 合并数组
  • .sort() 排序(function(a,b){return b-a}) 表示字符串的话每一位都比大小
  • .push() 末尾追加元素 返回值是增添元素后的长度
  • .reverse() 数组元素翻转
• Math 对象
  • .round() 四舍五入
  • .random() 随机数从到1
  • .max() .min()
  • .abs()
• DOM控制HTML
  • nodename 节点名字例如div p等
  • document.body 是HTML中的body标签
  • .getElementsByName() 通过name来获取元素 直接输出是数组
  • .getElementsByTagName() 通过标签名来获取元素 直接输出是数组
  • .getattribute() 获取对应的元素属性
  • .setattribute() 设置对应的元素属性
  • .chileNodes 访问子节点是对象不是函数
  • .parentNode 访问父节点是对象不是函数
  • .createElement() 创建元素节点
  • .createTextNode 创建文本节点
  • nodename.appendChild(插入节点) 在nodename位置末尾添加节点
  • 父元素.insertBefore(新元素 ，目标元素) 在位置前插入节点
  • 父元素.removeChild(目标元素) 删除节点
  • .offsetHeight 不包含滚动条网页尺寸
  • .scrollHeight 包含滚动条网页尺寸
  • 练习项目E:\HtmlLearn\L_17 可能有点乱 需要仔细整理一下
• 浏览器对象
  • window 对象是所有浏览器的祖先
    • window.innerWidth 窗口的宽度 不包括滚动条等
    • window.innerHeighht 窗口的高度
    • window.open(“HTML”) 打开窗口
    • window.close() 关闭当前窗口
  • 计时器
    • setInterval(function{},ms) 间隔指定的毫秒数不停执行
    • clearInterval(指定计时器) 停止interval计时器
    • setTimeout(function{} ,ms) 暂停制定毫秒数执行一次指定代码
    • clearTimeout( 指定计时器) 停止timeout计时器 建议不要用这个进行递归记时，很占内存
  • History
    • history.back() 浏览器的后退
    • history.forward() 浏览器的前进
    • history.go(number) num>0 表示前进几个页面 num<0表示后退几个页面
  • Location
  • Screen
  • Navigator
  • 弹出窗口
  • Cookies
• 瀑布流 练习项目E:\HtmlLearn\L_18
  • 页面大小页面大小
    • offsetwidth是整个盒子的宽度包括边框
    • clientwidth是不包括边框的宽度
    • 网页的宽度是doc.documentelement.~width()
  • i<allcontent.length
  • console.log() 输出日志
  • Math m大写
  • 用js写css时不要忘:和px css中只要不是变量都要加“”
  • E:\HtmlLearn\L_18 细品
• 在js中没有类的概念 用function来代替类 同时用object.prototype.function{}来添加成员函数
  object.prototype.name来添加成员变量 通过new可以进行类的继承也可以通过prototype进行函数复写
  可以在函数被复写之前 用super来对复写前的prototype函数进行承载 以实现对父类的函数调用
  • Js中的封装继承与多态 E:\HtmlLearn\L_18 有点迷糊 后面再品