css選擇器實訓報告，熟練掌握并默寫標記選擇器的基本語法？
1.標記選擇器主要應用在HTML頁中的標記樣式選擇。如P選擇器就用于聲明網頁中有P標記的文本內容，同理，H1選擇器則可以標記頁面中H1的樣式。例如： H1 { font-size:14px; font-weight:bold; color:#ccc;}以上代碼表示在所有應用H1選擇器的地方，將文字的大小設為14像素并加粗，同時將顏色設為灰色，如果要改變H1的顏色，只需將color屬性更改就可以了，比如將color設為#e7eefe來與網頁的其他地方協調。 2.類別選擇器 這是一類最常用的選擇器，用它來定義網頁中需要特殊表現的樣式，類別選擇器的名稱可以由作者自由定義，一般來講類別選擇器的命名最好有一定的意義，使CSS代碼更易維護和閱讀。例如定義導航就可以使用.daohang{}或者是.nav{}，不要使用簡略或者特殊的字符串，否則可能三天后當你再讀你的CSS代碼時，就連你自己都搞不清一個樣式到底是做什么用的！ 類別選擇器就是CSS類，在HTML表現為調用的class。例如： (1)style.css文件中定義 .title { margin:10px; padding:2px 5px;}(2)HTML文件中
在上述定義中，p標簽將引用CSS文件中的title樣式應用到整個p覆蓋的范圍。p將顯示為一個上下左右margin各為10px，上下padding為2px，左右padding為5px的矩形。 請注意類別選擇器CSS定義和標記選擇器的區別：在CSS文件中，標記選擇器前邊沒有"."號，下面我們還會講到ID選擇器，它的定義也不一樣，每個ID選擇器樣式前有一個"#"號，以確定其為ID選擇器，而在HTML中則用ID="style"引用。值得注意的是，一個標簽可以同時應用多個class選擇器，如,具體大家可以在下邊思考并做下實驗，筆者在這就不舉例了。3.ID選擇器(1)ID選擇器用法和class基本沒有區別，他們的不同之處就在于ID選擇器只能在HTML頁中使用一次，而class則可以任意多次調用，在CSS文件中，ID 選擇器一般寫成 #idname { bgcolor:#339; font-size:16px;}如果一個ID應用于多個HTML標記，則有可能造成IE編譯錯誤，并且由于ID選擇器可以被JAVASCRIPT等調用，所以多個ID會導致JAVA編譯錯誤并崩潰！ (2)HTML的引用 在HTML中引用ID選擇器的代碼如下所示： 并且ID選擇器不能像類別選擇器那樣同時被一個標簽調用。這也是完全錯誤的語法。 復合選擇器就是基本選擇器通過不同的鏈接方式構成的。 復合選擇器就是兩個或多個基本選擇器，通過不同方式鏈接而成的選擇器。為什么程序員都喜歡用Chrome瀏覽器？
現在使用Chrome的人應該是越來越多了，已經不是只有程序員喜歡Chrome了，就算是國內的很多瀏覽器（諸如：360瀏覽器、騰訊瀏覽器等等）也都首推Chrome內核了。
而程序員對Chrome情有獨鐘，主要還是因為其強大的功能。
對于程序員，特別是前端程序員來說，要做一個網頁出來，需要考慮到用戶交互、呈現效果等等。既然互聯網聯通了全世界，那么這個網頁自然也就需要有一套完善的標準，不然網站的開發者和瀏覽器的開發者怎么能夠相互知道必須需要怎么實現呢？
在Chrome問世之前，程序員最喜歡的是Firefox，因為他很好的貫徹了W3C的標準，也就是說，我只要按照這個標準設計網頁，那么在Firefox打開就一定是我想要的效果。而最不喜歡的就是IE，從IE6開始，IE的每一代瀏覽器都喜歡自己DIY一點東西，也就是說，IE7并不是完全兼容IE6，IE8也并不是完全兼容IE6和IE7。對于程序員來說，就必須寫大量的代碼來兼容這些瀏覽器的差異，大大的增加了程序員的工作量。而且兼容性的問題是最難發現和調試的，所以真的是苦不堪言。
Firefox出現以后，就被程序員視為至寶啊，但是，Firefox在國內并沒有很受歡迎，由于Windows操作系統的策略，IE是被綁定銷售的，所以IE依舊是用戶的首選。
而Chrome問世以后，很快就超越了Firefox，主要是由于Chrome的插件確實非常的人性化，Firefox的很多插件需要自己去安裝，并且體驗上稍差一些，但是Chrome卻自帶了很多開發者工具，只要通過F12鍵就能夠直接使用，非常方便。
再加上Chrome的內存消耗要小于Firefox，自然就讓很多程序員移情別戀了。
而這個時候，國內的瀏覽器廠商們也看中的Chrome內核的優勢，國產瀏覽器都開始慢慢推廣Chrome內核，IE也慢慢的被放到了備胎的位置。這讓程序員們更是興奮啊，要知道，兼容IE是一件多么痛苦的事情，Chrome就是救世主的存在，自然就更加喜歡了。
然后說一下Chrome的F12中，我最常用的功能吧。
首先是Network很多時候，我們在對網頁的性能進行驗證的時候，就需要打開Network，看看某些請求的響應時間，通過這個來判斷哪些接口的資源占用高，需要進行優化。
同時，有些時候，我們對于請求的順序也是有一定的要求，可以從這里直觀的看到這些問題。
Sources應該算是前端利器了在這里可以直接對前端js進行debug，找到js中的問題。很多時候，我們在測試環境不一定能夠驗證出所有的問題，到了生產環境的時候還能夠debug去找問題，簡直就是神器。
Console雖然不常用，但是偶爾也會使用例如，有些時候我們的代碼不方便debug，那么就可以打執行的過程打印出來，在Console中就能夠看到這些信息，判斷有沒有問題，哪里有問題。同時，這里還可以執行一些命令，幫助我們定位問題。
Elements也是一個常用的功能在進行頁面樣式調整的時候，我們通常可以在這里進行一些修改，并且可以實時的看到效果。同時，我們也可以發現css的一些層級關系，當css的樣式出現沖突的時候，誰的優先級最高，最終誰被應用了，都可以在這里看到。
最后，推薦一個插件Resources Saver這并不是Chrome自帶的一個插件，但是可以在Chrome的插件庫中找到。這個插件可以把你現在瀏覽的這個網頁的資源全部保存下來，感覺好像并沒有什么用處。但是，當頁面上有一些flash插件或者其他多媒體插件時，一些你想要的圖片并不是通過圖片的方式進行展示的，你想要保存，但是右鍵又不起作用。然后圖片的地址又是通過js進行加載的，甚至有身份授權，你根本無法打開時。呵呵，你懂了吧。
如何開發一個windows軟件？
摘要：在我認識的所有程序員里，每個人幾乎都有專屬于自己的常用工具和相關資源，今天給大家奉上數十個程序員硬核工具，我相信這里總有一款工具是屬于你的！
程序員生產力工具大全如下：1. Idea-Intellij IDEA (java 編程語言 開發的集成環境)
業界排名第一的java開發工具，非常非常好用，如果還在用eclipse的朋友，趕緊來體驗一把，你一定會愛上她的。2. SecureCRT (SSH終端仿真程序)
SecureCRT是一款終端仿真程序，支持SSH（SSH1和SSH2）以及Telnet和rlogin協議。SecureCRT用于連接運行包括Windows、UNIX和VMS在內的遠程系統的理想工具。3. Termius (全平臺的遠程終端)
termius是一款全平臺的遠程終端，Termius不僅涵蓋了Windows、Linux、OSX，還變態得支持Android和iOS（以后在地鐵、公交上都可以隨時拿出手機來排查線上問題啦，還真是廣大程序員的福音呢。4. Google Chrome (谷歌瀏覽器)
Google Chrome是一款由Google公司開發的網頁瀏覽器，該瀏覽器基于其他開源軟件撰寫，包括WebKit，目標是提升穩定性、速度和安全性，并創造出簡單且有效率的使用者界面。5. iTerm (為Mac OS X編寫的終端仿真程序)
iTerm是一個為Mac OS X編寫的，功能齊全的終端仿真程序；目標是在為用戶提供OS X下最佳的命令行體驗；字母i代表了本地蘋果的外觀和風格的程序界面，并把重點放在完整的國際支持； 它合并由兩個項目， CTerminal和TerminalX ，而這兩者都是基于JTerminal項目；該軟件非常有實用和易用性。6. Visual Studio Code (簡稱“VS Code”,編寫現代Web和云應用的跨平臺源代碼編輯器）
重新定義和優化了代碼編輯,以便生成和調試新式 Web 應用程序和云應用程序。也是著名的文本編輯器，它是輕量級的,vSCode的一大特點就是你可以通過多種方式來調整設置,而且Vim可以和VScode集成在一起，它還帶有一個集成終端，可用的擴展太多，使開發人員的工作變得更加輕松。我最喜歡的一些擴展是AWS Toolkit, ESLint,Live Server, Live Share, Prettier-代碼格式化程序，YAML,Live Sass編譯器，Docker等。7. VMware Fusion & VMware workstation (為計算機開發的虛擬機管理程序)
是在計算機上無縫運行 Windows 的最佳方式，可確保 Windows 應用程序在計算機上實現無縫運行可以在基于 Intel 的計算機上無縫運行 Windows、Linux 以及其他 PC等多個操作系統，進而構建、測試或演示軟件。8. Navicat Premium (數據庫管理工具)
Navicat premium是一款數據庫管理工具,是一個可多重連線資料庫的管理工具，它可以讓你以單一程式同時連線到 MySQL、SQLite、Oracle 及 PostgreSQL 資料庫，讓管理不同類型的資料庫更加的方便。9. Postman (api調試工具)
簡單來說，四個詞，簡單、實用、大方、美觀！postman這款網頁調試工具的windows客戶端，功能強大的HTTP調試與模擬插件。使用Postman可以進行API開發、請求、調試,除了它，還可以使用lnsomnia和Insomnia Designer作為API文檔。10. RedisDesktopManager (一款可視化 redis管理工具 )
Redis Desktop Manager是一款簡單快速、跨平臺的Redis桌面管理工具，也被稱作Redis可視化工具，Redis Desktop Manager官方版是一款開源軟件，支持通過SSH Tunnel連接，支持windows、mac等多平臺。11. Dash (基于MAC的 API文檔瀏覽器和代碼片段管理器)
“開發者不可或缺的杰作。”Dash 可讓您的 Mac 即時離線訪問 200 多個 API 文檔集。立刻搜索離線文件集200層+的API ，100+備忘單和 href="">更多 功能。您甚至可以"">生成自己的文檔集 或 href="">請求 包含href="">文檔集 。12. Fiddler & Wireshark (http抓包工具)
Fiddler和Wireshark都是進行抓包的工具:所謂抓包就是將網絡傳輸發送與接收的數據包進行截獲、重發、編輯、轉存等操作,也用來檢查網絡安全。作為開發者，經常想調試一下http請求發送的數據的詳情，那么可以使用這2款軟件。用抓包工具wireshark的人相對來說更多一些。13. HBuilder X (HTML5的Web開發工具)
當前最快的HTML開發工具,強大的代碼助手幫你快速完成開發,最全的語法庫和瀏覽器兼容性數據讓瀏覽器碎片化不再頭痛。作為HBuilder下一代的全新編輯器，HBuilderX被定位為ide和編輯器的完美結合，除了對某種語言的語法分析、提示、轉到定義、調試，同時加強了對通用文本處理能力，界面更加清爽，擁有比上一代更加有效的快捷鍵體系。14. MobaXterm (遠程終端控制軟件,集串口,SSH遠程登錄和FTP傳輸三合一的工具)
多功能終端MobaXterm Professional Edition 是一款豪華、全功能的終端軟件。MobaXterm帶來了所有必要的Unix命令到Windows桌面，在開箱單便攜式exe文件。MobaXterm允許您啟動遠程會話。遠程shell，MobaXterm遠比Putty好用，您可以選擇創建SSH，遠程登錄，Rlogin，RDP，VNC，XDMCP，FTP，SFTP或串行會話。15. Sublime Text (跨平臺代碼編輯器)
http://www.sublimetext.cn/Sublime Text 是一款用于代碼、標記和散文的精致文本編輯器。Sublime Text 中文網致力于為廣大國內開發者提供詳盡的中文文檔、使用說明等,助力開發者快速掌握這個編輯器。16.webstorm (專業的HTML編輯工具)
web開發的必備的一款開發神器，比如寫js、頁面、css，那么這款軟件用起來非常順手。此軟件和idea出自于同一家公司，這家公司做了很多異常好用的軟件，基本上你需要的各種開發相關的IDE，這家公司都生產。可以說是“Web前端開發神器”、“最強大的HTML5編輯器”、“最智能的JavaScript IDE”。新版對JavaScript，TypeScript和CSS支持更好，改進了Vue.js的體驗，并為Jest集成增加了新功能。17.Xshell (功能強大的終端模擬器)
linux原創控制軟件，完全免費且非常穩定的 SSH 客戶端 ，支持多種遠程協議，提供了很多特色與高級功能，簡體中文界面也讓你輕松管理遠程服務器。 Xshell 的 Screen 會話不閃屏，而且可以回滾；Script 的執行順序可以調整；可以同時發送指令到多個 session；支持布局切換等。18. SwitchHosts (修改Hosts文件的工具)
這是用于在多個HOSTS之間進行切換。可在公用hosts文件 、當前系統hosts、本地方案和在線方案間進行切換。作為一名開發人員，經常需要修改本地host，你還是通過修改host文件來操作的么？那樣太慢了，這里建議大家使用switchhosts這款軟件，可以快速修改本地host，非常好用。其他工具：
1. CodeIf(智能命名) ： https://unbug.github.io/codelf
大部分開發者都或多或少遇到過變量命名的煩惱，如果命名不規范，不僅會影響開發的效率，而且對后面維護的同學來說也是一個不小的挑戰，因為他要去揣摩你這個變量的含義。隨著項目越來越復雜，變量和函數數量越來越多，雖然每個編程語言都有各種命名規范，但是也不能解決所有的問題。“計算機科學里兩件最難的事：緩存失效和命名。” Codelf通過搜索在線開源平臺Github, Bitbucket, Google Code, Codeplex, Sourceforge, Fedora Project的項目源碼，幫開發者從中找出已有的匹配關鍵字的變量名，從而幫助為變量名苦惱的開發者命名。這個搜索服務支持直接搜索中文。同時可以在自己用的編輯器里安裝插件，支持 VS Code、Atom、Sublime Text 和 Chrome。2. DocsChina-印記中文 ： https://www.docschina.org
這是一個前端中文文檔合集，進入網站可以看到開發中經常使用的前端中文文檔。如果你的英文實在不怎么好，還在為找中文文檔而煩惱，這里將是你非常好的選擇。記得放到自己的瀏覽器收藏夾里哦！3. any-rule(正則表達大全)： http://github.com/any86/any-rule
any-rule 維護了一個常用正則表達式合集，并且本身是一個支持 Web/VS Code/idea/Alfred Workflow 多平臺的正則表達式工具。4. tool.lu(在線工具)： https://tool.lu
程序員總是有很多小工具要使用，比如圖片、Base64編碼、Markdown編輯器時間戳轉換，進制轉換等，在線運行各種語言代碼。這個網站包含了太多程序員需要用到的小工具了。比如你想運行點JAVA代碼，又不想麻煩的在系統中安裝JAVA環境，可以使用里邊的在線運行代碼工具，然后選擇JAVA,寫點JAVA代碼就可以直接運行了。5. Baomitu(前端靜態源庫)： https://cdn.baomitu.com
這個靜態資源庫是支持HTTP/2的CDN服務，有了它，如果你是自己的小型項目或者是做測試就不用下載任何的代碼庫，直接粘貼地址過來用就可以，因為是國內的CDN庫，速度還非常的快。6. Typora-Markdown(編寫工具)：https://www.typora.io
一款實用的 Markdown 編寫工具，所見即所得，用Markdown編寫文章是一個程序員的標準配置，也就是標配。現在有很多在線工具都支持Markdown，什么有道云筆記、雀語，、印象筆記等。這種簡單的界面，沉浸式的編寫，清晰的大綱，它就像一件稱手的兵器，讓你一旦擁有就愛不釋手。7. Snipaste (簡單便捷的截圖軟件)：https://zh.snipaste.com/download.html
一款免費的桌面截圖軟件，功能強大，使用方便，支持任何屏幕位置截圖，支持窗口截圖，支持快捷方式截圖。您可通過截取貼圖，使兩張圖合并為一張圖，還能調整截圖文字圖像等等，是一款非常強大的貼圖軟件，喜歡此款貼圖軟件的朋友不要錯過。8. Captura (最好用的開源錄屏、gif動態圖片制作工具)
官網：https://captura.updatestar.com/github：https://github.com/MathewSachin/Captura通過這款工具可以幫助你輕松錄制各種視頻。支持全屏錄制、區域錄制兩種方式，全屏錄制可以錄制全部的電腦屏幕，將電腦屏幕上所有的動態都錄制下來,該軟件還擁有視頻編解碼器，可以對視頻進行解碼，支持mp4、avi、GIF、webm等格式，可以滿足一般的解碼需要。還支持屏幕截圖、剪貼板，簡單的圖像編輯等功能，是一款非常好用的屏幕錄像工具。9. 向日葵 (遠程控制軟件): https://sunlogin.oray.com/
向日葵遠程控制是一款提供遠程控制服務的軟件。向日葵遠程控制支持主流操作系統Windows、Linux、Mac、Android、iOS跨平臺協同操作，在任何可連入互聯網的地點，都可以輕松訪問和控制安裝了向日葵遠程控制客戶端的設備。整個遠控過程，可通過瀏覽器直接進行，無需再安裝軟件。10. Everything (本地文件檢索工具):http://www.voidtools.com/support/everything/
由voidef="">tools 開發的一款文件搜索工具，這款軟件是基于名稱實時定位文件和目錄。Everthing功能強大，體積小巧，第一次安裝使用時會建立一個索引數據庫，將所有文件和文件夾的名稱導入其中，后續使用能夠以極快的速度快速搜索，查找到你所需要的文件。11. StarUML (UML畫圖工具)
畫uml圖的一款神器，類圖、時序圖、流程圖、狀態圖等等，都可以用這款工具輕松應對。12. uTools (生產力工具集):https://u.tools/
一個極簡、插件化、跨平臺的現代化桌面軟件。通過自由選配豐富的插件,打造你得心應手的工具集合。這個工具，我只能說他是一款神奇，太牛逼，這款工具中匯集了很多好用的工具，可以通過這款工具秒開電腦上的各種軟件。搜索資源網站工具：
1.Bing
Bing 國際版：https://cn.bing.com/感覺比某度要好用多了。2.DuckDuckGo
DuckDuckGo：https://duckduckgo.com/從官網的介紹來看這個搜索引擎不收集用戶信息，而且沒有廣告。3.Stack Overflow
Stack Overflow：https://stackoverflow.com/我們如果常用 Google，很多技術問題的答案就在這個網站上，如果你無法使用 Google 可以在這個網站上直接檢索就好了。4.Gitlogs
Gitlogs：https://www.gitlogs.com/Gitlogs 是專門針對 GitHub 項目的搜索引擎，我們通過他可以快速找到想要項目。5.jiumo search
文檔搜索引擎 jiumo search 鳩摩搜書：https://www.jiumodiary.com/可以用來找一些技術文檔手冊，很多在百度網盤里。6.Ebooke
Ebooke：https://ebookee.org/Ebookee 是一個基于互聯網并提供免費電子圖書下載的搜索引擎網站。7.Iconfinder
圖標搜索：https://www.iconfinder.com/用來查找 logo 圖片。8.TinEye
TinEye：https://www.tineye.com用圖片來檢索圖片，我們可以上傳圖片或輸入圖片的 URL 來檢索。9.SemanticScholar
SemanticScholar：https://www.semanticscholar.org/SemanticScholar 是一個免費學術搜索引擎，其檢索結果來自于期刊、學術會議資料或者是學術機構的文獻。10.LibreStock
LibreStock：https://librestock.com/LibreStock 上可以檢索一些優質的高清圖片。http://11.CC Search
CC Search：https://ccsearch.creativecommons.org/CC Search 上搜索到的圖片資源都是無版權的，我們可以免費的使用。12.Pexels
Pexels：https://www.pexels.com/高質量的圖片網站，可以免費使用。13.Unsplash
Unsplash：https://unsplash.com/免費高清素材網站。14.The App Store
The App Store：https://theappstore.org/The App Store 是一個針對蘋果手機、iPad、Mac 設備的應用搜索工具。在線畫圖工具：
? 在線畫圖工具ProcessOn：https://www.processon.com/? 在線畫圖工具http://draw.io：https://app.diagrams.net/? 在線思維導圖工具：http://www.mindline.cn/webapp? PlantUML在線編輯器：http://haha98k.com/在線開發輔助工具：
日常開發經常會用到一些輔助工具我總結為8大類，包括：編解碼工具、轉換工具、正則工具、編譯工具、網絡工具、格式化工具、可視化工具、在線生成器、以及其他工具等等。具體列表如下:在線編碼工具：
BASE64編解碼工具：https://base64.supfree.net/? MD5編碼工具：https://www.zxgj.cn/g/md5? AES/DES加解密：http://www.fly63.com/tool/cipher/? JWT解碼工具：http://jwt.calebb.net/? ASCII編解碼工具：https://www.matools.com/code-convert-ascii? Unicode編解碼工具：https://www.zxgj.cn/g/unicode? UTF-8編解碼工具：https://www.zxgj.cn/g/utf8? 字符串編解碼工具：https://www.zxgj.cn/g/enstring? URL編解碼工具：http://tool.chinaz.com/tools/urlencode.aspx?jdfwkey=lbixz1在線轉換工具：
在線ASCII碼對照表：http://www.fly63.com/tool/ascii/? 通用進制轉換工具：https://www.zxgj.cn/g/jinzhi? 在線浮點數十進制轉換：http://www.binaryconvert.com/? RGB顏色轉換：https://www.zxgj.cn/g/yansezhi? 時間戳轉換工具：https://www.zxgj.cn/g/unix? 計量單位換算工具：http://www.fly63.com/tool/unitable/? 在線JSON解析：http://www.json.cn/? 在線JS代碼格式化工具：https://prettier.io/playground/? SQL壓縮/格式化工具：https://www.zxgj.cn/g/sqlformat? JSON和XML在線轉換：https://www.zxgj.cn/g/jsonxml? JSON/YAML在線轉換：http://www.fly63.com/tool/jsonyaml/? 人民幣大小寫轉換工具：http://www.fly63.com/tool/renmingbi/正則表達式工具：
正則表達式調試工具：https://regexr.com/? 正則表達式可視化工具：https://jex.im/regulex/網絡工具：
IP地址歸屬地查詢：https://www.ip138.com/? IP地址查詢：https://www.ipip.net/ip.html? HTTP在線接口測試工具：http://www.fly63.com/php/http/在線編譯運行工具：
C#在線編譯運行：https://rextester.com/? C/C++在線編譯調試：https://www.onlinegdb.com/? 在線編譯工具套裝：https://c.runoob.com/可視化/格式化工具：
在線前端編輯器: https://codepen.io/? 在線數據可視化：https://flourish.studio/? 在線JSON解析：http://www.json.cn/? 在線CSS代碼可視化工具：https://enjoycss.com/? XML格式化工具：https://www.zxgj.cn/g/xmlformat? 在線JS代碼格式化工具：https://prettier.io/playground/? SQL壓縮/格式化工具：https://www.zxgj.cn/g/sqlformat? JSON和XML在線轉換：https://www.zxgj.cn/g/jsonxml? JSON/YAML在線轉換：http://www.fly63.com/tool/jsonyaml/在線生成器：
UUID在線生成器：https://www.zxgj.cn/g/uuid? 隨機數生成器：https://www.zxgj.cn/g/suijishu其他常用工具：
在線Nginx配置工具：https://nginxconfig.io/? 在線對比工具：http://www.fly63.com/tool/textdiff/? 在線Chrome瀏覽器插件：https://www.crx4chrome.com/? 在線接口文檔管理工具：http://www.docway.net/在線素材工具：
如果你寫文章，或者做視頻，那就一定少不了要找素材，包括各種圖片、背景、emoji表情、表情包、壁紙、視頻、gif圖等等。? 免費透明背景圖片素材：http://pngimg.com/? Emoji表情搜索：https://emoji.svend.cc/? Emoji表情包下載：https://emojiisland.com/? open source icons：https://feathericons.com/? 表情包在線網站：https://fabiaoqing.com/? 免費PNG圖片庫：https://pluspng.com/? ICON圖標在線下載：https://www.iconfinder.com/? 極簡壁紙：https://bz.zzzmh.cn/? Wallpaper Abyss壁紙：https://wall.alphacoders.com? Pixabay圖片素材庫：https://pixabay.com/zh/? Unsplash圖片素材庫：https://unsplash.com? Pexels圖片素材庫：http://www.pexels.com? NASA圖片視頻素材庫：https://images.nasa.gov設計制作類工具：
對于那些文章創作者和視頻創作者而言，設計封面，做海報，設計LOGO，圖片美化等等基本也是剛需。這樣大概率日常會用到一些簡易好上手的在線設計制作類工具，比如在線P圖、音/視頻輕量化剪輯、logo制作、海報設計制作、圖片美化、在線圖片轉換或生成等等。? 在線PS：https://www.uupoop.com/? 在線音頻剪輯：https://www.weixinsyt.com/? 在線視頻剪輯：https://www.kapwing.com/? 免費logo在線制作：http://www.uugai.com/? 藝術字體在線生成：https://www.qt86.com/? 在線表格轉換工具: https://tableconvert.com/? 在線海報設計工具: https://www.designcap.com/? 圖片智能放大工具：https://bigjpg.com/? 二維碼美化器：https://mh.cli.im/? 在線代碼截圖工具：https://carbon.now.sh/? 在線摳圖工具：https://www.remove.bg/zh? ICO圖標在線生成：http://www.fly63.com/php/ico/? SVG轉PNG工具：http://www.fly63.com/tool/svg2img/? 視頻轉GIF工具：http://www.fly63.com/tool/giftxt/? 二維碼在線生成器：http://www.fly63.com/tool/ewm/? 二維碼在線解碼：http://www.fly63.com/php/decoder/寫輔助工具：
寫文章的過程中經常會用到和寫作相關的輔助工具，比方說：字數統計工具、Markdown格式的文章排版工具、圖床網站、代碼截圖工具等等，所以下面這些在線工具就能很好地滿足我的需求。? 在線字數統計：https://www.eteste.com/? mdnice markdown排版工具：https://mdnice.com/? md2all markdown排版工具：http://md.aclickall.com/? 在線圖床神器：https://picx.xpoet.cn/? 在線免費圖床：https://sm.ms/? 圖殼圖床：https://imgkr.com/? 在線代碼截圖工具：https://carbon.now.sh/? 在線短鏈接工具：https://urlify.cn/? 在線文本替換：http://www.fly63.com/tool/textreplace/在線辦公工具：
部分在線工具主要用來處理一些和文檔以及文稿相關的事情，經常用到的比如：在線的全套pdf處理和轉換工具、各種各樣多媒體文件間的相互轉換工具、在線識別工具、在線壓縮工具等等。? pdf在線處理工具1：https://smallpdf.com/cn/pdf-tools? pdf在線處理工具2：https://tools.pdf24.org/zh/? pdf轉word在線工具：https://www.pdftoword.com/? 在線多媒體轉換器合集：https://cn.office-converter.com/? 在線文字識別工具：https://ocr.wdku.net/? 在線文件壓縮工具：https://docsmall.com/文檔筆記工具：
好記性不如爛筆頭，作為一個學習者，我覺得記筆記是必不可少的步驟。當然現在基本都做電子筆記和電子文檔比較多。現如今各式各樣優秀的文檔工具和筆記軟件鱗次櫛比，好用的也有很多，整理成如下列表，這東西各有長處，使用哪個最合意還得看個人習慣和需求了。? 印象筆記：https://www.yinxiang.com/? 有道筆記：https://note.youdao.com/? OneNote：https://www.onenote.com/? 幕布：https://mubu.com/? 為知筆記：https://www.wiz.cn/? 石墨文檔：https://shimo.im/? Simplenote：https://simplenote.com/? 語雀：https://www.yuque.com/編程學習網：
? 嗶哩嗶哩：https://www.bilibili.com/? C語言網：https://www.dotcpp.com/? cppreference：http://zh.cppreference.com/? 中國大學MOOC：https://www.icourse163.org/? 牛客網：http://www.nowcoder.com? 網易公開課：http://open.163.com? CodeGym：https://codegym.cc/? BeginnersBook：https://beginnersbook.com/? JavaSED：http://www.javased.com/? codecademy：https://www.codecademy.com/? Coursera：https://www.coursera.org/? StackOverFlow：https://stackoverflow.com/? LeetCode：https://leetcode-cn.com/? LintCode：https://www.lintcode.com/在線教程文檔：
這部分主要集中了在做開發過程中隨手參考所要用到的幾乎所有在線教程和官方文檔，有中文版文檔的基本都優先列出來了，但更多時候是英文的官方文檔。? Git中文教程：https://git-scm.com/book/zh/v2? SVN中文手冊：http://svnbook.red-bean.com/nightly/zh/index.html? jQuery API中文文檔：https://jquery.cuishifeng.cn/? Nginx中文文檔：https://www.nginx.cn/doc/index.html? Kafka中文文檔：https://kafka.apachecn.org/? Mybatis中文文檔：https://mybatis.org/mybatis-3/zh/index.html? 微信小程序官方文檔：https://developers.weixin.qq.com/miniprogram/dev/framework/? Nodejs中文教程文檔：http://nodejs.cn/learn? Apache Web Server文檔：http://httpd.apache.org/docs/? Spring文檔中文版：https://www.springcloud.cc/spring-reference.html? Golang標準庫文檔中文版：https://studygolang.com/pkgdoc? Java 8官方文檔：https://docs.oracle.com/javase/8/docs/api/index.html? Maven官方文檔：http://maven.apache.org/guides/? Tomcat 8官方文檔：http://tomcat.apache.org/tomcat-8.0-doc/index.html? Spring Boot官方文檔：https://docs.spring.io/spring-boot/docs/current/reference/htmlsingle/? RabbitMQ官方文檔：https://www.rabbitmq.com/documentation.html? RocketMQ官方文檔：http://rocketmq.apache.org/docs/quick-start/? Dubbo中文文檔：https://dubbo.apache.org/zh/docs/? Netty官方文檔：https://netty.io/wiki/index.html? Elasticsearch官方文檔：https://www.elastic.co/guide/en/elasticsearch/reference/current/index.html? Spring Cloud官方文檔：https://spring.io/projects/spring-cloud? Docker官方文檔：https://docs.docker.com/get-started/? kubernetes中文文檔：https://kubernetes.io/zh/docs/home/? thymeleaf官方文檔：https://www.thymeleaf.org/documentation.html? Vue.js中文文檔：https://cn.vuejs.org/v2/guide/? React.js官方文檔：https://reactjs.org/docs/getting-started.html? Jenkins中文文檔：https://www.jenkins.io/zh/doc/華為云平臺：
高效易用的低代碼aPaaS平臺-應用魔方AppCube：https://www.huaweicloud.com/product/appcube.html集華為研發實踐、前沿研發理念、先進研發工具為一體的軟件開發平臺-軟件開發平臺 DevCloud：https://www.huaweicloud.com/devcloud/以上內容分享自華為云社區《吐血整理：程序員都在用什么工具？》，作者： 考過IE勵志當攻城獅 ，部分內容整理自互聯網~
web培訓的內容有什么？
什么是前端工程師及工作內容
回答這個問題前我們需要先了解一下什么是Web前端工程師，主要的工作內容是什么。Web前端工程師是將后臺工程師的數據信息按照界面設計師的設計效果圖開發呈現到瀏覽器、APP及應用程序上供用戶瀏覽使用的一個職位。
Web前端必備的基礎技能
Web前端要求掌握的基礎技能有：html5、css3、javascript、JQuery、Ajax等，除了以上需要掌握的基礎內容，還需掌握多個前端框架、UI庫以及代碼管理工具等多個工作中常用到的工具。
如何零基礎開始學習
按照由簡入深，由易到難的方式學習Web前端開發，我個人建設：首先學習html、css、javascript，之后學習JQuery、html5、css3，最后升級學習JS模塊化工具、CSS擴展語言、主流前端UI框架、代碼管理工具等工作中需要掌握的技術內容。
另外想補充說明的是，想零基礎學習Web前端開發，除了需要掌握專業開發知識外，還因具備一定的審美眼光，喜歡快節奏的生活，能及時了解并學習前沿的新技術，只有與時俱進，才能有更遼闊的發展空間。
web前端的分類和門派
web前端開發：必看的書籍資料
HTML + CSS這部分建議在在線教程上學習，邊學邊練，每個屬性后還有在線測試。然后過一遍之后可以模仿一些網站做些頁面。記住這個一定要多練、多練、多練 ，最重要的事兒還得我說三遍?
JavaScript要學的內容實在很多，如果沒有其他編程語言的基礎的話，學起來可能要費些力，還是建議先通過在線教程學習一些基本語法和定義。
然后你必須要看書，然后實踐(好多人問有沒有快速捷徑，我只能告訴你：如果有捷徑，碼農們就不用天天如此苦逼了吧)。
web前端書籍必讀、必買
最好按照我給的順序入門，這樣不會讓你枯燥，想放棄
1 . JavaScript
先說 JavaScript，因為前面說了，CSS最好跟著視頻練習，畢竟都是可視化的，像做藝術。
《JavaScript DOM編程藝術》
最好的JS入門書籍，最讓人有興趣讀完的那種書。
它通過一個幻燈片案例，從頭到尾教你實現出來，最后效果實現的同時，基本的JS常用屬性，你也就滾瓜爛熟了，很有成就感。一目了然地告訴你如何用JS操作DOM(這是瀏覽器端編程的基本功)，還灌輸了最符合標準的編程理念。
《JavaScript高級程序設計》
又稱紅寶書，雅虎首席前端架構師，YUI的作者Zakas出品。雖然書名帶了“高級”二字，但是講得都很基礎的屬性內容，事無巨細。關鍵一點是翻譯的也很到位，并不是如嚼蠟一般，這很重要。看此書，我建議配著下面的犀牛書一起看效果更佳。
《JavaScript權威指南》
著名的淘寶前端團隊翻譯的，看譯者列表都是一堆前期大神。
這本書又叫犀牛書，被國人譽為：JavaScript開發者的圣經。網上對此書評價很多很好，大概意思是說這本書是一本JavaScript文檔手冊，更適合當作字典和備忘錄查詢來使用。
《JavaScript語言精粹》
作者是大名鼎鼎的 【老道】，他是 JSON格式的發明和維護者，也有很多著作和對JS這門語言的超多貢獻，可見此人功力絕對頂級!
這本書，屬于稍微入門以后看的，了解了一些中高級概念比如：閉包、原型鏈、作用域鏈、繼承封裝等以后，看此書有如神助，看一頁相當于犀牛書幾十頁的講解。
2 . CSS
CSS類，如果視頻看完了，練習的熟練了，你還需要一些書的推薦和查詢，也是有必要的，我再來給你羅列幾本經典的收藏書，買不買均可的。。
《Head first HTML&CSS》
《CSS權威指南(第三版)》
最權威的CSS書籍，除了閱讀W3C的文檔外的不二選擇(就是翻譯太操蛋，可能有的詞你以為是火星語，不過不影響閱讀)。有時間可以反復看，有css3內容，并當做字典隨時查。類似犀牛書。
《圖解CSS3：核心技術與案例實踐》
這本書講解的是最新的CSS3(前幾本書停留在CSS2.1時代，2.1是基礎)，CSS3也是必學的，不然真的跟不上時代了。
《CSS禪意花園》
這本書很值得期待，我看過PDF版本的，那時候還沒翻譯出來，翻譯的也一般，不過作者是巨牛逼的，聽說對css理解的就像自己的左右手，光靠寫CSS他年薪就輕松百萬了。。汗顏!思路清晰，圖文并茂，還解決一些疑難雜癥和高級技巧，類似于JS的語言精粹了，大神級別。