多朋友想學(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>
<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ì)就是水到渠成的事情了 。
說(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是由百度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是一個(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 也是一個(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
嚴(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í)筆記。
將文本設(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>
顯示效果如下:
對(duì)文字的格式做相應(yīng)的變化,如粗體、斜體、底線、上標(biāo)、下標(biāo)等。常用的字體修飾標(biāo)簽有以下幾種。
<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>
顯示效果如下:
設(shè)置文檔的字體,改變其屬性,對(duì)文本進(jìn)行不同的設(shè)置,包含字體、大小、顏色等
我們看看大小的對(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>
顯示效果如下:
在不同文檔、同一個(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è)多媒體文件等。
用于設(shè)定鏈接地址,其鏈接地址必須是URL地址,必須給出具體的路徑。其中URL地址可以為下面內(nèi)容:
<a href="http://www.baidu.com">百度地址</a>
點(diǎn)擊頁(yè)面的百度地址可直接跳轉(zhuǎn)到百度頁(yè)面
<a href="cainiao-跳轉(zhuǎn)后頁(yè)面.html">跳轉(zhuǎn)</a>
跳轉(zhuǎn)前頁(yè)面
點(diǎn)擊跳轉(zhuǎn)后直接跳轉(zhuǎn)到新的本機(jī)頁(yè)面
<a href="index.txt">txt文件,打開(kāi)進(jìn)行編輯</a>
<a href="index.wav">播放聲音</a>
<!--在新的窗口中打開(kāi)百度首頁(yè)-->
<a href="http://www.baidu.com" target=_blank>百度地址</a>
瀏覽器會(huì)以浮動(dòng)提示的方式顯示解釋信息
<a href="http://www.baidu.com" target=_blank title="百度歡迎你">百度地址</a>
實(shí)際效果展示:
利用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>
<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">
<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">
<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">
<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">
創(chuàng)建一個(gè)表格,有屬性width(寬度)、height(高度)、border(邊框)、bordercolor(邊框顏色)、cellspacing、cellpadding
創(chuàng)建表格中的每一行,有屬性align、valign、bgcolor
創(chuàng)建表格的中每一列,有屬性
設(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>
顯示如下:
一個(gè)瀏覽器文檔窗口一般只能顯示一個(gè)網(wǎng)頁(yè)文件,但是使用框架標(biāo)簽就可以將一個(gè)瀏覽器文檔窗口分割成多個(gè)子窗口,每個(gè)子窗口中都可以顯示一個(gè)獨(dú)立的網(wǎng)頁(yè)文件。
多個(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)了
主要用于采集和提交用戶輸入的信息,使網(wǎng)頁(yè)具有交互功能。有屬性:
這個(gè)標(biāo)簽必須放在<form>……</form>標(biāo)簽之間。有屬性type,具體參數(shù)值有:
<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ì)~
*請(qǐng)認(rèn)真填寫(xiě)需求信息,我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。