學習網(wǎng)頁制作并不難，HTML菜鳥教程，從這里開始第一課學習

多朋友想學一下網(wǎng)頁制作，上網(wǎng)一看，只要涉及到網(wǎng)頁制作，都離不開HTML這個詞語，HTML是HyperText Markup Language的簡稱，想學習HTML語言，先得了解一些基本知識，今天這邊內(nèi)容可以作為學習HTML的菜鳥教程第一課。

HTML是什么？

一般我們說HTML是指超文本標記語言，英文名稱為HyperText Markup Language，簡稱HTML，它是目前互聯(lián)網(wǎng)上應用最廣泛的語言。

如何查看HTML？

拿最常見的網(wǎng)頁為例，如果用大家熟悉的IE瀏覽器的話，直接在網(wǎng)頁上點右鍵，選擇“查看源”即可查看當前網(wǎng)頁的HTML源碼；如果是其他瀏覽器的話，多數(shù)情況下點擊右鍵，選擇“查看源碼”或者類似“查看網(wǎng)頁源代碼”這樣的選項即可查看。

當然也可以通過專業(yè)的網(wǎng)頁制作軟件以及各種文本編輯器來查看。

HTML有什么用？

HTML語言可以方便地將網(wǎng)絡(luò)上存儲于不同位置的文字、圖片、聲音、視頻等內(nèi)容組織起來，方便用戶瀏覽。對于我們來說，HTML是學習網(wǎng)頁制作的基本功，熟練掌握HTML這項基本功，可以為以后的學習和工作打下良好的基礎(chǔ)。

HTML如何入門？

要學習任何編程語言，都不好好高騖遠，HTML的入門很簡單，但是也要遵循學習的基本步驟，選擇一本入門書籍，循序漸進地去學習每一張的內(nèi)容。一邊學習，一邊查看網(wǎng)頁代碼對照來學，提升入門速度。

HTML案例

下面就是最基本的HTML案例，在這個案例中，用的是HTML5，

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數(shù)據(jù)，如 <meta charset="utf-8"> 定義網(wǎng)頁編碼格式為 utf-8。
<title> 描述了網(wǎng)頁的標題
<body> 元素包含了可見的頁面內(nèi)容，因為下面是最簡單的案例，所以只有幾行，實際網(wǎng)頁一般都有很多行。
<h1> 定義一個大標題
<p> 元素定義一個段落，也就是大家常說的分段。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>HTML菜鳥教程(runoob.com)</title>
</head>
<body>
    <h1>我的第一個標題</h1>
    <p>我的第一個段落。</p>
</body>
</html>

如何編輯HTML?

這個就很多了，比如最出名的Dreamweaver，當然如果熟練之后，可以選擇任意自己喜歡的編輯器，一些小的改動或者一小段代碼的話，也可以用各種常見的文本編輯器來處理，比如我們在wodows系統(tǒng)上常見的記事本，總之只要自己覺得方便就好。

總結(jié)

以上是學習HTML菜鳥教程的第一課，首先保持一個良好的心態(tài)來學習，有好的心態(tài)，知識方面只要循序漸進，學會就是水到渠成的事情了。

普及一下基本知識：什么叫在線HTML編輯器？

說得簡單點，在線HTML編輯器就是在網(wǎng)上發(fā)帖子、寫博客的那個帶編輯功能的框框，可以進行圖文排版等操作。

當年本菜鳥做網(wǎng)站的時候，曾經(jīng)自己用javascript編寫過一個比較簡單的在線HTML編輯器，用于文本內(nèi)容的排版。但是因為水平有限，很多功能都無法實現(xiàn)。后來有了eWebEditor，功能確實強大，但這個編輯器是個收費的軟件，并且正因為功能強大，也就顯得過重，一些輕量的場合不是太適用。那有沒有既免費、又功能強大、還能適應輕量場合的在線HTML編輯器呢？

答案肯定是有的。這首先要感謝這些年來有一批奉獻精神的程序猿們不斷推進共享軟件的開發(fā)，讓我們得以享受他們的成果。

一、百度出品的UEditor

UEditor是由百度web前端研發(fā)部開發(fā)所見即所得富文本web編輯器，具有輕量，可定制，注重用戶體驗等特點，開源基于MIT協(xié)議，允許自由使用和修改代碼。特別要說的是，頭條號后臺發(fā)布文章的編輯器就是用的UEditor!

百度UEditor

UEditor還有一個輕量版的，叫做UMeditor，簡稱UM。UM是為滿足廣大門戶網(wǎng)站對于簡單發(fā)帖框，或者回復框需求所定制的在線HTML編輯器。主要特點是容量和加載速度上的改變，主文件的代碼量為139k，而且放棄了使用傳統(tǒng)的iframe模式，采用了div的加載方式，以達到更快的加載速度和零加載失敗率。UM的第一個使用者是百度貼吧，以經(jīng)受貼吧每天幾億的pv的考驗，功能設(shè)計應當是最優(yōu)化的了。當然隨著代碼的減少，UM的功能對于UE來說還是有所減少，但也有增加，比如拖拽圖片上傳，chrome的圖片拖動改變大小等。

百度UEditor界面

二、xhEditor開源HTML編輯器

xhEditor是一個基于jQuery開發(fā)的簡單迷你并且高效的可視化HTML編輯器，基于網(wǎng)絡(luò)訪問并且兼容IE 6.0+,Firefox 3.0+,Opera 9.6+,Chrome 1.0+,Safari 3.22+。

xhEditor完全基于Javascript開發(fā)，可以應用在任何的服務端語言環(huán)境下，例如：PHP、ASP、ASP.NET、JAVA等。可以在CMS、博客、論壇、商城等互聯(lián)網(wǎng)平臺上完美的嵌入運行，能夠非常靈活簡單的和您的系統(tǒng)實現(xiàn)完美的無縫銜接。

主要特點：

精簡迷你：初始加載4個文件，包括：1個js(50k)+2個css(10k)+1個圖片(5k)，總共65k。若js和css文件進行g(shù)zip壓縮傳輸，可以進一步縮減為24k左右。
使用簡單：簡單的調(diào)用方式，加一個class屬性就能將textarea變成一個功能豐富的可視化編輯器。
無障礙訪問：提供WAI-ARIA全面支持，全鍵盤精細操作，全程語音向?qū)В峁┩昝罒o障礙訪問體驗，充分滿足殘疾人的上網(wǎng)需求。
內(nèi)置Ajax上傳：內(nèi)置強大的Ajax上傳，包括HTML4和HTML5上傳支持(多文件上傳、真實上傳進度及文件拖放上傳)，剪切板上傳及遠程抓取上傳。
Word自動清理：實現(xiàn)Word代碼自動檢測并清理，生成代碼最優(yōu)化精簡，卻不丟失細節(jié)效果。
UBB可視化編輯：支持UBB可視化編輯，在獲得安全高效代碼存儲的同時，又能享受可視化編輯的便捷。

三、KindEditor開源HTML編輯器

KindEditor 也是一個開源的在線HTML編輯器，使用 JavaScript 編寫，可以無縫地與 Java、.NET、PHP、ASP 等程序集成，比較適合在 CMS、商城、論壇、博客、Wiki、電子郵件等互聯(lián)網(wǎng)應用上使用。本菜鳥感覺這個編輯器上手比較容易，功能也很強大，界面比較友好，很適合菜鳥使用。可惜的是最近好像停止更新了，官網(wǎng)好象也能不正常訪問。

KindEditor界面

主要特點：

快速：體積小，加載速度快
開源：開放源代碼，高水平，高品質(zhì)
底層：內(nèi)置自定義 DOM 類庫，精確操作 DOM
擴展：基于插件的設(shè)計，所有功能都是插件，可根據(jù)需求增減功能
風格：修改編輯器風格非常容易，只需修改一個 CSS 文件
兼容：支持大部分主流瀏覽器，比如 IE、Firefox、Safari、Chrome、Opera

四、阿里的KISSY

嚴格來說，KISSY不僅僅是一個在線HTML編輯器，而是由阿里集團前端工程師們發(fā)起創(chuàng)建的一個開源 JS 框架，具有跨終端、模塊化、使用簡單的特點。里面帶有HTML編輯器這個模塊。

阿里的KISSY

正因為KISSY采取模塊化設(shè)計，因此具有高擴展性、組件齊全，接口一致、自主開發(fā)、適合多種應用場景等優(yōu)點。KISSY 除了完備的工具集合諸如 DOM、Event、Ajax、Anim 等，KISSY 還面向團隊協(xié)作做了獨特設(shè)計，提供了經(jīng)典的面向?qū)ο蟆討B(tài)加載、性能優(yōu)化解決方案。作為一款全終端支持的 JavaScript 框架，KISSY還為移動終端做了大量適配和優(yōu)化，搞移動web開發(fā)的可以好好研究一下KISSY的運用。

關(guān)于菜鳥手記：

菜鳥最怕就是看大神的攻略，全是術(shù)語看頭就頭大！本人作為一名對啥都感興趣的資深菜鳥，潛心研究各類技術(shù)二十余年，做網(wǎng)站、寫程序、搞美工、練書法、學畫畫、作文章、抓管理、裝逼格，屬于搞IT里面最懂美工的，搞HR里面最懂畫畫的，搞文字里面最懂程序的，最終一事無成，博而不精，徒留一堆手記。從菜鳥角度寫手記，同樣的”白”更易懂，你值得擁有！感興趣的，請別忘點右角關(guān)注菜鳥手記。

薦幾個免費視頻、音頻素材網(wǎng)站，記得收藏哦！

1、菜鳥圖庫

https://www.sucai999.com/video.html?v=NTYwNDUx

站內(nèi)有超多視頻素材，各種類型的都有像自然、交通、科學、動物等等都能找到，全部都按照標簽分類好了，找起來非常方便。還有超多音頻、音效素材，網(wǎng)絡(luò)流行的各種熱梗音效這里都能找到。

重點是可以免費下載，還能商用哦，非常不錯的一個素材網(wǎng)站。

2、Pixabay

https://pixabay.com/

Pixabay是一個國外免版稅的素材網(wǎng)站，里面有很多圖片、視頻、音頻等素材，很多自媒體人都在用這個網(wǎng)站。

3、愛給網(wǎng)

https://www.aigei.com/

一個非常不錯的素材網(wǎng)站，主要以音頻素材為主，全部都分類好了板塊，找起來很方便，下載直接找免費商用區(qū)。視頻素材也很多，但大部分收費，還有下載次數(shù)限制。

4、Mixkit

https://mixkit.co/

這個網(wǎng)站里面的PR、AE、達芬奇模板都是免費的，使用無須署名，也無需注冊就能免費下載，還有很多音頻、音樂等素材也都是免費的。雖然他是個國外網(wǎng)站，但是瀏覽起來一點也不卡頓。

5、mazwai

https://mazwai.com/

網(wǎng)站主要以視頻素材為主，數(shù)量非常多，主要以自然、城市交通、航拍等一系列作品為主。全站視頻素材無需注冊就能免費下載，還可以商用。但是網(wǎng)站更新比較慢，很多都是之前的素材了。

在線咨詢

上一篇：web開發(fā)：超贊的HTML5動畫高級特效
下一篇：3行css實現(xiàn)循環(huán)動畫，順便說說瀏覽器兼容性

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。