前端學習-基礎部分-HTML

時間 2019-11-17

標籤前端學習基礎部分 html 欄目 HTML 简体版

原文原文鏈接

開始今日份整理javascript

1.HTML基礎標籤

1.1 標籤

標籤格式css

HTML規定用英文尖括號，<>包起來，例如<html>
HTML中一般標籤成對出現，分爲開始標籤與結束標籤，結束標籤比開始標籤多一個’/’,例如<div></div>
標籤不區分大小寫，<html>和<HTML>，不過在程序員中默認都是小寫
標籤分爲倆部分：開始標籤<a>和結束標籤</a>.倆個標籤之間的部分，咱們叫作標籤體，而有些標籤功能比較簡單，有些時候使用單標籤便可，這種標籤叫作自閉和標籤，例如<br/><hr/><input/><img/>
標籤能夠有若干個屬性，也能夠不帶屬性，如<head>元素就不帶任何屬性
標籤能夠嵌套，可是不能交叉嵌套，例如：咱們能夠在<div>標籤內能夠加入<p>標籤，可是不能交叉嵌套，<a><b></a></b>這麼使用時錯誤的嵌套以及使用

標籤的語法：html

<標籤名屬性1 =「屬性值1」屬性2 =「屬性值2」 ……>內容部分</標籤名>
<標籤名屬性1 =「屬性值1」屬性2 =「屬性值2」 ……>

1.2 自閉和標籤和主動閉合標籤

　　<meta charset="UTF-8"> (自閉合標籤)html5

　　<title>標題</title> (主動閉合標籤)java

　　注: 建議自閉和標籤後面加上一個/ eg: <br/>jquery

　　注2：自閉和標籤也叫單閉合標籤，主動閉合標籤也叫雙閉合標籤程序員

1.3 標籤屬性與分類

1.3.1 塊狀元素

塊狀元素 display: blockweb

每一個塊狀元素都重新的一行開始，獨佔一行
元素的高度，寬度，行高以及頂部和底部邊距能夠設置
元素的寬度在不設置的狀況下，是它自己容器的100%，除非設定寬度

經常使用標籤有：<div><p><h1>~<h6><ol><ul><table><form><li>後端

1.3.2 行內元素

行內元素 display:inline瀏覽器

和其餘元素在同一行
元素的高度，寬度，行高以及頂部和底部邊距不可設置
元素的寬度不可改變

經常使用標籤有: <a><span><br><li><em><strong><labal>

1.3.3 行內塊狀元素

行內塊狀元素 display:inline-block

和其餘元素在同一行
寬，高，底和頂部均可以設置

經常使用標籤有：<img><input>

注：能夠經過display元素對塊級元素，行內元素以及行內塊元素進行轉換

1.4 嵌套規則

塊元素能夠包含行內元素或某些塊元素，但行內卻不能包含塊元素，它只能包含其它的內聯元素，例如：

<div><div></div><h1></h1><p><p></div> ✔️
<a href=」#」><span></span></a> ✔️
<span><div></div></span> ❌

塊級元素不能放在p標籤內

<p><ol><li></li></ol></p> ❌
<p><div></div></p> ❌

某些塊元素只能包含行內元素，不能包含塊元素，例如：h1~h6,p
li元素能夠嵌入ul，ol，div等標籤

2.HTML的head標籤

2.1 聲明文件

<!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標籤以前。此標籤可告知瀏覽器文檔使用哪一種 HTML 或 XHTML 規範

<!--html5標準-->
<!DOCTYPE html>

2.2 meta標籤 ——>編碼，跳轉，刷新，關鍵字，描述，IE兼容

meta標籤

1 頁面編碼（告訴瀏覽器是什麼編碼）
2 < meta http-equiv=「content-type」 content=「text/html;charset=utf-8」>
3 刷新和跳轉
4 < meta http-equiv=「Refresh」 Content=「30″>
5 < meta http-equiv=」Refresh「 Content=」5; Url=https://www.baidu.com「 />  # 5秒後跳轉到指定網址
6 告訴搜索引擎的網站的關鍵詞，爲了SEO優化
7 < meta name="keywords" content="老男孩,oldboy,alex,雞湯" >

2.3 title標籤 –>網頁的標題

title標籤中內容是是如今瀏覽器網頁上的標題

<title>測試網頁</title>

2.4 link標籤 –>引入css文件或者是圖標文件

link標籤

1 引入css:
2 < link rel="stylesheet" type="text/css" href="css/common.css" >
3 引入圖標icon:
4 < link rel="shortcut icon" href="image/favicon.ico">

2.5 style標籤 –> 寫css代碼

style標籤

<style>
.nav{
            width: 960px;
            margin: 100px auto 0;
            background-color: palevioletred;
            overflow: hidden;
            border-radius: 5px;

</style>

通常style標籤寫在head中

2.6 script標籤 –> 寫JavaScript 或引入JavaScript

script標籤

1 引進文件
2 < script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"> </script >
3 寫js代碼
4 < script type="text/javascript" > ... </script >

具體狀況在後面的JavaScript中會詳細介紹

2.7 base標籤

　　base標籤能夠爲頁面的全部連接規定默認地址或默認目標，base標籤中的href屬性指定基本url，和其餘標籤中的連接鏈接在一塊兒組成最後的url

1 <!--指定基本連接: www.ccc.com-->
2 <base href="www.ccc.com/i/">
3 
4 <!--最後的連接是: www.ccc.com/i/1.gif-->
5 <img src="1.gif">

注：在一個文檔中最多使用一個base標籤！建議把base標籤放在head標籤的最開始處

3. HTML的body標籤

3.1 p標籤，br標籤和hr標籤

　　p標籤表示段落，默認段落之間是有間隔的！

　　br是換行，hr是水平線

<body>
    <p>第一段 世界大勢，合久必分，分久必合</p>
    <hr/>
    <p>第二段 滾滾長江東逝水，浪花淘盡英雄。是非成敗轉頭空。青山依舊在，幾度夕陽紅。
    白髮漁樵江渚上，慣看秋月春風。一壺濁酒喜相逢。古今多少事</p>
    <p>第三段 斬黃巾英雄首立功</p> <br/>
</body>

這個時候咱們發現hr標籤是一個塊級元素，默認佔用整個網頁寬度。

3.2 a標籤

　　a標籤又被稱之爲超連接，是指從一個網頁指向一個目標的連接關係，這個目標能夠是另外一個網頁，也能夠是相同網頁上的不一樣位置，還能夠是一個圖片，一個電子郵件地址，一個文件，甚至是一個應用程序。

<a href="www.baidu.com"></a>

屬性

跳轉：target屬性，默認是_self，在當前網頁上打開資源，_blank是新的網站上打開資源
提示：title屬性，當鼠標懸浮在a標籤上時顯示title的內容
錨點：使用a中的href屬性來定義要跳轉的位置，錨標籤用於用於跳到文檔中某個部分，而HTML中的name屬性用於建立錨標記

<A NAME = 「marker」>xxx</A> 
- 爲達到這種跳轉效果，請在HREF 參數中使用該標記
<A HREF= 「#marker」>跳轉到xxx</A>
- 跳轉到本文檔中相應錨標記位置

注: 只定義NAME屬性至關於定義一個位置

<!--__author__ = "wyb"-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>錨</title>
</head>
<body>

<a href="#center" name="first">跳到中間</a>
<p>這是開頭</p>
<a href="#last">跳到結尾</a>

<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>

<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<a href="#first" name="center">跳到開頭</a>
<p>這是中間</p>
<a href="#last">跳到結尾</a>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>

<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>
<p>這是段落段落段落段落段落段落這是段落段落段落落段落段落段落段落這是段落段落段落落段落段落段落這是段落段落段落段落段落</p>

<a href="#center" name="last">跳到中間</a>
<p>這是結尾</p>
<a href="#first" >跳到開頭</a>

</body>
</html>

用a標籤實現錨

錨點的使用

3.3 h系列

標題標籤，h1~h6能夠定義標題，<h1>定義最大的標題，<h6>定義最小的標籤，因爲h系列標籤都有明確的語義，須要謹慎的選擇恰當的標題層級開構建文檔的結構。通常來講都是使用css來定義字體來達到好看的效果。

<h1>Hello,World!HTML很是簡單</h1>
    <h2>Hello,World!HTML很是簡單</h2>
    <h3>Hello,World!HTML很是簡單</h3>
    <h4>Hello,World!HTML很是簡單</h4>
    <h5>Hello,World!HTML很是簡單</h5>
    <h6>Hello,World!HTML很是簡單</h6>

3.4 列表標籤 ul，ol以及自定義列表

3.4.1 ul標籤

ul標籤：無序列表，type能夠自定義無序列表的樣式

li標籤：列表中的項

type類型：1(數字)，i(小寫羅馬字符),I(大寫羅馬字符)，a(小寫字母)，A(大寫字母)，默認是1，數字標識

3.4.2 ol標籤

ol標籤：有序列表，type能夠自定義無序列表的樣式

li標籤：列表中的項

type類型：disc(實心圓)，square(實心矩形),circle(空心圓)，none(不顯示標識)，默認是disc，實心圓

3.4.3 自定義列表

dl：定義列表

dt：定義標題標題

dd：定義列表中的項

演示

<ul>
    <li>Python</li> <li>C++</li> <li>Java</li> <li>Golang</li>
</ul>
<ol>
    <li>大象</li> <li>獅子</li> <li>花豹</li> <li>狐狸</li>
</ol>
<dl>
    <dt>CPU</dt> <dd>中央處理器，是一塊超大規模的集成電路，是一臺計算機的運算核心和控制核心。</dd>
    <dt>內存</dt> <dd>中央處理器處理數據時的轉接空間，越大越好。</dd>
    <dt>硬盤</dt> <dd>存儲數據的地方，轉速要快。</dd>
    <dt>顯卡</dt> <dd>全稱顯示接口卡，又稱顯示適配器，是計算機最基本配置、最重要的配置之一。</dd>
</dl>

3.5 div與span標籤

div標籤又叫作盒子標籤，div標籤是定義HTML中的一個分隔區塊或者一個區域部分，主要用來與CSS一塊兒佈局網頁

span標籤對文檔中的行內元素進行組合，是一個行內標籤

<div></div> ： <div>只是一個塊級元素，並沒有實際的意義。主要經過CSS樣式爲其賦予不一樣的表現.
<span></span>： <span>表示了內聯行(行內元素),並沒有實際的意義,主要經過CSS樣式爲其賦予不一樣的表現.

塊級元素與行內元素的區別:
所謂塊元素，是以另起一行開始渲染的元素，行內元素則不需另起一行。若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。
這兩個元素是專門爲定義CSS樣式而生的。

3.6 圖片標籤

img標籤的做用: 引入圖像，另外還能夠在a標籤中套img標籤實現用圖片標籤實現超連接

<h1>圖片標籤img:</h1>
<img src="1.jpg" alt="美女照片"/>
<h3>用圖片實現超連接:</h3>
<a href="http://mysite.com/readme.html" target="_blank">
    <img src="http://mysite.com/mypic.png" alt="網站做者的照片">
</a>

img標籤的參數:

src: 要顯示圖片的路徑
alt: 圖片沒有加載成功時的提示
title: 鼠標懸浮時的提示信息
width: 圖片的寬
height：圖片的高

3.7 特殊符號

往網頁中輸入特殊字符，需在html代碼中加入以&開頭的字母組合或以&#開頭的數字，好比說>用>來表示，具體特殊符號見下面的連接中的文章

http://www.cnblogs.com/web-d/archive/2010/04/16/1713298.html

3.8 table標籤

標籤由<table>標籤來定義，表格有若干行由<tr>定義。，每行被分割成若干個單元格由<td>標籤來定義，<td>能夠包含文本，圖片，列表，段落，表單，水平線，表格等。

table標籤 -> 定義表格
thead標籤 -> 定義表格頭部
tr標籤和th標籤 -> 定義表格中的標題欄(表格中的第一行)
tbody標籤 -> 定義表格的主體
tr標籤和td標籤 -> 定義表格主體中的方格

<table>
    <!--表格頭部-->
    <thead>
        <tr>
            <th>標題1</th> <th>標題2</th> <th>標題3</th>
        </tr>
    </thead>
    <!--表格主體-->
    <tbody>
        <tr>
            <td>內容1</td> <td>內容2</td> <td>內容3</td>
        </tr>
        <tr>
            <td>內容1</td> <td>內容2</td> <td>內容3</td>
        </tr>
        <tr>
            <td>內容1</td> <td>內容2</td> <td>內容3</td>
        </tr>
    </tbody>
</table>

table中的屬性

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

table邊框樣式爲1，邊框空格爲0

3.9 表單標籤 ---form標籤

3.9.1 form屬性

做用：爲用戶輸入建立 HTML 表單，通常是用於先後端的數據交互

表單可以包含 input系列標籤，好比文本輸入框、密碼輸入框、複選框、單選框、提交按鈕等等。表單還能夠包含 menus、textarea、fieldset、legend 和 label 元素，表單用於向服務器傳輸數據

form屬性

action：定義表單被提交時發生的動做，提交給服務器時，處理數據的地址
method：定義表單提交數據時的方式

get:默認值，明文提交，鎖提交的數據顯示在地址上，安全性低，提交數據有大小限制，最大爲2kb
post：隱式提交，所提交的內容，不會顯示在地址欄上，安全性高，無大小限制

enctype：表單數據進行編碼的方式，容許表單將什麼樣的數據提交給服務器

form表單提交數據注意：

全部獲取用戶輸入的標籤必須放在form表單(form標籤)中
action控制着往哪提交
input\select\textarea都須要有name屬性
提交按鈕: input type="submit"

注：若是要提交文件，method必須爲post，enctype必須爲multipart/form-data

3.9.2 form標籤控件

form標籤控件

form標籤簡單用法

(1)文本輸入框和密碼輸入框 
input type='text' - name屬性，value="趙凡"
input type='password' - name屬性，value="趙凡"

(2)按鈕
input type='submit' - value='提交' 提交按鈕，表單
input type='button' - value='登陸' 按鈕

(3)單選框和複選框
input type='radio' - 單選框 value，checked="checked"，name屬性（name相同則互斥）
input type='checkbox' - 複選框 value, checked="checked"，name屬性（批量獲取數據）

(4)提交文件
input type='file' - 依賴form表單的一個屬性 enctype="multipart/form-data"
 
(5)重置
input type='rest' - 重置

(6)多行文本輸入框
<textarea >默認值</textarea> - name屬性

(7)選擇框
select標籤 - name,內部optgroup option value, 提交到後臺，size，multiple

input系列標籤的屬性:

type屬性: 規定input元素的類別
name屬性：規定input 元素的名稱。name屬性用於對提交到服務器後的表單數據進行標識，或者在客戶端經過 JavaScript 引用表單數據
value屬性: 規定input元素的值
checked屬性: 適用於單選框或複選框，表示默認選中，值爲checked

綜合應用

<form action="http://www.baidu.com" method="get">
            <!-- input -->
            <!--文本框-->
            <p>
                用戶名稱：
                <input type="text" name="txtUsename" value="請輸入用戶名稱" readonly>
            </p>
            <p>
                用戶密碼：
                <input type="password" name="txtUsepwd">
            </p>
            <p>
                確認密碼：
                <input type="password" name="txtcfmpwd" disabled>
            </p>
            <!--單選框-->
            <p>
                用戶性別：
                <input type="radio" name="sexrdo" value="男">男
                <input type="radio" name="sexrdo" value="女" checked=''>女
            </p>
            <!--複選框-->
            <p>
                用戶愛好：吃
                <input type="checkbox" name="chkhobby" value="吃" checked> 喝
                <input type="checkbox" name="chkhobby" value="喝"> 玩
                <input type="checkbox" name="chkhobox" value="玩"> 樂
                <input type="checkbox" name="chkhobox" value="樂" checked>
            </p>
            <!-- 按鈕 -->
            <p>
                <input type="submit" name="btnsbt" value="提交">
                <input type="reset" name="btnrst" value="重置">
                <input type="button" name="btnbtn" value="普通按鈕">
            </p>
            <!--文件選擇框-->
            <p>
                請上傳文件：
                <input type="file" name="txtfile">
            </p>
            <!--textarea-->
            <p>
                自我介紹：
                <textarea name="txt" cols="20" rows="5"></textarea>
            </p>
            <!--選擇框-->
            <!--滾動列表 multiple設置之後實現多選效果，ctrl+鼠標左鍵進行多選-->
            <p>籍貫：
                <select name="sel" size="3" multiple>
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="廣州" selected>廣州</option>
                </select>
            </p>
            <!--下拉列表-->
            <p>意向工做城市：
                <select name="sel">
                    <option value="深圳">深圳</option>
                    <option value="北京">北京</option>
                    <option value="上海">上海</option>
                    <option value="廣州" selected>廣州</option>
                </select>
            </p>        
        </form>

綜合應用

3.10 lable標籤

label標籤: 用於點擊文件，使得關聯的標籤獲取光標，經常使用於input標籤聯動

1 <label for="username">用戶名：</label>
2 <input id="username" type="text" name="user" />

3.11 fieldset標籤（沒用過）

fieldset標籤將表單內的相關元素分組，legend標籤爲fieldset 元素定義標題

<form>
  <fieldset>
    <legend>health information</legend>
    height: <input type="text" />
    weight: <input type="text" />
  </fieldset>
</form>

fieldset標籤中的屬性

form：指定field標籤屬於的一個或多個表單
name：規定fieldset的名稱

3.12 其餘標籤

<b>粗體</b>
<i>斜體</i>
<u>底線</u>
<sup>上標</sup>
<sub>下標</sub>
<em>強調</em>
<strong>增強</strong>
<code>代碼</code>
<var>變量</var>
<cite>引用</cite>

相關標籤/搜索

每日一句

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