Web前端基礎(3):HTML(三)

時間 2019-11-17

標籤 web 前端基礎 html 欄目 HTML 简体版

原文原文鏈接

1. body中的相關標籤

1.1 表格標籤：table、tr、td

HTML表格由<table>標籤以及一個或多個<tr>、<th>或<td>標籤組成。html

<table>：父標籤，至關於整個表格的容器。瀏覽器

border：表格邊框的寬度。服務器

width：表格的寬度。框架

cellpadding：單元邊沿與其內容之間的空白。佈局

cellspacing：單元格之間的空白。spa

bgcolor：表格的背景顏色。code

<tr>：標籤用於定義行。orm

<td>：標籤用於定義表格的單元格（一個列）htm

colspan：單元格可橫跨的列數。blog

rowspan：單元格可橫跨的行數。

align：單元格內容的水平對齊方式，取值：left 左、right 右、center 居中。

nowrap：單元格中的內容是否折行。

<th>：標籤用於定義表頭。單元格內的內容默認居中、加粗。

實例1：

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 3*3表格，設置寬度和邊線，並顯示1像素的邊線 -->
        <table border="1" width="400px" cellpadding="0" cellspacing="0">
            <tr>
                <th>1標題</th>
                <th>2標題</th>
                <th>3標題</th>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </table>
    </body>
</html>

實例2：

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 3*3表格，將第一行所有合併 -->
        <table border="1" width="400px" cellpadding="0" cellspacing="0">
            <tr>
                <td colspan="3" bgcolor="#ddd">a</td>
            </tr>
            <tr>
                <td>4</td>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>7</td>
                <td>8</td>
                <td>9</td>
            </tr>
        </table>
    </body>
</html>

實例3：

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 3*3表格，將第一列所有合併 -->
        <table border="1" width="400px" cellpadding="0" cellspacing="0">
            <tr>
                <td rowspan="3" bgcolor="#ddd">1</td>
                <td>2</td>
                <td>3</td>
            </tr>
            <tr>
                <td>5</td>
                <td>6</td>
            </tr>
            <tr>
                <td>8</td>
                <td>9</td>
            </tr>
        </table>
    </body>
</html>

1.2 框架標籤：frameset

<frameset>標籤，是多個窗口頁面整合在一塊兒的一個集合（框架集）。每個頁面（框架）都是單獨文檔，須要使用子標籤<frame>來肯定頁面的位置。<frameset>經過列和行來肯定總體佈局，使用cols肯定列數，使用rows肯定行數。多個<frameset>能夠嵌套使用。

<frameset>和<body>兩個不能共存。

rows屬性和cols屬性取值：值1，值2，值3，......一個值表示一行（列），多值使用逗號分隔，值能夠是10px、10%等，最後一個值若是不想計算可使用*匹配剩餘量。

<frame>標籤，用於設置<frameset>框架集中的一個頁面（框架）。

src屬性：肯定頁面的路徑。

noresize屬性：框架分隔先不能移動。

target屬性：肯定須要顯示的頁面在何處顯示。

實例：

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <frameset rows="15%,*">
        <frame src="top.html" name="top" />
        <frameset cols="15%,*">
            <frame src="left.html" name="left" />
            <frame src="right.html" name="right" />
        </frameset>
    </frameset>
</html>

1.3 表單標籤：form

<form>：表單標籤，在html頁面建立一個表單，表單標籤在瀏覽器上沒有任何顯示。若是數據須要提交到服務器，負責蒐集數據的標籤必須存放在表單標籤體內容。

action屬性：請求路徑，肯定表單提交到服務器的地址（路徑）。

method屬性：請求方式。經常使用的取值：GET、POST。

　　GET：默認值

　　　　提交的數據追加在請求路徑上。例如：/1,html?username=xhh&password=1234，數據格式k/v，追加是使用?鏈接，以後每一對數據使用&鏈接。

　　　　由於請求路徑長度有限，全部GET請求提交的數據有限。

　　POST：

　　　　提交的數據再也不請求路徑上追加（及不顯示在地址欄上）。

　　　　提交的數據大小不顯示。

<html>
    <head>
        <meta charset="utf-8"/>
        <title></title>
    </head>
    <body>
        <!-- 表單 -->
        <form action="" method="">
                <!-- 此處的內容可能被提交到服務器 -->
        </form>
        <!-- 此處的內容在<form>標籤外部，此處數據不能提交到表單 -->
    </body>
</html>

1.3.1 輸入域標籤：input

<input>標籤用於得到用戶輸入信息，type屬性值不一樣，蒐集方式不一樣。最經常使用的標籤。

type屬性

text：文本框，單行的輸入字段，用戶可在其中輸入文本。默認寬度爲20個字符。

password：密碼框，密碼字段。該字段中的字符以黑圓顯示。

radio：單選框，表示一組互斥選項按鈕中的一個。當一個按鈕被選中，以前選中的按鈕就變爲非選中的。

submit：提交按鈕。提交按鈕會把表單數據發送到服務器。通常不寫那麼屬性，不然將「提交」兩個字提交到服務器。

checkbox：複選框。

file：文件上傳組件，提供「瀏覽」按下能夠選擇須要上傳的文件。

hidden：隱藏字段。數據會發送給服務器，可是瀏覽器不進行顯示。

reset：重置按鈕。將表單恢復到默認值。

image：圖形提交按鈕，經過src給按鈕設置圖片。

button：普通按鈕，經常使用於有JavaScript結合使用。

name：元素名，若是須要表單數據提交到服務器，必須提供name屬性值，服務器經過屬性值得到提交的數據。

value屬性：設置input標籤的默認值。submit和reset爲按鈕顯示數據。

size：大小。

checked屬性：單選框或複選框被選中。

readonly：是否只讀。

disabled：是否可用。

maxlength：容許輸入的最大長度。