整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
全棧攻城獅-每日更新原創(chuàng)IT編程技術(shù)及日常實用視頻。
主要內(nèi)容：正式引入HTML網(wǎng)頁開發(fā)，學(xué)習(xí)并了解HTML的相關(guān)知識。變身Web開發(fā)達(dá)人，做全棧程序員。這是以第一課，希望以我的方式，你將學(xué)會HTML這門課程。
今天的話，主要講解一下HTML相關(guān)知識，同樣在接下來的一段時間的安排中，也以HTML為主。崇尚全棧，也就意味著我們，需要學(xué)習(xí)主流的技術(shù)知識。在前一段時間內(nèi)，主要講解了.Net的只是教程。當(dāng)然.NET并沒有完畢。
C#語言
只是在這里把HTML穿插進(jìn)來，一則鞏固自己所得，二來學(xué)習(xí)一下這門非常簡單的HTML技術(shù)。學(xué)習(xí)完畢HTML之后則會，繼續(xù)進(jìn)行基礎(chǔ)加強(qiáng)、數(shù)據(jù)庫、MVC等教程的協(xié)作工作。
PDF文檔
同時在前一個階段內(nèi)，講解的并不是很好，在這個HTML階段內(nèi)，則會吸取教訓(xùn)，爭取寫出更符合初學(xué)者學(xué)習(xí)的技術(shù)教程。當(dāng)然前面的課程也會不斷的修正，最后我會生成PDF的文檔，發(fā)給大家。
HTML概述
HTML，超文本標(biāo)記語言，超文本就意味著有多于文字的形式，比如包含超鏈接、圖片、視頻、動畫等形式。HTML是應(yīng)用在網(wǎng)站網(wǎng)頁展現(xiàn)的一種語法結(jié)構(gòu)。我們在使用瀏覽器瀏覽網(wǎng)頁的時候，看到的界面都是由HTML代碼表現(xiàn)出來的。HMTL可以說是一種展示文字圖片視頻等元素的一種方式。通過特定的標(biāo)記就能展示出來自己想要的效果。如何展現(xiàn)？就讓我一步步教你。
物聯(lián)網(wǎng)
互聯(lián)網(wǎng)的飛速發(fā)展，導(dǎo)致了形形色色的網(wǎng)站應(yīng)用被創(chuàng)建。云計算、物聯(lián)網(wǎng)仿佛唾手可得。把諸多應(yīng)用建立在云上，通過這種瀏覽器與用戶交互的形式讓人們使用。這些所有網(wǎng)絡(luò)應(yīng)用，只要是通過瀏覽器進(jìn)行使用的情況，都是需要HTML技術(shù)。當(dāng)然HTML作為基礎(chǔ)之用。這就要求我們程序員，必須學(xué)習(xí)并熟悉HTML語言。能在這個基礎(chǔ)上進(jìn)行Web的開發(fā)。
HTML是解釋性語言，不需編譯，直接書寫之后，就可以運(yùn)行。
HTML是純文本類型的語言，你完全可以通過記事本程序進(jìn)行創(chuàng)建書寫。
雖然HTML可以通過記事本來創(chuàng)建寫代碼，但是并不推薦，因為以前學(xué)習(xí)過.Net，所以依舊使用Visual Studio。VS也是前端的開發(fā)神器。
自己寫的HTML代碼，在不同的瀏覽器內(nèi)，可能會有不同的展示效果。這是由瀏覽器的渲染引擎決定的。
HTML具有平臺無關(guān)性，在任何平臺只要擁有一款瀏覽器，你就可以打開HTML網(wǎng)頁。
HTML代碼運(yùn)行在瀏覽器中，也就是需要使用瀏覽器進(jìn)行測試。
HTML
今天就先說一下HTML的基本知識，電腦編程系列教程，下節(jié)繼續(xù)。
天小白給大家簡單的講解了如何學(xué)習(xí)前端的方法，那么接下來我會做一系列的教程來教給大家如何一步步的學(xué)習(xí)，今天我們就說下三分鐘快速知道如何學(xué)HTML。
其實大家都知道無論是HTML還是HTML5都很簡單容易上手，所以很多想從事IT行業(yè)的人都作為入門語言。因為簡單易學(xué)，所以并沒有一套完整的學(xué)習(xí)流程，導(dǎo)致了一些人走了彎路，所以今天小白就簡單梳理一下個人學(xué)習(xí)意見。
一：閱讀官方資料
官方資料永遠(yuǎn)是最準(zhǔn)確和最基礎(chǔ)的，所以剛開始學(xué)習(xí)的時候就要先來看官放資料，一直到時間久了，很多東西不記得了，都要來查看官方資料，把官方基礎(chǔ)資料記在心里。
小白認(rèn)為，任何一門語言第一步都是要先閱讀然后再分析。熟悉HTML代碼的組成部分，聲明，結(jié)構(gòu)，標(biāo)簽，閉合等，這些都需要我們學(xué)習(xí)和分析。剛開始學(xué)習(xí)的時候肯定自己是寫不出來的，那么就要我們看完代碼后自己拷貝，敲打，然后記憶。逐漸把看到的知識點(diǎn)變成自己的代碼元素。
二：閱讀他人代碼
準(zhǔn)備出來足夠的時間去看別人的網(wǎng)站，分析別人的源代碼，看到不懂的就去查閱資料，做好筆記，讓不懂的知識點(diǎn)變成自己的知識。
在這里我提倡建議大家多去關(guān)注下HTML相關(guān)的技術(shù)論壇，論壇上會經(jīng)常有人提出問題，大家可以嘗試去回答，哪怕是查資料也好，這都是對知識的一次深層記憶。時間久了，你就發(fā)現(xiàn)自己進(jìn)步神速。
三：練習(xí)
通過上面兩個步驟，我們已經(jīng)掌握了足夠多的HTML代碼，那么我們可以使用DW進(jìn)行做一些簡單的網(wǎng)站制作，進(jìn)一步加深和練習(xí)。在練習(xí)過程中，可以使用對比的方法，找個目標(biāo)網(wǎng)站進(jìn)行仿制，逐步讓自己寫出的代碼能和原版有一樣的展現(xiàn)。不對的地方就進(jìn)行修改，這樣水平就會進(jìn)一步提升。
進(jìn)階：代碼優(yōu)化
以上步驟都進(jìn)行完以后，我們就需要再提升一下自己的能力，那就是我們嘗試著優(yōu)化我們的HTML代碼。如何用最簡單的邏輯實現(xiàn)我們的功能需求，同時避免冗余代碼的存在，保證一個良好的代碼書寫習(xí)慣。
總結(jié)：學(xué)習(xí)技術(shù)，只看不練永遠(yuǎn)無法上手的，所以我們要多記多練，首先我們要記HTML代碼最基本的網(wǎng)頁組成部分，比如說顏色如何表示、結(jié)構(gòu)排序如何表示、超鏈接如何表示、關(guān)鍵詞與標(biāo)題等等如何表示，而這些東西我們都必須將之記憶在大腦之中，通過記憶這個過程要讓自己的頭腦中有豐富的HTML代碼可以隨時利用。
信所有已經(jīng)步入Web前端開發(fā)領(lǐng)域的同學(xué)們，對于HTML超文本標(biāo)記語言都不會感覺陌生。即便是正準(zhǔn)備開始系統(tǒng)學(xué)習(xí)Web前端開發(fā)的同學(xué)，也多多少少了解這門語言。HTML語言由W3C互聯(lián)網(wǎng)聯(lián)盟制定其使用規(guī)范并對外發(fā)布。嚴(yán)格來說，HTML并不屬于編程語言，更多的是一種帶有“標(biāo)記”性質(zhì)的代碼集合。HTML語言所書寫的HTML文檔也都是由標(biāo)記或標(biāo)記對組成的。這種語言沒有邏輯流程，也就是說只要書寫正確，瀏覽器就可以直接將最終的效果呈現(xiàn)在頁面中。
W3C 互聯(lián)網(wǎng)聯(lián)盟
這里，小海老師想帶領(lǐng)大家重溫HTML語言，對前端開發(fā)中常用的HTML標(biāo)記或標(biāo)記對進(jìn)行總結(jié)，對于標(biāo)記或標(biāo)記對中用到的屬性進(jìn)行闡述。對于已經(jīng)在前端開發(fā)領(lǐng)域摸爬滾動數(shù)年的老手們，這些內(nèi)容一定是已經(jīng)爛熟于心了，因此這篇文章更適合哪些剛剛接觸這個行業(yè)的新人們。
首先我要說明，本文章只收錄了HTML 4版本中包括的常用標(biāo)記對和屬性，對于HTML 5新增的標(biāo)記對和屬性，小海老師會在后續(xù)的文章中專門進(jìn)行講解。
1、HTML文檔的基本結(jié)構(gòu)：
HTML（Hyper Text Markup Language，超文本標(biāo)記語言）在書寫時應(yīng)該滿足它最基本的結(jié)構(gòu)。HTML文檔就好像人體的結(jié)構(gòu)似的，被分為“文件頭”和“文件體”兩部分。文件頭利用<head></head>標(biāo)記對來實現(xiàn)，文件體利用<body></body>標(biāo)記對來實現(xiàn)。
HTML語言的基本結(jié)構(gòu)
2、HTML對標(biāo)記和標(biāo)記對的規(guī)定：
HTML語言中大部分的標(biāo)記都是成對出現(xiàn)的，被人們稱為“標(biāo)記對”，書寫時利用尖括號（也就是小于號和大于號）來進(jìn)行包裹。格式為：
<標(biāo)記對></標(biāo)記對>
為了和早期的HTML版本兼容，W3C（World Wide Web Consortium，互聯(lián)網(wǎng)聯(lián)盟）在制定HTML標(biāo)準(zhǔn)的同時還保留了一小部分不成對的標(biāo)記。因為不成對，所以被人們稱為“標(biāo)記”，書寫時在標(biāo)記的結(jié)束位置應(yīng)該添加一個反斜杠。格式為：
<標(biāo)記 />
3、HTML對屬性的規(guī)定：
屬性是為了拓展標(biāo)記的功能書寫在起始標(biāo)記中的，屬性分為“屬性名”和“屬性值”兩部分。屬性之間利用空格隔開，屬性值應(yīng)該用雙引號引住，屬性名和屬性值之間利用等號連接。帶有屬性的標(biāo)記對格式為：
<標(biāo)記 屬性名1=“屬性值1” 屬性名2=“屬性值2”> </標(biāo)記>
說到這里，我們應(yīng)該繼續(xù)介紹HTML中包括的常用標(biāo)記對與其對應(yīng)的屬性。這里，首先我們將HTML標(biāo)記對劃分為以下幾類：
HTML結(jié)構(gòu)標(biāo)記
文本段落標(biāo)記
列表標(biāo)記
超級鏈接標(biāo)記
圖像標(biāo)記
表格標(biāo)記
表單標(biāo)記
塊標(biāo)記
一、HTML結(jié)構(gòu)標(biāo)記
支撐起HTML文檔結(jié)構(gòu)的標(biāo)記對包括以下幾個：
<html></html>：所有的HTML代碼必須書寫在該標(biāo)記對內(nèi)部。
<head></head>：文件頭標(biāo)記對。
<body></body>：文件體標(biāo)記對。
<title></title>：文檔標(biāo)題標(biāo)記對。
<meta />：元信息標(biāo)記。
<link />：用于加載外部CSS文件的標(biāo)記。
<style></style>：用于書寫內(nèi)部CSS代碼的標(biāo)記對。
<script></script>：用于書寫或加載腳本代碼的標(biāo)記對。
HTML 結(jié)構(gòu)標(biāo)記
下面羅列了一些常用的結(jié)構(gòu)用法：
1、加載字符集：<meta charset=“utf-8”/>
2、加載地址欄圖標(biāo)：<link rel=“shortcut icon” href=“ico_URL” />
3、加載外部CSS文件：<link rel=“stylesheet” type=“text/css” href=“*.css” />
4、加載js文件：<script type=“text/javascript” src=“*.js”></script>
二、文本段落標(biāo)記
用于在頁面中輸入文本和段落的標(biāo)記對包括以下幾個：
<h1></h1>：標(biāo)題標(biāo)記對。共有六個，<h1>到<h6>。
<p></p>：段落標(biāo)記對。
<font></font>：字體標(biāo)記對。
<pre></pre>：預(yù)格式化文本標(biāo)記對。
<center></center>：居中標(biāo)記對。
<xmp></xmp>：忽略HTML標(biāo)簽標(biāo)記對。
<!--注釋內(nèi)容-->：注釋標(biāo)記。
文本段落標(biāo)記
除了上述標(biāo)記對之外，HTML還提供了一部分代碼用于在頁面中輸入特殊字符。這里我列舉了一部分常用的特殊字符，可以從下圖中看到。
特殊符號的表示
同時，HTML還提供了一組有關(guān)文本修飾的標(biāo)記對，可以從下圖中看到。
文本修飾標(biāo)記對
三、列表標(biāo)記
用于在頁面中顯示列表的標(biāo)記對包括以下幾個：
<ul></ul>：用于實現(xiàn)無序列表的標(biāo)記對。
<ol></ol>：用于實現(xiàn)有序列表的標(biāo)記對。
<li></li>：用于實現(xiàn)無序列表和有序列表列表項的標(biāo)記對。
<dl></dl>：用于實現(xiàn)定義列表的標(biāo)記對。
<dt></dt>：用于在定義列表列表項中實現(xiàn)定義名詞的標(biāo)記對。
<dd></dd>：用于在定義列表列表項中對定義名詞進(jìn)行解釋的標(biāo)記對。
列表標(biāo)記對
四、超級鏈接
用于在頁面中實現(xiàn)超級鏈接的標(biāo)記對只有一個：
<a></a>：實現(xiàn)超級鏈接的標(biāo)記對。
超級鏈接標(biāo)記對有以下常用的屬性：
href：用于指定超級鏈接的目標(biāo)地址。
title：用于指定當(dāng)鼠標(biāo)經(jīng)過超級鏈接時給出的提示語。
target：用于指定打開鏈接地址頁面的方式。
name：用于指定錨的名稱。
超級鏈接標(biāo)記對的屬性
五、圖像
用于在頁面中實現(xiàn)圖像的標(biāo)記只有一個：
<img />：實現(xiàn)圖像的標(biāo)記。
圖像標(biāo)記有以下常用的屬性：
src：用于指定圖片所在的路徑和文件名。
width：用于指定圖片的寬度，單位為像素。
height：用于指定圖片的高度，單位為像素。
border：用于指定圖片的邊框粗細(xì)，單位為像素。
alt：用于指定圖片的替代文本。
align：用于指定圖片相對于周圍元素的對齊方式。
vspace：用于指定圖片與環(huán)繞在其一側(cè)的周圍元素之間的垂直距離。
hspace：用于指定圖片與環(huán)繞在其一側(cè)的周圍元素之間的水平距離。
圖像標(biāo)記
由于篇幅問題，以上只是HTML常用標(biāo)記對和屬性的第一部分，接下來我還會繼續(xù)發(fā)布第二部分，供廣大前端愛好者學(xué)習(xí)與參考。
由于考慮到大部分人對HTML語言的基本使用還是比較熟練的，所以本文僅僅是單純的列出了標(biāo)記對的名稱和屬性名稱，并沒有詳細(xì)的講解這些標(biāo)記對和屬性的使用方法。如果您大部分內(nèi)容都是已經(jīng)掌握了的，甚至是已經(jīng)達(dá)到熟練使用的程度，可以略讀本文甚至忽略本文。如果您剛剛涉足HTML語言，對本文這種帶有列舉性質(zhì)的具體使用方法并不清除，可以私信我，我可以為您免費(fèi)發(fā)一份我自己編寫的關(guān)于HTML語言較為詳盡的PDF教材。歡迎廣大學(xué)習(xí)者索取。
【未完待續(xù)】
*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
