前端之html語言

時間 2019-11-08

標籤前端 html 語言欄目 HTML 简体版

原文原文鏈接

前端概述

超文本標記語言（英語：HyperText Markup Language，簡稱：HTML）是一種用於建立網頁的標準標記語言。javascript

您可使用 HTML 來創建本身的 WEB 站點，HTML 運行在瀏覽器上，由瀏覽器來解析。css

更多內容參考:html

http://www.w3school.com.cn/html/前端

http://www.runoob.com/java

示例1：經過socket實現一個網頁的效果python

服務端代碼：web

 1 #!/usr/bin/env python
 2 # -*- coding:utf-8 -*- 
 3 #Author: nulige
 4 
 5 import socket
 6 
 7 def main():
 8     sock = socket.socket(socket.AF_INET, socket.SOCK_STREAM)
 9     sock.bind(('localhost',8080))
10     sock.listen(5)
11 
12     while True:
13         connection, address = sock.accept()
14         buf = connection.recv(1024)
15         f=open("test.html","rb")  #以讀的方式打開test.html文件
16         data=f.read()
17         connection.sendall(bytes("HTTP/1.1 201 OK\r\n\r\n","utf8"))
18 
19         connection.sendall(data)
20 
21         connection.close()
22 
23 if __name__ == '__main__':
24 
25     main()

test.html代碼編程

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>nulige</title>
 6     <title>oldboy</title>
 7     <link rel="icon" href="http://www.jd.com/favicon.ico">
 8     <link rel="stylesheet" href="css.css">
 9     <script src="hello.js"></script>　
10 </head>
11 <body>
12 <h1>hello world</h1>>
13 <h2>hello world</h2>>
14 <input type="text" readonly>
15 <p>img src="file:///D:/python/day42/1.jpg" width="120" height="80" align=</p>
16 
17 <h1 style="color:red">hello h1</h1>
18 <div>style</div>
19 
20 </body>
21 
22 <!--<script>-->
23     <!--alert(window.top.document.compatMode)-->
24 <!--</script>-->
25 
26 </html>

客戶端就是瀏覽器,經過瀏覽器去訪問test.html,獲得的效果以下：瀏覽器

示例2：訪問京東網站安全

從瀏覽器訪問京東的服務器原理圖

html css js 稱爲：網絡三劍客

上網：其實就是下載網頁
瀏覽器：就是一個解釋器

常見模式有兩種：

一種是cs模式：c: client s:server
一種是bs模式：b: browser s: server

標籤語言：<>

標籤分爲：自閉合標籤和不閉合標籤

塊級標籤:只佔本身字體的一小塊

內聯標籤:佔用一行

HTML 是什麼？

htyper text markup language 即超文本標記語言

超文本: 就是指頁面內能夠包含圖片、連接，甚至音樂、程序等非文字元素。

標記語言: 標記（標籤）構成的語言.

網頁==HTML文檔，由瀏覽器解析，用來展現的

靜態網頁：靜態的資源，如xxx.html

動態網頁：html代碼是由某種開發語言根據用戶請求動態生成的

html文檔樹形結構圖：

什麼是標籤

是由一對尖括號<>包裹的單詞構成例如: <html> *全部標籤中的單詞不可能以數字開頭.
標籤不區分大小寫.<html> 和 <HTML>. 推薦使用小寫.
標籤分爲兩部分: 開始標籤<a> 和結束標籤</a>. 兩個標籤之間的部分咱們叫作標籤體.
有些標籤功能比較簡單.使用一個標籤便可.這種標籤叫作自閉標籤.例如: <br/> <hr/> <input /> <img />
標籤能夠嵌套.可是不能交叉嵌套. <a><b></a></b>

標籤的屬性

一般是以鍵值對形式出現的. 例如 name="alex"
屬性只能出如今開始標籤或自閉和標籤中.
屬性名字所有小寫. *屬性值必須使用雙引號或單引號包裹例如 name="alex"
若是屬性值和屬性名徹底同樣.直接寫屬性名便可. 例如 readonly

示例：

1 <body>
2 <input type="text" readonly>
3 </body>

<!DOCTYPE html>標籤

因爲歷史的緣由，各個瀏覽器在對頁面的渲染上存在差別，甚至同一瀏覽器在不一樣版本中，對頁面的渲染也不一樣。在
W3C標準出臺之前，瀏覽器在對頁面的渲染上沒有統一規範，產生了差別(Quirks mode或者稱爲Compatibility
Mode)；因爲W3C標準的推出，瀏覽器渲染頁面有了統一的標準(CSScompat或稱爲Strict mode也有叫作Standars
mode)，這就是兩者最簡單的區別。
W3C標準推出之後，瀏覽器都開始採納新標準，但存在一個問題就是如何保證舊的網頁還能繼續瀏覽，在標準出來之前，
不少頁面都是根據舊的渲染方法編寫的，若是用的標準來渲染，將致使頁面顯示異常。爲保持瀏覽器渲染的兼容性，使以
前的頁面可以正常瀏覽，瀏覽器都保留了舊的渲染方法（如：微軟的IE）。這樣瀏覽器渲染上就產生了Quircks mode
和Standars mode，兩種渲染方法共存在一個瀏覽器上。

window.top.document.compatMode：
//BackCompat：怪異模式，瀏覽器使用本身的怪異模式解析渲染頁面。 
//CSS1Compat：標準模式，瀏覽器使用W3C的標準解析渲染頁面。

用法示例：

1 <script>
2     alert(window.top.document.compatMode)
3 </script>

　這個屬性會被瀏覽器識別並使用，可是若是你的頁面沒有DOCTYPE的聲明，那麼compatMode默認就是BackCompat,

這也就是惡魔的開始 -- 瀏覽器按照本身的方式解析渲染頁面，那麼，在不一樣的瀏覽器就會顯示不一樣的樣式。

若是你的頁面添加了<!DOCTYPE html>那麼，那麼就等同於開啓了標準模式，那麼瀏覽器就得老老實實的按照W3C的

標準解析渲染頁面，這樣一來，你的頁面在全部的瀏覽器裏顯示的就都是一個樣子了。

這就是<!DOCTYPE html>的做用。

head標籤

<meta>

meta標籤的組成：meta標籤共有兩個屬性，它們分別是http-equiv屬性和name 屬性，不一樣的屬性又有不一樣的參數值，這些不一樣的參數值就實現了不一樣的網頁功能。

1: name屬性主要用於描述網頁，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。

 
         <meta name 
         = 
         "keywords"  
         content 
         = 
         "meta總結,html meta,meta屬性,meta跳轉" 
         > 
        
         <meta name 
         = 
         "description"  
         content 
         = 
         "快維工做室培訓機構是由一個努力哥建立的" 
         >

2: http-equiv顧名思義，至關於http的文件頭做用，它能夠向瀏覽器傳回一些有用的信息，以幫助正確和精確地顯示網頁內容，與之對應的屬性值爲content， content中的內容其實就是各個參數的變量值。

 
         <meta http 
         - 
         equiv 
         = 
         "Refresh" 
         content 
         = 
         "2;URL=https://www.baidu.com" 
         >  
         / 
         / 
         (注意後面的引號，分別在秒數的前面和網址的後面) 
        
         <meta http 
         - 
         equiv 
         = 
         "content-Type" 
         charset 
         = 
         UTF8"> 
        
         <meta http 
         - 
         equiv  
         =  
         "X-UA-Compatible" 
         content  
         =  
         "IE=EmulateIE7"  
         / 
         >

注意：X-UA-Compatible(兼容：IE6 and IE7)

每一個主要版本IE新增的功能都是爲了讓瀏覽器更容易使用、增長安全性及更支持業界標準。以這些做爲IE的特點，其中
一個風險就是舊版本網站沒法正確的顯示。

爲了將這個風險降到最低，IE6容許網頁開發人員選擇IE編譯和顯示他們網頁的方式。"Quirks mode"爲預設，這會
使頁面以舊版本瀏覽器的視點顯示，"Standards mode"(也稱爲"strict mode")特色是支持業界標準最爲完善。
然而要利用這個加強的支持功能，網頁必須包含恰當的<!DOCTYPE>指令。

若一個網頁沒有包含<!DOCTYPE>指令，IE6會將它以quirks mode顯示。若網頁包含有效的<!DOCTYPE>指令但瀏
覽器沒法辨識，IE6會將它以IE6 standards mode顯示。由於少數網站已經包含<!DOCTYPE>指令，兼容性模式的
切換至關成功。這使網頁開發人員能選擇將他們的網頁轉移爲standards mode的最佳時機。

隨著時間通過，更多網站開始使用standards mode。它們也開始使用IE6的特性和功能來檢測IE。舉例來講，IE6
不支持universal selector(即css之全局選擇器 * {})，一些網站便使用它來針對IE作特定的對應。

當 IE7增長了對全域選擇器的支持，那些依賴IE6特色的網站便沒法偵測出這個新版本的瀏覽器。所以那些針對IE的
特定對應沒法應用於IE7，形成這些網站便沒法如他們預期的顯示。因爲<!DOCTYPE>只支持兩種兼容性模式，受到影
響的網站擁有者被迫更新他們的網站使其能支持IE7。

IE8 比以前的任何版本瀏覽器都更支持業界標準，所以針對舊版本瀏覽器設計的網頁可能沒法如預期般呈現。爲了幫
助減輕全部問題，IE8引入文件兼容性的概念，使你能選擇你的網頁設計要對應的特定IE版本。文件兼容性在IE8增長
了一些新的模式，這些模式能告訴瀏覽器如何解析和編譯一個網頁。若你的網頁沒法在 ie8正確的顯示，你能夠更新
你的網站使它支持最新的網頁標準(優先選項)或在你的頁面上新增一個meta元素用於告訴IE8如何依照舊版本瀏覽器
編譯你的頁面。

這能讓你選擇將你的網站更新支持IE8新特色的時機。

當 Internet Explorer 8 遇到未包含 X-UA-Compatible 標頭的網頁時，它將使用 <!DOCTYPE> 指令來確
定如何顯示該網頁。 若是該指令丟失或未指定基於標準的文檔類型，則 Internet Explorer 8 將以 IE5 模式
（Quirks 模式）顯示該網頁。

View Code

非meta標籤

    <title>nulige</title>
    <link rel="icon" href="http://www.jd.com/favicon.ico">
    <link rel="stylesheet" href="css.css">
    <script src="hello.js"></script>

body標籤

設置標籤背景色

<h3 style="padding: 2px 0px 2px 10px; font-size: 15px; line-height: 24px; background: #009acd; color: #ffffff; font-family: 'comic sans ms', 微軟雅黑, 宋體, 黑體, Arial; height: 24px; width: 507.47px; margin: 12px 0px !important;">body標籤</h3>

一基本標籤（塊級標籤和內聯標籤）

<hn>: n的取值範圍是1~6; 從大到小. 用來表示標題.  <h1> hello world <h1>

<p>: 段落標籤. 包裹的內容被換行.而且也上下內容之間有一行空白. （塊級標籤）

<b> <strong>: 加粗標籤.

<strike>: 爲文字加上一條中線.

<em>: 文字變成斜體.

<sup>和<sub>: 上角標 和 下角表.

<br>:換行.

<hr>:水平線

<div>

<div> hello world</div> 就是什麼都不作（重點）

<span> ：只佔一小塊空間  （內聯標籤）

內聯標籤：只能嵌套內聯標籤

塊級標籤：能夠嵌套內聯標籤

示例:演示div標籤

1 <div style="color: green; background-color: aquamarine;height: 100px;width: 50%;font-size: 40px;text-align: center">hello</div>

運行效果：

塊級標籤：<p><h1><table><ol><ul><form><div>

內聯標籤：<a><input><img><sub><sup><textarea><span>

block（塊）元素的特色

老是在新行上開始；
寬度缺省是它的容器的100%，除非設定一個寬度。
它能夠容納內聯元素和其餘塊元素

inline元素的特色

和其餘元素都在一行上；
寬度就是它的文字或圖片的寬度，不可改變
內聯元素只能容納文本或者其餘內聯元素

特殊字符

大於 = < 小於=&gt；&quot；©® 空格=nbsp

HTML 特殊符號編碼對照表

參考：http://tool.chinaz.com/Tools/HtmlChar.aspx

CSS樣式參考:

http://v3.bootcss.com/

二圖形標籤: <img>

src: 要顯示圖片的路徑.

alt: 圖片沒有加載成功時的提示.

title: 鼠標懸浮時的提示信息.

width: 圖片的寬

height:圖片的高 (寬高兩個屬性只用一個會自動等比縮放.)

示例:打開一張圖片

1 <body>
2 <img src="1.jpg" alt="截圖" title="京東" width="200px" height="200">
3 </body>

三超連接標籤(錨標籤) <a>

href:要鏈接的資源路徑 格式以下: href="http://www.baidu.com" 

target: _blank : 在新的窗口打開超連接. 框架名稱: 在指定框架中打開鏈接內容.

name: 定義一個頁面的書籤.

用於跳轉 href : #id.（錨）

示例：

1 <body>
2 <a href="http://www.xiaohuar.com">校花網</a>>
3 <a href="http://www.xiaohuar.com" target="_blank">校花網</a>>
4 <a href="http://www.xiaohuar.com" target="_blank"><img src="1.jpg" alt="">校花網</a>>  #實現打開圖片自動跳轉到校花網
5 </body>

四列表標籤：

<ul>: 無序列表

<ol>: 有序列表
         <li>:列表中的每一項.

<dl>  定義列表

         <dt> 列表標題
         <dd> 列表項

示例：

 1 <body>
 2 
 3 #unorder list
 4 <ul>   #快捷鍵，輸入ul，再按tab鍵會自動補全
 5     <li>111</li>
 6     <li>222</li>
 7     <li>333</li>
 8 </ul>
 9 
10 #older list
11 <ol>
12     <li>111</li>
13     <li>222</li>
14     <li>333</li>
15 </ol>
16 
17 #定義列表
18 <dl>
19     <dt>第一章</dt>
20     <dd>第一節</dd>
21     <dd>第二節</dd>
22 </dl>
23 
24 </body>

執行效果：

五表格標籤: <table>

border: 表格邊框.

cellpadding: 內邊距

cellspacing: 外邊距.

width: 像素 百分比.（最好經過css來設置長寬）

<tr>: table row

         <th>: table head cell

         <td>: table data cell

rowspan:  單元格豎跨多少行

colspan:  單元格橫跨多少列（即合併單元格）

<th>: table header <tbody>(不經常使用): 爲表格進行分區.

示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <!--表格-->
10 
11 <!--佈局-->
12 <table border="1px" cellpadding="5px" cellspacing="5px">
13     <thead>
14         <tr>
15             <!--標題加粗-->
16             <th>111</th>
17             <th>222</th>
18             <th>333</th>
19         </tr>
20 
21     </thead>
22 
23     <tbody>
24         <tr>
25             <!--內容正常顯示，不加粗-->
26             <td rowspan="2">111</td>
27             <td>222</td>
28             <td>333</td>
29         </tr>
30 
31         <tr>
32             <td>111</td>
33             <td>222</td>
34         </tr>
35 
36         <tr>
37             <td>111</td>
38             <td colspan="2">222</td>
39         </tr>
40     </tbody>
41 
42 </table>
43 
44 </body>
45 </html>

執行結果：

六表單標籤<form>

表單用於向服務器傳輸數據。

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

表單還能夠包含textarea、select、fieldset和 label 元素。

1.表單屬性

　　HTML 表單用於接收不一樣類型的用戶輸入，用戶提交表單時向服務器傳輸數據，從而實現用戶與Web服務器的交互。表單標籤, 要提交的全部內容都應該在該標籤中.

action: 表單提交到哪. 通常指向服務器端一個程序,程序接收到表單提交過來的數據（即表單元素值）做相應處理，好比https://www.sogou.com/web

method: 表單的提交方式 post/get 默認取值就是 get（信封）

get: 1.提交的鍵值對.放在地址欄中url後面. 2.安全性相對較差. 3.對提交內容的長度有限制.

post:1.提交的鍵值對不在地址欄，數據封裝在form Data 請求體裏面。 2.安全性相對較高. 3.對提交內容的長度理論上無限制.

get/post是常見的兩種請求方式.

2.表單元素

<input> 標籤的屬性和對應值

type:        text 文本輸入框

             password 密碼輸入框

             radio 單選框

             checkbox 多選框  

             submit 提交按鈕            

             button 按鈕(須要配合js使用.) button和submit的區別？

             file 提交文件：form表單須要加上屬性enctype="multipart/form-data"   

 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都好使.

示例：寫一個註冊頁面

代碼1：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <h1>註冊頁面</h1>
 9 
10 <!--action:就是提交數據到服務端 method{get,post}默認:get-->
11 <!--<form action="http://127.0.0.1:8080/index" method="post">-->
12 
13 <!--上傳文件加這句-->
14 <form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data">
15 
16 <!--輸入框-->
17 <!--type="" 隨便輸入一個內容-->
18 <p>用戶名:<input type="test" name="username" placeholder="姓名"></p>
19 
20 <!--password:不顯示密碼-->
21 <p>密碼:<input type="password" name="password" placeholder="密碼"></p>
22 
23 <!--password:不顯示密碼,只讀不能寫密碼-->
24 <!--<p>密碼:<input type="password" name="password" placeholder="密碼" readonly="readonly"></p>-->
25 
26 <!--多選框-->
27 <p>愛好： 音樂<input type="checkbox" name="hobby" value="music"> 電影<input type="checkbox" name="hobby" value="movie"></p>
28 
29 <!--單選框-->
30 <p>性別：  男<input type="radio" name="gender" value="men"> 女<input type="radio" name="gender" value="women"></p>
31 
32 <!--重置 -->
33 <p><input type="reset" value="重置"></p>
34 
35 <!--提交：會觸發事件，提交給服務端-->
36 <p><input type="submit" value="提交註冊"></p>
37 
38 <!--提交按鍵：不會觸發內容-->
39 <p><input type="button" value="提交註冊"></p>
40 
41 <!--選擇文件-->
42 <p><input type="submit" value="提交註冊"></p>
43 
44 
45 </form>
46 
47 </body>
48 </html>

代碼2 1 <!DOCTYPE html>

 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 
 8 <body>
 9 
10 <h1>註冊頁面</h1>
11 <!--<strike>用戶註冊</strike>--> #劃掉「用戶註冊」幾個字
12 <!--action:就是提交數據到服務端 method{get,post}默認:get-->
13 <!--<form action="http://127.0.0.1:8080/index" method="post">-->
14 
15 <!--上傳文件加這句-->
16 <form action="http://127.0.0.1:8080/index" method="post" enctype="multipart/form-data">
17 
18 <!--輸入框-->
19 <!--type="" 隨便輸入一個內容-->
20 <p>用戶名:<input type="test" name="username" placeholder="姓名" disabled></p>
21 
22 <!--password:不顯示密碼-->
23 <p>密碼:<input type="password" name="password" placeholder="密碼"></p>
24 
25 <!--password:不顯示密碼,只讀不能寫密碼-->
26 <!--<p>密碼:<input type="password" name="password" placeholder="密碼" readonly="readonly"></p>-->
27 
28 <!--多選框-->
29 <p>愛好： 音樂<input type="checkbox" name="hobby" value="music" checked> 電影<input type="checkbox" name="hobby" value="movie"></p>
30 
31 <!--單選框-->
32 <p>性別：  男<input type="radio" name="gender" value="men"> 女<input type="radio" name="gender" value="women"></p>
33 
34 <!--重置 -->
35 <p><input type="reset" value="重置"></p>
36     
37 <!--提交：會觸發事件，提交給服務端-->
38 <p><input type="submit" value="提交註冊"></p>
39 
40 <!--提交按鍵：不會觸發內容-->
41 <p><input type="button" value="提交註冊"></p>
42 
43 <!--選擇文件-->
44 <p><input type="submit" value="提交註冊"></p>
45     
46 </form>
47 
48 </body>
49 </html>

執行結果：

實現:返回頂部功能

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 <div id="www"></div>
 9 <img src="1.jpg" alt="截圖" title="京東" width="800" height="800"><br>
10 <a href="#www">返回頂部</a>
11 </body>
12 </html>

執行效果：

示例：實現上傳文件功能

在服務端裏面添加這段代碼：

 1 #實現上傳文件效果
 2 
 3 def index(request):
 4     print request.POST
 5     print request.GET
 6     print request.FILES
 7     for item in request.FILES:
 8         fileObj = request.FILES.get(item)
 9         f = open(fileObj.name, 'wb')
10         iter_file = fileObj.chunks()
11         for line in iter_file:
12             f.write(line)
13         f.close()
14     return HttpResponse('ok')

前端頁面代碼：

實現：上傳文件功能

 1 <body>
 2 
 3 <form>
 4 
 5 <!--上傳文件-->
 6 <p><input type="file" ></p>
 7 
 8 </form>
 9 
10 </body>

<select> 下拉選標籤屬性

          name:表單提交項的鍵.

          size：選項個數

          multiple：multiple 

                 <option> 下拉選中的每一項 屬性：

                       value:表單提交項的值.   selected: selected下拉選默認被選中

                 <optgroup>爲每一項加上分組

示例:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     省<select name="" id="">
10         <option value="">北京市</option>
11         <option value="">河北市</option>
12         <option value="">河南市</option>
13         <option value="">山西市</option>
14     </select>
15 
16 
17     省<select name="province" multiple size="2">
18         <option value="beijing">北京市</option>
19         <option value="hebei">河北市</option>
20         <!--默認選中河南省selected-->
21         <option value="henan" selected="selected">河南市</option>
22         <option value="shanxi">山西市</option>
23     </select>
24 
25     <!--選擇框-->
26     省<select name="province" >
27         <optgroup label="廣東省">
28             <option value="beijing">廣州</option>
29             <option value="hebei">東莞</option>
30             <!--默認選中河南省selected-->
31             <option value="henan" selected="selected">中山市</option>
32             <option value="shanxi">珠海市</option>
33         </optgroup>
34     </select>
35 
36 </body>
37 </html>

執行結果:

<textarea> 文本域

name:    表單提交項的鍵.

cols:    文本域默認有多少列

rows:    文本域默認有多少行

<label>

1 <label for="www">姓名</label>
2 <input id="www" type="text">

<fieldset>

<fieldset>
    <legend>登陸吧</legend>
    <input type="text">
</fieldset>

示例：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9     <!--文本框-->
10     簡介<textarea name="desc" id="" cols="30" rows="10"></textarea>
11 
12     <fieldset>
13     <legend>登陸吧</legend>
14     <input type="text">
15     </fieldset>
16 
17     <!--特效-->
18     <label for="www">姓名</label>
19     <input id="www" type="text">
20 
21 </body>
22 </html>

執行結果:

最後總結：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <title>Title</title>
 6 </head>
 7 <body>
 8 
 9 <form>
10 
11     <!--提交數據到服務端(方式有get and post)-->
12     <form action="http://127.0.0.1:8080/index" method="post">
13 
14     <!--input標籤的屬性和對應值-->
15     <input type="test" name="username">
16     <input type="password" name="pwd">
17     <input type="checkbox" name="hobby" value="musci">
18     <input type="radio" name="gender" value="man">
19     <input type="file" name="filename" >
20     <input type="submit" name="提交" >
21     <input type="button" name="提交" >
22     <input type="reset" name="重置" >
23 
24 
25     <!--下拉選標籤屬性-->
26     <select name="">
27         <option value=""></option>
28         <option value=""></option>
29     </select>
30 
31     <!--文本域-->
32     簡介<textarea name="" id="" cols="30" rows="10"></textarea>
33     
34 </form>
35 
36 </body>
37 </html>