整合營銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
eb開發(fā)是一個(gè)很依賴經(jīng)驗(yàn)的領(lǐng)域，然而這對初學(xué)者很不友好。
知識一旦脫離了應(yīng)用場景就會變得晦澀、空洞，且知識本身也滿足“二八定律”，“抓大放小”是提高學(xué)習(xí)效率的關(guān)鍵。
下文向大家介紹了HTML和CSS之間的關(guān)系。內(nèi)容選自《HTML 5與CSS 3核心技法（全彩）》一書。本書主線清晰，講解簡潔，并提供在線效果演示效果，非常適合小白上手！
1 HTML是骨架
很難想象一個(gè)人在桌前對著一塊砧板坐一夜，隔一會兒就噼里啪啦敲幾下，一會兒哭一會兒笑，是一種什么景象。事實(shí)上，在貓眼中我們就是這樣的。只不過我們面對的是一塊會發(fā)光的“砧板”而已。但為什么這塊“板子”如此吸引人？“上網(wǎng)”到底是在做什么？
獲取信息。
重點(diǎn)在“信息”，一種看不見摸不著卻真實(shí)存在的東西。無論“1 + 1 = 2”這段字符顯示得多么粗糙，都不會影響它傳遞了完整的信息，以及這條信息的內(nèi)在邏輯是正確的，不是嗎？HTML就是用來盛放最核心的內(nèi)容——信息。
所以，在CSS和JavaScript出現(xiàn)之前，HTML就出現(xiàn)了。這是必然的，因?yàn)槿绻B最核心的信息都無法有效傳遞，那圍繞著它的一切裝飾物和附屬品都是毫無意義的。
除滿足承載核心信息的需求外，HTML還解決了一個(gè)重要的問題——將信息結(jié)構(gòu)化。
試想有這樣一篇文章：
背影
我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個(gè)橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個(gè)賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過去自然要費(fèi)事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
評論
王花花 大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧
李拴蛋 我們都不愿意承認(rèn)他老了
劉備備 想吃橘子...
此時(shí)上面的信息基本沒有結(jié)構(gòu)，只能通過斷行或縮進(jìn)盡可能讓內(nèi)容更易讀，編輯時(shí)的狀態(tài)就是其最終的顯示效果。
HTML就派上了用場，見下方的代碼：
代碼
<artcle>
<h1>背影</h1>
<p>
我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個(gè)橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個(gè)賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過去自然要費(fèi)事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
</p>
</artcle>
<section id="comment-list">
<div class="title">評論</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧</span>
</div>
<divclass="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我們都不愿意承認(rèn)他老了</span>
</div>
<div class="comment">
<strong class="username">劉備備</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
一頭霧水沒關(guān)系，后面我們會細(xì)說每一個(gè)部分。總之這段內(nèi)容給人感覺反而更繁瑣。但繁瑣是代價(jià)，重要的是現(xiàn)在這段信息有結(jié)構(gòu)了。這就意味著計(jì)算機(jī)可以通過結(jié)構(gòu)的規(guī)律將其顯示得更便于閱讀（甚至是交互）。
以下是不加任何裝飾性內(nèi)容直接讓瀏覽器呈現(xiàn)的結(jié)果：
效果
這是純HTML在沒有引入任何裝飾時(shí)的顯示效果。很明顯，即便是這樣也比純文字狀態(tài)易讀了許多。但注意，HTML本身沒有樣式，字體大小和粗細(xì)有變化的原因是瀏覽器的默認(rèn)樣式起了作用，與HTML沒有關(guān)系。而重點(diǎn)就在這里，這意味著我們可以基于這個(gè)結(jié)構(gòu)設(shè)計(jì)自己的頁面效果，見下方的示例。
代碼
<style>
body { font-family: 'Microsoft YaHei', sans-serif; }
#comment-list { background: #f0f0f0; padding: 10px; border: 1px solid #ccc; margin-top: 25px; }
#comment-list .comment { margin-top: 10px; margin-bottom: 10px; }
#comment-list .title {
color: #777; font-size: 1.1rem; padding-bottom: 5px;
border-bottom: 1px solid #ccc;
}
</style>
<artcle>
<h1>背影</h1>
<p>
我說道：“爸爸，你走吧。”他望車外看了看，說：“我買幾個(gè)橘子去。你就在此地，不要走動。”我看那邊月臺的柵欄外有幾個(gè)賣東西的等著顧客。走到那邊月臺，須穿過鐵道，須跳下去又爬上去。父親是一個(gè)胖子，走過去自然要費(fèi)事些。我本來要去的，他不肯，只好讓他去。我看見他戴著黑布小帽，穿著黑布大馬褂，深青布棉袍，蹣跚地走到鐵道邊，慢慢探身下去，尚不大難。可是他穿過鐵道，要爬上那邊月臺，就不容易了。他用兩手攀著上面，兩腳再向上縮；他肥胖的身子向左微傾，顯出努力的樣子。
</p>
</artcle>
<section id="comment-list">
<div class="title">評論</div>
<div class="comment">
<strong class="username">王花花</strong>
<span class="content">大概，天底下的父親，老去的樣子都有些共同的特質(zhì)吧</span>
</div>
<div class="comment">
<strong class="username">李拴蛋</strong>
<span class="content">我們都不愿意承認(rèn)他老了</span>
</div>
<div class="comment">
<strong class="username">劉備備</strong>
<span class="content">想吃橘子...</span>
</div>
</section>
效果
這里只是舉了一個(gè)小示例。你可以輕而易舉地讓頁面的風(fēng)格千變?nèi)f化，進(jìn)而讓用戶體驗(yàn)有所差異（或差距）。“千變?nèi)f化”因CSS靈活、強(qiáng)大，“輕而易舉”因HTML簡潔、有序。結(jié)構(gòu)的力量！
CSS是皮膚
一個(gè)充滿活力的生態(tài)是不滿足于現(xiàn)狀的。人們在適應(yīng)了便利地瀏覽核心信息之后，就會想方設(shè)法改進(jìn)瀏覽的體驗(yàn)。比如，讓自己的博客以多欄顯示，以便在視覺上區(qū)分不同板塊；修改字體顏色，以便強(qiáng)調(diào)一些重要信息等。
起初的做法是——準(zhǔn)備幾種特殊的標(biāo)簽，專門用于樣式的指定。涉及布局的地方，如果沒有特殊標(biāo)簽就直接用表格布局。以下沒有任何樣式的狀態(tài)（以下代碼均不需要看懂）：
代碼
<h1>標(biāo)題</h1><p>從前有座山，山里有個(gè)廟，廟里...</p>
效果
此時(shí)的頁面結(jié)構(gòu)下。
如果想讓標(biāo)題居中，則需要給其添加元素<center>，見下方的示例。
代碼
<center><h1>標(biāo)題</h1></center><p>從前有座山，山里有個(gè)廟，廟里...</p>效果
此時(shí)的頁面結(jié)構(gòu)如下。
居中標(biāo)題的目的確實(shí)達(dá)到了，但是有一個(gè)很大的問題：如果我改變主意了，不想讓其居中了，那么我還得再去將<center>元素去掉。這對于簡單的頁面確實(shí)可行，但如果是復(fù)雜的頁面，這種做法的工作量就是噩夢，因?yàn)槊總€(gè)地方都得修改，無論是對齊方式、顏色、背景色，還是大的布局都必須通過修改結(jié)構(gòu)才能完成。這種做法的最大問題是可維護(hù)性太差，很多時(shí)候?yàn)榱艘环N樣式要修改很多不必要的結(jié)構(gòu)，枯燥、重復(fù)、削足適履的工作太多，基本上寫一次就再也不想改了。
這個(gè)問題亟待解決，而且解決方案還要兼容現(xiàn)有規(guī)則。現(xiàn)有規(guī)則是什么？HTML的語法及結(jié)構(gòu)。不過既然HTML已經(jīng)有結(jié)構(gòu)了，為什么不好好利用呢？
以前面示例中的文章頁面為例，如果我們想更改標(biāo)題，是否可以先統(tǒng)一選中所有標(biāo)題，然后說明想要什么樣式規(guī)則呢？就像下面這樣：
所有h1 元素聽著
對齊方式 居中。
字體顏色 黑色。
如果想將所有段落字體放大，則像下面這樣：
所有p 元素聽著
字體大小 150%。
這種方式的確很高效！同時(shí)這個(gè)規(guī)則與HTML語法無關(guān)，相當(dāng)于另一種語言。這樣結(jié)構(gòu)和樣式就不會互相影響，結(jié)構(gòu)是結(jié)構(gòu)，樣式是樣式，兩者隔離開了。如果想修改樣式，則完全不需要勞HTML大駕，只需要修改樣式文件即可，更便于管理和維護(hù)。這就是CSS，只不過其語法更簡潔。
下面以修改標(biāo)題對齊方式為例：
h1 { /* 所有h1 元素聽著 */
text-align: center; /* 對齊方式 居中 */
}
通過批量選擇和處理，極大地提高了開發(fā)效率，降低了維護(hù)成本，四兩撥千斤。
（完）
圖書推薦
《HTML 5與CSS 3核心技法（全彩）》
表嚴(yán)肅 著
本書能夠為自學(xué)Web開發(fā)初學(xué)者建立一套HTML與CSS的核心知識框架，同時(shí)借助豐富的示例讓初學(xué)者有一個(gè)愉悅、輕松的學(xué)習(xí)過程。
想從事前端開發(fā)的，可將本書作為學(xué)習(xí)的起點(diǎn)。正從事前端開發(fā)的，可將本書作為速查的手冊。
HTML、CSS、Javascript是前端Web開發(fā)的主要語言，但是學(xué)生們經(jīng)常混淆Javascript和HTML。因此，今天我們在這里討論這兩種最重要的編程語言之間的差異。
Javascript簡介
Javascript 是一種基于文本的編程語言，主要用于Web開發(fā)。它是WWW(萬維網(wǎng))的核心技術(shù)之一。
通過使用 Javascript，程序員可以創(chuàng)建交互式和響應(yīng)式Web元素并增強(qiáng)網(wǎng)站的UI。Javascript 在客戶端Web開發(fā)中非常流行，以至于互聯(lián)網(wǎng)上超過97%的網(wǎng)站都將其用于客戶端行為。彈出窗口、圖像滑塊、站點(diǎn)導(dǎo)航菜單、選項(xiàng)卡、表單驗(yàn)證是用于Web開發(fā)的Javascript的一些示例。
HTML簡介
HTML是超文本標(biāo)記語言的首字母縮寫，它是用于創(chuàng)建網(wǎng)頁和Web應(yīng)用程序的標(biāo)準(zhǔn)標(biāo)記語言。HTML描述了網(wǎng)頁的結(jié)構(gòu)，瀏覽器從服務(wù)器接收HTML頁面，然后將文檔呈現(xiàn)到屏幕上。
HTML包含多個(gè)元素，這些元素告訴瀏覽器內(nèi)容的外觀。例如，<p>標(biāo)簽定義了一個(gè)段落，<title>定義了web文檔的標(biāo)題，<body>定義了可見的頁面內(nèi)容，<table>定義了一個(gè)表格等等。HTML可以嵌入腳本程序如JS程序 會影響網(wǎng)頁的內(nèi)容和行為。此外，它可以包含 CSS(層疊樣式表)來改善網(wǎng)頁的布局和外觀。
Javascript與HTML：主要區(qū)別是什么?
句法
HTML是一種標(biāo)記語言，它有多種標(biāo)簽，如表格標(biāo)簽、換行標(biāo)簽、圖片標(biāo)簽、標(biāo)題標(biāo)簽等。同時(shí)，Javascript具有不同的功能，可以使網(wǎng)頁具有交互性和動態(tài)性。HTML語法更容易學(xué)習(xí)和理解。與HTML相比，Javascript是一種復(fù)雜的語言。
動態(tài)規(guī)劃
Javascript使網(wǎng)站動態(tài)化，它可以更改用戶操作的HTML標(biāo)記的值和屬性，它主要包含在HTML代碼中以制作交互式網(wǎng)頁。
另一方面，僅HTML無法制作動態(tài)網(wǎng)頁，因此，無法動態(tài)更改代碼。程序員可以在HTML代碼中包含Javascript來制作動態(tài)網(wǎng)頁。
兼容性
兼容性是Javascript與HTML的主要關(guān)注問題之一。每個(gè)瀏覽器都支持HTML，它的標(biāo)簽可以在每個(gè)瀏覽器上毫無問題地呈現(xiàn)，但是，Javascript并不總是與每個(gè)瀏覽器兼容。
例如，一些Javascript函數(shù)在Chrome或Firefox中運(yùn)行良好，但在Internet Explorer 中運(yùn)行不佳，這就是為什么一些網(wǎng)站提到兼容瀏覽器列表以確保在客戶端瀏覽器中正確查看網(wǎng)站。
客戶端和服務(wù)器端Web開發(fā)
HTML用于對網(wǎng)頁的客戶端進(jìn)行編碼，程序員不能使用它來編寫服務(wù)器端代碼。相比之下，Javascript可以在網(wǎng)站的客戶端和服務(wù)器端使用，服務(wù)器端 Javascript(SSJS)是核心javascript的擴(kuò)展版本。
例如，NodeJS是一個(gè)開源和跨平臺的Javascript運(yùn)行時(shí)環(huán)境，允許程序員使用 javascript編寫服務(wù)器端代碼。在NodeJS的幫助下，Javascript代碼可以在瀏覽器之外運(yùn)行。
JavaScript與HTML的比較
總結(jié)
我們已經(jīng)討論了有關(guān)Javascript與HTML的所有內(nèi)容。HTML用于創(chuàng)建網(wǎng)頁，它由瀏覽器解釋并以文本和圖像的形式顯示在屏幕上，而javascript主要用于使網(wǎng)頁具有交互性。Javascript是一種比HTML更先進(jìn)、更復(fù)雜的語言，這兩種語言一起使用來制作優(yōu)秀的網(wǎng)站。
一篇介紹了網(wǎng)頁的基本結(jié)構(gòu)，那如何編寫網(wǎng)頁的內(nèi)容? 前提是要學(xué)會HTML標(biāo)簽的用法，本篇主要介紹HTML標(biāo)簽是什么，如何學(xué)習(xí)，需要大概多長時(shí)間學(xué)習(xí)。
本篇主要基于html5介紹，html5 是最新版的標(biāo)準(zhǔn)，之前的版本可以自己了解下。
HTML的英文全稱是Hyper Text Markup Language，直譯為超文本標(biāo)記語言。它是全球廣域網(wǎng)上描述網(wǎng)頁內(nèi)容和外觀的標(biāo)準(zhǔn)。HTML包含了一對打開和關(guān)閉的標(biāo)記，在當(dāng)中包含有屬性和值。標(biāo)記描述了每個(gè)在網(wǎng)頁上的組件，例如文本段落、表格或圖像等。
事實(shí)上，HTML是一種因特網(wǎng)上較常見的網(wǎng)頁制作標(biāo)注性語言，而并不能算做一種程序設(shè)計(jì)語言，因?yàn)樗鄙俪绦蛟O(shè)計(jì)語言所應(yīng)有的特征。HTML通過IE等瀏覽器的翻譯，將網(wǎng)頁中所要呈現(xiàn)的內(nèi)容、排版展現(xiàn)在用戶眼前。
一個(gè)html標(biāo)簽基本結(jié)構(gòu)如下：
<標(biāo)簽名稱 屬性="屬性值"></標(biāo)簽名稱> 或 <標(biāo)簽名稱 屬性="屬性值"/>有以下特點(diǎn)：
沒有捷徑，需要多看，多練。在這里我不一一介紹每個(gè)標(biāo)簽的具體含義及用法，相關(guān)語法可以參考以下幾個(gè)網(wǎng)站：
制定一個(gè)學(xué)習(xí)計(jì)劃,每天堅(jiān)持下去
要求，每天花費(fèi)3到5個(gè)小時(shí)學(xué)習(xí)，至少1到2周掌握常用的html標(biāo)簽含義及用法，可以按照上面介紹的標(biāo)簽進(jìn)行分類學(xué)習(xí)，感謝關(guān)注，祝你學(xué)習(xí)愉快。
*請認(rèn)真填寫需求信息，我們會在24小時(shí)內(nèi)與您取得聯(lián)系。
