HTML學習筆記二

来源:https://www.cnblogs.com/wangyuyang1016/archive/2019/08/31/11438254.html
-Advertisement-
Play Games

HTML表單: HTML表單用於搜集不同類型的輸入 標簽元素: HTML表單用於收集用戶輸入; form元素定義HTML表單 屬性列表: | 屬性 | 描述 | | | | | accept charset | 規定在被提交表單中使用的字元集(預設:頁面字元集)。 | | action | 規定向何 ...


HTML表單:

  • HTML表單用於搜集不同類型的輸入

< form >標簽元素:

  • HTML表單用於收集用戶輸入;

    form元素定義HTML表單

< form >屬性列表:
屬性 描述
accept-charset 規定在被提交表單中使用的字元集(預設:頁面字元集)。
action 規定向何處提交表單的地址(URL)(提交頁面)。
autocomplete 規定瀏覽器應該自動完成表單(預設:開啟)。
enctype 規定被提交數據的編碼(預設:url-encoded)。
method 規定在提交表單時所用的 HTTP 方法(預設:GET)。
name 規定識別表單的名稱(對於 DOM 使用:document.forms.name)。
novalidate 規定瀏覽器不驗證表單。
target 規定 action 屬性中地址的目標(預設:_self)。

表單元素:

表單元素指的是不同類型的 input元素、覆選框、單選按鈕、提交按鈕……等

< input >標簽:

< input >標簽元素最重要的是 表單元素,標簽根據不同的 type 屬性,有多態性。

  • 文本輸入:
<input type="text" />
  • 定義單選按鈕輸入
<input type="radio" />
  • 定義提交按鈕
<input type="submit" />
action屬性:
  • 定義在提交表單是執行的動作

向伺服器提交表單的通常做法是提交按鈕(submit)

action屬性可以指定特定的腳本來處理被提交的表單數據

<form action="*.php[/.jsp/.asp]"></form>
method屬性:
  • 定義提交表單時候所用的HTTP方法(GET或POST)
<form action="*.php[/.jsp/.asp]" method="GEP[/POST]"></form>

使用技巧:

如果表單提交是被動的(比如搜索查詢),並且沒有重要數據。

使用GET時,表單提交的數據在URL中是可見的

反之——

表單是動態更新或者密碼內容的,POST更加適合,而且提交的數據在URL不可見

name屬性:

如果希望提交的表單數據可以被伺服器獲取到或者看見,就需要給表單元素添加一個name屬性(在腳本中會按照欄位接收數據信息)

< fieldset >標簽:組合表單元素

  • < fieldset >組合表單中的相關數據
  • < legend >元素為< fieldset >元素定義標題
<!DOCTYPE html>
<html>
    <head>
        <title>用戶</title>
    </head>
    <body>
        <form method="POST">
            <fieldset>
                <legend>用戶註冊</legend>
                用戶名:<br />
                <input type="text" name="name" />
                <br />
                密  碼:<br />
                <input type="text" name="passworld" />
                <br />
                <input type="submit" value="確定" name="input" />
            </fieldset>
        </form>
    </body>
</html>

< select >標簽:下拉列表

  • < select > 標簽是開始

    < option > 元素定義可選擇的選項

<select>
    <option value="中國">中國</option>
    <option value="美國">美國</option>
</select>

< textarea>標簽:文本域

  • 定義一個文本域(多行輸入欄位)

  • rows / cols:文本域大小(px)

< button >標簽:按鈕

  • 定義一個可點擊的元素按鈕

HTML輸入:

type屬性(輸入類型):

描述
button 定義可點擊按鈕(多數情況下,用於通過 JavaScript 啟動腳本)。
checkbox 定義覆選框。
file 定義輸入欄位和 "瀏覽"按鈕,供文件上傳。
hidden 定義隱藏的輸入欄位。
image 定義圖像形式的提交按鈕。
password 定義密碼欄位。該欄位中的字元被掩碼。
radio 定義單選按鈕。
reset 定義重置按鈕。重置按鈕會清除表單中的所有數據。
submit 定義提交按鈕。提交按鈕會把表單數據發送到伺服器。
text 定義單行的輸入欄位,用戶可在其中輸入文本。預設寬度為 20 個字元。
number 用於包含數字值的輸入欄位
date 定義日期欄位的輸入
color 定義顏色的輸入
range 定義一個範圍的 滑塊控制項
month 定義日期欄位輸入或選擇

輸入限制(屬性):

屬性 描述
disabled 規定輸入欄位應該被禁用。
max 規定輸入欄位的最大值。
maxlength 規定輸入欄位的最大字元數。
min 規定輸入欄位的最小值。
pattern 規定通過其檢查輸入值的正則表達式。
readonly 規定輸入欄位為只讀(無法修改)。
required 規定輸入欄位是必需的(必需填寫)。
size 規定輸入欄位的寬度(以字元計)。
step 規定輸入欄位的合法數字間隔。
value 規定輸入欄位的預設值。
height 規定高度(image)
width 規定寬度(image)

HTML圖形:*

HTML多媒體:

視頻格式:

AVI,WMV,MPEG,MOV,Flash(.swf/.flv),MP4……

聲音格式:

​ MIDI,rm,WAVMP3

Object 元素:*

object的作用是支持HTML助手(插件)

HTML音頻:

使用< embed >元素標簽:
<embed height="100" width="100" src="/*.mp3" />
使用< object >元素標簽:
  • < object tag > 標簽可以定義外部內容的容器
<object height="100" width="100" data="/*.mp3" />
使用 < audio >元素標簽:(HTML5)
<audio control="controls">
    <source src="/*.mp3" type="audio/mp3" />
</audio>

HTML視頻:

使用 < embed >元素標簽:
<embed src="/*.mp4" height="200" width="200" />
使用< object >元素標簽:
<object data="/*.mp4" height="200" width="200" />
使用< video >元素標簽:(HTML5)
<video width="300" height="250" controls="controls">
    <source src="/*.mp4" type="video/mp4" />
</video>

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 前言 最近在公司寫一個混合 app 項目,頁面基本全部都是用 H5 完成,嵌入到原生 webview 下。發現一個問題,在 iPhone 6 下 蘋果手機的狀態欄會擋住頁面,導致頁面下移,樣式錯亂,最後網上查找了些解決辦法,加了一條 meta 標簽解決了問題。今天特來總結下常用的移動端開發需要註意的 ...
  • 08.31自我總結 Vue CLI項目 axios前後端交互 一.模塊的安裝 二.配置main.js 三.使用 JS created() { // 組件創建成功的鉤子函數 // 拿到要訪問課程詳情的課程id let id = this.$route.params.pk || this.$route. ...
  • Vue CLI項目中路由傳參 一.標簽傳參方式:\\ 第一種 router.js 傳遞層 接收層 演變體 第二種 router.js 傳遞層 接收層 第三種 router.js 傳遞層 接收層 二.邏輯傳參:this.$router 第一種 python """ 路由: path: '/course ...
  • 1、Uncaught SyntaxError: Unexpected end of input js報錯: 翻譯:語法錯誤:輸入意外終止 原因:頁面代碼寫的不規範 ╮(╯▽╰)╭ 其中的某條語句,沒有正常結束 ε=(´ο`*))) 所以這個時候就要好好檢查自己寫的代碼有沒有什麼符號忘加啦,或者是雙引 ...
  • 讓多個組件使用同一個掛載點,並動態切換,這就是動態組件。 通過使用保留的 <component>元素,動態地綁定到它的 is 特性,可以實現動態組件。 方式一:局部註冊所需組件 使用<keep-alive>緩存 <keep-alive> 包裹動態組件時,會緩存不活動的組件實例,而不是銷毀它們。和 < ...
  • 前言 最近在公司寫一個混合 app 項目,頁面基本全部都是用 H5 完成,嵌入到原生 webview 下。發現一個問題,在 iPhone 6 下 蘋果手機的狀態欄會擋住頁面,導致頁面下移,樣式錯亂,最後網上查找了些解決辦法,加了一條 meta 標簽解決了問題。今天特來總結下常用的移動端開發需要註意的 ...
  • 正則表達式是構成搜索模式的字元序列。該搜索模式可用於文本搜索和文本替換操作。簡單來說,正則表達式其實是一種規則,主要應用在檢測字元串是否符合我們定義的規則上。 一 創建正則表達式 創建正則表達式有兩種方式,他們都返回一個正則表達式對象(RegExpObject): 1, 字面量方式 2, 構造函數方 ...
  • 嘗試模仿京東的“發現好貨”模塊的可用滑塊滑動的緩動圖 <! more JS代碼 HTML代碼 CSS代碼 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...