JavaWeb基礎（day11）

HTML

HTML是超文本標記語言。HTML就 是普通的文本文件,只不過在文本中的內容如果被一些 特殊的標籤進行包裹就有了特殊的含義,這些被那些標籤標記文本,就成了超文本。

網頁的組成

網頁的組成

  1. HTML 用於展示需要顯示的資訊

  1. CSS 用來美化我們寫的頁面

  1. JavaScript 是頁面具有一定的交互效果

根據內容的劃分,可以將網頁劃分為靜態頁面和動態頁面

  • 靜態頁面就是編寫以後在瀏覽器中不再改變的網頁,如HTML ；

  • 動態頁面就是可以根據不同的情況顯示不同的內容,如jsp,php,動態頁面也是在HTML的基礎上添加 的一些內容 ；

HTML的結構

  • HTML不需要編譯，可以直接用瀏覽器閱讀

  • 擴展名為  .html  或者 .htm

  • 由標籤組成

    • 標籤不分大小寫

    • 單標籤 ：如< img/>

    • 雙標籤 ： 如<p> 雙標籤 </p>

  • 內容結構

<!-- dtd聲明,這個為HTML5的聲明--> 
<!DOCTYPE html> 
<!-- 頁面的根標籤-->
<html>
    <!-- 頭標籤,一般用於引入腳本,樣式導入,設置 編碼,定義標題等資訊--> 
    <head>
        <!--設置網頁編碼格式--> 
        <meta charset="utf-8"> 
        <title>Hello World</title>
    </head> 
    <!-- 體標籤,設置網頁顯示內容區域--> 
    <body>中華人民共和國萬歲 
    </body>
</html>

HTML中的常用標籤

  1. 注釋標籤    <!–注釋內容–>

  2. h 系列         定義標題1-6 ，由大到小，獨佔一行（不建議使用H1）

  3. p 標籤         段落標籤,會單獨佔據一行

  4. hr 標籤   分割線標籤,顯示一條分割線    size屬性:水平線的高度

  5. span 標籤    顯示文本的,不會單獨佔據一行

  6. font 標籤 

    1. 設置文本的大小顏色等資訊,不會獨佔一行

    2. size屬性:1­ 7,默認是3

    3. color屬性:可以是#xxxxxx表示3原色,也可以是 red.blue,green等

  7. b  標籤     粗體標籤,不會獨佔一行

  8. i  標籤   斜體標籤,不會獨佔一行

  9. br  標籤    換行標籤

  10. img 標籤

    1. 顯示圖片的標籤,不會獨佔一行

    2. src屬性:路徑,注意路徑問題

    3. alt屬性:圖片無法顯示的時候顯示的文字

    4. width屬性:設置寬,可以使像素值,也可以是百分比

    5. height屬性:設置高,可以使像素值,也可以是百分比

    6. title屬性:滑鼠移上去後顯示名字

  11. a 標籤

    1. 超鏈接標籤,不會獨佔一行

    2. href屬性,指定點擊後跳轉的路徑(url),如果需要點擊後 沒有反應,需要寫為: javascript:void(0)

    3. target屬性:指定跳轉模式,blank表示新建窗口,self表 示當前頁,默認是_self

  12. ol  標籤

    1. 有序列表,是組合標籤,ol內部嵌套li標籤

    2. type屬性:取值範圍,」A」,」a」,」I」,」i」,」1」

  13. ul  標籤

    1. 無序列表,是組合標籤,ul內部嵌套li標籤

    2. type屬性:取值範圍是,disc(實心圓),circle(空心圓),square(方塊)

  14. iframe  標籤

    1. iframe 元素會創建包含另外一個文檔的內聯框架（即 行內框架）。

    2. name屬性:指定iframe的名稱,如果 a 標籤的中的

    3. target 屬性值是其 name 屬性的時候,點擊a標籤,對應 的鏈接內容會出現在 iframe 中

    4. src屬性:指的是iframe中顯示的內容的連接

    5. frameborder屬性:取值為 0(不顯示邊框) 和 1(顯示邊框)

    6. scrolling屬性:取值為 yes(可以滾動) no(不能滾動)auto(自動)

    7. width屬性:表示寬度

    8. height屬性:表示高度

table 標籤

表格標籤,是組合標籤,內置有很多子標籤

table標籤的組成

  1. table 是父標籤，相當於表格容器

  2. <caption> 表格的標題,寫在 <table> 內的第一行, 用於指定表格的標題,會顯示的表格正上方

  3. <tr> 表示表格一行

  4. <th> 表格每一列的標題,寫在 <tr> 內

  5. <td> 表格的每一個單元格,寫在 <tr> 內

table標籤的屬性

  1. border:表格邊框的寬度

  2. width:寬度,可以是像素也可以是百分比

  3. height:高度,可以是像素也可以是百分比

  4. align:水平對齊方式 常用left center right

  5. valign:垂直對齊方式 常用top middle bottom

  6. cellspacing:外邊距,單元格與單元格之間的距離

  7. cellpadding:內邊距,單元格內容與單元格之間的距離

  8. bgcolor:背景顏色

table屬性注意點

  1. 寬度和高度可以設置table標籤和td標籤

    1.1 table設置width和height設置表格寬度和高度

    1.2 td設置width和height,只會影響當前單元格,不會影響表格的寬高

  1. 水平對齊

    2.1 水平對齊可以設置table tr td

    2.2 table設置align,可以控制表格在水平方向的水 平對齊方式

    2.3 tr設置align,可以控制當前行所有單元格內容的 水平對齊方式

    2.4 td設置align,設置之前按照tr的對齊方式,設置 後是控制當前單元格內容在水平方向的對齊方式

  1. 垂直對齊

    3.1 垂直對齊可以設置tr td

    3.2 tr設置valign,可以控制當前行所有單元格內容 的垂直對齊方式

    3.3 td設置valign,設置之前按照tr的對齊方式,設置 後是控制當前單元格內容在垂直方向的對齊方式

  1. 單元格和單元格之間的距離叫外邊距

    4.1 外邊距cellspacing只能給table設置,默認情況 下外邊距是2px

  1. 單元格內容和單元格之間的距離叫做內邊距

    5.1 內邊距cellpadding只能給table設置,默認是 1px

  1. 背景顏色

    6.1 table tr td 都可以設置

    6.2 table設置整個表格背景顏色,tr設置當前行,td設置單元格

    6.3 如果都進行設置,採用就近原則

細線表格

  1. 去掉邊框

  2. 設置表格背景顏色為black

  3. 設置單元格背景顏色為white

  4. 設置外邊距為1px

單元格的合併,對於td而言

  • 水平方向上佔據的列數 colspan

  • 垂直方向上佔據的行數 rowspan

HTML中的表單標籤

  1. form 標籤 一般用於向伺服器提交的時候將form標籤中的數據進行提交

    1. action屬性表示請求路徑,表單提交到伺服器的具體url

    2. method屬性表示請求方式一般取值為POST和GET

    3. GET是默認值,提交的數據會追加到請求路徑上, 如../..sevrvlet?username=tom&password=123,數據 以這種格式進行提交多個數據用&連接,因為請求路徑 長度有限制,所以GET請求提交的數據有限 POST,提交的數據會追加到路徑上

  2. input 標籤     用來獲取用戶輸入資訊的標籤

    1. type屬性有很多中,並且不同的屬性顯示的樣式不同

      1. text:文本框,輸入文本

      2. password:密碼框

      3. radio:互斥的單選按鈕checkbox:複選框

      4. submit:提交按鈕,將表單數據提交到伺服器

      5. file:上傳文件組件

      6. image:圖片提交按鈕,通過src設置圖片

      7. reset:重置按鈕,恢復表單

      8. hidden:隱藏欄位,數據會發送給伺服器,瀏覽器頁面 中不會顯示,一般可用於發送用戶的id

      9. button:普通按鈕,一般和js結合使用（不建議使用）

    2. name屬性,表單數據提交到伺服器必須提供name屬性

    3. value屬性,設置默認值

    4. checeked屬性:單選按鈕或者複選框被選中

    5. readonly:是否只讀

    6. disabled:是否可用

    7. size:大小,一般用於設置文本框的大小

    8. maxlength:允許輸入的最大長度,一般用於顯示文本框中文本內容的長度

    9. placeholder:佔位符屬性,常用於設置文本框的佔位符

  3. select標籤   

    1. 下拉列表常用於單選和多選,是組合標籤,需要子標籤 <option> ,不會獨佔一行 。

    2. name屬性,發送給伺服器的名稱

    3. multiple屬性,不寫默認單選,取值為multiple表示多選, 一般我們只使用單選

    4. size屬性,可見選項的數目

  4. option標籤

    1. selected屬性,表示勾選當前選項

    2. value屬性,發送給伺服器的選項值 ；

       

      注意:

      1.如果使用多選,那麼選擇的時候需要按住ctrl鍵 進行選擇.

      2.size屬性我們一般情況下不去設置

      3.selected屬性如果不設置的時候默認是列表中的第 一個被選中

      4.value屬性如果不設置的時候,發送給服務 器的時候value值默認是 <option>文本值</option> 文本值,如果設置了就是value屬性值,一般情況下都需 要進行設置

       

  5. textarea標籤

    1. 文本域,用於多行輸入文本

    2. cols屬性,文本域的列數

    3. rows屬性,文本域的行數

    4. name屬性,發送給伺服器的名稱

    5. value屬性,textarea的內容

 

關於表單標籤總結

  1. 需要提交到伺服器中的數據,必須都要放在form表 單中,否則是提交不過去的

  1. 最後提交的形式就是 name=value&name=value&name=value

  1. form中不需要的提交的內容,不設置name屬性,如按鈕本身就是作為提交功能的觸發,所以就不需要設置name屬性

div標籤

就是普通的標籤,獨自使用沒有任何效果,主要用於網頁中區域的劃分,會單獨佔據一行.

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Tags:

VirMach 便宜 VPS

QNews

QNews