學(xué)習(xí)網(wǎng)頁(yè)制作并不難，HTML菜鳥(niǎo)教程，從這里開(kāi)始第一課學(xué)習(xí)

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

HTML是什么？

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

如何查看HTML？

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

當(dāng)然也可以通過(guò)專(zhuān)業(yè)的網(wǎng)頁(yè)制作軟件以及各種文本編輯器來(lái)查看。

HTML有什么用？

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

HTML如何入門(mén)？

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

HTML案例

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

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

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

如何編輯HTML?

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

總結(jié)

以上是學(xué)習(xí)HTML菜鳥(niǎo)教程的第一課，首先保持一個(gè)良好的心態(tài)來(lái)學(xué)習(xí)，有好的心態(tài)，知識(shí)方面只要循序漸進(jìn)，學(xué)會(huì)就是水到渠成的事情了。

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

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

當(dāng)年本菜鳥(niǎo)做網(wǎng)站的時(shí)候，曾經(jīng)自己用javascript編寫(xiě)過(guò)一個(gè)比較簡(jiǎn)單的在線HTML編輯器，用于文本內(nèi)容的排版。但是因?yàn)樗接邢蓿芏喙δ芏紵o(wú)法實(shí)現(xiàn)。后來(lái)有了eWebEditor，功能確實(shí)強(qiáng)大，但這個(gè)編輯器是個(gè)收費(fèi)的軟件，并且正因?yàn)楣δ軓?qiáng)大，也就顯得過(guò)重，一些輕量的場(chǎng)合不是太適用。那有沒(méi)有既免費(fèi)、又功能強(qiáng)大、還能適應(yīng)輕量場(chǎng)合的在線HTML編輯器呢？

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

一、百度出品的UEditor

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

百度UEditor

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

百度UEditor界面

二、xhEditor開(kāi)源HTML編輯器

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

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

主要特點(diǎn)：

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

三、KindEditor開(kāi)源HTML編輯器

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

KindEditor界面

主要特點(diǎn)：

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

四、阿里的KISSY

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

阿里的KISSY

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

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

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

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

文本標(biāo)簽

標(biāo)題標(biāo)簽<hn>

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

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

顯示效果如下：

字體修飾標(biāo)簽

對(duì)文字的格式做相應(yīng)的變化，如粗體、斜體、底線、上標(biāo)、下標(biāo)等。常用的字體修飾標(biāo)簽有以下幾種。

<b>……</b>:指定文字為粗體字
<i>……</i>:指定文字為斜體字
<u>……</u>:指定文字為帶有下劃線
<tt>……</tt>:指定文字為打字機(jī)效果
<sup>……</sup>:指定文字為上標(biāo)
<sub>……</sub>:指定文字為小標(biāo)
<em>……</em>:對(duì)某段文字進(jìn)行強(qiáng)調(diào)，通常用斜體字顯示出來(lái)
<strong>……</strong>:對(duì)文本進(jìn)行強(qiáng)調(diào)，通常用粗體字顯示出來(lái)我們看下加粗前后對(duì)比，其它效果類(lèi)似方式

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

顯示效果如下：

字體標(biāo)簽<font>

設(shè)置文檔的字體，改變其屬性，對(duì)文本進(jìn)行不同的設(shè)置，包含字體、大小、顏色等

size
face
color

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

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

顯示效果如下：

超鏈接標(biāo)簽

超鏈接的定義

在不同文檔、同一個(gè)文檔的不同段落之前相互跳轉(zhuǎn)。html鏈接包含兩部分：錨標(biāo)和目標(biāo)點(diǎn)。錨標(biāo)就是鏈接的源點(diǎn)，當(dāng)鼠標(biāo)被移動(dòng)到錨標(biāo)處時(shí)會(huì)變成小手狀。此時(shí)，用戶通過(guò)點(diǎn)擊鼠標(biāo)就可以到達(dá)鏈接的目標(biāo)點(diǎn)。目標(biāo)點(diǎn)可以是一張圖片、一個(gè)網(wǎng)絡(luò)文件、一個(gè)多媒體文件等。

屬性href（hypertext reference）

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

網(wǎng)站：可以設(shè)置ip地址或者是網(wǎng)站的網(wǎng)址。

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

點(diǎn)擊頁(yè)面的百度地址可直接跳轉(zhuǎn)到百度頁(yè)面

網(wǎng)頁(yè)：鏈接到本機(jī)的網(wǎng)頁(yè)。

<a href="cainiao-跳轉(zhuǎn)后頁(yè)面.html">跳轉(zhuǎn)</a>

跳轉(zhuǎn)前頁(yè)面

點(diǎn)擊跳轉(zhuǎn)后直接跳轉(zhuǎn)到新的本機(jī)頁(yè)面

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

<a href="index.txt">txt文件，打開(kāi)進(jìn)行編輯</a>
<a href="index.wav">播放聲音</a>

網(wǎng)頁(yè)上的書(shū)簽：通常使用在網(wǎng)頁(yè)的長(zhǎng)度超過(guò)屏幕時(shí)，可以使用書(shū)簽直接跳轉(zhuǎn)到該書(shū)簽指向的具體內(nèi)容，節(jié)省移動(dòng)滾動(dòng)條的時(shí)間。

屬性target

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

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

屬性title

瀏覽器會(huì)以浮動(dòng)提示的方式顯示解釋信息

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

實(shí)際效果展示：

屬性name

利用name屬性作為錨定位，可以實(shí)現(xiàn)文檔內(nèi)部的定位。這個(gè)需要我們?cè)趦蓚€(gè)<a>標(biāo)簽中，一個(gè)寫(xiě)明name，作為一個(gè)錨點(diǎn)；另外一個(gè)寫(xiě)明herf，用于指向錨點(diǎn)。如下面的示例，點(diǎn)擊“百度地址”會(huì)跳轉(zhuǎn)到“這是測(cè)試跳轉(zhuǎn)處”（當(dāng)頁(yè)面超過(guò)一頁(yè)長(zhǎng)度時(shí)，測(cè)試效果更明顯）

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥(niǎo)小白的學(xué)習(xí)分享</title>
</head>

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

圖像標(biāo)簽

圖片標(biāo)簽<img 屬性=“屬性值”>

屬性src：來(lái)定義圖片的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ī)定圖片的大小。屬性值都是數(shù)字，表示圖像寬度和高度所占的像素點(diǎn)數(shù)。默認(rèn)是瀏覽器窗口將自動(dòng)調(diào)整圖像顯示尺寸

<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：設(shè)置圖片對(duì)齊方式，垂直對(duì)齊（居上、居中和居下）和水平對(duì)齊（居左、居中和居右）。

<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：默認(rèn)圖片是沒(méi)有邊框的，可以利用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">

表格標(biāo)簽

表<table>

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

行<tr>

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

列<td>

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

表頭<th>

設(shè)置表頭

我們現(xiàn)在建造一個(gè)表

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

</body>
</html>

顯示如下：

框架標(biāo)簽

框架<frame>

一個(gè)瀏覽器文檔窗口一般只能顯示一個(gè)網(wǎng)頁(yè)文件，但是使用框架標(biāo)簽就可以將一個(gè)瀏覽器文檔窗口分割成多個(gè)子窗口，每個(gè)子窗口中都可以顯示一個(gè)獨(dú)立的網(wǎng)頁(yè)文件。

框架集<frameset>

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

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥(niǎo)小白的學(xué)習(xí)分享</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>

最終我們將三個(gè)頁(yè)面在同一個(gè)web窗口展示出來(lái)了

表單標(biāo)簽

表單標(biāo)簽<form>

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

action（處理提交數(shù)據(jù)的頁(yè)面）
method（提交方式（get、post、request））
target（）

用戶輸入?yún)^(qū)域標(biāo)簽<input type="">

這個(gè)標(biāo)簽必須放在<form>……</form>標(biāo)簽之間。有屬性type，具體參數(shù)值有：

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

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥(niǎo)小白的學(xué)習(xí)分享</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>復(fù)選框<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>

實(shí)現(xiàn)效果：

好了，今天的內(nèi)容就分享完了，如有什么意見(jiàn)和建議可以私信菜鳥(niǎo)小白哦，我們下期再會(huì)~

在線咨詢

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

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷(xiāo)服務(wù)商

學(xué)習(xí)網(wǎng)頁(yè)制作并不難，HTML菜鳥(niǎo)教程，從這里開(kāi)始第一課學(xué)習(xí)

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

一、百度出品的UEditor

二、xhEditor開(kāi)源HTML編輯器

三、KindEditor開(kāi)源HTML編輯器

四、阿里的KISSY

文本標(biāo)簽

標(biāo)題標(biāo)簽<hn>

字體修飾標(biāo)簽

字體標(biāo)簽<font>

超鏈接標(biāo)簽

超鏈接的定義

屬性href（hypertext reference）

屬性target

屬性title

屬性name

圖像標(biāo)簽

圖片標(biāo)簽<img 屬性=“屬性值”>

表格標(biāo)簽

表<table>

行<tr>

列<td>

表頭<th>

框架標(biāo)簽

框架<frame>

框架集<frameset>

表單標(biāo)簽

表單標(biāo)簽<form>

用戶輸入?yún)^(qū)域標(biāo)簽<input type="">

您的項(xiàng)目需求