前端之HTML補充

時間 2019-11-10

標籤前端 html 補充欄目 HTML 简体版

原文原文鏈接

1、列表

(1)、無序列表<ul>javascript

<body>
    <ul type="disc">
        <li>屬性一</li>
        <li>屬性二</li>
    </ul>
</body>

上述type屬性：css

disc（實心圓心，默認值）
circle（空心圓圈）
square（實心方塊）
none（無樣式）

（2）、有序列表<ol>java

<body>
    <ol type="1" start="1">
        <li>第一項</li>
        <li>第二項</li>
    </ol>
</body>

　　上述type屬性編程

1 數字列表，默認值
A 大寫字母
a 小寫字母
I 大寫羅馬
i 小寫羅馬

（3）、標題列表 <dt>爲標題 <dd>爲標題內容後端

<body>
    <dl>
        <dt>標題1</dt>
        <dd>內容1</dd>
        <dt>標題2</dt>
        <dd>內容2</dd>
    </dl>
</body>

2、表格

表格是一個二維數據空間，一個表格由若干行組成，一個行又有若干單元格組成，單元格里能夠包含文字、列表、圖案、表單、數字符號、預置文本和其它的表格等內容。
表格最重要的目的是顯示錶格類數據。表格類數據是指最適合組織爲表格格式（即按行和列組織）的數據。
表格的基本結構：瀏覽器

<body>
<!--給表格加了表框-->
<table border=" 5">
    <!--end-->
    <tr>
        <td>姓名</td>
        <td>年齡</td>
        <td>性別</td>
        <td>愛好</td>
    </tr>
    <tr>
        <td>jassin</td>
        <td>21</td>
        <td>男</td>
        <td>play</td>
    </tr>
</table>
</body>

屬性： border ： 表格邊框 cellpadding：內邊距 cellspacing：外邊距 width：像素百分比（最好經過css來設置長寬） rowspan：單元格豎跨多少行 colspan：單元格橫跨多少行（即合併單元格）

3、表單（form）

　　表單工做原理：訪問者在瀏覽有表單的網頁時，可填寫必需的信息，而後按某個按鈕提交。這些信息經過Internet傳送到服務器上。服務器上專門的程序對這些數據進行處理，若是有錯誤會返回錯誤信息，並要求糾正錯誤。當數據完整無誤後，服務器反饋一個輸入完成的信息。主要包含兩個屬性分別爲：a. action：表單提交到哪.通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理。b. method：表單的提交方式 post/get默認取值就是get。服務器

　　表單標籤包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。以及textarea、select、fieldset和 label標籤，分別介紹以下post

功能：spa

表單用於向服務器傳輸數據，從而實現用戶與Web服務器的交互3d

表單可以包含input系列標籤，好比文本字段、複選框、單選框、提交按鈕等等。

表單還能夠包含textarea、select、fieldset和 label標籤。

（1）<input>系列標籤（內聯標籤）

input標籤若是是要提交給後端的數據，必定要加上enctype="multipart/form-data" method必須是post

<1.> 表單類型

type：    text 文本輸入框
            password 密碼輸入框
            radio 單選框
            checkbox 多選框
            submit 提交按鈕
            button 按鈕（須要配合js使用。）button 和 submit 的區別？？？？
 file 提交文件：form表單須要加上屬性enctype="multipart/form-data" （記住） 上交文件注意兩點：請求方式必須是：post；enctype="multipart/form-data"

 <2> 表單屬性

 name:    表單提交項的鍵.

           注意和id屬性的區別：name屬性是和服務器通訊時使用的名稱；
           而id屬性是瀏覽器端使用的名稱，該屬性主要是爲了方便客戶端編程，
　　　　　　　　而在css和javascript中使用的

value:    表單提交項的值.對於不一樣的輸入類型，value 屬性的用法也不一樣：

                type="button", "reset", "submit" - 定義按鈕上的顯示的文本
                 
                type="text", "password", "hidden" - 定義輸入字段的初始值
                 
                type="checkbox", "radio", "image" - 定義與輸入相關聯的值

checked:  radio 和 checkbox 默認被選中

readonly: 只讀. text 和 password

disabled: 對所用input都好使.

　text、password、submit類型實例：

下圖from應爲form

　　checkbox與radio實例：

　　file 、reset 、button實例：

（2）select系列

　　具體實例以下：

屬性說明：

multiple：布爾屬性，設置後爲多選，不然默認單選
disabled：禁用
selected：默認選中該項
value：定義提交時的選項值

（3）<textarea>多行文本框

（個性簽名、簡介）

<textarea name="memo" id="memo" cols="30" rows="10">
  默認內容
</textarea>

屬性說明：

name：名稱
rows：行數
cols：列數
disabled：禁用

（4）<lable>標籤

定義：<label> 標籤爲 input 元素定義標註（標記）。說明：1 label 元素不會向用戶呈現任何特殊效果。2 <label> 標籤的 for 屬性值應當與相關元素的 id 屬性值相同。

（5）分組下拉框

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。