整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
这些标记用于将页面分成多个部分。熟练地掌握这些标记将意味着构建出具有良好的结构和布局的页面，使其更加友好和易于阅读。
div标记定义了HTML文件中的一个部分或分区。它通常包含需要组合在一起的标题、段落、表格或其他元素。通过设置<div class="">与css一起使用来设置网页某个部分的显示。
p标记用来定义文本的段落，就像你在书中看到的那样，一旦文本达到屏幕边缘就会自动折到下一行。当另一个<p>标记用于开始下一个段落时，浏览器将在段落之间添加一些空白。p标记具有以下属性：
span标记用于将内联元素组合在一起，例如句子中的几个单词，以便仅对这些单词应用css样式。span标记可以在div和p标记中使用，因为它不会创建新的块。
br标记相当于一个回车符，用于在新行开始文本。一行中的多个<br>标记将在网页上创建一个很大的垂直空间。
hr标记通常被称为HTML行分隔符标记，创建一条通常用于视觉上分隔页面的水平线。它具有以下属性：
出于某种原因，你希望文本在一条直线上继续，而不是在屏幕的边缘换行，可以使用nobr。注意：这将迫使用户向右滚动以查看行的其余部分，这是一种糟糕的设计。
下面是以上标记的示例：
浏览器显示内容如下所示：
入行Web前端的难点是什么？如何正确拆分JS代码？JS对于每一个Web前端入门人员都是一个难点知识，涵盖的知识点多且杂，应用更是广泛多变。JS的存在让前端变得入门简单、精通不易，也让越来越多的人选择学习Web前端入行，接下来千锋就给大家分享一下如何正确拆分JS代码。
使用JS你可以做很多事情，比如可以创建活跃的用户界面，可以处理表单，可以让网页更具交互性。不过一个网站该如何以最佳的方式向用户发送资源文件?这其中会存在很多不同的场景，当然就需要用到不同的技术和不同的术语。
根据Webpack术语表，有两种不同的JS文件分割类型：
1、捆绑拆分：创建更多、更小的文件(但每个请求都需要加载它们)以获得更好的缓存效果。捆绑拆分与缓存有关，因此对于首次访问网站的用户来说，有没有拆分其实并没有什么不同。
2、代码拆分：基于路由的动态加载(特定于React)，用户只下载他们正在查看的内容所需的代码。
JS截取字符串可使用substring()或者slice()
函数：substring()
定义：substring(start,end)表示从start到end之间的字符串，包括start位置的字符但是不包括end位置的字符。
功能：字符串截取，比如想从"MinidxSearchEngine"中得到"Minidx"就要用到substring(0,6)
例子：
var src="images/off_1.png";
alert(src.substring(7,10));
//弹出值为：off
函数：substr()
定义：substr(start,length)表示从start位置开始，截取length长度的字符串。
功能：字符串截取
例子：
var src="images/off_1.png";
alert(src.substr(7,3));
//弹出值为：off
函数：split()
功能：使用一个指定的分隔符把一个字符串分割存储到数组
例子：
str="jpg|bmp|gif|ico|png";
arr=theString.split("|");
//arr是一个包含字符值"jpg"、"bmp"、"gif"、"ico"和"png"的数组
函数：Join()
功能：使用选择的分隔符将一个数组合并为一个字符串
例子：
var delimitedString=myArray.join(delimiter);
var myList=new Array("jpg","bmp","gif","ico","png");
var portableList=myList.join("|");
//结果是jpg|bmp|gif|ico|png
函数：indexOf()
功能：返回字符串中匹配子串的第一个字符的下标
例子：
var myString="JavaScript";
var w=myString.indexOf("v");w will be 2
var x=myString.indexOf("S");x will be 4
var y=myString.indexOf("Script");y will also be 4
var z=myString.indexOf("key");z will be -1
函数：lastIndexOf()
定义：lastIndexOf()方法返回从右向左出现某个字符或字符串的首个字符索引值(与indexOf相反)
功能：返回字符串索引值
例子：
var src="images/off_1.png";
alert(src.lastIndexOf('/'));
alert(src.lastIndexOf('g'));
//弹出值依次为：6,15
JS数组拆分方法：
将数组array分成长度为subGroupLength的小数组并返回新数组
function group(array, subGroupLength) {
let index = 0;
let newArray = [];
while(index < array.length) {
newArray.push(array.slice(index, index += subGroupLength));
}
return newArray;
}
如果你想了解更多Web前端相关的知识，让自己能够快递进入前端开发行列，选择专业的学习是很好的方式。
述 | 杨晓兵
编辑 | 伍杏玲
出品 | CSDN（ID：CSDNnews）
编者前记：
编译器是连接人类世界与机器世界之间的一座桥梁，它可将程序员理解的高级语言，转换成程序高效执行的机器码。在 C/C++ 编译器里，有 VC、Borland C++、GCC、Watcom C/C++ 等国外热门编译器，但属于国内自主研发的编译器较少。
毕竟开发一款实用的编译器不易，涉及前端词法、语法分析、语意分析、大量的编译优化等工作。而有一支团队，不惜花费十余年精力完全自主研发出一款 YC 编译器和 YC 浏览器内核。
为何他们不遗余力地自主研发编译器和浏览器内核？这款编译器有何优点呢？下面由 YC 编译器的主要作者之一——杨晓兵，来讲述这背后十多年来的漫漫研发路。
以下为杨晓兵自述：
初衷：“做一些对软件行业进步有帮助的东西”
十多年前，我在中国科学院电子学研究所工作，参与设计一些硬件电路。当时我对硬件的兴趣远超软件，后创业专门从事软件工作。
我在创业的过程中发现，做此类软件虽能赚钱，但无论做得怎样，对软件科学的进步都无丝毫作用。尽管付出很多，却无成就感。
操作系统、数据库、编译器以及浏览器内核是不需要特殊专业知识的、开发难度非常大、最基础的软件产品。
我想从这几种软件中选择其中一项来自主研发，虽然不能肯定做出什么成就，但我有希望能做出一些对软件行业进步有所帮助的东西，使自己不枉踏入软件这个行业。根据当时的情况，我发现可先从浏览器内核下手，于是我除了维护原有产品外，把主要精力都投入到浏览器的研发中。
创新将 C 代码内嵌到 HTML
两年后，我们研发完成浏览器内核的基本功能，如 HTML 的解析和显示、JavaScript 脚本的执行等。
此时，我们发现 HTML 的标准越来越复杂，导致开发难度越来越大，如果按照这样的发展，浏览器内核将无法走入市场。
于是我重新思考：如果把 C 语言处理成像 JavaScript 脚本嵌入到 HTML 中，用内嵌 C 代码的 HTML 超文本做软件的人机交互界面，这款内核应该会有点竞争优势。
于是我们花费两年半的时间将标准 C 语言以 JavaScript 相似的方式在 HTML 中执行，并扩展了一个 HTML 标签：<user>，每个 user 标签都可以用属性 src 指定一个 C 源码文件，user标签的显示界面和所有行为都由它的 C 代码决定。
同时将 C 编译器做成一个函数，用该函数编译生成 C 程序的可执行代码，执行代码可被存入文件或直接执行。此时，我们将编译器取名为 YC 编译器，浏览器内核取名为 YC 浏览器。
三年又三年，漫漫研发路
随后，我们继续完善浏览器内核，将其中的一些内核代码独立出来用内嵌编译器动态编译执行，并将大部分内核源代码开源。
与此同时，我们又遇到一个问题：YC 编译器虽然编译速度较快，生成的却是字节码，执行速度慢，而且与原生代码相互调用（特别是回调函数）的处理相当繁琐。因此用当时的 YC 编译器难以胜任开源代码的编译工作。
为了解决自编译浏览器内核代码的问题，我们决定修改 YC 编译器，使它的字节码转换为原生的执行码，并扩展语法，使之具有少量的 C++ 语法。这个工作持续了三年。
三年后，YC 编译器功能增多，它提供一个函数像调用动态链接库一样直接调用 C 源码中的函数。此时，浏览器内核开源部分都可以用 YC 编译器实时编译执行了。
我们继续改进浏览器内核，将速度很慢的 JavaScript 字节码改为二进制原生代码，使 JavaScript 的执行速度约提高约 100 多倍。同时将浏览器内核代码全部模块化并开源，每个模块都用 YC 编译器动态编译执行，编译器的部分源码也开源（如内嵌汇编编译器源码、反汇编源码、C/C++ 字节码的执行源码等），所有的开源代码均由内嵌的 YC 编译器自动检测编译，动态执行。这个工作大概耗时四年。
开发至此，我想起谷歌和火狐浏览器都已开源，为什么不去看看它们的源代码呢？于是找到这两个浏览器的源码。
当时由于一些原因，我分析谷歌浏览器源码没有编译通过，而火狐的源码很顺利就编译成功了，于是我就走上了分析火狐源码之路。
下载的火狐源码由纯 C 代码和 C++ 代码两部分组成，经 Visual C++ 2013 编译生成一个 xul.dll 文件和一个 firefox.exe 文件。
我首先分析了它的 C 代码，将所有的输出函数全部改为类接口，并让 xul.dll 通过 YC 编译器函数 YC_cppLoad 进行实时编译，然后用类接口调用 C 源码中的函数。这一步进行得很顺利，若修改了火狐的 C 代码，只要重新运行火狐浏览器便可生效，无需其它操作。
曾经的办公桌
接下来开始分析火狐 C++ 代码。YC 编译器只实现了少数几个 C++ 语法，不能编译火狐 C++ 代码，故分析起来非常困难。
为什么火狐 C 代码容易分析，而它的 C++ 代码难以分析呢？原来我用 YC 编译器将它的 C 代码生成汇编代码文件、变量结构定义文件、宏定义文件和预编译文件，通过这几个文件，大大减少了分析难度。
因此我再次决定修改 YC 编译器，使之完全支持 C++11 标准，因为火狐 C++ 代码几乎使用了所有的 C++11 语法特性。先使用 STL 标准模板库代码进行编译器的修改和调试，出乎预料，这个过程竟用了三年时间！之后，我用 YC++ 编译器开始调试火狐 C++ 代码。原以为 STL 那么复杂的代码都可以编译通过并正确执行，火狐 C++ 代码应该能很快就编译通过。没想到，很多语法细节 STL 没有用到，而火狐 C++ 源码用到了。于是又继续修改 YC 编译器，对火狐 C++ 的各个模块进行编译，这个过程持续了一年多。
虽然 YC 编译器可以编译全部火狐 C++ 代码，但如何生成执行代码呢？先从主程序 Firefox.cpp 入手，经整理，这个程序可用 YC 编译器生成执行代码 Firefox.exe，并能顺利运行。
由于火狐 C++ 各模块耦合紧密，很难拆分，经过一个多月的工作，仍未能将其拆成多个独立的源码模块以便于用 YC 编译器实时编译，动态执行，这也许是我对火狐 C++ 源码的整体结构还不甚清楚之故，只见其树木不见其森林。
杨晓兵
当我准备对火狐 C++ 代码进行再一次总体分析时，有个偶然的机会参与到一个学校管理系统的开发中，因原有的管理系统经常出故障，操作极其不方便。尽管没有开发 Web 服务程序的经历，但我做的软件与 Web 服务器有极大关系。
经了解，要开发这种管理系统需要的软件有：Apache 或 Nginx 服务器，数据库 MySQL 或其它，编程工具 ASP 或 JSP 或 PHP 等，于是启发我们自己研发这些工具。YC 的 C/C++ 和 JavaScript 编译器和 HTML 解析器正好派上用场。
经过一段时间，一个稳定的、可任意扩展的、多线程高并发的 HTTP 服务器就完成了。该服务器处理 YSP 文件生成网页传给浏览器。
YSP 是我设计的与 ASP、JSP 和 PHP 功能相似的一种网页编程语言。YC 服务器执行 YSP 文件中的内嵌 C/C++ 或 JavaScript 代码，生成 HTML 超文本传给终端设备。工具做好后，不久便做出了管理系统的雏形，这个雏形在发布的 YC 编译器中可见到。
做了上述这些工作后，我想是时候该写本书介绍一下 YC 编译器了，经过一段时间编写的《YC编译器—多语言程序设计》（暂名）即将出版。
当我把书完成后，便立即投入64位的C/C++和JavaScript编译器的开发，目前开发进展顺利，已进入测试阶段。
编者后记：
三年时间，可将一个呱呱落地的婴儿变成蹦蹦跳跳的幼儿，可将一名懵懂的职场新人变成沉稳的老兵。而杨晓兵团队沉下心，迎难而上，花费三年又三年、再一年、两年、四年的时间只为突破一个个技术难点，最终自研出 YC 编译器和 YC 浏览器内核。
在这过程中，杨晓兵坦言最大的挑战不仅是技术，还有思维的高度。这期间不仅有大量的研发工作，还为了优化，多次重写代码，让他坚持下来的是想为计算机软件科学的发展做贡献的匠心。
目前杨晓兵团队正在开发 64 位 C/C++ 编译器，谈及未来，杨晓兵表示先在国内推广，再走向海外。祝福杨晓兵。
YC编译器传送门：http://www.ycbro.com
*请认真填写需求信息，我们会在24小时内与您取得联系。
