整合營(yíng)銷(xiāo)服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢(xún)熱線：
今天我們一起來(lái)了解下HTML，
首先HTmL包含三層結(jié)構(gòu)，分別是結(jié)構(gòu)層，表現(xiàn)層，行為層。
結(jié)構(gòu)層：html => 網(wǎng)頁(yè)上有什么，比如說(shuō)文字啊、按鈕啊、圖片啊等等。
表現(xiàn)層：css => 顯示成什么樣子，比如說(shuō)文字的大小啊，位置啊，顏色啊等等。
行為層：JavaScript => 具體怎么操作，比如說(shuō)點(diǎn)擊按鈕讓圖片放大縮小等等。
===============================
在了解了html的三層結(jié)構(gòu)之后，我們來(lái)學(xué)習(xí)如何寫(xiě)html。html不是編程語(yǔ)言，它是一套標(biāo)簽。最簡(jiǎn)單的html文本是下圖1這個(gè)樣子。我們可以在電腦桌面上新建一個(gè)記事本文件，然后把后綴名改一下（.txt=>.html），把這段標(biāo)簽代碼粘貼到html文件里，這樣一個(gè)空白的網(wǎng)頁(yè)就做成了。如果需要在網(wǎng)頁(yè)上添加內(nèi)容，我們只需要在第10行的位置添加各種各樣的標(biāo)簽即可。比如我在圖二添加了一個(gè)按鈕標(biāo)簽和一段文字標(biāo)簽，雙擊html文件，頁(yè)面上就從左到右，從上到下顯示對(duì)應(yīng)的內(nèi)容。是不是很簡(jiǎn)單。我們?nèi)粘g覽的網(wǎng)頁(yè)都是這樣一個(gè)標(biāo)簽一個(gè)標(biāo)簽畫(huà)上去的。
我給大家總結(jié)了一張圖，基本上覆蓋了工作中常用的知識(shí)點(diǎn)。同時(shí)分享幾個(gè)小技巧。
1.最簡(jiǎn)單的網(wǎng)頁(yè)寫(xiě)成什么樣子，也就是html模板不需要記憶，下圖也說(shuō)了，去百度下載一個(gè)VSCode軟件（類(lèi)似于記事本，是現(xiàn)在主流的前端代碼編輯器），用它打開(kāi)我們的html文件，輸入英文嘆號(hào)回車(chē)就自動(dòng)生成了，學(xué)編程不要死記硬背。
2.控件的標(biāo)簽不需要記憶，直接百度html XXX標(biāo)簽，例如：百度搜“html按鈕標(biāo)簽”，他就會(huì)告訴我們是<button>，用的時(shí)間長(zhǎng)了自然就記住了。是不是省力。
3.標(biāo)簽的屬性很重要，可以不去記他的寫(xiě)法，因?yàn)閷?xiě)可以百度，重要的是你需要記住標(biāo)簽有什么屬性，下圖的屬性記住足矣。為什么要記呢，因?yàn)楣ぷ髦校械臅r(shí)候會(huì)遇到這樣一種情況，明明設(shè)置一個(gè)屬性可以完成的功能，我們不知道，花費(fèi)了大力氣用css和js去實(shí)現(xiàn)，結(jié)果還存在著特定場(chǎng)合的bug，讓人很無(wú)奈。
4.對(duì)于html還有兩個(gè)標(biāo)簽<canvas>和<svg>，他們是用來(lái)繪圖的，做特殊效果的。我們可以先跳過(guò)，等框架啥的都學(xué)完了，有興趣，學(xué)習(xí)一下。
5.給大家推薦一個(gè)小白學(xué)習(xí)html的網(wǎng)站，w3cschool，圖里不明白的可以去上邊學(xué)學(xué)練練。
6.如果覺(jué)得一個(gè)人學(xué)習(xí)前端有難度，我建了一個(gè)小白前端學(xué)習(xí)交流群，可以私聊我，大家在群里多多交流，我會(huì)經(jīng)常給大家答疑，組織大家練習(xí)，一起做小項(xiàng)目。有方向，少走彎路。
HP是世界上最好的語(yǔ)言，這是一個(gè)老梗。
有不少學(xué)習(xí)PHP的程序員后來(lái)去做了前端開(kāi)發(fā)，畢竟近些年前端開(kāi)發(fā)還是蠻吃香的。
學(xué)習(xí)PHP不僅僅要學(xué)習(xí)html，而且還要學(xué)習(xí)CSS。
CSS是萬(wàn)維網(wǎng)聯(lián)盟在 HTML 4.0 之外提出，目的是為了讓CSS完成樣式與內(nèi)容的分離。
那么，CSS如何入門(mén)呢?w3cschool在這里分享幾個(gè)方法：
w3cschool官方本身就有CSS教程，我們看教程的目的主要還是要了解CSS到底是干什么用的。
其實(shí)，用一句簡(jiǎn)單的話(huà)來(lái)說(shuō)，改變我們看的網(wǎng)頁(yè)的樣子.。
w3cschool新開(kāi)發(fā)了CSS微課，這可能是很多程序員小伙伴所需要的。
CSS直接抓住了CSS教程中比較核心的一些概念和語(yǔ)法，并且有實(shí)戰(zhàn)的訓(xùn)練習(xí)題。
其內(nèi)容包括了CSS基礎(chǔ)、CSS文本樣式、CSS屬性、CSS定位和布局，讓你系統(tǒng)、立體地全面認(rèn)識(shí)CSS。
CSS微課實(shí)現(xiàn)了游戲化的編程體驗(yàn)，關(guān)卡是循序漸進(jìn)的，這迫使你不能跳躍而忽略一些重要的編程知識(shí)。
其中，習(xí)題類(lèi)型包含了判斷題、選擇題、實(shí)戰(zhàn)訓(xùn)練題。
理論離不開(kāi)實(shí)戰(zhàn)，CSS微課做到了例子多，概括技術(shù)全面。
當(dāng)你可以通關(guān)的時(shí)候，你已經(jīng)對(duì)CSS算是有一個(gè)比較深刻的認(rèn)識(shí)，也掌握了一定的CSS編程技能。
學(xué)編程一定要讓編程本身變得有趣，所以大可以先玩編程。
用CSS微課學(xué)習(xí)是一種有趣化的方法。
另外，閱讀《css禪意花園》，就當(dāng)成一本故事書(shū)看，隨便翻翻你會(huì)發(fā)現(xiàn)css確實(shí)很好玩的。
TML - 超文本標(biāo)記語(yǔ)言 (Hyper Text Markup Language)
HTML是建設(shè)網(wǎng)站/網(wǎng)頁(yè)制作主要語(yǔ)言。
HTML是一種易于學(xué)習(xí)的標(biāo)記語(yǔ)言。
HTML使用像 <p> 尖括號(hào)內(nèi)標(biāo)記標(biāo)簽來(lái)定義網(wǎng)頁(yè)的內(nèi)容：
HTML 實(shí)例
<html>
<body>
<h1>My First Heading</h1>
<p>My first paragraph.</p>
</body>
</html>
點(diǎn)擊 "嘗試一下" 按鈕查看實(shí)例。
HTML使用開(kāi)始標(biāo)記和結(jié)束標(biāo)記來(lái)標(biāo)記一個(gè)網(wǎng)頁(yè)元素，：在上面的例子，<p>標(biāo)簽標(biāo)志著一個(gè)段落開(kāi)始，</p>標(biāo)志著該段末尾。
通過(guò)使用簡(jiǎn)單的HTML標(biāo)簽，網(wǎng)頁(yè)設(shè)計(jì)師可以為一個(gè)網(wǎng)頁(yè)（HTML文檔）添加標(biāo)題，段落，文字，表格，圖片，列表，編程代碼等。
Web瀏覽器（IE瀏覽器，火狐，Chrome等）讀取HTML文檔，解釋HTML標(biāo)記，并顯示正確用戶(hù)可讀的內(nèi)容（不顯示HTML標(biāo)簽）：
根據(jù)HTML標(biāo)準(zhǔn)，HTML可用于定義網(wǎng)頁(yè)的內(nèi)容。/p>
要定義視覺(jué)樣式（顏色，大小，外觀，布局等），應(yīng)使用CSS（層疊樣式表）（見(jiàn)下一章）。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
