1.Html和CSS的關系
學習web前端開發(fā)基礎技術需要掌握：HTML床牧、CSS艰垂、JavaScript語言桑寨。下面我們就來了解下這三門技術都是用來實現(xiàn)什么的：
- HTML是網(wǎng)頁內(nèi)容的載體揍庄。內(nèi)容就是網(wǎng)頁制作者放在頁面上想要讓用戶瀏覽的信息，可以包含文字久窟、圖片秩冈、視頻等。
- CSS樣式是表現(xiàn)斥扛。就像網(wǎng)頁的外衣入问。比如，標題字體稀颁、顏色變化芬失，或為標題加入背景圖片、邊框等匾灶。所有這些用來改變內(nèi)容外觀的東西稱之為表現(xiàn)棱烂。
-
JavaScript是用來實現(xiàn)網(wǎng)頁上的特效效果。如：鼠標滑過彈出下拉菜單阶女〖彰樱或鼠標滑過表格的背景顏色改變。還有焦點新聞（新聞圖片）的輪換秃踩〕挠悖可以這么理解，有動畫的吞瞪，有交互的一般都是用JavaScript來實現(xiàn)的馁启。
下面給大家布置一個任務驾孔，在完成任務的時候芍秆，每輸入一行代碼，代碼窗口就會立即顯示出效果翠勉。
任務
我也來試試:為Hello World添加樣式
1.在右邊編輯器的第8行妖啥，輸入font-size:50px;
（注意結(jié)果窗口的文字大小的變化）。
2.在右邊編輯器的第9行对碌，輸入color:#930;
（注意結(jié)果窗口的文字顏色的變化）荆虱。
3.在右邊編輯器的第10行，輸入text-align:center;
（注意結(jié)果窗口的文字居中的變化）朽们。
2.認識html標簽
讓我們通過一個網(wǎng)頁的學習怀读，來對html標簽有一個初步理解。平常大家說的上網(wǎng)就是瀏覽各種各式各樣的網(wǎng)頁骑脱，這些網(wǎng)頁都是由html標簽組成的菜枷。下面就是一個簡單的網(wǎng)頁。效果圖如下：
我們來分析一下叁丧，這個網(wǎng)頁由哪些html標簽組成：
“勇氣”是網(wǎng)頁內(nèi)容文章的標題啤誊，
<h1></h1>就是標題標簽岳瞭，它在網(wǎng)頁上的代碼寫成
<h1>勇氣</h1>。“三年級時...我也沒勇氣參加蚊锹⊥ぃ” 是網(wǎng)頁中文章的段落，
<p></p>是段落標簽牡昆。它在網(wǎng)頁上的代碼寫成<p>三年級時...我也沒勇氣參加姚炕。</p>
網(wǎng)頁上那張小女生的圖片，由img
標簽來完成的丢烘，它在網(wǎng)頁上的代碼寫成<img src="1.jpg">
網(wǎng)頁的完整代碼如下圖：
總結(jié)一下钻心，可以這么說，網(wǎng)頁中每一個內(nèi)容在瀏覽器中的顯示铅协，都要存放到各種標簽中捷沸。
3.標簽的語法
1.標簽由英文尖括號 < 和 > 括起來，如<html>就是一個標簽狐史。
2.html中的標簽一般都是成對出現(xiàn)的痒给，分開始標簽和結(jié)束標簽。結(jié)束標簽比開始標簽多了一個/骏全。
如：
（1） <p></p>
（2）<div></div>
（3）<span></span>
3.標簽與標簽之間是可以嵌套的苍柏，但先后順序必須保持一致，如：
<div>里嵌套<p>姜贡，那么</p>必須放在</div>的前面试吁。如下圖所示。
4.HTML標簽不區(qū)分大小寫楼咳，
<h1>和<H1>是一樣的熄捍，但建議小寫，因為大部分程序員都以小寫為準母怜。
4.認識html文件基本結(jié)構(gòu)
這一節(jié)中我們來學習html文件的結(jié)構(gòu)：一個HTML文件是有自己固定的結(jié)構(gòu)的余耽。
<html>
<head>...</head>
<body>...</body>
</html>
代碼講解：
<html></html>稱為根標簽，所有的網(wǎng)頁標簽都在<html></html>中苹熏。
<head> 標簽用于定義文檔的頭部碟贾，它是所有頭部元素的容器。頭部元素有<title>轨域、<script>袱耽、 <style>、<link>干发、 <meta>等標簽朱巨，頭部標簽在下一小節(jié)中會有詳細介紹。
在<body>和</body>標簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容铐然，如
<h1>蔬崩、<p>恶座、<a>、<img>等網(wǎng)頁內(nèi)容標簽沥阳，在這里的標簽中的內(nèi)容會在瀏覽器中顯示出來跨琳。
5.認識head標簽
下面我們來了解一下<head>標簽的作用。
文檔的頭部描述了文檔的各種屬性和信息桐罕，包括文檔的標題等脉让。絕大多數(shù)文檔頭部包含的數(shù)據(jù)都不會真正作為內(nèi)容顯示給讀者。
下面這些標簽可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>標簽：在<title>和</title>標簽之間的文字內(nèi)容是網(wǎng)頁的標題信息功炮，它會出現(xiàn)在瀏覽器的標題欄中溅潜。網(wǎng)頁的title標簽用于告訴用戶和搜索引擎這個網(wǎng)頁的主要內(nèi)容是什么，搜索引擎可以通過網(wǎng)頁標題薪伏，迅速的判斷出網(wǎng)頁的主題滚澜。每個網(wǎng)頁的內(nèi)容都是不同的，每個網(wǎng)頁都應該有一個獨一無二的title嫁怀。
例如：
<head>
<title>hello world</title>
</head>
<title>標簽的內(nèi)容“hello world”會在瀏覽器中的標題欄上顯示出來设捐，如下圖所示：
<head>標簽中的其它標簽內(nèi)容的講解，會在以后的章節(jié)中為大家一一講解塘淑。
6.了解HTML的代碼注釋
什么是代碼注釋萝招？代碼注釋的作用是幫助程序員標注代碼的用途，過一段時間后再看你所編寫的代碼存捺，就能很快想起這段代碼的用途槐沼。代碼注釋不僅方便程序員自己回憶起以前代碼的用途，還可以幫助其他程序員很快的讀懂你的程序的功能捌治，方便多人合作開發(fā)網(wǎng)頁代碼岗钩。
語法：
****
如：右邊編輯器的代碼的第 8、12 行都是具滴，但是你會發(fā)現(xiàn)注釋代碼是不會在結(jié)果窗口中顯示出來的凹嘲。
