HTML
標簽? ?
1. 標題標簽??h1到h6?
2.? 段落標簽? ? ?p
3.? 換行? ? br? ? 水平線? hr
4.? 加粗 strong? ?傾斜 em? ?下劃線 ins? ?刪除 del
5.? 圖像標簽
? ? ?img? ?src-圖像的位置? ? alt- 圖片加載失敗顯示的文字? ? 替換文本?
? ? ? ? ? ? ? title--- 鼠標放到圖片上顯示的文字? ?提示文本
? ? ? ? ? ? ? width? 寬? ?heigh? 高
6.路徑? ?./? ? 或者? ?../
7.超鏈接? ?? ? ?
? ? ? a? ? ? ?herf --點擊后就會跳轉的地址
? ? ? ? ? ? ? ?target = “_blank”? 點擊后會打開一個新的網頁
8.音頻標簽
? ? ?audio? ? ?src --音頻的位置
? ? ? ? ? ? ? ? ? controls? ?顯示音頻控制面板
? ? ? ? ? ? ? ? ? loop循環播放
? ? ? ? ? ? ? ? ? autoplay? 自動播放? 瀏覽器設置調
9.視頻
video? ? ?src? 位置??
? ? ? ? ? ? ? loop? ? autoplay? ? ?muted靜音播放
10.? ?無序列表? ?
????????????????ul嵌套li? ?
11.? ? 有序列表
? ? ? ? ol嵌套li??
? ? ? ? ??
12. 表格? ?感覺沒啥迪奧用 不寫了
13.? ? 輸入框
? ? ? ? input? ? ? ?type=“ text文本框? ? password密碼? ?radio單選框? ? checkbox多選框? file上傳文件”
加上? placeholder? ?使提示的文本? ??
單選框外邊加上label 這個讓它成為label的子類? ?擴大其點擊范圍?
14.單選框的單選屬性? ? name 弄相同的? 只能選一個? ?checked使默認選中
15.多文件上傳? 加 mutiple?
16.多選框? ? ?checkbox
17.下拉菜單? ? selection嵌套option? ? selected默認顯示
????????
18.? ?文本域? ?textarea
19.label 標簽? ?某個標簽的說明文本? ?增大點擊范圍
20. 按鈕? ? button
? ? ? ? ? ?submit? ?把數據提交到后臺
? ? ? ? ? ?resert? ? 重置? ?一般用于注冊
? ? ? ? ? ?button? 普通標簽
? ??按鈕應該放在? ?form? action? 中? ? ? ?form表單空間? ? action 提交地址
?????????????? ? ? ?
21。標簽布局? ?div? span
? ? ? ? ? ? ?div 獨占一行??
? ? ? ? ? ? ?span? ? 不換行
22.? ?字符實體? ? ? 小于號? ?<；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?大于號? >；
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 空格? ?  ；
23.? 以下是CSS內容
? ? ? 寫法? ? ? style標簽
? ? ? ? ? ? ? ? ? ? link? + rel（類型） +? herf(路徑)
24.? ?類選擇器? ? ? . 類名{}
? ? ? ? ? ? ? ? 然后在標簽名后邊加 class=“類名”
25.? ? id選擇器? ? ? #類名{}
????????? ? ? ? 標簽后邊加id = “id名"? 和類選擇器差不多? ?和js搭配使用
26.? 通配符選擇器? ?對于所有標簽進行同一個操作? ? ?*{ }??
? ? ?用于清除格式
27.畫盒子? ? 寬 width? ?
????????????????????高height? ? ?
???????????????????背景色?background-color
28.字體? ? ? 大小 font-size
? ? ? ? ? ? ? ? 粗細? ? font-weight? ?一般400細? 700粗
? ? ? ? ? ? ? ? ?傾斜? font-style? ??normal? ?italic?
? ? ? ? ? ? ? ? ?行高文字之間? ? line-height? ? ?讓文本垂直居中? 就讓行高值等于盒子的高度的值 只適用單行文字
? ? ? ? ? ? ? ? 字體樣式：? font-family? ?
? ? ? ? ? ? ? ? ?字體復合樣式：? font ： 是否傾斜? ? ?是否加粗? ?字體間行高(必寫)? ? ?字體(必寫)? ? ? ?
29.? 文本縮進? ?text-indent? ? ? ?加? ? 數字px? ? ?em（字號大小）
30.? ?文本對齊? ?text-align? ? ? ? 左對齊 默認? left? ??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?水平居中? ?center?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 右對齊? ? right
31. 圖片對齊? ? ? ?圖片放在父級標簽中? 進行text-align
32.修飾線? ?text-decoration? ? ? ?無none?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?下劃線? ?underline
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?刪除線? ?line-through
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 頂劃線? ? over-line
33.文字顏色? ? color? ? ? + 顏色? ?或? 調色板? ? rgb（紅綠藍）? rgba(紅綠藍 ，透明度)? 或? 十六進制
34. 復合選擇器
? ? ? ? ? ?后代選擇器? ? 選擇器1 然后空格 選擇器2? ? ? ?父代 空格? 子代
????????????????相當于選擇使用選擇器1的標簽里邊的使用選擇器2的標簽 對他進行操作?
????????
? ?
? ?子代選擇器? ? ? 選擇器1>選擇器2??? ? ? ?父代? >? 子代
? ? ? ? ? ? ? ? ??
并集 和 交集懶得寫了
偽類選擇器? ? ?表示元素狀態? ?
? ? ? ? ? ? ? ? ? ? ? ? 選擇器：hover{CSS屬性}? ?這個是對于超鏈接啥的設置的鼠標懸停狀態
這個會變色 只是截圖接不出來
偽類超鏈接? ：? ? ? 按順序寫 LVHA
????????????????????????? ? ?:link? 訪問前
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?:visited? 訪問后
? ? ? ? ? ? ? ? ? ? ? ? ? ? ?: hover? 懸停
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? :active? 點擊時
35.CSS的特性
????????????????繼承性： 對于父代的所有操作會影響子代
? ? ? ? ? ? ? ? 層疊性： 相同的屬性往后寫的話會進行覆蓋? 不同的屬性會增加
? ? ? ? ? ? ? ? 優先級? ?能選擇的范圍越大優先級就會越低? 懶得寫
36.? 背景屬性? ? ? ?背景色：? background-color? 前邊提到過
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 背景圖 ：? background-img??
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 平鋪方式：? ?默認是平鋪的 repeat
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?取消平鋪：??background-repeat: no-repeat
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?根據水平 垂直方向平鋪? ?background-repeat: repeat-x;
? ? ? ? ? ? ????????????????????????????????????????????????????????????????????????????background-repeat: repeat-y;
? ? ? ? ? ? ? ? ? ? ? ? ? ??背景圖的位置： 見下圖
????????
????????????????????????背景圖的縮放 ：? bckground-size? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? cover? 全屏? 但是圖片可能會覆蓋不全
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? contain? ?寬高有一個存在相等的? 就會停止
? ? ? ? ? ? ? ? ? ? ? ? 背景圖的固定：? 就是上下滾動鼠標圖不動 然后文字會隨鼠標上下滾動
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ??background-attachment: fixed;
? ? ? ? ? ? ? ? ? ? ? ? ?背景圖的復合屬性：就空格隔開就行? 對于縮放要前邊加上 /?
37.?塊級元素 行內元素 行內塊元素
? ? 塊級元素：??
-
獨占一行，前后會自動換行
-
默認寬度和父元素相同? （是父元素寬度的100%）
-
可以包含其他塊級元素和行內元素
-
可以設置寬度(width)、高度(height)、內外邊距(margin/padding)
-
常見的
<div>, <p>, <h1>-<h6>, <ul>, <ol>, <li>,
行內元素
-
不會獨占一行，與其他行內元素排在同一行
-
默認寬度由內容決定
-
設置寬度(width)、高度(height)無效
-
水平方向的內外邊距有效，垂直方向的外邊距無效
-
只能包含文本和其他行內元素
-
常見的?
<span>, <a>, <strong>, <em>, <img>, <input>, <label>, <br>
行內塊元素
-
結合了塊級和行內元素的特性
-
不獨占一行，與其他元素排在同一行
-
可以設置寬度(width)、高度(height)、內外邊距(margin/padding)
-
默認寬度由內容決定
-
常見的：?
<img>, <input>, <button>, <select>, <textarea>
轉換：? diplay：? ?塊級 block? ? ? 行內塊 inline-block? ? ?行內： inline
38. 結構偽類選擇器? ? 就是對一個父級里邊的多個相同的子級標簽單獨拿出來操作
? ? ? 子級：:first-child? ? ? ??:last-child? ? ? ??:nth-child(5)第五個
39.偽元素選擇器：? before? after? 不知道有damn用？？
40.盒子模型： 內容區域? 用width? height
? ? ? ? ? ? ? ? ? ? ? ? ?內邊距? padding? ? ? -left? ? ?-right? ?-bottom? ?-top? ? 多值順時針轉動?
? ? ? ? ? ? ? ? ? ? ? ? ? 外邊距 margin? ??-left? ? ?-right? ?-bottom? ?-top? ? ??多值順時針轉動?
? ? ? ? ? ? ? ? ? ? ? ? ?邊框線? ?border? ?粗細? ?樣式solid? dashed? dotted? ?顏色? ?
41.清除默認樣式? ? ?
對于邊距和無序列表?
42.元素溢出：? ?控制溢出元素的顯示方式
? ? ? ? ? ? ? ? overflow? ：? ? ? 隱藏hidden?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? scroll 無論溢出不溢出都有滾動條 水平加垂直
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? auto? 沒有水平的
43.合并現象：? 對于兩個同級標簽? 當同時在垂直方向時? 兩者之間的相交的margin取較大的
44.塌陷問題：? 子級加上了外邊距導致父級往下移動了
? ? ? ? ? ? ? ? ? 解決： 1 子級不加margin? ?父級加內邊距
? ? ? ? ? ? ? ? ? ? ? ? ? ? 2 父級加? ?overflow：hidden
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 3 父級 加邊框?
45。行內元素的垂直位置? ? ? ? line-height? 和28文字那點一樣
46.? 圓角效果? ? ?頭像啥的用
? ? ? ? ? ? ? ? border-radious? ?也是順時針轉? ? ? ?
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? 頭像 ： 正方形 前提? 然后 值寫? ? 50%
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?膠囊 ：? 高度寫成盒子高度的一半
先寫到這里? ?2025.5.18? ?過幾天學完學透徹再來再來
????????????????????????????????
?
??
