【Web】Html 常用標籤

HtmlCSSJavaScript

 

學習web前端開發基礎技術需要掌握:HTMLCSSJavaScript語言。下面我們就來了解下這三門技術都是用來實現什麼的:

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:數據傳輸方式(getpost

 

<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:爲控件命名,以備後臺程序ASPPHP使用。

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>


發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章