新手 来自前端小白的部分资料整理

sc · 2018年08月04日 · 最后由 es6china 回复于 2018年08月04日 · 1050 次阅读
本帖已被设为精华帖!

前端小白说

web前端在读书籍一览

《 HTML & CSS 设计与构建网站》
《JavaScript DOM编程艺术(第2版)》
《JavaScript编程全解》
《JavaScript高级程序设计(第3版)》
《JavaScript权威指南》
《学习JavaScript数据结构与算法》
《图解HTTP》

网站推荐

张鑫旭的个人空间

知识多一点

浏览器内核

浏览器类型 浏览器内核
IE trident
Firefox gecko
Safari webkit
Opera 以前是 presto 内核, Opera 现已改用 Google Chrome 的 Blink 内核
Chrome Blink( 基于 webkit , Google 与 Opera Software 共同开发 )
浏览器页面三层构成
HTML CSS JavaScript
结构成 表示层 行为层
实现页面结构 完成页面的表现与风格 实现一些客户端的功能与业务

DOCTYPE:告诉浏览器按照何种规范解析页面 HTML/XHTML

严格模式 混杂模式区别

严格模式 服务于标准规则
混杂模式 服务于旧规则

lin'k @important
XHTML 标签,除了加载 CSS 外,还可以定义 RSS 等其他事务 CSS 范畴,只能加载 CSS
引用 CSS 时,在页面载入时同时加载 页面网页完全载入以后加载
XHTML 标签,无兼容问题 @import 是在 CSS2.1 提出的,低版本的浏览器不支持
支持使用 Javascript 控制 DOM 去改变样式 @import 不支持

常见块元素 行内元素 空元素

块元素 行内元素 空元素 可变元素
div a br(换行) button
h1~h6 img hr(分割线) iframe
ul、ol input img object
form textarea input script
p code link ins
table strong meta del
HTML5 简介

是一套包括 HTML 、 CSS 和 JavaScript 在内的技术组合,它希望能够减少网页浏览器对于需要插件的丰富性网络应用服务( Plug-in-Based Rich Internet Application , RIA )
HTML4陈旧不能满足日益发展的互联网需要,安全与稳定堪忧,不适合在移动端使用(耗电、触摸、不开放)
HTML5增强了浏览器的原生功能,符合 HTML5 规范的浏览器功能将更加强大,减少了 Web 应用对插件的依赖,让用户体验更好,让开发更加方便。

语义化标签
语义化含义

根据内容的结构化(内容语义化),选择合适的标签(代码语义化)便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

为什么要语义化

为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构 : 为了裸奔时好看
用户体验:例如title、 alt 用于解释名词或解释图片信息、 label 标签的活用;
有利于SEO:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以意义的方式来渲染网页;
便于团队开发和维护,语义化更具可读性,是下一步网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

语义化标签

<header></header>
<footer></footer>
<nav></nav>
<section></section>
<article></article>
<aslde></aside>
<figure></figure>媒体元素,比如一些视频,图片啊等等。

HTML5优缺点
优:

W3C规范
跨平台 只要有浏览器即运行环境就可以在任何设备上运行
语义化标签 裸跑更好看
利于机器、爬虫抓取,SEO
新增 vedio radio 多媒体标签,很好地替代flash

缺:

浏览器兼容:不兼容IE9以下浏览器。
安全:web storage、web socket 等功能模块容易被黑客利用,非法盗取用户信息。
完善:大多数浏览器对实现的特性大不相同。
技术门槛:新增很多属性和接口,需要开发者学习。例:web worker、web socket、web storage 新增特性,浏览器原理,HTTP、TCP/IP等。

H5新特性
结构性元素负责web上下文结构的定义

section:用于区域的章节描述。
header:页面主体上的头部。
footer:页面的底部(页脚),通常会标出网站的相关信息。
nav:专门用于菜单导航、链接导航的元素,是 navigator 的缩写。
article:用于表现一篇文章的主体内容。

级块性元素主要完成web页面区域的划分,确保内容的有效分割。

aside:用于表达注记、贴士、侧栏、摘要、插入的引用等作为补充主体的内容。删除后对主体内容没有影响 figure:是对多个元素进行组合并展示的元素,通常与 ficaption 联合使用。
code:表示一段代码块。
dialog:用于表达人与人之间的对话,该元素包含 dt 和 dd 这两个组合元素, dt 用于表示说话者,而 dd 用来表示说话内容。

行内语义性元素主要完成web页面具体内容的引用和描述,是丰富内容展示的基础。

meter:表示特定范围内的数值,可用于工资、数量、百分比等。
time:表示时间值。
progress:用来表示进度条,可通过对其 max 、 min 、 step 等属性进行控制,完成对进度的表示和监事。
video:视频元素,用于支持和实现视频文件的直接播放,支持缓冲预载和多种视频媒体格式。
audio:音频元素,用于支持和实现音频文件的直接播放,支持缓冲预载和多种音频媒体格式。

交互性元素主要用于功能性的内容表达,会有一定的内容和数据的关联,是各种事件的基础。

details:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与 legend 交互才会显示出来。
datagrid:用来控制客户端数据与显示,可以由动态脚本及时更新。
menu:主要用于交互菜单(曾被废弃又被重新启用的元素)。
command:用来处理命令按钮。

渐进增强(progressive enhancement)和优雅降级(graceful degradation)区别?

渐进增强:
.transition{ -webkit-transition: all .5s; -moz-transition: all .5s; -o-transition: all .5s; transition: all .5s; }
优雅降级:
.transition{    transition: all .5s;    -o-transition: all .5s;  -moz-transition: all .5s; -webkit-transition: all .5s; }
渐进增强:
更注重内容,一种更为合理的设计范例
优雅降级:
针对那些最高级、最完善的浏览器来设计网站。

W3C标准的理解

标签闭合 小写 不乱嵌套
语义化标签 裸奔更好看 利于搜索机器人抓取 SEO
行为、样式分离 利于维护

WebGL

WebGL(全写 Web Graphics Library )是一种 3D 绘图标准,这种绘图技术标准允许把 JavaScript 和 OpenGL ES 2.0 结合在一起,通过增加 OpenGL ES 2.0 的一个 JavaScript 绑定, WebGL 可以为 HTML5 Canvas 提供硬件 3D 加速渲染,这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示 3D 场景和模型了,还能创建复杂的导航和数据视觉化。显然, WebGL 技术标准免去了开发网页专用渲染插件的麻烦,可被用于创建具有复杂 3D 结构的网站页面,甚至可以用来设计 3D 网页游戏等等。

WebGL完美地解决了现有的 Web 交互式三维动画的两个问题:

第一,它通过HTML脚本本身实现 Web 交互式三维动画的制作,无需任何浏览器插件支持 ;
第二,它利用底层的图形硬件加速功能进行的图形渲染,是通过统一的、标准的、跨平台的OpenGL接口实现的。
通俗说WebGL中 canvas 绘图中的 3D 版本。第三方库 如:three.js。

cookies,sessionStorage 和 localStorage 的区别

cookies LocalStorage sessionStorage
每个域名存储量比较小(各浏览器不同大致 4K ) 永久存储 只在 Session 内有效
所有域名的存储量有限制(各浏览器不同大致 4K ) 单个域名存储量比较大(推荐 5MB各浏览器不同) 存储量更大(推荐没有限制但是实际上各浏览器也不同)
有个数限制(各浏览器不同) 总体数量无限制
会随请求发送到服务器
SVG可缩放矢量图形( Scalable Vector Graphics )

是基于可扩展标记语言( XML ),用于描述二维矢量图形的一种图形格式。 SVG 是 W3C('World Wide Web ConSortium' 即 ' 国际互联网标准组织 ') 在 2000 年 8 月制定的一种新的二维矢量图形格式,也是规范中的网络矢量图形标准。 SVG 严格遵从 XML 语法,并用文本格式的描述性语言来描述图像内容,因此是一种和图像分辨率无关的矢量图形格式。 SVG 于 2003 年 1 月 14 日成为 W3C 推荐标准。
特点: (1)任意放缩
用户可以任意缩放图像显示,而不会破坏图像的清晰度、细节等。
(2)文本独立
SVG图像中的文字独立于图像,文字保留可编辑和可搜寻的状态。也不会再有字体的限制,用户系统即使没有安装某一字体,也会看到和他们制作时完全相同的画面。
(3)较小文件
总体来讲,SVG文件比那些 GIF 和 JPEG 格式的文件要小很多,因而下载也很快。
(4)超强显示效果
SVG图像在屏幕上总是边缘清晰,它的清晰度适合任何屏幕分辨率和打印分辨率。
(5)超级颜色控制
SVG图像提供一个 1600 万种颜色的调色板,支持 ICC 颜色描述文件标准、 RGB 、线 X 填充、渐变和蒙版。
(6)交互 X 和智能化。 SVG 面临的主要问题一个是如何和已经占有重要市场份额的矢量图形格式 Flash 竞争的问题,另一个问题就是 SVG 的本地运行环境下的厂家支持程度。
浏览器支持:
Internet Explorer9,火狐,谷歌 Chrome , Opera 和 Safari 都支持 SVG 。
IE8和早期版本都需要一个插件 - 如 Adobe SVG 浏览器,这是免费提供的。

关于回流和重绘

回流必将引起重绘,而重绘不一定会引起回流

HTTP状态码

100 Continue 继续,一般在发送post请求时,已发送了HTTP请求头之后服务端 将返回此信息,表示确认,之后发送具体参数信息。
200 OK 正常返回信息。
201 Created 请求成功并且服务器创建了新的资源。
202 Accepted 服务器已接受请求,但尚未处理。
301 Moved Permanently 请求的网页已永久移动到新位置。
302 Found 临时性重定向
304 Not Modified 自从上次请求后,请求的网页未修改过。
400 Bad Request 服务器无法理解请求的格式,客户端不应当尝试再次使用相同的内容发起请求。
401 Unauthorized 请求未授权
403 Forbidden 禁止访问
404 Not Found 找不到如何与URL 相匹配的资源
500 Internal Server Error 最常见的服务器端错误
503 Service Unavailable 服务器端暂时无法处理请求(可能时过载或维护)

JavaScript事件

  • 鼠标移动触发事件的顺序
    • mousemove
    • mouseover
    • mouseenter
    • mousemove
    • mouseout
    • mouseleave
  • 鼠标双击触发事件的顺序
    • mousedown
    • mousemove
    • mouseup
    • click
    • mousemove
    • mousedown
    • mousemove
    • mouseup
    • click
    • dblclick
      未完待续。
      最近在刷题 突然发现知道好少 要补咯。。以下
      牛客网
共收到 1 条回复
sc 关闭了讨论 08月04日 11:15
sc 重新开启了讨论 08月04日 11:15
sc 关闭了讨论 08月04日 11:15
sc 重新开启了讨论 08月04日 11:15

如果能有链接就更好了

sc 关闭了讨论 08月04日 13:11
sc 重新开启了讨论 08月04日 13:11
es6china 将本帖设为了精华贴 08月06日 09:48
需要 登录 后方可回复, 如果你还没有账号请点击这里 注册