1-1代碼初體驗，制作我的第一個網頁
歡迎來到HTML+CSS課堂，加入高端大氣上檔次的web前端開發團隊。我們在正式學習之前，先來熱熱身，問候下世界，做個人生中的第一個html網頁吧。
任務
請在右邊編輯器的第8行，在<h1>和</h1>标簽之間，輸入HelloWorld 字元串。
1-2Html和CSS的關系
學習web前端開發基礎技術需要掌握：HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實作什麼的：
1. HTML是網頁内容的載體。内容就是網頁制作者放在頁面上想要讓使用者浏覽的資訊，可以包含文字、圖檔、視訊等。
2. CSS樣式是表現。就像網頁的外衣。比如，标題字型、顔色變化，或為标題加入背景圖檔、邊框等。所有這些用來改變内容外觀的東西稱之為表現。
3. JavaScript是用來實作網頁上的特效效果。如：滑鼠滑過彈出下拉菜單。或滑鼠滑過表格的背景顔色改變。還有焦點新聞（新聞圖檔）的輪換。可以這麼了解，有動畫的，有互動的一般都是用JavaScript來實作的。
<!DOCTYPEHTML>
<html>
<head>
<metahttp-equiv="Content-Type" content="text/html;charset=utf-8">
<title>Html和CSS的關系</title>
<style type="text/css">
h1{
font-size:12px;
color:#930;
text-align:center;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
注意：
1.分号;與：号都得在半角及英文狀态下輸入。
2.每行css代碼結尾都要加入;（h1{後不用加，因為它不是一條語句）如：
font-size:12px;
color:#930;
text-align:center;
3. #930顔色值前面的#号注意不要忘記了。
1-3認識html标簽
我們來分析一下，這個網頁由哪些html标簽組成：
“勇氣”是網頁内容文章的标題，<h1></h1>就是标題标簽，它在網頁上的代碼寫成<h1>勇氣</h1>。
“三年級時...我也沒勇氣參加。” 是網頁中文章的段落，<p></p>是段落标簽。它在網頁上的代碼寫成 <p>三年級時...我也沒勇氣參加。</p>
網頁上那張小女生的圖檔，由img标簽來完成的，它在網頁上的代碼寫成<img src="1.jpg">
網頁的完整代碼如下圖：
總結一下，可以這麼說，網頁中每一個内容在浏覽器中的顯示，都要存放到各種标簽中。
1-4标簽的文法
1. 标簽由英文尖括号<和>括起來，如<html>就是一個标簽。
2. html中的标簽一般都是成對出現的，分開始标簽和結束标簽。結束标簽比開始标簽多了一個/。
如：
（1） <p></p>
（2） <div></div>
（3） <span></span>
3. 标簽與标簽之間是可以嵌套的，但先後順序必須保持一緻，如：<div>裡嵌套<p>，那麼</p>必須放在</div>的前面。如下圖所示。
4. HTML标簽不區分大小寫，<h1>和<H1>是一樣的，但建議小寫，因為大部分程式員都以小寫為準。
1-5認識html檔案基本結構
這一節中我們來學習html檔案的結構：一個HTML檔案是有自己固定的結構的。
<html>
<head>...</head>
<body>...</body>
</html>
代碼講解：
1. <html></html>稱為根标簽，所有的網頁标簽都在<html></html>中。
2. <head> 标簽用于定義文檔的頭部，它是所有頭部元素的容器。頭部元素有<title>、<script>、
<style>、<link>、 <meta>等标簽，頭部标簽在下一小節中會有詳細介紹。
3. 在<body>和</body>标簽之間的内容是網頁的主要内容，如<h1>、<p>、<a>、<img>等網頁内容标簽，在這裡的标簽中的内容會在浏覽器中顯示出來。
1-6認識head标簽
做得好，下面我們來了解一下<head>标簽的作用。文檔的頭部描述了文檔的各種屬性和資訊，包括文檔的标題等。絕大多數文檔頭部包含的資料都不會真正作為内容顯示給讀者。
下面這些标簽可用在 head 部分：
<head>
<title>...</title>
<meta>
<link>
<style>...</style>
<script>...</script>
</head>
<title>标簽：在<title>和</title>标簽之間的文字内容是網頁的标題資訊，它會出現在浏覽器的标題欄中。網頁的title标簽用于告訴使用者和搜尋引擎這個網頁的主要内容是什麼，搜尋引擎可以通過網頁标題，迅速的判斷出網頁的主題。每個網頁的内容都是不同的，每個網頁都應該有一個獨一無二的title。
例如：
<head>
<title>hello world</title>
</head>
<title>标簽的内容“hello world”會在浏覽器中的标題欄上顯示出來，如下圖所示：
<head>标簽中的其它标簽内容的講解，會在以後的章節中為大家一一講解。
1-7了解HTML的代碼注釋
什麼是代碼注釋？代碼注釋的作用是幫助程式員标注代碼的用途，過一段時間後再看你所編寫的代碼，就能很快想起這段代碼的用途。代碼注釋不僅友善程式員自己回憶起以前代碼的用途，還可以幫助其他程式員很快的讀懂你的程式的功能，友善多人合作開發網頁代碼。
文法：
<!--注釋文字 -->
如：右邊編輯器的代碼的第 8、12行都是，但是你會發現注釋代碼是不會在結果視窗中顯示出來的。
![怎樣使用SpringMVC控制頁面[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)