Html、CSS、JavaScript
學習web前端開發基礎技術需要掌握:HTML、CSS、JavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的:
1. HTML是網頁內容的載體。內容就是網頁製作者放在頁面上想要讓用戶瀏覽的信息,可以包含文字、圖片、視頻等。
2. CSS樣式是表現。就像網頁的外衣。比如,標題字體、顏色變化,或爲標題加入背景圖片、邊框等。所有這些用來改變內容外觀的東西稱之爲表現。
3. JavaScript是用來實現網頁上的特效效果。如:鼠標滑過彈出下拉菜單。或鼠標滑過表格的背景顏色改變。還有焦點新聞(新聞圖片)的輪換。可以這麼理解,有動畫的,有交互的一般都是用JavaScript來實現的。
Html文件基本結構
<html>
<head>…</head>
<body>…</body>
</html>
常見標籤
<hx></hx> 標題標籤 共有6個從h1到h6依次遞減。
<img src=”xx.jpg”/> 圖片標籤
<head></head> 頭標籤:
描述了文檔的各種屬性和信息,包括文檔的標題等。絕大多數文檔頭部包含的數據都不會作爲內容顯示給讀者。
<head>
<title> … </title>
<meta>
<link>
<style>…</style>
<script>…</script>
<head>
<title></title>標籤之間內容是網頁的標題信息。
<!—註釋文字—> 註釋標籤
<body></body> 顯示網頁的內容。
<p></p> 段落標籤
<em></em> 和<strong></strong> 表示強調。
<span></span> 該標籤沒有語義,它的作用就是爲了設置單獨的樣式用的。
<q></q> 短文本引用,不需要雙引號,會被自動加上雙引號。
<blockquote></blockquote> 長文本引用,也不用加雙引號。
<br/> 換行
空格
<hr/> 添加水平橫線
<address>地址</address> 顯示地址信息。
<code></code> 在文章中插入一行代碼時,可以使用code標籤。
<pre></pre> 插入一大段代碼時可以使用pre標籤,被pre元素包圍的文本通常會保留空格和換行符。
<ul><li></li><ul> 列表信息,無序列表。
<ol><li></li></ol> 列表信息,有序列表。
<div></div> 容器,可以把一些獨立的邏輯劃分出來,如網頁中的欄目板塊。
<table> 標籤
<table>
<tr> 表示一行
<td> 表示一列</td>
</tr>
</table>
<caption>表格標題</caption> 表格需要添加一些標籤進行優化,可以添加標題和摘要。
<table summary=”表格”>
<caption>標題文本</caption>
<tr>
<td>…</td>
<td>…</td>
…
</tr>
…
</table>
<a href=”目標網址” title=”鼠標滑過顯示的文本”>鏈接顯示文本</a>
<a href=”目標網址” target=”_blank”>click here</a> 在新建瀏覽器中打開鏈接
使用mailto 在網頁中鏈接網頁地址: <a> 標籤還有一個作用是可以鏈接Email地址,使用mailto能讓訪問者便捷向網站管理者發送電子郵件。
一個電子郵件完整的實例
<img src=”圖片地址” alt=”下載失敗時替換文本” title=”提示文本”>
Src: 標識圖片的位置。
Alt:指定圖片的描述性文本,當圖像不可見時(下載不成功時),可看到該屬性指定的文本。
Title:提供在圖像可見時對圖像的描述(鼠標滑過圖片是顯示的文本)。
<form></form> 表單標籤,與用戶交互。
<from method=”傳送方式” action=”服務器文件”>
<form>: <form> 標籤是成對出現的,以<form>開始,以<form>結束
<action>:瀏覽器輸入的數據被傳送到的地方,如save.jsp
Method:數據傳輸方式(get、post)。
<input type=”text/password” name=”名稱” value=”文本”/> 文本框、密碼輸入框
Type: 當type=“text” 時,輸入框爲文本輸入框。 當type=”password”時,輸入框爲密碼輸入框。
Name:爲文本框命名,以備後臺asp php 使用。
Value:爲文本輸入框設置默認值。(一般爲提示作用)。
<textarea rows=”行數” cols=”列數” >文本</textarea> 文本域,支持多行輸入
1.<textarea>標籤是成對出現的。
2.cols:多行輸入域的列數。
3.rows:多上輸入域的行數。
4.在<textarea></textarea>標籤之間可以輸入默認值。
<form method=”post” action=“save.php”>
<textarea cols=”50” rows=”10” >在這裏輸入內容…</textarea>
</form>
<input type=”radio/checkbox” value=”值” name=”名稱” checked=“checked”/>
1. type : 當type=”radio” 時,控件爲單選框。 當 type=”checkbox” 時,控件爲複選框。
2. value:提交數據到服務器的值。
3. name:爲控件命名,以備後臺程序ASP、PHP使用。
4. checked=“checked” 該選項被默認選中。
注意:同一組的單選按鈕,name取值一定要一致。
使用下拉列表,節省空間。
<select>
<option value=”提交值” selected=”selected”>顯示值</option> 表示被默認選中
…
</select>
使用下拉列表框進行多選
下拉列表也可以進行多選操作,在<select>標籤中設置 multiple=“multiple” 屬性,就可以實現多選功能,在windows操作系統下,進行多選時同時按下Ctrl 鍵和 單擊 。
<select multiple=”multiple”>
…
</select>
<input type=”submit” value=”提交”/> 提交按鈕,用於提交表單數據。
<input type=”reset” value=”重置”/> 重置按鈕,使輸入框恢復到初識狀態。
<label for=”控件id名稱”>
Label標籤不會向用戶呈現任何特殊效果,它的作用是爲鼠標用戶改進了可能性。如果你在label標籤內點擊文本,就會觸發此控件。就是說,當用戶單擊選中該label標籤時,瀏覽器就會自動將焦點轉到和標籤相關的表單控件上(就自動選中和標籤相關聯的表單控件上)。
注意:標籤的for屬性中的值要和相關控件的id屬性值相同。
<form>
<label for="male">男</label>
<input type="radio" name="gender" id="male" />
<br />
<label for="female">女</label>
<input type="radio" name="gender" id="female" />
<label for="email">輸入你的郵箱地址</label>
<input type="email" id="email" placeholder="Enter email">
</form>