学习回顾No.2

小Z想打代码

已于 2024-01-06 15:20:55 修改

阅读量929

点赞数 23

文章标签：学习 html css javascript

于 2024-01-05 23:41:28 首次发布

本文链接：https://blog.csdn.net/weixin_54365125/article/details/135419957

版权

学习回顾No.2

常见布局技巧

margin负值运用
文字围绕浮动元素运用
行内块巧妙运用
CSS三角巧妙运用

HTML5

header、section、footer、aside、nav、main、article、figure 块级
canvas标签 => 图形容器，通过脚本绘制图形.
audio标签 => 定义音频内容.
video标签 => 定义视频(video或movie) 以及拥有autoplay、controls、loop、muted属性.
source标签 => 为媒体元素定义媒体资源拥有src、type属性.
track标签 => 为媒体元素规定外部文本轨道，即字幕.
datalist标签 => 规定input标签可能的列表，使用list属性绑定datalist.
output标签 => 作为计算结果输出显示拥有for、form属性.
article标签 => 定义页面独立区域.
aside标签 => 定义页面侧边栏内容.
dialog标签 => 定义对话框.
figure标签 => 规定独立的流内容.
figcaption标签 => 定义标题.
footer标签 => 定义section或document的页脚.
header标签 => 定义文档的头部区域.
mark标签 => 定义带有记号的文本.
meter标签 => 定义度量衡.
nav标签 => 定义导航链接的部分.
progress标签 => 定义任何类型的任务的进程.
ruby标签、rt标签、rp标签 => 定义注释（中文注音或字符）.
section标签 => 定义文档某个区域.
time标签 => 定义日期或时间.
wbr标签 => 规定在文本中何处适合添加换行符.

HTML5的新特性

新增语义标签 => header、nav、article、section、aside、footer
新增多媒体标签 => audio、video
新增input类型 => email、url、date、time、month、week、number、tel、search、color
新增表单属性 => required、placeholder、autofocus、autocomplete、multiple

CSS3的新特性

新增属性选择器 => 根据元素的属性及属性值来选择元素
- E[att^=value] 指选择名称为E的元素，且该元素定义了att属性，att属性值包含前缀为value的子字符串。
- E[att$=value]指选择名称为E的元素，且该元素定义了att属性，att属性值包含后缀为value的子字符串。
- E[att*=value]指选择名称为E的元素，且该元素定义了att属性，att属性值包含value的子字符串。
- 其中E可以省略，省去后可以匹配所有满足条件的元素。
新增结构伪类选择器 => E:first-child、E:last-child、E:nth-child(n) [even、odd、n的公式]

E:first-of-type、E:last-of-type、E:nth-of-type(n)[even、odd、n的公式]
新增伪元素选择器 => ::before ::after 必须有content属性

滤镜filter

filter:blur(5px) => blur模糊处理，数值越大越模糊

calc函数

width:calc(100% - 80px); => 父元素的宽度减去50px

CSS3过渡（重点）

transition:要过渡的属性(多个用all) 花费时间运动曲线何时开始；
谁做过渡给谁加搭配hover使用
Web服务器一般指网站服务器，又分为本地服务器和远程服务器
px:固定像素 em相对于父元素 rem相对于根元素

JavaScript

C语言：puts(“你好”);
PHP：echo"你好";
Java: System.out.println(“你好”);
JavaScript:alert(“你好”);
作用：表单动态校验（最初目的）、网页特效、服务端开发（Node.js）、桌面程序（Electron）、APP（Cordova）、控制硬件-物联网（Ruff）、游戏开发（cocos2d-js）
JS组成：ECMAScript(JS语法)、DOM（页面文档对象模型）、BOM（浏览器对象模型）
alert(msg) => 浏览器弹出警示框
console.log(msg) => 浏览器控制台打印输出信息
prompt(info) => 浏览器弹出输入框，用户可以输入信息
DOM主要用来操作元素
获取页面元素
1. 根据ID获取 => document.getElementById(‘time’)
2. 根据标签名获取 => document.getElementsByTagName(‘li’)
3. 根据HTML5新增方法获取 => document.getElementsByClassName(‘类名’)、document.querySelector(‘选择器’)、document.querySelectorAll(‘选择器’)
4. 特殊元素的获取 => 获取body元素：document.body 获取html元素：document.documentElement
事件三要素：事件源、事件类型、事件处理程序
执行事件的步骤
1. 获取事件源
2. 注册事件（绑定事件）
3. 添加事件处理程序（采取函数赋值形式）
改变元素内容 => element.innerText => 起始到终止全部内容，但去除html标签，去掉空格和换行 element.innerHTML => 起始到终止全部内容，包括html标签，同时保留空格和换行
element.style => 行内样式操作
element.className => 类名样式操作（会直接更改元素类名，会覆盖原先类名）
element.onfocus => 获取焦点事件
element.onblur => 失去焦点事件
排他思想：首先干掉其他人，再设置自己
onmouseover => 鼠标经过
onmouseout => 鼠标离开
获取属性值 element.属性 => 自带属性 element.getAttribute(‘属性’) => 自定义属性
设置属性值 element.属性=‘值’ element.setAttribute(‘属性’,‘值’)
移除属性值 element.removeAttribute(‘属性’)
H5自定义属性 => 以data-开头
H5新增element.dataset.index或element.dataset[‘index’] dataset包含data开头的集合
节点操作：nodeType、nodeName、nodeValue
父级节点：node.parentNode
子级节点：
- parentNode.childNodes(标准) 包括元素节点、文本节点
- parentNode.children(非标准) 只返回子元素节点
- parentNode.firstChild
- parentNode.lastChild
- parentNode.firstElementChild
- parentNode.lastElementChild
兄弟节点：
- node.nextSibling(下一个)
- node.previousSibling(上一个)
- node.nextElementSibling
- node.previousElementSibling
动态创建节点：document.createElement(‘tagName’)
添加节点：node.appendChild(child) 追加元素 node.insertBefore(child,指定元素) 在什么前面插入指定元素
删除节点：node.removeChild(child)
不跳转：
复制（克隆）节点：node.cloneNode(). 括号为空或为false 是浅拷贝只复制标签不复制内容。改为true 是深拷贝，标签内容都复制。
innerHTML 创建多个元素效率更高（不用拼接，用数组）结构复杂
createElement() 效率低一点点，结构更清晰
注册事件有两种方式：传统方式（唯一性）和方法监听注册方式 addEventListener()
eventTarget.addEventListener(type, listener[,useCapture])
删除事件（解绑）传统方式（null）和方法监听注册方式 eventTarget.removeEventListener(…)

DOM事件流

1. 捕获阶段 2. 当前目标阶段 3.冒泡阶段
addEventListener 第三个参数是true 表示在捕获阶段是false或省略表示在冒泡阶段
有些事件没有冒泡：如onblur、onfocus、onmouseenter、onmouseleave
事件对象 event或evt或e
e.target => 返回触发事件的对象
this => 返回绑定事件的对象
e.type
e.preventDefault() => 阻止默认事件
e.stopPropagation() => 阻止冒泡标准

事件委托

不是每个子节点单独设置事件监听器，而是事件监听器设置在父节点上，然后利用冒泡原理影响设置每个子节点

常用的鼠标事件

onclick、onmouseover、onmouseout、onfocus、onblur、onmousemove、onmouseup、onmousedown
contextmenu 禁用右键菜单 selectstart 禁止选中文字
鼠标事件对象MouseEvent => e.clientX、e.clientY、e.pageX、e.pageY、e.screenX、e.screenY
键盘事件对象 KeyboardEvent
常用的键盘事件 => onkeyup、onkeydown、onkeypress（但不识别功能键，如ctrl、shift、箭头等）
执行顺序：keydown->keypress->keyup
keydown和keyup不区分字母大小写，而keypress区分字母大小写
现在用e.key或e.code

BOM浏览器对象模型

BOM提供了独立于内容而与浏览器窗口进行交互的对象，核心对象是window
JavaScript标准ECMA DOM标准W3C BOM缺乏标准
window => document、location、navigation、screen、history
window下的一个特殊属性 window.name
窗口加载事件 => window.οnlοad=function(){} 或 window.addEventListener(“load”,function(){});
load等页面内容全部加载完毕，包括页面dom元素、图片、flash、css等
DOMContentLoaded是DOM加载完毕就执行
调整窗口大小事件 => window.οnresize=function(){} 或 window.addEventListener(“resize”,function(){})
window.innerWider 当前屏幕的宽度
setTimeout() 定时器
window.setTimeout(调用函数(回调函数callback), [延迟的毫秒数]). 可以直接写函数，也可写函数名，或‘函数名（）’ 只调用一次
window.clearTimeout(timeoutID) 清除定时器
setInterval()定时器重复调用
window.setInterval(回调函数,[间隔的毫秒数]) 同上
window.clearInterval(timeoutID) 停止定时器
1. 全局作用域或普通函数中this指向全局对象window(定时器中this指向window)
2. 方法调用中谁调用this指向谁
3. 构造函数中this指向构造函数的实例

JS执行机制

单线程
同步和异步区别：这条流水线上各个流程的执行顺序不同
同步任务都在主线程上执行，形成一个执行栈
异步任务
1. 普通事件.如click、resize
2. 资源加载.如load、error
3. 定时器.如setInterval、setTimeout
4. 相关回调函数添加到任务队列中
主线程不断重复获取任务、执行任务，这种机制被称为事件循环（event loop）
location属性用于获取或设置窗体的URL，并且可以用于解析URL
URL一般语法格式：
protocol://host[:port]/path/[?query]#fragment
如 http://www.itcast.cn/index.html?name=andy&age=18#link
location.href => 获取或设置整个URL
location.host => 返回主机（域名）
location.port => 返回端口号
location.pathname => 返回路径
location.search => 返回参数
location.hash => 返回片段（#后面的内容）
location.assign() => 重定向页面
location.replace() => 替换当前页面，不能后退
location.reload() => 重新加载页面
navigator对象 userAgent
history.back() => 后退
history.forward() => 前进
history.go(参数) 1=>前进一个页面 -1=>后退一个页面