1 HTML介紹
注：本文參考慕課網(wǎng)的（初識HTML+CSS）網(wǎng)絡(luò)課程，僅學(xué)習(xí)，無商業(yè)用途
1.1 web前端基礎(chǔ)
web前端開發(fā)基礎(chǔ)技術(shù)有三個：HTML、CSS、JavaScript語言。
? ? ? ??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)的。
1.2 HTML標簽
????????平常大家說的上網(wǎng)就是瀏覽各種各式各樣的網(wǎng)頁，這些網(wǎng)頁都是由html標簽組成的。?標簽由英文尖括號<?>括起來，如<html>就是一個標簽，每個標簽內(nèi)容不同，功能也就不同。如圖1-1所示，<title>是網(wǎng)頁名字標簽，<body>是網(wǎng)頁內(nèi)容標簽，<h1>是標題標簽，<p>是段落標簽，<img>是圖片標簽。 html中的標簽一般都是成對出現(xiàn)的，分開始標簽和結(jié)束標簽。結(jié)束標簽比開始標簽多了一個/。標簽與標簽之間是可以嵌套的，但先后順序必須保持一致。標簽建議小寫。測試結(jié)果如圖1-2所示。
1.3?html文件基本結(jié)構(gòu)
????????一個HTML文件是有自己固定的結(jié)構(gòu)的。如圖1-3。
????????<html></html>稱為根標簽，所有的網(wǎng)頁標簽都在中。標簽用于定義文檔的頭部，它是所有頭部元素的容器.頭部元素有<title><script><style>、<link><meta>等標簽。<title>和</title>標簽之間的文字內(nèi)容是網(wǎng)頁的標題信息 ? ? ??
????????在<body>和</body>標簽之間的內(nèi)容是網(wǎng)頁的主要內(nèi)容，如<h1>、<p>、<a>、<img>等網(wǎng)頁內(nèi)容標簽，在這里的標簽中的內(nèi)容會在瀏覽器中顯示出來。
1.4 代碼注釋
? ? ? ? 每一類語言都有注釋方法，HTML的注釋方法是：<!--代碼注釋-->
2 ?HTML標簽
2.1 基本內(nèi)容標簽
? ? ? ? <p>標簽：段落標簽。多個段落必須由多個段落寫上。如圖2-1
? ??????<h>標簽，這是標題標簽，h后面加數(shù)字1-6，這是代表標題的級數(shù)。如圖2-2所示。
? ??????<em>和<strong>標簽是為了強調(diào)一段話中的關(guān)鍵字時使用，它們的語義是強調(diào)。?<span>標簽是沒有語義的，它的作用就是為了設(shè)置單獨的樣式用的。<span>標簽可以在外單獨設(shè)置樣式。如圖2-3.
? ? ? ? <br>標簽，相當(dāng)于word之中的回車鍵，就是提行效果。而空格效果不是有尖括號的標簽表示，而是 來表示的。同樣<hr>標簽是直接使用的，不需要成對。如圖2-4所示。
? ??????<address>標簽是地址標簽，一般是引用的是具體聯(lián)系地址，字體為斜體。如圖2-5所示：
? ? ? ? 在網(wǎng)頁界面中，不避免會插入一些介紹性的代碼，這就可以使用<code >和<pre>，把代碼插入其中。只是<code>只支持插入一行代碼，<pre>可以插入一段代碼。
2.2 樣式標簽
? ? ? ? 網(wǎng)頁里有很多列表，HTML最原始列表設(shè)計是<ul>+<li>標簽。也可以有數(shù)字排行，就使用<ol>+<li>。如圖2-6所示。
? ? ? ? <div>是一個容器標簽，可以把網(wǎng)頁劃分出獨立的邏輯部分。不同部分使用的標簽相互獨立，不受影響。這是網(wǎng)頁制作的重點概念，必須熟悉其的使用方法。我們可以為其命名。如圖2-7所示。
? ? ? ? <table>是表格標簽，這可以在網(wǎng)頁制作出表格樣式。但是，在沒有使用CSS的情況下，表格是沒有線的。創(chuàng)建表格的四個元素：table、tbody、tr、th、td。整個表格以<table>標記開始、</table>標記結(jié)束。<tbody>是表格加載模塊，表格的加載是按照<tbody>塊來加載的。<tr>是表格的一行，所以有幾對tr 表格就有幾行。<td>…</td>：表格的一個單元格，<th>…</th>：表格的頭部的一個單元格，加粗顯示。如圖2-8所示。
? ? ? ? 表格也可引用摘要標簽，<caption>標題文本</caption>。但是不會顯示，它的作用是增加表格的可讀性(語義化)，使搜索引擎更好的讀懂表格內(nèi)容
2.3 引用標簽
? ? ? ? <a>標簽是超鏈接標簽，超鏈接如：<a href = "www.baidu.com" title="點擊進入百度">click here!</a>。既可單機“點擊進入百度”，而鏈接到百度網(wǎng)頁。如下所示：
點擊之后：
????????若想要在新建窗口打開鏈接，則添加?target="_blank",在<a>標簽中。除此之外，<a>標簽還可以鏈接電子郵件地址。使用不多，具體不在介紹。
? ??????<img>標簽，是圖片的引用。例子如：<img src = "myimage.gif" alt = "My Image" title = "My Image" />，如圖2-11所示。
3 交互設(shè)計，表單標簽
3.1 表單
????????表單是可以把瀏覽者輸入的數(shù)據(jù)傳送到服務(wù)器端，這樣服務(wù)器端程序就可以處理表單傳過來的數(shù)據(jù)。語法：<form method="傳送方式" action="服務(wù)器文件">。傳送方式有兩種，get 和 post。get是想服務(wù)器獲取指定資源，而?post是提交數(shù)據(jù)給服務(wù)器。所有的表單控件（文本框、文本域、按鈕、單選框、復(fù)選框等）都必須放在 <form></form> 標簽之間。如圖3-1所示：
????????文本輸入框：<input type="text/password" name="名稱" value="文本" />，text是普通值；password是密碼，輸入為不可見。
????????按鈕：< input ?type="submit"value="提交">
? ? ? ? label：label標簽不會向用戶呈現(xiàn)任何特殊效果，當(dāng)用戶單擊選中該label標簽時，瀏覽器就會自動將焦點轉(zhuǎn)到和標簽相關(guān)的表單控件上（就自動選中和該label標簽相關(guān)連的表單控件上)。一般可作為文本提示框。注意ID一定相同。
3.2 其余表單控件
? ? ? ? 文本域：<textarea?rows="行數(shù)"cols="列數(shù)">文本</textarea>
? ? ? ? 單選/復(fù)選框：<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>。當(dāng)?type="radio"?時，控件為單選框當(dāng)?type="checkbox"?時，控件為復(fù)選框。value：提交數(shù)據(jù)到服務(wù)器的值。name：為控件命名，以備后臺程序使用。checked：當(dāng)設(shè)置 checked="checked" 時，該選項被默認選中。當(dāng)使用同一組:同一組的單選按鈕，name 取值一定要一致。如圖3-2所示。
? ? ? ? 下拉選框：<select>標簽中，夾著<option value="旅游" selected="selected" >旅游</option>。selected="selected"的時候，表示，默認的值。如圖3-3.
? ??????
? ??????
