20170602学习笔记整理

来源：互联网发布：部分便笺元数据已损坏编辑：程序博客网时间：2024/06/02 05:58

一．JS高程序设计第二章笔记

1.本章学习目标：

①使用<script>元素

②嵌入脚本&外部脚本

③文档模式对JS的影响

④考虑禁用JS 的场景

2.<script>元素：

①向HTML页面中插入JS的主要方法。

②src属性：包含要执行代码的外部文件。

③type属性：表示编写代码使用脚本语言的内容类型（也称为MIME类型），实际上，服务器在传送JS文件时使用的MIME类型通常是application/x-javascript。目前，type属性值依旧为text/javascript.

④使用<script>元素的两种方式：

直接在页面嵌入JS代码/包含外部JS文件。

⑤外部JS文件的拓展名不是必需的，因为浏览器不会检查其拓展名，这使JSP,PHP或其他服务端语言动态生成JS代码变成了可能。但是，服务器通常还是需要看扩展名决定响应应用哪种MIME类型。

⑥<script>元素的src属性还可以包含来自外部域的JS文件：

即指向当前HTML页面所在域之外的某个域中的URL，例：

<script type="text/javascript" src="http://www.somewhere.com/afile.js"></script>

3.rel/src/href/URL区别？

①rel：relationship，用于定于链接的文件与HTML文档之间的关系。

例：<link rel="stylesheet" ...>

②src：source，仅仅将外部资源嵌入当前文档元素定义的位置。

例：<script ... src="1.js"></script>

 <img src="images/1.png">

③href：HyperText reference，超文本引用，属性值可以是任何有效文档的相对或绝对URL（Uniform Resource Locator统一资源定位符），包括片段标识符和JS代码段。

例：<a href="http://www.baidu.com">baidu</a>

<link rel="stylesheet" type="text/css" href="scripts/verticalNav.css">

④URL：统一资源定位符，是互联网上标准资源的地址。互联网上的每个文件都有一个唯一的URL，他所包含的信息指出文件的位置，以及浏览器应如何处理它。

4.Sun:Stanford University Network.

5.为什么将<script>元素放置<body>元素中页面内容的后面？

因为如果你将<script>元素放在<head>元素中，意味着必须等到全部JS文件被下载、解析、执行之后，才开始呈现页面内容（浏览器遇到<body>元素才开始呈现内容），对于那些需要大量JS代码的页面来说，会导致浏览器在呈现页面时出现明显的延迟（一片空白）。

6.延时脚本（defer）：

①脚本会延时至整个页面都解析完毕后再运行。

②在现实中，延时脚本并不一定会按照顺序执行，也不一定在DOMContentLoaded事件触发前执行，因此最好只包含一个延时脚本。

7.异步脚本（asyn）：

①与defer类似，asyn只适用于外部脚本文件，并告诉浏览器立即下载文件。

②并不保证按照它们的先后顺序执行（因此确保它们相互之间的独立性）。

③asyn脚本作用：不必让页面等待多个脚本下载和执行，而是异步加载页面其他内容。

8.什么是脚本语言？

又称扩展语言、动态语言，是一种编程语言，用来控制软件应用程序，通常以文字保存，只有被调用时才进行解释或编译。

9.XHTML：Extensible HyperText Markup Language可扩展超文本标记语言。

10.外部JS文件的优点？

①可维护性：将所有JS文件都放在一个文件夹中，开发人员能在不触及HTML标记的情况下，集中精力编辑JS代码。

②可缓存：如果多个页面公用一个JS文件，那么这个JS文件只需被下载一次，从而加快页面加载的速度。

③适应未来：HTML&XHTML包含外部文件的语法相同。

11.文档模式：

①IE5.5引入的概念，通过文档类型（doctype）切换实现。

②最初的两种文档模式：quirks mode/standards mode（混杂/标准）

12.<noscript>元素：

①作用：在不支持JS的浏览器中显示替代的内容（平稳退化）。

②该元素可以包含HTML文档<body>元素中的任何元素。除了<script>元素。

③适用场景：

a)浏览器不支持JS。

b)浏览器支持JS，但被禁用。

13.小结（brief summary）：

①所有<script>元素都会按照它们在页面出现的先后顺序依次被解析（前提：没有使用defer/asyn属性）。

二．为什么整个互联网行业都缺前端工程师？（观点整理）

http://blog.csdn.net/vuturn/article/details/46593013

①相对是个全新的领域。

②对前端普遍存在巨大的误解。

③大量糟糕的前端工程师的存在，扰乱了市场。

1.接口技术实现&用户体验。

2.UX：User Experience.

3.JS、后端技术、UX、数据库、系统设计。

4.优秀的前端工程师应具备的能力：

①在设计师&工程师之间创建可视化语言。

②为Web应用程序的公约、框架、需求、可视化语言和规格设定底线。

③定义Web应用程序的设备、浏览器、屏幕、动画的范围。

④保证代码质量、产品的标准。

⑤为Web应用程序设计适当的行距、字体、标题、图标、颜色、背景等。

⑥分辨率的图像、伸缩性和维护设计指南。

⑦用一种友好的、低消耗的设备与客户端感知的方式连接API获取内容。

⑧开发客户端代码来显示流畅的动画、过渡（transition）、延时加载、交互、考虑渐进增强&平稳退化的标准。

⑨保证后台的连接安全。

⑩满足客户&用户需求。

5.渐进增强：

从最进本的可用性出发，在保证站点页面在低级浏览器中的可用性和可访问性的基础上，逐步加强功能和用户体验。

6.平稳退化：

首先使用最新的技术面相高级浏览器构建最强的功能和用户体验，然后针对低级浏览器进行限制，逐步衰减那些无法被支持的功能和体验。

三．精通CSS第六章笔记

1.将条目标识为列表并加上标记，会在HTML文档中增加结构，提供应用样式的钩子（hook）。

2.本章学习目标：

①用CSS对列表应用样式

②使用背景图像作为项目符号

③创建垂直/水平导航条

④使用滑动门标签页式导航

⑤纯CSS下拉菜单

⑥创建CSS图像映射

⑦创建远距离翻转

⑧使用定义列表

阅读全文

0 0