前端开发入门
关注
分享
扫一扫
文章平均质量分 82
「已注销」
先求知，然后求思，再而求变，进而求行。
展开
-
基本响应式设计概念
响应式设计的艺术设置视窗当我们制作网页的时候，可能内容会溢出界面，或者我们需要放大页面才能看清内容，这就和我们设置视窗（浏览器能够显示内容的区域）有关。如果没有定义视图端口，浏览器会自己决定视图尺寸，这会导致网页发生一些变化。在 <head> 标签中添加 <viewport> 标签，可以让浏览器知道我们的意图，避免左右滚动。如下内容：<meta nam...原创 2018-08-03 17:26:08 · 1280 阅读 · 0 评论 -
前端 ES6 语法-2
For 循环系列for...of 循环是最新添加到 JavaScript 循环系列中的循环。它结合了其兄弟循环形式 for 循环和 for...in 循环的优势，可以循环任何可迭代（也就是遵守可迭代协议）类型的数据。默认情况下，包含以下数据类型：String、Array、Map 和 Set，注意不包含 Object 数据类型（即 {}）。默认情况下，对象不可迭代。for 循环const...原创 2018-08-17 17:08:36 · 349 阅读 · 0 评论 -
与远程仓库保持同步
创建 Pull RequestPull Request（拉取请求）是向初始或源仓库的维护者发出的请求，以让其将你在他们项目的 fork 上所做的更改应用在他们的项目中。你请求他们拉取你做的更改。你需要完成一些操作：你必须 fork 源仓库将你的 fork 克隆到你的计算机进行一些 commit（最好是在特性分支上！）将 commit 推送回你的 fork创建一个新的 Pull R...原创 2018-08-30 17:49:27 · 1215 阅读 · 0 评论 -
Git（标签、分支和合并）1
git tag 命令创建标签git tag 命令用来标记特定的 commit 。当添加新的 commit 时，标签不会移动。$ git tag -a beta此命令将：向最近的 commit 添加标签如果提供了 SHA，则向具体的 commit 添加标签注意，在上述命令 (git tag -a v1.0) 中，使用了 -a 选项。该选项告诉 git 创建一个带注释的标...原创 2018-08-27 19:14:35 · 2826 阅读 · 0 评论 -
Mac上Git安装与配置
安装 GitMac OS 实际上已经安装了 Git，但是我们可以重新安装，以便使用最新的版本：https://git-scm.com/downloads下载 Mac 版软件安装 Git 并选择所有默认选项安装完毕后，你应该能够在命令行工具中运行 git。如果显示了使用信息，则一切正常！配置 Mac 的终端我们即将配置终端，以便当我们位于版本控制目录下时，可以显示有用的信...原创 2018-08-28 10:05:56 · 5482 阅读 · 0 评论 -
Git 术语和初次配置
版本控制系统的主要目的是帮助你保留项目的详细历史记录，并且能够在不同的版本上进行工作。保留详细的项目历史记录很重要，因为这样可以看出一段时间内项目的进度。如果需要，你还可以回到项目的某个阶段，并恢复数据或文件。版本控制系统模型包括两大主要类型：集中式模型 - 所有用户都连接到一个中央的主仓库（master repository）分布式模型 - 每个用户都在自己的计算机上拥有完整的仓库...原创 2018-08-21 09:36:21 · 236 阅读 · 0 评论 -
Git（标签、分支和合并）2
合并分支git merge 命令用来在 git 中合并分支：$ git merge &lt;other-branch&gt;发生合并时，git 将：查看将合并的分支查看分支的历史记录并寻找两个分支的 commit 历史记录中都有的单个 commit将单个分支上更改的代码行合并到一起提交一个 commit 来记录合并操作合并有以下两种类型：快进合并 – 要合并的分...原创 2018-08-28 17:36:30 · 2881 阅读 · 0 评论 -
Git命令（init/clone/status）
之前文章讲述了版本控制系统的一些常用术语，在计算机上安装Git，并为 Git 做了一些初始化配置（比如名字和电子邮件），接下来介绍 使用 git init 创建 Git 仓库，使用 git clone 复制现有仓库并使用 git status 来确定仓库的状态。创建仓库在对 Git 仓库进行 commit 或执行任何其他操作之前，需要一个实际存在的仓库。要使用 Git 新建一个仓库，我们将...原创 2018-08-21 18:52:45 · 705 阅读 · 0 评论 -
Git命令（撤销更改）
更改最后一个 commit你已经使用 git commit 命令提交了大量的 commit。现在，借助 –amend 选项，你可以更改最近的 commit。$ git commit --amendgit commit --amend 使你能够包含忘记包含的文件（或文件更改）。你可以执行新的 commit 并更新文件，但是这样就会出现两个 commit 执行完全相同的任务。相反，你可以运...原创 2018-08-29 14:25:04 · 1333 阅读 · 0 评论 -
Git 使用远程仓库
远程仓库什么是远程仓库Git 是一个分布式版本控制系统，这意味着不存在一个主信息仓库。每位开发者使用的都是仓库的一个副本。因此，你可以拥有仓库的一个副本（它包含发布的 commit 和版本历史记录），并且你的朋友也可以拥有相同仓库的一个副本。每个仓库包含的信息与其他副本完全相同，没有哪一个是主要的。在此之前，你可能一直使用的都只是本地仓库。而远程仓库与你的本地 Git 仓库一样，只是它...原创 2018-08-29 19:12:59 · 299 阅读 · 0 评论 -
使用浏览器事件
上篇文章学习了如何添加、删除页面内容，以及为页面内容设置样式。我们需要在 JS 文件中编写 JS 代码。但是如果我们在 JS 文件中编写所有代码，当我们加载页面时，所有更改将立即执行。这篇文章将学习如何根据用户的操作，运行操纵 DOM 的 JS 代码。接下来我们将学习：事件，什么是事件回应事件，如何监听事件并在事件发生时做出回应事件数据，掌握事件中所包含的数据停止事件，防止事件触发...原创 2018-09-04 19:21:31 · 1332 阅读 · 0 评论 -
Fork仓库
在版本控制术语中，如果你 “fork” 一个仓库，则是指复制它。特别是当你 fork 属于别人的仓库时，你将制作他们仓库的完全一样的副本，之后这个副本便变成你的。“fork” 的概念也不同于”克隆”。在克隆仓库时，你也会获得完全一样的仓库副本，但克隆发生在本地计算机上，并且克隆的是远程仓库。当你 fork 仓库时，会创建远程仓库的一份新副本。新副本也是一个远程仓库，但它现在属于你。fork...原创 2018-08-30 14:42:12 · 9876 阅读 · 1 评论 -
JavaScript和DOM
文档对象模型（DOM）使用 JavaScript 创建内容使用浏览器事件性能DOM我们将深入了解文档对象模型 (DOM) 是什么、如何创建 DOM，以及如何使用 JavaScript 来访问它。DOM 代表“文档对象模型”，是一种树状结构，是HTML 文档的表示，反映了元素之间的关系，并包含元素的内容和属性。DOM 不是：JavaScript 语言的一部分...原创 2018-09-02 17:46:42 · 304 阅读 · 0 评论 -
使用JavaScript 创建内容
我们可以编写相应的 DOM 代码，如将返回的元素结果保存到变量中：const nanodegreeCard = document.querySelector('.card');更新现有页面内容元素的内部 HTML每个元素都从元素接口继承属性和方法。这意味着，每个元素都有一个 .innerHTML 属性。这个属性顾名思义，表示元素内容的标记。我们可以使用这个属性来：获取元素...原创 2018-09-03 18:18:03 · 452 阅读 · 0 评论 -
性能
如何衡量代码速度？如何编写合理高效的代码？全面学习 JS 事件循环以及它会如何影响代码编写过程？高效添加页面内容使用循环添加内容for (let i = 1; i <= 200; i++) { const newElement = document.createElement('p'); newElement.textContent = 'This is pa...原创 2018-09-06 17:19:48 · 317 阅读 · 0 评论 -
jQuery入门-DOM操作
jQuery API 文档切换toggleClass() ，该方法既可以添加/删除一个类名，这取决于与元素是否已经有了这个类名。let featured;featured = $('.featured');featured.toggleClass('featured');关于 .toggleClass() 的文档 关于 .next() 的文档 更改属性let navList, ...原创 2018-09-23 14:59:40 · 287 阅读 · 0 评论 -
jQuery入门-DOM/$/选择器
jQuery 就是一个 JS 库，它并不是一门独立的语言。jQuery 存在的原因是纯 JS 操作 DOM 并不方便。我们可以使用 script 标签向网页中引入 jQuery。在服务器上存储 js 代码并通过制定路径引入网页（使用托管的 CDN-内容分发网络上的特定版本 jQuery）。CDN 一般比服务器快很多，也能利用浏览器的缓存特性，在产品中使用 jQuery 的精简版本（min），该...原创 2018-09-19 16:41:05 · 293 阅读 · 0 评论 -
jQuery事件监听
monitorEvents()浏览器事件监听控制或右键单击元素并选择“检查 (Inspect)”。在 javaScript 控制台标签中输入：monitorEvents($0)现在，将鼠标悬停在该元素上时，关注或单击它， 将显示触发事件的名称及其数据。要停止获取该数据，只需在控制台中写入下行：unmonitorEvents($0)monitorEvents() Documentat...原创 2018-09-26 15:35:46 · 14184 阅读 · 0 评论 -
前端 ES6 语法-1
概述 JS 语法的变化和添加JS 函数的更新新的 ES6 内置功能如何将这些更新整合到 JS 项目中JavaScript 编程语言的全新变化，Harmony、ES6 和 ES2015 它们只是同一事物的不同名称，重要的是，这些名称代表 JavaScript 编程语言的更新，经历了一些大刀阔斧的必要改进，随着这些改进，产生了一批新的关键字、编写函数的方法和异步简便方法等等。接下来我们将...原创 2018-08-17 15:19:56 · 2440 阅读 · 0 评论 -
Git命令（查看仓库历史记录）
git log 命令// 终端显示 git log 命令的输出结果zhanghuabin-mac:course-git-blog-project zhanghuabin$ git logcommit a3dc99a197c66ccb87e3f4905502a6c6eddd15b1Author: Richard Kalehoff <richardkalehoff@gmail.com...原创 2018-08-22 19:38:51 · 24094 阅读 · 0 评论 -
Shell指令说明
一开始设计 Unix 系统时，计算机与终端之间的连接速度很慢，因此采用非常简短的命令使用起来速度更快。不仅 shell 是这样，Unix 系统的其他部分（例如 C 编程语言）也是这样。打印echo，打印指令，同 JS 的 console.log 和 Python 的 print。单词前面的 $ 符号表示它是一个 shell 变量。echo $COLUMNS x $LINES // 输...原创 2018-08-19 19:14:33 · 431 阅读 · 0 评论 -
动态式响应模式
概述通过前面的文章我们已经学过如何用响应式思维思考，也就是考虑用户在任何设备上的体验，从最小的屏幕开始，逐步往更大的屏幕推进。当然还要考虑按钮需要足够大。但是响应式设计不只是优化单个元素，接下来我们需要重新审视页面布局的设计，即你像展示哪些信息给你的用户，怎么讲这些信息在页面上排列，找出合适的设计模式更像是一门艺术，而非科学。尝试一些不同的设计模式，最终用它们来设计一个布局很棒的响应式网页...原创 2018-08-05 09:55:56 · 1388 阅读 · 0 评论 -
Bootstrap 框架-排版
概述GitHub上这样介绍 bootstrap：简单灵活可用于架构流行的用户界面和交互接口的 html、css、javascript 工具集。基于 html5、css3 的 bootstrap，具有大量的诱人特性：友好的学习曲线，卓越的兼容性，响应式设计，12列格网，样式向导文档。自定义 JQuery 插件，完整的类库，基于 Less 等。https://getbootstra...原创 2018-08-09 19:38:34 · 1264 阅读 · 0 评论 -
HTML 语法1
Web 简史Web 开发人员使用三种不同的语言来开发网站HTML，超文本标记语言，描述内容和网站的结构。 CSS，样式表，描述网站的样子。 JS（JavaScript），处理所有的交互。HTML 和 CSS 都是标记语言，换句话说，它们只适用于描述的其它文件。JavaScript 完全是一个编程语言，它允许开发人员变更内容以及即时的改变网站的风格。JavaScript 是 ...原创 2018-08-01 17:25:34 · 216 阅读 · 0 评论 -
Bootstrap 框架-表单
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">基础表单表单主要功能是用来与用户做交流的一个网页控件，良好的表单设计能够让网页与用户更好的沟通。表单中常见的元素主要包括：文本输入框、下拉选择框、单选按钮、复选按钮、文本域和按钮等。其中每个控...原创 2018-08-10 15:17:49 · 1083 阅读 · 1 评论 -
Bootstrap 框架-表单（按钮/图像）
Bootstrap 框架的按钮也是一个独立部分，我们同样在不同的版本之中能找到对应的代码：LESS版本：查看源文件 buttons.lessSass版本：查看源文件 _buttons.scss已编译版本：查看源文件 bootstrap.css 文件第1992行～第2353行基本按钮Bootstrap 框架中考虑了不同浏览器的解析差异，进行了比较安全的兼容性处理，使按钮效果在...原创 2018-08-10 17:27:22 · 1120 阅读 · 0 评论 -
前端JS入门-循环/函数
While 循环var start = 0; // 何时开始while (start &amp;lt; 10) { // 何时停止 console.log(start); start = start + 2; // 如何进入下一个项目}For 循环for 循环明确要求定义起始点、结束点和循环的每一个步骤。实际上，如果缺少这三个部分的任一部分，系统都会提示（Uncaught Synt...原创 2018-08-14 18:13:42 · 780 阅读 · 0 评论 -
Bootstrap 框架-网格系统
实现原理网格系统的实现原理非常简单，仅仅是通过定义容器大小，平分 12 份(也有平分成 24 份或 32 份，但 12 份是最常见的)，再调整内外边距，最后结合媒体查询，就制作出了强大的响应式网格系统。Bootstrap 框架中的网格系统就是将容器平分成 12 份。在使用的时候大家可以根据实际情况重新编译 LESS（或 Sass）源码来修改 12 这个数值（也就是换成 24 或 32，当然...原创 2018-08-11 11:53:59 · 328 阅读 · 0 评论 -
Bootstrap 框架-下拉菜单
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">下拉菜单在 Bootstrap 框架中的下拉菜单组件是一个独立的组件，根据不同的版本，它对应的文件：☑ LESS版本：对应的源码文件为 dropdowns.less☑ Sass...原创 2018-08-11 15:22:09 · 2910 阅读 · 0 评论 -
Bootstrap 框架-按钮组组件
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">按钮组也是一个独立的组件，所以可以找到对应的源码文件：☑ LESS 版本：对应的源文件为 buttons.less☑ Sass 版本：对应的源文件为 _buttons.scss☑ ...原创 2018-08-11 17:38:29 · 1776 阅读 · 0 评论 -
CSS语法
CSS 简介CSS 即层叠样式表，是一种标记语言，用来描述网站上各种元素的外观。CSS 的精髓就在于样式，它给了一个网站开发者可以改变网页上各种元素外观的能力。它的另一个好处是把样式和内容分开了，我们想要的页面内容就用 HTML 来写，想要页面内容呈现的样式，就用 CSS 来写。CSS 参考网站：W3C - CSS 教程Mozilla 开发者社区 - CSS 参考css-tric...原创 2018-08-02 17:02:07 · 542 阅读 · 0 评论 -
前端入门优化
响应式设计的一些重要的技能，例如图片、表格和排版。响应式图片加载网页时，平均 60% 以上的流量都来加载图片。响应式表格表格有很多花样，如果表格的列超过一定的数量，那么它很可能会溢出视窗，小屏幕会产生水平滚动条，下面会介绍三种方法来解决这个问题。隐藏列（Hidden columns）当视窗尺寸缩小时，隐藏纵列实质上是根据他们的重要性来进行的。使用不显示的属性（displ...原创 2018-08-07 11:06:50 · 190 阅读 · 0 评论 -
响应式图片-压缩处理工作流
图片压缩会让加载图片占用更少的带宽，同时不影响视觉效果。你可能会考虑到图片质量和大小，对于网上的图片而言，其实只需要考虑大小。使用开发者工具查看网页中图片查看网页中显示的3张图片一样，当我们通过开发者工具查看图片详细信息时，我们发现每张照片原本的大小不一样，这里体现了图片经过了不同的压缩（Compression Level）。而它们的实际像素（Actual(Natural) R...原创 2018-08-07 17:17:48 · 3375 阅读 · 1 评论 -
响应式图片-标记图片
性能现实中移动网络的实际情况是文件请求次数和请求文件的大小同样重要，也就是说我们还需要减少请求图片的次数，而不仅仅是图片文件的大小。我们所谓的延时（latency）是指请求与响应之间存在的延后问题。总之性能是真正响应式设计的基本组成部分。在实践中，这意味着你需要减小文件大小的同时，还要减少请求文件的次数。一种较少图片数据的好办法是压缩图片，或者减少图片的数量。接下来会介绍一些方法来实现无需...原创 2018-08-08 15:04:53 · 291 阅读 · 0 评论 -
前端JS入门-数组/对象
// 创建一个混合数据类型的 `mixedData` 数组var mixedData = [&quot;abcd&quot;, 1, true, undefined, null, &quot;all the things&quot;];但是，混合类型的数组通常作用不大。在大部分情况下，你需要在数组中使用相同类型的元素。你甚至可以在数组中存储数组，创建嵌套数组！// 用三个数组创建 `arraysInArrays` 数组v...原创 2018-08-15 18:48:50 · 794 阅读 · 0 评论 -
完全响应式图片
<img> 标签的各种用法，利用浏览器属性来根据视窗宽度轻松改变图片源，还可以利用 picture 元素更改图片内容，而且图片并不总是必要的，许多可以用符号代替，比如图标字体以及 CSS 样式等。图片作为现代网站开发工作流中一个重要的部分，占据了很大一部分的页面加载、屏幕尺寸，而其构成的因素也十分的多样。响应式设计要求你的图片能够适应任何设备。响应屏幕功能和视图如何为每个...原创 2018-08-08 16:25:46 · 1301 阅读 · 0 评论 -
前端JS入门-数据类型/条件语句
概述HTML 和 CSS 是标记语言。标记语言用于描述和定义文档中的元素。JavaScript 是编程语言。编程语言用于向机器发出指令。编程语言可用于控制机器的行为和表达算法。所有主流浏览器都内置了 JavaScript 引擎，这使得浏览器可以运行和执行 JavaScript 代码。JavaScript 控制台允许在浏览器内部即时输出字符串和执行 JavaScript 代码行。...原创 2018-08-13 19:27:12 · 311 阅读 · 0 评论 -
Git命令（向仓库中添加 commit）
git addgit add 命令用于将文件从工作目录移到暂存区，可接受多个文件名（用空格分隔）。$ git add <file1> <file2> … <fileN>要将所有文件提交到仓库中，首先需要将这些文件从工作目录移到暂存区。我们将使用 git add 命令将这三个文件移到暂存区。运行 git add 命令没有任何输出（同样也没有...原创 2018-08-26 16:15:43 · 2842 阅读 · 0 评论 -
高效输入
高效输入1开始有效输入，速度带来转化。<form class="date-and-time-picker> <label for="date"> <span>What day do you want to leave?</span> <input id="date" type="date"&g原创 2018-09-28 17:17:03 · 424 阅读 · 0 评论