1 - 前端基礎--HTML

時間  2019-11-18
標籤 前端 基礎 html 欄目 HTML 简体版
原文   原文鏈接

本文主要內容：

  1. HTML文檔格式及標籤格式介紹javascript

  2. head中的標籤css

  3. body中的標籤html

    1. h1~h六、p、strong、b、em、i、del、u、div、span、br、hr前端

    2. ol、ul、a、img、table、java

    3. form瀏覽器

HTML文檔結構

HTML文檔格式：


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
​
</body>
</html>

  1. <!DOCTYPE html>聲明爲HTML5文檔。安全

  2. <html>、</html>是文檔的開始標記和結束的標記。是HTML頁面的根元素，在它們之間是文檔的頭部（head）和主體（body）。服務器

    <html lang="en">指定網頁的語言網絡

  3. <head>、</head>定義了HTML文檔的開頭部分。它們之間的內容不會在瀏覽器的文檔窗口顯示。包含了文檔的元（meta）數據。app

  4. <body>、</body>之間的文本是可見的網頁主體內容。

注意：對於中文網頁須要使用 <meta charset="utf-8">聲明編碼，不然會出現亂碼。有些瀏覽器會設置 GBK 爲默認編碼，則你須要設置爲 <meta charset="gbk">。

HTML標籤格式

  • HTML標籤是由尖括號包圍的關鍵字，如<html>, <div>等

  • HTML標籤一般是成對出現的，好比：<div>和</div>，第一個標籤是開始，第二個標籤是結束。結束標籤會有斜線。

  • 也有一部分標籤是單獨呈現的，好比：<br/>、<hr/>、<img src="1.jpg" />等。

  • 標籤裏面能夠有若干屬性，也能夠不帶屬性。若是帶屬性，必須有屬性值，屬性值放到引號裏

  • 標籤字母所有是小寫

標籤的語法：

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

  • <標籤名 屬性1=「屬性值1」 屬性2=「屬性值2」…… />

  • 空白摺疊

幾個很重要的屬性：

  • id：定義標籤的惟一ID，HTML文檔樹中惟一

  • class：爲html元素定義一個或多個類名（classname）(CSS樣式類名)

  • style：規定元素的行內樣式（CSS樣式）

HTML註釋


<!--註釋內容-->

註釋是代碼之母

head中的標籤

head標籤都放在頭部分之間。這裏麪包含了：

​ <title>、<meta>、<link>，<style>

  • <title>：指定整個網頁的標題，在瀏覽器最上方顯示。

  • <meta>：提供有關頁面的基本信息

  • <link>：定義文檔與外部資源的關係。

  • <style>:定義內部樣式表與網頁的關係

頭標籤位於文檔的頭部，不包含任何內容。

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

title標籤

主要用來告訴用戶和搜索引擎這個網頁的主要內容是什麼，搜索引擎能夠經過網頁標題，迅速的判斷出當前網頁的主題。


 <title>路飛學城</title>

Meta標籤

元素可提供有關頁面的原信息（mata-information）,針對搜索引擎和更新頻度的描述和關鍵詞。

標籤位於文檔的頭部，不包含任何內容。

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

經常使用的meta標籤：

一、http-equiv屬性

它用來向瀏覽器傳達一些有用的信息，幫助瀏覽器正確地顯示網頁內容，與之對應的屬性值爲content，content中的內容其實就是各個參數的變量值。


<!--重定向 2秒後跳轉到對應的網址，注意分號-->
<meta http-equiv="refresh" content="2;URL=http://www.luffycity.com">
<!--指定文檔的內容類型和編碼類型 -->
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<!--告訴IE瀏覽器以最高級模式渲染當前網頁-->
<meta http-equiv="x-ua-compatible" content="IE=edge">

ps:關於mime文件類型（前端靜態資源文件）：

鏈接：http://www.w3school.com.cn/media/media_mimeref.asp

二、name屬性

主要用於頁面的關鍵字和描述，是寫給搜索引擎看的，關鍵字能夠有多個用 ‘,’號隔開，與之對應的屬性值爲content，content中的內容主要是便於搜索引擎機器人查找信息和分類信息用的。


<meta name="Keywords" content="網易,郵箱,遊戲,新聞,體育,娛樂,女性,亞運,論壇,短信" />

這些關鍵詞，就是告訴搜索引擎，這個網頁是幹嗎的，可以提升搜索命中率。讓別人可以找到你，搜索到。 


<meta name="Description" content="網易是中國領先的互聯網技術公司，爲用戶提供免費郵箱、遊戲、搜索引擎服務，開設新聞、娛樂、體育等30多個內容頻道，及博客、視頻、論壇等互動交流，網聚人的力量。" />

只要設置Description頁面描述，那麼百度搜索結果，就可以顯示這些語句，這個技術叫作*SEO*（search engine optimization，搜索引擎優化）。


<meta name="viewport" content="width=device-width, initial-scale=1">

上面這個標籤，是讓咱們網頁支持移動端，移動設備優先（瞭解便可）

link標籤

link標籤訂義了文檔與外部資源之間的關係，一般用於連接到樣式表:


<link rel="stylesheet" type="text/css" href="mystyle.css">

style標籤

style標籤在 HTML 文檔中添加樣式:


<head>
    <style type="text/css">
        body {background-color:yellow}
        p {color:blue}
    </style>
</head>

body中的標籤

標題<h1>

標題使用<h1>至<h6>標籤進行定義。<h1>定義最大的標題，<h6>定義最小的標題。

示例：


<h1>路飛學城</h1>
<h2>路飛學城</h2>
<h3>路飛學城</h3>
<h4>路飛學城</h4>
<h5>路飛學城</h5>
<h6>路飛學城</h6>

段落標籤<p>

段落：是英文paragraph的縮寫。

屬性：

  • align='屬性值'：對齊方式。屬性值包括：left、center、right

示例：


<p>這是第一個段落</p>
<p>這是第二個段落</p>
<p>這是第三個段落</p>

粗體標籤<b>或<strong>

示例：


路飛學城
<b>路飛學城</b>
<strong>路飛學城</strong>

斜體標記 <i>或<em>

示例：


路飛學城
<i>路飛學城</i>
<em>路飛學城</em>

標籤 <div>和標籤<span>

div和span是很是重要的標籤。CSS課程中你將知道，這兩個東西，都是最最重要的「盒子」。

div：把標籤中的內容做爲一個塊兒來對待。必須單獨佔據一行。

div標籤的屬性：

  • align="屬性值"：設置塊兒的位置。屬性值可選擇：left、right、 center

<span>和<div>惟一的區別在於：<span>是不換行的，而<div>是換行的。

若是單獨在網頁中插入這兩個元素，不會對頁面產生任何的影響。這兩個元素是專門爲定義CSS樣式而生的。或者說，DIV+CSS來實現各類樣式。

示例：


<body>
​
   <div>
       導航欄
   </div>
   <div>
       中心banner
   </div>
   <span>路飛</span>
   <span>alex</span>
    
</body>

div在瀏覽器中，默認是不會增長任何的效果的，可是語義變了，div中的全部元素是一個小區域。

div標籤是一個容器級標籤，裏面什麼都能放，固然也能夠放div本身。

span也是表達「小區域、小跨度」的標籤，可是是一個文本級的標籤。

就是說，span裏面只能放置文字、圖片、表單元素。 span裏面不能放p、h、ul、ol、div。

span舉例：


<p>
       商品簡介:
       <span>
           <a href="">詳細信息</a>
           <a href="">生產日期</a>
       </span>
</p>

div舉例：


<div class="header">
   <div class="logo"></div>
       <div class="nav"></div>
   </div>
   <div class="content">
       <div class="guanggao"></div>
       <div class="shop"></div>
   </div>
<div class="footer"></div>

因此，咱們把這種模式叫作「div+css」。div標籤負責佈局，負責結構，負責分塊。css負責樣式。

ps:這個class屬性名就與css有很大關聯，講到css模塊會詳細講這塊內容。

超連接<a>：

一、外部連接

​ 連接到外部文件。舉例：


<a href="new.html">點擊進入到新網頁</a>

a是英語anchor「錨」的意思，就好像這個頁面往另外一個頁面扔出了一個錨。是一個文本級的標籤。

href是英語hypertext reference超文本地址的縮寫。

咱們能夠點擊進入一個本身寫的新網頁


 <a href="new.html">進入新網頁</a>

固然，咱們也能夠直接點進連接，訪問一個網址。舉例以下；


 <a href="http://www.baidu.com">進入百度</a>

二、錨連接

指給超連接起一個名字，做用是在本頁面或者其餘頁面的的不一樣位置進行跳轉。好比說，在網頁底部有一個向上箭頭，點擊箭頭後回到頂部，這個就是利用到了錨連接。首先咱們要建立一個錨點，也就是說，使用name屬性或者id屬性給那個特定的位置起個名字。


<div id="top1">這是div1</div>
​
<div style="height: 2000px;"></div>
​
<div id="top2">這是div2</div>
​
<div style="height: 2000px;"></div>
​
<a href="#top1">回到div1</a>
<a href="#top2">回到div2</a>

上面代碼中，第一個div的id是top1，第二個div的id是top2。第一個a標籤，點擊頁面跳到第一個div的位置，第二個a標籤，點擊頁面跳到第二個div的位置，

而後在底部設置超連接，點擊時將回到頂部（此時，網頁中的url的末尾也出現了#top）。注意href中的#號不要忘記了，表示跳到名爲top的特定位置，這是規定。若是少了#號，點擊以後，就會跳到top這個文件或者top這個文件夾中去。

咱們能夠寫成：


<a href="new.hhml#top">回到頂部</a>

就表示，點擊以後，跳轉到new.html頁面的top錨點中去。

說明：name屬性是HTML4.0之前使用的，id屬性是HTML4.0後纔開始使用。若是要向前兼容，name和id這兩個屬性都要寫上，而且值是同樣的。

三、郵件連接、電話號碼：

代碼舉例：


<a href="mailto:zhaoxu@tedu.cn">聯繫咱們</a>
<a href="tel:10086">聯繫咱們</a>

效果：點擊以後，會彈出outlook，做用不大。

前提：計算機中必須安裝郵件客戶端，而且配置好了郵件相關信息

特殊幾個連接：

返回頁面頂部的位置


 <a href="#">跳轉到頂部</a>

與js有關：


 <a href="javascript:alert(1)">內容</a>
 <a href="javascript:;">內容</a>
​

  1. javascript:;表示什麼都不執行，這樣點擊<a>時就沒有任何反應

    ​ 例如： <a href="javascrip:;">內容</a>

  2. javascript:是表示在觸發<a>默認動做時，執行一段JavaScript代碼。

    ​ 例如： <ahref="javascript:alert()">內容</a>

超連接的屬性

  • href：目標URL

  • title：懸停文本。

  • name：主要用於設置一個錨點的名稱。

  • target：告訴瀏覽器用什麼方式來打開目標頁面。target屬性有如下幾個值：

    • _self：在同一個網頁中顯示（默認值）

    • _blank：在新的窗口中打開。

    • _parent：在父窗口中顯示

    • _top：在頂級窗口中顯示

blank就是「空白」的意思，就表示新建一個空白窗口。爲啥有一個_ ，就是規定，沒啥好解釋的。 也就是說，若是不寫target=」_blank」那麼就是在相同的標籤頁打開，若是寫了target=」_blank」，就是在新的空白

ps:a是一個文本級的標籤

好比一個段落中的全部文字都可以被點擊，那麼應該是p包含a；


<p>
   <a href="">段落段落段落段落段落段落</a>
</p>
​

而不是a包裹p：


<a href="">
   <p>
       段落段落段落段落段落段落
   </p>
</a>
​

a的語義要小於p，a就是能夠當作文原本處理，因此p裏面至關於放的就是純文字。

圖片標籤 <img />

img: 表明的就是一張圖片。是單邊標記。

img是自封閉標籤，也稱爲單標籤。

能插入的圖片類型：

  • 可以插入的圖片類型是：jpg(jpeg)、gif、png、bmp。

  • 不能往網頁中插入的圖片格式是：psd、ai

HTML頁面不是直接插入圖片，而是插入圖片的引用地址，因此也要把圖片上傳到服務器上。

src屬性：圖片的相對路徑和絕對路徑

這裏涉及到圖片的一個屬性：

  • src屬性：指圖片的路徑。

在寫圖片的路徑時，有兩種寫法：相對路徑、絕對路徑

一、寫法一：相對路徑

相對當前頁面所在的路徑。兩個標記 . 和 .. 分表表明當前目錄和父路徑。

舉例1：


<!-- 當前目錄中的圖片 -->
<img src="2.jpg">
<img src=".\2.jpg"> 
<!-- 上一級目錄中的圖片 -->
<img src="..\2.jpg">
​

img 是image「圖片」的簡寫，src 是英語source「資源」的縮寫。

舉例2：


<img src="images/1.jpg">
​

上方代碼的意思是說，當前頁面有一個並列的文件夾images，在文件夾images中存放了一張圖片1.jpg

 

二、寫法二：絕對路徑

（1）以盤符開始的絕對路徑。舉例：


<img src="C:\Users\aaa\Desktop\html-01\images\1.jpg">
不要這樣寫，本地文件都用相對路徑

（2）網絡路徑。舉例：


<img src="http://www.baidu.com/2016040102.jpg">
相對路徑和絕對路徑的總結

相對路徑的好處：站點無論拷貝到哪裏，文件和圖片的相對路徑關係都是不變的。相對路徑使用有一個前提，就是網頁文件和你的圖片，必須在一個服務器上。

<img src="file://C:\Users\Danny\Pictures\明星\1.jpg" alt="" />
不要這樣寫，本地文件都用相對路徑

總結一下：

  • 咱們如今不管是在a標籤、img標籤，若是要用路徑。只有兩種路徑能用，就是相對路徑和絕對路徑。

  • 相對路徑，就是../ image/ 這種路徑。從本身出發，找到別人；

  • 絕對路徑，就是http://開頭的路徑。

  • 絕對不容許使用file://開頭的東西，這個是徹底錯誤的！

img標籤的經常使用其它屬性

  • width：寬度

  • height：高度

  • title：提示性文本。公有屬性。也就是鼠標懸停時出現的文本。

  • align：指圖片的水平對齊方式，屬性值能夠是：left、center、right

  • alt：當圖片顯示不出來的時候，代替圖片顯示的內容。alt是英語 alternate 「替代」的意思。（有的瀏覽器不支持）

舉例：

 

示例：

嘿嘿<img src="images/bojie.jpeg" alt="波姐" title='波多野結衣' width="400" height="400">幺幺

文本級的標籤顯示在瀏覽器上時，無論你的圖片多高，它總會底邊對齊，這是一種現象，「高矮不齊，底邊對齊」。

此時你們能夠給圖片設置align屬性，來查看效果吧！

注意事項：（1）若是要想保證圖片等比例縮放，請只設置width和height中其中一個。（2）若是想實現圖文混排的效果，請使用align屬性，取值爲left或right

若是想點擊圖片的時候跳轉到某個連接，應該是：

<a>
   <img src="images/bojie.jpeg" alt="波姐" title='波多野結衣'>
</a>

列表標籤

列表標籤分爲三種。

有序列表<ol>

裏面的每一項是<li>，

  • ol:ordered list，「有序列表」的意思。

  • li：list item，「列表項」的意思。

例如：

<ol>
    <li>北京</li>
    <li>上海</li>
    <li>廣州</li>
    <li>深圳</li>
</ol>

屬性：

  • type="屬性值"。屬性值能夠是：1(阿拉伯數字，默認)、a、A、i、I。結合start屬性表示從幾開始。

有序列表也是能夠嵌套的。

ol和ul就是語義不同，怎麼使用都是同樣的。ol裏面只能有li，li必須被ol包裹。li是容器級。

ol這個東西用的很少，若是想表達順序，你們通常也用ul，在內容中加序號。

無序列表<ul>

ul：unordered list，「無序列表」的意思，無序列表中的每一項是<li>

示例：

<ul>
	<li>張三</li>    
	<li>李四</li>    
	<li>王五</li>    
</ul>

注意：

  • li不能單獨存在，必須包裹在ul裏面；反過來講，ul的「兒子」不能是別的東西，只能有li。

  • 咱們這裏再次強調，ul的做用，並非給文字增長小圓點的，而是增長無序列表的「語義」的。

屬性：

  • type="屬性值"。屬性值能夠選： disc(實心原點，默認)，square(實心方點)，circle(空心圓)。

列表之間是能夠嵌套的。咱們來舉個例子：代碼：


<ul>
  <li><b>北京市</b>
      <ul>
          <li>海淀區</li>
          <li>朝陽區</li>
          <li>東城區</li>
​
      </ul>
  </li>
​
  <li><b>天津市</b>
      <ul>
          <li>河東區</li>
          <li>河西區</li>
          <li>河北區</li>
          <li>南開區</li>
      </ul>
  </li>
</ul>

聲明：ul的兒子，只能是li。可是li是一個容器級標籤，li裏面什麼都能放。也能夠再放一個ul。

表格標籤

表格標籤用<table>表示。一個表格<table>是由每行<tr>組成的，每行是由<td>組成的。因此咱們要記住，一個表格是由行組成的（行是由列組成的），而不是由行和列組成的。在之前，要想固定標籤的位置，惟一的方法就是表格。如今能夠經過CSS定位的功能來實現。可是如今在作頁面的時候，表格做用仍是有一些的。

例如，一行的單元格：

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

上面的表格中沒有加文字，因此在生成的網頁中什麼都看不到。

例如，3行4列的單元格：

<table>
    <tr>
        <td>id</td>
        <td>書名</td>
        <td>做者</td>
        <td>出版社</td>
    </tr>
    <tr>
        <td>1</td>
        <td>天龍八部</td>
        <td>金庸</td>
        <td>沙河出版社</td>
    </tr>

    <tr>
        <td>2</td>
        <td>鹿鼎記</td>
        <td>金庸</td>
        <td>西二旗出版社</td>
    </tr>

    <tr>
        <td>3</td>
        <td>俠客島</td>
        <td>金庸</td>
        <td>上地出版社</td>
    </tr>

</table>

這樣的表格好像沒看到邊框呀，不急，接下來看看<table>標籤的屬性。

<table>的屬性：

    • border：邊框。像素爲單位。

    • style="border-collapse:collapse;"：單元格的線和表格的邊框線合併

    • width：寬度。像素爲單位。

    • height：高度。像素爲單位。

    • bordercolor：表格的邊框顏色。

    • align：表格的水平對齊方式。屬性值能夠填：left right center。注意：這裏不是設置表格裏內容的對齊方式，若是想設置內容的對齊方式，要對單元格標籤<td>進行設置）

    • cellpadding：單元格內容到邊的距離，像素爲單位。默認狀況下，文字是緊挨着左邊那條線的，即默認狀況下的值爲0。注意不是單元格內容到四條邊的距離哈，而是到一條邊的距離，默認是與左邊那條線的距離。若是設置屬性dir="rtl"，那就指的是內容到右邊那條線的距離。

    • cellspacing：單元格和單元格之間的距離（外邊距），像素爲單位。默認狀況下的值爲0

    • bgcolor="#99cc66"：表格的背景顏色。

    • background="路徑src/..."：背景圖片。背景圖片的優先級大於背景顏色。

單元格帶邊框的效果：

備註：表格中很細表格邊線的製做：CSS的寫法：

style="border-collapse:collapse;"

<tr>：行

一個表格就是一行一行組成的嘛。屬性：

  • dir：公有屬性，設置這一行單元格內容的排列方式。能夠取值：ltr：從左到右（left to right，默認），rtl：從右到左（right to left）

  • bgcolor：設置這一行的單元格的背景色。注：沒有background屬性，即：沒法設置這一行的背景圖片，若是非要設置，能夠用css實現。

  • height：一行的高度

  • align="center"：一行的內容水平居中顯示，取值：left、center、right

  • valign="center"：一行的內容垂直居中，取值：top、middle、bottom

<td>：單元格

屬性：

  • align：內容的橫向對齊方式。屬性值能夠填：left right center。若是想讓每一個單元格的內容都居中，這個屬性太麻煩了，之後用css來解決。

  • valign：內容的縱向對齊方式。屬性值能夠填：top middle bottom

  • width：絕對值或者相對值(%)

  • height：單元格的高度

  • bgcolor：設置這個單元格的背景色。

  • background：設置這個單元格的背景圖片。

單元格的合併

若是要將兩個單元格合併，那確定就要刪掉一個單元格。單元格的屬性：

    • colspan：橫向合併。例如colspan="2"表示當前單元格在水平方向上要佔據兩個單元格的位置。

    • rowspan：縱向合併。例如rowspan="2"表示當前單元格在垂直方向上

<th>：加粗的單元格。至關於<td> + <b>

  • 屬性同<td>標籤

 

<caption>：表格的標題。使用時和tr標籤並列

 

表格的<thead>標籤、<tbody>標籤、<tfoot>標籤

這三個標籤有與沒有的區別：

  • 一、若是寫了，那麼這三個部分的代碼順序能夠任意，瀏覽器顯示的時候仍是按照thead、tbody、tfoot的順序依次來顯示內容。若是不寫thead、tbody、tfoot，那麼瀏覽器解析並顯示錶格內容的時候是從按照代碼的從上到下的順序來顯示。

  • 二、當表格很是大內容很是多的時候，若是用thead、tbody、tfoot標籤的話，那麼數據能夠邊獲取邊顯示。若是不寫，則必須等表格的內容所有從服務器獲取完成才能顯示出來。

例子：

<table border="1" style="border-collapse: collapse">
    <tr>
        <td>id</td>
        <td>書名</td>
        <td>做者</td>
        <td>出版社</td>
    </tr>
    
    <tr>
        <td>1</td>
        <td>天龍八部</td>
        <td>金庸</td>
        <td>沙河出版社</td>
    </tr>

    <tr>
        <td>2</td>
        <td>鹿鼎記</td>
        <td>金庸</td>
        <td>西二旗出版社</td>
    </tr>

    <tr>
        <td>3</td>
        <td>俠客島</td>
        <td>金庸</td>
        <td>上地出版社</td>
    </tr>

    <tr>
        <td>4</td>
        <td>倚天屠龍記</td>
        <td>金庸</td>
        <td>老男孩兒出版社</td>
    </tr>

</table>

表單標籤：<form>****

  • form表單用於與服務器的交互，將用戶填入表單的信息提交到服務器。

  • form表單屬性

    • action：指定表單數據發送的url。

    • method：表單數據的提交方式

      • get（默認）

      • post

      • get提交和post提交的區別：GET方式：將表單數據，以"name=value"形式追加到action指定的處理程序的後面，二者間用"?"隔開，每個表單的"name=value"間用"&"號隔開。特色：只適合提交少許信息，而且不太安全(不要提交敏感數據)、提交的數據類型只限於ASCII字符。

        POST方式：將表單數據直接發送(隱藏)到action指定的處理程序。POST發送的數據不可見。Action指定的處理程序能夠獲取到表單數據。特色：能夠提交海量信息，相對來講安全一些，提交的數據格式是多樣的(Word、Excel、rar、img)。

    • Enctype：

      表單數據的編碼方式(加密方式)，取值能夠是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。

      • Application/x-www-form-urlencoded：默認加密方式，除了上傳文件以外的數據均可以

      • Multipart/form-data：上傳附件時，必須使用這種編碼方式。

  • input（輸入標籤）

    • name="數據名" 要提交的數據的名字

    • type=」屬性值「：標籤的文本類型

      • text（默認）

      • password 密碼

      • radio 單選按鈕，name相同的radio做爲一組，組內互斥，只能選中其中的一個，（必須是name相同的一組中的內容，纔會互斥）

      • checkbox 多選按鈕，name相同的做爲一組，能夠選擇多個

      • button 普通按鈕

      • submit 提交按鈕，點擊該按鈕，會將表單中的數據按照method的請求方式，提交到action對應的url中

      • reset 重置當前表單內的全部內容

      • image 圖片按鈕，和提交按鈕的功能徹底一致，只不過圖片按鈕能夠顯示圖片。

      • file

        • 上傳文件到服務器，要上傳文件，form表單的method必須是post，而且在form標籤中設置屬性enctype="multipart/form-data"

    • value=」內容「：文本框裏的默認內容（已經被填好的）

    • size=「50」：表示文本框能夠顯示50個字符。

    • readonly 輸入框只讀

    • disabled

    • checked 選擇框默認選中

  • select標籤

    • <select>標籤裏面的每一項用<option>表示。select就是「選擇」，option「選項」。select標籤和ul、ol、dl同樣，都是組標籤。

    • <select>標籤的屬性：

      • multiple：能夠對下拉列表中的選項進行多選。沒有屬性值。

      • size="3"：若是屬性值大於1，則列表爲滾動視圖。默認屬性值爲1，即下拉視圖。

    • <option>標籤的屬性：

      • selected：預選中。沒有屬性值。

  • textarea

    • text就是「文本」，area就是「區域」。

      屬性：

      • value：提交給服務器的值。

      • rows="4"：指定文本區域的行數。

      • cols="20"：指定文本區域的列數。

      • readonly：只讀。

  • label標籤

    • 經過for屬性，將lable和input標籤綁定，爲 input 元素定義標註（標記）。

  • 表單語義化

    • 好比，咱們在註冊一個網站的信息的時候，有一部分是必填信息，有一部分是選填信息，這個時候能夠利用表單的語義化。 


    • <form>
      ​
          <fieldset>
              <legend>帳號信息</legend>
             姓名：<input value="呵呵">
             密碼：<input type="password" value="pwd" size="50"><br>
          </fieldset>
      ​
          <fieldset>
              <legend>其餘信息</legend>
             性別：<input type="radio" name="gender" value="male" checked="">男
              <input type="radio" name="gender" value="female">女<br>
             愛好：<input type="checkbox" name="love" value="eat">吃飯
              <input type="checkbox" name="love" value="sleep">睡覺
              <input type="checkbox" name="love" value="bat">打豆豆
          </fieldset>
      ​
      </form>

form表單實例

一、百度搜索


<form action="https://www.baidu.com/s">
​
    <input type="text" name="wd">
    <input type="submit" value="百度一下">
​
</form>

二、百度註冊頁面（HTML）


<form action="">
    <p>
        <label for="username">用戶名：</label>
        <input id="username" type="text" name="username">
    </p>
    <p>
        <label for="tel">手機號：</label>
        <input type="text" id="tel" name="tel">
    </p>
    <p>
        <label for="password">密碼：</label>
        <input type="password" id="password"name="password">
    </p>
    <p>
        <label for="verifycode">驗證碼：</label>
        <input type="text" id="verifycode"name="verifycode">
        <button>獲取驗證碼</button>
    </p>
    <p>
        <input type="checkbox" id="isagree">
        <label for="isagree">
           閱讀並接受 <a href="#">《百度用戶協議》</a>
           及 <a href="#">《百度隱私權保護聲明》</a>
        </label>
    </p>
    <p>
        <input type="submit" value="註冊">
    </p>
</form>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程