web前端第一次作業

一、用戶注冊界面作業要求:
1.用戶名為文本框,名稱為 UserName,長度為 15,最大字符數為 20
2.密碼為密碼框,名稱為 UserPass,長度為 15,最大字符數為 20
3.性別為兩個單選按鈕,名稱為 sex,值分別為男和女,男默認選中
4.愛好是三個多選按鈕,名稱為 like,值分別為寫作、聽音樂、體育
5.省份為下拉框,名稱為 province,選項的鍵-值對為 Key:陜西省,value:shaanxi ;Key:山西省5.
value:shanx;陜西省默認選中
6.自我介紹為多行文本框,名稱為 intro,寬 25,高5,默認值為“這個家伙什么也沒留下”
7.提交按鈕,名稱為“send”,標簽為“提交”
8.重置按鈕,名稱為“reset”,標簽為“重置”8?
9.參照圖使用表格定位表單

代碼如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>用戶注冊</title>
</head>
<body><!--使用8*3表格-->   <table border="1px" width="300px" height="350px" align="center"><tr><td bgcolor="grey" colspan="3" align="center"><b>用戶注冊</b></td></tr><!--1.用戶名為文本框,名稱為 UserName,長度為 15,最大字符數為 20--><tr><td bgcolor="lightgrey" align="right">用戶名</td><td bgcolor="lightgrey" colspan="2"><input type="text" name="UserName" width="15px" maxlength="20"></td></tr><!--2.密碼為密碼框,名稱為 UserPass,長度為 15,最大字符數為 20--><tr><td bgcolor="lightgrey" align="right" >密碼</td><td bgcolor="lightgrey" colspan="2"><input type="password" name="UserPass width="15px" maxlength="20"></td></tr><!--3.性別為兩個單選按鈕,名稱為 sex,值分別為男和女,男默認選中--><tr><td bgcolor="lightgrey" align="right" >性別</td><td bgcolor="lightgrey" colspan="2">男:<input type="radio" name="sex" value="0">女:<input type="radio" name="sex" value="1"><br></td></tr><!--4.愛好是三個多選按鈕,名稱為 like,值分別為寫作、聽音樂、體育--><tr><td bgcolor="lightgrey" align="right" >愛好</td><td bgcolor="lightgrey" colspan="2"><input type="checkbox" name="like" value="xz">寫作<input type="checkbox" name="like" value="tyy">聽音樂<input type="checkbox" name="like" value="ty">體育<br>   </td></tr><!--5.省份為下拉框,名稱為 province,選項的鍵-值對為 Key:陜西省,value:shaanxi ;Key:山西省;value:shanx;陜西省默認選中--><tr><td bgcolor="lightgrey" align="right" >省份</td><td bgcolor="lightgrey" colspan="2"><select name="location"><option value="shanxi" checked>陜西省</option><option value="sx">山西省</option></select></td></tr><!--6.自我介紹為多行文本框,名稱為 intro,寬 25,高5,默認值為“這個家伙什么也沒留下”--><tr><td bgcolor="lightgrey" align="right" >自我介紹</td><td bgcolor="lightgrey" colspan="3"><textarea name="intro" id="" cols="25" rows="5" placeholder="這個家伙什么也沒留下"></textarea></td></tr><!--7.提交按鈕,名稱為“send”,標簽為“提交”--><tr><td bgcolor="lightgrey" colspan="3" align="center" ><button type="submit" name="send"><b>提交</b></button><!--8.重置按鈕,名稱為“reset”,標簽為“重置”8?--><button type="reset" name="reset"><b>重置</b></button> </td></tr></table>
</body>
</html>

結果如下

二、工商銀行電子匯款單

代碼如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>工商銀行電子匯款單</title>
</head>
<body><th><h2>工商銀行電子匯款單</h2></th><table border="1px" width="780px" height="280px" cellspacing="0px"><!--第一行--><tr><!--跨兩列--><td colspan="2"><b>回單類型</b></td><td>網上轉賬匯款</td><td colspan="2"><b>指令序號</b></td><td>HQH0000000000000013878172</td></tr><!--第二行--><tr><!--跨四行--><td rowspan="4"><b>收款人</b></td><td>戶名</td><td>老牟</td><td rowspan="4"><b>付款人</b></td><td>戶名</td><td>老劉</td></tr><tr><td>卡號</td><td>000000000001</td><td>卡號</td><td>000000000002</td></tr><tr><td>地區</td><td>南京</td><td>地區</td><td>杭州</td></tr><tr><td>網點</td><td>工商江蘇南京業務處理中心</td><td>網點</td><td>江蘇蘇州業務中心</td></tr><tr><td colspan="2"><b>幣種</b></td><td>人民幣</td><td colspan="2"><b>鈔匯標志</b></td><td>鈔票</td></tr><tr><td colspan="2"><b>金額</b></td><td>1.00元</td><td colspan="2"><b>手續費</b></td><td>0.57元</td></tr><tr><td colspan="5"><b>合計</b></td><td>人民幣(大寫):壹元整</td></tr><tr><td colspan="2"><b>交易時間</b></td><td><i>2017年6月1日</i></td><td colspan="2"><b>時間截</b></td><td><i>2017-06-01-13.00.00.00000</i></td></tr></table><table><p>票據打印時間:2017-06-01 15:00:12</p><del>測試內容</del><p>操作員:大曾</p></table>
</body>
</html>

結果如下

?

三、?李白詩詞

代碼如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>李白詩詞</title></head>
<body><h1 align="left"><b>將進酒</b><small> 君不見黃河之水天上來</small></h1><table><tr><td><img src="3.png" width="400px" height="600px"><td>  <p>君不見,黃河之水天上來,奔流到海不復回。</p><p>君不見,高堂明鏡悲白發,朝如青絲暮成雪!</p><p>人生得意須盡歡,莫使金樽空對月。</p><p>天生我材必有用,千金散盡還復來。</p><p>烹羊宰牛且為樂,會須一飲三百杯。</p><p>岑夫子,丹丘生,將進酒,杯莫停。</p><p>與君歌一曲,請君為我傾耳聽。</p><p>鐘鼓饌玉不足貴,但愿長醉不復醒。</p><p>古來圣賢皆寂寞,惟有飲者留其名。</p><p>陳王昔時宴平樂,斗酒十千恣歡謔。</p><p>主人何為言少錢,徑須沽取對君酌。</p></td></tr></table></body>
</html>

結果如下

四、豆瓣電影

代碼如下

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>豆瓣電影</title>
</head>
<body><th><h2>熱門電影板塊</h2></th><b>最近熱門電影</b>
<hr>&nbsp;&nbsp;&nbsp;&nbsp;熱門&nbsp;&nbsp;&nbsp;最新&nbsp;&nbsp;&nbsp;豆瓣高分&nbsp;&nbsp;&nbsp;冷門佳片&nbsp;&nbsp;&nbsp;華語&nbsp;&nbsp;&nbsp;歐美&nbsp;&nbsp;&nbsp;韓國&nbsp;&nbsp;&nbsp;日本&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;更多>>
<hr><table><tr><td><img src="千與千尋.webp" width="150px" height="200px">  <p>千與千尋</p>      </td><td><img src="哪吒之魔童鬧海webp.webp" width="150px" height="200px"><p>哪吒之魔童鬧海</p></td><td><img src="唐人街探案3.jpg" width="150px" height="200px"><p>唐人街探案3</p></td><td><img src="巨齒鯊.jpg" width="150px" height="200px"><p>巨齒鯊</p></td></tr><tr><td><img src="無間道.webp" width="150px" height="200px"><p>無間道</p></td><td><img src="重啟未來.jpg" width="150px" height="200px"><p>重啟未來</p></td><td><img src="金剛.webp" width="150px" height="200px"><p>金剛</p></td><td><img src="飛馳人生2.jpg" width="150px" height="200px"><p>飛馳人生2</p></td></tr>   </table>
</body>
</html>

結果如下

?

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

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

相關文章

Jenkins 節點連接故障定位及解決方案總結 - PKIX path validation failed

一、故障現象 Jenkins 節點通過 Java Web 方式連接時&#xff0c;報錯&#xff1a; java.io.IOException: Failed to connect to https://xxxx.zte.com.cn/yyyy/tcpSlaveAgentListener/: PKIX path validation failed: java.security.cert.CertPathValidatorException: validit…

c++ --- priority_queue的使用以及簡單實現

C --- priority_queue前言一、priority_queue的使用二、priority_queue的簡單實現1.整體結構2.主要方法pushpoptopemptysize三、構造迭代器區間構造默認構造四、仿函數前言 priority_queue是C容器之一&#xff0c;意為優先級隊列&#xff0c;雖說叫做隊列&#xff0c;但是其底…

MySQL梳理三:查詢與優化

MySQL查詢優化完整指南&#xff1a;從理論到實踐 本文從MySQL查詢的基礎機制出發&#xff0c;深入探討單表查詢訪問方法、聯表查詢策略、成本計算原理、基于規則的優化技術&#xff0c;最后通過實際案例展示慢SQL的診斷和優化過程。 目錄 一、單表查詢的訪問方法二、聯表查詢機…

從零開始的python學習(九)P129+P130+P131+P132+P133

本文章記錄觀看B站python教程學習筆記和實踐感悟&#xff0c;視頻鏈接&#xff1a;【花了2萬多買的Python教程全套&#xff0c;現在分享給大家&#xff0c;入門到精通(Python全棧開發教程)】 https://www.bilibili.com/video/BV1wD4y1o7AS/?p6&share_sourcecopy_web&v…

LCL濾波器及其電容電流前饋有源阻尼設計軟件【LCLAD_designer】

本文主要介紹針對阮新波著《LCL型并網逆變器的控制技術》書籍 第二章&#xff08;LCL濾波器設計&#xff09;及第五章&#xff08;LCL型并網逆變器的電容電流反饋有源阻尼設計&#xff09;開發的一款交互式軟件【LCL&AD_designer】&#xff0c;開發平臺MATLAB_R2022b/app d…

【Conda】配置Conda鏡像源

Conda 鏡像源配置指南 適用系統&#xff1a;Windows 10&#xff08;含 Miniconda / Anaconda&#xff09; & Linux&#xff08;Ubuntu / CentOS / Debian 等&#xff09;1. 為什么要設置鏡像源 在中國大陸直接訪問 repo.anaconda.com 經常遇到速度慢、連接超時、SSL 錯誤等…

八股取士--docker

基礎概念類 1. 什么是Docker&#xff1f;它解決了什么問題&#xff1f; 解析&#xff1a; Docker是一個開源的容器化平臺&#xff0c;用于開發、交付和運行應用程序。 主要解決的問題&#xff1a; 環境一致性&#xff1a;解決"在我機器上能跑"的問題資源利用率&#…

C++:STL中的棧和隊列的適配器deque

學習完string類、容器vector和容器list&#xff0c;再去學習其他容器的學習成本就非常低&#xff0c;容器的使用方法都大差不差&#xff0c;而棧和隊列的底層使用了適配器&#xff0c;去模擬實現就沒有那么麻煩&#xff0c;適配器也是一種容器&#xff0c;但是這種容器兼備棧和…

9類主流數據庫 - 幫你更好地進行數據庫選型!

作者&#xff1a;唐叔在學習 專欄&#xff1a;數據庫學習 標簽&#xff1a;數據庫選型、MySQL、Redis、MongoDB、大數據存儲、NoSQL、數據庫優化、數據架構、AI數據庫 大家好&#xff0c;我是你們的老朋友唐叔&#xff01;今天咱們來聊聊程序員吃飯的家伙之一 —— 數據庫。在這…

推送本地項目到Gitee遠程倉庫

文章目錄前言前面已加學習了下載gitee軟件&#xff0c;網址在上一篇文章。在gitee創建賬號與倉庫。現在來學習如何講本地項目推送到Gitee遠程倉庫一、流程總結前言 前面已加學習了下載gitee軟件&#xff0c;網址在上一篇文章。在gitee創建賬號與倉庫。現在來學習如何講本地項目…

CMake 命令行參數完全指南(5)

?**40. --version**? ?解釋?&#xff1a;顯示CMake版本 ?示例?&#xff1a; cmake --version # 輸出&#xff1a;cmake version 3.25.2?**41. --warn-uninitialized**? ?解釋?&#xff1a;警告未初始化的變量 ?適用場景?&#xff1a;檢測腳本錯誤 ?示例?&#xf…

基于Python實現生產者—消費者分布式消息隊列:構建高可用異步通信系統

深入剖析分布式消息隊列的核心原理與Python實現&#xff0c;附完整架構設計和代碼實現引言&#xff1a;分布式系統的通信基石在微服務架構和云原生應用普及的今天&#xff0c;服務間的異步通信成為系統設計的核心挑戰。當單體應用拆分為數十個微服務后&#xff0c;服務間通信呈…

【大模型核心技術】Agent 理論與實戰

一、基本概念 LLM 特性&#xff1a;擅長理解和生成文本&#xff0c;但采用 “一次性” 響應模式&#xff0c;本質上是無記憶的生成模型。Agent 本質&#xff1a;包含 LLM 的系統應用&#xff0c;具備自主規劃、工具調用和環境反饋能力&#xff0c;是將 LLM 從 “聊天機器人” 升…

Maven - 依賴的生命周期詳解

作者&#xff1a;唐叔在學習 專欄&#xff1a;唐叔的Java實踐 標簽&#xff1a;Maven依賴管理、Java項目構建、依賴傳遞性、Spring Boot依賴、Maven最佳實踐、項目構建工具、依賴沖突解決、POM文件詳解 文章目錄一、開篇二、Maven依賴生命周期2.1 依賴聲明階段&#xff1a;POM文…

從零打造大語言模型--處理文本數據

從零打造大語言模型 第 1 章&#xff1a;處理文本數據 章節導讀 在把文本投喂進 Transformer 之前&#xff0c;需要兩步&#xff1a;① 將字符流切分成離散 Token&#xff1b;② 把 Token 映射成連續向量。 1.1 理解詞嵌入&#xff08;Word Embedding&#xff09; 嵌入向量 一…

【Spring】Bean的生命周期,部分源碼解釋

文章目錄Bean 的生命周期執行流程代碼演示執行結果源碼閱讀AbstractAutowireCapableBeanFactorydoCreateBeaninitializeBeanBean 的生命周期 生命周期指的是一個對象從誕生到銷毀的整個生命過程&#xff0c;我們把這個過程就叫做一個對象的聲明周期 Bean 的聲明周期分為以下 …

[spring-cloud: 服務發現]-源碼解析

DiscoveryClient DiscoveryClient 接口定義了常見的服務發現操作&#xff0c;如獲取服務實例、獲取所有服務ID、驗證客戶端可用性等&#xff0c;通常用于 Eureka 或 Consul 等服務發現框架。 public interface DiscoveryClient extends Ordered {/*** Default order of the dis…

QML 基礎語法與對象模型

QML (Qt Meta-Object Language) 是一種聲明式語言&#xff0c;專為創建流暢的用戶界面和應用程序邏輯而設計。作為 Qt 框架的一部分&#xff0c;QML 提供了簡潔、直觀的語法來描述 UI 組件及其交互方式。本文將深入解析 QML 的基礎語法和對象模型。 一、QML 基礎語法 1. 基本對…

HTTPS的概念和工作過程

一.HTTPS是什么HTTPS也是一個應用層協議&#xff0c;是在HTTP協議的基礎上引入了一個加密層&#xff08;SSL&#xff09;HTTP協議內容都是按照文本的方式明文傳輸的&#xff0c;這就導致傳輸過程中可能出現被篡改的情況最著名的就是十多年前網絡剛發展的時期&#xff0c;出現“…

Unity —— Android 應用構建與發布?

文章目錄1 ?Gradle模板??&#xff1a;了解Gradle模板的作用及使用方法&#xff0c;以增強對構建流程的控制。?2 ?Gradle模板變量??&#xff1a;參考文檔——自定義Gradle模板文件中可用的變量列表。2.1 修改Unity應用的Gradle工程文件2.1.1 通過Gradle模板文件2.1.2 導出…