HTML快速入門，HTML基本語法，HTML綜合練習案例實現

時間  2021-01-13
標籤 html 前端 web 編程 數組 瀏覽器 安全 服務器 微信 網絡 欄目 HTML 简体版
原文   原文鏈接

　　　　　　　　　　　　　　　　　　　　　　　　　　　　知識點梳理

 

 

　　　　　　　　　　　　　　　　　　　　　　　　　　HTML詳細講義

1.1 初識HTML

1.1.1 概述

網絡世界已經跟咱們息息相關，當咱們打開一個網站，首先映入眼簾的就是一個個華麗多彩的網頁。這些網頁，不只呈現着基本的內容，還具有優雅的佈局和豐富的動態效果，這一切都是如何作到的呢？前端入門課程，爲您一層層的揭開網頁的面紗。html

 

 

 

  • 網頁的構成前端

    • HTML：一般用來定義網頁內容的含義和基本結構。web

    • CSS：一般用來描述網頁的表現與展現效果。編程

    • JavaScript：一般用來執行網頁的功能與行爲。數組

HTML（超文本標記語言——HyperText Markup Language）是構成 Web 世界的一磚一瓦。它是一種用來告知瀏覽器如何組織頁面的標記語言。瀏覽器

所謂超文本Hypertext，是指鏈接單個或者多個網站間的網頁的連接。咱們經過連接，就能訪問互聯網中的內容。安全

所謂標記Markup ，是用來註明文本，圖片等內容，以便於在瀏覽器中顯示，例如<head>,<body>等。服務器

  • HTML發展簡史【瞭解】微信

    • HTML 1.0在1993年6月做爲互聯網工程工做小組（IETF）工做草案發布（並不是標準）網絡

    • HTML 2.0——1995年11月做爲RFC 1866發佈，在RFC 2854於2000年6月發佈以後被宣佈已通過時

    • HTML 3.2——1997年1月14日，W3C推薦標準

    • HTML 4.0——1997年12月18日，W3C推薦標準

    • HTML 4.01（微小改進）——1999年12月24日，W3C推薦標準

    • HTML5 —— 2014年10月29日，萬維網聯盟宣佈，通過接近8年的艱苦努力，該標準規範終於制定完成。是目前最爲流行的版本，提供了不少標籤新特性，現代大多數瀏覽器已經具有了 HTML5的支持。

擴展資料：

w3c是萬維網聯盟（World Wide Web Consortium，W3C），又稱W3C理事會。1994年10月在麻省理工學院計算機科學實驗室成立。創建者是萬維網的發明者蒂姆·伯納斯-李，負責制定web相關標準的制定。

 

1.1.2 HTML的組成

HTML頁面由一系列的元素（elements） 組成，而元素是使用標籤建立的。

1）標籤

一對標籤（ tags）能夠設置一段文字樣式，添加一張圖片或者添加超連接等等。 例如：

<h1>今天是個好日子</h1>

在HTML中，<h1>標籤表示標題，那麼，咱們可使用開始標籤和結束標籤包圍文本內容，這樣其中的內容就以標題的形式顯示了。

 

 

顯示效果以下：

 

 

2）屬性

HTML標籤能夠擁有屬性。屬性提供了有關 HTML 元素的更多的信息。咱們只能在開始標籤中，加入屬性。一般以名稱=值成對的形式出現，好比：name='value'。例如：

<h1 align="center">今天是個好日子!!!</h1>

在HTML標籤中，align 屬性表示水平對齊方式，咱們能夠賦值爲 center 表示 居中 。

 

 

顯示效果以下：

 

 

1.2 入門案例

1.2.1 初始頁面

1）建立一個標準的初始化頁面

  1. 右鍵點擊建立新頁面

     

     

  2. 自定義文件名字，好比index

     

     

  3. 點擊ok，頁面建立成功。

     

     

 

2）頁面說明

  1. <!DOCTYPE html>: 聲明文檔類型。規定了HTML頁面必須聽從的良好規則，從HTML5後，<!DOCTYPE html>是最短的有效的文檔聲明。

    文字做爲了解資料

    好久之前，早期的HTML(大約1991年2月)，文檔類型聲明相似於連接，能自動檢測錯誤和其餘有用的東西。使用以下： 

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

    然而如今沒有人再這樣寫，須要保證每個東西都正常工做已成爲歷史。

  2. <html>：這個標籤包裹了整個完整的頁面，是一個根元素（頂級元素）。其餘全部元素必須是此元素的後代，每篇HTML文檔只有一個根元素。

  3. <head>：這個標籤是一個容器，它包含了全部你想包含在HTML頁面中但不想在HTML頁面中顯示的內容。這些內容包括你想在搜索結果中出現的關鍵字和頁面描述，CSS樣式，字符集聲明等等。之後的章節能學到更多關於<head> 元素的內容。目前主要了解兩個標籤：

    1. <meta charset="utf-8">：這個標籤是頁面的元數據信息，設置文檔使用utf-8字符集編碼，utf-8字符集包含了人類大部分的文字。基本上他能識別你放上去的全部文本內容，可以避免頁面亂碼問題。

    2. <title>：這個標籤訂義文檔標題，位置出如今瀏覽器標籤上，而不是頁面正文中。在收藏頁面時，它可用來描述頁面。

  4. <body>：包含了文檔內容，你訪問頁面時全部顯示在頁面上的文本，圖片，音頻，遊戲等等。

1.2.2 案例實現

  1. 在初始化頁面的<body>標籤中，加入一對<p> 標籤。<p>標籤表示文本的一個段落，具備整段文本之間相分離的效果。

    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>頁面標題</title>
      </head>
      <body>
      </body>
    </html>
    ​

  2. 在一對<p> 標籤中，編寫文本內容。

    ​
    <!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>頁面標題</title>
      </head>
      <body>
        <p>這是第一個頁面</p>
      </body>
    </html>
    ​

  3. 打開瀏覽器查看，效果以下：

 

 

1.3 總結

  • HTML是一種標記語言，用來組織頁面，使用元素和屬性。

  • 這個元素的主要部分有：

  1. 元素（Element）：開始標籤、結束標籤與內容相結合，即是一個完整的元素。

  2. 開始標籤（Opening tag）：包含元素的名稱（本例爲 p），被左、右角括號所包圍。表示元素從這裏開始或者開始起做用 —— 在本例中即段落由此開始。

  3. 結束標籤（Closing tag）：與開始標籤類似，只是其在元素名以前包含了一個斜槓。這表示着元素的結尾 —— 在本例中即段落在此結束。初學者經常會犯忘記包含結束標籤的錯誤，這可能會產生一些奇怪的結果。

  4. 內容（Content）：元素的內容，本例中就是所輸入的文本自己。

  5. 屬性（Attribute）：標籤的附加信息。

  • 在學習HTML時，要抓住兩個方面：

  1. 掌握標籤所表明的含義。

  2. 掌握在標籤中加入的屬性的含義。

2 基本語法

2.1 關於註釋

如同大部分的編程語言同樣，在HTML中有一種可用的機制來在代碼中書寫註釋。

爲了將一段HTML中的內容置爲註釋，你須要將其用特殊的記號<!--和-->包括起來， 好比：

<p>我在註釋外！</p>
​
<!-- <p>我在註釋內！</p> -->

2.2 關於標籤

2.2.1 空元素

不是全部元素都擁有開始標籤，內容和結束標記。一些元素只有一個標籤，叫作空元素。它是在開始標籤中進行關閉的。例子以下：

第一行文檔<br/>
第二行文檔<br/>

2.2.2 嵌套元素

你也能夠把元素放到其它元素之中——這被稱做嵌套。好比，咱們想要強調第一個，能夠將<b>標籤包圍第一個，這樣b標籤就是嵌套在了p標籤中：

<p>這是<b>第一個</b>頁面</p>

2.2.3 塊級和行內

1）概念

在HTML中有兩種重要元素類別，塊級元素和內聯元素。

  • 塊級元素：

    獨佔一行。塊級元素（block）在頁面中以塊的形式展示。相對於其前面的內容它會出如今新的一行，其後的內容也會被擠到下一行展示。好比<p> ，<hr>，<li> ，<div>等。

  • 行內元素

    行內顯示。行內元素不會致使換行。一般出如今塊級元素中並環繞文檔內容的一小部分，而不是一整個段落或者一組內容。好比<b>，<a>，<i>，<span> 等。

    注意：一個塊級元素不會被嵌套進內聯元素中，但能夠嵌套在其它塊級元素中。

     

2）div和span

  • <div> 是一個通用的內容容器，並無任何特殊語義。它能夠被用來對其它元素進行分組，通常用於樣式化相關的需求。它是一個塊級元素。

  • <span> 是短語內容的通用行內容器，並無任何特殊語義。它能夠被用來編組元素以達到某種樣式。它是一個行內元素。

    注意：div和span在頁面佈局中有重要做用。

2.3 關於屬性

【重點講解】

屬性做爲HTML的重要部分，這裏強調屬性的格式和做用。

標籤屬性，主要用於拓展標籤。屬性包含元素的額外信息，這些信息不會出如今實際的內容中。可是能夠改變標籤的一些行爲或者提供數據，屬性老是以name = value的格式展示。

  • 屬性名：同一個標籤中，屬性名不得重複。

  • 大小寫：屬性和屬性值對大小寫不敏感。不過W3C標準中，推薦使用小寫的屬性/屬性值。

  • 引號：雙引號是最經常使用的，不過使用單引號也沒有問題。

  • 經常使用屬性：

    屬性名 做用
    class 定義元素類名，用來選擇和訪問特定的元素
    id 定義元素惟一標識符，在整個文檔中必須是惟一的
    name 定義元素名稱，能夠用於提交服務器的表單字段
    value 定義在元素內顯示的默認值
    style 定義CSS樣式，這些樣式會覆蓋以前設置的樣式（第一天簡單瞭解，次日主要內容）

2.4 特殊字符

瞭解講解：

內容簡單，迅速帶過。

在HTML中，字符 <, >,",' 和 & 是特殊字符. 它們是HTML語法自身的一部分, 那麼你如何將這些字符包含進你的文本中呢

原義字符 等價字符引用
< &lt;
> &gt;
" &quot;
' &apos;
& &amp;
空格 &nbsp;

2.5 總結

HTML的基本語法比較簡單，在使用的過程當中注意寫法便可。

3 HTML案例-新聞文本

重點講解：

  1. div佈局的基本方式

  2. 文本標籤的基本使用

文本結構的頁面基本是由標題和段落構成的，內容結構化會使讀者的閱讀體驗更輕鬆。

3.1 案例效果

顯示新聞文本。

 

 

3.2 案例分析

3.2.1 div樣式佈局

文本由幾部分構成，咱們可使用div將頁面分割佈局。先來了解一下，使用div如何進行簡單的佈局。

在head標籤中，經過style標籤加入樣式。

基本格式：

格式:
<style>
   標籤名{
       屬性名:屬性值;
   }
</style>
​

多個屬性名格式：

<style>
   標籤名{
       屬性名1:屬性值1;
       屬性名2:屬性值2;
       屬性名3:屬性值3;
   }
</style>
​

效果以下：

 

 

div的多樣式：

一個屬性名能夠含有多個值，同時設置多樣式。

格式:

<style>
   標籤名{
       屬性名:屬性值1 屬性值2 屬性值3; 
   }
</style>
​

【提示】

爲了佈局方便，咱們一般能夠先設置邊框的樣式，進行佈局。結束後，再去掉邊框，直觀展現完整界面。

3.2.2 文本標籤

使用文本內容標籤設置文字基本樣式。

標籤名 做用
p 表示文本的一個段落
h 表示文檔標題，<h1>–<h6> ，呈現了六個不一樣的級別的標題，<h1> 級別最高，而 <h6> 級別最低
hr 表示段落級元素之間的主題轉換，通常顯示爲水平線
li 表示列表裏的條目。
ul 表示一個無序列表，可含多個元素，無編號顯示。
ol 表示一個有序列表，一般渲染爲有帶編號的列表
em 表示文本着重，通常用斜體顯示
strong 表示文本重要，通常用粗體顯示
font 表示字體，能夠設置樣式（已過期）
i 表示斜體
b 表示加粗文本

【建議】

文本標籤，建議視頻老師根據PPT，準備材料，簡單演示便可。

重點演示li的不換行效果：

li{    display: inline;   // 內聯樣式,有寬度,無高度}
li{    display: inline-block;  // 內聯樣式,有寬度,有高度}

3.3 使用標籤

  1. 簡單佈局，使用div標籤。

  2. 文本樣式，使用基本文本標籤。

3.4 實現步驟

  1. 建立初始頁面。

  2. 使用div標籤劃分區域（標題，做者，副標題，正文），設置div樣式。

  3. 編輯正文。

    1. 使用h1標籤加入標題。

    2. 使用em標籤加入做者信息。

    3. 使用hr標籤加入分割線。

    4. 使用h3標籤加入副標題。

    5. 使用p標籤加入正文。

    6. 使用ol標籤，li標籤加入列表信息。

    7. 使用strong標籤，加入文字強調效果。

4 HTML案例-頭條頁面

4.1 案例效果

 

 

4.2 案例分析

4.2.1 div佈局的進階

 

 

想要將div佈局成案例效果，首先須要對多個div進行區分，再分別設置每個div自身的效果。

1）div的class值

首先編寫三個div，設置邊框樣式

<style>
     div{ border: 1px solid blue;}
</style>
​
​
<div >left</div>
<div >center</div>
<div>right</div>

 

 

發現經過div設置的樣式都是一致的，沒法個性化佈局。如何區分不一樣的div呢？

使用class的值，格式：

​
.class值{
   屬性名:屬性值;
}
​
<標籤名 class="class值">  
 提示: class是自定義的值

因此，使用class屬性值，能夠幫助咱們區分div，更加精確的設置標籤的樣式。

2）浮動佈局和清除

主體部分分爲三列，而div是獨佔一行的，因此想要使用div佈局，就還須要加入浮動 屬性。

  • 概念

    float：指定一個元素應沿其容器的左側或右側放置，容許文本或者內聯元素環繞它，該元素從網頁的正常流動中移除，其餘部分保持正常文檔流順序。

    格式：

    <!-- 加入浮動 -->
    float：none；不浮動
    float：left；左浮動
    float：right；右浮動
    ​
    <!-- 清除浮動 -->
    clear：both；清除兩側浮動，此元素再也不收浮動元素佈局影響。

 

  1. 加入三部分div

<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>

 

 

  1. 浮動佈局

        .left{
            width: 20%;
            float: left;
        }

        .center{
            width: 59%;
            float: left;
        }


        .right{
            width: 20%;
            float: left;
        }

至此完成左中右三部分的佈局。

  1. 加入footer 部分

   .footer{
      border: 5px solid blue;
    }
    <div class="footer">footer</div>

 

 

發現藍色footer的div，延續正常文檔流佈局，擺放在navbar的下方，與浮動元素重疊。想要清除浮動影響，因此要設置清除浮動屬性clear。

 .footer{
        border: 5px solid blue;
		 clear: both;  
  }

 <div class="footer">footer</div>

  1. 設置center

增長center 高度，完成基本的佈局效果。

.center{
            width: 59%;
            float: left;
            height: 600px;
 }

 

 

4.2.2 設置背景

  • 設置背景的格式：

    背景色:
	 background-color: black;
背景圖:
	 background-image: url("../img/bg.png");

請設置以下佈局，效果以下

 

 

代碼實現

  <!-- 簡化版-->
    <style>
        div{
            height: 666px;
            background-color: gray;
        }
        /*左側分享*/
        .left {
            width: 10%;
            float: left;
        }

        /*中間文本*/
        .center {
            width: 80%;/*最後去除邊框寬度恢復爲60%*/
            float: left;
            background-image: url("../img/star.gif");
        }

        /*右側廣告*/
        .right {
            width: 10%;
            float: left;
        }


    </style>

<div class="left"></div>
<div class="center"></div>
<div class="right"></div>

4.2.3 圖片標籤

標籤名 做用 備註
img 能夠顯示一張圖片(本地或網絡) src屬性，這是一個必需的屬性，表示圖片的地址。

其餘屬性：

屬性名 做用 備註
title 鼠標懸停（hover）時顯示文本。  
alt 圖形不顯示時的替換文本。  
height 圖像的高度。  
width 圖像的寬度。  

4.2.4 超連接

標籤名 做用 備註
a 表示超連接。 href屬性，表示超連接指向的URL地址。
屬性名 做用
target 頁面的打開方式(_self當前頁 _blank新標籤頁)。

去掉下劃線

根據某些樣式的佈局需求，去除下劃線更爲美觀。

a { 
    text-decoration:none;  // none 表示不顯示
}

4.3 使用標籤

  1. 使用div標籤，設置佈局，背景和浮動等。

  2. 基本文本標籤

  3. 圖片標籤

  4. 超連接標籤

4.4 實現步驟

  1. 建立初始頁面，拷貝圖片等素材。

  2. 總體佈局。

  3. 實現頂部條（圖片）。

  4. 實現導航條（圖片）。

  5. 實現左側分享區域（圖片）。

  6. 實現中間正文區域（文本+圖片）。

  7. 實現右側廣告區域（圖片）。

  8. 實現底部頁腳（連接）。

4.5.2 實現頂部條

HTML代碼

<div class="top_bar">
    <img src="../img/j1.png">
</div>

樣式代碼

     img{
            width: 100%;
     }

 

效果以下：

 

 

 

4.5.3 實現導航條

HTML代碼

<div class="nav_bar">
    <img src="../img/j2.png" width="100%">
</div>
<!-- 加入分割線  -->
<hr size="1"/>

樣式代碼

      hr {
            color: lightgrey;
            size: 1px;
        }

 

效果以下：

 

 

###4.5.4 實現左部分享

HTML代碼

<div class="left">
    <img src="../img/j3.png" />
</div>

效果以下：

 

 

4.5.5 實現中部正文

HTML代碼

<div class="center">

    <div >
        <h1>支付寶特權福利！芝麻分600以上用戶驚喜，網友：幸福來得忽然？</h1>
    </div>
    <div>
        <font color="gray" size="2"> <em> 做者 2019-11-11 11:11:11</em></font> <br/>
        <hr/>
    </div>
    <div>
        <h3>支付寶特權福利！芝麻分600以上用戶驚喜，網友：幸福來得忽然？</h3>
    </div>

    <div>
        <p>
            這些年，馬雲的風頭正盛，可是上個月他毅然辭去了阿里巴巴的職務。而馬雲所作的不少事情也的確改變了這個世界，特別是在移動支付領域，更是走在了世界的前列。現在中國的移動支付已經成爲老百姓的必備，支付寶對中國社會的變革都帶來了深遠的影響。不過馬雲依然沒有知足，他認爲移動互聯網將會成爲人類的基礎設施，並且這裏面的機會和各類挑戰還很是多。
        </p>

        <p>
            支付寶的誕生就是爲了解決淘寶網的客戶們的買賣問題，而隨着支付寶的用戶的不斷增長，支付寶也推出了一系列的附加功能。好比生活繳費、轉帳匯款、還信用卡、
            車主服務、公益理財等，往簡單的說，支付寶既能夠知足人們的平常生活，又能夠利用芝麻信用進行資金週轉服務。除了芝麻分可以進行週轉之外，互聯網信用體系 下的產品多多，咱們對比如下幾個產品看看區別:
        <ol type="1">
            <li>
                螞蟻借唄，芝麻分600而且受到邀請開通福利，這個就是支付寶貸款，直接秒殺了銀行貸款和線下金融公司，是如今支付寶用戶使用最多的。
            </li>

            <li>
                微粒貸：於2015年上線，主要面向QQ和微信徵信極好的用戶而推出，受到邀請才能申請開通，額度最高有30萬，難度較大
            </li>

            <li>
                螞蟻巴士：這個在微信 螞蟻巴士 公衆平臺申請,對於信用分要求530分以上才能夠,額度1-30萬不等，目前很是火爆
            </li>
        </ol>

        <img src="../img/1.jpg" />
        </p>

        <p>
            提及支付寶中的芝麻信用功能，相信更是受到了許多人的推崇，由於隨着本身使用的不斷增多，信用分會慢慢提升，而達到了一個階段，就能夠得到許多的福利。而當
            咱們的芝麻信用分能夠達到600分以上的時候，會有令咱們想象不到的驚喜，接下來就讓咱們一塊兒來看看，具體都有哪些驚喜吧。
        </p>
        <p>
            <strong>1、芝麻分600以上福利之信用購。</strong>
            網購相信你們都不陌生，可是不少時候，網購都有一個通病，就是沒辦法試用，致使不少人買了不少本身不喜歡的東西。可是隻要你的支付寶芝麻分在650及以上，就能立馬享有0元下單，收到貨使用滿意了再進行付款。還能享用美食的專屬優惠，是否是很耐斯
        </p>
        <p>

            <strong>2、芝麻分600以上福利之信用免押。</strong>芝麻信用與木鳥短租聯合推出信用住宿服務，芝麻分600及以上的用戶可享受免押入住特權。木鳥短租擁有全國50萬套房源，是國內領先的短租民宿預訂平臺。包括你們知道的飛豬信用住，大部分酒店能夠免押金入住，離店再交錢。
        </p>

        <img src="../img/2.jpg" />
        <p>
            <strong> 3、芝麻分600以上福利之國際駕照。</strong>咱們常常據說的可能只是中國駕照，但如今芝麻分已經應用到了國際領域，只要你的芝麻分夠550就能夠免費辦理國際駕照，也有很多人很是佩服馬雲，一個簡單的芝麻分竟然有如此大的功能，也從側面反應出來馬雲在國際上的地位，這個國際駕照是由新西蘭、德國、澳大利亞聯合認證，能夠在全球200多個國家通行，相信你們必定都有一個自駕全球的夢想吧，而如今支付寶就給了你一把鑰匙，剩下的就你本身搞定了！有沒有想帶着你的女神來一次浪漫之旅呢？
        </p>

        <p>
            隨着互聯網對咱們生活的改變愈來愈大，信用這一詞也被你們推上風口浪尖，不管是生活出行，仍是其餘的互聯網服務，與信用體系已經密不可分了，馬雲當初說道，找老婆須要拼芝麻分，現在彷佛也要成爲現實，那麼大家的芝麻分有多少了呢？
        </p>
    </div>
</div>

樣式代碼

  .center {
            width: 60%;  /*最後去除邊框寬度恢復爲60%*/
            float: left;            
   }

 

4.5.6 實現右側廣告

HTML代碼

<div class="right">
    <div class="right_ad">
        <img src="../img/ad1.jpg"   >
    </div>

    <div class="right_ad">
        <img src="../img/ad2.jpg"   >
    </div>

    <div class="right_ad">
        <img src="../img/ad3.jpg"   >
    </div>

    <div class="right_ad">
        <img src="../img/ad1.jpg"   >
    </div>

    <div class="right_ad">
        <img src="../img/ad2.jpg"   >
    </div>

    <div class="right_ad">
        <img src="../img/ad3.jpg"   >
    </div>
</div>

效果以下：

 

 

4.5.7 實現底部頁腳

HTML代碼

<div class="footer">
    <a href="#">關於黑馬&nbsp;</a>
    <a href="#">幫助中心&nbsp;</a>
    <a href="#">開放平臺&nbsp;</a>
    <a href="#">誠聘英才&nbsp;</a>
    <a href="#">聯繫咱們&nbsp;</a>
    <a href="#">法律聲明&nbsp;</a>
    <a href="#">隱私政策&nbsp;</a>
    <a href="#">知識產權&nbsp;</a>
    <a href="#">廉正舉報&nbsp;</a>
</div>

樣式代碼

        .footer {
            clear: both;
            background-color: cornflowerblue;
            text-align: center;
        }

        a{
            text-decoration: none;
            color: white;
        }

 

 

5 HTML案例-登陸頁面

5.1 案例效果

 

 

5.2 案例分析

5.2.1 表單標籤

標籤名 做用 備註
form 表示表單，是用來收集用戶輸入信息並向 Web 服務器提交的一個容器  

舉例：

<form >
    //表單元素
</form>

表單的屬性

屬性名 做用 備註
action 處理此表單信息的Web服務器的URL地址  
method 提交此表單信息到Web服務器的方式 可能的值有get和post，默認爲get
autocomplete 自動補全，指示表單元素是否可以擁有一個默認值，配合input標籤使用 HTML5

舉例：

<!-- 一個簡單的表單，會發送一個 GET 請求 -->
<form action="/web/login" method="get">
</form>

<!-- 一個簡單的表單，發送 POST 請求 -->
<form action="/web/reg" method="post">
</form>

GET與POST說明：

post：指的是 HTTP POST 方法；表單數據會包含在表單體內而後發送給服務器。

get：指的是 HTTP GET 方法；表單數據會附加在 action 屬性的URI中，並以 '?' 做爲分隔符，而後這樣獲得的 URI 再發送給服務器。

GET方式舉例：

 

 

GET與POST對比：

  地址欄可見 數據安全 數據大小
GET 可見 不安全 有限制（取決於瀏覽器）
POST 不可見 相對安全 無限制

5.2.2 表單元素入門

表單元素指的是 input 元素、複選框、下拉框、提交按鈕等等。

標籤名 做用 備註
label 表單元素的說明，配合表單元素使用 for屬性值爲相關表單元素的id屬性值
input 表單中輸入控件，多種輸入類型，用於接受來自用戶數據 type屬性值決定輸入類型
button 頁面中可點擊的按鈕，能夠配合表單進行提交 type屬性值決定按鈕類型

1）簡單的文本輸入框

  • label標籤：表單的說明。

    • for屬性值：匹配input標籤的id屬性值

  • input標籤：輸入控件。

    • type屬性：表示輸入類型，text值爲普通文本框

    • id屬性：表示標籤惟一標識

    • name屬性：表示標籤名稱

    • value屬性：表示標籤數據值

代碼實現：

<form action="" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username"  name="username" value="tom">
</form>

效果如圖：

 

 

2）提交用戶名的表單

  • button標籤：表示按鈕。

    • type屬性：表示按鈕類型，submit值爲提交按鈕。

<form action="" method="post">
  <label for="username">Username:</label>
  <input type="text" id="username"  name="username" value="tom">
  <button type="submit" >login</button>
</form>

 

 

5.2.3 關於屬性值

1）NAME和VALUE屬性

屬性名 做用
name <input>的名字，在提交整個表單數據時，能夠用於區分屬於不一樣<input>的值
value 這個<input>元素當前的值，容許用戶經過頁面輸入

使用方式：

以name屬性值做爲鍵，value屬性值做爲值，構成鍵值對提交到服務器，多個鍵值對瀏覽器使用&進行分隔。

舉例：

 

 

 

 

2）TYPE屬性

  • input標籤的type屬性

    【建議】

    這是今天的重點講解內容，type的值決定輸入的類型

    • 基本的文本屬性

    屬性值 做用 備註
    text 單行文本字段  
    password 單行文本字段，值被遮蓋  
    email 用於編輯 e-mail 的字段，能夠對e-mail地址進行簡單校驗 HTML5

    舉例：

      <form action="#" method="get">
      <label for="username">Username:</label>
      <input type="text" id="username"  name="username"> <br/>
  
      <label for="password">Password:</label>
      <input type="password" id="password"  name="password"><br/>
  
      <label for="email">Email:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</label>
      <input type="email" id="email"  name="email"><br/>
      <button type="submit"> login</button>
  </form>

     

     

  • 單選多選屬性

    屬性值 做用
    radio 單選按鈕。 1. 在同一個」單選按鈕組「中，全部單選按鈕的 name 屬性使用同一個值；一個單選按鈕組中是，同一時間只有一個單選按鈕能夠被選擇。 2. 必須使用 value 屬性定義此控件被提交時的值。 3. 使用checked 必須指示控件是否缺省被選擇。
    checkbox 複選框。 1. 必須使用 value 屬性定義此控件被提交時的值。 2. 使用 checked 屬性指示控件是否被選擇。 3. 選中多個值時，全部的值會構成一個數組而提交到Web服務器

    舉例：

    <form action="#" method="get">
    <label for="gender">性別:</label>
    <input type="radio" id="gender" name="gender" value="boy"/>男
    <input type="radio" name="gender" value="girl" checked="checked"/>女

    <hr/>
    <label for="hobby">愛好: </label>
    <input type="checkbox" id="hobby" name="hobby" value="sport"/> 體育
    <input type="checkbox"  name="hobby" value="tech"/> 科技
    <input type="checkbox" name="hobby" value="fun" /> 娛樂
    <input type="checkbox" name="hobby" value="video" checked="checked"/> 短視頻
</form>

     

     

     

  • 按鈕屬性

    屬性值 做用
    button 無行爲按鈕，用於結合JavaScript實現自定義動態效果
    submit 提交按鈕，用於提交表單數據。
    reset 重置按鈕，用於將表單中內容恢復爲默認值。
    image 圖片提交按鈕。必須使用 src 屬性定義圖片的來源及使用 alt 定義替代文本。還可使用 height 和 width 屬性以像素爲單位定義圖片的大小。

  • HTML5新增的type值

    屬性值 做用 備註
    date HTML5 用於輸入日期的控件 年，月，日，不包括時間
    time HTML5 用於輸入時間的控件 不含時區
    datetime-local HTML5 用於輸入日期時間的控件 不包含時區
    number HTML5 用於輸入浮點數的控件  
    range HTML5 用於輸入不精確值控件 max-規定最大值 min-規定最小值 step-規定步進值 value-規定默認值
    search HTML5 用於輸入搜索字符串的單行文本字段 能夠點擊x清除內容
    tel HTML5 用於輸入電話號碼的控件  
    url HTML5 用於編輯URL的字段 能夠校驗URL地址格式
屬性值 做用 備註
file 此控件可讓用戶選擇文件，用於文件上傳。 使用 accept 屬性能夠定義控件能夠選擇的文件類型。
hidden 此控件用戶在頁面上不可見，但它的值會被提交到服務器，用於傳遞隱藏值  

  • button標籤的type屬性

    屬性值 做用 備註
    submit 此按鈕將表單數據提交給服務器。若是未指定屬性，或者屬性動態更改成空值或無效值，則此值爲默認值。 同 <input type="submit"/>
    reset 此按鈕重置全部組件爲初始值。 同<input type="reset"/>
    button 此按鈕沒有默認行爲。它能夠有與元素事件相關的客戶端腳本，當事件出現時可觸發。 同<input type="button"/>

3）HTML5新增屬性

屬性名 做用 備註
placeholder 提示用戶輸入框的做用。用於提示的佔位符文本不能包含回車或換行。 僅適用於當type 屬性爲text, search, tel, url or email時; 不然會被忽略。
required 這個屬性指定用戶在提交表單以前必須爲該元素填充值 1. 布爾屬性，可省略屬性值表示true 2. 當type屬性是hidden,image或者button類型時不可以使用
autocomplete 自動補全，規定表單或輸入字段是否應該自動完成。當自動完成開啓，瀏覽器會基於用戶以前的輸入值自動填寫值。 1. 開啓爲on，關閉爲off 2. 能夠設置指定的字段爲off，關閉自動補全

5.2.4 更多表單元素

標籤名 做用 備註
select 表單的控件，下拉選項菜單 與option配合實用
optgroup option的分組標籤 與option配合實用
option select的子標籤，表示一個選項  
textarea 表示多行純文本編輯控件 rows表示行高度， cols表示列寬度
fieldset 用來對錶單中的控制元素進行分組(也包括 label 元素)  
legend 用於表示它的fieldset內容的標題。 fieldset 的子元素

select舉例：

<label for="pet-select">Choose a pet:</label>

<select name="pets" id="pet-select">
    <option value="">--Please choose an option--</option>
    <option value="dog">Dog</option>
    <option value="cat">Cat</option>
    <option value="hamster">Hamster</option>
    <option value="parrot">Parrot</option>
    <option value="spider">Spider</option>
    <option value="goldfish">Goldfish</option>
</select>

<!--  
  select的name屬性值與option的value屬性值,構成鍵值對,提交到Web服務器
-->

 

 

textarea舉例：

<textarea name="textarea" rows="10" cols="50">Write something here</textarea>

 

 

fieldset舉例：

<form action="#" method="post">
  <fieldset>
    	<legend>是否贊成</legend>
        <input type="radio" id="radio_y" name="agree" value="y"> 
      	<label for="radio_y">贊成</label>
        <input type="radio" id="radio_n" name="agree" value="n"> 
      	<label for="radio_n">不一樣意</label>
  </fieldset>
</form>

 

 

5.3 使用標籤

  1. 簡單佈局，使用div標籤

  2. 基本文本標籤

  3. 表單標籤

  4. 圖片標籤

5.4 實現步驟

  1. 設置背景圖。

  2. 基本上下兩部分佈局。

  3. 實現上部（圖片）

  4. 實現下部（表單）

  5. 實現頁面跳轉，從案例2跳轉到案例3

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程