整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
這些標記用于將頁面分成多個部分。熟練地掌握這些標記將意味著構建出具有良好的結構和布局的頁面，使其更加友好和易于閱讀。
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小時內與您取得聯系。
