精华内容
参与话题
问答
  • 前端教程

    2018-07-14 10:31:00
    前端学习路线图—流程篇: 二、前端学习路线图—视频篇:前端视频篇第一阶段-准备篇本阶段前端课程共计5个知识点,5个免费视频涵盖1、周期与目标:学习周期:15天学完后目标:1、熟悉媒体查询和响应式设计,使得...

    前端学习路线图—流程篇:

     

    二、前端学习路线图—视频篇:

    前端视频篇第一阶段-准备篇

    本阶段前端课程共计5个知识点,5个免费视频涵盖

    1、周期与目标:

    学习周期:15天

    学完后目标:

    1、熟悉媒体查询和响应式设计,使得设计有适配不同的移动;

    2、熟悉基础CSS的格式和CSS盒模式;

    3、理解网页间是如何链接的、如何设计多列布局,可以处理表单字段和媒体元素;

    4、理解如何创建和浏览一个基本的网页。

    2、知识点:

    1)开发工具的安装配置的介绍

    sublime、webstorm、Visual Studio Code

    2)HTML

    理解如何浏览和创建网页、基本的语法规范、常用标签及属性、网页之间的链接与跳转、标签节点层级节点

    3)CSS

    基本语法和三种书写位置、选择器和格式化排版、盒模型的高级用法、常用布局模型

    4)JavaScript入门

    基础语法和变量、数据类型和数据类型转换、条件判断、循环语句、函数、数组等内置对象

    5)京东首页实战

    CSS代码抽象与复用、 浮动的盒子布局、padding 和 margin 使用、层级的使用、定位特性的各种使用场景

    教程下载:

     前端与移动开发基础 http://pan.baidu.com/s/1jIcd84e(此教程对应知识点1 2 3 5知识点)

     2、CSS梅兰商城项目实战视频教程 http://pan.baidu.com/s/1pLlRwDl 

    Javascript教程:

    JavaScript基础视频教程:http://pan.baidu.com/s/1skMeNvB

    JavaScript 基础加强:http://pan.baidu.com/s/1skDXr6t

    (此教程对应4知识点)

    前端视频篇第二阶段-基础篇

    本阶段前端课程共计4个知识点,共计1个免费配套视频涵盖

    1、周期与目标:

    学习周期:20

    学完后目标:

    1、能够基于jQuery实现炫酷效果和复杂的功能模块;

    2、能创造或添加自定义效果到网页上;

    3、能熟练添加标准的动画效果到网页上;

    4、熟练操作DOM模型。

    2、知识点:

    1)JavaScript基础

    JS语言的基本构成、变量、数据类型、表达式、选择结构、循环结构、短路语句、函数基础

    2)DOM + BOM

    DOM基本结构、节点对象的操作、事件特性及使用、常见的内置DOM对象、常见的BOM功能

    3)网页特效与进阶

    在网页特效中常用的编程接口、动画编程、事件对象和冒泡、缓动框架封装和旋转木马案例、正则表达式及应用

    4)Jquery

    选择器、基本操作API、动画API、事件API、插件机制、原理分析、项目实战

     

    推荐教程

    JavaScript 基础加强 :http://pan.baidu.com/s/1skDXr6t (对应知识点1)

    前端视频篇第三阶段——核心篇

    本阶段前端课程共计5个知识点,合计3个免费视频涵盖

    1、周期与目标:

    学习周期:20天

    学完后目标:

    1、能够基于jQueryMobile/Zepto等框架进行移动端js功能开发;
    2、能够熟练使用html5/css3/ canvas进行移动端页面和功能效果开发,并且能够基于原生和框架进行响应式效果开发;
    3、能够基于jQuery、bootstrap等框架实现炫酷效果和复杂的功能模块;
    4、能够独立制作电商类,企业类网站,以及常见js动态效果。

    2、知识点:

    1)HTML5 + CSS3

    语义化结构、多媒体 、本地存储、其他常见API、CSS3 选择器、CSS3 边框、背景、阴影、CSS3 过渡和动画、CSS3 伸缩布局、Canvas

    2)服务端编程

    端的概念、Web 服务器的概念、服务器搭建、XML与JSON                     

    3)PHP

    PHP基础语法 、PHP服务端编程基础

    4)AJAX

    基本编程接口、异步数据交互、模板引擎的使用、跨域的实现方案、增量加载

    5)移动Web开发

    响应式布局、Bootstrap框架深度使用、Zepto.js库、预编译CSS

    推荐视频:

    最新H5+CSS3教程视频 :http://pan.baidu.com/s/1eSJtHiM(此免费视频对应上述1知识点)

    《年最新AJAX教程 http://pan.baidu.com/s/1qXWqpDa(此免费视频对应上述 4知识点)

    《传智前端就业班视频分享:移动web开发课程》http://pan.baidu.com/s/1cuztnw (此免费视频对应上述 5知识点)

    前端视频篇第四阶段——进阶篇

    本阶段前端课程共计4个知识点,合计2个免费视频涵盖

    1、周期与目标:

    学习周期:15天

    学完后目标:

    1、熟练使用闭包、高级函数、立即执行函数(匿名函数)等;
    2、熟练使用元编程,解决Callback等;

    3、熟悉JavaScript基本语法。     

    2、知识点:

    1)面向对象在JS中的体现与实践

    面向对象理论、对象的基本概念、对象的属性和方法、通过字面量创建对象

    2)开发过程中常用的模式与思想

    开闭原则、MVC思想、高内聚低耦合、工厂模式

    3)JavaScript高级特性

    通过构造函数创建对象、原型对象、继承的多种实现方式、原型链、函数的本质以及 Function 构造函数、作用域链、闭包、沙箱模式

    4)封装一个自己框架

    选择器框架、CSS操作封装、属性操作封装、其他DOM操作的封装、事件框架的封装

    视频教程推荐:

    JavaScript-高级面向对象视频教程:http://pan.baidu.com/s/1o8POXKm

    JavaScript高级框架设计:http://pan.baidu.com/s/1nvNjnnF

    展开全文
  • python前端教程

    2019-12-24 13:39:42
    本节为python前端教程,主要讲解python前端开发的相关知识。
  • H5前端教程

    2019-01-01 12:44:19
    H5前端技术深度解析,整套开发视频源码以及开发文档。
  • web前端教程

    2019-01-02 13:51:27
    div,css,html从基础到高级完全自学教程,海量资源教程,全面,精准,资源作为学习用途,侵删,我也是网上找的,有人觉得侵权了我就删了,
  • Web前端教程汇总

    2018-07-09 16:02:44
    Web前端教程汇总视频教程 Web前端教程汇总视频教程
  • 前端教程资源.zip

    2020-11-14 17:12:39
    前端教程资源 nginx docker toolbox gitlab cicd 教程 搭建环境必备的东西 git for widnows
  • 前端教程链接

    2019-05-22 00:20:09
    技术文档ES6技术文档

    1,技术文档:ES6技术文档
    2.前端各种特效:前端各种特效
    3.项目视频教程: 项目视频教程
    4,部署项目到阿里云:部署项目到阿里云
    5,云起社区,资源下载:云起社区
    6,json浏览器显示格式化:json浏览器显示格式化

    7前端面试题,带答案,超详细github

    展开全文
  • 【FCC前端教程】28关学会HTML与HTML5基础

    万次阅读 多人点赞 2020-05-09 17:21:19
    大家一起闯关进攻前端全方位知识点。没有闯过这些关卡的童鞋,无论前端能力如何,这个可以锻炼我们自己,也可以深入知道我们自己的前端水平和差距。想学习前端的童鞋可以从零开始学习,一起排除困难共同打开前端大门...

    「经历」

    我自学前端已经有6年多了,自问当时学前端是没有系统化学习的。一开始边看文档,连滚带爬学HTML和CSS排版,然后深入研究JavaScript,因为当时最火的就是JQuery,所以用了很长一段时间的JQ。

    到了后面遇到有一个项目需要我做APP开发,但是不可能去学IOS开发和安卓开发,因为项目时间也不可能给我们这么充裕的学习时间。所以当时的我深入分析了几个混合APP开发的框架。分析对象包括当时基于AngularJs的Ionic框架和React Native。综合考虑最后选择了Ionic,然后自学了Angular2。(过程也是踩过成千上万的坑学会的)

    APP开发的这个过程让我深入感觉到那时候前端的革命性变化。庞大的前端知识扑面而来,也没有想到前端已经发展到这样一个地步。这段时间让我深刻领会到前端的博大精深,并且被前端这个技术领域深深的吸引住了。

    到了后面Vue突然开始火了,各大技术公司都开始使用Vue+Cli脚手架搭建前端应用。越来越多的企业要求使用Vue开发前端应用和WebAPP。热爱前端的我从来不畏惧需要学更多的知识,既然Vue来势汹汹,我也开始深入研究和学习Vue开发前端。经过一番折腾Vue也上手了。

    至今我依然在不停的学习前端无边无际的知识和技术。

    最近我发现,现在学习技术容易了很多。有各种技术文章、手摸手教学、线上培训课程和视频,甚至还有全免费的线上学习课程和练习。相比以前从看文档,连滚带爬的在项目中试错式的学习真的是容易多了。

    「前言」

    我们都深刻知道,如果想在前端走的更远更久,基础知识必须是要牢固的。最近发现一个免费学习编程的网站 freeCodeCamp(🔥) - 官方版(英文)中文社区版 。我好学的性格牵动着我的灵魂,忍不住就去研究了一下。我发现里面的课程确实很全面,而且还有实时和实战编程练习。就算是对于零基础的童鞋,也是可以开始学习编程的。

    在一个夜深人静的夜晚,我看着电脑思考人生的时候,我灵机一动,要不我开始写一个系列的文章和大家一起闯关进攻前端全方位知识点。没有闯过这些关卡的童鞋,无论前端能力如何,这个可以锻炼我们自己,也可以深入知道我们自己的前端水平和差距。想学习前端的童鞋可以从零开始学习,一起排除困难共同打开前端大门!

    使用这个免费网站学习编程,每一个知识学习完成后会给大家发放一个证书,然后每一个关键学习点之后,还有项目实战。自从2014年,有超过4万个freeCodeCamp毕业的童鞋获得了大企业工作机会。(里面有提到谷歌,苹果,微软,亚马逊,Spotify等公司)

    还有看到一些学员的评价:

    • “我在实习的时候,导师就叮嘱我在 freeCodeCamp 上做题闯关。技术的精进不仅给了我强大的自信,也让我得以进入大厂 ThoughtWorks。” — 姜玉珍
    • “对于还没有形成编程思维的新人,即使是 leetcode 上面 easy 级别的算法题目都感到非常有难度,而 freeCodeCamp 的算法题恰好是一个良好的过渡。” — 魏朝欣

    无论这些证书是否对我们在中国的企业有一定的价值。但是能获得多一个证书,没有什么不好的呀。废话不多说了,我们这里就开始勇闯第一课《基础HTML与HTML5入门》!

    「规则」如何一起闯关

    在开始这个闯关的系列之前,讲一下我们具体怎么一起闯关。

    首先,如果我是单纯在这里给大家发布答案,我觉得这些文章就没有太大意义了。所以我希望在闯关的过程中一起学习到更多的知识,弄懂更深层的技术和用我的相关经验讲说这些知识在工作中的使用场景和小技巧。


    个人觉得英文版本的操作和体验都更好,加上英文版本的课题会更新。所以我会在英文版中与大家一起闯关。但是喜欢用中文社区版本也是可以的哦。酸甜苦辣各有所爱,但是效果和课题基本都是一样的哈。

    每一篇文章的大概内容:

    1. 首先我们每一篇文章会尽量包含一个大知识点中的N个关卡。每一个知识点的关卡数量不一,所以有时候可能会拆分成几篇文章来讲说。
    2. 每一个关卡当中的知识点在freeCodeCamp中有一定的知识材料。但是在一起闯关的文章当中也会做一些详细的知识补充和一些有趣的理解方式。
    3. 每一个较难的关卡,都会在文章当中做详细的思路,多种实现方式等等的讲说,让我们在每一个关卡中能带走更多深层的知识点。

    freeCodeCamp使用教程


    课程内容

    FCC一共有6大课程,一共大约1800个小时的内容和练习。如果是新人,推荐从第一个开始一个一个闯关学习。如果是老司机,是来这里学习你需要的知识,那可以随意选择你需要的课程开始学习。

    • 响应式Web设计(300个小时)
    • 算法和数据结构(300个小时)
    • 前端库和框架(300个小时)
    • 数据可视化(300个小时)
    • API和微服务(300个小时)
    • 信息安全和质量保证(300个小时)

    最后还有一个是数千个小时的面试题可以提供给我们使劲的刷哦!

    进入关卡

    首先我们展开第一课看一下:

    1. 第1点这里是基础知识的文章,可以点击查看。看完基础知识之后可以点击下方的回到第一小节开始闯关!
    2. 第2点这里下面所有的都是练习题,一个一个顺着闯关即可。

    关卡教程

    ⚠️注意:
    大家闯关之前,推荐大家都先使用GitHub登陆,到时候颁发的证书和闯关进度才能得到保存和跟踪哦!!!

    我们先从左边 👈 部分的内容开始说明:

    1. 简单讲说了这个关卡涉及的知识点
    2. 描述关卡的挑战内容
    3. 本关卡的所有目标,点击测试代码的时候,完成的会出现 ✅,没有全部 ✅那就是还有部分我们没有实现哦。所有 ✅才能通关。

    接下来就是说明中间的代码区:

    1. 代码区,用于编写我们这个关卡的代码。
    2. 错误输出区域,当我们点击测试代码后,如果有错误就会显示在这里。

    最后,最右边的部分是代码被编译后的效果,也就是我们在代码去编写的代码最终会在浏览器呈现出来的效果哦。(这里的效果会在我们编写代码的同时触发变化哦!)

    提交代码/测试成功后:

    「知识」闯关基础知识点

    HTML是什么?
    HTML 的全称是 HyperText Markup Language(超文本标签语言),它是一种用来描述网页结构的标签语言。
    它采用一种特殊的语法或符号来组织网页的内容,元素通常都有开始标签和结束标签,例如标题、段落、列表。

    更好的理解HTML

    对于没有计算机基础的童鞋(就算是有)都会觉得有点抽象,不太好理解。我们换一个说法来理解一下:

    HTML就等同于我们人体里面的骨架,一块一块骨头(标签)组装起来建立起一个人的骨架和结构。比如说经常可以见到的headbodyfooter等标签,就等同于一个人的身体。那其他的标签比如h1h2divsectionulli等标签就是用来组建我们人体每一个部位的小骨头。

    如果HTML加上了JavaScript(人体中的大脑和肌肉)就可以操控整个人的动作,让一个人活起来了。但是只有骨头和肌肉,这个也太难看了吧?想想都觉得吓人。所以我们会有皮肤来把这些不太好看的东西藏起来,这个时候就需要在HTML中使用CSS(人体的皮肤)。这样子我们有好的皮肤加上衣服和化妆品的打扮,这样才可以貌美如花嘛对吧?

    如果我们上面说的骨头和骨架,在代码中又是什么样子的呢?我们一起来看看:

    <h1>Top level heading: Maybe a page title</h1>
    
    <p>A paragraph of text. Some information we would like to communicate to the viewer. This can be as long or short as we would like.</p>
    
    <ol>
      <li>Number one on the list</li>
      <li>Number two</li>
      <li>A third item</li>
    </ol>
    

    这段代码被编译后就会在浏览器呈现出这个样子:

    HTML5又是什么?

    HTML这种超文本源自于Web早期和最初的用例。当时页面都是静态文档,并且文档中也有连接和引用到其他的文档。通过浏览器中的hypertext links(超文本链接)在文档之中跳转与导航。这样用户就可以自由的在文档之中翱翔,不用在文档直接搜索查看。

    后期web页面和web应用渐渐变得越来越复杂,W3C更新了HTML的规范来让所有的浏览器更加兼容彼此。为什么呢?大家应该都知道市面上有五花八门的各种浏览器,如果每一个浏览器都对HTML有不同的写法,不同的规范,那我们做前端开发的,有多少的浏览器规范我们就需要学会多少种写法。不用后浪推上来,已经累死在沙滩上了。

    那HTML5其实就是第五版的HTML规范,也是目前最新的版本。

    基础知识弄懂了,我们马上就来开始闯关吧!GO GO GO!

    「第一关」用HTML元素与世界问好

    关卡名:Say Hello to HTML Elements

    身在技术领域的童鞋们都知道,入门任何语言的开头都是先与世界问个好(所谓的输出一个"Hello World")。所以第一关当然是用HTML元素与世界问好啦!😂

    知识点
    • 这一关我们看到代码区域有<h1>hello</h1>这一段代码,这个就是所谓的HTML元素了!也就是人体中的一小块骨头 🦴!。
    • HTML中每一个标签都需要开始与结束标签:<h1> 为开始,</h1> 为结束。
    • 开始与结束标签的区别,就是结束标签多了/(斜杠)。
    过关目标
    • 修改开始标签<h1>与关闭标签</h1>之间的内容。
    • 把内容从Hello改为Hello World
    学会了什么?

    这关卡主要教会我们:

    1. HTML中的开始与结束标签的格式与规范
    2. 标签的内容是什么
    3. 如何修改标签内容

    答案

    「第二关」使用H2元素加入副标题

    关卡名:Headline with the h2 Element

    接下来的几个关卡中,我们会慢慢的一步一步的搭建一个HTML5的 “猫星人图片的网页应用”

    知识点
    • h2元素是常用的副标题,其实就是比h1字体要小的标题,用过WPS或者word文档的童鞋应该秒懂了。
    • 这些标题标签会告诉浏览器去显示一些默认的标题样式
    • h1一般用于网页大标题,而h2就是用于副标题。
    • 其实在HTML当中还有很多自带的标题元素,例如h3h4h5h6,每一个代码一个等级的副标题,这里数字越大,标题的大小就越小哦。
    过关目标
    • h1标签后面(第二行)加入一个h2标签。
    • 并且在h2元素中加入CatPhotoApp的文字内容。
    过关条件
    • 创建一个h2元素
    • h2元素必须有一个结束标签
    • h2元素必须含有"CatPhotoApp"的文字内容
    • h1元素必须含有"Hello World"的文字内容
    学会了什么?

    这关卡主要教会我们:

    1. 什么是副标题
    2. HTML有哪些副标题
    3. 如何加入副标题

    答案

    「第三关」段落元素加入信息内容

    关卡名:Inform with the Paragraph Element

    知识点
    • pparagragh(段落)的缩写,就是我们在写文章中的段落一样,一般都是用来放信息内容的。
    • 我们可以用<p>我是一个p标签</p>,这样的方式来加入段落元素。
    过关目标
    • 在我们的h2元素下方加入p元素。
    • p元素的内容中加入文字"Hello Paragraph"。
    • 注意:HTML的规范中说明,所有标签的英文字母都必须使用小写!
    过关条件
    • 代码中必须有一个规范的p元素。
    • p元素中必须含有文字"Hello Paragraph"。
    • p元素必须有一个结束标签。
    学会了什么?

    这关卡主要教会我们:

    1. p元素是什么
    2. 如何加入信息内容段落

    答案

    「第四关」加入“占位”文字

    关卡名:Fill in the Blank with Placeholder Text

    知识点
    • 开发者们用一个传统,就是在没有内容的时候,排版时都会用统一的占位文字“lorem ipsum text”。很多人很好奇,为什么都用这个?

    Lorem ipsum从15世纪开始就被广泛地使用在西方的印刷、设计领域中,在电脑排版盛行之后,这段被传统印刷产业使用几百年的无意义文字又再度流行。由于这段文字以“Lorem ipsum”起头,并且常被用于标题的测试中,所以一般称为Lorem ipsum,简称为Lipsum。


    原先大家以为这段拉丁文只是没有意义的组合,目的是让阅读者不要被文章内容所影响,而只专注于观察字型或版型,并借此填满空间。但根据美国拉丁学者Richard McClintock的研究,Lorem ipsum原来起源于西赛罗《善恶之尽》(De finibus bonorum et malorum)第一章(Liber Primus)的32、33两节。

    • 这段占位文字用了5个世纪也是够长情的了,既然我们这些关卡是在搭建一个“猫星人”的应用,那么我们改为“kitty ipsum text”。😁
    过关目标
    • p元素的内容替换成这一段占位文字:“Kitty ipsum dolor sit amet, shed everywhere shed everywhere stretching attack your ankles chase the red dot, hairball run catnip eat the grass sniff.
    过关条件
    • p元素需要含有“kitty ipsum text”的首几个单词。
    学会了什么?

    这关卡主要教会我们:

    1. 什么是“lorem ipsum text
    2. 为什么“lorem ipsum text”经常用于设计和排版的占位文案

    答案

    「第五关」清除HTML代码注释

    关卡名:Uncomment HTML

    知识点
    • 代码注释是为了在代码中留下备注的一种常用写法。通常为了给自己和其他开发者留下有意义的备注,让大家可以更容易的懂得代码的作用或者含义。代码注释是不会影响代码的运行,或者是显示出来给到用户看到的。
    • 代码注释还有一个非常使用的目的,就是屏蔽代码。被注释的代码就不会被编译器运行,这样被注释的代码就不会生效了。
    • 不同语言有不同的注释写法,HTML的注释写法开始是<!--,结束使用-->。例如:<!-- <p> abc </p> -->
    过关目标
    • 此关卡的代码都被注释掉了,所以所有的代码都没有生效。(预览区可以看到是空白的)
    • 我们需要清除掉这里的注释,让h1h2p元素生效。
    过关条件
    • 页面预览区需要可以看到h1元素内容
    • 页面预览区需要可以看到h2元素内容
    • 页面预览区需要可以看到p元素内容
    • 页面中没有遗漏结束注释标签-->
    学会了什么?

    这关卡主要教会我们:

    1. 什么是代码注释
    2. 代码注释有什么作用
    3. 如何清除代码注释

    答案

    「第六关」局部HTML代码注释

    关卡名:Comment out HTML

    知识点
    • 上一关我们看到可以把整个代码注释掉,但是其实很多时候我们可能需要注释掉局部的代码,或者是多段代码。
    • 使用方式也是一样的,在想开始注释的地方加入<!---,然后结束的地方加入-->

    ⚠️注意:
    在注释代码的时候要注意的一个点,HTML的元素都是有开始与结束标签的,注释的过程中如果我们注释掉半个元素,那代码就会有结束没有开头了。这样是会报错的哦。同等概念,后面我们会学到,HTML元素是可以加入属性的,属性也是无法单独注释的。

    过关目标
    • 注释掉整个h1元素和p元素,h2元素要生效。(也可以说页面上只能看到h2这个元素的效果)
    过关条件
    • h1元素应该被注释掉,页面看不到该元素效果
    • p元素应该被注释掉,页面看不到该元素效果
    • 页面预览区需要可以看到h2元素内容
    • 每一段注释都应该有结束注释标签-->
    • h1h2p元素在代码中的顺序不能变
    学会了什么?

    这关卡主要教会我们:

    1. 如何局部注释代码

    答案

    「第七关」删除HTML元素

    关卡名:Delete HTML Elements

    知识点
    • 场景:因为手机的屏幕高度可呈现的空间不多,所以我们要把h1元素删除掉。

    ⚠️注意:
    删除代码和注释代码都有一个一样的原则。就是开始与结束的标签不能缺了其中之一,要不代码就会报错。所以删除元素的时候也要注意元素的开始与结束标签的完整性。

    过关目标
    • 删除掉代码中的h1元素,让我们的页面更加整洁和更有空间感。
    过关条件
    • h1元素应该被完整的被删除
    • 页面预览区需要可以看到h2元素内容
    • 页面预览区需要可以看到p元素内容
    学会了什么?

    这关卡主要教会我们:

    1. 如何正确的删除元素

    答案

    「第八关」HTML5元素

    关卡名:Introduction to HTML5 Elements

    知识点
    • HTML5给我们带来了更多具备丰富代表性的HTML标签。这些标签包括main(主要内容)、header(头部)、footer(脚步)、nav(导航)、video(视频)、article(文章)、section(区域/分段内容)和更多。
    • 这些标签给HTML的结构带来了更多可描述性的意义。就好像人体也有很多代表性的结构与区域名称,比如说:肱骨、股骨、腕骨、肩胛和不规则骨等等。
    • 人体的骨头要分类,也是为了让医生更好的在大量的骨头中找到或者描述到具体的那种骨头。那HTML5中的这些丰富的标签也是一样的。他们可以更好的帮助搜索引擎找到对应的内容,加入这些标签也让我们的网页做到更好的搜索引擎优化(SEO)

    什么是搜素引擎?
    我们可以把搜索引擎看作是一本很大很大的书中的目录。我们想想在现代的互联网中,全世界有多少个网站或者网页应用?如果没有一个目录让我们可以搜索,我们怎么可以找到我们想看的内容或者网站?可以说基本是不可能的!


    搜索引擎怎么运作?
    那搜索引擎的目录是怎么生成的呢?这个世界有一种很厉害的虫,那就是"爬虫"。每天搜索引擎的公司会派出成千上万的爬虫军队出去,在互联网上到处找网站,然后进入每一个网站中阅读里面的内容。然后收集回来的内容会经过做过滤和分析,然后建立关键词等等,最后生成一个搜索目录。我们经常用的搜索引擎包括:百度搜索,谷歌搜索,搜狗搜素,360搜素等等。

    用其中一个标签来举例,一个main元素中嵌套了两个子元素:

    <main> 
      <h1>Hello World</h1>
      <p>Hello Paragraph</p>
    </main>
    

    小贴士:这些HTML5的标签的作用和适用性会在后面的“Applied Accessibility(应用无障碍)”的课程中详细讲说。

    过关目标
    • 在原有的p元素下方添加一个新的p元素,并且加入这段内容Purr jump eat the grass rip the couch scratched sunbathe, shed everywhere rip the couch sleep in the sink fluffy fur catnip scratched.
    • 然后用一个main元素两个p元素包裹起来。
    过关条件
    • 应该有2个p元素,每个都有文字内容
    • 每个p元素都有结束标签
    • 第二个p元素的内容含有“Purr jump eat…”这段文字
    • 代码中必须含有main元素
    • main元素中必须含有两个p子元素
    • main元素开始必须在第一个p元素之前
    • main元素结束必须在第二个p元素之后
    学会了什么?

    这关卡主要教会我们:

    1. 学到了更多丰富的HTML5标签
    2. 学会使用main元素
    3. 学会嵌套元素

    答案

    「第九关」网站中插入图片

    关卡名:Add Images to Your Website

    知识点
    • 我们可以通过使用img元素为我们的网页插入图片,然后使用元素中的src属性来指定图片地址。

    ⚠️ 注意:img元素是不需要结束标签的,它是属于自动关闭型元素。

    • W3C规范中,所有img必须填写alt属性(alt是“Alternative”的缩写,就是“替代”的意思)。当一个图片无法加载或者显示时,alt属性的值就会替代这个图片显示出来。
    • 另外alt对于搜索引擎优化是有一定的帮助的,因为这个属性是用来描述一个图片的。如果这个图片是一只猫,对于搜索引擎的爬虫会针对图片的Alt取得关于这个图片的描述。这样搜索引擎才能知道这个图片大概是什么。

    ⚠️ 注意:

    • 如果图片是单纯为了装饰的,那alt就留空:alt=""
    • 尽量不要在alt属性中加入特殊字符(或者符号),除非是必须的

    一个完整的img元素例子如下:

    <img src="https://www.your-image-source.com/your-image.jpg" alt="Author standing on a beach with two thumbs up.">
    
    过关目标
    • main元素中的p元素之前添加img元素。
    • img元素的src属性的值指向https://bit.ly/fcc-relaxing-cat
    • 给予img元素的alt属性一个合适的名字:比如“Kitty” (小猫咪的意思)
    过关条件
    • 页面中必须有一个img元素。
    • img元素中的src属性指向一个猫咪的图片地址。
    • img元素中的alt属性值不能为空。
    学会了什么?

    这关卡主要教会我们:

    1. 如何使用img图片元素
    2. 懂得使用src属性
    3. 懂得使用alt属性

    答案

    「第十关」使用锚元素实现链接跳转

    关卡名:Link to External Pages with Anchor Elements

    知识点
    • 在HTML当中,a (锚) 元素是用于跳转页面,可以是内部页面或者是外部页面。(内部指的是本网站内的页面,外部指的是本网站以外的其他网站的页面。)
    • a 元素需要一个网页地址的属性叫href。也需要一个anchor text(锚文字):

    例如:
    <a href="https://freecodecamp.org">这个链接会跳转到 freecodecamp.org</a>

    • 网页地址:https://freecodecamp.org
    • 锚文字(其实就是跳转链接的文案):这个链接会跳转到 freecodecamp.org
    • 使用以上例子,在浏览器中就会显示一段文字链接 “这个链接会跳转到 freecodecamp.org”,点击该链接就会跳转到https://www.freecodecamp.org这个网址。

    额外知识点:
    以上例子讲说的是跳转外部链接,如果我想跳转当前网址的子页面呢?(所谓的内部跳转,但是其实还可以做到当前页面的位置跳转,这个下一个关卡就会学到咯!)

    • 比如现在我们当前的页面是"www.freecodecamp.org",我们的链接想跳转到“www.freecodecamp.org/learn”。
    • 这个时候我们的a元素的href属性可以这么写
    <a href="/learn">这个链接会跳转到 freecodecamp.org/learn</a>
    
    过关目标
    • 创建一个a元素,链接文案为“cat photos”,并且指定跳转到http://freecatphotoapp.com
    过关条件
    • a元素的链接文案必须含有“cat photos”
    • a元素的跳转地址必须是http://freecatphotoapp.com
    • a元素必须有结束标签。
    学会了什么?

    这关卡主要教会我们:

    1. 如何在网页中添加链接
    2. 懂得使用href属性
    3. 懂得如何添加链接文案

    答案

    「第十一关」使用锚元素跳转内部页面区域

    关卡名:Link to Internal Sections of a Page with Anchor Elements

    知识点
    • a(锚)元素还可以用于跳转页面内部的特定区域。
    • 创建一个内部跳转链接,首先我们需要在href属性的值中绑定一个哈希符号#和一个唯一id属性。
    • id属性是在HTML中任何一个元素都可以绑定的唯一标识。id属性可以给予一个元素一个唯一的识别名,让这个元素可以在HTML中被选择到。

    以下是一个内部跳转链接的例子,其中的...代表被省略的一段代码。

    <a href="#contacts-header">Contacts</a>
    ...
    <h2 id="contacts-header">Contacts</h2>
    

    我们来分析一下这个例子:

    • 这里的h2元素被绑定了一个id属性,名字为“contacts-header”。
    • 我们的a元素链接的指定href跳转地址为#contacts-header
    • 我们可以看到#后面的名字与h2id值一致,就是这样点击这个链接的时候,页面就会移动到绑定了同一个名字的元素的位置。
    • 我们要注意的是id属性的值,在当前页面中必须是唯一的。

    知识点:
    在这个例子里面,我们可以看到a元素多了一个target属性。这个属性在链接中是非常常用的。我们经常用的各大电商平台,我们点击一个商品的链接都会打开一个新窗口,但是有一些链接就不会。这种就是用target属性控制的。


    target属性的常用值有:

    • _blank:在新窗口中打开被链接文档。
    • _self:默认。在相同的框架中打开被链接文档。
    • _parent:在父框架集中打开被链接文档。
    • _top:在整个窗口中打开被链接文档。
    • framename:在指定的框架中打开被链接文档。
    过关目标
    • 修改我们的外部跳转链接的href属性为#footer,并且把链接的文案“cat photos”改为"Jump to Bottom"。
    • 移除target="_blank"属性,因为这个属性会让我们的链接在全新的窗口打开这个跳转链接。
    • 最后在页面最底部的footer元素中添加id属性,属性值为"footer"。
    过关条件
    • 页面中必须含有一个锚元素
    • 页面中只有一个footer标签
    • a元素的href属性值必须是#footer
    • a元素必须没有target属性
    • a元素的链接文章应该是“Jump to Bottom”
    • footer元素的id属性值必须是"footer"
    学会了什么?

    这关卡主要教会我们:

    1. 如何在网页中添加内部链接
    2. 懂得使用id属性
    3. 懂得使用哈希符号链接跳转

    答案

    「第十二关」文章中嵌套锚元素

    关卡名:Nest an Anchor Element within a Paragraph

    知识点
    • 我们可以在文字中添加链接:
    <p>
      Here's a <a target="_blank" href="http://freecodecamp.org"> link to freecodecamp.org</a> for you to follow.
    </p>
    

    分析一下这个例子的实现原理:

    • 首先我们有一个文字段落<p>Here's a ... for you to follow.</p>
    • 在这个文字段落中"“的部分我们加入a (锚) 元素:<a href="http://freecodecamp.org"> ... </a>,这里我们用a元素包裹了”"这个文字内容,这样这个文字内容就会变成一个链接,并且可点击跳转网页。(记住这里需要我们有开始<a>与结束</a>标签,这样才能指定这个链接的开始与结束区域)
    • 这里a元素中加入target="_blank"可以让链接在新窗口打开,href属性指定了跳转链接。
    • 最后"…“的内容在这个例子里面就是” link to freecodecamp.org",也就是链接的文案(锚文字)。
    过关目标
    • 首先在main元素中加入一个新的p元素。
    • p元素中的文案写入"View more cat photos"。
    • 使用我们原来的a元素替换这段文案中的“cat photos”,从而把这段文案中的"cat photos"改为一个链接。
    过关条件
    • a元素的链接需要指定跳转"http://freecatphotoapp.com"
    • a元素的链接文案应该是“cat photos”
    • a元素需要被p元素包裹着,然后main元素中需要一共有3个p元素
    • a元素需要被新的p元素包裹着,不能是其他的p元素
    • p元素中必须含有“View more ” (more后面需要含有一个空格)
    • a元素中不能含有“View more”等文字
    • 所有p元素必须有结束标签
    • 所有a元素必须有结束标签
    学会了什么?

    这关卡主要教会我们:

    1. 在文章段落中添加链接

    答案

    「第十三关」使用哈希符号创建死链接

    关卡名:Make Dead Links Using the Hash Symbol

    知识点
    • 有时候我们需要添加一个死链接(顾名思义,就是一个点击后无效的链接,不会触发页面跳转)
    • 这种链接有几个用途,第一种在排版的过程中还不知道需要链接哪里,第二种就是后面这个链接交给JavaScript处理。(后面的JavaScript关卡中会讲到哦)

    代码例子:

    <a href="#">死链接</a>
    
    过关目标
    • 当前的a元素中的href是指向一个链接地址"http://freecatphotoapp.com"
    • href属性值改为#,就可以把这个锚元素变成一个死链接
    • 这里还需要把target属性移除掉,要不还是会跳转页面的
    过关条件
    • a元素的href属性值是#,是一个死链接
    学会了什么?

    这关卡主要教会我们:

    1. 用哈希符号创建死链接

    答案

    「第十四关」把图片变成链接

    关卡名:Turn an Image into a Link

    知识点
    • 我们可以通过用a元素包裹一个元素,让这个元素变成一个链接
    • 比较常用的一个例子就是使用a元素包裹一个img元素,这样就可以把一个图片变成一个链接。(也就是说,点击这个图片就可以跳转页面了)

    代码例子:

    <a href="#">
      <img src="https://bit.ly/fcc-running-cats" alt="Three kittens running towards the camera.">
    </a>
    

    这个例子中,我们希望这个图片的链接是一个"死链接",所以href属性的值需要使用#

    过关目标
    • a元素包裹页面中的img元素
    • 改变后,我们在最右边的预览区把鼠标放到图片上方,我们可以看到我们的鼠标从一个“普通鼠标志”变成一个“点击手指的标志
    过关条件
    • img元素需要包裹在a元素之中
    • 图片的链接必须是一个死链接
    • 所有的a元素必须有结束标签
    学会了什么?

    这关卡主要教会我们:

    1. 给图片添加链接

    答案

    「第十五关」创建无序列表

    关卡名:Create a Bulleted Unordered List

    知识点
    • HTML当中有特殊的元素用于创建无序列表。
    • 无序列表需要使用ul元素包裹着多个li元素,开始标签为<ul>,结束标签为</ul>

    代码例子:*

    <ul>
      <li>牛奶</li>
      <li>芝士</li>
    </ul>
    

    这段代码就会创建一个无序列表,列表内容有“牛奶”与“芝士”。

    过关目标
    • 移除代码中最后两个p元素。
    • 然后添加一个无序列表,列出3个喵咪喜爱的东西。
    过关条件
    • 创建一个ul元素
    • ul元素应该包裹着3个li元素
    • ul元素必须有结束标签
    • 所有li元素必须有结束标签
    • li元素中必须有内容,也不能是只有空格
    学会了什么?

    这关卡主要教会我们:

    1. 使用ul元素
    2. 使用li元素
    3. 创建无序列表

    答案

    「第十六关」创建有序列表

    关卡名:Create an Ordered List

    知识点
    • HTML当中还有一种叫有序列表(就是前面会按照1,2,3,4… 以此类推)
    • 需要使用ol元素包裹着多个li元素,开始标签为<ol>,结束标签为</ol>

    代码例子:

    <ol>
      <li>肥猪</li>
      <li>肥牛</li>
    </ol>
    

    以上这段代码会创建一个有序列表,有序的列出“肥猪”和“肥牛”。

    过关目标
    • 在“Top 3 things cat hate:”的p元素下方加入一个有序列表
    • 有序列表中列出3样喵咪讨厌的东西
    过关条件
    • 有一个有序列表列出3样喵咪讨厌的东西
    • 有一个无序列表列出3样喵咪喜欢的东西
    • 只有一个ul元素
    • 只有一个ol元素
    • ul元素中有3个li元素
    • ol元素中有3个li元素
    • 所有li元素必须有结束标签
    • 所有li元素的内容不能为空或者只有空格
    学会了什么?

    这关卡主要教会我们:

    1. 使用ol元素
    2. 创建有序列表

    答案

    「第十七关」创建文本输入框

    关卡名:Create a Text Field

    知识点

    接下来的几个关卡,我们一起来创建一个表单。

    什么是表单?

    表单就是一个网页端的表格,让用户在其中填写信息提交给我们保存起来。在办理事情的时候,我们经常会需要填写表格,然后提交给工作人员。在网络上填写表格也是一样的。用户在表单中填写表格,然后提交给我们保存起来,工作人员在后台管理系统就可以对这些表格进行处理了。

    • 一个表单就必定会有文字填写的地方,在HTML中我们会使用input元素来创建一个文本输入框,给到用户填写文字。

    代码例子:

    <input type="text">
    

    知识点:

    • input元素是一个自我关闭型标签,所以不需要结束标签的。
    • input元素中有一个type属性,这个是用来定义这个输入框的类型,这里因为我们需要文本类型,所以就是text。那其他类型有什么呢?其他的类型在后面的关卡中会讲到哦。
    • input元素中的name属性也是非常重要的,后端接受表单的输入框数据时,用的就是name属性值来获取数据的。
    过关目标
    • 在有序列表的ol元素下方创建一个input元素,type元素值使用“text
    过关条件
    • 需要有一个input元素,type属性值为text
    学会了什么?

    这关卡主要教会我们:

    1. 使用input元素创建文本输入框

    答案

    「第十八关」文本输入框中添加占位文本

    关卡名:Add Placeholder Text to a Text Field

    知识点
    • 占位文本(Placeholder)也叫输入框提示语,这段文字会在用户为输入前在输入框中显示。

    我们可以用以下方式加入占位文本:

    <input type="text" placeholder="这个是占位文本/提示语">
    

    ⚠️ 记住:

    input元素是自我结束型元素,不需要结束标签哦!

    过关目标
    • input元素当中添加placeholder属性,属性值为"cat photo URL"
    过关条件
    • input元素中有placeholder属性
    • placeholder的属性值必须为“cat photo URL
    • input元素不需要有结束标签
    • input元素语法不能有误
    学会了什么?

    这关卡主要教会我们:

    1. input元素中添加placeholder属性

    答案

    「第十九关」创建一个表单元素

    关卡名:Create a Form Element

    知识点
    • 我们知道在现实生活中,提交一个表单/表格,只需要填写好后递交给一个人就可以了。但是在网页中的表单是怎么提交让我们保存起来的呢?
    • 其实也很简单,我们首先创建一个form元素来建立一个表单,然后在form元素中添加一个action属性,并且给他一个提交的地址即可。

    小知识:

    我们知道现实中我们会把表格提交给工作人员,那在网页中我们提交给谁呢?我们用一个简单接地气的例子来理解一下:

    • 首先表格的内容都是电子化数据不是纸质的,那肯定是要提交给一个电子化储存的地方
    • 电子化储存的地方就是服务器,也就是一台电脑
    • 但是总要有一个这样的东西接收我们的表单吧?是的,操控这个服务器的就是后端
    • 所以表单的action顾名思义是一个提交动作,表单需要指定给一个“人”来接收,在网络上就是“服务器地址或者后端地址”
    • 我们再想想现实中,工作人员拿到我们的表格,会存放到文件仓库对吧?那在网络应用中电子表单的数据放哪里呢?
    • 表单数据提交给到后端之后,后端会拿着这个数据储存到数据库中,数据库也就是文件库了

    通过这个例子大家应该可以能理解表单数据提交和储存的概念了。也更能懂得这个action背后的基本逻辑是什么了。

    代码例子:

    <form action="/url-where-you-want-to-submit-form-data">
    	...
    </form>
    
    过关目标
    • 把我们的input元素包裹在form元素之中,然后在form元素中加入action属性值“/submit-cat-photo
    过关条件
    • 文本输入框应该包裹在form元素之中
    • form元素需要有action属性值为“/submit-cat-photo”
    • form元素需要有完整的开始与结束标签
    学会了什么?

    这关卡主要教会我们:

    1. 如何完成使用表单
    2. 使用表单form元素
    3. 懂得action属性的意义和用法

    答案

    「第二十关」添加表单提交按钮

    关卡名:Add a Submit Button to a Form

    知识点
    • 用户输入了表单中的信息,但是没有一个提交的按钮,这个信息是不会自动提交到服务端的
    • 所以我们需要在表单中加入button元素(按钮元素),并且给它的type属性一个“submit(提交动作)”的类型
    • 用户点击这个按钮就会提交表格中所有输入框内的信息
    过关目标
    • form元素中的最后添加button元素,类型为submit
    过关条件
    • 表单元素中必须含有一个按钮
    • button元素必须有一个type属性值为submit
    • button元素中的文字内容必须是"Submit"
    • button元素必须有结束标签
    学会了什么?

    这关卡主要教会我们:

    1. 使用button元素
    2. 如果添加提交表单按钮

    答案

    「第二十一关」设置一个输入框为必填​

    关卡名:Use HTML5 to Require a Field

    知识点
    • 我们可以让表单中某个特定的输入框变成必填,如果用户没有填写是无法提交表单的
    • 举例,现在我们需要一个文本输入框变成必填项,我们只需要在input元素中添加一个require属性

    代码例子:

    <input type="text" required>
    

    ⚠️ 注意:input元素中的require属性是不需要填写属性值的,只要加入这个属性就起效了。

    过关目标
    • input元素加入required属性,把输入框变成一个必填项,用户如果没有填写内容将无法提交表单
    • 加入后尝试在输入框中没有填写内容时点击"Submit"按钮,看看HTML5时如何提醒我们必填内容未完成的。
    过关条件
    • input元素应该有一个required属性
    学会了什么?

    这关卡主要教会我们:

    1. 使用input元素中的required属性
    2. 给表单加入必填输入框

    答案

    「第二十二关」添加一组单选按钮

    关卡名:Create a Set of Radio Buttons

    知识点
    • 当我们在表单中询问用户一个问题,并且希望用户只给出多选一的答案。这个时候我们就可以使用单选按钮
    • 单选按钮是input元素中其中一种类型。
    • 要使用单选按钮,我们需要把每一个单选的input元素包裹在一个label元素中。这时label元素就会与input元素绑定上。意思就是label中的任何文字,在点击的时候都可以选中这个选项。
    • 所有相关的单选项需要有同一个name属性值才能把这些单选项组成一组选项。
    • 单选项被列为一组后,才能选择这组其中一个单选项时,才会自动去除选中其他这组里面的选项。

    单选按钮的例子:

    <label> 
      <input type="radio" name="indoor-outdoor">内门 
    </label>
    
    • 最佳实践是在label元素上设置一个for属性,其值与输入元素的id属性值相匹配。这允许辅助技术在标签和子input元素之间创建链接关系。例如:
    <label for="indoor"> 
      <input id="indoor" type="radio" name="indoor-outdoor">Indoor 
    </label>
    
    过关目标
    • 添加一对radio单选按钮到我们的表单中,每个需要有自己的label元素包裹着。
    • 一个选项显示为indoor和另外一个选项显示outdoor
    • 两个选项的name属性值都必须是indoor-outdoor,从而把它们组成一组。
    过关条件
    • 需要有两个radio元素的单选按钮
    • radio元素的单选按钮都需要有name属性值为indoor-outdoor
    • 两个radio元素的单选按钮都需要有自己的label元素包裹着
    • 每个radio元素都有结束标签
    • 一个单选为indoor
    • 一个单选为outdoor
    • 所有radio元素都必须在form元素之内
    学会了什么?

    这关卡主要教会我们:

    1. 使用label元素
    2. 使用input元素中的radio类型
    3. 如何组合一组单选项

    答案

    「第二十三关」添加一组复选框

    关卡名:Create a Set of Checkboxes

    知识点
    • 表单中,通常用checkbox来建立复选框的表单问题。
    • checkboxinput元素的其中一种类型。
    • 要使用复选框,我们需要把每一个复选框的input元素包裹在一个label元素中。这时label元素就会与input元素绑定上。意思就是label中的任何文字,在点击的时候都可以选中这个选项。
    • 所有相关的复选框需要有同一个name属性值才能把这些选项组成一组选项。
    • 与单选的原理相同:最佳实践是在label元素上设置一个for属性,其值与输入元素的id属性值相匹配。这允许辅助技术在标签和子input元素之间创建链接关系

    复选框例子:

    <label for="loving">
      <input id="loving" type="checkbox" name="personality"> Loving
    </label>
    
    过关目标
    • form元素内添加一组3个checkbox类型的复选框。
    • 每一个复选框的input都要有自己的label包裹着。
    • 三个复选框都需要使用同一个name属性值为personality
    过关条件
    • 需要有3个复选框元素。
    • 每个复选框元素必须包裹着在自己的label元素内。
    • 每一个label元素都需要有结束标签。
    • 所有复选框都需要用同一个name属性值为personality
    • 所有复选框都需要添加在form元素之中。
    学会了什么?

    这关卡主要教会我们:

    1. 使用input元素中的checkbox类型

    答案

    「第二十四关」复选框与单选框中使用value

    关卡名:Delete HTML Elements

    知识点
    • 当一个表单提交时,表单所有的数据会发送到服务端(后端),这里也包括我们选择的选择框数据。
    • checkbox复选框和radio单选框的选中数据也是会一起提交到服务端,那后端怎么判定我们选中了那些呢?
    • 无论是复选还是单选,后端接收到的都是选中的选项输入框value属性的值。
    • 所有我们需要给每一个checkbox或者radio类型的输入框一个value属性。

    代码例子:

    <label for="indoor"> 
      <input id="indoor" value="indoor" type="radio" name="indoor-outdoor">Indoor 
    </label>
    <label for="outdoor"> 
      <input id="outdoor" value="outdoor" type="radio" name="indoor-outdoor">Outdoor 
    </label>
    

    以上例子中,我们有两个radio单选框类型的输入框。假设用户选中了"Outdoor"并且提交了表单,表单数据中会含有indoor-outdoor=outdoor这样的参数。indoor-outdoor这部分来源于这个输入框的name属性,然后outdoor就是用户选中的选项的value属性值。

    如果我们没有填写value属性值,用户选中了任何一个选项然后提交表单。后端接收到的数据就是indoor-outdoor=on。这个数据里面只能告诉我们indoor-outdoor这个选项,用户有选中一个值,但是是什么,我们不知道。这样这个表单的数据就没有任何意义了。所以我们一定要给每一个选项input元素加入一个value属性值。

    过关目标
    • 给每一个radiocheckbox输入框类型的元素一个value属性值。
    • 这里value属性值常规来说我们都是用英文的,在这个例子中因为我们的选项本身就是英文,所以我们直接用选项名作为value的值即可。
    过关条件
    • 其中一个radiovalue属性值需要是”indoor
    • 其中一个radiovalue属性值需要是”outdoor
    • 其中一个checkboxvalue属性值需要是”loving
    • 其中一个checkboxvalue属性值需要是”lazy
    • 其中一个checkboxvalue属性值需要是”energetic
    学会了什么?

    这关卡主要教会我们:

    1. 使用value属性
    2. radio或者checkbox加上value属性值
    3. 多选项或者单选项数据提交的原理

    答案

    「第二十五关」默认选中单选框/复选框

    关卡名:Check Radio Buttons and Checkboxes by Default

    知识点
    • 很多时候,表单当中都会有默认选中值。
    • 如果我们想默认选中单选项中的其中一个,或者是默认选中复选项中的几个怎么实现呢?
    • 想默认选中,我们只需要在radio或者checkboxinput元素中添加checked属性即可(这个也是一个不需要属性值的属性)

    代码例子:

    <input type="radio" name="test-name" checked>
    
    过关目标
    • radio单选框组合的第一个单选项设置为默认选中。
    • checkbox复选框组合的第一个复选项设置为默认选中。
    过关条件
    • 单选框组合的第一个单选项默认被选中
    • 复选框组合的第一个复选项默认被选中
    学会了什么?

    这关卡主要教会我们:

    1. radio单选项或者checkbox复选项添加默认选中属性checked

    答案

    「第二十六关」将许多元素嵌套在单个div元素中

    关卡名:Nest Many Elements within a Single div Element

    知识点
    • div元素,也称为分割元素,是其他元素的通用容器。
    • div元素也是最常用的HTML元素之一。
    • 与其他非自我结束元素一样,可以使用div元素来开始,然后在另一行使用</div>来结束。
    过关目标
    • 嵌套“Things cats love”和“Things cats hate”的两个列表到div元素之中

    提示:把<div>开始标签放在"Things cats love"的p元素上方,然后</div>结束标签在</ol>的下方。最后整个div元素把所有内容包裹起来。

    过关条件
    • p元素内容被包裹在div元素之中
    • ul元素内容被包裹在div元素之中
    • ol元素内容被包裹在div元素之中
    • div元素必须有结束标签
    学会了什么?

    这关卡主要教会我们:

    1. 使用div元素分割内容
    2. 使用div元素嵌套多个元素

    答案

    「第二十七关」声明HTML文档的Doctype

    关卡名:Declare the Doctype of an HTML Document

    知识点

    到目前为止,我们闯过的关卡当中包括了特定的HTML元素以及使用。但是那些都是一个完成HTML页面的其中一部分。其实还有一些元素是每一个HTML页面都需要存在的。

    在文章的顶部我们需要告诉浏览器,我们需要使用哪一个版本的HTML。HTML这个语言一直在持续更新升级。各大浏览器基本都兼容最新的配置与版本(那就是HTML5)。但是还有一些浏览器只兼容一些历史版本的HTML(例如旧版本的IE浏览器)。

    • 要告诉浏览器我们需要使用那个版本的HTML,我们需要在HTML文件的头部添加<!DOCTYPE ...>,这里的...可以写入HTML的某个版本。如果是HTML5的话,那就是<!DOCTYPE html>即可。
    • 在这个声明的代码中!DOCTYPE都是非常重要的,而DOCTYPE也是必须大写的。然后html这个就无大小写限制了。
    • 跟着这段文件HTML版本声明就是html元素。所有我们网页的代码和元素都必须在html元素内编写。

    HTML代码例子:

    <!DOCTYPE html>
    <html>
      <!-- Your HTML code goes here -->
    </html>
    
    过关目标
    • 在代码区域第一行,加入DOCTYPE声明,并且选择使用HTML5版本。
    • 声明后加入html元素,并且在html元素内嵌套一个h1标题元素。
    • h1标题元素内必须含有一个标题文案,文案可以随意填写。
    过关条件
    • 代码中必须含有<!DOCTYPE html>标签。
    • 代码中必须含有html元素。
    • html元素必须包裹着一个h1元素。
    学会了什么?

    这关卡主要教会我们:

    1. 如何声明HTML版本
    2. 使用html标签

    答案

    「第二十八关」定义HTML文档的头部和主体

    关卡名:Define the Head and Body of an HTML Document

    知识点
    • 在标准的HTML文档结构中,我们需要丰富这个基础结构的分区。
    • 所以在html元素中我们会分出head头部元素和body主体元素。
    • 所有CSS引用,字体引用,网页标题等等这些网页定义的内容都是放在head元素之内。
    • 然后所有页面的布局元素都需要放在body元素之内。

    小贴士:

    我们用一个一个更好的理解方式,让我们更容易记住这个规则的原理。

    • 如果我们想一下,所有的知识,思想,印象等等就等同于HTML当中的"CSS引用,字体引用,网页标题",那东西是不是都应该在我们的脑袋里面呢?所以呀“CSS引用,字体引用,网页标题”都应该放在head头部元素中!
    • 我们的骨头和骨架是不是在我们身体内呢?所以剩下所有的页面布局代码就要放在body主体元素中!

    HTML结构代码例子:

    <!DOCTYPE html>
    <html>
      <head>
        <!-- metadata elements -->
        <!-- CSS引用,字体引用,网页标题等等元素 -->
      </head>
      <body>
        <!-- page contents -->
        <!--页面的布局元素 -->
      </body>
    </html>
    
    过关目标
    • 代码区域里面有title页面标题元素,h1文章标题元素和p文章段落元素。
    • title元素嵌套到一个head元素中。
    • 剩余的h1p的内容都嵌套到一个body元素中。
    过关条件
    • 只有一个head元素
    • 只有一个body元素
    • head元素需要被html元素包裹着
    • body元素需要被html元素包裹着
    • title元素需要被head元素包裹着
    • h1p元素都需要被body元素包裹着
    学会了什么?

    这关卡主要教会我们:

    1. 建立完成的HTML文档结构

    答案

    「终」总结


    恭喜大家一起闯过28关。我们学习到了HTML与HTML5的基础知识。虽然说这些都是很基础的知识,可以说闯过这28关,前端入门级别都还没有到。但是庞大与伟大的事业和建筑物都是从稳固的基础建立起来的。无论是多么简单还是无比困难的任务,我们都需要耐心和细心对待,把每一件小事都做到极致,才能逐步壮大,成功才会在远方等着我们。

    下一期,我们开始第二课,深入浅出CSS基础。一起继续闯关打怪,打开前端技术大门。敬请期待哦!

    我是三钻,一个在技术银河中等和你们一起来终身漂泊学习。
    点赞是力量,关注是认可,评论是关爱!下期再见 👋!

    系列阅读

    • 🔥《44关学习CSS与CSS3基础「一」》 — 这周我们一起闯过了22关,下一期我们会一起把剩余的22关完成。学习是一种像爬山一样的过程,要经历过漫长的上坡路,一步一个脚印。“路漫漫其修远兮,吾将上下而求索。”, 在追寻知识的道路上,前方的道路还很漫长,但我们将百折不挠,不遗余力地,上天下地的去追求和探索。让我们继续坚持学习,终身学习成长。在大前端的时代爬到技术的巅峰,做一个有深度的技术人员。
    • 🔥《44关学习CSS与CSS3基础「二」》 —— 我有一段时间没有更新FCC前端教程了,这一周就继续写完CSS与CSS3基础的教程。最近工作和生活都比较繁忙所以文章更新也受到了一定的影响。不过技术文章写作再忙也不会放弃的。我会继续努力坚持着一周一篇文章的进度,继续为大家带来我学习到的知识。让我们一起继续终身学习吧!

    推荐系列

    小伙伴们可以查看或者订阅相关的专栏,从而集中阅读相关知识的文章哦。

    • 📖 《数据结构与算法》 — 到了如今,如果想成为一个高级开发工程师或者进入大厂,不论岗位是前端、后端还是AI,算法都是重中之重。也无论我们需要进入的公司的岗位是否最后是做算法工程师,前提面试就需要考算法。

    • 📖 《FCC前端集训营》 — 根据FreeCodeCamp的学习课程,一起深入浅出学习前端。稳固前端知识,一起在FreeCodeCamp获得证书

    • 📖 《前端星球》 — 以实战为线索,深入浅出前端多维度的知识点。内含有多方面的前端知识文章,带领不懂前端的童鞋一起学习前端,在前端开发路上童鞋一起燃起心中那团火🔥

    推荐阅读

    • 🔥《前端必看的8个HTML+CSS技巧》 — CSS是一个很独特的语言。看起来非常简单,但是某种特殊效果看似简单,实现起来就颇有难度。这篇文章主要是给在学习前端的童鞋分享一些新的CSS技巧,一些在前端教程和培训课堂中不会讲到的知识。第二就是让还在前端开发这条道路上的童鞋们,重新燃起对前端排版和特效的热爱和热情!🔥
    • 🔥《带你体验Vue2和Vue3开发组件有什么区别》 — 使用Vue2和Vue3开发一个简单的表格组件来展示一下Vue2和Vue3开发组件的区别。看完这文章后,你将会有一个概念Vue2和Vue3开发组件时的区别,并且为Vue3的开发之路做好准备。ღ(◔ڼ◔ღ)ミ
    • 🔥《VSCode常用快捷键大全|VSCode高级玩家宝典之第一篇》 — 所以对于个好的程序员,一个好的代码编辑器可以起到很大的作用,在开发的过程中可以给我们带来很多便利、帮助、效率和影响。甚至一个好的编辑器可以给开发者日常编程中带来更高的喜悦感。
    • 🔥《VSCode插件大全|VSCode高级玩家宝典之第二篇》 — VSCode没有安装插件,就等同于一把枪没有安装配件,打把的时候还是缺失精准度,开枪的时候也会有很重的后坐力。当然没有插件,也可以很好的编写代码,就是没有那么强而已。
    • 🔥《VSCode配置同步|VSCode高级玩家宝典之第三篇》 — 有了武功秘籍(快捷键)和高深的内功心法(插件),那VSCode是不是应该是无敌了呢?天灾难逃,人祸难免,我们电脑可能会坏或者电脑还可能要退休,甚至是我们有多台电脑的可能。那这个时候我们精心配置的VSCode不是要从头再来?

    展开全文
  • 近期总结一一些面试题 都是企业的面试题笔记题 感觉薪资10k下的都会出笔试题 ...同时分享一个自己录制的CSS3动画特效经典案例【推荐教程】--后期会更新vue框架 微信小程序等内容。 https://ke.qq.com/cou...

    近期总结一一些面试题 都是企业的面试题笔记题

    感觉薪资10k下的都会出笔试题   

    特别高的薪资都是直接技术面试或者是 现场编程 

    总结很多人的面试题,后期会对于单个知识点再说笔记详细讲解。

    部分都是百度的答案,不是特全面的,可以自己找下

    同时分享一个自己录制的CSS3动画特效经典案例【推荐教程】--后期会更新vue框架 微信小程序等内容。

     https://ke.qq.com/course/323252

    最近录制的ajax从基础到实战的视频,包含原生ajax  jquery的ajax 以及ajax接口获取数据等

    https://ke.qq.com/course/404001?tuin=a9c74247

    最新小程序电商--视频7天的课程+云开发

    https://ke.qq.com/course/2705986?tuin=a9c74247

     

     

    红色为常见面试题

    =============================================================

    前端面试题: 

    1. 一个200*200的div在不同分辨率屏幕上下左右居中,用css实现

    div
    {
    position:absolute;
    width:200px;
    height:200px;
    top:50%;
    left:50%;
    margin-left:-100px;
    height:-100px;
    z-index:1000;
    }

     

    2. 写一个左中右布局占满屏幕,其中左右两块是固定宽度200 ,中间自适应宽,要求先加载中间块,请写出结构及样式:

     <body>  

            <h3>实现三列宽度自适应布局</h3>  

            <div id = "left">我是左边</div>  

            <div id = "right">我是右边</div>  

            <div id = "center">我是中间</div>  

    </body>  

     

    html,body{ margin: 0px;width: 100%; }  

    h3{height: 100px;margin:20px 0 0;}  

    #left,#right{width: 200px;height: 200px; background-color: #ffe6b8;position: absolute;top:120px;}  

    #left{left:0px;}  

    #right{right: 0px;}  

    #center{margin:2px 210px ;background-color: #eee;height: 200px; }  

     

    3. 阐述清楚浮动的几种方式(常见问题)

    1.父级div定义 height

    原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
    优点:简单、代码少、容易掌握
    缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

    2.父级div定义 overflow:hidden

    原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
    优点:简单、代码少、浏览器支持好

    4. 结尾处加空div标签 clear:both

    原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
    优点:简单、代码少、浏览器支持好、不容易出现怪问题

    缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好

    5. 解释css sprites ,如何使用?

    CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background- repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置。

    CSS Sprites为一些大型的网站节约了带宽,让提高了用户的加载速度和用户体验,不需要加载更多的图片

    6. 如何用原生js给一个按钮绑定两个onclick事件?

    Var  btn=document.getElementById(‘btn’);

    //事件监听 绑定多个事件

    var btn4 = document.getElementById("btn4");

    btn4.addEventListener("click",hello1);

    btn4.addEventListener("click",hello2);

     

    function hello1(){

     alert("hello 1");

    }

    function hello2(){

     alert("hello 2");

    }

     

    7. 拖拽会用到哪些事件

    · dragstart:拖拽开始时在被拖拽元素上触发此事件,监听器需要设置拖拽所需数据,从操作系统拖拽文件到浏览器时不触发此事件.

    · dragenter:拖拽鼠标进入元素时在该元素上触发,用于给拖放元素设置视觉反馈,如高亮

    · dragover:拖拽时鼠标在目标元素上移动时触发.监听器通过阻止浏览器默认行为设置元素为可拖放元素.

    · dragleave:拖拽时鼠标移出目标元素时在目标元素上触发.此时监听器可以取消掉前面设置的视觉效果.

    · drag:拖拽期间在被拖拽元素上连续触发

    · drop:鼠标在拖放目标上释放时,在拖放目标上触发.此时监听器需要收集数据并且执行所需操作.如果是从操作系统拖放文件到浏览器,需要取消浏览器默认行为.

    · dragend:鼠标在拖放目标上释放时,在拖拽元素上触发.将元素从浏览器拖放到操作系统时不会触发此事件.

    8. 请列举jquery中的选择器:

     

     

    9. Javascript中的定时器有哪些?他们的区别及用法是什么?

    setTimeout 只执行一次
    setInterval 会一直重复执行

    9.请描述一下 cookies sessionStorage和localstorage区别

    相同点:都存储在客户端
    不同点:1.存储大小

    · cookie数据大小不能超过4k。

    · sessionStorage和localStorage 虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。

    2.有效时间

    · localStorage    存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;

    · sessionStorage  数据在当前浏览器窗口关闭后自动删除。

    · cookie          设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭

    3. 数据与服务器之间的交互方式

    · cookie的数据会自动的传递到服务器,服务器端也可以写cookie到客户端

    · sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。

    10.计算一个数组arr所有元素的和

    var arr1=[1,2,3,4,5,6,7,8,9];

    var sum1=0;

    for (var i=0;i<=arr1.length;i++) {

    if (typeof arr1[i]=="number") {

    sum1+=arr1[i];

    }

    }

    document.write(sum1);

    //====================================

    function sum2(arr){

    var all=0;

    for (var i=0;i<arr.length;i++) {

    if (typeof arr[i]=="number") {

    all+=arr[i];

    }

    }

    return all;

    }

    document.write(sum2([1,2,3,4]));

    11.编写一个方法去掉数组里面 重复的内容  var arr=[1,2,3,4,5,1,2,3]

    一个数组去重的简单实现

     

    var arr = ['abc','abcd','sss','2','d','t','2','ss','f','22','d'];

    //定义一个新的数组

    var s = [];

    //遍历数组

    for(var i = 0;i<arr.length;i++){

        if(s.indexOf(arr[i]) == -1){  //判断在s数组中是否存在,不存在则push到s数组中

            s.push(arr[i]);

        }

    }

    console.log(s);

    //输出结果:["abc", "abcd", "sss", "2", "d", "t", "ss", "f", "22"]

    方法二:用sort()  然后相邻比较也可以实现

    12.document.write和innerHTML的区别:

    document.write是直接写入到页面的内容流,如果在写之前没有调用document.open, 浏览器会自动调用open。每次写完关闭之后重新调用该函数,会导致页面被重写。

    innerHTML则是DOM页面元素的一个属性,代表该元素的html内容。你可以精确到某一个具体的元素来进行更改。如果想修改document的内容,则需要修改document.documentElement.innerElement。

    innerHTML将内容写入某个DOM节点,不会导致页面全部重绘

     

    innerHTML很多情况下都优于document.write,其原因在于其允许更精确的控制要刷新页面的那一个部分。

    13.ajax的步骤

    什么是ajax?

    ajax(异步javascript xml) 能够刷新局部网页数据而不是重新加载整个网页。

    如何使用ajax?

    第一步,创建xmlhttprequest对象,var xmlhttp =new XMLHttpRequest();XMLHttpRequest对象用来和服务器交换数据。

    var xhttp;

    if (window.XMLHttpRequest) {

    //现代主流浏览器

    xhttp = new XMLHttpRequest();

    } else {

    // 针对浏览器,比如IE5或IE6

    xhttp = new ActiveXObject("Microsoft.XMLHTTP");

    }

    第二步,使用xmlhttprequest对象的open()和send()方法发送资源请求给服务器。

    第三步,使用xmlhttprequest对象的responseText或responseXML属性获得服务器的响应。

    第四步,onreadystatechange函数,当发送请求到服务器,我们想要服务器响应执行一些功能就需要使用onreadystatechange函数,每次xmlhttprequest对象的readyState发生改变都会触发onreadystatechange函数

    14.xml和json的区别,请用四个词语来形容

    ·  JSON相对于XML来讲,数据的体积小,传递的速度更快些

    ·  JSON与JavaScript的交互更加方便,更容易解析处理,更好的数据交互

    ·  XML对数据描述性比较好;

    ·  JSON的速度要远远快于XML

     

    15.清楚浮动的方法?(多次出现在面试题)

    1.父级div定义 height
    原理:父级div手动定义height,就解决了父级div无法自动获取到高度的问题。
    优点:简单、代码少、容易掌握

    缺点:只适合高度固定的布局,要给出精确的高度,如果高度和父级div不一样时,会产生问题

    2,结尾处加空div标签 clear:both

    原理:添加一个空div,利用css提高的clear:both清除浮动,让父级div能自动获取到高度
    优点:简单、代码少、浏览器支持好、不容易出现怪问题
    缺点:不少初学者不理解原理;如果页面浮动布局多,就要增加很多空div,让人感觉很不好
    3,父级div定义 伪类:after 和 zoom

    原理:IE8以上和非IE浏览器才支持:after,原理和方法2有点类似,zoom(IE转有属性)可解决ie6,ie7浮动问题
    优点:浏览器支持好、不容易出现怪问题(目前:大型网站都有使用,如:腾迅,网易,新浪等等)
    缺点:代码多、不少初学者不理解原理,要两句代码结合使用才能让主流浏览器都支持
    4,父级div定义 overflow:hidden

    原理:必须定义width或zoom:1,同时不能定义height,使用overflow:hidden时,浏览器会自动检查浮动区域的高度
    优点:简单、代码少、浏览器支持好
    缺点:不能和position配合使用,因为超出的尺寸的会被隐藏。

     

    16.box-sizing常用的属性有哪些?分别有什么作用?

    属性值

    · box-sizing:content-box

    · box-sizing:border-box

    · box-sizing:inherit

     

    content-box

    · 这是box-sizing的默认属性值

    · 是CSS2.1中规定的宽度高度的显示行为

    · 在CSS中定义的宽度和高度就对应到元素的内容框

    · 在CSS中定义的宽度和高度之外绘制元素的内边距和边框

     

    border-box

    · 在CSS中微元素设定的宽度和高度就决定了元素的边框盒

    · 即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制

    · CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度

    (Q1)box-sizing: content-box|border-box|inherit;
    (Q2)content-box:宽度和高度分别应用到元素的内容框。在宽度和高度之外绘制元素的内边距和边框(元素默认效果)。
    border-box:元素指定的任何内边距和边框都将在已设定的宽度和高度内进行绘制。通过从已设定的宽度和高度分别减去边框和内边距才能得到内容的宽度和高度。

     

    17.css选择器有哪些,选择器的权重的优先级

    选择器类型

    1、ID  #id

    2、class  .class

    3、标签  p

    4、通用  *

    5、属性  [type="text"]

    6、伪类  :hover

    7、伪元素  ::first-line

    8、子选择器、相邻选择器

    三、权重计算规则

    1. 第一等:代表内联样式,如: style=””,权值为1000。

    2. 第二等:代表ID选择器,如:#content,权值为0100。

    3. 第三等:代表类,伪类和属性选择器,如.content,权值为0010。

    4. 第四等:代表类型选择器和伪元素选择器,如div p,权值为0001。

    5. 通配符、子选择器、相邻选择器等的。如*、>、+,权值为0000。

    6. 继承的样式没有权值。

    18. 块级元素水平垂直居中的方法有哪些(三个方法)

     

    让div等块级元素水平和垂直都居中,即永远处于屏幕的正中央,当我们做如登录块时非常有用!

     实现一、原理:要让div等块级元素水平和垂直居中,必需知道该div等块级元素的宽度和高度,然后设置位置为绝对位置,距离页面窗口左边框和上边框的距离设置为50%,这个50%就是指页面窗口的宽度和高度的50%,最后将该div等块级元素分别左移和上移,左移和上移的大小就是该div等块级元素宽度和高度的一半。

       CSS代码:

    .mycss{ 

       width:300px;  

       height:200px;  

       position:absolute;  

       left:50%;  

       top:50%;  

       margin:-100px 0 0 -150px }

     

     实现二原理:利用CSS的margin设置为auto让浏览器自己帮我们水平和垂直居中。

       CSS代码:

    .mycss{

        position: absolute;

        left: 0px;

        right: 0;

        top: 0;

        bottom: 0;

        margin: auto;

        height: 200px;

        width: 300px;

    }

     

    jQuery实现水平和垂直居中

     原理:jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS,获取div等块级元素的左、上的边距偏移量,边距偏移量的算法就是用页面窗口 的宽度减去该div等块级元素的宽度,得到的值再除以2即左偏移量,右偏移量算法相同。注意div等块级元素的CSS设置要在resize()方法中完成,就是每次改变窗口大 小时,都要执行设置div等块级元素的CSS。

    jquery代码:

    $(window).resize(function(){

        $(".myblock").css({

            position: "absolute",

            left: ($(window).width() - $(".myblock").outerWidth())/2,

            top: ($(window).height() - $(".myblock").outerHeight())/2     });        

    });

    此外在页面载入时,就需要调用resize()方法

    $(function(){

        $(window).resize();

    });

     

    19.三个盒子,左右定宽,中间自适应有几种方法

    第一种:左右侧采用浮动 中间采用margin-left 和 margin-right 方法。

    代码如下:

    <div style="width:100%; margin:0 auto;"> 

     

           <div style="width:200px; float:right; background-color:#960">这是右侧的内容 固定宽度</div>

     

           <div style="width:150px; float:left; background:#6FF">这是左侧的内容 固定宽度</div>

     

           <div style="margin-left:150px;margin-right:200px; background-color:#9F3">中间内容,自适应宽度</div>

     

        </div>

     

     

    第二种:左右两侧采用绝对定位 中间同样采用margin-left margin-right方法:

     

     

    第三种负的margin

    使用这种方法就稍微复杂了一些了,使用的是负的margin值,而且html标签也增加了,先来看其代码吧:

    <div id="main">

     <div id="mainContainer">main content</div></div><div id="left">

     <div id="leftContainer" class="inner">left content</div></div><div id="right">

     <div id="rightContainer" class="inner">right</div></div>

    #main {

     float: left;

     width: 100%;

    }

    #mainContainer {

     margin: 0 230px;

     height: 200px;

     background: green;

    }

    #left {

     float: left;

     margin-left: -100%;

     width: 230px} 

    #right {

     float: left;

     margin-left: -230px;

     width: 230px;

    } 

    #left .inner,

    #right .inner {

     background: orange;

     margin: 0 10px;

     height: 200px;

    }

     

    20.js有几种数据类型,其中基本数据类型有哪些

    五种基本类型: Undefined、Null、Boolean、Number和String。

    1中复杂的数据类型————Object,Object本质上是由一组无序的名值对组成的。

    Object、Array和Function则属于引用类型

     

    21.undefined 和 null 区别

     

    null: Null类型,代表“空值”,代表一个空对象指针,使用typeof运算得到 “object”,所以你可以认为它是一个特殊的对象值。

    undefined: Undefined类型,当一个声明了一个变量未初始化时,得到的就是undefined。

    null是javascript的关键字,可以认为是对象类型,它是一个空对象指针,和其它语言一样都是代表“空值”,不过 undefined 却是javascript才有的。undefined是在ECMAScript第三版引入的,为了区分空指针对象和未初始化的变量,它是一个预定义的全局变量。没有返回值的函数返回为undefined,没有实参的形参也是undefined。

     

    javaScript权威指南: null 和 undefined 都表示“值的空缺”,你可以认为undefined是表示系统级的、出乎意料的或类似错误的值的空缺,而null是表示程序级的、正常的或在意料之中的值的空缺。

    22.http 和 https 有何区别?如何灵活使用?

     

    http是HTTP协议运行在TCP之上。所有传输的内容都是明文,客户端和服务器端都无法验证对方的身份。

    https是HTTP运行在SSL/TLS之上,SSL/TLS运行在TCP之上。所有传输的内容都经过加密,加密采用对称加密,但对称加密的密钥用服务器方的证书进行了非对称加密。此外客户端可以验证服务器端的身份,如果配置了客户端验证,服务器方也可以验证客户端的身份


    23.常见的HTTP状态码

    2开头 (请求成功)表示成功处理了请求的状态代码。

    200   (成功)  服务器已成功处理了请求。 通常,这表示服务器提供了请求的网页。 
    201   (已创建)  请求成功并且服务器创建了新的资源。 
    202   (已接受)  服务器已接受请求,但尚未处理。 
    203   (非授权信息)  服务器已成功处理了请求,但返回的信息可能来自另一来源。 
    204   (无内容)  服务器成功处理了请求,但没有返回任何内容。 
    205   (重置内容) 服务器成功处理了请求,但没有返回任何内容。
    206   (部分内容)  服务器成功处理了部分 GET 请求。

    3开头 (请求被重定向)表示要完成请求,需要进一步操作。 通常,这些状态代码用来重定向。

    300   (多种选择)  针对请求,服务器可执行多种操作。 服务器可根据请求者 (user agent) 选择一项操作,或提供操作列表供请求者选择。 
    301   (永久移动)  请求的网页已永久移动到新位置。 服务器返回此响应(对 GET 或 HEAD 请求的响应)时,会自动将请求者转到新位置。
    302   (临时移动)  服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。
    303   (查看其他位置) 请求者应当对不同的位置使用单独的 GET 请求来检索响应时,服务器返回此代码。
    304   (未修改) 自从上次请求后,请求的网页未修改过。 服务器返回此响应时,不会返回网页内容。 
    305   (使用代理) 请求者只能使用代理访问请求的网页。 如果服务器返回此响应,还表示请求者应使用代理。 
    307   (临时重定向)  服务器目前从不同位置的网页响应请求,但请求者应继续使用原有位置来进行以后的请求。

    4开头 (请求错误)这些状态代码表示请求可能出错,妨碍了服务器的处理。

    400   (错误请求) 服务器不理解请求的语法。 
    401   (未授权) 请求要求身份验证。 对于需要登录的网页,服务器可能返回此响应。 
    403   (禁止) 服务器拒绝请求。
    404   (未找到) 服务器找不到请求的网页。
    405   (方法禁用) 禁用请求中指定的方法。 
    406   (不接受) 无法使用请求的内容特性响应请求的网页。 
    407   (需要代理授权) 此状态代码与 401(未授权)类似,但指定请求者应当授权使用代理。
    408   (请求超时)  服务器等候请求时发生超时。 
    409   (冲突)  服务器在完成请求时发生冲突。 服务器必须在响应中包含有关冲突的信息。 
    410   (已删除)  如果请求的资源已永久删除,服务器就会返回此响应。 
    411   (需要有效长度) 服务器不接受不含有效内容长度标头字段的请求。 
    412   (未满足前提条件) 服务器未满足请求者在请求中设置的其中一个前提条件。 
    413   (请求实体过大) 服务器无法处理请求,因为请求实体过大,超出服务器的处理能力。 
    414   (请求的 URI 过长) 请求的 URI(通常为网址)过长,服务器无法处理。 
    415   (不支持的媒体类型) 请求的格式不受请求页面的支持。 
    416   (请求范围不符合要求) 如果页面无法提供请求的范围,则服务器会返回此状态代码。 
    417   (未满足期望值) 服务器未满足"期望"请求标头字段的要求。

    5开头(服务器错误)这些状态代码表示服务器在尝试处理请求时发生内部错误。 这些错误可能是服务器本身的错误,而不是请求出错。

    500   (服务器内部错误)  服务器遇到错误,无法完成请求。 
    501   (尚未实施) 服务器不具备完成请求的功能。 例如,服务器无法识别请求方法时可能会返回此代码。 
    502   (错误网关) 服务器作为网关或代理,从上游服务器收到无效响应。 
    503   (服务不可用) 服务器目前无法使用(由于超载或停机维护)。 通常,这只是暂时状态。 
    504   (网关超时)  服务器作为网关或代理,但是没有及时从上游服务器收到请求。 
    505   (HTTP 版本不受支持) 服务器不支持请求中所用的 HTTP 协议版本。

     

     

    24. 如何进行网站性能优化

    1. 从用户角度而言,优化能够让页面加载得更快、对用户的操作响应得更及时,能够给用户提供更为友好的体验。
    2. 从服务商角度而言,优化能够减少页面请求数、或者减小请求所占带宽,能够节省可观的资源。
      总之,恰当的优化不仅能够改善站点的用户体验并且能够节省相当的资源利用。
      前端优化的途径有很多,按粒度大致可以分为两类,第一类是页面级别的优化,例如 HTTP请求数、脚本的无阻塞加载、内联脚本的位置优化等 ;第二类则是代码级别的优化,例如 Javascript中的DOM 操作优化、CSS选择符优化、图片优化以及 HTML结构优化等等。另外,本着提高投入产出比的目的,后文提到的各种优化策略大致按照投入产出比从大到小的顺序排列。
      一、页面级优化
    1. JavaScript 压缩和模块打包
    2. 按需加载资源
    3. 在使用 DOM 操作库时用上 array-ids
    4. 缓存
    5. 启用 HTTP/2
    6. 应用性能分析
    7. 使用负载均衡方案
    8. 为了更快的启动时间考虑一下同构
    9. 使用索引加速数据库查询
    10. 使用更快的转译方案
    11. 避免或最小化 JavaScript 和 CSS 的使用而阻塞渲染
    12. 用于未来的一个建议:使用 service workers + 流
    13. 图片编码优化

    25. react和vue有哪些不同,说说你对这两个框架的看法

    相同点

    · 都支持服务器端渲染

    · 都有Virtual DOM,组件化开发,通过props参数进行父子组件数据的传递,都实现webComponent规范

    · 数据驱动视图

    · 都有支持native的方案,React的React native,Vue的weex

    不同点

    · React严格上只针对MVC的view层,Vue则是MVVM模式

    · virtual DOM不一样,vue会跟踪每一个组件的依赖关系,不需要重新渲染整个组件树.而对于React而言,每当应用的状态被改变时,全部组件都会重新渲染,所以react中会需要shouldComponentUpdate这个生命周期函数方法来进行控制

    · 组件写法不一样, React推荐的做法是 JSX + inline style, 也就是把HTML和CSS全都写进JavaScript了,即'all in js'; Vue推荐的做法是webpack+vue-loader的单文件组件格式,即html,css,jd写在同一个文件;

    · 数据绑定: vue实现了数据的双向绑定,react数据流动是单向的

    · state对象在react应用中不可变的,需要使用setState方法更新状态;在vue中,state对象不是必须的,数据由data属性在vue对象中管理

    26.什么是mvvm mvc是什么区别 原理

    一、MVC(Model-View-Controller)

    MVC是比较直观的架构模式,用户操作->View(负责接收用户的输入操作)->Controller(业务逻辑处理)->Model(数据持久化)->View(将结果反馈给View)。

    MVC使用非常广泛,比如JavaEE中的SSH框架

     

    三、MVVM(Model-View-ViewModel)

    如果说MVP是对MVC的进一步改进,那么MVVM则是思想的完全变革。它是将“数据模型数据双向绑定”的思想作为核心,因此在View和Model之间没有联系,通过ViewModel进行交互,而且Model和ViewModel之间的交互是双向的,因此视图的数据的变化会同时修改数据源,而数据源数据的变化也会立即反应view

     

    27.px和em的区别

    px表示像素 (计算机屏幕上的一个点:1px = 1/96in),是绝对单位,不会因为其他元素的尺寸变化而变化;

    · 

    · 

    em表示相对于父元素的字体大小。em是相对单位 ,没有一个固定的度量值,而是由其他元素尺寸来决定的相对值。

     

    28.优雅降级和渐进增强

    渐进增强(Progressive Enhancement):一开始就针对低版本浏览器进行构建页面,完成基本的功能,然后再针对高级浏览器进行效果、交互、追加功能达到更好的体验。

    优雅降级(Graceful Degradation):一开始就构建站点的完整功能,然后针对浏览器测试和修复。比如一开始使用 CSS3 的特性构建了一个应用,然后逐步针对各大浏览器进行 hack 使其可以在低版本浏览器上正常浏览。

    其实渐进增强和优雅降级并非什么新概念,只是旧的概念换了一个新的说法。在传统软件开发中,经常会提到向上兼容向下兼容的概念。渐进增强相当于向上兼容,而优雅降级相当于向下兼容

    29.eval()的作用

    把字符串参数解析成JS代码并运行,并返回执行的结果;

    eval("2+3");//执行加运算,并返回运算值。  

    eval("varage=10");//声明一个age变量  

    eval的作用域

    functiona(){  

    1.  eval("var x=1"); //等效于 var x=1;  

    2.  console.log(x); //输出1  

    3. }  

    4. a();  

    5. console.log(x);//错误 x没有定

     

    30. JS哪些操作会造成内存泄露

    1)意外的全局变量引起的内存泄露

    function leak(){  

      leak="xxx";//leak成为一个全局变量,不会被回收  

    }

    2)闭包引起的内存泄露

    3)3)没有清理的DOM元素引用

    4)被遗忘的定时器或者回调 5)子元素存在引起的内存泄露

    31. 浏览器缓存有哪些,通常缓存有哪几种

    一、http缓存

    二、websql

    cookie

    localstorage

    sessionstorage

    flash缓存

     

     

     

     

     

     

    32:bootstrap响应式实现的原理

    百分比布局+媒体查询

    33.关于JS事件冒泡与JS事件代理(事件委托)

     事件作为DOM操作重要的一环,需要大家好好理解和运用,今天特意看了一下事件冒泡和事件代理的相关资料,感触颇深,也深感自己的无知不知道多浪费了多少内存,废话不多说进入正题:

    1.事件冒泡:

          通俗易懂的来讲,就是当一个子元素的事件被触发的时候(如onclick事件),该事件会从事件源(被点击的子元素)开始逐级向上传播,触发父级元素的点击事件。

    2.事件委托

        事件委托,首先按字面的意思就能看你出来,是将事件交由别人来执行,再联想到上面讲的事件冒泡,是不是想到了?对,就是将子元素的事件通过冒泡的形式交由父元素来执行。下面经过详细的例子来说明事件委托:

     

    有可能在开发的时候会遇到这种情况:如导航每一个栏目都要加一个事件,你可能会通过遍历来给每个栏目添加事件:

     

     

    事件委托是怎

     

     

    1. var ul = document.getElementById('parentUl');  

    2.     ul.οnclick=function (event) {  

    3.       var e = event||window.event,  

    4.               source = e.target || e.srcElement;//target表示在事件冒泡中触发事件的源元素,在IE中是srcElement  

    5.         if(source.nodeName.toLowerCase() == "li"){   //判断只有li触发的才会输出内容  

    6.             alert(source.innerHTML);  

    7.         }  

    8.         stopPropagation(e);                           //阻止继续冒泡  

    9.     };  

    10.     function addElement() {  

    11.         var li = document.createElement('li');  

    12.         li.innerHTML="我是新孩子";  

    13.         ul.appendChild(li);  

    14.     }  

     

    34. CSS样式覆盖规则

    规则一:由于继承而发生样式冲突时,最近祖先获胜。

    规则二:继承的样式和直接指定的样式冲突时,直接指定的样式获胜

    规则三:直接指定的样式发生冲突时,样式权值高者获胜。

    样式的权值取决于样式的选择器,权值定义如下表。

    CSS选择器

    权值

    标签选择器

    1

    类选择器

    10

    ID选择器

    100

    内联样式

    1000

    伪元素(:first-child等)

    1

    伪类(:link等)

    10

    可以看到,内联样式的权值>>ID选择器>>类选择器>>标签选择器,除此以外,后代选择器的权值为每项权值之和,比如”#nav .current a”的权值为100 + 10 + 1 = 111。

    规则四:样式权值相同时,后者获胜。

    规则五:!important的样式属性不被覆盖。

    !important可以看做是万不得已的时候,打破上述四个规则的”金手指”。如果你一定要采用某个样式属性,而不让它被覆盖的,可以在属性值后加上!important,以规则四的例子为例,”.byline a {color:red !important;}”可以强行使链接显示红色。大多数情况下都可以通过其他方式来控制样式的覆盖,不能滥用!important。

    35. 介绍一下box-sizing属性

    兼容问题 
    首先,box-sizing属性在FireFox中存在兼容问题,所以需要使用-moz-box-sizing做一下兼容。

     

    属性值

    · box-sizing:content-box

    · box-sizing:border-box

    · box-sizing:inherit

     

    content-box

    · 这是box-sizing的默认属性值

    · 是CSS2.1中规定的宽度高度的显示行为

    · 在CSS中定义的宽度和高度就对应到元素的内容框

    · 在CSS中定义的宽度和高度之外绘制元素的内边距和边框

     

    border-box

    · 在CSS中微元素设定的宽度和高度就决定了元素的边框盒

    · 即为元素在设置内边距和边框是在已经设定好的宽度和高度之内进行绘制

    · CSS中设定的宽度和高度减去边框和内间距才能得到元素内容所占的实际宽度和高度

    36. css选择符有哪些?优先级算法如何计算?(常见)

    37. 请简要描述margin重合问题,及解决方式

    1.同向margin的重叠:
    1图片的margin-top与3图片的margin-top发生重叠,2图片的margin-bottom与3图片的margin-bottom发生重叠。这时候重叠之后的margin值由发生重叠两片的最大值决定;如果其中一个出现负值,则由最大的正边距减去绝对值最大的负边距,如果没有最大正边距,则由0减去绝对值最大的负边距。
    解决同向重叠的方法:
    (1)在最外层的div中加入overflow:hidden;zoom:1
    (2)在最外层加入padding:1px;属性
    (3)在最外层加入:border:1px solid #cacbcc;
    2.异向重叠问题:
    1图片的margin-bottom与2图片的margin-top发生重叠,这时候重叠之后的margin值由发生重叠两图片的最大值的决定的。
    解决异向重叠问题:
    float:left(只能解决IE6浏览器中的异向重叠问题,可以解决IE8以上、chorme、firefox、opera下的同向重叠问题)

     

     

    38:position的值,relative\absolute\fixed分别相对于进行谁定位,有什么区别,什么时候用?

    39.解释下CSS sprites,以及你要如何在页面或网站中使用它。

    CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中,再利用CSS的“background-image”,“background-repeat”,“background-position”的组合进行背景定位,background-position可以用数字能精确的定位出背景图片的位置

     

    40.什么是闭包,如何使用它,为什么要使用它?

    包就是能够读取其他函数内部变量的函数。由于在Javascript语言中,只有函数内部的子函数才能读取局部变量,因此可以把闭包简单理解成“定义在一个函数内部的函数”。

    所以,在本质上,闭包就是将函数内部和函数外部连接起来的一座桥梁。闭包可以用在许多地方。它的最大用处有两个,一个是前面提到的可以读取函数内部的变量,另一个就是让这些变量的值始终保持在内存中。

    使用闭包的注意点:

    · 由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

    · 闭包会在父函数外部,改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

     

    41.请解释JSONP的工作原理,以及它为什么不是真正的AJAX。

    JSONP (JSON with Padding)是一个简单高效的跨域方式,HTML中的script标签可以加载并执行其他域的javascript,于是我们可以通过script标记来动态加载其他域的资源。例如我要从域A的页面pageA加载域B的数据,那么在域B的页面pageB中我以JavaScript的形式声明pageA需要的数据,然后在 pageA中用script标签把pageB加载进来,那么pageB中的脚本就会得以执行。JSONP在此基础上加入了回调函数,pageB加载完之后会执行pageA中定义的函数,所需要的数据会以参数的形式传递给该函数。JSONP易于实现,但是也会存在一些安全隐患,如果第三方的脚本随意地执行,那么它就可以篡改页面内容,截获敏感数据。但是在受信任的双方传递数据,JSONP是非常合适的选择。

    AJAX是不跨域的,而JSONP是一个是跨域的,还有就是二者接收参数形式不一样!

    42.请解释一下JavaScript的同源策略。

    在客户端编程语言中,如javascript和 ActionScript,同源策略是一个很重要的安全理念,它在保证数据的安全性方面有着重要的意义。同源策略规定跨域之间的脚本是隔离的,一个域的脚本不能访问和操作另外一个域的绝大部分属性和方法。那么什么叫相同域,什么叫不同的域呢?当两个域具有相同的协议, 相同的端口,相同的host,那么我们就可以认为它们是相同的域。同源策略还应该对一些特殊情况做处理,比如限制file协议下脚本的访问权限。本地的HTML文件在浏览器中是通过file协议打开的,如果脚本能通过file协议访问到硬盘上其它任意文件,就会出现安全隐患,目前IE8还有这样的隐患。

    43.怎样添加、移除、移动、复制、创建和查找节点?

     1)创建新节点

    createDocumentFragment() //创建一个DOM片段
    createElement() //创建一个具体的元素
    createTextNode() //创建一个文本节点

    2)添加、移除、替换、插入
    appendChild() //添加
    removeChild() //移除
    replaceChild() //替换
    insertBefore() //插入

    3)查找
    getElementsByTagName() //通过标签名称
    getElementsByName() //通过元素的Name属性的值
    getElementById() //通过元素Id,唯一性

    44.谈谈垃圾回收机制方式及内存管理

    回收机制方式

    1、定义和用法:垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。

    2、原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。但是这个过程不是实时的,因为其开销比较大,所以垃圾回收器会按照固定的时间间隔周期性的执行。

    3、实例如下:

    function fn1() {

        var obj = {name: 'hanzichi', age: 10};

    }

    function fn2() {

        var obj = {name:'hanzichi', age: 10};

       return obj;

    }var a = fn1();var b = fn2();

    fn1中定义的obj为局部变量,而当调用结束后,出了fn1的环境,那么该块内存会被js引擎中的垃圾回收器自动释放;在fn2被调用的过程中,返回的对象被全局变量b所指向,所以该块内存并不会被释放。

     4、垃圾回收策略:标记清除(较为常用)和引用计数。

    标记清除:

      定义和用法:当变量进入环境时,将变量标记"进入环境",当变量离开环境时,标记为:"离开环境"。某一个时刻,垃圾回收器会过滤掉环境中的变量,以及被环境变量引用的变量,剩下的就是被视为准备回收的变量。

      到目前为止,IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略,只不过垃圾收集的时间间隔互不相同。

    引用计数:

      定义和用法:引用计数是跟踪记录每个值被引用的次数。

      基本原理:就是变量的引用次数,被引用一次则加1,当这个引用计数为0时,被视为准备回收的对象。

    45、jQuery的事件委托方法bind 、live、delegate、on之间有什么区别?

    (1)、bind 【jQuery 1.3之前】

    定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数;

    语法:bind(type,[data],function(eventObject));

    特点:

    (1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件。

    (2)、当页面加载完的时候,你才可以进行bind(),所以可能产生效率问题。

    实例如下:$( "#members li a" ).bind( "click", function( e ) {} );

    (2)、live 【jQuery 1.3之后】

    定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数;

    语法:live(type, [data], fn);

    特点:

    (1)、live方法并没有将监听器绑定到自己(this)身上,而是绑定到了this.context上了。

    (2)、live正是利用了事件委托机制来完成事件的监听处理,把节点的处理委托给了document,新添加的元素不必再绑定一次监听器。

    (3)、使用live()方法但却只能放在直接选择的元素后面,不能在层级比较深,连缀的DOM遍历方法后面使用,即$(“ul”").live...可以,但$("body").find("ul").live...不行; 

    实例如下:$( document ).on( "click", "#members li a", function( e ) {} );

    (3)、delegate 【jQuery 1.4.2中引入】

    定义和用法:将监听事件绑定在就近的父级元素上

    语法:delegate(selector,type,[data],fn)

    特点:

    (1)、选择就近的父级元素,因为事件可以更快的冒泡上去,能够在第一时间进行处理。

    (2)、更精确的小范围使用事件代理,性能优于.live()。可以用在动态添加的元素上。

    实例如下:

    $("#info_table").delegate("td","click",function(){/*显示更多信息*/});

    $("table").find("#info").delegate("td","click",function(){/*显示更多信息*/});

    (4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】

    定义和用法:将监听事件绑定到指定元素上。

    语法:on(type,[selector],[data],fn)

    实例如下:$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样。

    说明:on方法是当前JQuery推荐使用的事件绑定方法,附加只运行一次就删除函数的方法是one()。

     总结:.bind(), .live(), .delegate(),.on()分别对应的相反事件为:.unbind(),.die(), .undelegate(),.off()

    46、px和em的区别

    相同点:px和em都是长度单位;

    异同点:px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
    浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

    47、浏览器的内核分别是什么?

    IE: trident内核

    Firefox:gecko内核

    Safari:webkit内核

    Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

    Chrome:Blink(基于webkit,Google与Opera Software共同开发)

    48、什么叫优雅降级和渐进增强?

    渐进增强 progressive enhancement:
    针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

    优雅降级 graceful degradation:
    一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

    区别:

    a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给

    b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要

    c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

    49、sessionStorage 、localStorage 和 cookie 之间的区别

     共同点:用于浏览器端存储的缓存数据

    不同点:

    (1)、存储内容是否发送到服务器端:当设置了Cookie后,数据会发送到服务器端,造成一定的宽带浪费;

            web storage,会将数据保存到本地,不会造成宽带浪费;

    (2)、数据存储大小不同:Cookie数据不能超过4K,适用于会话标识;web storage数据存储可以达到5M;

    (3)、数据存储的有效期限不同:cookie只在设置了Cookid过期时间之前一直有效,即使关闭窗口或者浏览器;

            sessionStorage,仅在关闭浏览器之前有效;localStorage,数据存储永久有效;

    (4)、作用域不同:cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;

    50、浏览器是如何渲染页面的?

    渲染的流程如下:

    1.解析HTML文件,创建DOM树。

       自上而下,遇到任何样式(link、style)与脚本(script)都会阻塞(外部样式不阻塞后续外部脚本的加载)。

    2.解析CSS。优先级:浏览器默认设置<用户设置<外部样式<内联样式<HTML中的style样式;

    3.将CSS与DOM合并,构建渲染树(Render Tree)

    4.布局和绘制,重绘(repaint)和重排(reflow)

     

    51:js的基本数据类型

     

    JavaScript中有五种基本数据类型,它们分别是:undefined,null,boolean,number,string。

    还有一种复杂数据类型-object。 

    52:事件委托

     

    事件委托就是利用的DOM事件的事件捕获阶段。把具体dom上发生的事件,委托给更大范围的dom去处理。好比送信员,如果每次都把信件送给每一户,非常繁琐。但是如果交给一个大范围的管理者,比如小区的传达室,那么事情会变得非常简单。事件委托就类似这种原理,我页面中有很多按钮,如果不使用事件委托,我只能在每个按钮上注册事件。非常麻烦。但如果我把事件注册在一个大范围的div(假设所有的按钮都在这个div中),那么我只要注册一次事件,就可以处理所有按钮(只要按钮包含在上述div中)事件的响应了

    53:CSS3新增了很多的属性,下面一起来分析一下新增的一些属性:

    1.CSS3边框:

    · border-radius:CSS3圆角边框。在 CSS2 中添加圆角矩形需要技巧,我们必须为每个圆角使用不同的图片,在 CSS3 中,创建圆角是非常容易的,在 CSS3 中,border-radius 属性用于创建圆角。border:2px solid;

    · box-shadow:CSS3边框阴影。在 CSS3 中,box-shadow 用于向方框添加阴影。box-shadow:10px 10px 5px #888888;

    · border-image:CSS3边框图片。通过 CSS3 的 border-image 属性,您可以使用图片来创建边框。border-image:url(border.png) 30 30 round;

    2.CSS3背景:

    · background-size: 属性规定背景图片的尺寸。在 CSS3 之前,背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中,可以规定背景图片的尺寸,这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。如果以百分比规定尺寸,那么尺寸相对于父元素的宽度和高度。

    · background-origin :属性规定背景图片的定位区域。背景图片可以放置于 content-box、padding-box 或 border-box 区域。

    3.CSS3文字效果:

    · text-shadow:在 CSS3 中,text-shadow 可向文本应用阴影。text-shadow:5px 5px 5px #FFFFFF;

    · word-wrap :单词太长的话就可能无法超出某个区域,允许对长单词进行拆分,并换行到下一行:p{word-wrap:break-word;}

    4.CSS3 2D转换:

    transform:通过 CSS3 转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。

    · translate():元素从其当前位置移动,根据给定的 left(x 坐标) 和 top(y 坐标) 位置参数:transform:translate(50px,100px);值 translate(50px,100px) 把元素从左侧移动 50 像素,从顶端移动 100 像素。

    · rotate():元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。transform:rotate(30deg);值 rotate(30deg) 把元素顺时针旋转 30 度。

    · scale():元素的尺寸会增加或减少,根据给定的宽度(X 轴)和高度(Y 轴)参数:transform:scale(2,4);值 scale(2,4) 把宽度转换为原始尺寸的 2 倍,把高度转换为原始高x() 5.CSS3 3D转换:

    · rotateX():元素围绕其 X 轴以给定的度数进行旋转。transform:rotateX(120deg);

    · rotateY():元素围绕其 Y 轴以给定的度数进行旋转。transform:rotateY(120deg);

    6.CSS3 过渡:当元素从一种样式变换为另一种样式时为元素添加效果。

    7.CSS3动画:通过 CSS3,我们能够创建动画,这可以在许多网页中取代动画图片、Flash 动画以及 JavaScript。

    8.CSS3多列:

    · column-count:属性规定元素应该被分隔的列数。

    · column-gap:属性规定列之间的间隔。

    · column-rule :属性设置列之间的宽度、样式和颜色规则。

    9.CSS3用户界面:

    · resize:属性规定是否可由用户调整元素尺寸。

    · box-sizing:属性允许您以确切的方式定义适应某个区域的具体内容。

    · outline-offset :属性对轮廓进行偏移,并在超出边框边缘的位置绘制轮廓。

    54:从输入url到显示页面,都经历了什么

    第一步:客户机提出域名解析请求,并将该请求发送给本地的域名服务器。

    第二步:当本地的域名服务器收到请求后,就先查询本地的缓存,如果有该纪录项,则本地的域名服务器就直接把查询的结果返回。

    第三步:如果本地的缓存中没有该纪录,则本地域名服务器就直接把请求发给根域名服务器,然后根域名服务器再返回给本地域名服务器一个所查询域(根的子域)的主域名服务器的地址。
    第四步:本地服务器再向上一步返回的域名服务器发送请求,然后接受请求的服务器查询自己的缓存,如果没有该纪录,则返回相关的下级的域名服务器的地址。
    第五步:重复第四步,直到找到正确的纪录

    2种解释:

    一般会经历以下几个过程:

    1、首先,在浏览器地址栏中输入url

    2、浏览器先查看浏览器缓存-系统缓存-路由器缓存,如果缓存中有,会直接在屏幕中显示页面内容。若没有,则跳到第三步操作。

    3、在发送http请求前,需要域名解析(DNS解析)(DNS(域名系统,Domain Name System)是互联网的一项核心服务,它作为可以将域名和IP地址相互映射的一个分布式数据库,能够使人更方便的访问互联网,而不用去记住IP地址。),解析获取相应的IP地址。

    4、浏览器向服务器发起tcp连接,与浏览器建立tcp三次握手(TCP即传输控制协议。TCP连接是互联网连接协议集的一种。)

    5、握手成功后,浏览器向服务器发送http请求,请求数据包

    6、服务器处理收到的请求,将数据返回至浏览器

    7、浏览器收到HTTP响应

    8、读取页面内容,浏览器渲染,解析html源码

    9、生成Dom树、解析css样式、js交互

    10、客户端和服务器交互

    11、ajax查询

    55:对<meta></meta>标签有什么理解

    什么是meta标签?

    引自下W3school的定义说明一下。

    元数据(metadata)是关于数据的信息。

    标签提供关于 HTML 文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。

    典型的情况是,meta 元素被用于规定页面的描述、关键词、文档的作者、最后修改时间以及其他元数据。

    标签始终位于 head 元素中。

    元数据可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

    其实对上面的概念简单总结下就是:<meta> 标签提供关于 HTML 文档的元数据。它不会显示在页面上,但是对于机器是可读的。可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。

    meta的作用

    meta里的数据是供机器解读的,告诉机器该如何解析这个页面,还有一个用途是可以添加服务器发送到浏览器的http头部内容

    56:new操作符到底到了什么

    先看代码

    [javascript] view plain copy

    1. var Func=function(){  

    2. };  

    3. var func=new Func ();  

    new共经过了4几个阶段

    1、创建一个空对象

    [javascript] view plain copy

    1. varobj=new Object();  

    2、设置原型链

    [javascript] view plain copy

    1. obj.__proto__= Func.prototype;  

    3、让Func中的this指向obj,并执行Func的函数体。

    [javascript] view plain copy

    1. var result =Func.call(obj);  

    4、判断Func的返回值类型:

    如果是值类型,返回obj。如果是引用类型,就返回这个引用类型的对象。

    [javascript] view plain copy

    1. if (typeof(result) == "object"){  

    2.   func=result;  

    3. }  

    4. else{  

    5.     func=obj;;  

    6. }  

    57:h5新特性

    HTML5新特性 —— 新特性
    (1)新的语义标签和属性
    (2)表单新特性
    (3)视频和音频
    (4)Canvas绘图
    (5)SVG绘图
    (6)地理定位
    (7)拖放API
    58:vue的生命周期

     

     

    58:请写出你对闭包的理解,并列出简单的理解

    使用闭包主要是为了设计私有的方法和变量。闭包的优点是可以避免全局变量的污染,缺点是闭包会常驻内存,会增大内存使用量,使用不当很容易造成内存泄露。

    闭包有三个特性:

    1.函数嵌套函数 

    2.函数内部可以引用外部的参数和变量 

    3.参数和变量不会被垃圾回收机制回收

     

    59:display none visibility hidden区别?

    1.display:none是彻底消失,不在文档流中占位,浏览器也不会解析该元素;visibility:hidden是视觉上消失了,可以理解为透明度为0的效果,在文档流中占位,浏览器会解析该元素;

    2.使用visibility:hidden比display:none性能上要好,display:none切换显示时visibility,页面产生回流(当页面中的一部分元素需要改变规模尺寸、布局、显示隐藏等,页面重新构建,此时就是回流。所有页面第一次加载时需要产生一次回流),而visibility切换是否显示时则不会引起回流。

    60:JavaScript中如何检测一个变量是一个String类型?请写出函数实现

    typeof(obj) === "string"

    typeof obj === "string"

    obj.constructor === String

    61:如何理解闭包?

    1、定义和用法:当一个函数的返回值是另外一个函数,而返回的那个函数如果调用了其父函数内部的其它变量,如果返回的这个函数在外部被执行,就产生了闭包。

    2、表现形式:使函数外部能够调用函数内部定义的变量。

    3、实例如下:

    (1)、根据作用域链的规则,底层作用域没有声明的变量,会向上一级找,找到就返回,没找到就一直找,直到window的变量,没有就返回undefined。这里明显count 是函数内部的flag2 的那个count 。

    var count=10;   //全局作用域 标记为flag1function add(){

        var count=0;    //函数全局作用域 标记为flag2

        return function(){

            count+=1;   //函数的内部作用域        alert(count);

        }

    }var s = add()

    s();//输出1

    s();//输出2

    4、变量的作用域

    要理解闭包,首先必须理解Javascript特殊的变量作用域。

    变量的作用域分类:全局变量和局部变量。

    特点:

    1、函数内部可以读取函数外部的全局变量;在函数外部无法读取函数内的局部变量。

    2、函数内部声明变量的时候,一定要使用var命令。如果不用的话,你实际上声明了一个全局变量!

     5、使用闭包的注意点

    1)滥用闭包,会造成内存泄漏:由于闭包会使得函数中的变量都被保存在内存中,内存消耗很大,所以不能滥用闭包,否则会造成网页的性能问题,在IE中可能导致内存泄露。解决方法是,在退出函数之前,将不使用的局部变量全部删除。

    2)会改变父函数内部变量的值。所以,如果你把父函数当作对象(object)使用,把闭包当作它的公用方法(Public Method),把内部变量当作它的私有属性(private value),这时一定要小心,不要随便改变父函数内部变量的值。

    62:谈谈垃圾回收机制方式及内存管理

    回收机制方式

    1、定义和用法:垃圾回收机制(GC:Garbage Collection),执行环境负责管理代码执行过程中使用的内存。

    2、原理:垃圾收集器会定期(周期性)找出那些不在继续使用的变量,然后释放其内存。但是这个过程不是实时的,因为其开销比较大,所以垃圾回收器会按照固定的时间间隔周期性的执行。

    3、实例如下:

    function fn1() {

        var obj = {name: 'hanzichi', age: 10};

    }

    function fn2() {

        var obj = {name:'hanzichi', age: 10};

       return obj;

    }var a = fn1();var b = fn2();

    fn1中定义的obj为局部变量,而当调用结束后,出了fn1的环境,那么该块内存会被js引擎中的垃圾回收器自动释放;在fn2被调用的过程中,返回的对象被全局变量b所指向,所以该块内存并不会被释放。

     4、垃圾回收策略:标记清除(较为常用)和引用计数。

    标记清除:

      定义和用法:当变量进入环境时,将变量标记"进入环境",当变量离开环境时,标记为:"离开环境"。某一个时刻,垃圾回收器会过滤掉环境中的变量,以及被环境变量引用的变量,剩下的就是被视为准备回收的变量。

      到目前为止,IE、Firefox、Opera、Chrome、Safari的js实现使用的都是标记清除的垃圾回收策略或类似的策略,只不过垃圾收集的时间间隔互不相同。

    引用计数:

      定义和用法:引用计数是跟踪记录每个值被引用的次数。

      基本原理:就是变量的引用次数,被引用一次则加1,当这个引用计数为0时,被视为准备回收的对象。

    63:判断一个字符串中出现次数最多的字符,统计这个次数

    var str = 'asdfssaaasasasasaa';

    var json = {};

    for (var i = 0; i < str.length; i++) {

        if(!json[str.charAt(i)]){

           json[str.charAt(i)] = 1;

        }else{

           json[str.charAt(i)]++;

        }

    };var iMax = 0;var iIndex = '';for(var i in json){

        if(json[i]>iMax){

             iMax = json[i];

             iIndex = i;

        }

    }        console.log('出现次数最多的是:'+iIndex+'出现'+iMax+'次');

    64、$(document).ready()方法和window.onload有什么区别?

     (1)、window.onload方法是在网页中所有的元素(包括元素的所有关联文件)完全加载到浏览器后才执行的。

     (2)、$(document).ready() 方法可以在DOM载入就绪时就对其进行操纵,并调用执行绑定的函数。

    65、 jquery中$.get()提交和$.post()提交有区别吗?

    相同点:都是异步请求的方式来获取服务端的数据;

    异同点:

    1、请求方式不同:$.get() 方法使用GET方法来进行异步请求的。$.post() 方法使用POST方法来进行异步请求的。

    2、参数传递方式不同:get请求会将参数跟在URL后进行传递,而POST请求则是作为HTTP消息的实体内容发送给Web服务器的,这种传递是对用户不可见的。

    3、数据传输大小不同:get方式传输的数据大小不能超过2KB 而POST要大的多

    4、安全问题: GET 方式请求的数据会被浏览器缓存起来,因此有安全问题。

    66、jQuery的事件委托方法bind 、live、delegate、on之间有什么区别?(常见)

    (1)、bind 【jQuery 1.3之前】

    定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数;

    语法:bind(type,[data],function(eventObject));

    特点:

    (1)、适用于页面元素静态绑定。只能给调用它的时候已经存在的元素绑定事件,不能给未来新增的元素绑定事件。

    (2)、当页面加载完的时候,你才可以进行bind(),所以可能产生效率问题。

    实例如下:$( "#members li a" ).bind( "click", function( e ) {} );

    (2)、live 【jQuery 1.3之后】

    定义和用法:主要用于给选择到的元素上绑定特定事件类型的监听函数;

    语法:live(type, [data], fn);

    特点:

    (1)、live方法并没有将监听器绑定到自己(this)身上,而是绑定到了this.context上了。

    (2)、live正是利用了事件委托机制来完成事件的监听处理,把节点的处理委托给了document,新添加的元素不必再绑定一次监听器。

    (3)、使用live()方法但却只能放在直接选择的元素后面,不能在层级比较深,连缀的DOM遍历方法后面使用,即$(“ul”").live...可以,但$("body").find("ul").live...不行; 

    实例如下:$( document ).on( "click", "#members li a", function( e ) {} );

    (3)、delegate 【jQuery 1.4.2中引入】

    定义和用法:将监听事件绑定在就近的父级元素上

    语法:delegate(selector,type,[data],fn)

    特点:

    (1)、选择就近的父级元素,因为事件可以更快的冒泡上去,能够在第一时间进行处理。

    (2)、更精确的小范围使用事件代理,性能优于.live()。可以用在动态添加的元素上。

    实例如下:

    $("#info_table").delegate("td","click",function(){/*显示更多信息*/});

    $("table").find("#info").delegate("td","click",function(){/*显示更多信息*/});

    (4)、on 【1.7版本整合了之前的三种方式的新事件绑定机制】

    定义和用法:将监听事件绑定到指定元素上。

    语法:on(type,[selector],[data],fn)

    实例如下:$("#info_table").on("click","td",function(){/*显示更多信息*/});参数的位置写法与delegate不一样。

    说明:on方法是当前JQuery推荐使用的事件绑定方法,附加只运行一次就删除函数的方法是one()。

     总结:.bind(), .live(), .delegate(),.on()分别对应的相反事件为:.unbind(),.die(), .undelegate(),.off()

    67、px和em的区别(常见)

     

    相同点:px和em都是长度单位;

    异同点:px的值是固定的,指定是多少就是多少,计算比较容易。em得值不是固定的,并且em会继承父级元素的字体大小。
    浏览器的默认字体高都是16px。所以未经调整的浏览器都符合: 1em=16px。那么12px=0.75em, 10px=0.625em。

    68、浏览器的内核分别是什么?

    IE: trident内核

    Firefox:gecko内核

    Safari:webkit内核

    Opera:以前是presto内核,Opera现已改用Google Chrome的Blink内核

    Chrome:Blink(基于webkit,Google与Opera Software共同开发)

    69、什么叫优雅降级和渐进增强?(常见)

    渐进增强 progressive enhancement:
    针对低版本浏览器进行构建页面,保证最基本的功能,然后再针对高级浏览器进行效果、交互等改进和追加功能达到更好的用户体验。

    优雅降级 graceful degradation:
    一开始就构建完整的功能,然后再针对低版本浏览器进行兼容。

    区别:

    a. 优雅降级是从复杂的现状开始,并试图减少用户体验的供给

    b. 渐进增强则是从一个非常基础的,能够起作用的版本开始,并不断扩充,以适应未来环境的需要

    c. 降级(功能衰减)意味着往回看;而渐进增强则意味着朝前看,同时保证其根基处于安全地带

    70、sessionStorage 、localStorage 和 cookie 之间的区别(常见)

     共同点:用于浏览器端存储的缓存数据

    不同点:

    (1)、存储内容是否发送到服务器端:当设置了Cookie后,数据会发送到服务器端,造成一定的宽带浪费;

            web storage,会将数据保存到本地,不会造成宽带浪费;

    (2)、数据存储大小不同:Cookie数据不能超过4K,适用于会话标识;web storage数据存储可以达到5M;

    (3)、数据存储的有效期限不同:cookie只在设置了Cookid过期时间之前一直有效,即使关闭窗口或者浏览器;

            sessionStorage,仅在关闭浏览器之前有效;localStorage,数据存储永久有效;

    (4)、作用域不同:cookie和localStorage是在同源同窗口中都是共享的;sessionStorage不在不同的浏览器窗口中共享,即使是同一个页面;

     

     

     

    展开全文
  • 学习前端,首先要学习的html+css,今天分享的这套教程,是一套前端入门教程,零基础都能学习哦!并且还有品优购项目教程!此教程重点讲解了常见的HTML5标签,CSS3最常用的样式,最后站在实际开发的角度讲解一个PC端...
  • 前端教程:如何实现前端录音功能

    千次阅读 2018-09-04 13:30:37
    前端实现录音有两种方式,一种是使用MediaRecorder,另一种是使用WebRTC的getUserMedia结合AudioContext,MediaRecorder出现得比较早,只不过Safari/Edge等浏览器一直没有实现,所以兼容性不是很好,而WebRTC已经...
  • 前端教程文档汇总

    2018-10-26 13:27:25
    从这开始前端开始入门 2.0 程序搜索:百度,谷歌,StackOverflow,Code Compare,codeproject codeproject:https://www.codeproject.com/ 2.1 ES6文档: 2.2 React文档: 2.3 Redux(作为React状态管理的进阶版) ...
  • 免费 Web前端教程

    2020-10-21 14:36:36
    免费 Web前端教程免费 Web前端教程免费 Web前端教程免费 Web前端教程免费 Web前端教程免费 Web前端教程免费 Web前端教程免费 Web前端教程免费 Web前端教程免费 Web前端教程 免费 Web前端教程 免费 Web前端教程 免费 ...
  • 传智最新第36期前端教程,包含源码、基础讲解和实战视频,外加前端面试真题赠送,详情见百度网盘
  • VUE是目前最火的前端框架之一,就业薪资很高,本课程教您如何快速学会VUE并应用到实战,教你如何解决内存泄漏,常用UI库的使用,自己封装组件,正式上线白屏问题,性能优化等。对正在工作当中或打算学习VUE高薪就业...
  • 很多初学Web前端的人都会问,想要成为一名Web前端开发...下面,Web前端教程就分享一份Web前端开发培训学习路线,帮助大家更好的学习Web前端。 先来看看想要找到一份Web前端工作你需要掌握哪些内容:首先是HTML、C...
  • 讲给Android程序员看的前端教程(40)——后会有期

    千次阅读 多人点赞 2017-12-04 10:01:44
    坦白地说,很多做移动端和后台的开发人员都不太喜欢(甚至是不屑)写前端的东西,尤其是CSS这部分。他们觉得这部分没有什么含量,也没啥逻辑可言,无非是调个样式罢了,并不涉及软件开发的核心技术。其实,这个想法...
  • WEB前端全套教程公众号内回复:前端教程即可获取下载链接 下载资源啦 “不要拿小人的错误来惩罚自己,不要在这些微不足道的事情上折磨浪费自己的宝贵时间。行走在岁月的...
  • 前端技术学无止境、日新月异,以下是摘自github上的一份前端资源汇总。附上git地址:https://github.com/nicejade/Front-end-tutorial。 综合类 综合类地址 前端知识体系 ...前端知识结构 ...
  • css position:fixed相对窗口,不会滚动|absolute相对父元素|sticky先正常,后对窗口 overflow:| color:rgba(1,1,1,1) vue - 可以通过v-show绑定data中的值来实现弹窗效果...
  • w3school前端教程合集

    2017-04-11 20:53:00
    有关前端开发的w3c教程合集。 http://caibaojian.com/w3school/ 地图 ajax教程 Canvas教程 CSS教程 CSS3教程 CSS3选择器 CSS参考手册 DHTML教程 HTML教程 HTML5教程 HTML5音频教程 HTML DOM教程 ...
  • 好程序员web前端教程分享web前端基础知识,想要成为一名合格的Web前端工程师你必须要一项一项的掌握技术,更需要扎实的基础知识下面就为大家介绍一下,web前端中的常见技术名称及所实现的功能。  1、AJAX  ...
  • HTML5前端教程分享:前端模块化开发

    千次阅读 2018-10-17 16:47:17
    1. 命名冲突 首先从一个简单的习惯开始。 由于以前一直做 JavaEE 开发的缘故,在 JavaScript 开发中,我已经习惯将项目中的一些通用功能抽象出来,形成一个个的独立函数,以便于实现代码复用,如: ...
  • jeecgboot升级前端教程

    2020-09-07 10:30:56
    2修改前端的配置文件vue.config.js里的target:,改成要连接的地址 3.执行build命令,生成的东西会在dist里面 4.将dip目录下的文件压缩成xxx.zip(zip为通用解压格式,不用下载解压工具也能解压) 5,使用...
  • 对于零基础的人来说,学习之前一定要想清楚为什么而学习Web前端,给自己一个清晰的定位,摆正心态,如果还不清楚学习路线,可以参考好程序员Web前端教程为大家总结出一套学习路径。 1、前端页面重构。主要内容为...
  • 在HTML5新增了canvas标签用于绘制图形,比如:文本、几何图形、路径、图片等等。该标签和其他HTML标签比起来没有多大的不同,除了指定常见的id、class、style等通用属性外,...嗯哼,我们先来看一个canvas的入门示例:
  • 在JavaScript中函数本身也是一个Function实例。请看如下示例:

空空如也

1 2 3 4 5 ... 20
收藏数 16,134
精华内容 6,453
热门标签
关键字:

前端教程