复习Web前端开发(一)

最新推荐文章于 2024-05-02 15:42:51 发布
最新推荐文章于 2024-05-02 15:42:51 发布
阅读量3.5k 收藏 17
点赞数 2
分类专栏： Web开发 文章标签： web前端开发 前端 css 标签 class
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_33535433/article/details/78095643
版权

温故而知新

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 characterCharacter reference equivalent
<&lt;
>&gt;
“&quot;
‘&apos;
&&amp;

元数据:<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&amp;subject=The%20subject%20of%20the%20email &amp;body=The%20body%20of%20the%20email">
  Send mail with cc, bcc, subject and body
</a>
玩名堂_
关注
  • 2
    点赞
  • 踩
  • 17
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Web复习笔记
一个平平无奇的博客
12-28 193
复习HTML知识
Web前端知识点复习总结
qq_50843126的博客
08-05 1650
Web前端知识点复习总结
前端Web开发基础知识
最新发布
2301_77599154的博客
05-02 1066
超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言。
Web复习提纲
m0_62821046的博客
06-26 729
Web安全复习自用提纲
学习web（前端）的知识点汇总，初学者稳稳拿捏!!!
m0_59273150的博客
10-01 7527
目录 1、HTML知识点汇总 2、CSS知识点汇总 3、JS知识点汇总 一、HTML5（网页的骨架） 常用开发软件：Hbuilderx 使用过程：创建项目—创建目录—编写代码—运行（crtl+R） >>> <1>标签： 6类： 标题标签：h1-h6 *用之标题标记，六级标题之间不可嵌套，默认换行、变粗（h7和普通标题标记相同的样式） div标签:（块级标签） *有换行默认样式 p标...
关于web的简单复习
心有—林夕的博客
03-07 403
1.web概述 * 静态web 不可以动态更新 数据没有持久化即没有和数据库进行交互，所以每个人看到的页面都是同一个 * 静态Web的组成 轮播图，JavaScript，VBScript 以及一些特效 * 假如web服务器发生错误 即需要停服维修 * 动态web 可以动态更新 数据持久化即和数据库进行交互，所以每个人看到的页面都是不同的 * 动态Web的组成 ASP(微软的，C#)在html中加入VB代码 代码乱不易维护 *
Web前端资源开发总结
10-23
总之，这个压缩包中的资源涵盖了Web前端开发的多个方面，不仅适合初学者入门，也为准备面试的开发者提供了全面的复习材料。通过系统学习和实践，开发者可以提升自己的技能，适应不断发展的Web技术环境。
Web前端开发1-4章复习（4）.mp4
11-25
Web前端开发1-4章复习（4）
Web前端开发1-4章复习（3）.mp4
11-25
Web前端开发1-4章复习（3）
Web前端开发1-4章复习（2）.mp4
11-25
Web前端开发1-4章复习（2）
Web前端开发1-4章复习（1）.mp4
11-25
Web前端开发1-4章复习（1）
Web前端期末复习【超实用】
鸽子的博客
02-11 1万+
教材:《Web前端开发技术——HTML、CSS、JavaScript(第2版)》 聂常红 主编 王刚 潘正军 唐远强 副主编 这本书讲得较浅，自学的话不推荐购买！对你有帮助的话记得点赞、关注哦！ 我们是手机端考试。教这门课的老师很漂亮也很尽职，每节课我们都要用手机签到、做课堂习题(巩固刚讲的内容)，课后还布置适量作业，这些都计入平时成绩。老师的PPT相比其他老师的更容易理解(可能是前端本身的...
Web前端基础知识整理（一）
每天进步一点点
06-24 4万+
1. typeof返回的数据类型 typeof返回的数据类型包括undefined、string、number、boolean、symbol、Object、Function类型。 2. 检查数组的方式 isArray()方法、toString.call()、instanceof Array 3. js中的call、apply、bind方法的区别 js中的call apply bind都是用来改变...
web前端的基础考试题
热门推荐
zhang_ran123的博客
02-24 5万+
Web前端阶段考试 一、选择题（每题2分*40=80分） 1.下列元素中，为行内元素的是（B）。  A.div  B.span  C.p  D.h3 2.下列HTML代码中，能在新窗口中打开新浪首页的是（C）。  A. 新浪  B. 新浪  C. 新浪  D. 新浪 3.需要创建一个多选框，且和文本关联起来（单击文本就像单击核选框一样）。下列 H
Web前端开发复习——HTML基础
我们都有光明的未来
06-01 434
Web前端开发复习——HTML基础 课程为北林的mooc，当做期末复习用 HTML概述 超文本标记语言，不区分大小写。 标签由尖括号包围，通常是成对出现的，但是也比如就是单独出现的。 标签的嵌套： <html> <body></body> </html> (不能交叉嵌套) 标签的属性，在标签名后加，一个标签可能有多个属性，先后顺序不影响效果。 <img scr="" alt=""/> HTML标签（1）——标题、段内换行、段内分组、段落
Web前端知识点复习（四十一个知识点·选择题大集合）
数据库爆破专家的博客
06-22 2755
文章目录（一）web前端开发概述（二）网站与网页（三）Web前端开发技术（四） HTML概述（五）HTML文件结构（六）HTML标签(I)（七）HTML标签(II)（八） HTML标签(III)（九）HTML标签(IV)（十）HTML标签(V)（十一）CSS概述（十二）CSS添加方法（十三）CSS选择器（十四） CSS样式(I) 文字样式（十五）CSS样式(II) 背景，超链接样式（十六）CSS样式(III) 列表，表格样式（十七）布局与定位概述（十八）盒子模型（I）（十九）盒子模型（II）（十九）CSS定
【web复习】WEB开发技术基础知识整理（1）
几何军工作室
11-05 4400
WEB开发技术基础知识整理（1） 第一部分——HTML 简介 全称超文本标记语言，有一系列标签组成，文档包含标签以及文本内容。 允许嵌入图像，对象，表单，结构化信息；允许引入css，js影响网页。 网页由浏览器读取html并选安诚可视化界面。 一般格式 H5一般声明为&lt;！DOCTYPE html&gt; &lt;！DOCTYPE html&gt;&lt;!-- 声明文档为h5 ...
集美大学web前端设计与开发课堂小测&期末考试题库
集美大bug的博客
06-30 4764
集美大学web前端设计与开发课堂小测&期末考试题库 第一章测试 选项中加粗的为答案 1.图片的边框可以通过( )设定宽度。 A.width B.height C.border D.align 2.关于超链接，( )属性用于规定在何处打开链接文档。 A.href . B.target C.title D.onclick 3.( )是在新窗口打开网页文档。 A _blank B_self C_parent D._new 4.建立锚点后,便可以创建锚点链接,需要用( )号以及锚点名称作为( )属性值。 答
前端基础HTML+CSS+JS（期末复习用）
老马非马的博客
06-03 6879
前端技术：1、HTML/H5 认识并熟悉一些常用的标签  1)网页结构  2)图img、文p pre h1-h6 font(h5过时)、视频 &lt;video&gt; 、音频 &lt;audio&gt;   3）表格  4）表单/表单属性（特别常用）     input  ----text、password、radio、checkbox、button、reset、submit、file、hidd...
web前端开发期末复习
12-14
为了进行Web前端开发期末复习，你可以按照以下步骤进行： 1. 复习HTML基础知识，包括标签、属性、表单等内容。可以参考引用中提供的HTML内容总结。 2. 复习CSS基础知识，包括选择器、盒模型、布局等内容。可以参考引用中提供的CSS链接式导入方式。 3. 复习JavaScript基础知识，包括变量、数据类型、运算符、流程控制、函数等内容。可以参考其他教材或者网上的相关资源。 4. 练习实战项目，例如制作一个简单的网页或者实现一个小功能，加深对前端知识的理解和应用。 5. 参考老师提供的课堂作业和PPT，复习老师讲授的重点内容。 6. 参考其他学习资源，例如网上的教程、博客、视频等，扩展自己的前端知识面。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值