《疯狂HTML CSS3 JavaScript讲义》读书笔记第一章 HTML5简介 day01

2018-01-11

本书PDF版下载地址《疯狂HTML CSS3 JavaScript讲义》由于是读书笔记，我只会记录我认为有用的知识，如果你想了解更多，请自己阅读。

HTML5的优势

1.解决跨浏览器的问题

IE: 在IE 9 之后更好的兼容了HTML5
Chrome: Googele 一直都支持HTML5
Firefox: 从firefox 4开始就支持HTML5
Opera: 从Opera 10 开始支持HTML5
Safari: 从Safari 5 开始支持HTML5

2.部分代替了JavaScript

例如，打开一个页面后立即让某个单行文本框获得输入焦点，在HTML5之前，需要JavaScript来实现如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>dayo1</title>
</head>
<body>
  昵称：<input type="text" id="name">
  邮箱：<input type="text" id="email">
  <script>
    document.getElementById("name").focus();
  </script>
</body>
</html>

上面的页面使用HTML5 只需要加一个属性，如下：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>dayo1</title>
</head>
<body>
  昵称：<input type="text" autofocus id="name">
  邮箱：<input type="text" id="email">
</body>
</html>

3.更明确的语义支持

HTML5之前，表达一个文档结构，如下：

<div id="header">...</div>
<div id="nav">...</div>
<div id="article">...</div>
<div id="aside">...</div>
<div id="footer">...</div>

HTML5表达一个文档结构，如下：

<header>...</header>
<nav>...</nav>
<article>...</article>
<aside>...</aside>
<footer>...</footer>

4.增强了web应用程序的功能

一直以来，HTML页面的功能被死死的限制：客户端从服务器下载HTML页面数据，浏览器负责呈现这些HTML页面数据。出于对客户机的安全性考虑，以前的HTML在安全性方面做得足够安全。

当页面做得太安全之后，我们需要通过JavaScript等其他方式来增加HTML功能，

为了弥补这种不足，HTML5规范增加了不少新的API。

HTML5的基本结构和语法变化

1.HTML5基本结构

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  
</body>
</html>

不要在<html>和<head>之间插入任何内容

2.HTML的语法变化

1.标签不再区分大小写，例如：

<body>
  <P>
    ...
  </p>
</BODY>

上面的代码完全符合HTML5规范

2.元素可以省略结束标签，具体来说，HTML5可分为以下3种：

空元素语法的元素：area、base、br、col、command、embed、hr、img、input、keygen、link、mata、param、source、wbr。

这些空元素标签不允许将开始标签和结束标签分开定义。
1
2
3
<img src=" "></img> //错误写法
<img src=" " /> //正确写法
<img src=" " > //正确写法 HTML5可以省略最后一个斜杠
可以省略结束标签的元素：colgroup、dt、dd、li、optgroup、option、p、rt、rp、thead、tbody、tfoot、tr、td、th。
可以省略全部标签的元素：html、head、body、tbody。
1
2
3
4
5
6
7
<!DOCTYPE html>
<title>dayo1</title>
<p>
<ol>
<li></li>
<li></li>
</ol>
上面页面中完全没有<html.../>、<head.../>、<body.../>这3个元素，但这个页面是符合HTML5规范的。

3.允许省略属性值的属性

1
2
3

<input checked type="checkbox" />
<input readonly type="text" />
<option value="1" selected />

HTML5中允许省略属性值得属性

HTML5	XHTML
checked //默认选中	checked=”checked”
readonly //只读	readonly=”readonly”
disabled //禁用	disabled=”disabled”
selected //默认选中	selected=”selected”
defer //延迟	defer=”defer”
ismap //是否是服务器map的一部分	ismap=”ismap”
nohref //不存在链接	nohref=”nohref”
noshade //去除阴影	noshade=”noshade”
nowrap //不换行	nowrap=”nowrap”
multiple //规定可同时选择多个选项	multiple=”multiple”
noresize //不允许调整窗口尺寸	noresize=”noresize”

4.允许属性值不使用引号

传统的XHTML，要求所有的属性值都必须用引号引起来，单HTML5允许直接给出属性值，即使不放在引号中也是正确的。

但是如果属性值包含空格等容易引起浏览器混淆的属性值，那么HTML5依然建议使用引号把这种特殊的属性值引用起来

展开全文 >>

H5&&C3

2018-01-10

HTML5

HTML5的设计目的是为了在移动设备上支持多媒体

我们常说的H5其实是一个范称，它是由HTML+CSS3+Javascript等技术组合而成的开发平台

标签	注释
header	定义文档的头部区域
nav	定义导航链接的部分
section	定义文档中的节（区段）
article	定义页面独立的内容区域
aside	定义页面的侧边栏内容
footer	定义section或document的页脚
meter	定义范围内的度量（IE不支持）
nav	定义导航栏链接

表单

HTML5 拥有多个新的表单输入类型。这些新特性提供了更好的输入控制和验证

类型	说明
email	在提交表单时，会自动验证 email 域的值是否合法有效
url	定义输入URL字段,在提交表单时，会自动验证 url 域的值
tel	定义输入电话号码字段
number	定义一个数值输入域(限定): max- 规定允许的最大值 min - 规定允许的最小值 step - 规定合法的数字间隔（如果 step=”3”，则合法的数是 -3,0,3,6 等） value - 规定默认值
search	定义一个搜索字段 (类似站点搜索或者Google搜索)
month	定义月与年
range	定义一个不需要非常精确的数值（类似于滑块控制）: max- 规定允许的最大值 min - 规定允许的最小值 step - 规定合法的数字间隔（如果 step=”3”，则合法的数是 -3,0,3,6 等） value - 规定默认值
color	从拾色器中选择一个颜色
time	定义可输入时间控制器
date	定义一个时间控制器
week	定义周和年
month	定义月与年

注意:并不是所有的主流浏览器都支持新的input类型，不过您已经可以在所有主流的浏览器中使用它们了。即使不被支持，仍然可以显示为常规的文本域。部分类型是针对移动设备生效的，且具有一定的兼容性，在实际应用当中可选择性的使用。

多媒体

音频播放组件

1	<audio src="要播放的音频文件"></audio>

视频播放组件

1	<video src="要播放的视频文件"></video>

DOM元素获取

document.getElementsByClassName(‘class’); 通过类名获取元素，以类数组形式存在。
document.querySelector(‘selector’); 通过CSS选择器获取元素，符合匹配条件的第1个元素。
document.querySelectorAll(‘selector’); 通过CSS选择器获取元素，以类数组形式存在。

CSS3

属性选择器

其特点是通过属性选择元素：

E[ attr ] 表示存在attr属性即可；
E[ attr = val ] 表示属性值完全等于val；
E[ attr = val ] 表示属性值里包含val字符并且在*任意位置
E[ attr^ = val ] 表示属性值里包含val字符并且在开始的位置
E[ attr$ = val ] 表示属性值里包含val字符并且在结束的位置

伪类选择器

除了以前的:link、:active、:visited、:hover,css3又增加了其它的伪类选择器：

通过某元素相对于其父元素或兄弟元素的位置来获取元素的结构伪类

E:first-child 第一个子元素
E:last-child 最后一个子元素
E:nth-child(n) 第n个子元素，计算方法是E元素的全部兄弟元素
E:nth-last-child(n) 同 E:nth-child(n)相似，只是倒着计算

颜色

新增了RGBA、HSLA模式，其中的A 表示透明度通道，即可以设置颜色值的透明度，相较opacity，它们不具有继承性，即不会影响子元素的透明度

HSLA可以参考此MDN

文本

text-shadow: 文本阴影可分别设置偏移量、模糊度、颜色（可设透明度) 例如：

1
2
3

.one {
   text-shadow: 1px 1px 0 red; \\模糊度值为：0-1
}

边框圆角

border-radius

1
2
3

.two {
  border-radius: 50%	\\相当于四个角都设了同样的值
}

边框阴影

box-shadow

box-shadow: 10px 5px 5px red; 
/* 
1、水平偏移量 正值向右 负值向左；
2、垂直偏移量 正值向下 负值向上；
3、模糊度是不能为负值；
4、inset可以设置内阴影；
*/

背景

background-size 设置背景图片的尺寸

background-size:cover 会自动调整缩放比例，保证图片始终填充满背景区域，如有溢出部分则会被隐藏

background-size:contain 会自动调整缩放比例，保证图片始终完整显示在背景区域

动画

动画是CSS3中具有颠覆性的特征之一，可通过设置多个节点来精确控制一个或一组动画，常用来实现复杂的动画效果

具体推荐阅读基于bootstrap的animation.css

展开全文 >>

form 表单

2018-01-09

表单的概念在生活中很常见，就像是问卷调查表一样，别人先把问卷发给你，你照着问卷的要求填写，完事过后再将填完的问卷发给别人，从而达到一个将别人需要的信息传递给别人的一种方式。
传统的网页大多数的作用都是展示数据，就是将信息传递给用户。而在现代化的 Web 开发中，非常注重信息交互，所以表单也随处可见，只是形式上变成网页，性质上还是一模一样的。主要的作用任然是 收集指定的用户信息。

表单的基本使用

HTML 中有一个专门用于提交数据的标签： <form>，通过这个标签可以很容易的收集用户输入。

form标签有两个必要属性

action：表单提交的地址
method：表单以什么方式提交

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF‐8">
  <title>登录</title>
</head>
<body>
  <form action="login.php" method="post">
    <div>
      <label for="username">用户名</label>
      <input type="text" id="username" name="username">
    </div>
    <div>
      <label for="password">密码</label>
      <input type="password" id="password" name="password">
    </div>
    <button type="submit">登录</button>
  </form>
</body>
</html>

如上用户第一次请求得到这个表单页面，点击登录会自动发给login.php 。之后就是考虑如何在login.php中获取到用户提交过来的内容

PHP 中有三个超全局变量专门用来获取表单提交内容：
1. $_GET ：用于获取以 GET 方式提交的内容
2. $_POST ：用于获取以 POST 方式提交的内容
3. $_REQUEST ：用于获取 GET 或 POST 方式提交的内容

例如：

<?php
// 获取表单提交的用户名和密码
echo '用户名：' . $_REQUEST['username'];
echo '密码：' . $_REQUEST['password'];

提交地址

action 提交地址指的是这个表单填写完成过后点击提交，发送请求的请求地址是什么。
从便于维护的角度考虑，一般我们最常见的都是提交给当前文件，然后在当前文件中判断是否是表单提交请求：

<?php
if ($_SERVER['request_method'] === 'POST') {
  //表单提交的请求
}

使用$_server['PHP_SELF']动态获取当前页面的访问路径

1
2
3

<form action="<?php echo $_server['php_self']; ?>">
  <!-- ... -->
</form>

提交方式

method用于设置表单提交的方式详情请看 http

表单元素

单选按钮

1 2	<input type="radio" name="gender" value="male"> <input type="radio" name="gender" value="female"

复选按钮

1 2	<input type="checkbox" name="agree"> <input type="checkbox" name="agree">

如果需要提交多个选中项，可以在name属性后面跟上[]:

1
2
3

<input type="checkbox" name="funs[]" id="" value="football">
<input type="checkbox" name="funs[]" id="" value="basketball">
<input type="checkbox" name="funs[]" id="" value="world peace">

选择框

<select name="sub">
  <option value="1">语文</option>
  <option value="2">数学</option>
</select>

属性的列表

属性	描述
accept-charset	规定在被提交表单中使用的字符集（默认：页面字符集）
action	规定何处提交表单地址（URL）
autocomplete	规定浏览器应该自动完成表单（默认：开启）
enctype	规定被提交数据的编码(莫认：url-encoded)
method	规定在提交表单是所用的HTTP方法（莫认：GET）
name	规定识别表单的名称（对于DOM使用：document.forms.name）
novalidate	规定浏览器不验证表单
target	规定action属性中地址的目标（默认：_self）

展开全文 >>

http

2018-01-08

概念

定义

http( HyperText Transfer Protocol, 超文本传输协议) 最早就是计算机与计算机之间沟通的一种协议，这种协议限制了通讯内容的格式以及各项内容的含义。随着时代的发展，技术的变迁，这种协议现在广泛的应用在各种领域，也不仅仅局限于计算机与计算机之间，手机、电脑等各种智能设备很多时候都在使用这种协议通讯，所以一般现在称HTTP为端与端之间的通讯协议

应用软件架构一般分为两类:

B/S架构 : Browser(浏览器) ←→ Server (服务器)，这种软件都是通过浏览器访问一个网站使用，服务器提供数据存储等服务。
C/S架构 : Client(客户端) ←→ Server (服务器)，这种软件通过安装一个软件到电脑，然后使用，服务器提供数据存储等服务。

约定的内容

请求/响应报文格式
请求方法
响应状态
预设的请求/响应头

约定的形式

客户端通过随机端口与服务端某个固定端口(一般为80) 建立连接
客户端通过这个连接发送请求到服务器
服务端监听端口得到的客户端发送过来的请求
服务端通过连接响应给客户端状态和内容

核心概念

请求报文

请求行：GET / index.html HTTP/1.1
请求方式+空格+请求路径+空格+HTTP协议版本
请求头：客户端想要告诉服务端的一些额外信息，以下为常见的请求头 ↓

键	值
Host	请求的主机
Cache-Control	控制缓存（例如：max-age=60 缓存 60 秒）
Accept	客户端想要接收的文档类型，逗号分隔
User-Agent	标识什么客户端帮你发送的这次请求
Referer	这次请求的来源
Accept-Encoding	可以接收的压缩编码

请求体：这次请求客户端想要发送给服务端的数据正文，一般在GET请求请求时很少用到，应为GET请求主观上都是去 拿东西。

响应报文

状态行：HTTP/1.1 200 ok
HTTP协议版本 + 空格 + 状态码 + 空格 + 状态描述
响应头：服务端想要告诉客户端的一些额外信息，常见的有 ↓

键	值
Date	响应时间
Server	服务器信息
Content-Type	响应的内容类型
Content-Length	响应的内容大小

响应体：这次请求服务端想要返回给客户端的数据正文，一般返回的都是HTML，也可以返回javascript和css

应用场景

设置响应文件类型
- header（‘Content-Type ：text/css’）;
重定向（跳转到其它网页）
- header(‘Location:http://wenlai1010.github.io’);

下载文件

//让文件下载
header('Content-Type: application/octet-stream');
//设置默认下载文件名
header('Content-Disposition: attachment;filename=demo.txt');

请求方式

GET: 拿，获取
POST: 发，给
- 对比GET与POST

|          | GET                                      | POST                                     |
| :------- | ---------------------------------------- | ---------------------------------------- |
| 后退按钮/刷新  | 无害                                       | 数据会被重新提交（浏览器应该告知用户数据会被重新提交）              |
| 书签       | 可收藏为书签                                   | 不可收藏为书签                                  |
| 缓存       | 能被缓存                                     | 不能缓存                                     |
| 编码类型     | application/x-www-form-urlencoded        | application/x-www-form-urlencoded或multipart/form-data.为二进制数据使用多重编码 |
| 历史       | 参数保留在浏览器历史中                              | 参数不会保存在浏览器历史中                            |
| 对数据长度的限制 | 有，当发送数据时，GET方法想url添加数据，URL的最大长度是2048个字符。 | 无限制                                      |
| 对数据类型的限制 | 只允许ASCII字符                               | 没有限制也允许二进制数据                             |
| 安全性      | 与post相比，GET的安全性较差，因为所发送的数据是URL的一部分。在发送密码或其他敏感信息是绝不要使用GET | POST比GET更安全，因为参数不会被保存在浏览器历史或web服务器日志中。   |
| 可见性      | 数据在URL中对所有人都是可见的                         | 数据不会显示在URL中                              |

状态码

状态码由三为数字组成，第一个数字定义了响应的类别

1**：提示信息—-表示请求已接收，继续处理。
2**：成功—-表示请求已成功接受。
3**：重定向—-要完成请求必须进行更近一步的操作。
4**：客户端错误—-请求有语法错误或请求无法实现。
5**：服务器错误—-服务器未能实现合法的请求。

常见的状态码描述如下：

200 OK : 客户端请求成功。
400 Bad Request：客户端请求有语法错误，不能被服务器所理解。
401 Unauthorized：请求未经授权，这个状态码必须和www-Authenticate 报头域一起使用。
403 Forbidden：服务器收到请求，但是拒绝提供服务。
404 Not Found：请求的资源不存在
500 internal Server Error 服务器发送不可预期的错误。
503 Server Unavailable：服务器当前不能处理客户端的请求，一段时间后可能恢复正常。

展开全文 >>

Vue.js 02

2017-11-29

知识点

Vue 基础
- 转变 DOM 操作思想
- MVVM
  - Model
  - View
  - ViewModel
  - 哲学：数据驱动视图
不难、最简单的、掌握工具的使用方法就可以了
Vue 框架
- Vue Router
- Vuex
- webpack
  - 可以像写 node 一样写浏览器中的 JavaScript
- Vue CLI
- Vue 全家桶
- 一整套的集成解决方案

EcmaScript 6

Vue 基本语法复习
EcmaScript 6
- let
  - 定义变量，核心就是增加了块级作用域
- const
  - 也是块级作用域，它的作用是定义常量，一旦定义不可改变

总结

let 和 const
模板字符串的使用
解构赋值
- 数组的解构赋值
- 对象
- 函数参数也支持解构赋值
函数的扩展
- 参数默认值，只有尾参数才可以省略
  - 如果一个函数有多个参数，而只有其中一个有默认值可以省略，则把这个参数定义成尾参数
- 函数参数的 rest 参数
  - 获取剩余参数
  - 代替了 arguments
  - 而且默认是真正的数组
- 箭头函数
  - 语法
  - this 指向问题
  - 不能乱用，要分请求它内部的 this
  - 因为箭头函数中默认自动 bind(this)
  - 所以箭头函数是无法通过手动 call、apply、bind 来修改其内部 this 指向的

展开全文 >>

Vue.js 01

2017-11-27

单页面应用程序

Single Page Application（SPA）

Single Page Application（SPA）
从字面意义来看就是一个网站就一个页面
- coding
- 网易云音乐
- 极致用户体验，就像 native app 一样。

优点
- 分离前后端关注点，前端负责界面显示，后端负责数据存储和计算，各司其职，不会把前后端的逻辑混杂在一起
- 1、具有桌面应用的即时性、网站的可移植性和可访问性。
  2、用户体验好、快，内容的改变不需要重新加载整个页面，web应用更具响应性和更令人着迷。
  3、基于上面一点，SPA相对对服务器压力小。
  4、良好的前后端分离。SPA和RESTful架构一起使用，后端不再负责模板渲染、输出页面工作，web前端和各种移动终端地位对等，后端API通用化。
  5、对前端人员javascript技能要求更高，促使团队技能提升。作者：洞妖洞妖我系洞两链接：https://www.zhihu.com/question/20792064/answer/37808081

缺点
- 致命缺点：SEO 问题，搜索引擎优化
- 目前也有一些对应的解决方案：但是都不够完美
- 1、不利于SEO。
  2、初次加载耗时相对增多。
  3、导航不可用，如果一定要导航需要自行实现前进、后退。
  4、对开发人员技能水平、开发成本高。

简单模拟单页面应用程序的效果

hash
window.onhashchange 事件
当 hash 改变的时候，根据不同的 hash 做不同处理

主流前端 JavaScript 框架

Angular
- 09年原来是个人开发的，后来被 Google 给收购了
React
- 诞生于 Facebook 公司内部
Vue.js
- 尤雨溪（中国江苏无锡人，12 年左右）

Vue.js 介绍

是什么
- 前端 JavaScript 框架
为什么用它
- 它能帮助提升网站应用程序开发效率
一般什么情况下使用它
- 一般是需要开发 SPA 应用程序的时候去用
- 但是 Vue 是渐进式的，Vue 其实可以融入到不同的项目中
  
  可以和传统的网站开发架构融合在一起，例如可以简单的把它当作一个类似 jQUery 的库来使用
  
  也可以使用它开发大型的 SPA 单页面应用程序
发展历史
- 作者：尤雨溪（微博：尤小右）。
  
  个人网站知乎新浪微博
  - 作者尤雨溪最初在 2013 年 12 月 8号在 GitHub 上发布了 0.6 版
    - 2015 年 10 月份正式发布了 1.0 版本
      
      Vue 真正的火起来就是在 15 年的 1.0 版发布之后才简陋头角
    - 2016 年 10 月份正式发布了 2.0 版
    - 截止到 2017-11-9 16:24:15 最新版是 2.5.3