MDN学习Web开发
构建网站（一）-Web 入门
准备
编辑器 HTML CSS JS语言基础；文件管理 如何组织和处理代码文件；确定网站展示样式和交互；
web团队通常包括一个 图形设计师 和 用户体验设计师；图形设计师 将网页视觉部分组合在一起；用户体验设计师则解决用户如何浏览与网站交互；
- 确定文档结构：段落 标题等；
- 确定主题颜色：如果涉及到颜色转换，可以使用工具Color Picker，它也可以用于挑选颜色；
- 确定图像、字体：注意很多图像都是有版权的，字体的话可以搜索一些提供字体的网站，一般还会附带上引入相应字体的代码段；
一个网站 由 文本 代码 样式表 媒体内容等文件组成，开发时 需要清晰他们的结构；保证正确再上传服务器；
构建网站：应将所有关联的文件放在一个能反映服务器上文件结构的单独的文件夹里；
关于文件命名
避免大小写，很多web服务器是大小写敏感的；
文件名避免使用空格，如果需要连接单词请使用横线，而不是下划线；谷歌搜索引擎把连字符当做一个词的分隔符，但不会以这种方式处理下划线；
关于网站结构
最常用的一种方式就是使用一个 索引html文件 和 不同的包含 图像、样式表、脚本文件 的文件夹；
- index.html：通常包含主页内容；
- images 文件夹：网页上所使用的图片；
- styles 文件夹：为内容添加样式的样式表；
- scripts 文件夹：为代码添加交互功能的JavaScript代码；
一些文件路径的通用规则
- 要引用一个位于调用的 HTML 文件同级目录的目标文件，只需直接使用文件名，比如 my-image.jpg；
- 要引用一个子目录的文件，在路径前写下目录名并加一个斜杠，比如 subdirectory/my-image.jpg；使用 ./subdirectory/my-image.jpg也可以，./表示当前文件所在目录的路径；
- 要引用一个位于调用的 HTML 文件的父级目录的目标文件，加上两个点。举个例子，如果 index.html 在 test-site 下面的一个子目录而 my-image.png 在 test-site 目录，你可以在 index.html 里使用 …/my-image.png 引用 my-image.png 。
- 你可以随意组合以上方法；
HTML基础
HTML不是一门编程语言，而是一种用于定义内容结构的标记语言；由一系列元素（elements）组成，这些元素可以用来包含不同部分的内容，使之以某种方式呈现或工作；一个元素对应一对标签（tags），开始标签和结束标签，以及内容；
元素可以有属性：
- 属性与元素名称之间（属性与属性之间）存在一个空格符；
- 属性后 接上一个等号，使用引号包裹属性的值；
元素嵌套 需要保证嵌套次序是正确的，必须正确的开始和结束；
空元素：
- 不包含任何内容的元素，如
<img>（alt属性 是描述图像的文本）；
<img scr="images/test.png" alt="test pic">
HTML文档结构
结构解析
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>测试页面</title>
</head>
<body>
<img src="images/test.png" alt="测试图片">
</body>
</html>
<!DOCTYPE html>：文档类型，历史原因，必须保留，但没啥意义，可以理解为是html5；<html></html>：根元素，包含整个页面的内容；<head></head>：不是展示的内容，可以包含面对搜索引擎的搜索关键字（keywords）、页面描述、CSS样式表 和 字符编码声明等；<meta charset="utf-8">：指定当前文档使用UTF-8字符编码（包含绝大多数人类已知语言）；<title></title>：显示在浏览器标签页上，同时最为收藏网页的描述文字；<body></body>：包含访问页面时看到的内容，文字 图像 视频 游戏 可播放音轨等；
HTML元素
标题 heading
<h1>-<h6>一般最多用到3-4级标题；
不要使用标题元素来加大、加粗字体，因为标题对于 无障碍访问 和 搜索引擎优化 等问题非常有意义。要保持页面结构清晰，标题整洁，不要发生标题级别跳跃。
段落 paragraph
<p></p>
列表 list
无序列表（Unordered List）：<ul>
有序列表（Ordered List）：<ol>
列表的每个项目用一个列表项目（List Item）元素
<li>包围；
链接
<a>：a是"anchor"（锚）的缩写；
<a href="http://www.baicu.com/">Test</a>
href 表示超文本引用（hypertext reference）；
CSS基础
层叠样式表（Cascading Style Sheet，CSS）为网页添加样式的代码；
CSS并不是编程语言，而是样式表语言；用它可以选择性地为HTML元素添加样式；
引入一个单独的样式表文件：
<link href="styles/style.css" ref="stylesheet" type="text/css">
规则集：
css 使用选择器 选择元素，{}包裹样式声明，属性和值之间用:分割，结尾使用分号；这个结构称为 规则集；
- 选择器（Selector）：指定需要添加样式的一个或多个元素；
- 声明（Declaration）：一个单独的规则；多个规则间用分号间隔；
- 属性（Properties）：改变样式的途径；
- 属性值（Property value）：属性右边，冒号后的值，从指定属性的多个可用值中选择一个；
多元素选择：
使用逗号‘,’间隔，就可以同时为多个元素添加一组相同的样式；
不同类型的选择器：
| 选择器类型 | 选择的内容 | 示例 |
|---|---|---|
| 元素选择器/标签选择器/类型选择器 | 所有指定的HTML元素 | p |
| ID选择器 | 特定ID的元素（单个HTML页面，ID和元素一一对应） | #my-id |
| 类选择器 | 特定类的元素（单个HTML页面，一个类可以有多个实例） | .my-class |
| 属性选择器 | 拥有特定属性的元素 | img[src] |
| 伪(Pseudo)类选择器 | 特定状态下的特定元素（如鼠标指针悬停） | a:hover |
选择器还有很多：如后代选择器（用空格）、父子选择器（用>）、伪元素（::）等；
跟多选择器的部分可以查阅选择器（MDN Web docs）;虽然是英文的，但对于技术文档来说都很简单，读起来并不困难；
字体和文本
中文字体文件较大，不适合直接用于Web Font；
可以以<link>元素的方式添加到index.html文档head元素之间；
<!-- 可以使用Google Font检索字体地址 -->
<link href="https://fonts.font.im/css?family=Open+Sans" ref="stylesheet" type="text/css">
html作为整个文档的父元素，可以在style.css中添加全局的字体和字号规则：
html {
font-size:10px;/*CSS注释：基础字号10像素；注：CSS注释不接受//形式*/
font-family:'Open Sans', sans-serif;
}
h1 {
font-size:60px;
text-align:center;
}
p, li {
font-size:16px;
line-height:2;/*行高*/
letter-spacing:1px;/*字间距*/
}
一切皆盒子
“围绕这一个盒子”设置尺寸、颜色、位置等——CSS布局基于盒模型：
- padding：即内边距，围绕着内容的空间；
- border：边框，紧接着内边距的线；
- margin：即外边距，围绕着元素外部的空间；（上 右 下 左的顺序设置）
- width：元素宽；
- background-color： 元素内容和内边距底下的颜色；
- color：元素内容的颜色（通常是文本）；
- text-shadow：为元素内的文本设置阴影；
- display：设置元素显示模式；
浏览器会为没有任何css的元素设置一些默认样式，如果不希望这些样式，可以通过全局的css样式设置将之覆盖；
text-shadow属性：为元素的文本提供阴影；
- 第一个值，水平偏移值，阴影右移的像素数（负值左移）；
- 第二个值，垂直偏移值，阴影下移的像素数（负值上移）；
- 第三个值，模糊半径，越大阴影越模糊；
- 第四个值，阴影基色；
图像居中：
img {
display:block;/*img是内联元素 不具备块级元素的一些功能，需要使用这个规则给予其块级行为；*/
margin:0 auto;/*居中实现*/
}
JavaScript基础
JS（缩写）是一门完备的动态编程语言，可为网站添加动态交互特性；在前端开发中应用十分广泛；
基于JS开发的大量库也为web开发提供了良好的支持：
- 浏览器应用程序接口（API）：浏览器内置的API，如动态创建HTML和CSS、处理采集的媒体信息、视频图像等；
- 第三方API：其他内容提供者提供的功能库；
- 第三方框架和库：用来快速构建网站和应用；
<!-- 和CSS类似，将JS引入页面作用域html -->
<script scr="scripts/main.js" defer></script>
注意：这个引入，需要放到
</body>前；因为浏览器会按照代码顺序加载html，如果先加载的js期望修改下方的html，可能由于html尚未加载而失效；
let myHeading = document.querySelector('h1');
myHeading.textContent = 'Hello World!';
上面两个函数来自 文档对象模型（DOM）API，用来控制文档；
JS快速入门
声明变量：
声明变量使用关键字let或var，JS是大小写敏感的，命名需注意；
let myVar = "haha";//声明变量 并赋值
数据类型:
常用的如String、 Number、 Boolean、 Array、 Object(JS中一切皆对象，一切可存储在变量中)；
函数：
function multiple(num1,num2){
return num1 * num2;
}
事件：
事件能为网页添加真实的交互能力，捕捉浏览器操作并作出响应；事件的使用可参考 《点击事件详解》；
document.querySelector('html').onclick = function(){};
示例：图像切换
let myImage = document.querySelector('img');
myImage.onclick = function() {
let mySrc = myImage.getAttribute('src');
if(mySrc === 'images/firefox-icon.png') {
myImage.setAttribute('src', 'images/firefox2.png');
} else {
myImage.setAttribute('src', 'images/firefox-icon.png');
}
}
示例：切换用户
let myButton = document.querySelector('button');
let myHeading = document.querySelector('h1');
function setUserName() {
let myName = prompt('请输入你的名字。');
localStorage.setItem('name', myName);//将数据存储在浏览器中供后续获取
myHeading.textContent = 'Mozilla 酷毙了，' + myName;
}
if(!localStorage.getItem('name')) {
setUserName();
} else {
let storedName = localStorage.getItem('name');
myHeading.textContent = 'Mozilla 酷毙了，' + storedName;
}
myButton.onclick = function() {
setUserName();
}
因为用户名是保存在 localStorage 里的，网页关闭后也不会丢失，所以重新打开浏览器时所设置的名字信息将依然存在；
示例：对输入的null校验
let myName = prompt('请输入你的名字。');
if(!myName || myName === null) {
}
DOCS:
如何发布网站
获取主机服务和域名
GitHub pages：允许你将网站代码放在网上；
- 注册一个账户；创建一个新的资源库存放文件，资源库命名 username.github.io；将网站文件拖到资源库并上传，使用之前命名链接打开文件即可；
提示: 确保你的文件夹有一个 index.html 文件；你的网站可能需要几分钟的时间才能投入使用。 如果它不能立即工作，你可能需要等待几分钟，然后再试一次。
网站的运作方式
- 在浏览器中输入一个网址
- 浏览器在域名系统（DNS）服务器上找到存放网页的服务器实际地址
- 浏览器发出HTTP请求到服务器：请求要访问的页面；该请求消息以及客户端和服务端所有传递数据都是使用TCP/IP协议在网上传输的；
- 客户端与服务端确认连接之后，会返回确认报文，并开始将网页的文件以数据包形式传给浏览器
- 浏览器将数据包聚集成完整的网页展现出来；
DNS解析：真正的网址实际是一个IP地址，代表互联网上一个独特的位置，但是不易记忆，DNS（域名系统）是可以将输入的浏览器地址 与 实际IP地址相匹配的特殊服务器；
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
