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

          電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理

          免費(fèi)咨詢熱線:

          學(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ì)~


          主站蜘蛛池模板: 亚洲国产专区一区| 亚洲国产精品一区二区第四页| 精品一区二区三区免费| 色欲AV蜜桃一区二区三| 性色A码一区二区三区天美传媒 | 麻豆AV天堂一区二区香蕉| 精品国产一区二区三区久久影院| 中文字幕日本一区| 亚洲日本va一区二区三区| 人妻少妇AV无码一区二区| 国产乱码精品一区二区三区麻豆 | 久久久不卡国产精品一区二区| 日韩精品成人一区二区三区| 亚洲高清偷拍一区二区三区 | 福利一区福利二区| 日韩一区二区三区在线| 深田咏美AV一区二区三区| 国产麻豆精品一区二区三区| 五十路熟女人妻一区二区| 久久无码人妻一区二区三区午夜 | 午夜视频一区二区| 免费无码一区二区三区蜜桃大| 亚洲av乱码中文一区二区三区| 中文激情在线一区二区| 人妻视频一区二区三区免费| 亚洲AV香蕉一区区二区三区| 成人丝袜激情一区二区| 在线观看日韩一区| 亚洲一区日韩高清中文字幕亚洲 | 久久精品国产AV一区二区三区| 91久久精品国产免费一区| 91视频国产一区| 国产Av一区二区精品久久| 国产一区中文字幕| 四虎永久在线精品免费一区二区 | 国产成人一区二区三区精品久久| 精品国产免费观看一区 | 亚洲男女一区二区三区| 麻豆AV天堂一区二区香蕉| 日韩精品一区二三区中文| 亚洲熟女少妇一区二区|