HTML和CSS的知識點
HTML的知識點
HTML的結構：
<!DOCTYPE html>：
文件型別性為HTML5檔案
文件宣告：在HTML的文件中必不可少，且必須在文件的第一行
文件宣告的編碼格式<!---->
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>。
HTML的三個常見頭部標籤：Link meta title
一 link標籤
1作用用於為網頁連結各種檔案
2常用屬性:
rel
type:表明被連線檔案是什麼型別,可以省略
href:表明連結檔案的地址
二 meta 標籤
1 charest 屬性：單獨使用，設定文件字符集編碼格式
寫法<meta charest="UIF-8">
常見的中文編碼格式；
GB-2312：國標碼；簡體中文
GBK：擴充套件的國標碼，簡體中文
UIF-8：萬國碼Unicode碼基本相容各國語言
2 Http-equiv屬性：需配合content屬性使用，主要宣告瀏覽器如何解釋編譯文
寫法:<meta http-equiv="屬性值"content="屬性值詳細內容">
常用屬性值：Content-Type :HTML4.01之前的文件內容編碼宣告
rsfresh: 網頁重新整理
set-cookie:設定瀏覽器cookie快取
3 name
寫法:<meta name="屬性值" content="屬性值詳細內容">
重要屬性值：author作者 宣告網站作者，常用公司網址表示
keywords 關鍵字 多個關鍵字，用英文逗號隔開
description 網頁描述 搜尋引擎顯示在title下的內容
http-equiv和name屬性必須和content睡醒配合使用，前兩者只適用於宣告即將修改那些屬性，而實際的屬性值內容，在content中描述
作者
<meta name="author" content="http//www.jierui100.com" />
網頁關鍵字
<meta name="keywords" content="html5,網頁，web前端開發" />
網頁描述
<meta name="description" content="這是我在傑瑞教育開發的第一個網頁"/>
三 title 標籤
title：網頁的標題 即網頁選項卡上的文字
HTML的標籤分類
1塊級標籤 自動換行，前後隔一行
2行級標籤：、按行逐一顯示
是否自動換行，是我們判斷塊級標籤的重要指標
常見的塊級標籤
標題標籤<h1></h1>……<h6></h6> h1最大 h6最小 加粗
水平線<hr/>
段落<p></p>
換行<br/>
引用<blockquote></blockquote >：
1：表明標籤中的文字，為引用的內容，並縮排
2：cite屬性 表明引用的來源，一般為引用的網址UR
預格式<pre></pre>：
瀏覽器解析時，會按照等寬字型顯示，並且保留標籤內的空格和回車，常用於保留程式碼格式。
基於佈局的塊級標籤
一 有序列表 order list
<ol>
<li></li>
</ol>
二 無序列表 unorder list
<ul>
<li></li>
</ul>
三 定義描述列表
<di>
<dt>標題</dt>
<dd>描述項</dd>
</di>
一般情況下，標題dt只有一項，描述項dd可以有N項。
瀏覽器顯示時，標題頂格顯示，dd會縮排顯示
四 圖品組合標籤] figure
1 <figure></figure>標籤有兩個子標籤
<img src="">:一幅圖片 src:表示圖片的路徑
<figcaption></figcaption>:圖片的標題
2 瀏覽器表示為：圖片與標題上下排列，且整體向後縮排一個單位
五 分割槽標籤 div
常配合CSS使用，為網頁中最常用的分割槽標籤，常用於網頁佈局使用。
<div style="width: 300%;height: 500px;background: blue;">
<h2>標題</h2>
</div>
基於佈局的行級標籤
span（文字）：
用於包裹一部分文字，進行特定樣式的修改。
img（圖片）：
1 src屬性：表示圖片引用路徑
src常見路徑的寫法：
① 相對路徑:當圖片在當前檔案下一層時，資料夾名/圖片名src="img/icon.jpg"
當圖片與檔案在同一層時；圖片名 src="icon.jpg"
當圖片在當前檔案上一層時：../圖片名src="../icon.jpg"
使用相對路徑時，圖片最外層只能放在網站根目錄(圖片必須在專案資料夾中)
②絕對路徑：嚴禁使用 fale:///E：/
③網路連線:直接使用圖片的網路地址，但由於在別人的伺服器，不可控，所以不建議使用。
2title:當滑鼠指上時顯示的文字
3alt :當圖片無法載入時顯示的文字
4width/height:圖片的寬度高度 相當於CSS中的style="width: ;height: ;"
5align:圖片周圍的文字相對於圖片的排列方式
em（強調）
strong（強調）
q（短引用）：
常用於一句話的引用，cite表示引用的來源，瀏覽器解析時，會在內容的前後插入雙引號
a（超連結）：
1 href:超連結的跳轉地址：可以寫網路連線或本地檔案的相對路徑，同img 的src的路徑一樣
2 target:設定超連結開啟視窗的位置，_self 自身頁面開啟 _blank 新頁面開啟
3title:滑鼠指上後顯示的文字
4rel屬性：表明即將跳轉的頁面與當前頁面的關係，
rel="prev" 即將跳轉的頁面是當前文件的前一篇文章
rel="next" 即將跳轉的頁面是當前文件的後一篇文章
rel=prefetch"" 預載入 當前文件載入完成後，利用剩餘網速，將其跳轉到網頁
[功能性連線]
tencent://message/?uin=
mailto://
[錨鏈接]
1本頁面的錨鏈接
設定一個錨點:<a name="top"></a> 用name屬性表示錨點名稱
在超連結的herf屬性中使用#name跳轉到指定的錨點位置
<a href="#top">調到錨點</a>
2其他頁面錨鏈接
需跳轉的頁面設定錨鏈接
在超連結的herf屬性 檔名
<a href="aaa.html#top"></a>
i（傾斜）
b（加粗）
small（縮小字型）
em 強調 瀏覽器會顯示為傾斜
strong 強調 瀏覽器會顯示為加粗
i：傾斜
b：加粗
strong/em/i/b 標籤的區別
1 em和strong都表示強調，而且strong的強調成都大於em em和strong均可多層巢狀，表示強調程度的遞增
2em和i都能傾斜 strong和b都能加粗，但strong和em多了一層強調的語義。
可以幫助搜尋引擎快速抓取網站重點，而且HTML5要求開發者，儘可能實現程式碼的語義化
表格
表格 table
表格<table>
表格的行 <tr></tr>
表格中的單元格<td></td>
</table>
表格中的表頭列<th></th> 將tr中的td替換表示本行為表頭
th 預設加粗 且在單元格居中顯示
【table的常用屬性】
1 Border 表格的邊框屬性：當使用border等於幾設計邊框時會在所有td和table上巢狀邊框 當border加大時，只有table邊框加粗，td沒有變化。
2 Cellspacing 單元格與單元格之間的間隙 當Cellspacing值為零時，單元格之間的間隙為零，但邊框線沒有合併（邊框線還是兩條）
#合併邊框的寫法：style="border-collapse:" 使用邊框合併後 無需設定Cellspacing
3 Cellpadding 單元格內邊距 單元格中文字與單元格邊框的距離
4 Width/Height 表格的高度寬度
5Align:表格的對齊方式 :設定表格在父容器中的對齊方式 left center right
注意：表格使用Align屬性時;相當於使表格浮動，可能會導致表格後面的元素受表格浮動影響，導致佈局錯亂。
6Bgcolor：背景色
7Background：背景圖片 後接相對路徑，當背景圖和背景色同時生效時，背景圖會覆蓋背景色
8Bordercolor：邊框顏色
<td><tr><th>標籤的屬性
但行列屬性與表格屬性發生衝突時，以行列屬性為準
屬性設定優先順序: td > tr > table
1 width/heigt: 個單個的行列設定高度寬度
2 Bgcolor: 背景色
3 Align: 設定單元格中的文字在單元格中的水平對齊方式
4 Valign 設定單元格中的文字在單元格中的垂直對齊方式
5 nowrap :nowrap="nowrap" 設定單元格行末文字不斷行（屬性值可以不寫）
[表格的跨行和跨列]
1 跨列： coispan 某單元格跨N列，則單元格後的N-1個td就不要了
2跨行： rowspan 某單元格跨N列，則單元格下的N-1個td就不要了
表單
1 兩個重要屬性
①action:表單需要提交的伺服器地址
②method：表單提交資料使用的方法，get/post
>>> get和post的區別
1get 傳參使用URL傳遞，所有引數在位址列可見，不安全，get傳引數據量有限
2post 傳參使用http請求傳遞 比較安全 post可以傳遞大量資料
but:get請求的傳遞速率要比post快
2input的常用屬性
①type:設定input 的輸入型別
②name:給input輸入框起名，一般情況下，name屬性必不可少。因為傳遞資料時，使用name=輸入內容 的形式傳遞
③value:input輸入框的預設值
④placeholder：輸入框的提示內容，當input有預設的value或者輸入指示，消失。
3input-type常用屬性值
①text:文字輸入框
②password: 密碼輸入框， 輸入內容預設顯示為小黑點
③radio:單選框 checkbox 複選框
>>>使用radio/checkbox時，value屬性必填，提交時，提交的為value中的預設值
>>>radio/checkbox憑藉name屬性，確定是否屬於同一組，name相同為同組，且只能選一個
>>>使用checked="checked"屬性，設定預設選中項
④ file 檔案上傳
>>>使用accept=型別，設定只能上傳的檔案型別
⑤submit 提交按鈕，將所有的表單資料提交至後臺伺服器
⑥reset:重置表單資料 將表單恢復到預設值
⑦image 圖形提交按鈕，和submit一樣具有表單提交功能
>>>使用src屬性 選擇圖片路徑
⑧button 普通按鈕 沒有任何用
4 屬性名等於屬性值的情況
nowrap :nowrap="nowrap" 設定單元格行末文字不斷行（屬性值可以不寫）
checked="checked" 設定radio或checkbox的預設值
multiple="multiple" 設定select控制元件為多選控制元件
selected="selected":預設選中的option選項
readonly="readonly" 設定為只讀模式，不允許編輯
disabled="disabled" 禁用控制元件，當input被disabled時，該input的name和value將無法向後臺傳遞
hidden="hidden" 隱藏控制元件 等效於<input type="hidden"/>
5 下拉選擇控制元件 select
① 寫法：<select>
<option></option> //可以有N多個
</select>
② name屬性，應該寫在<select>上，所有選項只有一個name
③ multiple="multiple" 設定select控制元件為多選，可在介面使用Ctrl+滑鼠，進行多選。一般不用。
④ option常用屬性：
value="":當option沒有value屬性時，往後臺傳遞的是<option></option>標籤中的文字；
當option有value屬性時，往後臺傳遞的是value屬性的值。
title="":滑鼠指上後顯示的文字。
selected="selected":預設選中。
⑤ <optgroup label="山東省"></optgroup> :用於將option標籤進行分組，label屬性表示分組名。
6、 【文字域 textarea】
① 寫法：<textarea></textarea>
② 設定寬高style="width: 200px; height: 150px;" 自身有cols="" rows=""兩個屬性，但不常用
③ readonly="readonly" 設定為只讀模式，不允許編輯。
④ style="resize: none;" 設定為寬高不允許修改。
⑤ style="overflow: ;" 設定當文字超出區域時，如何處理。
>>> 也可以通過overflow-x/overflow-y分別設定水平垂直方向的顯示方式。
>>> 常用屬性值:hidden 超出區域的文字，隱藏無法顯示
scroll 無論文字多少，均會顯示滾動
auto 自動，根據文字多少自動決定是否顯示滾動條（預設樣式）
7 表格的邊框與標題
<fieldset> 表格的邊框
<legend>表格的標題</legend>
</fieldset>
注：一個表單可以有多組邊框+標題
【HTML5智慧表單】
①H5新增的input的form屬性，用於只想特定form表單的id，實現input無需放在form標籤中， 即可通過表單進行提交
<form id=foo>
</form>
<input form="foo"/>
②新增N多個type屬性 詳見表格
③ 新增input的屬性：
Autocomplete：自動完成功能 記憶之前輸入過的內容，在下次輸入時，根據以前的內容提示，自動完成。
絕大多數瀏覽器自動開啟
有兩個屬性值，
可以再form標籤上設定Autocomplete設定整張表單的自動完成開關，但可以再個別input上單獨設定，覆蓋form的整體設定。
Autofocus：自動獲得焦點 Autofocus="Autofocus"
Form：所屬表單 通過form表單的id指向特定的表單
Required：必填 required="required" 設定input為必填。
Pattern：驗證input的模式
Placeholder：提示
CSS的知識點
CSS常用選擇器
Css語法必須解除安裝<style>標籤中/* */選擇器命名規範
1 只能有數字子母下劃線組成
2開頭不能使數字
選擇器優先順序
1 就近原則：近者優先
2 作用於同一層時：可用權重計算
權重劃分：標籤選擇器為1
class選擇器為10
ID選擇器為100
行級樣式表style="" 1000
#ul.li.li2 li{} 優先順序權重 121
通用選擇器
1 寫法：*{}
2 作用：選中頁面中的所有的HTML標籤
3 優先順序：最低
*{
background-color: bisque;
}
標籤選擇器
1 寫法：HTML標籤{}
2 作用：選中所有對應的HTML標籤，並修改其樣式
li{
color: red;
font-size: 50px;
}
類選擇器 class選擇器
1 寫法：.class{}
2 呼叫：在需要修改樣式的HTML標籤上，使用class="選擇器名"
3 優先順序：當作用於同一層時，class選擇器大於標籤選擇器
.list{
color: blue;
}
ID選擇器
1 寫法： #選擇器名{}
2呼叫：在需要修改樣式的HTML的標籤上，使用
3優先順序：ID選擇器大於class選擇器
4ID選擇器是唯一的，同一頁面嚴禁出現同名ID
#first{
color: brown;
}
後代選擇器
1 寫法：選擇器1 選擇器2 …………{}
2 生效規則：選擇器2必須是選擇器1的後代……以此類推
子代選擇器
1 寫法 選擇器1>選擇器2>……>選擇器N{}
生效規則：選擇器2必須是選擇器1的直接子代*/
div>ul>li{
background-color: yellow;
}
交集選擇器
1 寫法：選擇器1選擇器2…………選擇器N{}
2 生效規則：必須同時滿足所有選擇器，才能生效
li .list #first{
background-color: yellowgreen;
}
並集選擇器
1寫法：選擇器1,選擇器2,……，選擇器N{}
2 生效規則：滿足任一選擇器，均可生效 */
.list,#first{
color: cadetblue;}
偽類選擇器
1寫法：選擇器名：偽型別號{}
常見的偽類狀態：
：link 未訪問
:visited 已訪問 ：active 啟用選定狀態 ：hover 滑鼠指上狀態 :focus 獲得焦點，常用於input
注:當超連結同時具有以上四種狀態，則選擇其必須按照上述順尋排列。
<style type="text/css">
a:link{
color: yellowgreen;
text-decoration: none;
}
a:visited{
color: red;
text-decoration: underline;
}
a:hover{
color: black;
text-decoration:underline;
}
a:active{
color: greenyellow;
text-decoration: none;
}
a:focus
三種使用CSS的方式
1 行內樣式表：直接在HTML開始標籤中使用style=""的方式引用
特點：將CSS程式碼和HTML程式碼完全糅雜在一起，不符合W3C關於內容與表現分離的要求不利於樣式服用
優先順序：最高
2 內部樣式表：在<head></head>中，使用<stylie type="text/css"></stylie>的方式引用
特點：將CSS程式碼與HTML程式碼分離，但是沒有徹底分離CSS檔案與HTML檔案，不利於多頁面複用樣式
3 外部樣式表：使用link標籤連結CSS檔案 <link rel="stylesheet" type="text/css" href="CSS/CSS110.css" />
特點：實現CSS檔案與HTML檔案徹底分離，有利於實現樣式複用及後期維護
CSS常用文字屬性
1、字型、字號：
font-weight:字型的粗細，可選屬性值：bold加粗 lighter細體 100~900數值(400正常，700 bold)
font-size:字型大小 **PX **%（瀏覽器預設字型大小的百分比，絕大部分預設16px）
font-family:字型族，設定字型。
>>>多個字型樣式間用逗號分隔，瀏覽器解析時，會從左往右依次解析，選擇可用字型。
>>>一般前面使用具體字型名稱，最後一個使用字型族類名稱。
（常用字型族名稱：襯線體serif 非襯線體sans-serif(常用) 等寬體Monospace）
>>>例如：font-family:Arial, 'Microsoft Yahei', sans-serif;
font-style:字型樣式,正常(normal) 斜體(italic)
font-variant：small-caps; 將字母轉為小型大寫字型。
(瞭解)font縮寫形式：font-style font-variant font-weight font-size/line-height font-family
>>> 使用注意事項 ：
① 順序必須嚴格按照上述順序；
② 多個樣式之間用空格分割，而且font-size/line-height 必須作為一對用/分割
③ font-size和font-family必須指定，其他樣式不指定將採用預設樣式顯示；
>>> 例如：font:italic bold 75%/1.8 'Microsoft Yahei', sans-serif;
斜體 加粗 字號/行高 字型族(微軟雅黑，非襯線字型族)
2、字型顏色：
color:字型顏色
opacity:透明度,0~1之間的數字。 調整時控制元件以及子控制元件均會透明，而使用rgba調整時，只會時本控制元件透明，子控制元件不會發生透明度變化。
3、行距、對齊等：
line-height:行高 ① 畫素單位 48px ② 不帶px 正常行高的倍數 ③百分數 同2
>>> 典型應用，調整控制元件中文垂直居中的方式：控制元件的height=控制元件的line-height
text-align:塊級元素中文行級元素字的水平對齊方式 left center right
letter-spacing:字元間距,字與字之間的間距
text-decoration:文字修飾
下劃線underline、刪除線line-through、上劃線overline、none
overflow:控制超出範圍文字的顯示方式(auto 根據文字多少自動顯示滾動條，scroll始終顯示滾動條， hidden 超出範圍文字隱藏) 可以通過overflow-x
overflow-y分別設定水平垂直方向
text-overflow:設定多餘文字的顯示方式 clip裁剪掉
ellipsis省略號
>>>【重點】讓每行多餘文字顯示省略號：
① white-space: nowrap; 如果是中文，需設定行末不斷行
② overflow: hidden; 設定控制元件超出範圍隱藏
③ text-overflow: ellipsis; 設定多餘文字省略號顯示
white-space: nowrap; 設定中文行末不斷行顯示
word-break: 瀏覽器預設在空格處斷行，當一個單詞長度超出範圍時，會不斷行顯示， break-all 允許在單詞內換行。
text-shadow:文字陰影，有四個屬性值：
①水平陰影距離 必選，數值越大，陰影右移
②垂直陰影距離 必選，數值越大，陰影下移
③陰影模糊距離 可選，數值越大，陰影越模糊。預設為0，不模糊
④陰影顏色 可選，預設為黑色
text-indent:首行縮排，可用畫素值調整縮排大小
text-stroke: -webkit-text-stroke: 0.2px #008000; 描邊的粗細，描邊的顏色
顏色常用單位
十六進位制:#ffffff
顏色名稱：red
RGB顏色：RGB（255.255.255）
RGBA:第四位數表示透明度，數值0-1
CSS常用背景屬性
background：背景
background-color:背景色
background-image:背景圖,background-image: url(圖片地址相對路徑);背景圖和背景色同時存在時，背景圖會覆蓋背景色
background-repeat：背景圖重複方式 ，no-repeat不平鋪 repeat平鋪(預設) repeat-x水平平鋪
repeat-y垂直平鋪
background-size:背景圖大小。
【指定寬度高度】
>>> 寬高的寫法，第一個屬性值為寬度，第二個屬性值為高度，可以：①直接寫畫素 ②寫百分比（父容器寬高的百分比）
>>> 當只有一個屬性值時，預設為寬度。高度等比縮放。
當有兩個屬性值時，會按照指定的高度寬度進行壓縮/拉伸顯示。
【其他屬性值】
>>> contain:圖片等比縮放，縮放到寬或高的某一邊等於父容器的寬高，另一邊按照圖片大小縮放（可能導致部分空餘區域無法覆蓋）
>>> cover:圖片等比縮放，使背景影象完全覆蓋背景區域。(可能導致背景圖部分割槽域無法顯示)
background-position：位置座標、偏移量
>>> 指定位置：left/center/right top/center/bottom
當只寫一個屬性值時，另一個預設居中
>>> 填寫座標：水平位置 垂直位置 (畫素或百分比形式)
① 當只寫一個屬性值時，預設寫的為水平方向，則垂直居中
② 當使用畫素時：圖片的左上角往各個方向移動的實際距離
水平方向：正數右移 負數左移 垂直方法：正數下移 負數上移
(左負有正 上負下正)
③ 當使用百分數時，一般只能是正數。代表去掉圖片後，剩餘空白距離的分佈比例。例如 background-position：30%; 水平方向去掉圖片後，剩餘區域3:7分