\color{#3299CC}{\huge{HTML}}

一、HTML入門

1.1 初識HTML

1.1.1 概述

網頁的構成
- HTML：通常用來定義網頁內容的含義和基本結構。
- 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）創建一個標準的初始化頁面

2）頁面說明

<!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">
```
然而現在沒有人再這樣寫，需要保證每一個東西都正常工作已成為歷史。
<html>：這個標簽包裹了整個完整的頁面，是一個根元素（頂級元素）。其他所有元素必須是此元素的后代，每篇HTML文檔只有一個根元素。
<head>：這個標簽是一個容器，它包含了所有你想包含在HTML頁面中但不想在HTML頁面中顯示的內容。這些內容包括你想在搜索結果中出現的關鍵字和頁面描述，CSS樣式，字符集聲明等等。以后的章節能學到更多關于<head> 元素的內容。目前主要了解兩個標簽：
1. <meta charset="utf-8">：這個標簽是頁面的元數據信息，設置文檔使用utf-8字符集編碼，utf-8字符集包含了人類大部分的文字。基本上他能識別你放上去的所有文本內容，能夠避免頁面亂碼問題。
2. <title>：這個標簽定義文檔標題，位置出現在瀏覽器標簽上，而不是頁面正文中。在收藏頁面時，它可用來描述頁面。
<body>：包含了文檔內容，你訪問頁面時所有顯示在頁面上的文本，圖片，音頻，游戲等等。

1.2.2 案例實現

在初始化頁面的<body>標簽中，加入一對<p> 標簽。<p>標簽表示文本的一個段落，具有整段文本之間相分離的效果。
```
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>頁面標題</title>
  </head>
  <body>
  </body>
</html>
```

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


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

1.3 總結

HTML是一種標記語言，用來組織頁面，使用元素和屬性。
這個元素的主要部分有：

元素（Element）：開始標簽、結束標簽與內容相結合，便是一個完整的元素。
開始標簽（Opening tag）：包含元素的名稱（本例為 p），被左、右角括號所包圍。表示元素從這里開始或者開始起作用 —— 在本例中即段落由此開始。
結束標簽（Closing tag）：與開始標簽相似，只是其在元素名之前包含了一個斜杠。這表示著元素的結尾 —— 在本例中即段落在此結束。初學者常常會犯忘記包含結束標簽的錯誤，這可能會產生一些奇怪的結果。
內容（Content）：元素的內容，本例中就是所輸入的文本本身。
屬性（Attribute）：標簽的附加信息。

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

掌握標簽所代表的含義。
掌握在標簽中加入的屬性的含義。

二、基本語法

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語法自身的一部分, 那么你如何將這些字符包含進你的文本中呢

原義字符	等價字符引用
<	`<`
>	`>`
"	`"`
'	`'`
&	`&`
空格	` `

2.5 總結

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

三、HTML案例-新聞文本

重點講解：

div布局的基本方式

文本標簽的基本使用

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

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 使用標簽

簡單布局，使用div標簽。
文本樣式，使用基本文本標簽。

3.4 實現步驟

創建初始頁面。
使用div標簽劃分區域（標題，作者，副標題，正文），設置div樣式。
編輯正文。
1. 使用h1標簽加入標題。
2. 使用em標簽加入作者信息。
3. 使用hr標簽加入分割線。
4. 使用h3標簽加入副標題。
5. 使用p標簽加入正文。
6. 使用ol標簽，li標簽加入列表信息。
7. 使用strong標簽，加入文字強調效果。

四、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；清除兩側浮動，此元素不再收浮動元素布局影響。
```

加入三部分div

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

浮動布局

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

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


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

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

加入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>

設置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 使用標簽

使用div標簽，設置布局，背景和浮動等。
基本文本標簽
圖片標簽
超鏈接標簽

4.4 實現步驟

創建初始頁面，拷貝圖片等素材。
整體布局。
實現頂部條（圖片）。
實現導航條（圖片）。
實現左側分享區域（圖片）。
實現中間正文區域（文本+圖片）。
實現右側廣告區域（圖片）。
實現底部頁腳（鏈接）。

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>一、芝麻分600以上福利之信用購。</strong>
            網購相信大家都不陌生，但是很多時候，網購都有一個通病，就是沒辦法試用，導致很多人買了很多自己不喜歡的東西。但是只要你的支付寶芝麻分在650及以上，就能立馬享有0元下單，收到貨使用滿意了再進行付款。還能享用美食的專屬優惠，是不是很耐斯
        </p>
        <p>

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

        <img src="../img/2.jpg" />
        <p>
            <strong> 三、芝麻分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;
        }

五、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與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 使用標簽

簡單布局，使用div標簽
基本文本標簽
表單標簽
圖片標簽

5.4 實現步驟

設置背景圖。
基本上下兩部分布局。
實現上部（圖片）
實現下部（表單）
實現頁面跳轉，從案例2跳轉到案例3。

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美 国产 综合 欧美 视频

JavaEE（一）

一、HTML入門

1.1 初識HTML

1.1.1 概述

1.1.2 HTML的組成

1）標簽

2）屬性

1.2 入門案例

1.2.1 初始頁面

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

2）頁面說明

1.2.2 案例實現

1.3 總結

二、基本語法

2.1 關于注釋

2.2 關于標簽

2.2.1 空元素

2.2.2 嵌套元素

2.2.3 塊級和行內

1）概念

2）div和span

2.3 關于屬性

2.4 特殊字符

2.5 總結

三、HTML案例-新聞文本

3.1 案例效果

3.2 案例分析

3.2.1 div樣式布局

3.2.2 文本標簽

3.3 使用標簽

3.4 實現步驟

四、HTML案例-頭條頁面

4.1 案例效果

4.2 案例分析

4.2.1 div布局的進階

1）div的class值

2）浮動布局和清除

4.2.2 設置背景

4.2.3 圖片標簽

4.2.4 超鏈接

4.3 使用標簽

4.4 實現步驟

4.5.2 實現頂部條

4.5.3 實現導航條

4.5.4 實現左部分享

4.5.5 實現中部正文

4.5.6 實現右側廣告

4.5.7 實現底部頁腳

五、HTML案例-登錄頁面

5.1 案例效果

5.2 案例分析

5.2.1 表單標簽

5.2.2 表單元素入門

1）簡單的文本輸入框

2）提交用戶名的表單

5.2.3 關于屬性值

1）NAME和VALUE屬性

2）TYPE屬性

3）HTML5新增屬性

5.2.4 更多表單元素

5.3 使用標簽

5.4 實現步驟

三个男躁一个女,国精产品一区一手机的秘密,麦子交换系列最经典十句话,欧美国产综合欧美视频