html基礎

1.     什麼是html?

Html是用來描述網頁的一種語言。

l HTML 指的是超文本標記語言 (Hyper Text Markup Language)

l HTML 不是一種編程語言,而是一種標記語言 (markup language)

l 標記語言是一套標記標籤 (markup tag)

l HTML 使用標記標籤來描述網頁

2.     Html的作用?

Web瀏覽器的作用是讀取html文檔,並以網頁的形式顯示它們。瀏覽器不會顯示html標籤,而是使用標籤來解釋頁面上的內容.

簡單說,html就是用於展示信息的。

3.     Html書寫規範

a)      Html標籤

HTML 標記標籤通常被稱爲 HTML 標籤 (HTML tag)。

l HTML 標籤是由尖括號包圍的關鍵詞,比如 <html>

l HTML 標籤通常是成對出現的,比如 <b> 和 </b>

l 標籤對中的第一個標籤是開始標籤,第二個標籤是結束標籤

l 絕大多數的標籤都具有屬性,建議屬性值使用引號引起。例如:<body text=”red”>

l 大多數標籤是可以嵌套的

b)      Html創建

Html文件可以直接使用文本編輯器來創建,保存時,後綴名爲html或htm

整個文件是在<html>與</html>標籤之間在<html>標籤間有<head>與<body>子標籤。

例如:

c)      空的html標籤

l 沒有內容的 HTML 元素被稱爲空元素。空元素是在開始標籤中關閉的。

l <br> 就是沒有關閉標籤的空元素(<br> 標籤定義換行)。

l 在開始標籤中添加斜槓,比如 <br/>,是關閉空元素的正確方法,HTML、XHTML和 XML         都接受這種方式。

l 即使 <br> 在所有瀏覽器中都是有效的,但使用<br /> 其實是更長遠的保障。

d)      Html大小寫不敏感

HTML 標籤對大小寫不敏感:<P> 等同於<p>。許多網站都使用大寫的 HTML 標籤。

W3School 使用的是小寫標籤,因爲萬維網聯盟(W3C)在HTML 4 中推薦使用小寫,而在未來 (X)HTML 版本中強制使用小寫

 

文件標籤

1.  html標籤

整個文件都處於<html>標籤中.

<HTML>用以聲明這是 HTML 文件,讓瀏覽器認出並正確處理此 HTML 文件。

在HTML文件有兩部分<head>與<body>

2.  head標籤

<head>用於加載一些重要的資訊

          它的內容不會被顯示,只有<body>的內容纔會被顯示 

3.  title標籤

<title>只能出現於<head>中。

它代表的是標題

4.  body標籤

<body>中的內容會被顯示。

常用屬性:

n  text:用於設定文字顏色

n  background:用於設定背景圖片

n  bgcolor:用於設定背景色

 

5.  關於html中顏色取值

顏色由紅色、綠色、藍色混合而成

有三種取取值方式:

       1.rgb(0,0,0)  值是在0-255之間

       2.#000000  #ff0000  #00ff00 #0000ff  #ffffff

       3.red  green blue

 

排版標籤

1.     註釋

在html中註釋是<!--註釋 -->

在html中使用註釋的目的與java中一樣。

2.     p標籤

<p>標籤是段落標籤,可以將html文檔分割爲若干段落。瀏覽器會自動在段落前後添加空格。

<p>標籤常用屬性

l align:用於設定對齊方式 可選值 left right center 默認值是left.

3.     br標籤

<br>標籤是換行標籤。

因爲瀏覽器會自動的忽略空白與換行,因此<br>標籤成爲了我們最常用的標籤。

 

4.     hr標籤

<hr>標籤會生成一條水平線。

常用屬性:

l  align:設置水平線對齊方式 可選值 left right center

l  size:設置水平線厚度 以像素爲單位。默認爲2

l  width:設置水平線長度.可以是絕對值或相對值。默認爲100%

l  color:設置水平線顏色.默認爲黑色

 

5.     關於html中數值單位

Html的數值默認單位爲像素(px).

在有些位置可以使用百分比來設置。

例如:

<hr size=’3’>這個就代表水平線厚席爲3px.

<hr width=’30%’>這個就代表水平線長度爲總長度的30%.

 

塊標籤

1.     div標籤

用於在文檔中設定一個塊區域。

常用屬性:

align:left center right

2.     span標籤

用於在行內設定一個塊區域。

 

Html中絕大多數元素被定義爲塊級元素或內聯元素。

塊級元素在瀏覽器顯示時,通常會以新行來開始。例如 div p等

內聯元素在瀏覽器顯示時,通常不會以新行來開始。span

 

        

字體標籤

1.     font

<font>標籤用於規定文本的字體,大小,顏色。

常用屬性:

n  face:規定文本的字體

n  size:規定文本的大小

n  color:規定文本的顏色

2.     h1-h6

<h1>-<h6>標籤用於定義標題.

<h1>最大標題

<h6>最小標題

列表標籤

1.     ul

<ul>標籤表示的是一個無序列表。

常用屬性:

l  type:規定列表的項目符號類型,可取值 disc,square,circle.默認值爲disc

2.     li

<li>標籤表示的是一個列表項

常用屬性:

l type:這個屬性只適用於無序列表,用於設定項目符號,默認值爲disc

l value:這個屬性只適用於有序列表,用於設定列表的項目數字

3.     ol

<ol>表示的是一個有序列表。

常用屬性:

l type:這個屬性規定列表中使用的標記類型。可取值1 A a I i.

l start:這個屬性規定列表的起始值

 

 

圖形標籤

1.     img

<img>是一個圖片標籤,用於在頁面上引入圖片.

常用屬性:

l src:用於設定要引入的圖片的url

l alt:用於設定圖像的替代文字

l width:用於設定圖片的寬度

l height:用於設定圖片的高度

l border:圖片邊框厚度

l align:用於設定圖片的文字的對齊方式

鏈接標籤

1.     a

<a>標籤用於定義超連接,用於從一個頁面鏈接到另一個頁面。

常用屬性:

l href:用於設定鏈接指向頁面的url.

l name:用於設定錨的名稱

l target:用於設定在何處打開鏈接頁面。

表格標籤

1.     table

<table>標籤用於定義表格

常用屬性:

l align:用於設定表格的對齊方式

l bgcolor:用於設定表格的背景顏色。

l border:用於設定表格邊框的寬度

l width:用於規定表格的寬度。

2.     tr

<tr>標籤用於定義表格的行,包含一個或多個th或td元素。

                 <tr>常用屬性:

                 align:用於設定表格中行的內容對齊方式。

                 bgcolor:用於設定表格中行的背景顏色。

                

                

3.     td

<td>標籤用於定義表格單元

td元素中的文本一般顯示爲正常字體且左對齊。

<td>常用屬性:

l align:用於設定單元格內容的對齊方式。

l bgcolor:用於設定單元格背景顏色。

l height:用於設定單元格的高度。

l width:用於設定單元格的寬度。

l colspan:用於設定列合併

l rowspan:用於設定行合併。

 

4.     caption

<caption>用於定義表格標題

                  <caption>標籤必須緊隨<table>標籤之後,一個表格只能有一個標題。通常這個標題會被居中於表格之上。

5.     th

<th>標籤用於定義表格的表頭,<th>內部的文本通常呈現爲居中加粗文本。

Html表格中有兩種類型的單元格:

       表頭單元格th:包含表頭信息。

       標準單元格td:包含數據。

6.     thead

<thead>標籤用於定義表格的頁眉

              <thead>標籤用於組合HTML表格的表頭內容。

                 <thead>元素應該與<tbody>和<tfoot>元素結合起來使用。

                 注意:<thead>內部必須有<tr>標籤。

7.     tbody

<tbody>標籤用於定義表格的主體

<tbody>標籤用於組合HTML表格的主體內容。

8.     tfoot

<tfoot>標籤用於定義表格的頁腳

<tfoot>標籤用於組合HTML表格中的表注內容。

【內容:HTML表單標籤】

form標籤

   <form>標籤代表一個表單,表單用於向服務器傳輸數據。

    <form>標籤能夠包含<input>,可以是文本字段,複選框,單選框或提交按鈕等。還可以包含<textarea> <select>等。

       <form>常用屬性:

l      name:用於定義表單的名稱

l      action:用於規定提交表單時向何處發送表單數據。

l      method:用於規定提交的方式。一般取值 POST或GET

關於POST與GET方式區別:

1.     get方式只能少量數據,而post可以攜帶大數據。

2.     get方式提交時,數據會在地址欄上顯示,安全性差。Post方式提交不會在地址欄上顯示數據,更加安全。

 

input種類

   <input>標籤用於蒐集用戶信息。

根據不同的 type 屬性值,輸入字段擁有很多種形式。輸入字段可以是文本字段、複選框、掩碼後的文本控件、單選按鈕、按鈕等等。

關於<input>標籤type屬性值說明 :

text

<input type=”text”>

定義單行的輸入字段,用戶可在其中輸入文本。默認寬度爲 20 個字符。

其它常用屬性:

l  name:定義標籤名稱

l  value:定義標籤值

l  size:定義輸入字段的長度

l  maxlength:定義可輸入最大字符個數

password

<input type=”password”>

定義密碼字段。該字段中的字符被掩碼.

其它常用屬性:

l  name:定義標籤名稱

l  value:定義標籤值

l  size:定義輸入字段的長度

l  maxlength:定義可輸入最大字符個數

 

radio

<input type=”radio”>

定義單選按鈕。

其它常用屬性:

l  name:定義標籤名稱.注意,對於單選按鈕,如果要想做到單一選擇,多個radion的name值必一樣。

l  value:定義標籤值

l  checked:定義該標籤默認被選中。

 

checkbox

<input type=”checkbox”>

定義複選框。

其它常用屬性:

l  name:定義標籤名稱.注意,一組的checkbox它們的name值應該是一樣的。

l  value:定義標籤值

l  checked:定義該標籤默認被選中。

 

button

<input type=”button”>

定義可點擊按鈕(多數情況下,用於通過 JavaScript 啓動腳本)

其它常用屬性:

l  name:定義標籤名稱

l  value:按鈕顯示名稱

 

hidden

<input type=”hidden”>

定義隱藏的輸入字段。

其它常用屬性:

l  name:定義標籤名稱

l  value:定義標籤值

 

file

<input type=”file”>

定義輸入字段和 "瀏覽"按鈕,供文件上傳。

其它常用屬性:

l  name:定義標籤名稱

 

submit

<input type=”submit”>

定義提交按鈕。提交按鈕會把表單數據發送到服務器。

其它常用屬性:

l  name:定義標籤名稱

l  value:按鈕顯示名稱

 

reset

<input type=”reset”>

定義重置按鈕。重置按鈕會清除表單中的所有數據。

其它常用屬性:

l  name:定義標籤名稱

l  value:按鈕顯示名稱

 

image

<input type=”image”>

定義圖像形式的提交按鈕。

這個標籤主要是用了替換submit按鈕,因爲默認產生的提交按鈕並不漂亮,這個標籤允許你採用指定的圖片做爲提交按鈕。

其它常用屬性:

l  name:定義標籤名稱

l  src:定義作爲提交按鈕顯示的圖像的url

l  alt:定義作用圖像的替代文本。

 

select與option標籤

          1.<select>

用於定義一個下拉列表

                 常用屬性:

l  name:定義下拉列表的名稱

l  size:定義下拉列表中可見選項的數目

l  multiple:定義可選擇多個選項

2.<option>

用於定義下拉列表中的選項。

<option>需要位於<select>標籤內部

                 常用屬性:

l  value:定義送往服務器的選項值

l  selected:定義選項爲選中狀態。

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