10 个 Github 存储库助您掌握 Javasc

10 个 Github 存储库助您掌握 Javascript

编今天给大家介绍 10 个公开的 Github 存储库，它们将使您的 Javascript 技能真正提升到更高的水平！

无论您是该语言的初学者，还是已经使用 JS 开发了一段时间，这里都有适合每个人的内容。事不宜迟，赶紧学习吧。

1.每个 JavaScript 开发人员都应该知道的 33 个概念

要成为一位优秀的JavaScript开发人员，这是您必须要掌握的33个概念，每个概念都有大量学习资源可供进一步了解。

https://github.com/leonardomso/33-js-concepts

2. JavaScript 问题及其解释

从基础到高级：测试您对 JavaScript 的了解程度，刷新一下您的知识或为编程面试做准备！

https://github.com/lydiahallie/javascript-questions

3. 你不知道的JavaScript

如果你想彻底学习这门语言，那么这本书小编非常推荐。这是一系列书籍，旨在让你从新手变成经验丰富的开发人员，对 Javascript 幕后工作原理有深入的了解。

它深入探讨了 Javascript 语言的核心机制，并且可以完全免费在线获取。

https://github.com/getify/You-Dont-Know-JS

4.JavaScript 样式指南

它包含一套使用 Javascript 编写代码的指南和最佳实践，最初由 Airbnb 的工程团队编写，涵盖了 Javascript 的各个方面并针对大量主题提供了详细的建议。小编还是非常推荐大家去看一看！

https://github.com/airbnb/javascript

5.技术面试手册

不是每个人都有时间做几百道 LeetCode 题目。这是专门为没有时间的工程师精心挑选的免费技术面试准备材料，如果你考虑去国外工作那么可以好好看看这个做做准备！

https://github.com/yangshun/tech-interview-handbook

6.JavaScript 为初学者实现算法和数据结构。

算法是每个程序员都必须要掌握的能力，这个库它专注于在 Javascript 中实现各种数据结构和算法，从基本的排序和搜索到复杂的动态规划。您将找到每个代码片段的详细解释，赶紧学习起来吧！

https://github.com/TheAlgorithms/Javascript

7. 收录众多的JavaScript 库

收集了很多的浏览器端 JavaScript 库、资源和工具，开发中总有一个能够帮助您

https://github.com/sorrycc/awesome-javascript?tab=readme-ov-file#component-management

8.wtf.js

是不是在使用 Javascript 进行开发，您会时不时地遇到一些奇怪的事情，Javascript 充满了这些有时会让人非常烦恼的小问题，那么这个库就能很好的帮助你。它的主要目的是收集一些很奇怪的例子，并尽可能解释它们的工作原理。

https://github.com/denysdovhan/wtfjs?tab=readme-ov-file#-motivation

9.很有效的工作笔记

如果你想成为一个很高效的工程师，或者别的方面的事情。那么掌握一个有效科学的方法去锻炼自己是必不可少的，希望这篇笔记能对你有所帮助

https://gist.github.com/rondy/af1dee1d28c02e9a225ae55da2674a6f

10.免费的编程书籍

无论您是看了多少课程、浏览了多少编码视频，书籍仍然是学习新知识的黄金标准。

https://github.com/EbookFoundation/free-programming-books

探索前端技术的无限可能！关注我们的微信公众号【代码搬运工】，获取最新国内外前端资讯、面试技巧及实用办公工具分享，助你职场升级，每日进步！

TML是谁发明的？

1.HTML的全称是什么？

超文本标记语言（Hyper Text Markup Language)，是一种用于创建网页的标准标记语言。

2.谁发明的？

是由Tim Berners-Lee发明的。

HTML 起手应该写什么？

<!DOCTYPE html>
  <!--文档类型为html 此行必须为第一行 前面空一行也会报错-->
  <html lang="en">
    <!--html标签 en是英语 zh-CN是中文-->
    
    <head>
                 <meta charset="UTF-8">
                   <!--文件的字符编码-->
                   <meta name="viewport" content="width=device-width, initial-scale=1.0">
                     <!--content里的内容代表禁止缩放，兼容手机-->
                     <meta http-equiv="X-UA-Compatible" content="ie=edge">
                       <!--content里的内容表示让ie使用最新的内容-->
                       <title>Document</title>
    </head>

常用的表章节的标签有哪些，分别是什么意思?

h1-h6 标题
section 章节
article 文章
p 段落
header 头部
footer 脚部
main 主要内容
aside 旁支内容
div 划分，表示一个区块

全局属性有哪些？

class 用来对网页元素进行分类。如果不同元素的class属性值相同，就表示它们是一类的。
contentteditable HTML 网页的内容默认是用户不能编辑，contenteditable属性允许用户修改内容。
hidden hidden是一个布尔属性，表示当前的网页元素不再跟页面相关，因此浏览器不会渲染这个元素，所以就不会在网页中看到它。
id id属性是元素在网页内的唯一标识符
style 用来指定当前元素的 CSS 样式
tabindex 网页通常使用鼠标操作，但是某些情况下，用户可能希望使用键盘，或者只有键盘可以用。因此，浏览器允许使用 Tab 键，遍历网页元素。也就是说，只要不停地按下按钮 Tab 键，网页的焦点就会从一个元素转移到另一个元素，选定焦点元素以后，就可以进行下一步操作，比如按下回车键访问某个链接，或者直接在某个输入框输入文字。
title 用来为元素添加附加说明。大多数浏览器中，鼠标悬浮在元素上面时，会将title属性值作为浮动提示，显示出来。

常用的内容标签有哪些，分别是什么意思?

ol+li 有序列表
ul+li 无序列表
dl+dt+dd 自定义的列表
pre 显示文本中的空白符号
hr 分割线
br 换行
a 链接通过<a>标签表示，用户点击后，浏览器会跳转到指定的网址。
em <em>是一个行内标签，表示强调（emphasize），浏览器会以斜体显示它包含的内容。
strong <strong>是一个行内元素，表示它包含的内容具有很强的重要性，需要引起注意。浏览器会以粗体显示内容。
code 呈现一段计算机的代码，各类语言。
quote 行内的引用
blockquote 块的引用

端开发比设计和程序都要难做在于，要做好前端需要对设计和程序都有些许了解，当然这个只是额外需要了解的，主要还需要精通html，css，javascript，jQuery，响应式布局，移动网页布局等经验，当然时刻关注web前端技术也不可少，下面介绍了15款流行的响应式css框架。

前端开发并不是一个容易的工作，不仅需要掌握HTML、CSS和JavaScript，针对不同的浏览器版本和平台，还需要了解如何设计出跨平台的网站。如今随着响应式设计的流行，前端开发变得越来越困难，且花费的时间更长。

本文收集了15个响应式前端开发框架，可以帮助前端开发人员大大简化开发过程。针对每个框架，文中均指出了它所包含的UI组件及JavaScript插件。几乎所有的框架都采用了响应式网格系统。

使用这些前端框架，有如下好处：

跨浏览器。这一点已被证实。
一致性。UI组件，如导航、按钮、标签、表单、下拉框、表格……，在设计上保持风格一致。
快速开发。你可以快速、容易地构建布局。这些框架都配有详细的说明文档。
响应式。所有CSS组件及JavaScript插件可以很好地从桌面过渡到移动设备上。

快切css

快切css是由切图网推出的一款响应式css框架——Quickcss，最早10年就推出了，算是国内css框架鼻祖了，后经过不断衍化，逐步完善了不足之处，它的最大特色在于简单易用，和兼容性强，兼容ie6+，firefox，chrome等浏览器和移动设备。

http://kuai.qietu.com

InK

Ink为一个界面工具包，用于快速开发Web界面，具有易于使用、易于扩展特点。它可以为构建布局提供解决方案，可以展示普通的界面元素，可以实现以内容为中心、对用户友好的交互方式。

HTML&CSS：布局、导航、排版、图标、表单、提示框、表格
JS：Gallery、表格、树视图、排序列表、日期选择插件、制表符、表单验证及一些行为（停靠、折叠、关闭）
其他：Sass Mixins

GroundworkCSS Beta

GroundworkCSS是一个基于Sass预处理器的开源项目，主要用于快速构建响应式Web应用程序。拥有一个灵活的、可嵌套的网格系统，可以创建适应多种浏览设备的布局。GroundworkCSS还提供多种UI 组件，如导航、按钮、图标、表单、Tabs、对话框、工具提示等等。

HTML&CSS：网格、布局、排版、按键、标题、表单、图标、社交图标、响应式文本、对话框、工具提示
JS：导航、制表符（Tab）、提示框、Cycle2
其他：Sass Mixins

Ivory

这是一个灵活、强大的响应式Web框架，使Web开发更快速、更简单。

HTML&CSS：网格、排版、表单、按钮、提示框、页码、面包屑导航（breadcrumb）、列表、表格
JS：提示框、制表符（Tab）、切换开关（Toggle switch）、折叠

ZURB

Foundation由ZURB公司设计，ZURB是一家产品设计公司，位于加州坎贝尔。Foundation为最先进的响应式前端开发框架，它拥有很多布局模板、CSS样式表及自己开发的优秀JavaScript插件。

HTML&CSS：网格、布局模板、图标字体、响应式表格、SVG格式的社交图标、页码、面包屑导航（breadcrumbs）、侧导航、按键、排版、标签、提示框、面板、价格表、进度栏、表格、缩略图
JS：下拉按钮、拆分按钮、转换开关、Flex视频、灯箱、下拉、响应式布局（通过转换图片大小来实现）、旅游导航、麦哲伦全局导航（Magellan Sticky Nav）、Orbit图片滑动幻灯片插件等
其他：可定制皮肤表单（Custom Skinned Forms）、SCSS Mixin

Grumby

Gumby 2基于Sass开发。Sass为功能强大的CSS预处理器，利用它可以快速开发Gumby。

HTML&CSS：网格、表单、按钮、导航、标签、Entypo图标
JS：下拉、浮窗、制表符（Tab）、开关与转换（Toggles & Switches）
其他：可定制皮肤表单（Custom Skinned Forms）、SASS和Compass

HTML KickStart

该框架集合了HTML5、CSS和JavaScript，帮助开发人员快速开发Web产品。它覆盖了所有UI组件，同时也包含一些有用的JavaScript插件。

HTML&CSS：网格、排版按钮、列表、表格、图标、面包屑导航、图片、表单
JS：菜单、代码高亮插件、制表符（Tab）、幻灯片播放、表单验证
其他：CSS帮助文档

Maxmertkit

Maxmertkit拥有完整的文档，包含大量实例，并且提供了拖拽生成代码的功能。

HTML&CSS：网格、布局、徽章、按钮、表单、图标、标签、菜单、进度栏、表格、下拉、工具提示
JS：按钮、旋转木马、通知、弹出框、滚动条、制表符（Tab）
其他： Sass、Coffee脚本语言

Twitter Bootstrap

大家对Twitter Bootstrap已十分熟悉了。凭借全面的UI组件、易用的网格和组件，Bootstrap已成为众多设计者和开发者最喜欢的快速开发工具。现在已经有很多第三方Bootstrap程序和JavaScript插件可供使用。

HTML&CSS：网格、布局、排版、编码、表格、表单、按键、图片、图标、按钮组、导航、面包屑导航、页码、标签、徽章、缩略图、提示框、进度栏
JS：模态窗口（Modals）、提示效果（Tool Tips）、“泡芙”效果（Popovers）、滚动监控（Scrollspy）、旋转木马（Carousel）、输入提示（Typeahead）等等。
其他：定制器（Customizer）、 LESS CSS

Skeleton

Skeleton 是一个小的JS和CSS文件集合，可帮你快速开发漂亮的网站，适合各种屏幕设备，包括手机。Skeleton基于960 Grid开发，是一个UI框架。

HTML&CSS：GRid、排版、按钮、表单、媒体查询（Media Queries）

Kube

Kube是一款最小化的，支持响应式的前端框架，包括一个简洁的CSS文件，用于方便地创建响应式布局，包括了两个JS文件来完成Tab以及页面的按钮操作。

HTML&CSS：排版、网格、表单、表格、按钮、导航、图标
JS：按钮、制表符（Tab）
其他： LESS CSS

Helium

Helium是一个前端响应式Web框架，使用HTML5、CSS3快速制作原型以及开发产品。Helium很像Twitter Bootstrap和ZURB Foundation，事实上，Helium使用了两者不少的代码。但与这两个框架不同的是，Helium设计更加轻量级，而且更容易修改。Helium只有30KB左右，而Bootstrap有100KB，ZURB有200多KB。

HTML&CSS：网格、按钮、排版、表单
JS：下拉、表单验证
其他：Sass、Compass

The Markup Framework

Markup是一套集布局、小组件、UI组件和字体排版样式为一体的框架。它可以作为你设计自己网站的起点。

HTML&CSS：布局、网格、排版、表单、按钮、面包屑导航、导航列表、导航菜单
JS：没有JavaScripts，只有单纯的CSS

Topcoat

TopCoat是一套免费的开源UI元素类库，整套类库不使用任何JavaScript，而是使用CSS和HTML来生成。

HTML&CSS：图标、字体、按键、面包屑导航、表单、下拉、滑动开关、选择、滚动条、切换按钮
JS：没有JavaScripts，只有单纯的CSS

PureCSS

Pure是一个相当小的框架，压缩及最小化后仅有5.7KB。它没有使用任何JavaScript，只是HTML和CSS。该CSS框架为响应式布局，采用模块化结构，每个模块的样式可以单独使用。

HTML&CSS：网格、排版、表单、按键、表格、菜单
JS：没有JavaScripts，只有单纯的CSS
其他：程序皮肤制作工具（Skin Builder）、YU 库。

结论

根据你的需要，选择可以与设计相匹配的框架。我们不应该根据框架来构建网站，因为它会很大程度上限制设计者的思维。

如果前端设计/布局不是那么重要，那么我们可以选择使用某一框架。（编译：陈秋歌/责编：夏梦竹）

原文来自：queness.com

切图网是国内网页前端开发服务领跑者，提供专业的网页切图前端开发服务。

在线咨询

上一篇：19.前端知识：用React实现一款滑动验证码组件
下一篇：使用WordPress的WP-MAIL-SMTP插件

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

10 个 Github 存储库助您掌握 Javasc

您的项目需求