【前端基礎】Day 2 HTML

目錄

1.表格標簽

2.列表標簽

3.表單標簽

4.綜合案例?

5.查閱文檔


1.表格標簽

<body><table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="100"><thead>    <!-- 可以不用thead和tbody --><tr><th>排名</th><th>關鍵詞</th><th>趨勢</th><th>進入搜索</th><th>最近七日</th><th>相關鏈接</th></tr></thead><tbody><tr><td>1</td><td>鬼吹燈</td><td><img src="down.jpg"></td><td>456</td><td>123</td><td><a href="#">百科</a> <a href="#">圖片</a></td></tr></tbody></table>
</body>

<body><table align="center" border="1" cellspacing="0" width="500" height="250"><tr><td></td><td colspan="2"></td><!-- 合并第一行的2、3列,再把第一行第3列的格子刪掉 --><td></td></tr><tr><td></td><td></td><td></td><td></td></tr><tr><td rowspan="2"></td><!-- 合并第1列的三、四行,再把第1列第四行的格子刪掉 --><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></table>
</body>

2.列表標簽

<body><h4>無序標簽</h4><ul><li>蘋果</li><li>香蕉</li><li>梨</li></ul><h4>有序標簽</h4><ol><li>蘋果</li><li>香蕉</li><li>梨</li></ol><h4>自定義列表</h4><dl><dt>名詞1</dt><dd>解釋1</dd><dd>解釋2</dd><dt>名詞2</dt><dd>解釋1</dd><dd>解釋2</dd></dl>
</body>

3.表單標簽

<body><form action=""><!-- test文本框,用戶可以輸入任何文字 -->用戶名:<input type="text" name="username" value="請輸入用戶名" maxlength="6"> <br><!-- password密碼框,用戶看不見輸入的密碼 -->密碼:<input type="password" name="pwd"> <br><!-- radio單選按鈕,若加上表單元素名字name(必須相同)實現單選 -->性別:男 <input type="radio" name="sex" value="男"> 女 <input type="radio" name="sex" value="女"> <br><!-- checkbox復選框,實現多選 --><!-- 單選按鈕和復選框可以設置checked屬性,實現打開頁面時默認選中 -->愛好:吃飯<input type="checkbox" name="hobby" value="吃飯" checked="checked"> 睡覺<input type="checkbox" name="hobby"value="睡覺"> 打豆豆<input type="checkbox" name="hobby" value="打豆豆"> <br><!-- value值可更改提交按鈕上顯示的文字,默認“提交” --><!-- 點擊了提交按鈕可以把表單域form里表單元素里面的值提交的后臺服務器 --><input type="submit" value="免費注冊"><!-- reset重置按鈕 --><input type="reset" value="重新填寫"><!-- 普通按鈕button 后期結合js 搭配使用 --><input type="button" value="獲取短信驗證碼"> <br><!-- 文件域:上傳文件使用的 -->上傳頭像:<input type="file"> <br><!-- label標簽,綁定一個表單元素 --><label for="num">QQ號碼:</label> <input type="text" id="num"></form>
</body>

<body><form action="">籍貫:<select><option>火星</option><option>月球</option><option selected="selected">地球</option></select></form>
</body>

    <form action="">今日反饋:<textarea cols="50" rows="5">這個反饋留言由textarea做的</textarea></form>

4.綜合案例?

<body><h4>青春不常在,抓緊談戀愛</h4><table width="600"><form action=""><tr><td>性別</td><td><input type="radio" name="sex" id="nan"><label for="nan">男</label><input type="radio" name="sex" id="nv"> <label for="nv">女</label></td></tr><tr><td>生日</td><td><select><option>--請選擇年--</option><option>1996</option><option>1997</option><option>1998</option><option>1999</option><option>2000</option><option>2001</option></select><select><option>--請選擇月--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option><option>11</option><option>12</option></select><select><option>--請選擇日--</option><option>1</option><option>2</option><option>3</option><option>4</option><option>5</option><option>6</option><option>7</option><option>8</option><option>9</option><option>10</option></select></td></tr><tr><td>所在地區</td><td><input type="text" value="湖南長沙"></td></tr><tr><td>婚姻狀況</td><td><input type="radio" name="con" checked="checked"> 未婚<input type="radio" name="con">已婚 <inputtype="radio" name="con">離婚</td></tr><tr><td>學歷</td><td><input type="text" value="本科生"></td></tr><tr><td>喜歡的類型</td><td><input type="checkbox">嫵媚的<input type="checkbox">可愛的<input type="checkbox">小鮮肉<input type="checkbox">老臘肉<input type="checkbox">都喜歡</td></tr><tr><td>自我介紹</td><td><textarea>自我介紹</textarea></td></tr><tr><td></td><td><input type="submit" value="免費注冊"></td></tr><tr><td></td><td><input type="checkbox" checked="checked">我同意注冊條款和會員加入標準</td></tr><tr><td></td><td><a href="#" target="_blank">我是會員,立即登錄</a></td></tr><tr><td></td><td><h5>我承諾</h5><ul><li>年滿18歲、單身</li><li>抱著嚴肅的態度</li><li>真誠尋找另一半</li></ul></td></tr></form></table>
</body>

5.查閱文檔

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

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

相關文章

R與RStudio簡介及安裝

目錄 一、R與RStudio關系 二、R簡介 2.1. 發展歷史 2.2. R語言特點 三、安裝指南 3.1 R安裝指南 3.2 R studio安裝指南 一、R與RStudio關系 R是統計領域廣泛使用的工具&#xff0c;屬于GNU系統的一個自由、免費、源代碼開放的軟件&#xff0c;是 用于統計計算和統計繪圖…

20分鐘 Bash 上手指南

文章目錄 bash 概念與學習目的第一個 bash 腳本bash 語法變量的使用位置參數管道符號&#xff08;過濾條件&#xff09;重定向符號條件測試命令條件語句case 條件分支Arrayfor 循環函數exit 關鍵字 bash 腳本記錄歷史命令查詢文件分發內容 bash 概念與學習目的 bash&#xff0…

django校園互助平臺~源碼

博主介紹&#xff1a;?程序猿徐師兄、8年大廠程序員經歷。全網粉絲15w、csdn博客專家、掘金/華為云/阿里云/InfoQ等平臺優質作者、專注于Java技術領域和畢業項目實戰? &#x1f345;文末獲取源碼聯系&#x1f345; &#x1f447;&#x1f3fb; 精彩專欄推薦訂閱&#x1f447;…

易基因:RNA甲基化修飾和R-loop的交叉調控:從分子機制到臨床意義|深度綜述

大家好&#xff0c;這里是專注表觀組學十余年&#xff0c;領跑多組學科研服務的易基因。 R-loop&#xff08;RNA-DNA雜合結構&#xff09;是轉錄調控、DNA復制和修復等關鍵細胞過程的重要組成部分。但R-loop異常積累可能會破壞基因組完整性&#xff0c;從而導致多種疾病的發生…

多智能體框架

多個不同的角色的Agent&#xff0c;共同完成一份復雜的工作。由一個統籌管理的智能體&#xff0c;自主規劃多個智能體分別做什么&#xff0c;以及執行的順序。 agent 應該包含的屬性 執行特定任務 根據其角色和目標做出決策 能夠使用工具來實現目標 與其他代理溝通和協作 保留…

wifi5和wifi6,WiFi 2.4G、5G,五類網線和六類網線,4G和5G的區別

wifi5和wifi6的區別 是Wi-Fi 5和Wi-Fi 6的選擇與路由器密切相關。路由器是創建和管理無線網絡的設備,它決定了網絡的類型和性能。具體來說: 路由器的標準支持:路由器可以支持不同的Wi-Fi標準,如Wi-Fi 5(802.11ac)和Wi-Fi 6(802.11ax)。支持Wi-Fi 6的路由器能夠提供更高…

Metal 學習筆記四:頂點函數

到目前為止&#xff0c;您已經完成了 3D 模型和圖形管道。現在&#xff0c;是時候看看 Metal 中兩個可編程階段中的第一個階段&#xff0c;即頂點階段&#xff0c;更具體地說&#xff0c;是頂點函數。 著色器函數 定義著色器函數時&#xff0c;可以為其指定一個屬性。您將在本…

什么是零拷貝?

零拷貝是一種優化技術&#xff0c;用于減少數據在計算機系統中的拷貝次數&#xff0c;從而提高性能和效率。在傳統的數據傳輸中&#xff0c;數據通常會在多個緩沖區之間進行多次拷貝&#xff0c;而零拷貝技術通過減少這些不必要的拷貝操作&#xff0c;顯著降低了CPU和內存的開銷…

【LeetCode20】有效的括號

題目描述 給定一個只包括 ‘(’&#xff0c;‘)’&#xff0c;‘{’&#xff0c;‘}’&#xff0c;‘[’&#xff0c;‘]’ 的字符串 s &#xff0c;判斷字符串是否有效。 有效字符串需滿足&#xff1a; 左括號必須用相同類型的右括號閉合。 左括號必須以正確的順序閉合。 每…

算法訓練(leetcode)二刷第三十七天 | *300. 最長遞增子序列、674. 最長連續遞增序列、*718. 最長重復子數組

刷題記錄 *300. 最長遞增子序列674. 最長連續遞增序列基礎解法&#xff08;非動規&#xff09;動態規劃 718. 最長重復子數組滾動數組 *300. 最長遞增子序列 leetcode題目地址 dp數組含義&#xff1a; dp[i]表示以nums[i]結尾的最長遞增子序列長度&#xff0c;即以nums[i]結尾…

Elasticsearch 相關面試題

1. Elasticsearch基礎 Elasticsearch是什么&#xff1f; Elasticsearch是一個分布式搜索引擎&#xff0c;基于Lucene實現。 Mapping是什么&#xff1f;ES中有哪些數據類型&#xff1f; Mapping&#xff1a;定義字段的類型和屬性。 數據類型&#xff1a;text、keyword、integer、…

TCP/IP的分層結構、各層的典型協議,以及與ISO七層模型的差別

1. TCP/IP的分層結構 TCP/IP模型是一個四層模型&#xff0c;主要用于網絡通信的設計和實現。它的分層結構如下&#xff1a; (1) 應用層&#xff08;Application Layer&#xff09; 功能&#xff1a;提供應用程序之間的通信服務&#xff0c;處理特定的應用細節。 典型協議&am…

pycharm技巧--鼠標滾輪放大或縮小 Pycharm 字體大小

1、鼠標滾輪調整字體 設置 Ctrl 鼠標滾輪調整字體大小 備注&#xff1a; 第一個是活動窗口&#xff0c;即縮放當前窗口 第二個是所有編輯器窗口&#xff0c;即縮放所有窗口的字體 2、插件 漢化包&#xff1a; Chinese Simplified 包

硬件工程師入門教程

1.歐姆定律 測電壓并聯使用萬用表測電流串聯使用萬用表&#xff0c;紅入黑出 2.電阻的阻值識別 直插電阻 貼片電阻 3.電阻的功率 4.電阻的限流作用 限流電阻阻值的計算 單位換算關系 5.電阻的分流功能 6.電阻的分壓功能 7.電容 電容簡單來說是兩塊不連通的導體加上中間的絕…

edge瀏覽器將書簽欄頂部顯示

追求效果&#xff0c;感覺有點丑&#xff0c;但總歸方便多了 操作路徑&#xff1a;設置-外觀-顯示收藏夾欄-始終

【SPIE出版,見刊快速,EI檢索穩定,浙江水利水電學院主辦】2025年物理學與量子計算國際學術會議(ICPQC 2025)

2025年物理學與量子計算國際學術會議&#xff08;ICPQC 2025&#xff09;將于2025年4月18-20日在中國杭州舉行。本次會議旨在匯聚全球的研究人員、學者和業界專家&#xff0c;共同探討物理學與量子計算領域的最新進展與前沿挑戰。隨著量子技術的快速發展&#xff0c;其在信息處…

谷歌瀏覽器更新后導致的刷新數據無法顯示

這幾天突然出現的問題&#xff0c;就是我做了一個網站&#xff0c;一直用Google展示&#xff0c;前兩天突然就是刷新會丟失數據&#xff0c;然后再刷新幾次吧又有了&#xff0c;之前一直好好的&#xff0c;后端也做了一些配置添加了CrossOrigin注解&#xff0c;然而換了edge瀏覽…

UE5從入門到精通之多人游戲編程常用函數

文章目錄 前言一、權限與身份判斷函數1. 服務器/客戶端判斷2. 網絡角色判斷二、網絡同步與復制函數1. 變量同步2. RPC調用三、連接與會話管理函數1. 玩家連接控制2. 網絡模式判斷四、實用工具函數前言 UE5給我們提供了非常強大的多人網路系統,讓我們可以很方便的開發多人游戲…

軟件需求管理辦法,軟件開發管理指南(Word原件)

1. 目的 2. 適用范圍 3. 參考文件 4. 術語和縮寫 5. 需求獲取的方式 5.1. 與用戶交談向用戶提問題 5.1.1. 訪談重點注意事項 5.1.2. 訪談指南 5.2. 參觀用戶的工作流程 5.3. 向用戶群體發調查問卷 5.4. 已有軟件系統調研 5.5. 資料收集 5.6. 原型系統調研 5.6.1. …

利用python和gpt寫一個conda環境可視化管理工具

最近在學習python&#xff0c;由于不同的版本之間的差距較大&#xff0c;如果是用環境變量來配置python的話&#xff0c;會需要來回改&#xff0c;于是請教得知可以用conda來管理&#xff0c;但是conda在管理的時候老是要輸入命令&#xff0c;感覺也很煩&#xff0c;于是讓gpt幫…