WWW是环球信息网的缩写，（亦作“Web”、“WWW”、“’W3’”，英文全称为“World Wide Web”），中文名字为“万维网”，”环球网”等，常简称为Web。 分为Web客户端和Web服务器程序。 WWW可以让Web客户端（常用浏览器）访问浏览Web服务器上的页面。 是一个由许多互相链接的超文本组成的系统，通过互联网访问。在这个系统中，每个有用的事物，称为一样“资源”；并且由一个全局“统一资源标识符”（URI）标识；这些资源通过超文本传输协议（Hypertext Transfer Protocol）传送给用户，而后者通过点击链接来获得资源。
HTML基础自学作业
主要结构一览表1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20标签 描述
<html> 定义 HTML 文档。
<body> 定义文档的主体。
<h1>to<h6> 定义 HTML 标题
<hr> 定义水平线。
<p> 定义段落
<a href=url></a> 定义链接
<img src="url" alt="message"> 定义图片 alt 是替换文本，在图像无法显示的时候代替显示。
<br> 换行
<!-- > 定义注释。(commod+？)
<table> 定义表格
<caption> 定义表格标题。
<th> 定义表格的表头。
<tr> 定义表格的行。
<td> 定义表格单元。
<thead> 定义表格的页眉。
<tbody> 定义表格的主体。
<tfoot> 定义表格的页脚。
<div> 定义块，块里面可以包含很多元素
<span> 定义行内的小元素
理解的部分
html 标签要有头有尾，只有个别标签比如
、
是单独出现的以后规范的写法是
。
html 的样式建议都用 css 来确定，这样分工明确，不会乱，html 只负责内容
准问答部分：
div / span 的不同
div 是定义块，可以包含许多内容，标题，表哥，图片，链接等等都可以，主要的作用可以用来统一设定样式。块级元素在浏览器显示时，通常会以新行来开始（和结束）。一个比较主要的用途是文档布局。
span可以理解为行内的小块，范围要小很多。显示时通常不会以新行开始。在行内突出某些文字或者图标样式的时候使用。
div 和 span 的本质是没有区别的，区别主要在于是否换行。
class 与 id 的不同
class 是类别，在 CSS 中的定义方法是用.来开头，如 .css{属性：属性值}。使用方法为 class=”“，可以反复使用。
id是一个标识，在 CSS 中的定义方法是用#来开头，如 #css{属性：属性值}。使用方法为id=”“在一个页面中仅能被使用一次。
p 与 br 的不同
p 是段落的标记，包裹的内容为段落正文，如果没有 br 的话，是不会自动换行的，br 的作用就是换行。
如何使用 table 排版
使用 table 排版貌似不推荐了，bootstrap 的 Grid （格栅系统）貌似更好用。
新增内容
无序列表
- tag to create unordered lists.
## CSS 学习总结
我理解的CSS
CSS 可以理解为装潢，HTML可以理解为毛胚房，如果只有 HTML，不加 CSS 的话，虽然也能住，但是不美观。CSS 的左右就是根据不同的 HTML 区块进行装修，比如地面铺地板，墙面贴墙纸，卫生间贴瓷砖等等。
两者的关系也和装修毛胚房类似，开发商负责盖好毛胚房，装修队负责装潢。HTML（负责内容） 和 CSS（负责样式） 的关系也差不多是如此，两者是互相分离的。
CSS的基础知识
1. css 的语法结构
首先有一个名称（selector，用于查找对应的 css 样式的，比如这个h1，以后只要是h1格式的，都会套用这个设定好的样式），然后才是里面的装饰，装饰的表达方法为装饰类型和具体值property:value，不同类型的装饰用;隔开。![]()
2. seletor 可以用3种方式来命名：
网页的基本元素来命名：比如h1,h2,p,等等，这样对应的样式就会发生变化
用 id 来命名，用#开头，id 首字母不能是数字。如段落1样式。注意 id 只可以引用一次1
2#para1{…}
<p id="para1">Hello World!</p>
用 class 来命名，用.开头。如居中样式。类可以应用多次1
2.center{...}
<h1 class="center">Red and center-aligned heading</h1>
还可以结合起来使用，比如定义center 这个样式只能在中使用。
1
2p.center{...}
<p class="center large">This paragraph refers to two classes.</p>
如果用统一的样式，可以合起来写以简化代码，比如 h1,h2和 p 都是居中，红色字体。1
2
3
4h1, h2, p {
text-align: center;
color: red;
}
3. CSS注释1
2
3
4
5
6
7
8
9
10
11注释方法以/* comment */，注释还可以分成多行：快捷键是commod+？
p {
color: red;
/* This is a single-line comment */
text-align: center;
}
/* This is
a multi-line
comment */
4. Box Model
The CSS Box Model有四个部分组成，示意图如下，需要注意的是两个透明的缓冲区，padding 可以理解为内容和边界之间的缓冲区，margin 是表格边界和页面中其他内容的缓冲区。![]()
代码示例：1
2
3
4
5
6
7div {
background-color: orange; #背景颜色为橙色
width: 500px; #表格宽度为500像素
border: 25px solid green;# 边界为绿色，宽度为25像素
padding: 25px; #内容和边界之间的距离为25像素
margin: 25px; # 表格边界与页面其他内容距离为25像素
}
标准问答
1.margin 与 padding 的差异
首先，两者都是透明的，这个要注意，第二，margin 是表格边界和页面中其他内容的距离（外边距），padding 可以理解为内容和边界之间的内边距。
2.box model 见前文
3.为何要使用 em 而非 px 来定义字的大小
em 是相对单位长度，px 是绝对单位长度。用 em 的好处就是对 ie 浏览器也能很好的支持。
4. h1 {margin : 10px 0px 15px 5px;} 的边距
margin-top:10px
margin-right:0px
margin-left:5px
margin-bottom:15px
注意边距的界定是顺时针，即上右下左
## 为什么要将 CSS 放在最顶层，将 JavaScript 放在最底层？
因为HTML 的运作原理是：
先下载 HTML 本身。
然后浏览器根据 CSS 绘制网页
JavaScript 的特效不少都是页面绘制完成后执行
按照这个顺序，JavaScript 放在最底层有两个好处：
不影响网页的执行效果
JavaScript 比较肥大，放在顶层会影响网页加载速度，放在底层就不会影响网页的显示。
>如何尽可能减少HTTP Requests?
为了减少请求次数，就应该吧需要 HTTP Request 请求的文件尽量减少，比如把多个 CSS和JavaScript 合并成一支 CSS / JS。这样只请求一次， Rails 已经帮我们自动处理了。
其实可以用打电话来类比，比如你现在要去参加一个会议，你需要电话联系会务组询问会议地点、会议时间、是否接送站、是否需要带什么材料等相关的情况。我们打电话到会务组，询问相关情况并得到回复，算一个Request。
有两种方式：
每次打电话只问一件事情，比如第一次打电话只问地点。第二次打电话只问时间。第三次打电话只问是否接送站。
只打一次电话，但是把所有情况都问清楚。
你觉得哪种方式好呢？显然是第二种对吧。嗯，HTTP Request 也是一样的。合并 CSS/JS的目的就是只打一次电话，问清楚所有的事情。
CDN 是什么
CDN 用我自己的话来理解就是，在不同的服务器上创建多个网站素材的备份。然后根据访问网站主机的远近，自动选择临近的服务器提供素材，这样 Request 时间会较短。能提升效能。
可能不恰当的类比：
>假如我们要买花王的尿不湿，我们把原始主机比作总代理（假设是日本亚马逊），CDN 比作是分销商（国内的天猫、京东等）。
那么不用 CDN的情况：直接从日本亚马逊上够买，运输挺长时间才能到中国。
使用 CDN 的情况：由于京东和天猫上也有一样的产品，我就可以直接从这里买，一两天就到。 那么显然用 CDN 可以大幅度提高效率。
如何提升自己的网站加载速度？
>把 CSS 保留在最顶层，JavaScript 移到最底层；
使用 CDN 来存储图片素材；
利用同一个主机多个域名来突破 HTTP1.1一个域名只有2条连线的限制。
## 快速学习 HTML 和 CSS
无论什么东西，快速了解都是有可能的，之后就要通过反复使用、反复操作获得并磨炼熟练程度。很多人被误导，总是以为“一定要学到一定程度才算学会，才可以拿出手……” 这是肤浅的。要尽快掌握“最少必要知识”（MAKE），然后就开始行动、开始践行…… 真正的熟练，只能在践行之中通过试错、改进、总结、纠正等必要的环节才能获得。
1. HTML/CSS 都是了解一句话之后就可以开始写的
HTML 是什么东西呢？一句话就够了 —— 真用不着非得读完一本书才能开始行动。
>HTML 是用来在纯文本内添加各种标记（用尖括号括起来的标记，叫做“TAG”），以便让浏览器能以正确的格式显示那些内容的“语言”。
所以，假设你在 HTML 里写的是这样的：This is the first paragraph.
This is the second paragraph.
This is a word marked as strong.
This is a word marked as emphasized.
然后浏览器会将其显示成这样子：
This is the first paragraph.
This is the second paragraph.
This is a word marked as strong.
This is a word marked as emphasized.
格式（Format），通常很简陋，只包括字体大小、字体加重、倾斜、删除线、下划线等等；另外一个词叫样式（Style），除了最基本的格式之外，还可以包括更多的细节，行间距、字间距、背景色等等……
那么，CSS 是什么呢？
CSS 就是用来批量指定标签内容样式的方法。
你只要在 HTML 文件里加上这么一句：
那么整个文档里的所有被标记为“加重”的文字（）就都显示为蓝色（blue）了…… 当然你还可以为所有加重的文字加上更多的样式：
其实很直观的，不是吗？
2. 快速体验
打开 Safari，输入以下网址（将来还是推荐使用 Firefox 或者 Chrome 的，只不过，现在先用 Safari 玩玩……）：
http://www.catb.org/esr/faqs/smart-questions.html
这是篇工程师必须熟读、牢记的文章 —— 事实上，你读过之后就知道了，无论是谁，不管哪一个行业，其实都应该深入了解这篇文章的。
网页打开之后，打开之后，你会看到一个相对格式、样式都极端朴素的文档。
基本上，任意一个浏览器，无论是 Safari, 还是 Chrome, Firefox, Opera, 它们的一些基础快捷键都是一样的，比如，都可以用 ⌥-⌘-I 呼出一个“Developer Tools Pane”…… 即便在 Atom 里，也一样可以用这个快捷键 —— 因为 Atom 本身也是个基于 Chromium 的浏览器。
如果你没有安装 Safari 以外的浏览器，建议你把几个常用的浏览器全都安装好，反正以后都用得着……
brew cask install chrome
brew cask install firefox
brew cask install opera
以下我们先用 Safari 体验一下 HTML 和 CSS 的基本功能…… 请注意：在这个过程中不要刷新浏览器，否则你刚刚做过的改动就都不见了…… 当然，若是你想重新来过，就刷新一下浏览器好了。
在 Safari 上按下快捷键 ⌥-⌘-I 之后，底部会出现一个工具台，工具台左侧，是当前文档的 HTML 源码，右侧是样式编辑器…… 上面还有一些标签，等你以后再熟悉。
工具台最低部的左侧，> 标记右边，其实是个命令行输入框，在那里可以输入一些 javascript 命令，比如，你可以输入以下代码试试：
alert(‘hello’);
在工具台的左侧，你可以看到 HTML 源码，随时可以点击鼠标右键，再点击 Edit as Html 之后做任意的修改 —— 别怕，你玩不坏它的。随便搞，胡搞瞎搞才好玩……
在工具台最低部的右侧，有一个 + —— 那是个按钮…… 边上还有个输入框，在里面输入 body，于是，样式编辑器里面就聚焦于 body 这个元素了；这时候，再点一下那个 + 按钮……
你会看到多了一个 body 的字样，在这一行的下方输入：
font-family: ‘Courier New’;
font-size: large;
max-width: 1024px;
margin: auto 100px;
background-color: #eee;
当然，冒号后面的值，你都可以（也应该）随便写写多试试…… 比如，max-width: 1024px; 你可以试试 max-width: 768px; …… 在输入的过程中，你会发现 Safari 提供了列表选择功能和自动补全功能 —— 非常方便 —— 甚至，行末的分号是不用输入的……
好玩吧？你刚刚是重新定义了 body 这个元素里的内容的显示样式。
文章开头，有一个 Revision History 部分，里面是作者多次修改更新过的记录。在那个暗色的边框上点鼠标右键，选择 Inspect Element ……
你可以看到，这里面的所有内容都被包在一个
的区块里。在右下角的输入框里输入 revhistory，你会看到这个 class 并没有被定义样式。在输入框里已经输入了 revhistory 的情况下，再点一下那个 + 按钮…… 输入：
display: none;
…… 那一整块内容“不见了”！是呀，你刚刚要求的麽！
当我们用浏览器打开一个网页的时候，看到的那些内容是浏览器将从服务器那里获得的 HTML、CSS、JAVASCRIPT 等文件的内容，组合起来解析之后，“渲染”（Render）出来的…… 由于这个原理，Firefox 有一个插件，Greasemonkey，可以编制一些 JAVASCRIPT 脚本，用来改变任意网站的显示样式…… 在以下网站上，可以找到很多别人写好的用户脚本：
https://openuserjs.org/
https://greasyfork.org/en/scripts
http://userscripts-mirror.org/
注意：去看看体验一下就好，千万别玩过头了…… 给自己定个闹钟，15 分钟之后要回来干正事儿！ 很多人都是这样，一不小心就被各种东西分散了注意力。
3. 系统了解 HTML 和 CSS
行了！尝鲜之后，就需要快速系统了解 HTML 和 CSS 了。先去这个地方：
HTML http://www.w3schools.com/html/default.asp
CSS http://www.w3schools.com/css/default.asp
天了个噜，这个全球访问量最大的网页开发教程网站竟然是用微软的 asp 写的…… 可这背后有个特别重要的道理：
用的技术是否时髦或者是否过时，在另外一个因素面前完全没有意义：做的事情有没有价值。w3schools 做的事情明显价值很大…… 所以说，在很多的时候，“做对的事情”（do right things），远“比把事情做对”（do things right）重要得多…… 再进一步，技术是用来实现思想的…… 所以，思想更重要。只钻研技术，没有思想，其实很可怜的…… 当然，有丰富的思想却没有技术，那更可怜。
把 w3schools 上的这两个教程反复看个两三遍，对不止一遍 —— 当然，光看完不够，要每个要素都要逐一实验过。别觉得自己记不住，记不住的原因只有一个，就是用的次数不够多而已。
4. 读不止一个教程
一般来说，Documentation，只要看 Official Documentation 一个就够了，把一个 OD 读透就行。很多的时候，所谓的读透，只不过是把结构弄清楚，以便将来随便查询…… 真的不难。
可若是读教程，那有个好建议就是：
读一个以上的教程。同一个话题的书，可以读很多本 —— 这绝对是最好的学习习惯之一。
除了 w3schools 之外，有关 HTML/CSS 的教程，其实很多，你不妨搜索一下：
Google Web Fundamentals
MDN Learning web Developement
也一定有所收获。
5. 先学范儿，某种意义上也是对的
第一遍读完 w3schools 上的 HTML Tutorial 之后，要看的是这个：
HTML(5) Style Guide and Coding Conventions
凡事儿都需要做得有模有样…… 我一直认为所谓真正的专家，其实是那些真正用专家的标准要求自己的人，而不一定是那些被别人称为专家的人。
不管学什么，先认真观察那些专家的“范儿”，是有益处的，虽然有很多细节目前做不到，但目标就是将来要做到，所以要提前观察，提前模仿，提前准备…… 以后学各种语言的时候，都要这样，先去看看 Style Guide 和 Coding Conventions……
6. 学会就能用一辈子：总结、整理、提炼重点
HTML5 的学习难度，确实比之前的 HTML3 高了一些，因为标签的数量明显增加了很多，并且还有各种浏览器不完全兼容的情况需要注意……
然而，最终，有些人跨越不过去的原因很简单：
基本的总结概括能力差而导致的任务量过大……
上学的时候，学习能力强的同学，经常做各种总结整理，并分享出来…… 殊不知，那些喜欢等别人整理好了再用的人，常常因为缺失了自己动脑总结整理的过程而使得这方面能力逐步下降直至退化为零…… 观察一下生活吧，学习能力差的人，其实说穿了都有统一的局限：
总结整理能力差
提炼重点能力差
其中的第二条，基本上与第一条是互为因果的关系。
所以，总结、整理、提炼重点，这类事情一定要自己动手做。别嫌麻烦，这种事情不是麻烦，是修炼。怕麻烦的人，就是这样在每一个重要的环节上都吃亏却觉得自己占了便宜，乃至于有一天发现自己吃了亏，却完全不知道哪儿吃了亏…… 而上一章中提到的 “Atom 的 Snippets 最好自己动手写” 其实也是一样的道理。
在 w3schools 上把 HTML Tutorial 反复看两三遍的过程中，要不断地想：
我有什么办法把这些 Tag 分类，以便在脑子里形成一个清晰的框架呢？重点究竟是什么呢？
分类的一个基本技巧，虽然简单，很多人却并不知道：
总是有一些元素最终无法精确分类…… 于是只好放到“其它”这么个无奈而必须的类别中去。
说实话，“其它”这个无奈的类别，也是很多人总结整理的功夫总也练不成的主要原因，因为他们不知道那个“其它”是最终对谁来说都是因无奈而必要的类别，所以总是觉得自己做得不够好，或者干脆不会做…… 于是因为只好等别人的所以自己的能力不断退化；又由于他们确实不知道这个事实，所以，当他们在别人的分类中看到“其它”类别的时候，竟然反应不过来“那是最终对谁来说都是因无奈而必要的类别”…… 听起来有点绕，但仔细琢磨一下吧，看看是不是这么回事儿？
如果自己没把握，不妨还是“故技重演”，去网上搜索一下 HTML5 CheatSheet，看看别人是怎么总结、怎么整理、如何分类、如何提炼重点的…… 然后自己再试试。
甚至为了锻炼自己的总结整理、提炼重点的能力，可以尝试很多种分类方法，比如，随便举个分类方法的例子：
隐含的：像 、、 标签所标记的内容，是不会在浏览器上直接显示的……
显示的：大多数 Tag 都是标记内容格式的，所以当然是属于“显示的”……
“显示的标签中”，也可以继续分类：
事关布局的（比如、 、
The
- tag defines an unordered (bulleted) list.
Use the
- tag together with the
