学习笔记（四）web入门--HTML+CSS+JS+发布网站

HTML基础知识

• 标题
• 图片
• 段落
• 列表

1. 无序列表（Unordered List）中项目的顺序并不重要，就像购物列表。用一个 <ul> 元素包围。
2. 有序列表（OrderedList）中项目的顺序很重要，就像烹调指南。用一个 <ol> 元素包围。

列表的每个项目用一个列表项目（List Item）元素 <li>包围。

• 链接

CSS基础

“CSS规则集”详解

整个结构称为 规则集（通常简称“规则”），各部分释义如下：
选择器（Selector）
HTML 元素的名称位于规则集开始。它选择了一个或多个需要添加样式的元素（在这个例子中就是 p 元素）。要给不同元素添加样式只需要更改选择器就行了。
声明（Declaration）
一个单独的规则，如 color: red; 用来指定添加样式元素的属性。
属性（Properties）
改变 HTML 元素样式的途径。（本例中 color 就是 <p> 元素的属性。）CSS 中，由编写人员决定修改哪个属性以改变规则。
属性的值（Property value）
在属性的右边，冒号后面即属性的值，它从指定属性的众多外观中选择一个值（我们除了 red 之外还有很多属性值可以用于 color ）。

注意：

• 每个规则集（除了选择器的部分）都应该包含在成对的大括号里（{}）。
• 在每个声明里要用冒号（:）将属性与属性值分隔开。
• 在每个规则集里要用分号（;）将各个声明分隔开。

p {
  color: red;
  width: 500px;
  border: 1px solid black;
}

多元素选择

也可以选择多种类型的元素并为它们添加一组相同的样式。将不同的选择器用逗号分开。例如：

p, li, h1 {
  color: red;
}

不同类型的选择器

选择器有许多不同的类型。上面只介绍了元素选择器，用来选择 HTML 文档中给定的元素。但是选择操作可以更加具体。下面是一些常用的选择器类型：

选择器名称	选择的内容	示例
元素选择器（也称作标签或类型选择器）	所有指定(该)类型的 HTML 元素	p 选择 <p>
ID 选择器	具有特定 ID 的元素（单一 HTML 页面中，每个 ID 只对应一个元素，一个元素只对应一个 ID）	#my-id 选择 <p id=“my-id”> 或 <a id=“my-id”>
类选择器	具有特定类的元素（单一页面中，一个类可以有多个实例）	.my-class 选择 <p class=“my-class”> 和 <a class=“my-class”>
属性选择器	拥有特定属性的元素	img[src] 选择 <img src=“myimage.png”> 而不是 <img>
伪（Pseudo）类选择器	特定状态下的特定元素（比如鼠标指针悬停）	a:hover 仅在鼠标指针悬停在链接上时选择 <a>。

字体和文本

可以在网页上下载字体，就可以应用这个字体了，例如：

 <link href="https://fonts.font.im/css?family=Open+Sans" rel="stylesheet" type="text/css"> 

以上代码为当前网页下载 Open Sans 字体，从而使自定义 CSS 中可以对 HTML 元素应用这个字体。

注：CSS 文档中所有位于 /* 和 */ 之间的内容都是 CSS 注释，/**/ 不可嵌套，/这样的注释是/不行/的/。CSS 不接受 // 注释。

一切皆盒子

并不意外，CSS 布局主要就是基于盒模型的。每个占据页面空间的块都有这样的属性：

• padding：即内边距，围绕着内容（比如段落）的空间。
• border：即边框，紧接着内边距的线。
• margin：即外边距，围绕元素外部的空间。

这里还使用了：

width ：元素的宽度
background-color ：元素内容和内边距底下的颜色
color ：元素内容（通常是文本）的颜色
text-shadow ：为元素内的文本设置阴影
display ：设置元素的显示模式（暂略）

为 margin 或 padding 等属性设置两个值时，第一个值代表元素的上方和下方（在这个例子中设置为 0），而第二个值代表左边和右边（在这里，auto 是一个特殊的值，意思是水平方向上左右对称）。你也可以使用一个，三个或四个值，

为text-shadow 属性设置值时，它可以为元素中的文本提供阴影。四个值含义如下：

第一个值设置水平偏移值 —— 即阴影右移的像素数（负值左移）。
第二个值设置垂直偏移值 —— 即阴影下移的像素数（负值上移）。
第三个值设置阴影的模糊半径 —— 值越大产生的阴影越模糊。
第四个值设置阴影的基色。

JavaScript基础

JavaScript 是一门完备的动态编程语言，可为网站添加交互功能（例如：游戏、动态样式、动画以及在按下按钮或收到表单数据时做出的响应等）。

开发者们基于 JavaScript 核心编写了大量实用工具，可以使 开发工作事半功倍。其中包括：

• 浏览器应用程序接口（API）—— 浏览器内置的 API 提供了丰富的功能，比如：动态创建 HTML 和设置 CSS样式、从用户的摄像头采集处理视频流、生成3D 图像与音频样本等等。 第三方
• API ——让开发者可以在自己的站点中整合其它内容提供者（Twitter、Facebook 等）提供的功能。
• 第三方框架和库 ——用来快速构建网站和应用

变量

let / var

let myVariable;
myVariable = ‘李雷’;

也可以

let myVariable = ‘李雷’;

注释

/*
这里的所有内容
都是注释。
*/

也可以

// 这是一条注释。

运算符

一元运算符，二元运算符

条件语句

if…else

函数

函数 用来封装可复用的功能。如果没有函数，一段特定的操作过程用几次就要重复写几次，而使用函数则只需写下函数名和一些简短的信息。

如果代码中有一个类似变量名后加小括号 () 的东西，很可能就是一个函数。

事件

事件能为网页添加真实的交互能力。它可以捕捉浏览器操作并运行一些代码做为响应。最简单的事件是 点击事件，鼠标的点击操作会触发该事件。

document.querySelector(‘html’).onclick = function() {
alert(‘别戳我，我怕疼。’);
}

小结

可以根据下面页面来制作一个动态网页，熟悉以上JavaScript知识：

https://developer.mozilla.org/zh-CN/docs/Learn/Getting_started_with_the_web/JavaScript_basics

发布网站

发布一个网页并不是三言两语就能简单说明的，这主要是因为我们有很多种方法去完成它。在这篇文章里我们并不准备讲述所有方法，而是从初学者的视角讨论以下三种常见的方式的利弊，然后带你看看我们将要使用的一种方法。

获取主机服务和域名

如果你想要完全控制你发布的网页，那么你将需要花钱购置：

主机服务 — 在主机服务提供商的 Web 服务器上租用文件空间。将你网站的文件上传到这里，然后服务器会提供 Web 用户需求的内容。
域名——一个可以让人们访问的独一无二的地址，比如 http://www.mozilla.org，或 http://www.bbc.co.uk 。你可以从域名注册商租借域名 。
许多专业的网站通过这种方法接入互联网。

此外，你将需要一个 文件传输协议 程序 ( 点击钻研在网络上做某些事情要花费多少：软件查看详细信息 ) 来将网站文件上传到服务器。不同的 FTP 程序涵盖了不同的范围， 但是你通常需要使用主机服务提供商给你的详细信息（比如用户名、密码、主机名）登录到 Web 服务器 。然后程序在两个窗口里分别显示本地文件和服务器文件，这样你就可以在它们之间进行传输：

使用在线工具如 GitHub 或 Google App Engine

有一些工具能使你在线发布网站 :

• GitHub 是一个“社交编程”网站。它允许你上传代码库并储存在 Git 版本控制系统里。 然后你可以协作代码项目，系统是默认开源的，也就是说世界上任何人都可以找到你 GitHub 上的代码。去使用 GitHub，从中学习并且提高自己吧！ 你也可以对别人的代码那样做！ 这是一个非常重要、有用的社区，而且 Git/GitHub 是非常流行的 版本控制系统 — 大部分科技公司在工作中使用它。 GitHub 有一个非常有用的特点叫 GitHub pages，允许你将网站代码放在网上。
• Google App Engine是一个让你可以在Google的基础架构上构建和运行应用的强劲平台——无论你是需要从头开始构建多级web应用还是托管一个静态网站。参阅How do you host your website on Google App Engine?以获取更多信息。

使用像 Thimble 的基于 Web 的集成开发环境

有许多web应用能够仿真一个网站开发环境。你可以在这种应用——通常只有一个标签页——里输入 HTML、CSS 和 JavaScript 代码然后像显示网页一样显示代码的结果。通常这些工具都很简单，对学习很有帮助，而且至少有免费的基本功能，它们在一个独特的网址显示你提交的网页。不过，这些应用的基础功能很有限，而且应用通常不提供空间来存储图像等内容。

使用一下以下几种工具，看看你最喜欢哪一个：

• JSFiddle
• Thimble
• JSBin
• CodePen

万维网是如何工作的

• 客户端
• 服务端
• 网络连接
• TCP/IP
• DNS
• HTTP
• 组成文件

当你在浏览器里输入一个网址时（在我们的例子里就是走向商店的路上时）：

1. 浏览器在域名系统（DNS）服务器上找出存放网页的服务器的实际地址（找出商店的位置）。
2. 浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端（你走到商店并下订单）。这条消息，包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的。
3. 服务器同意客户端的请求后，会返回一个“200 OK”信息，意味着“你可以查看这个网页，给你～”，然后开始将网页的文件以数据包的形式传输到浏览器（商店给你商品，你将商品带回家）。
4. 浏览器将数据包聚集成完整的网页然后将网页呈现给你（商品到了你的门口 —— 新东西，好棒！）。

总结

学会：

• 在github上发布网站
• CSS的盒模型
• CSS的选择器
• 搭建了一个小的网页，包含html、css和JavaScript
• DNS的定义，DNS和IP地址一样，是唯一的，为了方便记忆而被发明，网页也是可以通过IP地址直接访问的

不懂：

• 获取主机服务和域名方式发布网站，是怎么一回事？
• github发布网站没有成功