2021科協前端培訓
- HTML
- 概念
- 語法
- 標簽學習
- 表單
- CSS
- 概念
- 作用
- CSS 規則
- 引入CSS樣式表
- 行內樣式
- 內部樣式表
- 外部樣式表
- CSS基礎選擇器
- CSS擴展選擇器
- CSS字體樣式(font)
- CSS背景(background)
- 頁面布局
- 盒子模型
- 盒子邊框(border)
- 浮動
- 清除浮動
- 常用布局
HTML
概念
全稱為超文本標記語言，是一種標記語言，它包括一系列標簽，通過標簽將網路上的檔案格式統一，是分散的Internet資源鏈接為一個邏輯整體，它可以說明文字、圖形、影片、聲音、表格、鏈接等，
1.超文本：
超文本是一種組織資訊的方式，它通過超級鏈接方法將文本中的文字、圖表與其他資訊相關聯，
2.標記語言：
標記語言是一種將文本以及文本相關的其他資訊結合起來，展現出關于檔案結構和資料處理細節的電腦文字編碼，他與文本相關的其他資訊結合起來但是使用標記進行標識，
語法
1.html檔案的后綴名是.html或.htm，
2.標簽特點：
（1）由尖括號包圍的關鍵詞組成，如<html>
（2）可分為單標簽和雙標簽
雙標簽：有開始標簽和結束標簽，如<body></body>
單標簽：開始標簽和結束標簽在一起，如<hr>
（3）在開始標簽內部可以定義屬性，
（4）標簽不分大小寫，建議使用小寫
（5）標簽可以嵌套
標簽學習
1.檔案標簽：
<!--注釋內容-->
<!DOCTYPE html>：表示該檔案是html檔案，使用h5的標準決議
<html>：定義html檔案
<head>：所有頭部檔案的容器，是引入外部元素的位置
<title>：定義瀏覽器工具列中的標題，在所有的html檔案中是必須的
<body>：定義檔案的主體部分，包含檔案的所有內容
2.文本標簽：
<h1>到<h6>：標題標簽，字體大小由大到小
<p>：段落標簽，定義段落、】
<hr>：定義水平線，單標簽
<br>：換行標簽，定義換行
<b>：加粗標簽，將內部文字加粗
<i>：傾斜，將內部文字傾斜
<center>：居中標簽，將內部文字相對網頁居中
3.圖片標簽：
<img src=””>：圖片標簽，src用于指定圖片檔案位置，單標簽
相對路徑：
./：表示當前檔案目錄，如：./img/圖片.jpg"/>
選擇器通常是您需要改變樣式的 html 元素，
每條宣告由一個屬性和一個值組成，
屬性（property）是你希望設定的樣式屬性（style attribute），
每個屬性有一個值，屬性和值被冒號分開，
CSS 注釋
/* 這是注釋 */
引入CSS樣式表
CSS與html結合方式
行內樣式
通過標簽的style屬性來設定元素的樣式
style其實就是標簽的屬性
樣式屬性和值中間是:
多組屬性值直接用;隔開
<標簽名 style="屬性1:屬性值1; 屬性2:屬性值2; 屬性3:屬性值3;"> 內容 </標簽名>
<!--例如：改變段落的文字顏色和大小-->
<p style="color: red; font-size: 12px;">這是一個段落</div>
內部樣式表
也稱為內嵌式，將CSS代碼集中寫在HTML檔案的head頭部標簽中，并且用style標簽定義，
style標簽一般位于head標簽中，當然理論上他可以放在HTML檔案的任何地方，
type="text/css" 在html5中可以省略，
<head>
<style type="text/CSS">
選擇器（選擇的標簽） {
屬性1: 屬性值1;
屬性2: 屬性值2;
屬性3: 屬性值3;
}
</style>
</head>
外部樣式表
也稱鏈入式，是將所有的樣式放在一個或多個以.css為擴展名的外部樣式表檔案中，通過link標簽將外部樣式表檔案鏈接到HTML檔案中，
rel:定義當前檔案與被鏈接檔案之間的關系，在這里需要指定為“stylesheet”，表示被鏈接的檔案是一個樣式表檔案，
href:定義所鏈接外部樣式表檔案的URL，可以是相對路徑，也可以是絕對路徑，
<link rel="stylesheet" href="index.css">
CSS基礎選擇器
CSS選擇器作用：找到指定的HTML頁面元素，選擇標簽，
選擇器 作用 缺點 使用情況 用法 標簽選擇器 可以選出所有相同的標簽，比如p 不能差異化選擇 較多 p { color：red;} 類選擇器 可以選出1個或者多個標簽 可以根據需求選擇 非常多 .nav { color: red; } id選擇器 一次只能選擇器1個標簽 只能使用一次 不推薦使用 #nav {color: red;} 通配符選擇器 選擇所有的標簽 選擇的太多，有部分不需要 不推薦使用 * {color: red;}
CSS擴展選擇器
選擇器 作用 特征 使用情況 隔開符號及用法 后代選擇器 用來選擇元素后代 是選擇所有的子孫后代 較多 符號是空格 .nav a 子代選擇器 選擇 最近一級元素 只選親兒子 較少 符號是> .nav>p 交集選擇器 選擇兩個標簽交集的部分 既是 又是 較少 沒有符號 p.one并集選擇器 選擇某些相同樣式的選擇器 可以用于集體宣告 較多 符號是逗號 .nav, .header 鏈接偽類選擇器 給鏈接更改狀態 較多 a:link 未訪問的鏈接 a:visited 已訪問的鏈接 a:hover 滑鼠移動到鏈接上 a:active 選定的鏈接
CSS字體樣式(font)
屬性 表示 注意點 font-size 字號 我們通常用的單位是px 像素，一定要跟上單位 font-family 字體 實際作業中按照團隊約定來寫字體 font-weight 字體粗細 記住加粗是 700 或者 bold 不加粗 是 normal 或者 400 記住數字不要跟單位 font-style 字體樣式 記住傾斜是 italic 不傾斜 是 normal 作業中我們最常用 normal font 字體連寫 1. 字體連寫是有順序的 不能隨意換位置 2. 其中字號 和 字體 必須同時出現
屬性 表示 注意點 color 顏色 我們通常用 十六進制 比如 而且是簡寫形式 #fff line-height 行高 控制行與行之間的距離 text-align 水平對齊 可以設定文字水平的對齊方式 text-indent 首行縮進 通常我們用于段落首行縮進2個字的距離 text-indent: 2em; text-decoration 文本修飾 記住 添加 下劃線 underline 取消下劃線 none
CSS背景(background)
屬性 作用 值 background-color 背景顏色 預定義的顏色值/十六進制/RGB代碼 background-image 背景圖片 url(圖片路徑) background-repeat 是否平鋪 repeat/no-repeat/repeat-x/repeat-y background-position 背景位置 length/position 分別是x和y坐標，切記如果有精確數值單位，則必須按照先X后Y的寫法 background-attachment 背景固定還是滾動 scroll/fixed 背景簡寫 更簡單 背景顏色 背景圖片地址 背景平鋪 背景滾動 背景位置; 他們沒有順序 背景透明 讓盒子半透明 background: rgba(0,0,0,0.3); 后面必須是 4個值
頁面布局
標簽顯示模式(display)
標簽顯示模式是標簽以什么方式進行顯示，HTML標簽一般分為塊標簽和行內標簽兩種型別，它們也稱為塊元素和行內元素，
標簽顯示模式轉換 display
- 塊轉行內：display:inline;
- 行內轉塊：display:block;
- 塊、行內元素轉換為行內塊：display: inline-block;
三種模式
元素模式 元素排列 設定樣式 默認寬度 包含 塊級元素 一行只能放一個塊級元素 可以設定寬度高度 容器的100% 容器級可以包含任何標簽 行內元素 一行可以放多個行內元素 不可以直接設定寬度高度 它本身內容的寬度 容納文本或則其他行內元素 行內塊元素 一行放多個行內塊元素 可以設定寬度和高度 它本身內容的寬度
盒子模型
網頁布局的本質
首先利用CSS設定好盒子的大小，然后擺放盒子的位置，
最后把網頁元素比如文字圖片等等，放入盒子里面，
W3c標準盒子模型
標準 w3c 盒子模型的范圍包括 margin、border、padding、content
盒子的實際大小：內容的寬度和高度 + 內邊距 + 邊框
注意：width和height設定的都是content的內容
盒子邊框(border)
屬性 作用 border-width 定義邊框粗細，單位是px border-style 邊框的樣式 border-color 邊框顏色
邊框的樣式：
none：沒有邊框即忽略所有邊框的寬度（默認值）
solid：邊框為單實線(最為常用的)
dashed：邊框為虛線
dotted：邊框為點線
內邊距(padding)
padding屬性用于設定內邊距，是指邊框與內容之間的距離，
外邊距（margin）
margin屬性用于設定外邊距，margin就是控制盒子和盒子之間的距離
塊級盒子水平居中
盒子指定寬度（width）
然后給左右的外邊距都設定為auto
常見的寫法，以下下三種都可以
margin-left: auto; margin-right: auto;
margin: auto;
margin: 0 auto;
文字居中和盒子居中區別
1. 盒子內的文字水平居中是 text-align: center; 而且還可以讓行內元素和行內塊居中對齊
2. 塊級盒子水平居中 左右margin 改為 auto
浮動
優點：
1. 實作層疊布局,簡單實作精美布局
2. 實作文字環繞
3.解決行內元素不能設定寬高屬性問題
......
缺點：
父元素塌陷問題
清除浮動
元素浮動之后，周圍的元素會重新排列，為了避免這種情況，使用 clear 屬性，clear 屬性指定元素兩側不能出現浮動元素，
1.添加額外標簽清除浮動，
<div class="parent">
<div class="f"></div>
<div style="clear:both"></div>
</div>
優點：通俗易懂，容易掌握，
缺點：添加了無意義的空標簽，后期不好維護，
2.添加<br>標簽，使用<br>標簽本身的的clear屬性
<div class="parent">
<div class="f"></div>
<br clear="all">
</div>
優點：通俗易懂，容易掌握，
缺點：添加了無意義的空標簽，后期不好維護，
3.父元素設定overflow:hidden
<div class="parent" style="overflow:hidden">
<div class="f"></div>
</div>
優點：代碼量少，
缺點：內容較多時不換行的檔案會被隱藏，無法顯示溢位元素，
4.使用偽元素:after（推薦使用）
.parent:after{
content:"";
visibility:hidden;
display:block;
width:100%;
height:0;
clear:both;
}
<div class="parent">
<div class="f"></div>
</div>
優點：結構和語意正確，沒有多余的標簽，一般不會產生新的問題，
缺點：復用方式不當會造成代碼量增多，
常用布局
-
float（浮動）
-
static（默認）
Position：static；
默認值，也就是按照檔案的流式（flow）定位，將元素放到一個合適的地方，所以在不同的解析度下，采用流式定位能很好的自適應，取得相對較好的布局效果，
Static定位不能通過z-index進行層次分級，
-
relative（相對定位）
Position：relative；
在static基礎上，讓元素在它本來的位置上有一定的偏移，
通過設定left/right、top/bottom值來實作，
相對定位的元素沒有脫離檔案流，仍處于檔案流中，依然占據原來的位置，雖然它已偏移，
相對定位相對的元素是它自身在檔案流中的位置，
-
absolute（絕對定位）
Position：absolute；
使用絕對定位將一個元素放到檔案（Document）中的指定位置，
也是通過設定left/right、top/bottom值來實作，
絕對定位的元素參照的是離它最近的父元素（非static定位），通常采用“子絕父相”的定位方式，
-
fixed（固定定位）
Position：fixed；
固定定位的元素的參照物始終是整個檔案（viewport），
通過設定left/right、top/bottom值來讓某一個元素定位在瀏覽器檔案的某一個位置，
它與絕對定位的不同之處是：絕對定位的參照是離它最近的非static定位的父元素，而固定定位的參照始終是viewport，
-
sticky（粘性定位）
Position：sticky；
不論頁面如何移動，當頁面將元素移出可視區域時，固定于頁面上，
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/356189.html
標籤：其他
下一篇：嵌入式作業會越來越少嗎？