HTML和CSS學習

HTML學習

注釋

<!--  -->

組成

告訴瀏覽器我是html文件<!DOCTYPE html>         
<title>瀏覽器標簽</title>
<body>             <!---  其中是主要內容    --->
<p> 段落 </p>    
</body>
</html>   (結束點)

標題 段落

  1. **

    **開始標簽 **

    **結束標簽 也叫雙標簽 這里面是

  2. 一級標題標簽

    ； 還有

    這是二級標簽，相比一級字體變小了；一共有6級標簽

字體改變，有序，無序標簽的使用

<em> 強調斜體文字   </em> <br>
<u>下劃線文字</u><br>
<i>斜體文字</i><br>
<small>小文字</small><br>
<mark>高亮文字</mark><br>
<del>表示內容刪除文字</del><br>
<ins>下劃線文字</ins>


![image-20250904155404744](bi jii/image-20250904155404744.png)

有序列表

  1. 列表一
  2. 列表二
  3. 列表三

無序列表

  • 蘋果
  • 香蕉
  • 橙子

圖片

‘<!— img src= —>’

  • alt可以給圖片說明

空格 劃線換行

’
’

’

表格

  • td data數據
  • th header標題
  • row 行
<table>
<tr>
<th> 姓名</th>
<th> 年齡</th>
</tr>
<tr>
<td> 張三</td>
<td>李四</td>
</tr>
<tr>
<td>10</td>
<td>9</td></table>

ps:若想要其中表格有分割線，則在table后寫border=" "

表單

用于搜集不同類型的用戶輸入

input標簽

純文本:
<input type=text" name=firstname>性別選擇：（單選）
<input type="radio" name="sex"value="female" checked>
<input type="radio" name="sex"value="male"checked><br>密碼：
<input type="password" name="pwd">  <br>提交文件：
<input type="file"><br>提交按鈕：
<input type="submit">選擇顏色
<input type="color"><br>

<form action="#"><p><label>用戶名 <input type="text" placeholder="請輸入內容"></label></p><p><label>密碼 <input type="password" placeholder="請輸入密碼"></label></p><p>性別：<label><input type="radio" name="gender"> 男</label><label><input type="radio" name="gender"> 女</label><label><input type="radio" name="gender"> 其他</label></p><p>愛好：<label><input type="checkbox" name="hobby"> 唱</label><label><input type="checkbox" name="hobby"> 跳</label><label><input type="checkbox" name="hobby"> rap</label><label><input type="checkbox" name="hobby"> 籃球</label></p><p><input type="submit" value="提交"></p>
</form><!-- p標簽的使用可以讓每行間距更大 更美觀 --->
<!-- 被label包圍住的標簽只要點擊文字也可以選中框 -->
<!-- type是固定的  name value名字不是固定的

div標簽

  • 塊級元素
  • 一個個盒子 可以給頁面分塊
  • 單單的div是看不見的 要與css結合
<div class=a>
<h1>標題</h1>
<p>主要內容</p>
<p>主要內容</p>
</div>

span標簽

  • 行內元素 和div相像
  • 給段落中某段字某種樣式
  • 配合css使用
<h2>變<span style="color:blue">色</span>了</h2>

CSS3

html中引用css3

注釋

/*  */

優先級：外部CSS < '

1. 外部CSS
.html中
<head>    
<title>我的網站標簽</title>  <link rel="stylesheet" href="./css/css1.css">
</head>.css中
body{
background-color:lightblue'
}2.內部CSS
.html的head 和 body中間
<style>h1{background-color: lightblue}p{background-color: black;}
</style>3.行內CSS
<body><h1 style="color:blue;text-align:center;">This is a heading</h1>
<p style="color:red;">This is a paragraph.</p></body>

CSS選擇器

class類名

  • 可以有好幾個
<div class="my-box">
<h2>第一個標題</h2><p>第一個模塊</p><p>第二個模塊</p>
</div><hr>
<div class="my-box"><h2>第二個標題</h2><p>第三個模塊</p><p>第四個模塊</p>
</div>.my-box{
background-color:lightblue;
padding:10px;
border:1px solid #ccc;
}

id

  • 元素的 id 在頁面中是唯一的，因此 id 選擇器用于選擇一個唯一的元素
  • 一般給table , div之類的 命名
<div id="unique-box"><h2>第一個標題</h2><p>第一個模塊</p><p>第二個模塊</p>
</div>#unique-box{background-color: rgb(144, 166, 238);padding: 10px;
}

通用選擇器

*{
text-align:center;
color:blue;}

分組選擇器

h1 {text-align: center;color: red;
}h2 {text-align: center;color: red;
}p {text-align: center;color: red;
}

CSS顏色

背景

background-color:rgb(255, 99, 71);
<h1 style="background-color:DodgerBlue;">China</h1>

文本顏色

color:tomato;
h1 style="color:Tomato;">China</h1>

邊框顏色

border:2px solod Tomato
<h1 style="border:2px solid Tomato;">Hello World</h1>

<div id="potato">#potato {border: 2px solid #333;    /* 邊框 */padding: 5px;              /* 內邊距 */border-radius: 8px;        /* 圓角 */background-image: url("..\GauKIM4aAAMbLnh.jpeg");background-image: ;background-size: cover;    讓圖片鋪滿整個div，等比縮放background-repeat: no-repeat; /* 不重復平鋪 */background-position: center;  background-color: azure;
}

CSS字體

font-size: 24px;    /*文字大小*/
color: #ccc;       /*文字顏色*/
text-align: center;   /*默認left*/
letter-spacing:15px;   /*字間距 */
font-weight:bolid;   /*加粗*/

表格

<table id="table_css" border>#table_css{width: 300px;height: 300px;border-spacing: 5px;margin: 0 auto;   /* 讓表格整體在中央 */
}
#table_css th{text-align: center;  /*單元格中的文本在中央*/}
#table_css td{text-align: center;}/*給某一行設置顏色*/
#table_css tr:nth-child(1) { background-color: rgb(131, 14, 30); } /* 第一行 */
#table_css tr:nth-child(2) { background-color: lightgreen; } /* 第二行 */
#table_css tr:nth-child(3) { background-color: pink; } /* 第三行 *//*給某列data設置顏色，不給head 上色*/
#table_css td:nth-child(2) { background-color: lightgreen; } /* 第二行 */

邊框

高度和寬度

auto 瀏覽器默認高 寬
length 
%
initial 將高 寬設為默認值
inherit 從其父繼承div{height:200px;width: 50%;background-color: powerblue;}

邊框

樣式
border-style
border-radius:5px  //圓角邊框
border-top-style:dotted;  //上下左右單獨邊框
border-right-style: solid;
border-bottom-style:dotted;
border-left-style:solid;

外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳

寬度
border-width
border-width:215px 10px 4px 35px
//對應 上 右 下 左
border-width:medium/thin/thick
顏色
border-color
border-color: red blue green yellow
//對應 上紅 左藍 下綠 右紅色
簡寫
p{
border 5px solid red;
}或者單邊定義
p{
border-left:6px solid red
}

外邊距

p{
margin-top: 100px;
margin-bottom:100px;
margin-right: 150px;
margin-left: 80px;
}或者簡寫
margin: 25px 50px 75px 100px;
//上 右 下 左

內邊距

padding 
div{padding-top:50px;padding-right:30px;padding-bottom:50px;padding-left:80px;
}

浮動

像word中的圖片內嵌之類的

定位

一共五種

position staticrelativefixedabsolutesticky
  1. static

  • 靜態定位的元素不受 top、bottom、left 和 right 屬性的影響。

    .map{width: 400px;height: 400px;background-color: black;position:static;
}
  1. relative

  • position: relative; 的元素相對于其正常位置進行定位

    .map{width: 400px;height: 400px;background-color: black;position:relative;left:150px;top:0px;
}
  1. fixed

  • position: fixed; 的元素是相對于視口定位的，這意味著即使滾動頁面，它也始終位于同一位置

  • top、right、bottom 和 left 屬性用于定位此元素。

    <style>
.map{width: 400px;height: 400px;background-color: black;position:fixed;left:150px;top:0px;
}
</style>
  1. absolute

  • position: absolute; 的元素相對于最近的定位祖先元素進行定位

  • 如果絕對定位的元素沒有祖先，它將使用文檔主體（body），并隨頁面滾動一起移動

  • 跟隨元素的div要放在父元素的div里面

 .map{width: 400px;height: 200px;background-color: rgb(44, 246, 65);position:fixed;top:150px;left:15px;}.map2{width: 200px;height: 100px;background-color: rgb(0, 0, 0);position:absolute;left:15px;top:50px; <div class="map"><div class="map2"></div></div>

  1. sticky

  2. 重疊元素

    <div class="bg-box"><h1>這是透明度</h1>
</div>.bg-box {background-image: url("https://img-s-msn-com.akamaized.net/tenant/amp/entityid/AA1LMdmf.img?w=534&h=300&m=6");background-size: cover;   /* 讓圖片鋪滿 */background-position: center;width: 300px;height: 300px;
}后面這個方法不好 不推薦
img {position: absolute;left: 0px;top: 0px;z-index: -1;
}

    動畫

  • @keyframes
  • animation-name
  • animation-duration
  • animation-delay
  • animation-iteration-count
  • animation-direction
  • animation-timing-function
  • animation-fill-mode
  • animation

一個顏色塊逐漸變色效果

這整塊內容都在>

div {width: 100px;height: 100px;background-color: red; animation-name: example1; animation-duration: 4s;
}
@keyframes example1{from{background-color:black;}to {background-color: blue;}
}

顏色塊變色和滑動效果

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

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

相關文章

OpenTenBase vs MySQL vs Oracle，企業級應用數據庫實盤對比分析

OpenTenBase vs MySQL vs Oracle，企業級應用數據庫實盤對比分析

摘要 因為工作久了的緣故&#xff0c;接觸過不少數據庫。公司的管理系統用的MySQL&#xff0c;財務系統用的Oracle。隨著時代發展&#xff0c;國產開源數據庫已經在性能上能與這些國際知名頂尖數據庫品牌相媲美&#xff0c;其中OpenTenBase以其開放環境和優越性能脫穎而出&…
閱讀更多...
Oracle 備份與恢復常見的七大問題

Oracle 備份與恢復常見的七大問題

為了最大限度保障數據的安全性&#xff0c;同時能在不可預計災難的情況下保證數據的快速恢復&#xff0c;需要根據數據的類型和重要程度制定相應的備份和恢復方案。在這個過程中&#xff0c;DBA的職責就是要保證數據庫&#xff08;其它數據由其它崗位負責&#xff09;的高可用和…
閱讀更多...
StringBuilder類的數據結構和擴容方式解讀

StringBuilder類的數據結構和擴容方式解讀

目錄 StringBuilder是什么 核心特性&#xff1a; StringBuilder數據結構 1. 核心存儲結構&#xff08;基于父類 AbstractStringBuilder&#xff09; 2. 類定義與繼承關系 3. 數據結構的核心特點 StringBuilder數據結構的初始化方式 1. 無參構造&#xff1a;默認初始容量…
閱讀更多...
LangChain實戰（十七）：構建與PDF/PPT文檔對話的AI助手

LangChain實戰（十七）：構建與PDF/PPT文檔對話的AI助手

本文是《LangChain實戰課》系列的第十七篇，將專篇深入講解如何構建能夠與PDF和PPT文檔進行智能對話的AI助手。通過學習本文，您將掌握復雜格式文檔的解析技巧、文本與表格處理技術，以及實現精準問答的系統方法。 前言 在日常工作和學習中，PDF和PPT文檔是我們最常接觸的文檔…
閱讀更多...
魚眼相機模型

魚眼相機模型

魚眼相機模型 最近涉及魚眼相機模型、標定使用等&#xff0c;作為記錄&#xff0c;更新很久不曾更新的博客。 文章目錄魚眼相機模型1 相機成像2 魚眼模型3 畸變3.1 適用針孔和MEI3.2 Kannala-Brandt魚眼模型4 代碼實現1 相機成像 針孔相機&#xff1a;所有光線從一個孔&#xf…
閱讀更多...
大語言模型提示詞工程詳盡實戰指南

大語言模型提示詞工程詳盡實戰指南

引言&#xff1a;與大型語言模型&#xff08;LLM&#xff09;高效對話的藝術大型語言模型&#xff08;LLM&#xff09;——例如我們熟知的GPT系列、Claude、Llama等——在自然語言處理&#xff08;NLP&#xff09;領域展現了驚人的能力&#xff0c;能夠執行文本摘要、翻譯、代碼…
閱讀更多...
HTTP 請求體格式詳解

HTTP 請求體格式詳解

1. 概覽與概念 Content-Type&#xff1a;HTTP 請求/響應頭&#xff0c;表示消息體的媒體類型&#xff08;MIME type&#xff09;。服務端用它決定如何解析請求體。常見場景&#xff1a; 純結構化數據&#xff08;JSON&#xff09; → application/json表單 文件上傳 → multip…
閱讀更多...
事務設置和消息分發

事務設置和消息分發

事務 RabbitMQ是基于AMQP協議實現的&#xff0c;該協議實現了事務機制&#xff0c;因此RabbitMQ也支持事務機制. SpringAMQP也提供了對事務相關的操作&#xff0c;RabbitMQ事務允許開發者確保消息的發送和接收是原子性的&#xff0c;要么 全部成功&#xff0c;要么全部失敗.| 前…
閱讀更多...
Python 中 try / except / else / finally 異常處理詳解

Python 中 try / except / else / finally 異常處理詳解

1. 基本結構 try:# 可能會拋出異常的代碼 except SomeException as e:# 捕獲并處理異常 else:# 如果 try 中代碼沒有異常&#xff0c;就執行這里 finally:# 無論是否發生異常&#xff0c;最后都會執行這里2. 各部分的作用 try 用途&#xff1a;包含可能發生異常的代碼段。如果代…
閱讀更多...
冰火島 Tech 傳：Apple Foundation Models 心法解密（下集）

冰火島 Tech 傳：Apple Foundation Models 心法解密（下集）

引子 上集說到冰火島冰屋內，謝遜、張翠山、殷素素三人親見 “指令（Instructions）” 如何讓 AI 脫胎換骨，從木訥報地名的 “愣頭青”，變身為文采斐然的 “旅行作家”。 正當素素驚嘆這 AI 武學的奇妙時，謝遜卻突然神色一凜，指著手腕上用冰屑刻的 “4096” 字樣道：“這等…
閱讀更多...
Qt信號與槽機制全面解析

Qt信號與槽機制全面解析

? 1. 核心概念信號與槽是Qt獨創的一種對象間通信機制&#xff0c;它使得一個對象的狀態變化或事件發生能夠自動通知其他對象作出響應&#xff0c;從而實現高度解耦的代碼設計。1.1 信號&#xff08;Signals&#xff09;定義&#xff1a;信號是由對象在特定事件發生時發出&…
閱讀更多...
2025年COR SCI2區，基于近似細胞分解的能源高效無人機路徑規劃問題用于地質災害監測，深度解析+性能實測

2025年COR SCI2區，基于近似細胞分解的能源高效無人機路徑規劃問題用于地質災害監測，深度解析+性能實測

目錄1.摘要2.問題描述與數學模型3.能源網格混合元啟發式算法4.結果展示5.參考文獻6.代碼獲取7.算法輔導應用定制讀者交流1.摘要 本文提出了一種能源高效的無人機路徑規劃方法&#xff08;EURP&#xff09;用于監測分散的地質災害易發區域&#xff0c;通過建立無人機飛行模式的…
閱讀更多...
LangChain關于提示詞的幾種寫法

LangChain關于提示詞的幾種寫法

上文中 <---->（可點擊移步查閱），我們已經了解到LangChain如何編寫調用大模型的一個基本框架， 在編寫完這個基本框架后，就要與大模型進行交互了，這時候，就需要我們編寫提示詞了， 那么以下，就會介紹提示詞的幾種編寫方式 1 可攜帶變量的提示詞 1.1 PromptTempla…
閱讀更多...
CyberPoC 是一個現代化的網絡安全練習和競賽平臺，支持容器化部署的安全挑戰，為用戶提供實踐網絡安全技能的環境。

CyberPoC 是一個現代化的網絡安全練習和競賽平臺，支持容器化部署的安全挑戰，為用戶提供實踐網絡安全技能的環境。

工具介紹 CyberPoC 是一個現代化的網絡安全練習和競賽平臺&#xff0c;支持容器化部署的安全挑戰&#xff0c;為用戶提供實踐網絡安全技能的環境。 &#x1f680; 快速開始 使用 Docker Compose (推薦) 克隆項目 git clone https://github.com/dushixiang/cyberpoc.gitcd cy…
閱讀更多...
【單片機day03】

【單片機day03】

UART串口通用異步收發器&#xff0c;2個串口(1個串口被用于ISP下載程序&#xff0c;1個串口被用于和主機之間的通信)全雙工&#xff08;兩根線TX、RX&#xff09;、串行、異步通信方式&#xff1a;單工&#xff1a;發送方和接收方是固定的&#xff0c;數據只能從發送方 發給 …
閱讀更多...
react16到react19更新及底層實現是什么以及區別

react16到react19更新及底層實現是什么以及區別

好問題 &#x1f44d;。React 16 → 19 的更新跨度其實涵蓋了 React 的幾個“時代級”的演進&#xff1a;從 Fiber 架構 的重寫、到 并發特性 的引入&#xff0c;再到 React Server Components 和 現代語法支持。我幫你梳理下主要更新點和底層實現的區別&#xff0c;方便你系統…
閱讀更多...
【分享】基于百度腦圖，并使用Vue二次開發的用例腦圖編輯器組件

【分享】基于百度腦圖，并使用Vue二次開發的用例腦圖編輯器組件

偶然間發現了這個項目&#xff0c;分享出來。 【分享】基于百度腦圖&#xff0c;并使用Vue二次開發的用例腦圖編輯器組件1 項目地址2 項目簡介3 項目部署3.1 安裝node和npm3.2 項目下載3.3 修改npm鏡像源3.4 部署4 項目中使用1 項目地址 基于百度腦圖&#xff0c;并使用Vue二次…
閱讀更多...
Kotlin中抽象類和開放類

Kotlin中抽象類和開放類

抽象類 (Abstract Class) 定義和特點 抽象類使用 abstract 關鍵字聲明&#xff0c;是一種不能被直接實例化的特殊類&#xff0c;主要用于被其他類繼承。 abstract class Base {open fun f() {} }abstract class Derived : Base() {override abstract fun f() // 抽象成員在類中…
閱讀更多...
TensorFlow深度學習實戰（37）——深度學習的數學原理

TensorFlow深度學習實戰（37）——深度學習的數學原理

TensorFlow深度學習實戰&#xff08;37&#xff09;——深度學習的數學原理0. 前言1. 反向傳播歷史2. 微積分相關概念2.1 向量2.2 導數和梯度2.3 梯度下降2.4 鏈式法則2.5 常用求導公式2.6 矩陣運算3. 激活函數4. 反向傳播4.1 前向計算4.2 反向傳播5. 交叉熵及其導數6. 批量梯度…
閱讀更多...
1.1 汽車運行滾動阻力

1.1 汽車運行滾動阻力

汽車運行阻力由4部分構成&#xff1a;滾動阻力、空氣阻力、坡度阻力、加速阻力。 1).汽車在水平道路上等速行駛時&#xff0c;必須克服來自地面的滾動阻力和來自空氣的空氣阻力。 2). 當汽車在坡道上上坡行駛時&#xff0c;還必須克服重力沿坡道的分力&#xff0c;稱為坡度阻…
閱讀更多...
最新文章

Copyright @ 2022~2023