HTML基本元素包含HTML表單驗證

可將以下代碼復制另存為一個HTML文件瀏覽器打開自己去看看實際使用效果

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><title>測試</title>
</head>
<body>
<h1>很多事</h1>
<h1><b>加粗文字</b></h1>
<h1><i>斜體文字</i></h1>
<h1><code>電腦輸出文字效果</code></h1>
<h1>7<sub>1下標</sub><sup>2上標</sup></h1>
<h1 style="text-decoration:underline;">下劃線</h1>
<h1 style="text-decoration:line-through;">刪除線</h1>
<h1 style="text-decoration:overline;">上劃線</h1><h1 style="text-indent:2em ">縮進</h1>
<h1 style="text-align: center;">水平居中顯示</h1><hr><br><br>
<p>的基礎上肯定不能京東方出</p>
<p>更好vu根本vu計劃搜嘎大V古一哈果然VB依噶是呀付剛<br>擦韻達GV出一哈</p>
<hr><br><br>
<a href="https://www.runoob.com/try/try.php?filename=tryhtml_basic_link">菜鳥教程</a>
<a href="https://www.runoob.com/try/try.php?filename=tryhtml_basic_link" target="_blank">新窗口打開</a>
<a href="https://www.runoob.com/try/try.php?filename=tryhtml_basic_link" target="_self">此窗口打開</a>
<a href="https://www.runoob.com/try/try.php?filename=tryhtml_basic_link" >
<img src="http://p4.itc.cn/q_70/images03/20200925/cd3a5707b185480898c89c2c9c11fbf2.jpeg" style="height: 50px;width: 50px" alt="示例圖片">
</a>
<hr><br><br>
<img src="https://pics1.baidu.com/feed/8435e5dde71190eff03ade7625f43d1efffa604a.jpeg@f_auto?token=dc0a18c359a9b61d857e8cd38aecf0b4" style="height: 50px;width: 50px">
<hr>
<br><h1>表格</h1>
<h4>一列</h4>
<table border="1px">
<tr><td>100</td></tr>
</table>
<br><h4>二行二列</h4>
<table border="1px">
<tr><td>100</td><td>200</td></tr>
<tr><td>568</td><td>545</td>
</tr>
</table><hr><table border="1"><thead><tr><th>Month</th><th>Savings</th></tr></thead><tfoot><tr><td>Sum</td><td>$180</td></tr></tfoot><tbody><tr><td>January</td><td>$100</td></tr><tr><td>February</td><td>$80</td></tr></tbody>
</table><h4>無序列表</h>
<ul><li>fsd</li><li>sds</li></ul><h4>有序列表(type屬性可設置序號標識如123,abc...)</h4>
<ol><li>ccvfdv</li><li>vdfvdf</li></ol>
<h4>自定義列表</h4>
<dl>
<dt>Coffee</dt>
<dd>- black hot drink</dd>
<dt>Milk</dt>
<dd>- white cold drink</dd>
</dl><hr><br><h1>表格</h1><form action=""><label>用戶名</label><input type="text" name="username" id="username" required><label>請輸入密碼</label><input type="password" name="password" id="password"><button style="submit">登錄</button>
</form><hr>
<h4>下拉框</h4>
<form action="">
<select id="test" name="test"><option value="a">a</option><option value="b">b</option><option value="c">c</option></select>
</form>
<hr><br>
<h4>單選框</h4>
<form action=""><input type="radio" name="sex" value="boy">男<input type="radio" name="sex" value="girl">女</form><form action=""><input type="checkbox" name="lief" value="vosion">望遠鏡<input type="checkbox" name="lief" value="basscatball">籃球</form><h1>表格外框</h1>
<fieldset><legend>用戶登錄</legend><form action="" method=""><label>用戶名</label><input type="text" name="username"><label>密碼</label><input type="password" name="password"><button type="submit" name="submit">登錄</button></form>
</fieldset>
<hr>
<h1>iframe框</h1>
<iframe src="https://www.bilibili.com/" width="200px" height="200px"></iframe><hr>
<h4>點擊鏈接 在iframe框顯示</h4>
<iframe src="" width="200px" height="200px" name="iframe"></iframe>
<a href="https://www.bilibili.com/" target="iframe">點擊此處顯示</a><hr><h1>javascript初使用</h1>
<p id="lll">這是一個段落</p>
<button onclick="myFunction()">點擊改變內容</button>
<script>
function myFunction()
{document.getElementById("lll").innerHTML="Hello JavaScript!";
}
</script><h1>input應該放入form表中使用,利用type=submit提交數據較便捷</h1>
<hr>
<h1>input類型</h1>
<label>選擇顏色color類型</label>
<input type="color" name="">
<hr>
<label>選擇日期date類型</label>
<input type="date" name=""><hr>
<label>選擇郵件email類型</label>
<input type="email" name="">
<hr>
<label>選擇月份month類型</label>
<input type="month" name=""><hr>
<label>選擇數字number類型1-10</label>
<input type="number" name="" min="0" max="10"><hr>
<label>選擇數字滾動條range類型1-10</label>
<input type="range" name="" min="0" max="10"><hr>
<label>搜索框search類型</label>
<input type="search" name=""><hr>
<label>電話號碼tel類型</label>
<input type="tel" name=""><hr>
<label>選擇時間time類型</label>
<input type="time" name="">
<hr>
<label>選擇周week類型</label>
<input type="week" name="">
<hr>
<label>網址url類型</label>
<input type="url" name=""><h1>搜索框輸入自動查詢</h1>
<form><!-- type和搜索框列表名綁定 --><input list="llist" name="">
<datalist id="llist"><option value="霧山五行">霧山五行</option><option value="海綿寶寶">海綿寶寶</option><option value="奧特慢">奧特曼</option></datalist>
</form>
<hr>
<br>
<h1>表單內容自動填充autocomplet</h1>
<form autocomplete="on"><!-- autofocus自動聚焦 --><!-- required必須填寫,不能為空 -->姓名:<input type="text" name="" autofocus="" required="">郵箱:<input type="email" name="">
</form><h1>存放鏈接nav</h1>
<nav>
<a href="/html/">HTML</a> |
<a href="/css/">CSS</a> |
<a href="/js/">JavaScript</a> |
<a href="/jquery/">jQuery</a>
</nav>
</body>
</html>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/bicheng/21835.shtml
繁體地址,請注明出處:http://hk.pswp.cn/bicheng/21835.shtml
英文地址,請注明出處:http://en.pswp.cn/bicheng/21835.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

多項分布模擬及 Seaborn 可視化教程

多項分布 簡介 多項分布是二項分布的推廣&#xff0c;它描述了在 n 次獨立試驗中&#xff0c;k 種不同事件分別出現次數的離散概率分布。與二項分布只能有兩種結果&#xff08;例如成功/失敗&#xff09;不同&#xff0c;多項分布可以有 k 種&#xff08;k ≥ 2&#xff09;及…

Nginx的Location匹配與Rewrite重寫

目錄 一.Nginx中location與rewrite 1.Nginx中常用正則表達式 2.location與rewrite的聯系和區別 二.location概述 1.分類 2.匹配規則 3.優先級 4.示例 三.rewrite概述 1.rewrite功能 2.rewrite執行順序 3.跳轉實現 4.語法格式 5.示例 5.1.基于域名的跳轉 5.2.基…

四、利用啟發式算法進行特定數據集的殘差網絡結構搜索【框架+源碼】

背景&#xff1a;工作之后干的事情跟算法關聯甚少&#xff0c;整理下讀書期間的負責和參與的work&#xff0c;再熟悉學習下。 邊熟悉邊整理嘍~ CV Tradictional workCV AI based work機械臂視覺抓取項目機器學習全流程 Pipeline訓練平臺OCR生產線噴碼識別三維重建(SfM)ROS機器人…

C++的vector使用優化

我們在上一章說了如何使用這個vector動態數組&#xff0c;這章我們說說如何更好的使用它以及它是如何工作的。當你創建一個vector&#xff0c;然后使用push_back添加元素&#xff0c;當當前的vector的內存不夠時&#xff0c;會從內存中的舊位置復制到內存中的新位置&#xff0c…

Spring 之 Lifecycle 及 SmartLifecycle

最近在看Eureka源碼&#xff0c;本想快速解決這場沒有硝煙的戰役&#xff0c;不曾想阻塞性問題一個接一個。為正確理解這個框架&#xff0c;我不得不耐著性子&#xff0c;慢慢梳理這些讓人困惑的點。譬如本章要梳理的Lifecycle和SmartLifecycle。它們均為接口&#xff0c;其中后…

mysql的鎖(全局鎖)

文章目錄 mysql按照鎖的粒度分類全局鎖概念&#xff1a;全局鎖使用場景&#xff1a;全局鎖備份案例&#xff1a; mysql按照鎖的粒度分類 全局鎖 概念&#xff1a; 全局鎖就是對整個數據庫實例加鎖。MySQL 提供了一個加全局讀鎖的方法&#xff0c;命令是: Flush tables with…

java —— 文件的創建、刪除、查詢和重命名

文件的相關操作通過 File 類并引入路徑來實現&#xff0c;這里對文件的操作只是對文件本身的增、刪、查等&#xff0c;不包括對文件內容的修改。 一、創建文件/文件夾 public static void main(String[] args) {//創建文件File file1new File("D:\\android\\test\\a.jpg…

vue封裝url驗證方法

vue封裝url驗證方法 在 Vue 中&#xff0c;你可以封裝一個 URL 驗證的方法來驗證給定的 URL 是否有效。以下是一個示例代碼&#xff1a; export const validateUrl (url) > {const regex /^(https?:\/\/)?([\da-z.-])\.([a-z.]{2,6})([/\w .-]*)*/;return regex.test(…

排序算法——歸并排序以及非遞歸實現

一、歸并排序思想 歸并排序&#xff08;MERGE-SORT&#xff09;是建立在歸并操作上的一種有效的排序算法,該算法是采用分治法&#xff08;Divide andConquer&#xff09;的一個非常典型的應用。將已有序的子序列合并&#xff0c;得到完全有序的序列&#xff1b;即先使每個子序列…

OkHttp,一個賊牛的Java工具包

在當今的網絡應用開發中,Java 作為一種成熟的編程語言,廣泛應用于服務器端和客戶端的開發。網絡請求作為應用開發中不可或缺的一部分,選擇一個高效、穩定的網絡庫尤為重要。OkHttp 就是這樣一款優秀的網絡庫,它為Java提供了簡單易用、功能強大的網絡請求能力。本文將向讀者…

關于編譯的一些思路和猜想

一、編譯原理的難度 編譯原理特別復雜&#xff0c;研究的是高級語言如何翻譯成匯編語言的過程。 二、編譯過程中一些思路 (一)語義識別的作用 語義識別指的是把一些無關字符忽略&#xff0c;把一些變量名保存在一起&#xff0c;把用空格隔開的關鍵字單獨放一起。 例如&#…

重新ysyx

一、克隆倉庫 1.創建ssh key ssh-keygen -t rsa cd ~/.ssh ls 查看里面是否有id_rsa id_rsa.pub ssh-keygen -t rsa -C "xiantong15834753336outlook.com" cat id_rsa.pub***********查看里面的內容&#xff0c;復制到下圖中綠色的按鈕 git init ssh -T g…

spark3.0.1版本查詢Hbase數據庫例子

需求背景 現有需求&#xff0c;需要采用spark查詢hbase數據庫的數據同步到中間分析庫&#xff0c;記錄spark集成hbase的簡單例子代碼 import org.apache.hadoop.hbase.HBaseConfiguration import org.apache.hadoop.hbase.client.{ConnectionFactory, Scan} import org.apach…

Marin說PCB之Max parallel知多少?

今天是個陽光明媚&#xff0c;萬里烏云的好日子。小編我一如既往地到家打開電腦準備看騰訊視頻的五十公里桃花塢的第四季&#xff0c;在看到汪蘇瀧汪臺說650電臺要解散的時候小編我差點也哭了。650電臺之于桃花塢就像樂隊的鼓手一樣&#xff0c;都是一個團隊的靈感啊&#xff0…

CSS中的長度單位詳解

在CSS中&#xff0c;長度單位是定義元素尺寸、間距、邊距等的重要工具。不同的長度單位具有不同的特性和使用場景。 絕對長度單位 絕對長度單位在所有設備和瀏覽器中表示相同的長度。這些單位包括&#xff1a; 1.像素&#xff08;px&#xff09; 像素是最常用的長度單位。一…

C語言分支和循環(2)

我的相關博客&#xff1a; C語言的分支與循環&#xff08;1&#xff09; 1.switch語句 除了 if 語句外&#xff0c;C語?還提供了 switch 語句來實現分?結構。 switch 語句是?種特殊形式的 的 if...else 結構&#xff0c;?于判斷條件有多個結果的情況。它把多重 else if…

非質量成本總結

非質量成本 非質量成本 定義 舉例 固定成本 不隨生產量或工作量變動而變動的成本 辦公室租賃費 可變成本 隨著生產量或工作變動而變動的成本 材料費 直接成本 可以直接計入某項目的成本 工人工資 間接成本 不能直接計入某項目而需要再幾個項目之間或在項目與職能部…

Linux基本指令3

Linux基本指令3 目錄 Linux基本指令3 一、Linux文件系統管理 二、Linux進程與服務管理

億發:制造型企業信息化規劃——從破冰到全面落地

在制造型企業中&#xff0c;信息化規劃的落地是一個復雜而關鍵的過程。盡管規劃和藍圖可能已經制定完畢&#xff0c;但如何成功地實施信息化才是關鍵所在。本文將詳細介紹制造型企業信息化規劃的落地過程&#xff0c;通過三個周期逐步推進&#xff0c;最終實現信息化與自動化的…

深度學習知識與心得

目錄 深度學習簡介 傳統機器學習 深度學習發展 感知機 前饋神經網絡 前饋神經網絡&#xff08;BP網絡&#xff09; 深度學習框架講解 深度學習框架 TensorFlow 一個簡單的線性函數擬合過程 卷積神經網絡CNN&#xff08;計算機視覺&#xff09; 自然語言處理NLP Wo…