HTML5+CSS3_原神网页实战
网页预览
HTML结构:
头部区域HTML:1234567891011121314151617181920212223242526272829303132<!--头部区域--> <div class="header"> <div class="header-left"> <!--在header-music closed 切换音乐图标状态--> <div class="header-music"></div> <a href="" class="header-logo"> <h1>原神</h1> </a> <!--导航--> <div class="header-nav"> ...
DOM扩展
DOM 扩展Selectors APISelectors API Level 1 的核心是两个方法：
querySelector()和 querySelectorAll()。
在兼容浏览器中，Document 类型和 Element 类型的实例上都会暴露这两个方法。
querySelector()querySelector()方法接收 CSS 选择符参数，返回匹配该模式的第一个后代元素，如果没有匹配项则返回null。
12345678// 取得<body>元素let body = document.querySelector("body"); // 取得 ID 为"myDiv"的元素let myDiv = document.querySelector("#myDiv"); // 取得类名为"selected"的第一个元素let selected = document.querySelector(".selected"); // 取得类名为"button"的 ...
DOM
DOMDOM 表示 由多层节点构成的文档，通过它开发者可以添加、删除和修改页面的各个部分。
DOM 现在是真正跨平台、语言无关的表示和操作网页的方式。
节点层级任何 HTML 或 XML 文档都可以用 DOM 表示为一个由节点构成的层级结构
document 节点表示每个文档的根节点
根节点的唯一子节点是<html>元素，我们称之为文档元素
文档元素是文档最外层的元素，所有其他元素都存在于这个元素之内。每个文档只能有一个文档元素。
在 HTML 页面中，文档元素始终是<html>元素。
在 XML 文档中， 则没有这样预定义的元素，任何元素都可能成为文档元素。
每个节点都有 nodeType 属性，表示该节点的类型。节点类型由定义在 Node 类型上的 12 个数值常量表示, 浏览器并不支持所有节点类型
nodeName 与 nodeValuenodeName 与 nodeValue 保存着有关节点的信息。
节点关系文档中的所有节点都与其他节点有关系。这些关系可以形容为家族关系，相当于把文档树比作家谱。 在 HTML 中，<body>元素是<h ...
BOM
BOMBOM 是使用 JavaScript 开发 Web 应用程序的核心。BOM 提供了与网页无关的浏览器功能对象。
window 对象BOM的核心是 window 对象，表示浏览器的实例。
window 对象在浏览器中有两重身份，一个是 ECMAScript 中的 Global 对象，另一个就是浏览器窗口的 JavaScript 接口。这意味着网页中定义的所有对象、变量和函数都以 window 作为其 Global 对象，都可以访问其上定义的 parseInt()等全局方法。
因为 window 对象的属性在全局作用域中有效，所以很多浏览器 API 及相关构造函数都以 window 对象属性的形式暴露出来。
Global 作用域1.通过 var 声明的所有全局变量和函 数都会变成 window对象的属性和方法。
2.如果在这里使用 let 或 const 替代 var，则不会把变量添加给全局对象
3.访问未声明的变量会抛出错误，但是可以在 window 对象上查询是否存在可能未声明的变量。
12345// 这会导致抛出错误，因为 oldValue 没有声明var newValue = ...
异步函数
异步函数异步函数，也称为“async/await”（语法关键字），是 ES6 期约模式在 ECMAScript 函数中的应用。
这个特性从行为和语法上都增强了 JavaScript，让以同步方式写的代码能够异步执行。
下面来看一个最简单的例子：
1let p = new Promise((resolve, reject) => setTimeout(resolve, 1000, 3));
这个期约在1000 毫秒之后解决为数值 3。如果程序中的其他代码要在这个值可用时访问它，则需写一个解决处理程序，这其实是很不方便的，
12let p = new Promise((resolve, reject) => setTimeout(resolve, 1000, 3)); p.then((x) => console.log(x)); // 3
因为其他代码都必须塞到期约处理程序中。不过可以把处理程序定义为一个函数：
123function handler(x) { console.log(x); } let p = new Promise ...
期约
同步与异步同步行为对应内存中顺序执行的处理器指令。每条指令都会严格按照它们出现的顺序来执行，而每条指令执行后也能立即获得存储在系统本地（如寄存器或系统内存）的信息。这样的执行流程容易分析 程序在执行到代码任意位置时的状态（比如变量的值）。
异步行为类似于系统中断，即当前进程外部的实体可以触发代码执行。异步操作经常是必要的，因为强制进程等待一个长时间的操作通常是不可行的（同步操作则必须要等）。如果代码要访问 一些高延迟的资源，比如向远程服务器发送请求并等待响应，那么就会出现长时间的等待。 异步操作的例子可以是在定时回调中执行一次简单的数学计算：
123 let x = 3; setTimeout(() => x = x + 4, 1000);
以往的异步编程模式在早期的 JavaScript 中，只支持定义回调函数来表明异步操作完成。串联多个异步操作是一个常见的问题，通常需要深度嵌套的回调函数（俗称“回调地狱”）来解决。
1.异步返回值
2.失败处理
3.嵌套异步回调
如果异步返值又依赖另一个异步返回值，那么回调的情况还会进一步变复杂。随着代码越来越复杂，回调策略是不具有 ...
函数
函数定义:函数实际上是对象。每个函数都是Function 类型的实例，而 Function 也有属性和方法，跟其他引用类型一样。
函数定义1.函数声明
1function sum (num1, num2) { return num1 + num2; }
2.函数表达式
1let sum = function(num1, num2) { return num1 + num2; };
3.箭头函数
1let sum = (num1, num2) => { return num1 + num2; };
4.Function 构造函数
1let sum = new Function("num1", "num2", "return num1 + num2"); // 不推荐
箭头函数任何可以使用函数表达式的地方，都可以使用箭头函数
如果只有一个参数，那也可以不用括号。
只有没有参数，或者多个参数的情况下，才需要使用括号：
以下两种写法都有效
1 ...
博客搭建
用Hexo & Github搭建专属博客安装Git和NodeJS由于此前已经安装，所以这边就不说明了，如果你使用的是hugo+github搭建个人博客，可以安装hugo，则不需要安装nodejs
注意点：
git需要绑定账号
1git config --global user.name “Your Name”
这个是你的github用户名
1git config --global user.email email@example.com
这个是填入你的github使用时的邮箱
安装Hexo–核心在命令行执行下列命令:
1npm install -g hexo-cli
如果卡顿或者卡住不动就把npm的源换成taobao的源(或者科学上网)
安装 Hexo 完成后，在你新建的存放你的网站的资源的文件夹下打开“Git Bash”或者使用命令行cmd也可以，Hexo 将会在指定文件夹中 新建所须要的文件,再执行下列命令:
12345hexo init myBlog cd myBlog npm install
结束后:测试本地的部署
1hexo s
运行命令，其中 s 是 s ...