【學習筆記】HTML+CSS

来源:https://www.cnblogs.com/ouu2022/archive/2023/04/11/17302113.html
-Advertisement-
Play Games

HTML HTML教程 簡介 編輯器 基礎 元素 屬性 標題 段落 文本格式化 鏈接 頭部 CSS 圖像 表格 列表 區塊 佈局 表單和輸入 1、意義： 用於收集用戶的輸入信息 表示文檔中的一個區域，此區域包含交互控制項，將用戶收集到的信息發送到 Web 伺服器 一個文本欄位的預設寬度是20個字元 2 ...


HTML

HTML教程

簡介

編輯器

基礎

元素

屬性

標題

段落

文本格式化

鏈接

頭部

CSS

圖像

表格

列表

區塊

佈局

表單和輸入

1、意義：

  • 用於收集用戶的輸入信息
  • 表示文檔中的一個區域，此區域包含交互控制項，將用戶收集到的信息發送到 Web 伺服器
  • 一個文本欄位的預設寬度是20個字元

2、form創建表單：

  • 格式：<form>input 元素</form>
  • 多數情況下被用到的表單標簽是輸入標簽 <input>

3、type輸入標簽類型（針對input）：

  • 文本域Text Fields：type="text"，當用戶要在表單中鍵入字母、數字等內容時

    • 表單本身並不可見
    • 在大多數瀏覽器中，文本域的預設寬度是 20 個字元

  • 密碼欄位：type="password"，當用戶要輸入密碼時

    • 密碼欄位字元不會明文顯示，而是以星號 * 或圓點 . 替代。

  • 單選按鈕Radio Buttons：type="radio"，當用戶需要選擇單選框選項時

  • 覆選框Checkboxes：type="checkbox"，當用戶可以選取一個或多個選項時

  • 提交按鈕(Submit)：type="submit"，當用戶需要單擊確認按鈕從而上傳表單內容時

  • type：類型

  • 文本輸入：text="text";

  • 密碼輸入：type="password";

  • 數字輸入：type="number";

  • 按鈕：type="button";

  • 提交：type="submit";

  • 等

4、textarea文本區域：

  • rows和cols：可見的行數和寬度，如<textarea rows="10" cols="30"></textarea>
  • placeholder：可見的提示內容
  • name：名稱
  • maxlength：最大字元數
  • required：規定必填

框架

顏色

1、#

  • ccc 灰色

顏色名

顏色值

腳本

字元實體

URL

速查列表

標簽簡寫及全稱

總結

HTML5

CSS

教程

簡介

1、什麼是 CSS?

  • CSS 指層疊樣式表 (Cascading Style Sheets)
  • 樣式定義如何顯示HTML元素
  • 樣式通常存儲在樣式表中
  • 外部樣式表可以極大提高工作效率
  • 外部樣式表通常存儲在 CSS 文件中
  • 多個樣式定義可層疊為一個

語法

1、實例

  • 規則：選擇器+聲明，即選擇器h1
    • 如p
    • 註釋：/這是個註釋/

Id和Class選擇器

1、

創建

background背景

1、background-color背景顏色：

  • 頁面的背景顏色：body {background-color:#b0c4de;};
  • 對象：h1、p、div

2、background-image背景圖像：

  • 增加背景圖像：background-image:url('https://static.runoob.com/images/mix/paper.gif');
  • 預設情況下，背景圖像進行水平方向和垂直方向平鋪重覆顯示，以覆蓋整個元素實體

3、background-repeat平鋪(重覆)方向：

  • 水平方向：background-repeat:repeat-x;
  • 只顯示一次：background-repeat:no-repeat;

4、background-position背景位置：

  • 關鍵詞：
    • left top
    • left center
    • left bottom
    • right top
    • right center
    • right bottom
    • center top
    • center center
    • center bottom
  • xpos ypos:對應x軸位置和y軸位置[1]

5、background-attachment固定還是滾動：

  • scroll：背景圖片隨著頁面的滾動而滾動，這是預設的。
  • fixed：背景圖片不會隨著頁面的滾動而滾動。
  • local：背景圖片會隨著元素內容的滾動而滾動。
  • initial：設置該屬性的預設值。

text文本

fonts字體

列表

table表格

盒子模型

1、所有HTML元素可以看作盒子，CSS盒模型本質上是一個盒子，封裝周圍的HTML元素，它包括：邊距，邊框，填充，和實際內容。
image

  • Margin(外邊距)：清除邊框外的區域，外邊距是透明的。
  • Border(邊框)：圍繞在內邊距和內容外的邊框。
  • Padding(內邊距)：清除內容周圍的區域，內邊距是透明的。
  • Content(內容)：盒子的內容，顯示文本和圖像。

2、當您指定一個 CSS 元素的寬度和高度屬性時，你只是設置內容區域的寬度和高度。要知道，完整大小的元素，你還必須添加內邊距，邊框和外邊距。

  • 舉例：width: 300px;border: 25px solid green;padding: 25px;margin: 25px;
  • 錯誤：300px內容+25px邊框+25px內邊距+25px外邊距=375px總寬
  • 正確：300px內容+50px左右邊框+50px左右內邊距+50px左右外邊距=450px

3、總元素寬度或高度：

  • 總元素的寬度=寬度+左填充+右填充+左邊框+右邊框+左邊距+右邊距=width+padding+border
  • 總元素的高度=高度+頂部填充+底部填充+上邊框+下邊框+上邊距+下邊距=height+padding+border

4、【補充】box-sizing 屬性：

  • 設置 width 和 height 屬性中包含了 padding(內邊距) 和 border(邊框)
    • 元素寬度=width
    • 元素高度=height
  • 添加：box-sizing: border-box;

border邊框

1、border-style邊框類型

  • none：無邊框
  • dotted：點線邊框
  • dashed：虛線邊框
  • solid：實線邊框
  • double：雙邊框，寬度與border-width 的值相同
  • groove：3D溝槽邊框，效果取決於邊框的顏色值
  • ridge：3D脊邊框，同上
  • inset：3D嵌入邊框，同上
  • outset：3D突出邊框，同上
  • hidden：隱藏邊框
  • 混合邊框：
    • 上、右、底、左：border-style: dotted dashed solid double;
    • 上底、左右：border-style:dotted solid；
    • 上、左右、底：border-style:dotted solid double;

2、border-width邊框寬度

  • 指定長度值，比如 2px 或 0.1em(單位為 px, pt, cm, em 等)
  • 關鍵詞：thick 、medium（預設值）和 thin，對應5px、3px 和 2px或者3px、2px 和 1px

3、border-color邊框顏色

  • name：指定顏色的名稱，如 "red"
  • RGB：指定 RGB 值, 如 "rgb(255,0,0)"
  • Hex：指定16進位值, 如 "#ff0000"
  • transparent

4、單獨設置邊框：

  • border-top（單獨設置+簡寫屬性）
    • border-top-style（單獨設置）
    • border-top-color
    • border-top-width
  • border-right
  • border-bottom
  • border-left

5、簡寫屬性：

  • 寬度+類型（必）+顏色：border:5px solid red;

6、border-radius圓角：

  • 外邊框圓角：當使用一個半徑時確定一個圓形，當使用兩個半徑時確定一個橢圓，這個(橢)圓與邊框的交集形成圓角效果。
    • 左上、右上、右下、左下：border-radius: 15px 50px 30px 5px;
    • 左上、右上左下、右下:border-radius: 15px 50px 30px;
    • 左上右下、右上左下：border-radius: 50px 20px;
    • 四角：border-radius: 15px;
  • 橢圓角：[2]

outline輪廓

margin外邊距

1、定義元素周圍的空間。
image

  • 除周圍的（邊框外的）元素區域。
  • margin 沒有背景顏色，是完全透明的。
  • 可以單獨改變元素的上，下，左，右邊距，也可以一次改變所有的屬性。

2、margin外邊距：

  • auto：設置瀏覽器邊距，這樣做的結果會依賴於瀏覽器
  • length：定義一個固定的margin（使用像素，pt，em等）
  • %：定義一個使用百分比的邊距

3、設置單邊：

  • 上：margin-top:100px;
  • 底：margin-bottom:100px;
  • 右：margin-right:50px;
  • 左：margin-left:50px;

4、簡寫屬性：

  • 上、右、下、左：margin:25px 50px 75px 100px;
  • 上、左右、下：margin:25px 50px 75px;
  • 上下、左右：margin:100px 50px;
  • 四邊：margin:25px;

5、意義：

  • 定義上下元素之間距離：margin:8px 0;
  • 定義左右元素之間距離：margin：0 8px;

padding填充

1、padding：定義元素邊框與元素內容之間的空間，即上下左右的內邊距。
image

  • padding（填充）內邊距被清除時，所釋放的區域將會受到元素背景顏色的填充
  • 單獨使用padding屬性可以改變上下左右的填充
  • 填充內邊距之後會自動調節內容的大小

2、padding填充：

  • length：定義一個固定的填充(像素, pt, em,等)
  • %：使用百分比值定義一個填充

3、設置單邊：

  • 上內：padding-top:25px;
  • 右內：padding-bottom:25px;
  • 下內：padding-right:50px;
  • 左內：padding-left:50px;

4、簡寫屬性：

  • 上右下左：padding:25px 50px 75px 100px;
  • 上、左右、下：padding:25px 50px 75px;
  • 上下、左右：padding:25px 50px;
  • 四邊：padding:25px;

分組和嵌套

dimension尺寸

1、height高度：

  • auto：預設。瀏覽器會計算出實際的高度。
  • length：使用 px、cm 等單位定義高度。
  • %：基於包含它的塊級對象的百分比高度，註意是原大小的百分比高度！！！
  • inherit：規定應該從父元素繼承height屬性的值。
  • 最大高度：max-height
  • 最小高度：min-height

2、width寬度：同上

  • max-width
  • min-width

3、行高：大多數瀏覽器的預設行高約為110%至120%

  • normal：預設。
  • number：設置數字，此數字會與當前的字體尺寸相乘來設置行間距，預設行高為“1”。
  • length：設置固定的行間距，預設行高約20 px。
  • %：基於當前字體尺寸的百分比行間距，預設行高約為110%至120%
  • inherit：規定應該從父元素繼承line-height 屬性的值。

display顯示

position定位

overflow

float浮動

對齊

組會選擇符

偽類

偽元素

導航欄

下拉菜單

1、

提示工具

圖片廊

圖像透明/不透明

圖像拼合技術

媒體類型

屬性選擇器

input表單元素

舉例：<form><input type="text" name="search" placeholder="搜索.."></form>
1、屬性選擇器：設置指定類型的輸入框

  • 選取文本輸入框：input[type=text]
  • 選擇密碼的輸入框：input[type=password]
  • 選擇數字的輸入框：input[type=number]

2、type=text輸入框：在input上加border

  • width輸入框寬度：
    • 疊加box-sizing: border-box;，即輸入框的寬度，而不是文字的寬度
  • padding輸入框內邊距：
    • 疊加box-sizing: border-box;，即文字開始的位置
  • border邊框：
    • border-style
    • border-color
    • border-radius
  • background-color背景顏色：
  • font-size文字大小：顯示文字和輸入文字
  • 無文字顏色選擇

6、:focus選擇器：設置輸入框的聚焦效果

  • outline: none;：忽略瀏覽器自帶的聚焦效果
  • 聚焦時改變邊框顏色：input[type=text]:focus{border: 3px solid #555;}
  • 0.5s改變顏色：input[type=text] {-webkit-transition: 0.5s; transition: 0.5s;}，疊加上面

7、type=textarea文本框：

  • 重置大小：
    禁止重置大小：resize: none;

8、type=select下拉菜單：

  • 舉例：<form><select id="country" name="country"><option value="au">O1</option><option value="ca">O2</option></select>
  • 在select上修改：
    • width寬度：菜單框的寬度
    • padding填充：內文字選項初始位置
    • border邊框：設置菜單框的樣式
    • background背景：菜單框的背景
  • 在form上修改：
    • width寬度：包裹菜單欄的一個框的寬度
    • padding填充：菜單欄在框的初始位置

9、'type=button'按鈕樣式：

  • background背景：
  • border邊框：
  • color字體顏色：
  • padding填充：字體居中，按鈕大小
  • margin邊緣：兩個元素間的間隔更大
  • cursor: pointer;改變游標形狀

計數器

網頁佈局

1、網頁包括：頭部區域、菜單導航區域、內容區域、底部區域。
image

2、頭部區域

!important

總結

實例

  1. https://www.runoob.com/cssref/pr-background-position.html ↩︎

  2. https://apis.bestapis.net/api/v1/client/836e9dc3ad0c5ae814860821ca270cfb ↩︎


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • 一文瞭解MySQL中的多版本併發控制
    最近在閱讀《認知覺醒》這本書，裡面有句話非常打動我：通過自己的語言，用最簡單的話把一件事情講清楚，最好讓外行人也能聽懂。希望藉助今天這篇文章，能用大白話說清楚這個相對比較底層和複雜的MVCC機制 ...
  • 大數據 + VR 全景技術重塑“二手車買車場景”
    二手車交易的核心問題在於車況信息不透明。中國二手車交易市場制度尚不完善，長期以來缺少行業公認的車輛估值標準和車況檢測標準，二手車商提供的估值和車況信息不夠透明。這導致用戶和車商交易雙方都陷入了迴圈困境：用戶對車商信任不足，購買意願低。二手車商缺少潛在客戶線索，為招攬客戶不惜採用虛假信息，使得市場環境... ...
  • 華為運動健康服務Health Kit 6.10.0版本新增功能速覽！
    華為運動健康服務（HUAWEI Health Kit）6.10.0 版本新增的能力有哪些？ 閱讀本文尋找答案，一起加入運動健康服務生態大家庭！ 一、 支持三方應用查詢用戶測量的連續血糖數據 符合申請Health Kit服務中開發者申請資質要求的企業開發者，可申請訪問用戶的心率、壓力、血糖等健康數據。 ...
  • 記錄-css實現交融文字效果
    這裡給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 CSS是有魔法的，我們今天來實現一個CSS的動畫效果，只需要幾行代碼就可以搞定。 第一步、我們要將一行文字從中間展開 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8 ...
  • 如何將微前端項目部署在同一臺伺服器同一個埠下
    本文旨在通過部署微前端項目的實踐過程中沉澱出一套部署方案，現就一些重點步驟、碰到的問題做了一些總結。 ...
  • css steps實現文本一個字一個字顯示
    大致思路： 使用相對定位的div覆蓋文本內容，並用animation控制寬度，位置。 換行步驟在外層div上控制高度即可。 css的steps與animation一起使用可以控制文字單個顯示，類似於文本輸入，不過顯示頻率是線性。 添加一些css變數控制步驟寬度、高度和時間等，便於vue中也通過組件的 ...
  • 全棧之前端 | 5.HTML表格列表標簽元素學習篇
    [ 點擊 👉 關註「 全棧工程師修煉指南」公眾號 ] 設為「⭐️ 星標」帶你從基礎入門 到 全棧實踐 再到 放棄學習！ 涉及 網路安全運維、應用開發、物聯網IOT、學習路徑 、個人感悟 等知識分享。 希望各位看友多多支持【關註、點贊、評論、收藏、投幣】，助力每一個夢想。 【WeiyiGeek Bl ...
  • 重試，讓程式更健壯
    任何通過網路與其它應用通訊地的程式，都應該有足夠的靈活性，來應對短暫的臨時性故障。因為這些故障很多時候是可以自恢復的。 例如，為了避免服務過載，很多應用會採取某些限流措施，在併發請求達到一定數量時，暫時性的拒絕新的請求加入。這種情況下，嘗試使用該應用的程式，一開始可能會被拒絕連接，但下一刻就好了。 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類