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

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

HTML是什么？

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

如何查看HTML？

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

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

HTML有什么用？

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

HTML如何入門？

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

HTML案例

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

<!DOCTYPE html> 聲明為 HTML5 文檔
<html> 元素是 HTML 頁面的根元素
<head> 元素包含了文檔的元（meta）數據，如 <meta charset="utf-8"> 定義網頁編碼格式為 utf-8。
<title> 描述了網頁的標題
<body> 元素包含了可見的頁面內容，因為下面是最簡單的案例，所以只有幾行，實際網頁一般都有很多行。
<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)上常見的記事本，總之只要自己覺得方便就好。

總結

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

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

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

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

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

一、百度出品的UEditor

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

百度UEditor

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

百度UEditor界面

二、xhEditor開源HTML編輯器

xhEditor是一個基于jQuery開發(fā)的簡單迷你并且高效的可視化HTML編輯器，基于網絡訪問并且兼容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、博客、論壇、商城等互聯網平臺上完美的嵌入運行，能夠非常靈活簡單的和您的系統(tǒng)實現完美的無縫銜接。

主要特點：

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

三、KindEditor開源HTML編輯器

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

KindEditor界面

主要特點：

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

四、阿里的KISSY

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

阿里的KISSY

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

關于菜鳥手記：

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

天我們繼續(xù)看看html的學習筆記。

文本標簽

標題標簽<hn>

將文本設置為標題顯示的標簽對。設定標題字體大小，n=1（大）~6（小），標題大小一共有6種，也就是從<h1>……</h1>到<h6>……</h6>

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<h1>我是菜鳥小白</h1>
<h2>你們的好朋友</h2>
<h3>  讓我們一起學習吧！！！</h3>
</body>
</html>

顯示效果如下：

字體修飾標簽

對文字的格式做相應的變化，如粗體、斜體、底線、上標、下標等。常用的字體修飾標簽有以下幾種。

<b>……</b>:指定文字為粗體字
<i>……</i>:指定文字為斜體字
<u>……</u>:指定文字為帶有下劃線
<tt>……</tt>:指定文字為打字機效果
<sup>……</sup>:指定文字為上標
<sub>……</sub>:指定文字為小標
<em>……</em>:對某段文字進行強調，通常用斜體字顯示出來
<strong>……</strong>:對文本進行強調，通常用粗體字顯示出來我們看下加粗前后對比，其它效果類似方式

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<b>我是菜鳥小白呀</b>
我是菜鳥小白呀
</body>
</html>

顯示效果如下：

字體標簽<font>

設置文檔的字體，改變其屬性，對文本進行不同的設置，包含字體、大小、顏色等

size
face
color

我們看看大小的對比區(qū)別

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
<body bgcolor="11ffff" text="000000">
我是菜鳥小白
<font size="20px">我是菜鳥小白呀</font>
</body>
</html>

顯示效果如下：

超鏈接標簽

超鏈接的定義

在不同文檔、同一個文檔的不同段落之前相互跳轉。html鏈接包含兩部分：錨標和目標點。錨標就是鏈接的源點，當鼠標被移動到錨標處時會變成小手狀。此時，用戶通過點擊鼠標就可以到達鏈接的目標點。目標點可以是一張圖片、一個網絡文件、一個多媒體文件等。

屬性href（hypertext reference）

用于設定鏈接地址，其鏈接地址必須是URL地址，必須給出具體的路徑。其中URL地址可以為下面內容：

網站：可以設置ip地址或者是網站的網址。

<a href="http://www.baidu.com">百度地址</a>

點擊頁面的百度地址可直接跳轉到百度頁面

網頁：鏈接到本機的網頁。

<a href="cainiao-跳轉后頁面.html">跳轉</a>

跳轉前頁面

點擊跳轉后直接跳轉到新的本機頁面

可執(zhí)行文件：當文件擴展名不是html、asp等時，會將鏈接到的文件下載到本地計算機或直接執(zhí)行。如果是文本文件（如word格式），則在瀏覽器中打開文件并進行編輯。

<a href="index.txt">txt文件，打開進行編輯</a>
<a href="index.wav">播放聲音</a>

網頁上的書簽：通常使用在網頁的長度超過屏幕時，可以使用書簽直接跳轉到該書簽指向的具體內容，節(jié)省移動滾動條的時間。

屬性target

屬性值分別為_blank、_self、_parent、_top。
target=_blank：在新的瀏覽器窗口中打開連接的文檔，同時保持當前窗口不變
target=_self：將鏈接的文檔載入鏈接所在的同一框架或窗口，默認設置為_self
target=_parent：將鏈接的文檔載入該鏈接所在框架的父框架或父窗口。如果包含鏈接的框架不是嵌套框架，則所鏈接的文檔載入整個瀏覽器窗口。
target=_top：將鏈接的文檔載入整個瀏覽器窗口，從而刪除所有框架我們以“_blank”為例，可以按照如下方式編寫：

<!--在新的窗口中打開百度首頁-->
<a href="http://www.baidu.com" target=_blank>百度地址</a>

屬性title

瀏覽器會以浮動提示的方式顯示解釋信息

<a href="http://www.baidu.com" target=_blank title="百度歡迎你">百度地址</a>

實際效果展示：

屬性name

利用name屬性作為錨定位，可以實現文檔內部的定位。這個需要我們在兩個<a>標簽中，一個寫明name，作為一個錨點；另外一個寫明herf，用于指向錨點。如下面的示例，點擊“百度地址”會跳轉到“這是測試跳轉處”（當頁面超過一頁長度時，測試效果更明顯）

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>

<body bgcolor="11ffff" text="000000">
<a name=ceshi>這是測試跳轉</a>
<a href="#ceshi" title="百度歡迎你">百度地址</a>
?
</body>
</html>

圖像標簽

圖片標簽<img 屬性=“屬性值”>

屬性src：來定義圖片的URL（統(tǒng)一資源定位符）地址，是圖片必不可少的屬性。用法形如：<img src="url">

<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

屬性height和width：規(guī)定圖片的大小。屬性值都是數字，表示圖像寬度和高度所占的像素點數。默認是瀏覽器窗口將自動調整圖像顯示尺寸

<img heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

屬性align：設置圖片對齊方式，垂直對齊（居上、居中和居下）和水平對齊（居左、居中和居右）。

<img align="right" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

屬性border：默認圖片是沒有邊框的，可以利用border屬性添加邊框。

<img border="20px" align="rows" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

表格標簽

表<table>

創(chuàng)建一個表格，有屬性width（寬度）、height（高度）、border（邊框）、bordercolor（邊框顏色）、cellspacing、cellpadding

行<tr>

創(chuàng)建表格中的每一行，有屬性align、valign、bgcolor

列<td>

創(chuàng)建表格的中每一列，有屬性

表頭<th>

設置表頭

我們現在建造一個表

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
?
<body bgcolor="11ffff" text="000000">
?
<table border>
<th>測試表頭</th>
?
<tr>
<td>這是第一行第一列</td>
<td>這是第一行第二列</td>
<td>這是第一行第三列</td>
</tr>
<tr>
<td>這是第二行第一列</td>
<td>這是第二行第二列</td>
<td>這是第二行第三列</td>
</tr>
</table>

</body>
</html>

顯示如下：

框架標簽

框架<frame>

一個瀏覽器文檔窗口一般只能顯示一個網頁文件，但是使用框架標簽就可以將一個瀏覽器文檔窗口分割成多個子窗口，每個子窗口中都可以顯示一個獨立的網頁文件。

框架集<frameset>

多個框架組成了一個框架集（Frameset），定義了各個框架如何排列的。有屬性rows和cols，兩個屬性至少選擇一個，否則瀏覽器只顯示第一個定義的框架。

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
?
<frameset cols="25%,50%,25%">
<frame src="https://www.baidu.com"></frame>
<frame src="https://www.qq.com"></frame>
<frame src="https://www.sina.com"></frame>
</frameset>
?
</html>

最終我們將三個頁面在同一個web窗口展示出來了

表單標簽

表單標簽<form>

主要用于采集和提交用戶輸入的信息，使網頁具有交互功能。有屬性：

action（處理提交數據的頁面）
method（提交方式（get、post、request））
target（）

用戶輸入區(qū)域標簽<input type="">

這個標簽必須放在<form>……</form>標簽之間。有屬性type，具體參數值有：

text（單行文本輸入框）
textarea（多行輸入框）
password（密碼輸入框）
radio（單選框）
checkbox（復選框）
select（下拉框）
submit（提交）
reset（重置）
image（圖片提交）
file（上傳文件）

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學習分享</title>
</head>
?
<body>
<p>用戶名<input type="text"></input></p>
<p>多行輸入框<textarea></textarea></p>
<p>密  碼<input type="password"></input></p>
<p>單選框<input type="radio"></input></p>
<p>復選框<input type="checkbox"></input></p>
<p>下拉框<input type="select"></input></p>
<p>提交<input type="submit"></input></p>
<p>重置<input type="reset"></input></p>
<p>圖片提交<input type="image"></input></p>
<p>文件提交<input type="file"></input></p>
?
</body>
</html>

實現效果：

好了，今天的內容就分享完了，如有什么意見和建議可以私信菜鳥小白哦，我們下期再會~

在線咨詢

上一篇：jQuery - 刪除元素
下一篇：20 道必看的 Vue 面試題 - 原力計劃

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商

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

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

一、百度出品的UEditor

二、xhEditor開源HTML編輯器

三、KindEditor開源HTML編輯器

四、阿里的KISSY

文本標簽

標題標簽<hn>

字體修飾標簽

字體標簽<font>

超鏈接標簽

超鏈接的定義

屬性href（hypertext reference）

屬性target

屬性title

屬性name

圖像標簽

圖片標簽<img 屬性=“屬性值”>

表格標簽

表<table>

行<tr>

列<td>

表頭<th>

框架標簽

框架<frame>

框架集<frameset>

表單標簽

表單標簽<form>

用戶輸入區(qū)域標簽<input type="">

您的項目需求