Web前端開發——HTML基礎下

HTML語法

  • 一·表格
    • 1.基本格式
    • 2.美化表格
      • 合并居中
      • 屬性
  • 二·表單
    • 1.input
    • 2.select
    • 3.textarea
    • 4.button
    • 5.date
    • 6.color
    • 7.checkbox
    • 8.radio
    • 9.range
    • 10.number

一·表格

1.基本格式

HTML表格由<table>標簽定義
其中行由<tr>標簽定義，單元格由<td>定義。

我們先來看一下第一個示例

<tr></tr>行
<td></td>單元格

<!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><tr><th>姓名</th><th>年齡</th></tr><tr><td>張三</td><td>20</td></tr><tr><td>李四</td><td>30</td></tr></table>
</body></html>

在這里插入圖片描述
運行之后我們發現連個表格邊框都沒有，那還能叫做表格嗎，所以我們得加一下邊框，也就是在table標記里加入 width 表格像素以及 border 邊框的像素

原先：<table></table>
修改后：<table width = "100" border = "1"></table> 表格寬度為100像素 表格邊框線為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><table width = "100" border = "1"><tr><th>姓名</th><th>年齡</th></tr><tr><td>張三</td><td>20</td></tr><tr><td>李四</td><td>30</td></tr></table>
</body></html>

在這里插入圖片描述
有了邊框之后，我們就可以進一步了解表格的基本框架了，表格有表頭，表格主體和表尾，還有表格標題，我們來具體使用演示一下

<caption>表格標題</caption>
<thead>表頭</thead>
<tbody>表體</tbody>
<tfoot>表尾</tfoot>
<th>表頭的單元格</th>

<!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 width = "200" border = "1"><caption>學生信息</caption><thead><tr><th>姓名</th><th>年齡</th></tr></thead><tfoot><td colspan="2">表尾無人</td></tfoot><tbody><tr><td>張三</td><td>20</td></tr><tr><td>李四</td><td>30</td></tr></tbody></table>
</body>
</html>

在這里插入圖片描述

2.美化表格

合并居中

rowspan="合并行數"
colspan="合并列數"
align 表格居中
height 表格高度
width 表格寬度

屬性

bgcolor  表格背景顏色
bordercolor 表格邊框顏色
background 表格背景圖片
cellpadding：定義單元格內容與其邊界之間的空間
cellspacing：定義相鄰兩個單元格之間的間距

二·表單

1.input

input 是最常用的表單元素，用于創建各種類型的輸入字段。它支持多種類型，如文本、密碼、電子郵件、數字等。
input中有許多類型，如文本框就是 type=“text”
label 元素為表單控件提供了語義化的標簽，使得表單內容更加清晰易懂

<!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><label for="name">姓名:</label><input type="text" id="name" name="name"><br><br><label for="password">密碼:</label><input type="password" id="password" name="password"><br><br><label for="email">電子郵件:</label><input type="email" id="email" name="email"><br><br><input type="submit" value="提交"></form>
</body>
</html>

在這里插入圖片描述
在這里插入圖片描述

2.select

<!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><label for="country">選擇國家:</label><select id="country" name="country"><option value="china">中國</option><option value="usa">美國</option><option value="india">印度</option></select><br><br><input type="submit" value="提交"></form>
</body>
</html>

在這里插入圖片描述

3.textarea

<!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><label for="message">留言:</label><textarea id="message" name="message" rows="4" cols="50"></textarea><br><br><input type="submit" value="提交"></form>
</body>
</html>

在這里插入圖片描述

4.button

<!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><label for="name">姓名:</label><input type="text" id="name" name="name"><br><br><button type="submit">提交</button></form>
</body>
</html>

在這里插入圖片描述

5.date

<!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><label for="date">選擇日期:</label><input type="date" id="date" name="date"><br><br><input type="submit" value="提交"></form>
</body>
</html>

在這里插入圖片描述

6.color

<!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><label for="color">選擇顏色:</label><input type="color" id="color" name="color"><br><br><input type="submit" value="提交"></form>
</body>
</html>

在這里插入圖片描述

7.checkbox

<!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><label><input type="checkbox" name="option" value="option1"> 選項1</label><br><label><input type="checkbox" name="option" value="option2"> 選項2</label><br><label><input type="checkbox" name="option" value="option3"> 選項3</label><br><br><input type="submit" value="提交"></form>
</body>
</html>

在這里插入圖片描述

8.radio

<!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><label><input type="radio" name="gender" value="male"> 男</label><br><label><input type="radio" name="gender" value="female"> 女</label><br><br><input type="submit" value="提交"></form>
</body>
</html>

在這里插入圖片描述

9.range

<!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><label for="volume">音量:</label><input type="range" id="volume" name="volume" min="0" max="100"><br><br><input type="submit" value="提交"></form>
</body>
</html>

在這里插入圖片描述

10.number

<!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><label for="quantity">數量:</label><input type="number" id="quantity" name="quantity" min="1" max="100"><br><br><input type="submit" value="提交"></form>
</body>
</html>

在這里插入圖片描述

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

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

相關文章

小程序事件系統 —— 33 事件傳參 - data-*自定義數據

小程序事件系統 —— 33 事件傳參 - data-*自定義數據

事件傳參&#xff1a;在觸發事件時&#xff0c;將一些數據作為參數傳遞給事件處理函數的過程&#xff0c;就是事件傳參&#xff1b; 在微信小程序中&#xff0c;我們經常會在組件上添加一些自定義數據&#xff0c;然后在事件處理函數中獲取這些自定義數據&#xff0c;從而完成…
閱讀更多...
安卓設備root檢測與隱藏手段

安卓設備root檢測與隱藏手段

安卓設備root檢測與隱藏手段 引言 安卓設備的root權限為用戶提供了深度的系統控制能力&#xff0c;但也可能帶來安全風險。因此&#xff0c;許多應用&#xff08;如銀行軟件、游戲和流媒體平臺&#xff09;會主動檢測設備是否被root&#xff0c;并限制其功能。這種對抗催生了ro…
閱讀更多...
如何在Ubuntu上直接編譯Apache Doris

如何在Ubuntu上直接編譯Apache Doris

以下是在 Ubuntu 22.04 上直接編譯 Apache Doris 的完整流程&#xff0c;綜合多個版本和環境的最佳實踐&#xff1a; 注意&#xff1a;Ubuntu的數據盤VMware默認是20G&#xff0c;編譯不夠用&#xff0c;給到50G以上吧 一、環境準備 1. 安裝系統依賴 # 基礎構建工具鏈 apt i…
閱讀更多...
vuejs相關鏈接和格式化插件推薦

vuejs相關鏈接和格式化插件推薦

vue官網&#xff1a; https://cn.vuejs.org/ 配合路由設置&#xff1a; https://router.vuejs.org/zh/guide/ element plus (vue3) | element UI (vue2)&#xff1a; https://element-plus.org/zh-CN/#/zh-CN 構建工具vite&#xff1a; https://cn.vitejs.dev/ 右鍵選擇…
閱讀更多...
IDEA中Git版本回退終極指南：Reset與Revert雙方案詳解

IDEA中Git版本回退終極指南：Reset與Revert雙方案詳解

目錄 前言一、版本回退前置知識二、Reset方案&#xff1a;整體改寫歷史1、IDEA圖形化操作&#xff08;推薦&#xff09;1.1、查看提交歷史1.2、選擇目標版本1.3、選擇回退模式1.3.1、Soft&#xff08;推薦&#xff09;1.3.2、Mixed1.3.3、Hard&#xff08;慎用&#xff09;1.3.…
閱讀更多...
PHP并發請求優化：使用`curl_multi_select()`實現高效的多請求處理

PHP并發請求優化：使用`curl_multi_select()`實現高效的多請求處理

PHP并發請求優化&#xff1a;使用curl_multi_select()實現高效的多請求處理 背景 最近在項目中遇到一個需求&#xff0c;需要從多個 1 級網站&#xff08;超過 200 個&#xff09;獲取數據&#xff0c;并且是通過 POST 請求瞬間發送到這些網站上。開始時我直接使用了 curl_ex…
閱讀更多...
【leetcode hot 100 206】反轉鏈表

【leetcode hot 100 206】反轉鏈表

解法一&#xff1a;&#xff08;頭插法&#xff09;在遍歷鏈表時&#xff0c;將當前節點的 next 指針改為指向前一個節點。 /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val)…
閱讀更多...
【QT】-易錯點筆記-2025-2-7

【QT】-易錯點筆記-2025-2-7

1，QList<phy_simulator*> pList；為空不能append()追加，要先new,再用 QList<phy_simulator> pList為空時，確實不能調用 append() 方法。原因很簡單，QList 是一個類對象，在 C++ 中，指針本身并不代表它指向的對象。因此，當你有一個指向 QList<phy_simulato…
閱讀更多...
AI-Deepseek + PPT

AI-Deepseek + PPT

01--Deepseek提問 首先去Deepseek問一個問題&#xff1a; Deepseek的回答&#xff1a; 在汽車CAN總線通信中&#xff0c;DBC文件里的信號處理&#xff08;如初始值、系數、偏移&#xff09;主要是為了 將原始二進制數據轉換為實際物理值&#xff0c;確保不同電子控制單元&…
閱讀更多...
實驗一：在Windows 10/11下配置和管理TCP/IP

實驗一：在Windows 10/11下配置和管理TCP/IP

目錄 1.【實訓目標】 2.【實訓環境】 3.【實訓內容】 4.【實訓步驟】 1.【實訓目標】 1.了解網絡基本配置中包含的協議、服務、客戶端。 2.了解Windows支持的網絡協議及參數設置方法。 3.掌握TCP/IP協議的配置。 2.【實訓環境】 硬件環境&#xff1a;每人一臺計算機&a…
閱讀更多...
Java直通車系列14【Spring MVC】（深入學習 Controller 編寫）

Java直通車系列14【Spring MVC】（深入學習 Controller 編寫）

目錄 基本概念 編寫 Controller 的步驟和要點 1. 定義 Controller 類 2. 映射請求 3. 處理請求參數 4. 調用業務邏輯 5. 返回響應 場景示例 1. 簡單的 Hello World 示例 2. 處理路徑變量和請求參數 3. 處理表單提交 4. 處理 JSON 數據 5. 異常處理 基本概念 Cont…
閱讀更多...
EA - 開源工程的編譯

EA - 開源工程的編譯

文章目錄 EA - 開源工程的編譯概述筆記環境備注x86版本EABase_x86EAAssert_x86EAThread_x86修改 eathread_atomic_standalone_msvc.h原始修改后 EAStdC_x86EASTL_x86EAMain_x86EATest_x86備注備注END EA - 開源工程的編譯 概述 EA開源了‘命令與征服’的游戲源碼 嘗試編譯. 首…
閱讀更多...
一招解決Pytorch GPU版本安裝慢的問題

一招解決Pytorch GPU版本安裝慢的問題

Pytorch是一個流行的深度學習框架&#xff0c;廣泛應用于計算機視覺、自然語言處理等領域。安裝Pytorch GPU版本可以充分利用GPU的并行計算能力&#xff0c;加速模型的訓練和推理過程。接下來&#xff0c;我們將詳細介紹如何在Windows操作系統上安裝Pytorch GPU版本。 查看是否…
閱讀更多...
為解決局域網IP、DNS切換的Windows BAT腳本

為解決局域網IP、DNS切換的Windows BAT腳本

一、背景 為解決公司普通人員需要切換IP、DNS的情況&#xff0c;于是搞了個windows下的bat腳本&#xff0c;可以對有線網絡、無線網絡進行切換設置。 腳本內容 echo off title 多網絡接口IP切換工具:menu cls echo echo 請選擇要配置的網絡接口: echo echo 1. 有線網絡&am…
閱讀更多...
uni_app實現下拉刷新

uni_app實現下拉刷新

1. 在頁面配置中啟用下拉刷新 首先&#xff0c;你需要在頁面的 pages.json 文件中啟用下拉刷新功能。 {"pages": [{"path": "pages/index/index","style": {"navigationBarTitleText": "首頁","enablePull…
閱讀更多...
OpenCV計算攝影學（14）實現對比度保留去色（Contrast Preserving Decolorization）的函數decolor()

OpenCV計算攝影學（14）實現對比度保留去色（Contrast Preserving Decolorization）的函數decolor()

操作系統&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 編程語言&#xff1a;C11 算法描述 將彩色圖像轉換為灰度圖像。它是數字印刷、風格化的黑白照片渲染&#xff0c;以及許多單通道圖像處理應用中的基本工具。 cv::decolor 是 OpenCV…
閱讀更多...
Qt常用控件之 縱向列表QListWidget

Qt常用控件之 縱向列表QListWidget

縱向列表QListWidget QListWidget 是一個縱向列表控件。 QListWidget屬性 屬性說明currentRow當前被選中的是第幾行。count一共有多少行。sortingEnabled是否允許排序。isWrapping是否允許換行。itemAlignment元素的對齊方式。selectRectVisible被選中的元素矩形是否可見。s…
閱讀更多...
關于 QPalette設置按鈕背景未顯示出來 的解決方法

關于 QPalette設置按鈕背景未顯示出來 的解決方法

若該文為原創文章&#xff0c;轉載請注明原文出處 本文章博客地址&#xff1a;https://hpzwl.blog.csdn.net/article/details/146047054 長沙紅胖子Qt&#xff08;長沙創微智科&#xff09;博文大全&#xff1a;開發技術集合&#xff08;包含Qt實用技術、樹莓派、三維、OpenCV…
閱讀更多...
PostgreSQL 安裝與使用

PostgreSQL 安裝與使用

下載地址: EDB: Open-Source, Enterprise Postgres Database Management 安裝圖形化安裝界面安裝。安裝完后將bin目錄配置到系統環境變量 執行psql -h localhost -p 5432 -U postgres 密碼在安裝過程中設置的 ? 0、修改密碼 ALTER USER sonar WITH PASSWORD 123456; 1、新…
閱讀更多...
【基礎3】快速排序

【基礎3】快速排序

核心思路 快速排序是Java中Arrays.sort()的實現原理&#xff0c;采用分治策略&#xff0c;通過選擇基準元素&#xff0c;將數組分為兩個子數組&#xff0c;使得左邊元素 ≤ 基準元素 ≤ 右邊元素&#xff0c;然后遞歸排序子數組。 舉個簡單的例子&#xff0c;圖書管理員需要按…
閱讀更多...
最新文章

Copyright @ 2022~2023