HTML基礎
HTML 的全稱是 HyperText Markup Language（超文本標記語言），它是一種用來描述網頁結構的標記語言。
-
h1用作主標題，h2用作副標題，還有h3、h4、h5、h6元素分別用作不同級別的標題。用p元素代表段落。註釋的開始標記是<!--，結束標記是-->。 -
<img src="圖片地址" alt="替代文本">。如果圖片是純裝飾性的，用一個空的alt是最佳實踐。 -
網頁建跳轉
<a href="地址">顯示文字</a>內部跳轉<a href="#節點id">Contacts</a>直接填#創建固定鏈接 -
無序列表
ul、有序列表ol輸入框<input type="text">。爲輸入框添加佔位符文本placeholder=""。form表單<form action="提交地址"></form>。設置必填項required。 -
單選按鈕type="radio"同一組name相同，複選框type="checkbox"同一組name相同，添加默認選中checked。input最佳實踐是在
label元素上設置for屬性，讓其值與單選按鈕的id屬性值相等，這樣就在label元素和它的子元素單選按鈕之間創建了一種鏈接關係。 -
聲明HTML文檔類型
<!DOCTYPE html>對應的就是 HTML5。
<!DOCTYPE html>
<html>
<head></head>
<body></body>
</html>
CSS基礎
CSS 的全稱是 Cascading Style Sheet（層疊樣式表），它主要用來控制網頁的樣式。
- 內聯樣式
style=""。head中添加樣式<style><s/tyle> - 元素選擇器（直接使用元素名稱），class選擇器（.class）,id選擇器（#id），屬性選擇器（[type=‘radio’]）
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet" type="text/css">引入外部字體- 長度px 固定長度像素，em相對於元素字體的font-size值，rem相對於根元素的font-size
- 優先級：元素直接設置大於繼承樣式，ID選擇器大於class選擇器，內聯樣式高於ID選擇器 內聯樣式》ID選擇器》class選擇器》繼承父級樣式
- #000000十六進制編碼，#F00縮寫十六進制編碼，rgb(255, 255, 255) RGB 值
- 你創建的變量，不但可以在你聲明變量的元素裏面使用，同時也可以在該元素的子元素裏面使用。這種效應稱爲cascading（層疊）。因爲層疊的效果，CSS 變量通常會定義在:root元素裏。
:root {
--penguin-skin: gray;
--penguin-belly: pink;
--penguin-beak: orange;
}
body {
background: var(--penguin-belly, #c6faf1);
//var中第二個元素意爲當第一個元素沒有找到時生效
}
基本樣式簡介
| 屬性 | 意義 |
|---|---|
| color:red | 顏色 |
| font-size:30px | 字體大小 |
| font-family: Helvetica,sans-serif; | 設置字體，可以設置多個逗號分隔第一個不能用用第二個 |
| width:500px | 寬度 |
| border-color，border-width,border-style | 邊框顏色，邊框粗細，邊框樣式solid（實線）dotted（點線）dashed（虛線）double（雙線） |
| border-radius:10px | 設置圓角，，50%圓形圖片 |
| background-color: green; | 添加背景顏色 |
| padding，margin，border | 內邊距、外邊距、邊框 |
| color: red !important; | 確保元素一定爲紅色，最高優先級 |
| @media (max-width: 350px) | 媒體查詢設置樣式，寬度小於350px時。 |
應用視覺設計
視覺設計在 Web 開發中是一個非常廣泛的話題。它結合了排版、色彩理論、圖形、動畫和頁面佈局等。在 Web 開發中，HTML 爲頁面的內容提供結構和語義，CSS 控制頁面的佈局和外觀。
| 屬性 | 意義 |
|---|---|
| text-align | 控制文本的對齊方式，justify兩端對其，center居中，left左對齊，right右對齊 |
| width | 設置元素寬度 |
| height | 設置元素的高度 |
| <strong> | 文本加粗 |
| <u> | 下劃線 |
| <em> | 強調文本 |
| <s> | 刪除線 |
| <hr> | 創建水平線 |
| background-color: rgba(45, 45, 45, 0.1) | r：紅色 g：綠色 b：藍色 a：透明度 |
| box-shadow: 0 10px 20px rgba(0,0,0,0.19), 0 6px 6px rgba(0,0,0,0.23); | 元素添加陰影，（陰影的水平偏移量 陰影的垂直偏移量 模糊距離(可選) 陰影尺寸(可選) 顏色）。左邊放了兩個就是添加了兩層陰影 |
| opacity | 設置元素的透明度 |
| text-transform | 使文本大寫顯示 |
| font-weight | 設置字體粗細 |
| line-height | 行距 |
| :hover | 僞類選擇器定義它的懸停狀態樣式 |
| position: relative; | 不會改變該元素在普通流佈局所佔的位置，也不會對其它元素的位置產生影響。 相對於原來文檔流中的位置變換 |
| position: absolute; | 會將元素從當前的文檔流裏面移除，元素的定位參照於最近的已定位祖先元素（一般可以爲父元素添加position: relative）。如果父元素沒有添加定位規則，瀏覽器會繼續尋找直到默認的 body 標籤。 |
| position:fixed; | 相對於瀏覽器窗口，不會隨着其他元素滑動改變位置 |
| float:left; | 浮動元素不在文檔流中，它向左或向右浮動，直到它的外邊緣碰到包含框或另一個浮動框的邊框爲止。通常需要用width屬性來指定浮動元素佔據的水平空間。 |
| z-index:2; | 使用該屬性指定元素堆疊次序，取值爲整數，數值大的元素優先於數值小的元素顯示。 |
| margin:auto; | 設置元素居中顯示。 |
| background-color:hsl(0, 100%, 50%) | HSL 色彩空間模型，（色相，飽和度，亮度）色相是色彩的基本屬性，取值爲色環裏面顏色對應的從0-360度的角度值。飽和度是指色彩的純度，也就是顏色裏白色或者黑色的佔比，越高色彩越純，低則逐漸變灰。亮度決定顏色的明暗程度，100%是白色0%是黑色。 |
| background: linear-gradient(90deg, red, yellow, rgb(204, 204, 255)); | 線性漸變，90edg垂直漸變，從red->yellow->rgb(204, 204, 255),顏色數量可以是任意個 |
| repeating-linear-gradient | 創建條紋元素，demo見freecodecamp |
| background:url(https://i.imgur.com/MJAkxbh.png); | 背景使用圖片 |
| transform:scale(2); | 將元素變爲原來的2倍 |
| transform: skewX(24deg); | 沿X軸旋轉24度 |
| transform: skewX(24deg); | 沿Y軸選裝24度 |
改變按鈕的懸停狀態
button:hover {
animation-name: background-color; //名稱
animation-duration: 500ms; //變換時間
animation-fill-mode: forwards; //保持變化後狀態
}
@keyframes background-color {
100% {
background-color: #4791d0;
}
}
應用無障礙
- img標籤的alt屬性：幫助用戶在圖片加載失敗或者不可見的情況下理解圖片內容，也有助於搜索引擎理解圖片內容。圖片僅僅是爲了美化界面時應該留空。