前端-HTML-day2

目錄

1、無序列表

2、有序列表

3、定義列表

4、表格-基本使用

5、表格-結構標簽

6、表格-合并單元格

7、表單-input基本使用

8、表單-input占位文本

9、表單-單選框

10、表單-上傳多個文件

11、表單-多選框

12、表單-下拉菜單

13、表單-文本域

14、表單-label標簽

15、表單-按鈕

16、無語義-div和span

17、字符實體

18、綜合案例1-體育新聞

19、綜合案例2-注冊頁面

1、無序列表

<!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><ul><li>列表條目1</li><li>列表條目2</li><li>列表條目3</li></ul>
</body>
</html>

2、有序列表

<!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><ol><li>步驟1</li><li>步驟2</li><li>步驟3</li></ol>
</body>
</html>

3、定義列表

<!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><dl><dt>服務中心</dt><dd>申請售后</dd><dd>售后政策</dd><dd>訂單查詢</dd><dt>線下門店</dt><dd>小米之家</dd><dd>服務網點</dd><dd>授權體驗店</dd></dl>
</body>
</html>

4、表格-基本使用

<!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><table border="1"><tr><th>姓名</th><th>語文</th><th>數學</th><th>總分</th></tr><tr><td>張三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr><tr><td>總結</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></table>
</body>
</html>

5、表格-結構標簽

?

<!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><table border="1"><thead><tr><th>姓名</th><th>語文</th><th>數學</th><th>總分</th></tr></thead><tbody><tr><td>張三</td><td>99</td><td>100</td><td>199</td></tr><tr><td>李四</td><td>98</td><td>100</td><td>198</td></tr></tbody><tfoot><tr><td>總結</td><td>全市第一</td><td>全市第一</td><td>全市第一</td></tr></tfoot></table>
</body>
</html>

6、表格-合并單元格

<!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><table border="1"><thead><tr><th>姓名</th><th>語文</th><th>數學</th><th>總分</th></tr></thead><tbody><tr><td>張三</td><td>99</td><td rowspan="2">100</td><td>199</td></tr><tr><td>李四</td><td>98</td><!-- <td>100</td> --><td>198</td></tr></tbody><tfoot><tr><td>總結</td><td colspan="3">全市第一</td><!-- <td>全市第一</td> --><!-- <td>全市第一</td> --></tr></tfoot></table>
</body>
</html>

7、表單-input基本使用

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>input基本使用</title>
</head>
<body><!-- 特點：輸入什么就顯示什么 -->文本框：<input type="text"><br><br><!-- 特點：輸入什么都顯示 點 -->密碼框：<input type="password"><br><br>單選框：<input type="radio"><br><br>多選框：<input type="checkbox"><br><br>上傳文件：<input type="file">
</body>
</html>

8、表單-input占位文本

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>input占位文本</title>
</head>
<body>文本框：<input type="text" placeholder="請輸入用戶名"><br><br>密碼框：<input type="password" placeholder="請輸入密碼">
</body>
</html>

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><!-- 加上checked后，默認選擇男 --><!-- name屬性值必須相同 -->性別：<input type="radio" name="gender" checked> 男<input type="radio" name="gender"> 女
</body>
</html>

10、表單-上傳多個文件

<!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>上傳文件：<input type="file" multiple>
</body>
</html>

11、表單-多選框

<!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><!-- 加上checked后，默認選擇 -->興趣愛好：<input type="checkbox"> 敲代碼<input type="checkbox" checked> 敲前端代碼<input type="checkbox" checked> 敲前端HTML代碼
</body>
</html>

12、表單-下拉菜單

<!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><!-- selected 表示默認選中 -->城市：<select><option>北京</option><option>上海</option><option>廣州</option><option>深圳</option><option selected>武漢</option></select>
</body>
</html>

13、表單-文本域

<!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><!-- 右下角有拖拽功能，未來都會禁用，未來工作中，用css設置尺寸 --><textarea>請輸入評論</textarea>
</body>
</html>

14、表單-label標簽

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>label標簽</title>
</head>
<body>性別：<input type="radio" name="gender" id="man"> <label for="man">男</label><label><input type="radio" name="gender"> 女</label>
</body>
</html>

15、表單-按鈕

<!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><!-- form 表單區域 --><!-- action="" 發送數據地址 --><!-- 按鈕需用form包裹，才能生效 --><form action="">用戶名：<input type="text"><br><br>密碼：<input type="password"><br><br><!-- 如果省略type屬性，功能是提交 --><button type="submit">提交</button><button type="reset">重置</button><button type="button">普通按鈕</button></form>
</body>
</html>

16、無語義-div和span

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>div和span</title>
</head>
<body><!-- div：大盒子 --><!-- div標簽：獨占一行 --><div>這是div標簽</div><div>這是div標簽</div><!-- span：小盒子 --><!-- span標簽：不換行 --><span>這是span標簽</span><span>這是span標簽</span>
</body>
</html>

17、字符實體

<!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><!-- 在代碼中敲鍵盤的空格，網頁只識別一個 --><!-- 多空格使用 &nbsp;  -->乾坤未定，你我皆是黑&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;馬。<!-- <p>默認為段落標簽，<p>原樣顯示 &lt;p&gt; -->&lt;p&gt;
</body>
</html>

18、綜合案例1-體育新聞

<!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><ul><li><img src="./images/1.jpg" alt=""><h3>主帥安東尼奧回西班牙休假 國青抵達海口進行隔離</h3></li><li><img src="./images/2.jpg" alt=""><h3>梅州主帥：申花有強有力的教練組 球員體能水平高</h3></li><li><img src="./images/3.jpg" alt=""><h3>馬德興:00后球員將首登亞洲舞臺 調整心態才務實</h3></li></ul>
</body>
</html>

?

19、綜合案例2-注冊頁面

<!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>注冊信息</h1><form action=""><!-- 表單控件 --><!-- 個人信息 --><h2>個人信息</h2><label>姓名：</label><input type="text" placeholder="請輸入真實姓名"><br><br><label>密碼：</label><input type="password" placeholder="請輸入密碼"><br><br><label>確認密碼：</label><input type="password" placeholder="請輸入確認密碼"><br><br><label>性別：</label><label><input type="radio" name="gender" checked>男</label><label><input type="radio" name="gender">女</label><br><br><label>居住城市：</label><select><option>北京</option><option>上海</option><option>廣州</option><option>深圳</option><option>武漢</option></select><!-- 教育經歷 --><h2>教育經歷</h2><label>最高學歷：</label><select><option>博士</option><option>碩士</option><option>本科</option><option>大專</option></select><br><br><label>學校名稱：</label><input type="text"><br><br><label>所學專業：</label><input type="text"><br><br><label>在校時間：</label><select><option>2015</option><option>2016</option><option>2017</option><option>2018</option></select>--<select><option>2019</option><option>2020</option><option>2021</option><option>2022</option></select><!-- 工作經歷 --><h2>工作經歷</h2><label>公司名稱：</label><input type="text"><br><br><label>工作描述：</label><br><textarea></textarea><br><br><!-- 協議和按鈕 --><label><input type="checkbox">已閱讀并同意以下協議：</label><ul><li><a href="#">《用戶服務協議》</a></li><li><a href="#">《隱私政策》</a></li></ul><br><button type="submit">免費注冊</button><button type="reset">重新填寫</button></form>
</body>
</html>

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

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

相關文章

兩種方式清除已經保存的git賬號密碼

兩種方式清除已經保存的git賬號密碼

方式一隨便選擇一個文件夾&#xff0c;然后鼠標右鍵-》TortoiseGit ->設置選擇已保存的數據-》認證數據-》清除-》點擊確定方式二 控制面板\用戶帳戶\憑據管理器-》windows憑據普通憑據-》找到git信息-》選擇刪除
閱讀更多...
Using Spring for Apache Pulsar:Message Production

Using Spring for Apache Pulsar:Message Production

1. Pulsar Template在Pulsar生產者端&#xff0c;Spring Boot自動配置提供了一個用于發布記錄的PulsarTemplate。該模板實現了一個名為PulsarOperations的接口&#xff0c;并提供了通過其合約發布記錄的方法。這些send API方法有兩類&#xff1a;send和sendAsync。send方法通過…
閱讀更多...
CSS揭秘：10.平行四邊形

CSS揭秘：10.平行四邊形

前置知識&#xff1a;基本的css變形一、平行四邊形 要實現一個平行四邊形&#xff0c;可以使用CSS的skew變形屬性來傾斜元素。 transform: skewX(-45deg);圖-1顯示容器和內容都出現了傾斜&#xff0c;該如何解決這個問題&#xff1f; 二、嵌套方案 我們通過將內容嵌套 div 并使…
閱讀更多...
深度學習 必然用到的 線性代數知識

深度學習 必然用到的 線性代數知識

把標量到張量、點積到范數全串起來&#xff0c;幫你從 0 → 1 搭建 AI 數學底座 &#x1f680; 1 標量&#xff1a;深度學習的最小單元 標量 就是一維空間里的“點”&#xff0c;只有大小沒有方向。例如溫度 52 F、學習率 0.001。 記號&#xff1a;普通小寫 x&#xff1b;域&am…
閱讀更多...
OpenGL ES 紋理以及紋理的映射

OpenGL ES 紋理以及紋理的映射

文章目錄開啟紋理創建紋理綁定紋理生成紋理紋理坐標圖像配置線性插值重復效果限制拉伸完整代碼在 Android OpenGL ES 中使用紋理&#xff08;Texture&#xff09;可以顯著提升圖形渲染的質量和效率。以下是使用紋理的主要好處&#xff1a; 增強視覺真實感 紋理可以將復雜的圖像…
閱讀更多...
從金字塔到個性化路徑：AI 正在重新定義學習方式

從金字塔到個性化路徑：AI 正在重新定義學習方式

幾十年來&#xff0c;我們的教育系統始終遵循著一條熟悉的路線&#xff1a; 從小學、初中、高中&#xff0c;再到大學和研究生。這條標準化的路徑&#xff08;K-12 到研究所&#xff09;結構清晰&#xff0c;卻也緩慢。但在當今這個信息爆炸、知識快速更新、個性化需求高漲的時…
閱讀更多...
產品經理崗位職責拆解

產品經理崗位職責拆解

以下是產品經理崗位職責的詳細分解表&#xff0c;涵蓋工作內容、核心動作及輸出成果&#xff1a;崗位職責具體工作內容輸出成果1. 日常版本迭代管理需求分析及PRD產出協調資源推動產品上線- 收集業務/用戶需求&#xff0c;分析可行性及優先級- 撰寫PRD文檔&#xff0c;明確功能…
閱讀更多...
后端微服務基礎架構Spring Cloud

后端微服務基礎架構Spring Cloud

版本關系 版本發布說明-阿里云Spring Cloud Alibaba官網 選擇 創建項目 創建父項目 什么都不動&#xff0c;創建即可 1) 刪掉沒用的文件 保留 2) pom中加入 打包方式 <packaging>pom</packaging> 3) 刪掉src 4) pom.xml中刪除沒用的 5)更改pom.xml中 spring…
閱讀更多...
數據分析框架和方法

數據分析框架和方法

一、核心分析框架 (The Big Picture Frameworks)??描述性分析 (What Happened?)????目的&#xff1a;?? 了解過去發生了什么&#xff0c;描述現狀&#xff0c;監控業務健康。??核心工作&#xff1a;?? 匯總、聚合、計算基礎指標 (KPI)&#xff0c;生成報表和儀表盤…
閱讀更多...
電路研究9.3.10——合宙Air780EP中的AT開發指南：阿里云應用指南

電路研究9.3.10——合宙Air780EP中的AT開發指南：阿里云應用指南

這個好像也用不到&#xff0c;不過可以先貼出來。簡單看了一下也沒深入分析&#xff0c;直接扒過來了&#xff0c;感覺涉及到了上位機的學習了。我這下位機的可能用不到&#xff0c;就是貼過來好了。 應用概述 使用 AT 方式連接阿里云分為一機一密和一型一密&#xff0c;其中一…
閱讀更多...
[Backlog] 核心協調器 | 終端用戶界面(TUI)實現 | 多分支任務沖突解決 | 測試驗證體系

[Backlog] 核心協調器 | 終端用戶界面(TUI)實現 | 多分支任務沖突解決 | 測試驗證體系

第8章 核心協調器 歡迎回到Backlog.md&#xff01; 在上一章文件系統操作中&#xff0c;我們深入了解了數據物理存儲層面的讀寫機制。本章將聚焦系統的神經中樞——核心協調器。 核心協調器的本質&#xff08;中央決策引擎&#xff09; 如果將Backlog.md視為項目管理團隊&a…
閱讀更多...
車載以太網-TC8測試-UT(Upper Tester)

車載以太網-TC8測試-UT(Upper Tester)

目錄 一、技術原理：指令體系與協議適配1. **指令格式與傳輸機制**2. **協議棧交互邏輯**3. **規范遵循與版本演進**二、測試應用：TC8測試場景與案例1. **TCP協議棧深度驗證**2. **ARP協議健壯性測試**3. **SOME/IP服務動態管理**三、實現挑戰與解決方案1. **實時性要求**2. *…
閱讀更多...
扣子Coze純前端部署多Agents

扣子Coze純前端部署多Agents

純前端網頁搭建&#xff0c;無需任何后端代碼&#xff0c;方便快捷&#xff01; 就像公司前臺的多功能控制臺&#xff0c;員工可以通過按鈕快速呼叫不同的AI助手。具備多設備適配、智能對話等基礎能力。 支持添加多個智能體 配置方式 添加智能體信息&#xff0c;data-bot為智…
閱讀更多...
STM32中I2C協議詳解

STM32中I2C協議詳解

前言 在嵌入式系統中&#xff0c;設備間的短距離通信協議中&#xff0c;I2C&#xff08;Inter-Integrated Circuit&#xff0c;集成電路互連&#xff09;以其信號線少、布線簡單、支持多從機等特點&#xff0c;被廣泛應用于傳感器、EEPROM、OLED屏等中低速外設的通信場景。與SP…
閱讀更多...
解鎖Spring Boot多項目共享Redis：優雅Key命名結構指南

解鎖Spring Boot多項目共享Redis：優雅Key命名結構指南

引言Redis 基礎與 Spring Boot 集成Redis 簡介Redis&#xff0c;即 Remote Dictionary Server&#xff0c;是一個開源的基于內存的數據結構存儲系統&#xff0c;可用作數據庫、緩存和消息中間件 。它具備諸多顯著特性&#xff0c;使其在現代軟件開發中占據重要地位。Redis 的讀…
閱讀更多...
《重構項目》基于Apollo架構設計的項目重構方案（多種地圖、多階段、多任務、狀態機管理）

《重構項目》基于Apollo架構設計的項目重構方案（多種地圖、多階段、多任務、狀態機管理）

1. 項目結構設計project/ ├── config/ # 配置文件&#xff08;定義 Scenario、Stage、Task 的映射&#xff09; ├── src/ │ ├── base/ # 抽象基類定義 │ │ ├── scenario_base.h/.cpp │ │ ├── stage_base.h/.cpp…
閱讀更多...
動手學深度學習13.6. 目標檢測數據集-筆記練習（PyTorch）

動手學深度學習13.6. 目標檢測數據集-筆記練習（PyTorch）

以下內容為結合李沐老師的課程和教材補充的學習筆記&#xff0c;以及對課后練習的一些思考&#xff0c;自留回顧&#xff0c;也供同學之人交流參考。 本節課程地址&#xff1a;數據集_嗶哩嗶哩_bilibili 本節教材地址&#xff1a;13.6. 目標檢測數據集 — 動手學深度學習 2.0…
閱讀更多...
Unity3D游戲內存優化指南

Unity3D游戲內存優化指南

前言 Unity3D 游戲的內存控制是保證游戲流暢運行&#xff08;尤其在移動端和主機平臺&#xff09;和避免崩潰的關鍵挑戰。以下是核心策略和常見問題的解決方案&#xff1a; 對惹&#xff0c;這里有一個游戲開發交流小組&#xff0c;希望大家可以點擊進來一起交流一下開發經驗…
閱讀更多...
git學習：首次創建倉庫

git學習：首次創建倉庫

文章目錄前言&#xff1a;1、首次創建倉庫并上傳數據1.1 創建倉庫&#xff0c;1.2 命令上傳1.3 首次代碼上傳至倉庫的步驟&#xff1a;2、分支操作2.1 分支的刪除2.2 切換分支2.3 查看分支2.4 同步其他分支的修改3、查看電腦的配置文件4、遠程倉庫命令 git remote5、其他后語前…
閱讀更多...
C++并行計算：OpenMP與MPI全解析

C++并行計算：OpenMP與MPI全解析

在高性能計算領域&#xff0c;充分利用硬件資源的并行計算技術已成為剛需。從單節點多核到跨節點集群&#xff0c;開發者需要掌握不同的并行編程模型。本文將系統講解兩種主流并行技術&#xff1a;OpenMP&#xff08;共享內存多核并行&#xff09;與MPI&#xff08;分布式內存集…
閱讀更多...
最新文章

Copyright @ 2022~2023