HTML CSS整理筆記

来源:https://www.cnblogs.com/xsd1/archive/2019/11/21/11906643.html
-Advertisement-
Play Games

點擊鏈接後退頁面: <a href="javascript:history.go(-1)">回到上一個網頁</a> ——修改placeholder提示的樣式:1.除IE外通用寫法 類名或標簽名::placeholder {color: red;}2.加相容首碼寫法 css超出一行顯示省略號:給定寬度 ...


點擊鏈接後退頁面: <a href="javascript:history.go(-1)">回到上一個網頁</a>

——修改placeholder提示的樣式:
1.除IE外通用寫法
類名或標簽名::placeholder {color: red;}
2.加相容首碼寫法

css超出一行顯示省略號:
給定寬度(width:100px)、
超出隱藏(overflow:hidden)、
強制在同一行顯示(white-space: nowrap)、
省略號(text-overflow:ellipsis)

——常見字體單位——
1.em
移動端常用的字體尺寸單位,相當於“倍”,比如設置當前的div的字體大小為1.5em,則當前的div的字體大小為:當前div繼承的字體大小*1.5。
但當div進行嵌套時,em始終按當前div繼承的字體大小來縮放。

2.rem
r是root的意思,即相對於根節點html的font-size進行縮放,當有嵌套關係時,嵌套關係的元素的字體大小始終按照根節點的字體大小進行縮放。

3.vh
vh就是當前屏幕可見高度的1%,即 height:100vh == height:100%;
它的好處是當元素沒有內容時候,設置height:100%該元素不會被撐開,
但設置height:100vh,該元素會被撐開屏幕高度一致。

4.vw
viewpoint width,視窗寬度,1vw = 視窗寬度的1%。
vw就是當前屏幕寬度的1%,
當設置width:100%,被設置元素的寬度是按照父元素的寬度來設置,
但100vw是相對於屏幕可見寬度來設置,所以會出現50vw 比50%大的情況。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
從這裡往下是分類整理


——1.HTML5基礎——
5.在網頁中,HTML決定結構和內容,CSS設定網頁的表現樣式,JavaScript控制網頁的行為。
6.<!DOCTYPE html>必須位於HTML文檔第一行。
7.<meta>標簽:用於方便瀏覽器解析或搜索引擎搜索,一般放置於<head>中,用"名稱/值"方式:
(1)表示文檔內容類型、字元串編碼信息 如:<meta charset="UTF-8">
(2)為搜索引擎定義關鍵詞:
<meta name="keywords" content="HTML,CSS,XML,XHTML,JavaScript">
(3)為網頁定義描述內容:
<meta name="description" content="Free Web tutorials on HTML and CSS">
(4)定義網頁作者:
<meta name="author" content="Hege Refsnes">
(5)每30秒中刷新當前頁面:
<meta http-equiv="refresh" content="30">

8.字體樣式標簽:<strong>字體變粗、<em>字體傾斜
9.註釋 <!--內容-->
10.特殊符號:空格&nbsp; >大於號&gt; <小於號&lt; "引號&quot; 版權符號&copy;

11.常用圖片格式:JPG、GIF、PNG、BMP
12.圖片標簽,必須要有src和alt屬性:
<img src="圖片地址" alt="圖片的替代文字" title="滑鼠懸停提示文字" width="圖片寬度" height="圖片高度" />

13.超鏈接標簽(target指定在哪個視窗打開 值有_self自身視窗、_blank新建視窗)
<a href="鏈接地址" target="目標打開視窗位置">附連接的文本或圖像</a>
14.鏈接地址
(1)絕對路徑(指向目標地址的完整描述 多指向本站點外的文件
如<a href="http://www.baidu.com/index.html">百度</a>)、
(2)相對路徑(一般指向本站點內的文件,如<a href="login/login.html">登陸<a>)
(3)相對路徑中"../"表示當前目錄的上級目錄,"../../"表示上上級目錄
15.超鏈接的應用場合:
(1)頁面間鏈接:如<a href="login.html target="_blank">為您跳轉到登錄頁</a>
(2)錨鏈接:
先在目標位置B設置標記如:<a name="new">這裡是目標位置</a>,
然後在A位置設置鏈接路徑href屬性值為"#標記名"如:<a href="#marker"當前位置A</a>
(3)功能性鏈接:單擊時啟動本機自帶的應用程式如QQ、電子郵箱等
如電子郵件鏈接:"mailto:電子郵件地址"

16.元素分類
(1)塊元素:如<p><h1><div>無論內容有多少,該元素都獨占一行(一塊)。
塊狀元素特點:如果沒有設置自身寬度,則顯示為父容器的100%。
(2)行內元素:如<strong><a> 顯示寬度由自己的內容決定,其他元素可以排在它後面。

16.元素類型轉換:
(1)塊狀元素轉為內聯元素:display: inline;
(2)內聯元素轉為塊狀元素:display: block;
(3)把元素設為內聯塊狀元素: display: inline-block;
(就是同時具備內聯元素、塊狀元素特點,如img、input)

——2 列表、表格、媒體元素——
17.三種列表:
(1)有序列表<ol><li>
(2)無序列表<ul><li> ul中只能嵌套li,而li可以嵌套任意標簽。
(3)定義列表<dl><dt><dd> 是標題及列表項的結合。
18.表格基本結構:單元格、行、列
(1)<table><tr><th><td>
(2)HTML5中已廢除table的border屬性,用css控制邊框寬度。
(3)跨列(橫跨):<td colspan="所跨的列數">內容</td>
跨行(豎跨):<td rowspan="所跨行數">內容</td>,兩者都要刪除被合併的其他單元格。
(4)表格特點:同行單元格高度一致且水平對齊,同列單元格寬度一致且垂直對齊。

19.視頻元素:
(1)controls屬性提供播放暫停和音量控制項、autoplay屬性自動播放、loop屬性迴圈播放
<video src="視頻路徑" controls="controls">你的瀏覽器不支持video標簽</video>
(2)source元素鏈接不同的視頻文件,瀏覽器會自動選擇第一個可識別的格式:
<video controls>
<source src="video/video.webm" />
<source src="video/video.mp4" />你的瀏覽器不支持video標簽
<video>
20.音頻元素:使用語法和視頻元素一樣,只要把video換成audio即可。

21.HTML5的結構元素(先劃分結構再寫內容):
header(頭部)、footer(腳部)、
section(獨立區域)、article(獨立文章內容)、
aside(相關內容或應用,常用於側邊欄)、nav(導航類輔助內容)

22.<iframe>框架:方便在頁面中引用站外的頁面內容。
<iframe name="此框架的標識名" src="引用的頁面地址"></iframe>
23.<iframe>和錨鏈接的結合:使錨鏈接的內容在iframe框架中打開
<iframe name="mainFrame" src="框架引用的頁面地址" />
<a href="鏈接路徑" target="mainFrame">點擊在框架中打開</a>

——3 表單——
24.表單標簽form:
<form method="post" action="login.html" enctype="text/plain">
表單內容
</form>
(1)action="url"屬性意為把表單提交到某個頁面,method=get|post意為向伺服器發送數據的方式。
(2)提交方法:get提交,表單數據會在地址欄url中顯示;而post提交不會顯示,所以post提交更安全。
(3)enctype="text/plain"指enctype 屬性規定在發送到伺服器之前應該如何對錶單數據進行編碼。text/plain 空格轉換為加號+,但不對特殊字元編碼。

24.表單元素:
(1)表單元素<input>標簽的屬性:
type(預設text,其他password,email,checkbox,radio,button,submit,reset,file,image,url,hidden,number,range,search等)、name、value(可選,該元素的初始值)、size(該元素的初始寬度)、maxlength(可輸入的最大字元數)、checked(按鈕被選中)
(2)列表框<select><option>標簽:
<select>中至少包含一個<option>。在<option>有多行選項需滾動查看時,size屬性設置可提示看到的行數,selected屬性預設選中該列表項。
(3)按鈕:button普通(要和事件如onclick關聯使用),submit(提交表單到action指定的url並傳遞表單數據),reset重置。要求美觀可使用圖片按鈕如<input type="image" src="圖片路徑"/>
(4)多行文本域:不能用value屬性賦初始值
<textarea name="標識名" cols="顯示的列數" rows="顯示的行數">
自我評價
</textarea>
(5)數字number:限制輸入的數據為數字,設定最大值最小值、合法的數據間隔step或預設值等
<input type="number" name="num" min="0" max="100" step="10"/>
(6)滑塊range:作用和數字number一樣,只是外觀顯示為用滑動條選擇數值
<input type="range" name="range" min="0" max="100" step="10"/>
(7)search搜索框:在任意頁面中用於輸入搜索關鍵詞的文本框
<input type="search" name="sousuo" />
(8)文件域:多用於文件上傳
<input type="file" name="files"/>
<input type="submit" name="upfiles" value="上傳"/>
(9)當表單數據包含普通數據、文件數據等多部分內容時,要設置表單的enctype編碼屬性為 multipart/form-data,表示把表單數據分為多部分提交。
(10)表單隱藏域hidden:數據不會頁面中顯示,但會隨表單一同提交。
<input type="hidden" name="userid" value="20"/>
(11)表單元素 只讀屬性readonly、禁用disabled
(12)W3CHTML5標準中,規定對布爾類型的屬性,屬性值可以省略。
(13)表單元素的標註label:當滑鼠單擊標註的文本時,瀏覽器會自動對焦關聯的表單元素,for屬性規定label與哪個表單元素綁定。name和id屬性必需。
<label for="female">女</label>
<input type="radio" name="sex" id="female" />

24.HTML5表單新標簽
<form> 供用戶輸入的表單
<input> 輸入域
<textarea> 文本域 (多行輸入)
<label> 定義 <input> 元素的標簽,一般為輸入標題
<fieldset> 定義一組相關的表單元素,並使用外框包含起來
<legend> 定義 <fieldset> 元素的標題
<select> 下拉選項列表
<optgroup> 選項組
<option> 下拉列表中的選項
<button> 點擊按鈕
<datalist> 指定一個預先定義的輸入控制項選項列表
<keygen> 定義了表單的密鑰對生成器欄位
<output> 計算結果

25.表單驗證
(1)好處:減輕伺服器的壓力;保證數據的可行性和安全性。
(2)placeholder:為文本框提示用戶輸入
<input type="text" name="name" placeholder="請輸入你的姓名"/>
(3)required:規定文本框不能為空
<input type="email" name="email" required/>
(4)pattern:輸入的內容必須符合正則表達式自定義的規則
<input type="text" name="tel" required pattern="^1[35]\d{9}"/>規定以13、15開頭的11位數字

——4 CSS3基礎——
26.CSS:Cascading Style Sheet層疊樣式表,又稱風格樣式表Style Sheet,用於設計網頁風格。
27.CSS3的基本語法結構:
(1)CSS中註釋為 /*內容*/
(2)CSS規則由選擇器、聲明組成。
(3)聲明必須放在大括弧{}中,聲明可以是一或多條。
(4)每條聲明由一個屬性和值組成,屬性和值用冒號:分開,每條語句以分號;結尾如
<style type="text/css">
h1{
font-size : 12px;
color : red;
}
</style>

28.在HTML中引入CSS樣式的方式:
(1)行內樣式:直接在標簽中用style屬性設置CSS樣式。
<p style="font-size:10px;">字體大小</p>
(2)內部樣式表:把css代碼寫在<head>的<style>中,規範化應寫為<style type="text/css">
(3)外部樣式表:文件擴展名為.css 在外部樣式表中可直接寫樣式代碼,不需要<style>標簽。
a.鏈接式引用外部樣式表(常用):
<head>
<link href="外部樣式表路徑" rel="stylesheet" type="text/css"/>
</head>
b.導入式引用外部樣式表:
<head>
<style>
@import url("外部樣式表路徑");
</style>
</head>
29.樣式優先順序:"就近原則",行內樣式>內部樣式表>外部樣式表
當有很多樣式時,用 !important 可以為某一個樣式覆蓋掉其他所有樣式。
如 #textcolor{ clor:pink !important;}

30.CSS選擇器命名規範:駝峰命名法,用語義化單詞命名且不能和ID選擇器同名.
31.CSS3的基本選擇器
(1)標簽選擇器:以標簽名作選擇器的名稱如 h1{color:red;}
(2)類選擇器:選擇器名可自定義如 .red{color:red;}同時要設置<標簽 class="red">內容</標簽>
(3)ID選擇器:選擇器名可自定義如 #red{color:red;}同時要設置<標簽 id="red">內容</標簽>,但同一個id屬性的選擇器在頁面中只能用一次。

32.基本選擇器的優先順序:ID選擇器>類選擇器>標簽選擇器
31.CSS3的高級選擇器
1.層次選擇器:
(1)後代選擇器A B{ }:中間用空格隔開,只要是A的後代元素都會被選中。
(2)子選擇器A>B{ }:只能選擇A的子元素。
(3)相鄰兄弟選擇器A+B{ }:只用於A後面一個同級元素
(4)通用兄弟選擇器A~B{ }:用於A後面所有的同級元素

2.結構偽類選擇器:根據文檔對象模型DOM的節點(元素級別)來操作。
(1)B:first-child 作為父元素的第一個子元素B,作用和(3)相似
(2)B:last-child 作為父元素的最後一個子元素B
(3)A B:nth-child(n) 在父級中查第n個子元素是不是B,不分類型
(4)B:first-of-type 選擇父元素內B類型的第一個元素B
(5)B:last-of-type 選擇父元素內B類型的最後一個元素B
(6)A B:nth-of-type(n) 在父級里先是不是B類型,再看位置n

3.屬性選擇器:
(1)A[arrt] 選擇包含屬性arrt的A標簽(也可寫多個屬性,但要同時存在)
(2)A[arrt = val] 選擇包含屬性arrt,且屬性值=val(區分大小寫)的A標簽
(3)A[arrt ^= val] 選擇包含屬性arrt,且屬性值以val開頭的任意字元串
(4)A[arrt $= val] 選擇包含屬性arrt,且屬性值以val結尾的任意字元串
(5)A[arrt *= val] 選擇包含屬性arrt,且屬性值包含val字元串的A標簽

——5 CSS3美化網頁——
32.CSS3設置文本樣式:
(1)<span>標簽:用來設置行內元素(或幾個文字)的樣式。
(2)字體樣式:
font-size:常用單位px
font-family:若同時設中英文字體,英文字體要設置在中文字體前面
font-style:normal標準、italic斜體、oblique傾斜
font-variant:small-caps; 字體設置為新型的大寫字母,所有小寫字母都轉換為大寫。
font-weight:normal標準、bold粗、bolder更粗、lighter細、100-900數字越大越粗
font:一次設置字體所有屬性,順序為"字體風格-粗細-大小-類型"
如 font:italic bold 36px "宋體";

(3)用font簡寫方式至少要指定 font-size和 font-family 屬性,其他的屬性(如font-weight、font-style、font-variant、line-height)如未指定將使用預設值。縮寫時 font-size 與 line-height中間要加"/"斜扛如 "12px/1.5em"

32.Text-transform:控制文本的大小寫:
none 預設,定義既有小寫字母也有大寫字母的標準文本(原文)
capitalize 每個單詞以大寫字母開頭
uppercase 全部為大寫字母
lowercase 全部小寫字母
inherit 從父元素繼承text-transform屬性的值。

32.direction屬性:規定文本的方向/書寫方向。
ltr 文本方向從左到右
rtl 方向從右到左
inherit 繼承父元素direction屬性的值。
32.文字排版
(1)適用大多數瀏覽器:
從左向右 writing-mode: vertical-lr;
從右向左 writing-mode: vertical-rl;
(2)只適用IE瀏覽器:
從左向右 writing-mode: tb-lr;
從右向左 writing-mode: tb-rl

33.排版網頁文本
(1)color文本顏色:
RGB:如color:#FF0000; 另一種方法rgb(r,g,b)其中三個參數取整0~255
RGBA:在RGB基礎上加控制alpha透明度的參數,取值0~1,0表示完全透明
(2)text-align水平對齊:
left左(預設)、center中間、right右、justify兩端對齊
(3)text-indent首行縮進:2em或2px 縮進兩個字元
(4)text-height文本行高: 單位px或 按倍數(行高是字體大小的倍數)
(5)text-decoration文本裝飾:
none預設無、underline下劃線、overline上劃線、line-through刪除線

(2)vertical-align垂直對齊:只能作用於<table>表格單元格的對象:
top頂、middle居中、bottom底

(4)text-shadow文本陰影:
語法"text-shadow:陰影顏色 x軸位移(x-offset) y軸位移(y-offset) 模糊半徑(blur-radius);"
如text-shadow: blue 10px 10ox 2px;
(5)查詢瀏覽器是否支持HTML5及CSS3屬性的網址www.caniuse.com

33.CSS3設置超鏈接樣式:
偽類:根據標簽處於某種行為或狀態來修飾超鏈接樣式。其他標簽如p可以使用hover
和active。
語法"標簽名:偽類名{聲明;}"
(1)a:link 未訪問前的超鏈接
(2)a:visited 訪問過後
(3)a:hover 滑鼠移到鏈接上
(4)a:link 滑鼠點擊未釋放
(5)設置偽類的順序:a:link - a:visited - a:hover - a:active
(6)雖有四種樣式,但實際開發中只設置<a>標簽選擇器樣式、滑鼠懸浮鏈接樣式

34.CSS3設置列表樣式
(1)list-style-type:列表項標記類型
none無符號、decimal數字、disc實心圓(預設)、circle空心圓、square實心正方形
(2)list-style-image:用圖像做列表項標記
(3)list-style-position:設置列表項標記的位置
(4)list-style:一次設置列表的所有屬性 (屬性值為none時說明列表無樣式)
順序為 list-style-type + list-style-position + list-style-image

35.<div>標簽:用於網頁佈局,把HTML文檔分成獨立不同的部分。
36.CSS3設置背景樣式:
(1)background-color:背景色不能繼承,其預設值是透明transparent
(2)background-image:url(圖片路徑)、none(不顯示背景圖像)
(3)background-repeat:背景圖像重覆平鋪
repeat(沿水平和垂直方向)、no-repeat(不平鋪,只顯示一次)、
repeat-x(只沿水平方向)、repeat-y(只沿垂直方向)、

(4)background-position:背景圖的位置(X水平Y垂直方向的偏移量,如果只有一個方向關鍵字,則預設另一個關鍵字為center)
1.Xpos Ypos:如 0px 0px:預設無偏移,從左上角出現
30px 40px:正向偏移,圖像向右和向下出現
-50px -60px:反向偏移,圖像向左和向上出現
2.X% Y%:如30% 50%(水平方向偏移30%,垂直方向居中)
3.X水平關鍵詞(left,center,right)、Y垂直關鍵詞(top,center,bottom)

(5)background:一次設置背景的所有屬性
(6)background-size背景圖片尺寸:
auto(保持圖片原尺寸,不易失真)、cover(放大填滿容器標簽)、
百分比percentage、contain(按照圖片本身的寬高比例適應定義背景的區域)

37.gradient線性漸變:顏色沿著一條直線方向過渡
(1)常規語法:" linear-gradient(position, color1, color2,...)"
(2)瀏覽器相容語法:" -相容首碼-linear-gradient(position,color1,color2,...)"
(3)漸變的直線方向:
to left 從右向左、to top left 向左上方、to bottom left 向左下方、
to right 從左向右、to top right向右上方、to bottomo right向右下方、
to bottom從上向下、to top 從下向上、
38.CSS3徑向漸變radial-gradient:圓形漸變,顏色從一個起點朝所有方向混合,語法和線性漸變相似。

———6 盒子模型———
39.盒子模型的組成:
content網頁內容、border邊框、padding內邊距、margin外邊距
(1)邊框border:
border-color 邊框顏色:如border-color:#369 #000 #111 #F00;按“上右下左順時針”設置
border-width 邊框粗細:如細thin、中等medium、粗的thick
border-style 邊框樣式:常用none無邊框、dotted點線邊框、dashed虛線邊框、solid實線邊框
border 簡寫:如下邊框border-bottom:9px red dashed;四條邊框border:9px blue solid;
(2)margin外邊距:盒子邊框以外和其他盒子間的距離
margin-top:上外邊距、margin-bottom:下外邊距
margin-left:左外邊距、margin-right:右外邊距
margin:簡寫"上右下左"
auto:設置盒子在它的父容器里居中顯示。如margin:0px auto;讓整個盒子居中。
如果將元素的 margin設為負值,則元素會變大。
(塊元素可以把左右頁邊距設置為"自動"中心對齊。margin:auto;但前提寬度不能是100%)

註意:很多標簽都有自身預設的外邊距,所以一般用並集選擇器統一設置這些標簽的外邊距為0px,這樣不會產生不必要的空隙。
如清除body和h2自帶的外邊距 body,h2{margin:0px;}

(3)padding內邊距:
padding-left、padding-right、padding-top、padding-bottom、
padding"上右下左"

40.盒子模型的尺寸:
增加邊框、內邊距、外邊距後不會影響內容區域的尺寸,但會增加盒子模型的總尺寸。
(1)內盒總尺寸 = border(上下/左右)+padding(上下/左右)+內容寬/高度
(2)整個盒子的寬度 = 內容寬度+左右padding+左右邊框border+左右margin

41.box-sizing拯救佈局
(語法)box-sizing:content-box、border-box、inherit
(1)content-box:盒子的寬度或高度=border+padding+(margin)+width/height
(2)border-box:盒子的寬或高度等於元素內容的寬或高度
(即 該內容寬/高度=盒子寬/高度-border-padding )
(3)inherit:使元素繼承父元素的盒子模型模式。

42.border-radius圓角邊框:語法和邊框相似,只是四個邊框帶圓角
(語法)border-radius:length{1~4個數字};
(1)用border-radius製作特殊圖形
圓形:元素的寬度和高度必須相同。圓角半徑為元素寬度的一半,或直接設圓角半徑為50%
半圓形:元素的高度是寬度的2倍,且圓角半徑為元素的寬度值。
扇形:即製作四分之一圓形。"三同"元素寬度、高度、圓角半徑 "一不同"

43.盒子陰影:和文本陰影相似
(語法)box-shadow:inset x-offset y-offset blur-radius color;
inset:內部陰影,可選。
x-offset:X軸水平位移,正值在右,負值在左。
y-offset:Y軸垂直位移,正值在下,負值在上。
blur-radius:模糊半徑可選,只能>=0 值越大陰影向外面積越大,邊緣越模糊。

——7 浮動——
44.標準文檔流:元素根據塊元素或行內元素的特性從上到下,從左到右的方式自然排列。
45.display屬性:用於指定標簽的顯示方式
block:塊元素的預設值,該元素前後自帶換行符
inline:行內元素的預設值,元素會顯示為行內元素
inline-block:行內塊元素,兼具行內元素和塊元素的特性
none:元素不會顯示

46.Float:指定網頁元素向哪個方向浮動
left左、right右、none預設無(元素不浮動 顯示在其文本出現的位置)
元素的水平方向浮動,意味著元素只能左右移動而不能上下移動。
一個浮動元素會儘量向左或向右移動,直到它的外邊緣碰到包含框或另一個浮動框的邊框為止。
浮動元素之後的元素將圍繞它。
浮動元素之前的元素將不會受到影響。
如果是右浮動,後面的文本流將環繞在它左邊:

47.clear清除浮動:當子元素全部浮動了,父級將包不住子元素會造成邊框塌陷,所以要清除浮動元素對其他元素的影響。
48.clear屬性:規定元素的哪一側不允許其他浮動元素。
left(左側不允許浮動元素)、right(右側不允許)、
both(左右都不允許,常用於文本在圖片下方顯示)、
none(允許浮動元素出現在兩側)

49.解決父級邊框塌陷
(1)浮動元素後加空的div,該div樣式要設置clear:both;margin:0px;padding:0px;
(2)設置父元素固定高度把邊框撐開。
(3)父級添加overflow屬性:設置外層盒子的overflow:hidden。但此方法不能用於有下拉列表框的場景。
(4)父級添加偽類after,推薦。

50.Overflow屬性:溢出處理,也可用於擴展盒子高度。
1) visible 預設溢出內容可見,顯示在盒子外面
2) hidden 多出來的內容被隱藏且沒有滾動條
3) scroll 有垂直水平2條滾動條,可查看多餘內容
4) auto 如果內容溢出,自動顯示滾動條(只有垂直條)查看
5) inherit 繼承父特性

————8 定位網頁元素————
51.Position屬性:指定盒子的位置,相對它父級的位置或它自身應該在的位置。
(1)static 預設無定位,元素按照標準文檔佈局。
(2)relative相對定位
a.特性:
1.以標準文檔流排版為基礎,相當於它在原來位置偏移指定的距離。
2.元素位置偏移後,仍會保留原位置。
3.層級提高,可以遮蓋標準文檔流元素和浮動元素。
b.使用場景:
相對定位可以不設偏移量,讓後面的絕對定位以它為祖先元素作基准定位。
c.語法 position:relative,指定偏移量時:水平left(正值向右移)、right(正值向左),垂直top(正值向下)、bottom(正值向上)。如
div{
position: relative;
top:-20px;
left:20px;
}
(3)absolute絕對定位
a.特性:
1.以已定位的祖先元素作基准定位,如果沒有定位的祖先元素,則以瀏覽器視窗為基准定位。
2.元素位置偏移後,不保留原位置(其他元素可以用它原來的空位)
3.層級提高,可以遮蓋標準文檔流元素和浮動元素。
4.設置絕對定位的元素脫離文檔流,對其他盒子的定位無影響
b.使用場景:下拉菜單、焦點圖輪播、彈出數字氣泡、特別花邊等。

(4)fixed固定定位
a.特性:直接以瀏覽器視窗為基准定位,偏移位置不受視窗滾動條滾動的影響。
b.使用場景:視窗邊緣的固定廣告、返回頂部圖標、邊緣固定導航欄等。

52.z-index屬性:設置定位元素的堆疊順序。預設值0,值大的層位於值小層的上方。
(1)網頁中的元素都含有兩個堆疊層級,一個是未設置絕對定位時所處的環境,此時z-index是0;另一個是設置絕對定位時所處的堆疊環境,此時層的位置由z-index的值確定。

53.設置元素透明度的方法(通常兩種方法搜設置以適應所有瀏覽器相容)
(1)opacity:x x值為0~1,值越小越透明
(2)filter:alpha(opacity=x) x值為0~100,值越小越透明

——9 CSS3做網頁動畫——
54.transform變形:
指效果的集合,如平移、旋轉、縮放、傾斜效果。
語法 transform:[transform-function]*;
其中transform-function是變形函數,如要設置多個,則中間以空格分開。在用2D變形時要加瀏覽器相容性首碼。

常用2D變形函數如下:
(1)translate(tx,ty):
平移函數,將元素從原位置(基於X,Y坐標)移動到指定位置上。
tx表示X軸(橫坐標)上移動的向量長度,正值向右,負值向左。
ty表示Y軸(縱坐標)上移動的向量長度,正值向下,負值向上。

(2)scale(sx,sy):
縮放函數,定義寬高度(元素尺寸)的縮放比例,預設值1。0~0.99縮小,大於1放大。
sx表示寬度即橫坐標方向的縮放量。
sy表示高度即縱坐標方向的縮放量。

(3)rotate(a);
旋轉函數,只取一個值為度數值,單位deg表示角度°
正值順時針轉,負值逆時針轉。
rotate函數只旋轉,不改變元素形狀。

(4)skew(ax,ay):
傾斜函數,取值為度數值,單位deg
ax表示水平方向即X軸的傾斜角度。
ay表示垂直方向即Y軸的傾斜角度。
55.3D變形函數:translate3d()平移函數、scale3d()縮放函數、rotate3d()旋轉函數

56.transition過渡:
指動畫轉換的過程,如漸現、漸弱、動畫快慢等。
通過指定屬性的初始狀態、結束狀態,在兩個狀態間通過平滑過渡的方式實現動畫。
語法:[transition-property transition-duration
transition-timing-function transition-delay]*
(速記法)transition: 過渡屬性 過渡用時 過渡的動畫函數 過渡的延遲時間

主要包括四個屬性值:
(1)transition-property:
過渡屬性,設置過渡或動態模擬的CSS屬性
(2)transition-duration:
過渡用時,從舊屬性到新屬性的用時,單位為s
(3)transition-timing-function:
指定過渡函數、過渡速度,有以下方式:
ease 速度由快到慢,逐漸變慢(預設)
liner 勻速
ease-in 越來越快(漸顯)
ease-out 越來越慢(漸隱)
ease-in-out 先加速再減速(漸顯漸隱)
(4)transition-delay:設置過渡是否延遲時間執行。
註意:transition-duration指完成過渡需要的時間;transition-delay指過渡在什麼時間之後觸發。

57.總結如何用transition實現過渡動畫:
(1)在預設樣式中聲明元素的初始狀態。
(2)聲明過渡元素之中狀態樣式,如懸浮狀態
(3)在預設樣式中通過添加過渡函數,添加不同的樣式。

58.過渡的觸發機制:
(1)偽類觸發: :hover、 :active、 :focus、 :checked等
(2)媒體查詢:通過@media屬性判斷設備的尺寸、方向等。
(3)JavaScript觸發:用JavaScript腳本觸發。

59.animation動畫
animation製作動畫的步驟:
(1)通過類似Flash動畫的關鍵幀(@keyframes)聲明一個動畫;
其中@keyframes稱為關鍵幀,可以設置多段屬性。語法
@keyframes 動畫名稱{
from{ //css樣式代碼 }
百分比1{ //css樣式 }
百分比2{ //css樣式 }
100%{ //css樣式 }
}
(2)找到要設置動畫的元素,調用關鍵幀已聲明的動畫。
如 animation: spread(動畫名) 2s linear(勻速);

60.animation動畫的語法和屬性:
" animation: 動畫名稱 播放時間 播放方式 開始播放的時間 播放次數 播放方向 播放狀態 動畫時間之外的狀態 "
其中屬性分別為:
animation-name 動畫名稱、
animation-duration 播放時間、
animation-timing-function 播放方式、
animation-delay 開始播放的時間、
animation-iteration-count 播放次數(無限次用infinite)、
animation-diriection 播放方向、
animation-play-state 播放狀態、
animation-fill-mode 動畫時間之外的狀態、

——HTML部分——
utf-8 和 utf8的使用
只有MySQL可以用"utf8",但其他地方一律使用大寫"UTF-8"。
網頁推薦使用長尾碼名.html

有的瀏覽器中直接輸出中文會出現中文亂碼,可加聲明<meta charset="UTF-8">

<!--HTML註釋-->
&nbsp //空格
&gt //大於號
&lt //小於號
&quot //雙引號
&copy //版本符號

<em></em>斜體
<img src="地址" alt="圖片代替文字" title="滑鼠懸停提示" width="" height=""/>

<a href="鏈接網址" target="目標">頁面間鏈接</a>
<!--1.頁面間鏈接:A頁到B頁 主要運用於網頁導航-->
<a name=wo></a>
<a href=#wo>錨鏈接</a>
<!--2.錨鏈接:A頁甲位置到A頁的乙位置或A頁甲位置到B頁的乙位置 # 跳其他頁面要為href="頁面名.html#錨鏈接"-->
<a href="mailto:[email protected]" target="_blank">功能性鏈接</a>
<!--3.功能性鏈接:在頁面中調用其他軟體功能,電子郵件"mailto: @bdqn.cn" qq msn-->

————
創建表格:
1、<table>:整個表格以<table>標記開始、</table>標記結束,table在沒有添加css樣式之前,在瀏覽器中顯示是沒有表格線的。
2、<tbody>:如果不加<thead><tbody><tfooter> , table表格載入完後才顯示。加上這些表格結構, tbody包含行的內容下載完優先顯示,不必等待表格結束後在顯示,同時如果表格很長,用tbody分段,可以一部分一部分地顯示。(通俗理解table 可以按結構一塊塊的顯示,不用等整個表格載入完後顯示。)
3、<tr>:表格的一行,所以有幾對tr 表格就有幾行。
4、<th>:表格的頭部的一個單元格,表格表頭,文本預設粗體且居中顯示。
5、<td>:表格的一個單元格,一行中包含幾對<td>這行中就有幾個單元格。
6、表格中列的個數,取決於一行中數據單元格的個數。
7.設置樣式border-collapse:collapse;可以把雙線邊框線合併為一條線邊框。

<table border="邊距寬度">
<tr>
<td rowspan="跨行數量" colspan="跨列數量" align="文本狀態"></td>
</tr>
</table>
————
表格可以添加標題和摘要標簽進行優化。
(1)摘要:
摘要的內容不會在瀏覽器中顯示。作用是增加表格的可讀性(語義化),使搜索引擎更好的讀懂表格內容,還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。
語法:<table summary="表格簡介文本">
(2)標題:
描述表格內容,標題的顯示位置:表格上方。
語法:
<table summary="表格簡介">
<caption>標題文本</caption>
<tr>
<td>…</td>
</tr>
</table>
————
<iframe></iframe>
內聯框架iframe src="引用頁面地址" name="框架標識名" frameborder="邊框" scrolling="是否出現滾動條" noresize="noresize"更改頁面大小
配合<a>標簽的targer屬性及<iframe>標簽的name屬性,可實現視窗間的關聯

//表單
文件域,ps:需要在表單中寫入enctype="multipart/form=data" 屬性
<form method="提交方式" action="提交地址">
隱藏域:type="hidden"
只讀:readonly="readonly"
禁用:disabled="disabled"
<input type="text" name="名稱" size="長度" maxlength="最大長度"/>
//password 密碼

//radio單選按鈕
<input type="radio" name="sex" value="男" id="nan"/>
<label for="nan">男</label>
<input type="radio" name="sex" value="女" id="nv"/>
<label for="nv">女</label>

checkbox多選按鈕
<input type="checkbox" name="n" value="1"/>

下拉列表
<select name="名稱">
<optoin value="值">1</option>
</select>mc

文本域textarea
<textarea name="名稱" rows="行高" cols="寬度"><textarea>

複合選擇器有:
. 類選擇器
# id選擇器
空格 後代選擇器(交集、並集)

<link type="text/css" rel="stylesheet" href="css/style.css"/>鏈接式導入外部鏈接
<style type="text/css">
@import url("css/stype.css");導入式
</typle>

優先順序: id選擇器>類選擇器>標簽選擇器

超鏈接偽類:
.link 為點擊前
.visited 訪問後
.hover 滑鼠懸停
.aotive 單擊未釋放

透明度
opacity:(範圍0~1)
filter:aplha(opcitive=透明度<(100)>);

:fouc-last-type:
:blur-first-type;

location.reload();
location.replay(.html);
history.back forward
————
在網頁中顯示一些電腦專業的編程代碼,當代碼為一行時,使用<code>標簽語法:<code>代碼語言</code>
註意:如果要插入多行代碼時不能使用<code>。多行代碼可以用<pre>。
語法:<pre>語言代碼段</pre>
<pre> 標簽作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。

超鏈接語法:
<a href="目標網址" title="滑鼠滑過顯示的文本">鏈接顯示的文本</a>
title屬性的作用:滑鼠滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性能方便搜索引擎瞭解鏈接地址的內容(語義化更友好)。

<a>標簽可以鏈接Email地址,使用mailto能發送電子郵件。
如果mailto後面同時有多個參數的話,第一個參數必須以“?”開頭,後面的參數每一個都以“&”分隔。
mailto寫法:
<a href="mailto:[email protected] ?subject=主題名稱 &body=郵件內容">

當用戶需要在表單中輸入大段文字時,需要用到文本輸入域。
語法:<textarea rows="行數" cols="列數">文本</textarea>
1、<textarea>標簽是成對出現的,以<textarea>開始,以</textarea>結束。
2、cols :多行輸入域的列數。
3、rows :多行輸入域的行數。
4、在<textarea></textarea>標簽之間可以輸入預設值。

下拉列表進行多選操作:在<select>標簽中設置multiple="multiple"屬性,就可以實現多選功能,在windows 操作系統下,進行多選時按下Ctrl鍵同時進行單擊(在 Mac下使用 Command +單擊),可以選擇多個選項。

通用選擇器作用是匹配html中所有標簽,如 *{color:red}

為同一個元素設置了不同的CSS樣式代碼時,瀏覽器根據權值來判斷使用權值最高的樣式。
規則:
標簽的權值為1,類選擇符的權值為10,ID選擇符的權值最高為100。

!important有最高權值
!important要寫在分號的前面,但註意當網頁製作者不設置css樣式時,瀏覽器會按照自己的樣式來顯示網頁。並且用戶也可以在瀏覽器中設置自己習慣的樣式,比如有的用戶習慣把字型大小設置為大一些,使其查看網頁的文本更加清楚。這時註意樣式優先順序為:瀏覽器預設的樣式 < 網頁製作者樣式 < 用戶自己設置的樣式,但 !important優先順序例外,權值高於用戶自設置的樣式。

什麼是“置換元素”?
置換元素會根據標簽屬性來顯示的元素。反之就是非置換元素了。
如img根據src屬性來顯示,input根據value屬性顯示,因此可知img和input是置換元素,同理textarea、 select也是置換元素。
————
段落排版:
(1)letter-spacing:單個漢字間隔或單個字母間隔。
(2)word-spacing:按單詞來設置間隔。
——
1、border-style 邊框樣式:
dashed(虛線)| dotted(點線)| solid(實線)。

2、border-color 邊框顏色

3、border-width 邊框寬度:
thin | medium | thick。常用像素(px)。

4、當margin(或padding或border)的left和right的值相同,如:
margin:10px 20px 30px 20px;
可縮寫為:
margin:10px 20px 30px;
——
佈局模型與盒模型一樣都是 CSS概念。佈局模型建立在盒模型基礎上,不同於我們常說的 CSS 佈局樣式或 CSS 佈局模板。CSS佈局模板是外在的表現形式。
在網頁中,元素有三種佈局模型:
1、流動模型(Flow)
流動(Flow)是預設的網頁佈局模式。特征:塊狀元素都會在所處的包含元素內自上而下按順序垂直延伸分佈,因為在預設狀態下,塊狀元素的寬度都為100%。實際上,塊狀元素都會以行的形式占據位置。
流動模型下,內聯元素會在所處的包含元素內從左到右水平分佈顯示。

2、浮動模型 (Float)
任何元素預設是不能浮動的,可用CSS定義為浮動。

3、層模型(Layer)
讓html元素在網頁中精確定位,就像PhotoShop中的圖層一樣可以對每個圖層能夠精確定位操作。CSS定義了一組定位(positioning)屬性來支持層佈局模型。
層模型有三種形式:
(1)絕對定位(position: absolute)
將元素從文檔流中拖出來,然後用left、right、top、bottom屬性相對最靠近它的一個帶有定位屬性的父包含塊進行絕對定位。如果不存在這樣的父包含塊,則相對於body元素即相對於瀏覽器視窗。

(2)相對定位(position: relative)
元素在正常文檔流中的偏移位置。首先按static(float)方式生成一個元素(元素像層一樣浮動了起來),然後相對於以前的位置移動,移動的方向和幅度由left、right、top、bottom屬性確定,偏移前的位置保留。

(3)固定定位(position: fixed)
始終位於瀏覽器視窗內視圖的設置位置,不受文檔流動影響,
另外屬性background-attachment:fixed;的作用也是設置背景圖片固定。

relative與absolute組合:
1、參照定位的元素必須是相對定位元素的前輩元素。
2、參照定位的元素必須加入position:relative。
3、定位元素加入position:absolute,便可以使用top、bottom、left、right來進行偏移定位了。

設置顏色的方法:
1、英文單詞:p{color:red}
2、RGB顏色
由 R(red)、G(green)、B(blue)三種顏色比例來配色。
p{color:rgb(133,45,200)}
每一項的值可以是 0~255 的整數,也可以是0%~100% 的百分數。如:
p{color:rgb(20%,33%,25%)}

3、十六進位顏色
其原理也是 RGB 設置,每一項的值由 0-255 變成了十六進位 00-ff。p{color:#00ffff;}
——
相對單位長度值:
1、px像素
像素指的是顯示器上的小點(CSS規範中假設“90像素=1英寸”)。實際情況是瀏覽器和使用顯示器的實際像素值有關。

2、em
(1)元素給定字體的 font-size 值,如果元素的 font-size 為 14px,那麼 1em = 14px;如果font-size 為18px,那麼 1em = 18px。
如 p{font-size:12px; text-indent:2em;}意思首行縮進 24px(即兩個字體大小的距離)

(2)當 font-size 設置為 em時,計算標準以它父元素的 font-size 為基礎。
如:<p>以這個<span>例子</span>為例</p>
p{font-size:14px} span{font-size:0.8em;}
這裡 span 字體大小就為11.2px(14 * 0.8 = 11.2px)

3、%百分比
p{font-size:12px; line-height:130%}
設置行高(行間距)為字體的130%(12 * 1.3 = 15.6px)

塊狀元素沒有設置寬度時怎麼居中?
1.加入 table 標簽
2.設置 display: inline方法:顯示類型設為行內元素,進行不定寬元素的屬性設置
3.設置 position: relative 和 left:50%。利用相對定位,將元素從左偏移50%實現居中。
——
隱性改變display類型:
1. position : absolute;
2. float:left 或 float:right;
不論什麼元素(display:none除外),設置以上屬性之一,該元素的display顯示類型就會自動變為 以display:inline-block(行內塊狀元素)方式顯示,此時可設置元素的 width 和 height,且預設寬度不占滿父元素。
(如 a是行內元素,直接設置它的 width 無效,但設置 position:absolute 絕對定位後就可以設置寬度)

文本格式化標簽:
<b> 文本加粗
<strong>文本加粗(加重語氣)
<i> 斜體字
<em> 斜體(強調文字)
<big> 字體放大
<small> 字體縮小
<sub> 定義下標字
<sup> 定義上標字
<ins> 插入字(字體下劃線)
<del> 字體刪除線

"電腦輸出" 標簽:
<code> 定義電腦代碼
<kbd> 鍵盤輸入
<samp> 定義電腦代碼樣本
<var> 定義變數
<pre> 預格式化文本(會保留文本的多個空格)

引文、引用、及標簽定義:
<abbr> 縮寫
<address> 地址聯繫信息
<bdo> 文字方向(設置dir="rtl"為從右到左顯示)
<blockquote> 長文本引用(不會自帶雙引號,但會兩邊自動縮進)
<q> 短句引用語(自帶雙引號)
<cite> 定義引用、引證
<dfn> 定義一個定義項目。

title=""屬性規定關於元素的額外信息。標簽中加上title屬性可實現滑鼠移過時出現提示文字,如<p title="提示">
——
<base>元素:
描述了基本的鏈接地址/鏈接目標,該標簽作為HTML文檔中所有的鏈接標簽的預設鏈接:
<head>
<base href="//www.w3cschool.cn" target="_blank"/>
</head>
提示:在HTML中,<base>標簽沒有結束標簽。
——
HTML 顏色值RGB
由紅(R)、綠(G)、藍(B)組成。
每個顏色的最低值為0(十六進位為00),最高值為255(十六進位為FF)。
十六進位值寫法:#號後加3個或6個十六進位字元。
三位數表示法為:#RGB,轉換為六位數表示為:#RRGGBB
——
常見的 URL Schemes
http 超文本傳輸協議 以http:// 開頭的普通網頁,不加密。
https 安全超文本傳輸協議 安全網頁,加密所有信息交換。
ftp 文件傳輸協議 用於將文件下載或上傳至網站。
file 您電腦上的文件。
——
HTML5 多媒體標簽
<embed> 定義內嵌對象。HTML4不贊成,HTML5允許。
<object> 定義內嵌對象。
<param> 定義對象的參數。
<audio> 定義聲音內容
<video> 定義視頻或者影片
<source> 定義media元素的多媒體資源(<video>、<audio>)
<track> 規定media元素的字幕文件或其他包含文本的文件 (<video>、<audio>)
——
audio音頻設置
1.最好的解決方法:
下例使用兩個不同的音頻格式。HTML5 <audio> 元素會嘗試以 mp3 或 ogg來播放音頻。如果失敗,代碼將回退嘗試 <embed> 元素。
<audio controls height="100" width="100">
<source src="horse.mp3" type="audio/mpeg">
<source src="horse.ogg" type="audio/ogg">
<embed height="50" width="100" src="horse.mp3">
</audio>

2.雅虎播放器使用免費,提供一個小型的播放按鈕。
(1)如需使用它,需要把這段 JavaScript 插入網頁底部:
<script src="http://mediaplayer.yahoo.com/latest"></script>

(2)然後把MP3文件鏈接到頁面中,JS會自動為每首歌創建播放按鈕如:
<a href="音頻路徑" >音樂1</a>
<a href="horse.mp3">音樂2</a>
<script src="http://mediaplayer.yahoo.com/latest"></script>

3.用超鏈接
以下代碼指向 mp3 文件鏈接。如果用戶點擊該鏈接,瀏覽器會啟動"輔助應用程式"來播放該文件:
<a href="horse.mp3">音樂1</a>
——
video視頻播放設置
1.最好的解決方法
下例中使用了4種不同的視頻格式。HTML 5 <video> 元素會嘗試以 mp4、ogg、webm其中一種格式來播放視頻。如果都失敗,則回退到 <embed> 元素。
HTML5的source + object + embed。
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
<source src="movie.webm" type="video/webm">
<object data="movie.mp4" width="320" height="240">
<embed src="movie.swf" width="320" height="240">
</object>
</video>

2.優酷解決方案
如果要在網頁中播放視頻,可把視頻上傳到優酷等視頻網站,然後在你的網頁中插入 HTML代碼即可播放視頻:
<embed src="http://player.youku.com/player.php/sid/XMzI2NTc4NTMy/v.swf"
width="480" height="400"
type="application/x-shockwave-flash">
</embed>

3.使用超鏈接
如果網頁包含指向媒體文件的超鏈接,大多數瀏覽器會使用"輔助應用程式"來播放文件。
以下代碼指向 AVI文件的鏈接。如果用戶點擊該鏈接,瀏覽器會啟動"輔助應用程式"如 Windows Media Player 來播放該 AVI 文件:
<a href="https://www.w3cschool.cn/html/intro.swf">播放該視頻</a>
——
HTML中如何鍵入空格?
1.用空格占位符&nbsp;
但&nbsp有不間斷的特性。即連續的&nbsp會在同一行內顯示。即使有100個連續的&nbsp,瀏覽器也不會把它們回車拆行。
2.段落間距<p>、換行<br/>
3.用JS動態給HTML添加空格:
例為照顧CSS樣式或照顧特殊效果的實現。如果你不單單想讓div之間是null,而是想動態添加空格的話,這樣(jquery):
$("#id").innerHTML += " ";
——
display: none; 元素不顯示也不會占位

visibility: hidden; 元素只是隱藏但仍然占位置
visibility: collapse; 隱藏但不占空間,類似display:none;
——
clip 剪輯一個絕對定位的元素。
clip : rect(top, right, bottom, left);

CSS 偽類:
1.Anchor偽類 (偽類如:link冒號和偽類名之間不能有空格)
在支持 CSS 的瀏覽器中,鏈接的不同狀態可用不同的方式顯示:
a:link {color:#FF0000;} /* 未訪問的鏈接 */
a:visited {color:#00FF00;} /* 已訪問的鏈接 */
a:hover {color:#FF00FF;} /* 滑鼠划過鏈接 */
a:active {color:#0000FF;} /* 已選中的鏈接 */

2.CSS類和偽類配合使用:
p : first-child{ } 匹配父級中第一個<p>子元素
p > i:first-child{ } 匹配所有<p>元素的第一個 <i> 子元素
p:first-child i{ } 匹配第一個<p>元素中的所有 <i> 元素
——
White-space屬性:設置如何處理元素內的空白。
normal 預設。空白會被瀏覽器忽略。
pre 空白會被瀏覽器保留。其行為方式類似 <pre>標簽。
nowrap 文本不會換行,文本在同一行上繼續,直到遇到<br/>為止。
pre-wrap 保留空白符序列,但是正常地進行換行。
pre-line 合併空白符序列,但是保留換行符。
inherit 從父元素繼承 white-space 屬性的值。
——
瀏覽器相容首碼:
-moz- 火狐等使用 Mozilla內核的瀏覽器
-webkit- 谷歌、Safari等使用 Webkit內核的瀏覽器
-o- Opera瀏覽器,使用Blink內核
-ms- IE,使用 Trident內核
——
viewport 是用戶網頁的可視區域。
————————————————
版權聲明:本文為CSDN博主「Sukie_」的原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處鏈接及本聲明。
原文鏈接:https://blog.csdn.net/Lin16819/article/details/102759862

本人在休閑之餘整理了一些資料和視頻,並剛剛創建了一個交流群:907694362 也是我之前剛開始學前端時候看的一些資料,希望對給位有所幫助,也祝各位在前端之路一帆風順!!


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

-Advertisement-
Play Games
更多相關文章
  • 轉自:https://xushanxiang.com/2019/11/mysql-optimization-tips.html ...
  • 報錯特征 自己使用AndroidStudio生成了一個Demo App,用來測試Androd killer的反編譯的功能,結果報錯了,報錯信息如下: 解決方式 解決方式一 刪除報錯文件 參考:https://www.52pojie.cn/thread 1029058 1 1.html 根據這個大佬的 ...
  • 1. 圖層樹 圖層的樹狀結構 巨妖有圖層,洋蔥也有圖層,你有嗎?我們都有圖層 -- 史萊克 Core Animation其實是一個令人誤解的命名。你可能認為它只是用來做動畫的,但實際上它是從一個叫做Layer Kit這麼一個不怎麼和動畫有關的名字演變而來,所以做動畫這隻是Core Animation ...
  • DOM操作的常用API有哪些?DOM事件級別有哪些(DOM0-2事件)? ...
  • 使用形式: unsafe_expr?? 或 (unsafe_expr)?? 這個操作符告訴我們一個值是否存在。基於這種情況, 結果是 true 或 false。 訪問非頂層變數的使用規則和預設值操作符(上一篇)也是一樣的, 也就是說,可以寫 product.color?? 和 (product.co ...
  • 預設值操作符: 使用形式例如: userName!default_expr 或 userName! 或 (userName)!default_expr 或 (userName)! 這個操作符允許你為可能不存在的變數指定一個預設值(default_expr),'!'後沒有參數預設返回一個空。 例如,假 ...
  • 比較運算符: == : 相等 != :不等 = 或 != 兩邊的表達式的結果都必須是標量 freemarker是區分類型的:例如<#if 1 = "1"> 就會導致錯誤; >= 和 > 不能使用,原因:'>'在使用的時候可以把它當作FTL標簽的結束符。 lt 代替 <, lte 代替 <=, gt ...
  • 一.鍵盤事件 onkeydown: 按下鍵盤時觸發 onkeypress: 按下有值的鍵時觸發 : 按下 、`Alt Shift Meta` 這樣無值的鍵,這個事件不會觸發對於有值的鍵,按下時先觸發 keydown 事件,再觸發這個事件 onkeyup:鬆開鍵盤時觸發該事件 二.組合鍵 ctrl相關 ...
一周排行
    -Advertisement-
    Play Games
  • Timer是什麼 Timer 是一種用於創建定期粒度行為的機制。 與標準的 .NET System.Threading.Timer 類相似,Orleans 的 Timer 允許在一段時間後執行特定的操作,或者在特定的時間間隔內重覆執行操作。 它在分散式系統中具有重要作用,特別是在處理需要周期性執行的 ...
  • 前言 相信很多做WPF開發的小伙伴都遇到過表格類的需求,雖然現有的Grid控制項也能實現,但是使用起來的體驗感並不好,比如要實現一個Excel中的表格效果,估計你能想到的第一個方法就是套Border控制項,用這種方法你需要控制每個Border的邊框,並且在一堆Bordr中找到Grid.Row,Grid. ...
  • .NET C#程式啟動閃退,目錄導致的問題 這是第2次踩這個坑了,很小的編程細節,容易忽略,所以寫個博客,分享給大家。 1.第一次坑:是windows 系統把程式運行成服務,找不到配置文件,原因是以服務運行它的工作目錄是在C:\Windows\System32 2.本次坑:WPF桌面程式通過註冊表設 ...
  • 在分散式系統中,數據的持久化是至關重要的一環。 Orleans 7 引入了強大的持久化功能,使得在分散式環境下管理數據變得更加輕鬆和可靠。 本文將介紹什麼是 Orleans 7 的持久化,如何設置它以及相應的代碼示例。 什麼是 Orleans 7 的持久化? Orleans 7 的持久化是指將 Or ...
  • 前言 .NET Feature Management 是一個用於管理應用程式功能的庫,它可以幫助開發人員在應用程式中輕鬆地添加、移除和管理功能。使用 Feature Management,開發人員可以根據不同用戶、環境或其他條件來動態地控制應用程式中的功能。這使得開發人員可以更靈活地管理應用程式的功 ...
  • 在 WPF 應用程式中,拖放操作是實現用戶交互的重要組成部分。通過拖放操作,用戶可以輕鬆地將數據從一個位置移動到另一個位置,或者將控制項從一個容器移動到另一個容器。然而,WPF 中預設的拖放操作可能並不是那麼好用。為瞭解決這個問題,我們可以自定義一個 Panel 來實現更簡單的拖拽操作。 自定義 Pa ...
  • 在實際使用中,由於涉及到不同編程語言之間互相調用,導致C++ 中的OpenCV與C#中的OpenCvSharp 圖像數據在不同編程語言之間難以有效傳遞。在本文中我們將結合OpenCvSharp源碼實現原理,探究兩種數據之間的通信方式。 ...
  • 一、前言 這是一篇搭建許可權管理系統的系列文章。 隨著網路的發展,信息安全對應任何企業來說都越發的重要,而本系列文章將和大家一起一步一步搭建一個全新的許可權管理系統。 說明:由於搭建一個全新的項目過於繁瑣,所有作者將挑選核心代碼和核心思路進行分享。 二、技術選擇 三、開始設計 1、自主搭建vue前端和. ...
  • Csharper中的表達式樹 這節課來瞭解一下表示式樹是什麼? 在C#中,表達式樹是一種數據結構,它可以表示一些代碼塊,如Lambda表達式或查詢表達式。表達式樹使你能夠查看和操作數據,就像你可以查看和操作代碼一樣。它們通常用於創建動態查詢和解析表達式。 一、認識表達式樹 為什麼要這樣說?它和委托有 ...
  • 在使用Django等框架來操作MySQL時,實際上底層還是通過Python來操作的,首先需要安裝一個驅動程式,在Python3中,驅動程式有多種選擇,比如有pymysql以及mysqlclient等。使用pip命令安裝mysqlclient失敗應如何解決? 安裝的python版本說明 機器同時安裝了 ...