复习Web前端开发(一)
温故而知新
developer.mozilla.org这网站上的教程真的非常不错，以前书上看的和网上看的一些前端课程中讲的不清楚和模糊的知识点这里都得到了清晰明确的解释
CSS选择器
之前在我印象里比较深的就是
- 标签选择器
- Class选择器
- ID选择器
现在又知道了”属性选择器(如:img[src])”，选择页面上拥有指定属性的元素
还有”伪类选择器“(如:a:hover)，指定元素，但是需要在特定状态，比如悬停
text-shadow
这个属性我以前好像都没用过，它为元素内容的字体提供了阴影，例:text-shadow: 3px 3px 1px black;
- 第一个像素值设置了水平方向的阴影值
- 第二个像素值设置了垂直方向的阴影值
- 第三个像素值设置了阴影模糊的距离（越大的值表示越模糊）
- 第四个值设置了阴影的颜色
覆盖默认样式
h1 {margin: 0;padding: 20px 0; color: #00539F;
}
设置margin: 0 覆盖掉浏览器为h1元素提供的默认样式，默认样式真挺烦人的
JS变量的数据类型
之前用的最多的就是String和Number类型，现在补充一下:
- Boolean，布尔型，示例:var a=true,true/false 是JS里的特殊关键字，不需要引号
- Array，数组，示例:var a=[1,'wulijian'] 数组中的各元素类型可以不同，调用数组元素只需a[0] ,a[1]
- Object，对象，基本上 JavaScript 里的任何东西都是对象，而且都可以被储存在变量里，将这个记在脑子里，示例:var a=document.querySelector('h1')
JS运算符
基本的都知道，但是下面这个我用的不多，有点忘了:
- 相等(===)，java中只有两个等号，这个是三个………
- 不等(!==)
localStorage
这个API允许我们将数据存在浏览器里以供后续调用，我们使用 localStorage 的setItem('arg0',arg1) 函数来创建数据并将数据arg1存储在arg0参数里
网络是如何工作的
虽然学校里也上过”计算机网络”课程，但是感觉它这里说的更加形象生动
客户端
客户端是典型的Web用户入网设备（比如，你连接了Wi-Fi的电脑，或接入移动网络的手机）和设备上可联网的软件（通常使用像 Firefox 和 Chrome的浏览器）
服务器
服务器是存储网页，站点和应用的计算机。当一个客户端设备想要获取一个网页时，一份网页的拷贝将从服务器上下载到客户端机器上来在用户浏览器上显示
其他部分
- 网络连接:允许你在互联网上发送和接受数据。基本上和你家到商店的街道差不多
- TCP/IP：传输控制协议和英特网互连协议是定义数据如何传输的通信协议。这就像你下订单，去商店和买东西时所使用的传输机制。这里就像是一辆汽车或自行车
- DNS：域名系统服务器像是一本网站通讯录。当你在浏览器内输入一个网址时，浏览器获取网页之前将会查看域名系统。浏览器需要找到存放你想要的网页的服务器，才能发送 HTTP 请求到正确的地方。就像你要知道商店的地址才能到达那
- HTTP:超文本传输协议是一个定义客户端和服务器间交流的语言的协议（protocol ）。就像你下订单时所说的话一样
到底发生了什么?
当你在浏览器里输入一个网址时（在我们的例子里就是走向商店的路上时）:
1. 浏览器在域名系统服务器上找出存放网页的服务器的实际地址（找出商店的位置）
2. 浏览器发送 HTTP 请求信息到服务器来请拷贝一份网页到客户端（你走到商店并下订单）。这条消息，包括其他所有在客户端和服务器之间传递的数据都是通过互联网使用 TCP/IP 协议传输的
3. 服务器同意客户端的请求后，会返回一个“200 OK”信息，意味着“你可以查看这个网页，给你～”，然后开始将网页的文件以数据包的形式传输到浏览器（商店给你商品，你将商品带回家）
4. 浏览器将数据包聚集成完整的网页然后将网页呈现给你（商品到了你的门口 —— 新东西，好棒！）
DNS解析
真正的网址看上去并不像你输入的那样美好、容易记忆。它们是一串数字，像 63.245.217.105。
这叫做 IP 地址，它代表了一个互联网上独特的位置。然而，它并不容易记忆，不是吗？那就是域名系统被发明的原因。它们是将你输入浏览器的地址与实际 IP 地址相匹配的特殊的服务器（像 “mozilla.org”）。
网页可以通过 IP地址直接访问。试试通过输入 63.245.217.105 来访问 Mozilla网站。能准确访问的IP是：63.245.215.20。
数据包解析
前面我们用“包”来描述了数据从服务器到客户端传输的格式。这是什么意思？基本上，当数据在Web上传输时，是以成千上万的小 数据块 的形式传输的。大量不同的用户都可以在同时下载同一个网页。如果网页以单个大的 数据块 形式传输，一次就只有一个用户下载，无疑会让Web非常没有效率并且失去很多乐趣
HTML回顾
<!DOCTYPE html>
作用:声明文档类型，很久以前，早期的HTML(大约1991/2年)，文档类型声明类似于链接，规定了HTML页面必须遵从的良好规则，能自动检测错误和其他有用的东西。使用如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
我以前见到的基本上都是这样的，然而现在没有人再这样写，需要保证每一个东西都正常工作已成为历史。你只需要知道<!DOCTYPE html>是最短的有效的文档声明。
HTML中的特殊字符
我们必须使用字符引用 —— 表示字符的特殊编码, 它们可以在那些情况下使用. 每个字符引用以符号&开始, 以分号(;)结束
| Literal character | Character reference equivalent |
|---|---|
| < |
<
|
| > |
>
|
| “ |
"
|
| ‘ |
'
|
| & |
&
|
元数据:<meta>元素
指定你文档字符的编码
<meta charset="utf-8">
这个元素简单的指定了文档的字符编码 —— 在这个文档中被允许使用的字符集。 utf-8 是一个通用的字符集，它包含了任何人类语言中的大部分的字符。 这意味着你的web页面可以显示任意的语言; 所以对于你的每一个页面，使用这个设置是很好的!
添加作者和描述
许多<meta> 元素包含了name 和 content 特性:
- name 特性指定了meta 元素的类型; 说明该元素包含了什么类型的信息。
- content 指定了实际的元数据内容
指定作者在某些情况下是很有用的：如果你需要联系页面的作者，问一些关于页面内容的问题。 一些内容管理系统能够自动获取页面作者的信息，然后用于某种目的。
指定包含关于页面内容的关键字的页面内容的描述是很有用的，因为它可能或让你的页面在搜索引擎的相关的搜索出现得更多 (这些行为术语上被称为 Search Engine Optimization, or SEO.)
实践操作:在搜索引擎中description的使用
description也被使用在搜索引擎显示的结果页中。 下面通过一个例子来说明:
1. 到https://developer.mozilla.org/en-US/
2. 查看页面资源(通过鼠标右键菜单查看页面资源.)
3. 找到description的meta标签. 就和如下展示的这样:
<meta name="description" content="The Mozilla Developer Network (MDN) provides
information about Open Web technologies including HTML, CSS, and APIs for both
Web sites and HTML5 Apps. It also documents Mozilla products, like Firefox OS.">现在，在你喜欢的搜索引擎里搜索”Mozilla Developer Network“ (下图展示的是在雅虎搜索里的情况.) 。你会看到description and 元素如何在搜索结果里显示— 很值得这样做哦！
为文档设定主语言
最后，值得一提的是你可以（而且确实应该）为你的站点设定语言， 这个可以通过添加lang属性到HTML开始标签中来实现 ，如下所示:
<html lang="en-US">这在很多方面都很有用。如果你的HTML文档的语言设置好了，那么你的HTML文档就会被搜索引擎更有效地索引 (例如，允许它在特定于语言的结果中正确显示),对于那些使用屏幕阅读器的视障人士也很有用(比如, 法语和英语中都有“six”这个单词，但是发音却完全不同)。
你还可以将文档的分段设置为不同的语言。例如， 我们可以把日语部分设置为日语， 如下所示：
<p>Japanese example: <span lang="jp">ご飯が熱い。</span>.</p>文件碎片
它可以连接到一个关于html文档的特定部分。(被称为文件碎片),而不仅仅是文件的顶部。要做到这一点你必须首先分配一个id属性的元素要链接。通常链接到一个特定的标题是有意义的，所以这看起来像下面的内容：
<h2 id="Mailing_address">Mailing address</h2>然后链接到那个特定的ID，您将在URL的结尾包含它，前面是一个散列/磅符号，例如：
<p>Want to write us a letter? Use our <a href="contacts.html#Mailing_address">mailing address</a>.</p>你甚至可以用它自己的文件碎片参考链接到同一份文件的另一部分：
<p>The <a href="#Mailing_address">company mailing address</a> can be found at the bottom of this page.</p>绝对和相对链接
你在网络上遇到的两个术语是绝对URL和相对URL：
绝对URL： 指向由其在Web上的绝对位置定义的位置，包括 协议 and 域名. 像下面的例子,如果index.html 页面上传到projects这一个目录 。project位于web服务站点的根目录, web站点的域名为http://www.example.com ,这个页面可以通http://www.example.com/projects/index.html访问 ( 或者仅仅通过http://www.example.com/projects/来访问, 因为大多数web服务通过访问index.html这样的页面来加载，如果没有特定的URL的话)
绝对URL总是指向相同的位置，不管它在哪里使用。
相对URL： 指向与您链接的文件相关的位置，更像我们在前面一节中所看到的位置。例如，如果我们想从示例文件链接http://www.example.com/projects/index.html转到相同目录下的一个PDF文件, URL就是文件名URL — 例如 project-brief.pdf —没有其他的信息要求. 如果PDF文件能够在projects的子目录pdfs中访问到, 相对路径就是pdfs/project-brief.pdf (对应的绝对URL就是 http://www.example.com/projects/pdfs/project-brief.pdf.)
一个相对URL将指向不同的位置，这取决于它所在的文件所在的位置——例如，如果我们把index.html 文件 从 projects 目录移动出来并进入Web站点的根目录（最高级别，而不是任何目录中）， pdfs/project-brief.pdf 的相对URL将会指向http://www.example.com/pdfs/project-brief.pdf, 而不是http://www.example.com/projects/pdfs/project-brief.pdf.
尽可能使用相对链接
从上面的描述中，您可能认为始终使用绝对链接是一个好主意；毕竟，当页面像相对链接那样移动时，它们不会中断。但是，当链接到同一网站的其他位置时，你应该使用相关链接（当链接到另一个网站时，你需要使用绝对链接）
- 首先，扫描代码要容易得多——相对URL通常比绝对URL短得多，这使得阅读代码更容易
- 第二，在可能的情况下使用相对URL更有效。当使用绝对URL时，浏览器首先通过查询域名（使用“DNS”）}查找服务器的真实位置，然后再转到该服务器并查找所请求的文件。另一方面，相对URL，浏览器只在同一服务器上查找被请求的文件。因此，如果你使用相对URL做的绝对URL，你就不断地让你的浏览器做额外的工作，这意味着它的效率会降低
电子邮件链接
当点击一个链接或按钮时，打开一个新的电子邮件发送信息而不是连接到一个资源或页面，这种情况是可能做到的。这样做是使用<a>元素和mailto：URL的方案。
其最基本和最常用的使用形式为一个mailto:link （链接），链接简单说明收件人的电子邮件地址。例如:
<a href="mailto:nowhere@mozilla.org">Send email to nowhere</a>实际上，邮件地址甚至是可选的。如果你忘记了（也就是说，你的href仅仅只是简单的”mailto:”），一个新的发送电子邮件的窗口也会被用户的邮件客户端打开，只是没有收件人的地址信息，这通常在“分享”链接是很有用的，用户可以发送给他们选择的地址邮件
具体细节
除了电子邮件地址，您还可以提供其他信息。事实上，任何标准的邮件头字段可以被添加到邮件的URL你提供。 其中最常用的是”subject”, “cc”, and “body” (这不是一个真正的头字段，但允许您为新邮件指定一个短内容消息。). 每个字段及其值被指定为查询项。
下面是一个包含cc、BCC、主体和主体的示例：
<a href="mailto:nowhere@mozilla.org?cc=name2@rapidtables.com&bcc=name3@rapidtables.com&subject=The%20subject%20of%20the%20email &body=The%20body%20of%20the%20email">Send mail with cc, bcc, subject and body
</a>复习Web前端开发(一)相关推荐
- 视频教程-Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例-JavaScript
Web前端开发仿美团/饿了吗移动App之高德地图接口对接案例 互联网编程行业10年开发和授课经验 曾任太极集团,外资企业等一线互联网python高级开发工程师 现任聚焦计算机技术有限公司项目组担任架构 ...
- 最新麦子学院Web前端项目实战 Web前端开发从入门到精通33G完整版
课程介绍 下载地址:百度网盘 一共超过33G的整套麦子学院Web前段视频教程,共分为4大阶段循序渐进的进行逐步深入的解读,从基础知识入门到后期的项目实战开发 对于想从事Web前端学习和开发工作的朋友来 ...
- 2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记
2021年web前端开发视频教程,自学web前端开发技术,全套web前端学习路线笔记 [导读]:初学web前端的小伙伴经常会遇到的问题,1.没方法 2.没资源 3.没经验,不知道从何开始 ,代码哥(D ...
- Web前端开发精品课HTML CSS JavaScript基础教程CSS部分知识点总结
内容来自莫振杰Web前端开发精品课HTML CSS JavaScript基础教程章节总结 第11章 CSS简介 1.HTML是网页的结构,CSS是网页的外观,JavaScript是网页的行为. 2. ...
- 读书笔记：编写高质量代码--web前端开发修炼之道（二：5章）
读书笔记:编写高质量代码--web前端开发修炼之道 这本书看得断断续续,不连贯,笔记也是有些马虎了,想了解这本书内容的童鞋可以借鉴我的这篇笔记,希望对大家有帮助. 笔记有点长,所以分为一,二两个部分: ...
- web前端开发最佳实践_学习前端Web开发的最佳方法
web前端开发最佳实践 为什么要进行网站开发? (Why web development?) Web development is a field that is not going anywhere ...
- 参加web前端开发培训具体要学什么内容
学习web前端技术不是一天两天就能学会的,想要成为一名合格的web前端工程师,一定要进行系统的培训学习,那么下面小编就为大家详细的介绍一下参加web前端开发培训具体要学什么内容? 参加web前端开发培 ...
- 零基础如何掌握web前端开发技能
很多零基础学员想要进入到互联网行业都会选择web前端做首选技术语言来学习,但是学习web前端不是那么容易的,想要成为一名合格的web前端工程师,所要掌握的技能一定要会,下面小编就为大家详细的介绍一下零 ...
- 学习web前端开发要注意什么
web前端的发展前景有目共睹,越来越多的人都对web前端这门编程语言非常感兴趣,想要学习web前端技术,那么学习web前端开发要注意什么呢?大家在学习之前是否有做好这些功课呢?来看看下面的详细介绍吧. ...
最新文章
- [转]verilog语法学习心得
- NTFS 在linux上挂载，parted分区工具用法
- [LintCode] strStr [KMP brute force]
- 【Linux】02-Linux远程管理常用命令
- java消息对话框用什么做_Java如何创建消息对话框？
- vb microsoft.xmlhttp 获取所有超链接_编写我的第一个VB程序
- IOCP模型TCP服务器
- 进程和线程的区别【转】
- 普通人赚钱方法，千万别想靠创业，就能一次翻身
- Spark UI在虚拟机中可以打开，但是在宿主机上无法访问
- 为何你仍是一名社畜码农?
- python安装-在Python中安装包的三种方法
- 第十一次立会暨第四次集体开发
- 理解First-Class Functions
- Linux电脑弹出网络认证,linux局域网Dr.COM宽带认证客户端上网指南
- 如何编辑修改PDF文件内容？修改方法很简单
- 【官档整理】原生 MSDN 纯净版 WIN PE 创建 下载方法
- layui表单提交时出现一闪而过的验证信息的原因
- 利用python制作马赛克图
- 那些诡异的黑客事件 一