坤坤坤的异想世界

我们应当怎样学习HTML和CSS

2017-12-29T14:07:50+00:00

一个菜鸟的辛酸前端学习史，少不了脱发，希望自己有天能够翅膀硬了，在IT界里四处乱飞

概要来源：王淑娟web工坊

学习一门新技术，应当找一本经典入门书，在两三天之内快速翻阅完毕，了解其概貌。

然后再制定一个学习路线图（这个路线图绝大多数情况下非书本目录的顺序），接着遵循学习路线图以知识点为单位进行学习。

在这个学习过程中，仅选定一本书作为主要教材，其他学习资源作为重要及必要辅助。

在这个学习过程中，每个知识点都要完成“学习强化，总结内化”两个基本阶段。

如此，方能入门

个人体会

我们这学期的课程同样是以围绕着WSG 3和WSG 4为主，展开了

然而很惭愧，一学期下来，我却依旧没能把整本书看完。

回顾这学期我的学习状态，非常的消极。对于疑难问题往往抱着应付了事的心态来解决，

而不是刨根问底，直到彻底明白。思维模式上依旧过度依赖老师，而不是自发主动的去学习相关知识。

老师挺认真负责的，但是我没有做好。

没有想到，自己写着写着就变成了检讨书了。

革命尚未成功，同志仍需努力！希望自己能够抓住寒假的时间，好好补上过去落下的知识。

成为一个小小的程序猿。

POP与GDP关系分析

2017-12-29T13:45:50+00:00

从趋势线P值<0.1可知GDP与POP具有相关联系，两者之间成正比例关系

宗教场所分布

2017-12-29T13:45:50+00:00

揭开宗教场所的神秘面纱

影响房价的因素分析

2017-12-29T13:45:50+00:00

Layout example h1：近年来，我国的房价整体呈上升的趋势，然而，因为各地的经济水平，就业人员工资总额以及消费水平大小不一，各地的房价上涨的幅度也不一致。

VR&AR场所应用分布

2017-12-29T13:45:50+00:00

模糊虚拟与现实的界限

Markdown语法说明

2017-12-29T13:45:50+00:00

Aaron Swatz 就是一个盗火的普罗米修斯，为这个世界带来了Markdown

关于Markdown的概述

Markdown 的目标是实现「易读易写」。

不过最需要强调的便是它的可读性。一份使用 Markdown 格式撰写的文档应该可以直接以纯文本发布，并且看起来不会像是由许多标签或是格式指令所构成。 Markdown 语法受到一些既有 text-to-HTML 格式的影响，包括 Setext、atx、Textile、reStructuredText、Grutatext 和 EtText，然而最大灵感来源其实是纯文本的电子邮件格式。

因此 Markdown 的语法全由标点符号所组成，并经过严谨慎选，是为了让它们看起来就像所要表达的意思。像是在文字两旁加上星号，看起来就像强调。Markdown 的列表看起来，嗯，就是列表。假如你用过电子邮件，区块引言看起来就真的像是引用一段文字。

行内 HTML

Markdown 的语法有个主要的目的：用来作为一种网络内容的写作用语言。

Markdown 不是要来取代 HTML，甚至也没有要和它相似，它的语法种类不多，只和 HTML 的一部分有关系，重点不是要创造一种更容易写作 HTML 文档的语法，Markdown 的重点在于，它能让文档更容易阅读、编写。 HTML 是一种发布的格式，Markdown 是一种编写的格式，因此，Markdown 的格式语法只涵盖纯文本可以涵盖的范围。

不在 Markdown 涵盖范围之内的标签，都可以直接在文档里面用 HTML 撰写。不需要额外标注这是 HTML 或是 Markdown；只要直接加标签就可以了。

只有区块元素──比如 <div>、<table>、<pre>、<p> 等标签，必需在前后加上空白，以利与内容区隔。而且这些（元素）的开始与结尾标签，不可以用 tab 或是空白来缩排。 Markdown 的产生器有智能判断，可以避免在区块标签前后加上没有必要的 <p> 标签。请注意，Markdown 语法在 HTML 区块标签中将不会被进行处理。例如，无法在 HTML 区块内使用 Markdown 形式的强调。

HTML 的区段标签如、、则不受限制，可以在 Markdown 的段落、列表或是标题里任意使用。依照个人习惯，甚至可以不用Markdown 格式，而采用 HTML 标签来格式化。举例说明：如果比较喜欢 HTML 的或标签，可以直接使用这些标签，而不用 Markdown 提供的链接或是图片标示语法。 HTML 区段标签和区块标签不同，在区段标签的范围内， Markdown 的语法是有效的。

特殊字符自动转换

在 HTML 文档中，有两个字符需要特殊处理： < 和 & 。 < 符号用于起始标签，& 符号则用于标记 HTML 实体，如果只是想要使用这些符号，必须要使用实体的形式，像是 < 和 &。

& 符号其实很让写作网络文档的人很困扰，如果要输入「AT&T」，必须要写成「AT&T」，还得转换网址内的 & 符号。不过需要注意的是，code 范围内，不论是行内还是区块， < 和 & 两个符号都一定会被转换成 HTML 实体，这项特性让你可以很容易地用 Markdown 写 HTML code （和 HTML 相对而言， HTML 语法中，要把所有的 < 和 & 都转换为 HTML 实体，才能在 HTML 文档里面写出 HTML code。）

WSG3摘抄笔记

2017-12-29T13:45:50+00:00

良好的设计就是使得清晰的构思可视化让思维清晰地展现。

CSS3过渡、变形和动画

缓动函数指定动画效果在执行时的速度，使其看起来更加真实。

现实物体照着一定节奏移动，并不是一开始就移动很快的。当我们打开抽屉时，首先会让它加速，然后慢下来。当某个东西往下掉时，首先是越掉越快，撞到地上后回弹，最终才又碰触地板。

本页可以在每次你需要时，帮助你找到想要的缓动函数。

与颜色相关的术语

M颜色是我们的眼睛和大脑对不同波长的光的反应。视力正常的读者可以分辨出波长为400纳米（近紫外线〉到700 纳米（近红外线〉的光计算机屏幕使用的是组合了红绿蓝三原色的加色系统，这三种原色可以以任意的比例添加到一起，在RGB 屏幕上生成超过600 万种颜色。最大亮度的三种 RGB 原色组合就生成了屏幕上的白光。在计算机图形中，你会看到用来描述颜色特征的这些常见术语．它们被称为HSB体系（表示色相、饱和度和亮度），通常被用在诸如AdobePhotoshop之类的图形程序中。

文本替代物

确保多媒体材料的可访问性的最佳方式就是提供可替代的版本以适应不同的用户。QuickTime参考影片为替代物的概念提供了一个很好的阐释。当使用 Quick Time创建网络视频时，惯例就是创建一个影片的多个版本，通过改变质量和压缩水平，将每个版本调至不同的链接速度，并使用参考影片来链接这些版本。随后，当用户通过网页提出影片请求肘，QuickTime会为用户发送其网络连接能最佳适应的影片版本。这一方式支持技术资源的分类，但是替代性视图对那些因其他原因而被排斥在多媒体之外的人也是有益的。通过提供多媒体内容的替代性视图，那些无故欣赏原有版本的人也能获取你的信息。文本是可访问性最强的内容。对视力差的用户，可以将文本放大。盲人用户可以通过使用特殊的软件或 Braille阅读器来阅读文本。文本的另一个优于媒体内容的方面在于，其可以通过搜索引擎进行阅读和检索，并被翻译成其他语言。多媒体内容的最佳替代物就是书写的单词。

摘抄来源：WSG3

w3cschool

2017-12-29T13:45:50+00:00

在w3c这所学校里，感觉身体越来越不行，每个晚上要啪啪啪（敲键盘），身体已经被掏空。

1.为什么那么多人推荐w3cschool?

因为w3cschool在国内算是一个做得比较久的基础技术知识学习的网站了,很多猿们在入手一项新的技术时,都是从w3cschool开始的。所以虽然很多人现在已经不看了所以虽然很多人现在已经不看了,但是对于想学编程的新手,他们还是会推荐这个网站,w3cschool的基础知识算是整理得蛮详细的了.

2.一个图文教程,参考手册为什么会有这么大的吸引力?

图文教程最大魅力是什么?是我可以一目十行或者咬文嚼字似的反复阅读,我可以根据自己消化的程序控制阅读速度,甚至在查询的时候,可以快速定位到某个位置, 而视频类的网站,讲了就讲了,回退或者快进始终不尽如人意,而查询某个特定知识点的时候,视频类教程更是捉襟见肘. ok,这是图文对比视频的优势,所以w3cschool的魅力在于,开发过程中遇到某个函数,某个方法的时候,能够可以快速查询定位到这个知识点, 并且拷贝代码实例进行改造,省时省力,而新手翻阅这些知识,能够根据自己本身阅读能力,控制速度和进度,边看边敲, 而且有实例可以复制黏贴,视频网站得不断暂停下来做实践,代码得全部手动编辑一遍,做了一些无用功, 并且视频为了减少录制时间,会跳过一些代码的定义方法,让人学起来变得无所适从,学习起来比较累.

3.和那些视频网站相比,有什么优势?

优势在于文字和视频相比的优势,这个在第2题中已经加粗标记了，除此之外,w3cschool的内容更适合碎片时间阅读,我看到某一章节,我可以随时卡掉,有时间再回来接着看,而视频教程只能一节一节看完,碎片时间想补充,相对没那么方便另外,我得强调一下视频网站的优势和w3cschool的弊端,这样看起来比较不会像软广。视频网站的优势在于更系统化的学习,纯碎片化的学习是很难入门一项技术的,也容易为以后技术的提升带来一定的瓶颈,视频教程解说得更到位, 而且一般视频教程是基于项目开发过程学习的,相当于老师手把手教你实践.举个例子就是,你自己看教科书跟老师给你讲课的区别,有老师讲解,更容易理解和消化,内容和难度循序渐进,就是学得更轻松一点至于哪个好?考试作弊的时候你是翻书方便还是翻视频方便? so?视频教程是系统化学习,w3cschool更适用于碎片学习和查阅,像教科书一样,勤奋的孩子们,学习得先预习书本,然后听老师讲课,最后记得复习

文章来源：知乎“隔壁老王”

我对于html的思考

2017-12-03T00:45:50+00:00

## html是什么？它从哪里来？要往哪里去？

从字面上理解，html是超文本标记语言hyper text mark-up language的首字母缩写，指的是一种通用web页面描述语言，是用来描述我们打开浏览器就能看到的各种web页面的。所以说，写html代码根本和编程都扯不上边，不要一听源码两个字就绝望，以为要你攻读计算机学位似的。你只要知道当你要在网页中展示内容的时候该用哪个标记就可以了。即使一开始记不住，也没关系，查课本，问度娘，分分钟搞定，用过几次，想记不住都难。最近风靡各大博客和写作平台的markdown大家知道吧，html比它复杂不了多少。目前最新版本是html5，比之前的版本有了质的飞跃，被新媒体领域寄予了厚望，特别是在移动端的应用，进行的如火如荼。

2.html文档基本结构

首先需要明确一个概念，html文档是由元素组成的。基础文档元素有4个，任何HTML文档都需要所有这些元素。由於我打算就是要在Github 的个人页面使用重建一个新的Jekyll个人站点，我直接采取安装教程的第一个方案，步骤如下：每个html文档都需要以DOCTYPE元素开头，这样的目的是告诉浏览器：“即将要打开的文档类型是html，请按照html解析规则进行处理。有的同学会发现，即使不写DOCTYPE元素，大多数浏览器仍然能够正确显示文档的内容。但是在这里提醒大家的是，这样做并非明智之举，长期来看，过分依赖浏览器的“善解人意”，会使你在关键时刻抓狂。 html元素是html文档的根元素，里面包含真正的html内容。 html元素由head元素和body元素组成。 head元素中包含文档的元数据等信息，在html5中规定head元素中必须包含一个title元素。 body元素用于包装要展示在浏览器窗口中的文档内容。他们之间的关系可以这样来理解，head元素本身不是文档内容，但是提供了关于后面的包装在body中的文档内容的重要信息。对于用户来说，重要的是body元素里面的内容，但是若想要成功展示body元素中的内容，则离不开head元素。所以说，当你创建一个下面这样的html文件，实际上就完成了一个web页面的创建。但是，当使用浏览器打开这个页面的时候，会发现展示在你面前的是一个空白窗口，那是因为我们并没有往里添加任何实质性的内容。就好比我们印刷了一本书，但这本书正文页面全部都是空白一样。但不管怎样说，它仍然是一本书。要想设计开发出真正实用的网页，需要添加各种元素。

3.html标记基本语法

在《HTML5权威指南》中有这样一句话：“html是一种标记语言。其标记以应用于文档内容（例如文本）的元素为其存在形式”。通俗来讲就是要想让浏览器正确执行你的指令，必须使用标记。这些标记是早就定义好了的，不能自己创造。标记是个什么东东呢？我们上面的代码中就用到了，像 <html> <head> <body> 等这些写在尖括号里面的内容统统都是标记。而且绝大多数的标记是成对出现的。在html文档中一个应用了标记的元素基本语法如下：

<标记名称>元素内容

其中的 <标记名称> 是开始标记，结束标记，元素内容则指的是想要显示在浏览器窗口中的内容。那么是不是所有的元素标记都有具有以上三要素呢？并非如此。当元素的开始标记和结束标记之间没有内容时，就是一个空元素。空元素可以用一个更简洁的方式表达出来，就是将开始标记和结束标记合二为一，只用一个标记表示，比如 <标记名称> 。外还有一些特殊的元素，使用一个标签来表示，称为虚元素。比如用于在页面中插入水平线的 <hr> ，就是这样一种元素。我们称成对出现的标记为双标记，反之则为单标记。那html有多少标记呢？算上html5新增标记，大约有119个。而最常用的则要少的多。根据80/20原则，只要掌握约24（119*20%）个最常用标记，即可以解决80%的问题。

思路来源：王淑娟web工坊

wsg4翻译

2017-12-01T14:07:50+00:00

真正的读书人面对全英书本也不慌，百度在手，翻译就有，分数跑不走

##关于b-roll “b-roll”这个词来源于20世纪的电影剪辑。电影的主干是视觉和口语对话，或与主要演员或纪录片主题的访谈(尽管你永远不会听到这段被称为“a-roll”的片段)。 b-roll是任何解释主要叙述或面试的插画或剖面图。例如，如果你的主题谈论她在一个研究实验室的工作，而她继续说你可能有时会被切断在她的实验室里展示你的主题的采访片段，和实验室里的同事们交谈，以此来让这部电影更有视觉趣味性和知识性。实验室的视频是你的b-roll大的b-roll对于制作高质量的短视频至关重要。

在信息和新闻的视频中，即使是最时髦的相机也很少移动，或者移动得很慢，你几乎不会注意到。在镜头中快速放大是非常罕见的，是业余性的标志。变焦手柄可以快速的在镜头之间进行调整，而不是在拍摄过程中使用。好消息是，如果你的主题是在框架的某个地方，相机在一个坚固的三脚架上是静止的，你至少拍摄了15秒的任何b-roll场景或说明性材料，你会有一个良好的开端。 1.工作从你的一般主题中找到一个好的观点。 2.把相机放在三脚架上。三脚架。检查这个别取景器或屏幕。 3.项目小心地框一宽镜头。 4.在拍摄过程中至少记录15秒，而不需要移动相机缩放。 5.从不同的地方选择一个或几个额外的特写镜头和细节镜头视点，每一个镜头重复步骤4。

视频和静止摄影之间的本质区别是时间。给自己和你的主题时间。你在500秒内捕捉静止的照片，然后迅速转移到下一个镜头。好的视频拍摄耗时更长，拍摄时间越长，编辑的时间就越长。如果你费心设置相机和三脚架来捕捉b - roll镜头，那么至少要记录15到20秒的视频，没有相机移动。如果你打算把相机放在平底锅里或倾斜，在你移动相机之前，总是给你自己大约7秒的静止镜头(慢慢地!)，并且在你停止了相机运动后，至少要再拍7秒。镜头慢慢移动。一个平移镜头，相当于一个完整的取景器框架，应该至少需要7秒的时间从开始的锅到最后的锅。

坤坤坤的异想世界

我们应当怎样学习HTML和CSS

概要 来源：王淑娟web工坊

个人体会

POP与GDP关系分析

宗教场所分布

影响房价的因素分析

VR&AR场所应用分布

Markdown语法说明

关于Markdown的概述

行内 HTML

特殊字符自动转换

WSG3摘抄笔记

CSS3过渡、变形和动画

与颜色相关的术语

文本替代物

w3cschool

1.为什么那么多人推荐w3cschool?

2.一个图文教程,参考手册为什么会有这么大的吸引力?

3.和那些视频网站相比,有什么优势?

我对于html的思考

2.html文档基本结构

3.html标记基本语法

wsg4翻译

概要来源：王淑娟web工坊