整合營銷服務(wù)商

          電腦端+手機端+微信端=數(shù)據(jù)同步管理

          免費咨詢熱線:

          第1天 - 16天搞定前端,html頁面結(jié)構(gòu)和元素(必看)

          本標記語言,英語:HyperText Markup Language,簡稱:HTML,是一種用于創(chuàng)建網(wǎng)頁的標準標記語言。注意,HTML是標記語言,不是編程語言。

          您可以使用 HTML 來建立自己的 WEB 站點,HTML 運行在瀏覽器上,由瀏覽器來解析。手機上的H5,也是瀏覽器解析的,只是App內(nèi)置的瀏覽器組件,你看不到而已。

          目前,HTML5是最新的版本,主流瀏覽器都支持的了。如果出現(xiàn)不支持的話,升級到最新版本就好了。HTML5也支持在手機上運行,所以我們沒理由不學(xué)H5的。

          1.1 HTML頁面結(jié)構(gòu)

          在沒學(xué)HTML之前,很多人以為有復(fù)雜時的,其實學(xué)HTML就是學(xué)標簽。除了<!DOCTYPE html>聲明為H5文件,類似<meta charset="UTF-8">這種指定字符的之外,其他的,不是成對(如<p></p>),就是有結(jié)束符的標簽(如<p/>)。

          你要做的就是理解標簽的意思和往里面放內(nèi)容就好了。經(jīng)我這么一說,是不是感覺挺簡單的。是就對了。HTML不止開發(fā)簡單,連開發(fā)工具都不挑,如WebStorm,Eclipse或VSCode等;如用來開發(fā)Java、C#、PHP、Python等的開發(fā)工具。

          開發(fā)工具生成的HTML5文件模板里,便是一個完整的頁面結(jié)構(gòu)。內(nèi)容,根據(jù)你個人喜好,進行刪填即可。如果沒有內(nèi)容,則被稱為空標簽。

          <!DOCTYPE html>
          <html>
          <head>
              <meta charset="UTF-8">
              <title>HTML來了</title>
          </head>
          <body>
          <h1>老陳說編程</h1>
          <p>編程界一老頭</p>
          <a href="home.html">個人主頁</a>
          </body>
          </html>

          輸出結(jié)果(用瀏覽器打開)

          1.2 HTML元素

          HTML文檔由 HTML 元素定義。元素以開始標簽(如<p>)起始,以結(jié)束標簽(如</p>)終止,元素的內(nèi)容是開始標簽與結(jié)束標簽之間的內(nèi)容,如:老陳說編程。標簽對大小寫不敏感:<P> 等同于 <p>,推薦使用小寫。

          標簽<a>里面的href,是屬性。屬性可以在元素中添加附加信息,以名稱/值對的形式出現(xiàn),一般放在開始標簽中。

          HTML注釋:可以將注釋插入 HTML 代碼中,這樣可以提高其可讀性,使代碼更易被人理解。瀏覽器會忽略注釋,也不會顯示它們。

          <!DOCTYPE html>
          <html>
          <head>
              <meta charset="UTF-8">
              <title>第2個HTML</title>
          </head>
          <body>
          <h3>做人要自然,自然美,才是真的美</h3>
          <!--這是注釋,src是屬性-->
          <img src="mm.jpg"/>
          </body>
          </html>

          輸出結(jié)果

          好了,有關(guān)html頁面結(jié)構(gòu)和元素的內(nèi)容,老陳講完了,如果覺得對你有所幫助,希望老鐵能轉(zhuǎn)發(fā)點贊,讓更多的人看到這篇文章。你的轉(zhuǎn)發(fā)和點贊,就是對老陳繼續(xù)創(chuàng)作和分享最大的鼓勵。

          一個當了10年技術(shù)總監(jiān)的老家伙,分享多年的編程經(jīng)驗。想學(xué)編程的朋友,可關(guān)注:老陳說編程。分享Python,前端(小程序)、App和嵌入式方面的干貨。關(guān)注我,沒錯的。

          #前端##HTML##CSS##程序員##設(shè)計師#


          用html標簽使用介紹

          本文主要記錄常用的html標簽使用說明,用起來的時候偶爾查查。

          常用html標簽列表

          標簽

          英文全拼

          作用

          特點

          ?<html></html>??

          html

          網(wǎng)頁的根標簽

          所有的標簽都要寫在這一對根標簽里面

          ??<head></head>??

          head

          網(wǎng)頁的頭標簽

          包括完檔的屬性和信息

          ??<body></body>??

          body

          網(wǎng)頁的主題

          包含文檔的所有內(nèi)容

          ??<div></div>??

          division

          定義一個區(qū)域

          瀏覽器通常會在??<div>??前后放置一個換行符

          ??<!-- 注釋 -->??

          -

          注釋

          單標簽

          ??<br>或<br/>??

          break

          換行

          單標簽,不會在其前后創(chuàng)建空白行

          ??<hr>或<hr/>??

          horizontal rule

          添加水平線

          單標簽

          ??<img src="">??

          image

          添加圖片

          單標簽

          ??<embed src="">??

          embed

          嵌入外部應(yīng)用

          單標簽

          ??<meta>??

          meta

          提供有關(guān)頁面的元信息

          單標簽,??<meta>???標簽通常位于??<head>??區(qū)域內(nèi)

          ??<link>??

          link

          定義文檔與外部資源的關(guān)系

          單標簽,??<link>???標簽只能存在于??<head>??區(qū)域內(nèi),不過它可出現(xiàn)任何次數(shù)。

          ??<p></p>??

          paragraph

          定義段落

          自動在其前后創(chuàng)建空白行

          ??<h1> to <h6>??

          Header 1 to Header 6

          定義標題

          h1在一個頁面里只能出現(xiàn)一次

          ??<strong></strong>??

          strong

          文本加粗

          加粗標記該文本

          ??<b></b>??

          bold

          文本加粗

          加粗顯示文本,不推薦使用

          ??<em></em>??

          emphasize

          文本傾斜

          傾斜標記文本

          ??<i></i>??

          italic

          文本傾斜

          傾斜顯示文本,不推薦使用

          ??<del></del>??

          delete

          文本添加刪除線

          -

          ??<s></s>??

          strike

          文本添加刪除線

          不推薦使用

          ??<ins></ins>??

          insert

          文本添加下劃線

          -

          ??<u></u>??

          underline

          文本添加下劃線

          不推薦使用

          ??<a href="">填寫內(nèi)容</a>??

          anchor

          添加超鏈接

          最好使用CSS來改變鏈接的樣式

          ??<ul></ul>??

          unordered list

          定義無序列表

          通常與??<li>??標簽一起使用

          ??<ol></ol>??

          ordered list

          定義有序列表

          通常與??<li>??標簽一起使用

          ??<li></li>??

          list item

          創(chuàng)建列表項

          可與各種列表定義標簽一起使用

          ??<dl></dl>??

          definition list

          定義描述列表

          通常與??<dt>???和??<dd>??一起使用

          ??<dt></dt>??

          definition term

          定義條目

          定義描述列表的項目

          ??<dd></dd>??

          definition description

          定義描述

          對描述列表中的項目進行描述

          ??<table></table>??

          table

          定義HTML表格

          盡可能通過樣式改變表格外觀

          ??<tr></tr>??

          table row

          定義表格的行

          一個??<tr>???標簽包含一個或多個??<th>???或??<td>??標簽

          ??<th></th>??

          table headline

          定義表格每一列的標題

          該標簽的文本通常呈現(xiàn)為粗體且居中

          ??<td></td>??

          table data

          定義表格中的單元格數(shù)據(jù)

          該標簽的文本呈現(xiàn)為普通且左對齊

          ??<caption>表格標題</caption>??

          caption

          定義整個表格的標題

          ??<caption>???標簽必須直接放在??<table>??標簽后

          ??<input type="">??

          input

          定義輸入控件

          輸入字段可通過多種方式改變,取決于type屬性

          ??select??

          select

          定義下拉列表

          ??<select>???中的??<option>??標簽定義了列表中的可用選項

          ??<option></option>??

          option

          定義下拉列表中的可用項

          ??<option>??標簽不可自由定義寬高

          ??<optgroup></optgroup>??

          options group

          定義選項組

          ??<optgroup>??標簽用于把相關(guān)的選項組合在一起

          ??<textarea></textarea>??

          textarea

          定義多行的文本輸入控件

          文本的默認字體是等寬字體

          ??<form></form>??

          form

          定義表單

          ??<form>??可以包含多個元素

          ??<fieldset></fieldset>??

          field set

          定義圍繞表單中元素的邊框

          ??<legend>???為??<fieldset>??定義標題

          ??<legend></legend>??

          legend

          為??<fieldset>??定義標題

          ??<legend>??通過css設(shè)定樣式

          ??<progress></progress>??

          progress

          定義運行中的任務(wù)進度

          ??<progress>???是HTML5中的新標簽,??<progress>??標簽不適合用來表示度量衡

          ??<meter></meter>??

          meter

          度量衡

          ??<meter>???是HTML5的新標簽,??<meter>??標簽不適合用來表示進度條

          ??<audio></audio>??

          audio

          添加音頻

          ??<audio>??標簽是HTML5的新標簽

          ??<video></video>??

          video

          添加視頻

          ??<video>??標簽是HTML5的新標簽

          ??<source>??

          source

          定義媒介資源

          ??<source>??標簽是HTML5中的新標簽

          常用標簽使用說明

          • 常用寫法:??<img src="" alt="" title=""width="" height=""??>
          • src:圖片的來源(必寫屬性)
          • alt:圖像不顯示時的替代文本
          • title:鼠標在移動到元素上的文本提示
          • width/height:圖片寬高,沒有定義寬高的時候,圖片按照百分之百比例顯示,更改圖片的寬度或者高度,圖片等比例縮放

          普通用法

          • 常用寫法:??<a href="" title="" target="">填寫內(nèi)容</a>??
          • href:去往的路徑(必寫屬性)
          • title:鼠標在移動到元素上的文本提示
          • target:規(guī)定在何處打開路徑
          • _blank:新頁面打開
          • _parent:在父窗口中打開鏈接
          • _self:當前頁面跳轉(zhuǎn)(默認值)
          • _top:在當前窗體打開鏈接,并替換當前的整個窗體
          • 當href的值為javascript:void(0); 或 javascript:; ,表示超鏈接不做任何事情,不做任何跳轉(zhuǎn)
          • 當href的值為#,表示超鏈接為空鏈接,點擊此鏈接時會跳轉(zhuǎn)到頁首的位置

          錨點鏈接

          錨點鏈接通過點擊超鏈接,自動跳轉(zhuǎn)到我們設(shè)置錨點的位置,類似于word的目錄導(dǎo)航。建立錨點的元素必須要有id或name屬性,最好兩個都有。這里只跳轉(zhuǎn)本頁面元素,其他頁面跳轉(zhuǎn)自行搜索。
          具體做法如下:

          1. 給目標元素設(shè)置id值,如??<p id="id1"></p>??
          2. 設(shè)置錨點超鏈接,錨點的超鏈接路徑一定包含"#",后面緊跟元素的id或者name,如??<a href="#id1"></a>??

          示例如下。為了顯示效果,通過使用lorem自動生成隨機文本(具體使用方法搜索,一般直接輸入就行),lorem*50表示重復(fù)lorem15次。

          <a href="#id2">a</a>
          
            <p id="id1">
              (lorem*15)
            </p>
          
               (lorem*15)
          
            <p id="id2">
               (lorem*15)
            </p>

          超鏈接全局設(shè)置

          在頁面head中寫入代碼可以設(shè)置超鏈接的全局跳轉(zhuǎn)設(shè)置

          <head>
            <!-- 讓頁面所有的超鏈接新頁面打開 -->
            <base target="_blank">  
          </head>

          charset編碼

          • 常用寫法: ??<meta charset="UTF-8">??
          • charset:定義文檔的字符編碼
          • ASCII/ANSI/Unicode:英語
          • GBK:亞洲通用字符集
          • GB2312:中文簡體
          • Big5:臺澳港繁體
          • UTF-8:世界通用字符集

          name

          1. 關(guān)鍵字
          • 常用寫法: ??<meta name="keywords" content="">??
          • 描述:告訴搜索引擎網(wǎng)頁的關(guān)鍵字,盡量將重要的關(guān)鍵詞放在前面
          1. 網(wǎng)頁描述
          • 常用寫法: ??<meta name="keywords" content="">??
          • 描述:告訴搜索引擎網(wǎng)頁的主要內(nèi)容
          1. 作者
          • 常用寫法: ??<meta name="author" content="">??
          • 描述:告訴搜索引擎網(wǎng)頁的作者
          1. 文件檢索
          • 常用寫法: ??<meta name="robots" content="all | none | index | noindex | follow | nofollow">??
          • 描述:有時候會有一些站點內(nèi)容,不希望被ROBOTS抓取而公開。為了解決這個問題,ROBOTS開發(fā)界提供了兩個辦法:一個是robots.txt,另一個是The Robots META標簽。
          • content: 文件檢索方式
          • all:文件將被檢索,且頁面上的鏈接可以被查詢 (默認值)
          • none:文件將不被檢索,且頁面上的鏈接不可以被查詢
          • index:文件將被檢索;
          • noindex:文件將不被檢索,但頁面上的鏈接可以被查詢
          • follow:頁面上的鏈接可以被查詢
          • nofollow:文件將不被檢索,頁面上的鏈接可以被查詢

          網(wǎng)頁自動跳轉(zhuǎn)

          • 常用寫法: ??<meta http-equiv="Refresh" content="3;url=http://www.baidu.com" />??
          • 描述:網(wǎng)頁5秒后自動跳轉(zhuǎn)到谷歌主頁
          • url:為空則刷新本頁
          • 常用寫法:
          • 描述:規(guī)定當前文檔與被鏈接文檔/資源之間的關(guān)系
          • rel:定義當前文檔與被鏈接文檔之間的關(guān)系。rel 是 relationship的英文縮寫(必寫屬性)
          • type:規(guī)定被鏈接文檔的類型
          • href:鏈接的文件路徑
          • 示例:
          • 鏈接外部樣式表:??<link rel="stylesheet" type="text/css" href="a.css">??
          • 設(shè)置網(wǎng)頁icon圖標:??<link rel="icon" href="a.ico">??

          列表

          無序列表

          無序列表使用粗體圓點進行標記。簡單示例如下。

          <ul>
                  <li>1</li>
                  <li>2</li>
                  <li>3</li>
                  ...
              </ul>

          有序列表

          有序列表使用數(shù)字進行標記,我們可以通過整數(shù)值start指定列表編號的起始值。簡單示例如下。

          <ol start="2">
                  <li>a</li>
                  <li>b</li>
                  <li>c</li>
                  ...
              </ol>

          描述列表

          通過描述列表自定義列表,列表項內(nèi)部可以使用段落、換行符、圖片、鏈接以及其他列表等等。簡單示例如下。

          <dl>
                  <dt>A</dt> <!-- 小標題 -->
                      <dd>A1</dd> <!-- 解釋標題 -->
                      <dd>A2</dd> <!-- 解釋標題 -->
                  <dt>B</dt> <!-- 小標題 -->
                      <dd>B1</dd> <!-- 解釋標題 -->
                      <dd>B2</dd> <!-- 解釋標題 -->
              </dl>

          表格

          基礎(chǔ)表格

          • 常用寫法:??<table width="" height="" border="" cellspacing="" cellpadding=""></table>??
          • width:表格寬度
          • height:表格高度
          • border:邊框?qū)挾?/li>
          • cellspacing:單元格間距
          • cellpadding:內(nèi)容與邊框間距

          簡單示例如下。

          <table width="300px" height="100px" border="2" cellspacing="5px" cellpadding="0">
          <caption>表格標題</caption> <!-- 定義表格標題 -->
          
          <tr>
              <!-- 定義表格的行 -->
              <td>A1</td> <!-- 定義表格該行第一列中的數(shù)據(jù) -->
              <td>B1</td>
              <td>C1</td>
          </tr>
          <tr>
              <!-- 定義表格的行 -->
              <th>A</th> <!-- 定義表格每一列的標題 -->
              <th>B</th>
              <th>C</th>
          </tr>
          <tr>
              <td>A2</td>
              <td>B2</td>
              <td>C2</td>
          </tr>
          </table>

          單元格合并

          • 常用寫法:??<td colspan=“” rowspan=“”></td>??
          • 描述:告訴表格該單元格可以橫跨colspan列,縱跨rowspan行

          簡單示例如下。

          <table border="2" cellspacing="1px" width="400px" height="100px">
          <caption><strong>表格標題</strong></caption> <!-- 定義表格標題 -->
          <tr height="100">
              <!-- 定義表格的行 -->
              <td colspan="2">A1</td> <!-- 定義該行可以橫跨兩列 -->
              <td>B1</td>
          </tr>
          
          <tr height="100">
              <td>A2</td>
              <td>B2</td>
              <td rowspan="2">C</td> <!-- 定義該行可以橫跨兩行 -->
          </tr>
          
          <tr height="100">
              <td>A3</td>
              <td>B3</td>
          </tr>
          </table>

          對于??<input>??不同的type屬性值,輸入字段擁有很多種形式。輸入字段可以是文本字段、復(fù)選框、掩碼后的文本控件、單選按鈕、按鈕等等。

          文本輸入框

          • 常用寫法:??<input type="text" name="" maxlength="" readonly="" disabled="" value="">??
          • type:規(guī)定輸入字段的類型
          • name:輸入框的名字
          • maxlength:輸入文本長度
          • readonly:輸入框是否只讀
          • disabled:輸入框是否未激活
          • value:輸入框默認值

          簡單示例如下。

          <input type="text" name="username" maxlength="6" readonly="readonly" disabled="disabled" value="用戶名">

          密碼輸入框

          • 常用寫法:??<input type="password" name="">??
          • type:規(guī)定輸入字段的類型
          • name:輸入框的名字
          • 密碼輸入框的其他參數(shù)和文本輸入框一樣

          簡單示例如下。

          <input type="password" name="pwd" maxlength="6" readonly="readonly" disabled="disabled" value="密碼">

          單選框

          • 常用寫法:??<input type="radio" name="" checked="checked">??
          • type:規(guī)定輸入字段的類型
          • name:輸入框的名字
          • checked:設(shè)定該輸入框被預(yù)先選定
          • 想要多個單選框只能有一個被選中,設(shè)置所有單選框的name值相同即可實現(xiàn)

          示例一,兩個單選框都可以被選中

          <div>
              <input type="radio" name="man" checked="checked">男
          </div>
          <div>
              <input type="radio" name="woman">女
          </div>

          示例二,兩個單選框只能有一個被選中

          <div>
              <input type="radio" name="gender" checked="checked">男
            </div>
            <div>
              <input type="radio" name="gender">女
            </div>

          下拉列表

          ??<select>??

          • 常用寫法:??<select multiple=""></select>??
          • multiple:當該屬性為true時,可選擇多個選項。

          ??<optgroup>??

          • 常用寫法:??<optgroup label=""></optgroup>??
          • label:設(shè)定選項組的描述。

          ??<option>??

          • 常用寫法:??<option value="" selected="">選項值</option>??
          • value:定義送往服務(wù)器的選項值。
          • selected:當該屬性為true時,該選項被默認選擇。

          示例一,單選下拉列表

          <select>
              <option value="a">a</option>
              <option value="b">b</option>
              <option value="c" selected='selected'>c</option>  <!-- 默認選中 -->
            </select>

          示例二,帶組合的單選下拉列表

          <select>
              <optgroup label="A">
                <option value="a1">a1</option>
                <option value="a2" selected='selected'>a2</option>
              </optgroup>
              <optgroup label="B">
                <option value="b1">b1</option>
                <option value="b2">b2</option>
              </optgroup>
            </select>

          示例三,帶組合的多選下拉列表

          <select multiple=”multiple”>
              <optgroup label="A">
                <option value="a1">a1</option>
                <option value="a2" selected='selected'>a2</option>
              </optgroup>
              <optgroup label="B">
                <option value="b1" selected='selected'>b1</option>
                <option value="b2">b2</option>
              </optgroup>
            </select>

          多選框

          • 常用寫法:??<input type="checkbox" checked="">??
          • type:規(guī)定輸入字段的類型
          • checked:設(shè)定該輸入框被預(yù)先選定

          簡單示例如下。

          <input type="checkbox"  checked="checked">A
            <input type="checkbox">B

          文本框

          • 常用寫法:??<textarea cols="" rows="" placeholder=""></textarea>??
          • cols:控制可見文本的列數(shù)
          • rows:控制可見文本的行數(shù)
          • placeholder:提示字符

          簡單示例如下。

          <textarea cols="5" rows="2" placeholder="text"></textarea>

          文本上傳控件

          • 常用寫法:??<input type="file" accept=""/>??
          • accept:規(guī)定提交的文件的類型

          簡單示例如下。

          <input type="file" accept="image/gif, image/jpeg"/>

          其他類型按鈕

          <input type="submit">文件提交按鈕
            <input type="button" value="">普通按鈕
            <input type="image" src="">圖片按鈕
            <input type="reset">重置按鈕
            <input type="url">網(wǎng)址控件
            <input type="date">日期控件 
            <input type="time">時間控件
            <!--email提供了郵箱的完整驗證,必須包含@和后綴,如果不滿足驗證,會阻止表單提交-->
            <input type="email">郵件控件
            <input type="number" step="3">數(shù)字控件
            <input type="range" step="100">滑塊控件
            <input type="color">顏色控件

          表單

          示例一,普通表單

          <form>
              First name: <input type="text" name="fname"><br>
              Last name: <input type="text" name="lname"><br>
              <input type="submit" value="提交">
            </form>

          示例二,帶分組信息表單

          <form>
              <fieldset>
                <legend>Personalia:</legend>
                First name: <input type="text" name="fname"><br>
                Last name: <input type="text" name="lname"><br>
                <input type="submit" value="提交">
              </fieldset>
          
              First nameA: <input type="text" name="fname"><br>
              Last nameB: <input type="text" name="lname"><br>
            </form>

          ??<progress>???與??<meter>??主要區(qū)別和用法見??HTML5 progress和meter控件??

          ??<progress>??

          • 常用寫法:??<progress value="" max=""></progress>??
          • value:規(guī)定進程的當前值
          • max:規(guī)定需要完成的值

          簡單示例如下。

          <progress value="60" max="100"></progress>

          ??<meter>??

          • 常用寫法:??<meter min="" low="" high="" max="" value="" optimum=""></meter>??
          • value:規(guī)定度量的當前值
          • max:規(guī)定被界定為高的值的范圍
          • min:規(guī)定被界定為低的值的范圍
          • low:規(guī)定被界定為低的值的范圍
          • high:規(guī)定被界定為高的值的范圍
          • optimum:規(guī)定度量的最優(yōu)值
          • 具體使用見meter標簽改變顏色規(guī)則

          簡單示例如下

          <meter min="0" low="40" high="90" max="100" value="91"></meter>
          <meter min="0" low="40" high="90" max="100" value="90"></meter>

          多媒體資源

          ??<audio>??

          • 常用寫法:??<audio src="" controls autoplay loop></audio>??
          • src:規(guī)定音頻文件的url
          • controls:如果出現(xiàn)該屬性,顯示音頻播放器的控制面板(比如播放/暫停按鈕)
          • autoplay:如果出現(xiàn)該屬性,自動播放音頻
          • loop:如果出現(xiàn)該屬性,循環(huán)播放音頻

          簡單示例如下

          <audio src="demo.mp3" controls autoplay></audio>

          ??<video>??

          • 常用寫法:??<video src="" width="" height="" poster="" controls autoplay loop></video>??
          • src:規(guī)定視頻文件的url
          • width:設(shè)置視頻播放器的寬度(pixels)
          • height:設(shè)置視頻播放器的高度(pixels)
          • poster:設(shè)置視頻未播放時展示的畫面
          • controls:如果出現(xiàn)該屬性,顯示音頻播放器的控制面板(比如播放/暫停按鈕)
          • autoplay:如果出現(xiàn)該屬性,自動播放音頻
          • loop:如果出現(xiàn)該屬性,循環(huán)播放音頻

          簡單示例如下

          <video src="demo.mp4" controls autoplay height="500px" poster="0.jpg"></video>

          ??<source>??

          • 常用寫法:??<source src="" type="">??
          • src:規(guī)定媒體文件的url
          • type:規(guī)定媒體文件的類型
          • 因為不同瀏覽器支持的媒體格式不同,當添加媒體文件時,需要考慮瀏覽器是否支持它們。我們可以準備多種不同格式的媒體文件,然后使用source 標簽,讓瀏覽器從上到下選擇支持的媒體格式

          簡單示例如下

          <video controls>
              <source src="demo.mp3" type="audio/mp3">
              <source src="demo.mp4" type="video/mp4">
              您的瀏覽器不支持video元素。
            </video>

          特殊字符

          ??HTML特殊字符編碼對照表??

          參考

          • ??HTML基礎(chǔ)??
          • ??HTML 參考手冊??
          • HTML中標簽對應(yīng)的英文
          • meter標簽改變顏色規(guī)則
          • HTML5 progress和meter控件

          、表單在網(wǎng)頁中的應(yīng)用:登錄、注冊常用到表單

          2、表單的語法:

          <form method="post" action="result.html">

          <p> 名字:<input name="name" type="text" > </p>

          <p> 密碼:<input name="pass" type="password" > </p>

          <p>

          <input type="submit" name="Button" value="提交"/>

          <input type="reset" name="Reset" value="重填“/>

          </p>

          </form>

          3、表單元素說明:

          type:指定元素的類型。text、password、checkbox、radio、submit、reset、file、hidden、image 和 button,默認為 text.

          name:指定表單元素的名稱.

          value:元素的初始值。type 為 radio時必須指定一個值.

          size:指定表單元素的初始寬度。當 type 為 text 或 password時,表單元素的大小以字符為單位。對于其他類型,寬度以像素為單位.

          maxlength:type為text 或 password 時,輸入的最大字符數(shù).

          checked:type為radio或checkbox時,指定按鈕是否是被選中.

          4、示例:


          <html >

          <head>

          <title>表單元素</title>

          </head>

          <body>

          <!-- 表單 -->

          <form method="POST" action="#">

          <!-- 標簽 -->

          <label for="username">姓名:</label>

          <!-- 文本框 value屬性是設(shè)置默認顯示的值-->

          <input id="username" value="songzetong" />



          <!-- 密碼框 -->

          <br/><label for="pwd">密碼:</label>

          <input type="password" id="pwd">

          <br/>


          <!-- 單選框 -->

          <label for="sex">性別:</label>

          <input type ="radio" name ="sex" checked/>男

          <input type ="radio" name ="sex"/>女


          <!-- 復(fù)選框 -->

          <br/>

          <label for="hobby">愛好:</label>

          <input type="checkbox" name ="hobby" id="hobby"/>聽音樂

          <input type="checkbox" name ="hobby"/>旅游

          <input type="checkbox" name ="hobby"/>游泳


          <br/>

          <!-- 下拉列表 -->

          <label for="month">月份:</label>

          <select id="month"/>

          <option>1月</option>

          <option>2月</option>

          <option>3月</option>

          </select>

          <br/>

          <!-- 按鈕 -->

          <input type="reset" value="重置按鈕"/>

          <input type="submit" value="提交按鈕"/>

          <input type="button" value="普通按鈕"/>

          <br/>

          <!-- 圖片按鈕 -->

          <input type="image" src="one.jpg" width="200px" heigth="200px"/>

          <br/>

          <button type="submit">提交</button>

          <button type="reset">重置</button>


          <br/>

          <label for="profile">

          個人簡介:

          </label>

          <!-- 多行文本域 -->

          <textarea >本人已同意什么條款</textarea>


          <br/>

          <br/>

          <br/>

          <!-- 文件域 -->

          <label for="upload">上傳頭像:</label>

          <input type="file"/>

          <!-- 郵箱 -->

          <br/>

          <label for="QQ郵箱">郵箱:</label>

          <input type="email"/>



          <br/>

          <!-- 網(wǎng)址 -->

          <label for="ur">網(wǎng)址:</label>

          <input type="url"/>


          <!-- 數(shù)字 -->

          <br/>

          <label for="shuzi">數(shù)字:</label>

          <input type="number" name="shuzi" min="0" max="100" step="10"/>


          <br/>

          <label for="huakuai">滑塊:</label>

          <input type="range" />

          <!-- 搜索框 -->


          <br/>

          <label for="sousuo">搜索</label>

          <input type="search"/>


          <!-- 隱藏域 -->

          <br/>

          <input type="hidden"value="1">

          <!-- 只讀:只能看不能修改,禁用:不能用 -->

          <input value="我是只讀的" readonly/>

          <input type="button" value="我是禁用的" disabled/>


          <!-- palceholder默認提示 -->

          <br/>

          <input placeholder="默認提示框"/>

          <br/>

          <!-- 文本框內(nèi)容提示不能為空,否則不允許用戶提交表單(網(wǎng)頁上的必填項) -->

          <input required="必填項"/>

          <button type="submit">提交</button>

          <br/>

          <!-- 用戶輸入的內(nèi)容必須符合正則表達式所指的規(guī)則,否則就不能提交表單-->

          <input required pattern="^1[3578]\d{9}"/>

          <button type="submit">提交</button>


          </form>

          </body>

          </html>


          效果圖鏈接:file:///D:/ruanjian/VS/wenjianxiangmu/htmlThree/form.html


          主站蜘蛛池模板: 精品无人区一区二区三区| 亚洲中文字幕无码一区| 精品一区二区三区| 任你躁国产自任一区二区三区| 一区二区手机视频| 性无码免费一区二区三区在线| 精品国产一区二区三区色欲| 精品成人一区二区三区免费视频| 国模吧一区二区三区| 国产av一区二区三区日韩| 亚无码乱人伦一区二区| 2022年亚洲午夜一区二区福利| 午夜在线视频一区二区三区| 亚洲一区影音先锋色资源| 国产大秀视频在线一区二区| 在线免费一区二区| 国产在线观看一区二区三区精品| 日韩精品免费一区二区三区| 亚洲另类无码一区二区三区| 亚洲视频一区二区三区四区| 日韩精品国产一区| 精品视频一区二区三区免费| 亚洲一区二区三区在线视频| 精品人妻一区二区三区四区在线| 亚洲日韩一区二区一无码| 奇米精品视频一区二区三区| 日韩电影一区二区三区| 国产婷婷色一区二区三区| а天堂中文最新一区二区三区| 四虎在线观看一区二区| 夜精品a一区二区三区| av一区二区三区人妻少妇| 一区在线观看视频| 精品一区二区三区电影| 欧洲精品一区二区三区| 日本精品一区二区三本中文| 日本一区二区三区精品国产| 精品无码国产AV一区二区三区| 3d动漫精品啪啪一区二区免费| 国产免费私拍一区二区三区| 日韩一区二区三区视频久久|