HTML

選擇什么元素取決于內容的含義而不是顯示的效果

語義化

• 為了搜索引擎優(yōu)化（SEO）
• 為了讓瀏覽器理解網(wǎng)頁：閱讀模式 語言模式
• HTML元素周期表

文本元素

• h: h1-h6
• p段落
• span無語義在刺，僅用于設置樣式
• 以前某些元素在顯示時會獨占一行（塊級元素）蚣驼，而某些元素不會（行級元素）颖杏，到HTML5已經(jīng)棄用這種說法输玷，內容類別
• pre預格式化文本[無語義]
• 空白折疊：在源代碼中的連續(xù)空白字符（空白換行制表）在頁面顯示時欲鹏，會被折疊為一個，
• 在pre元素中不會出現(xiàn)空白折疊膘盖，按原代碼侠畔，該元素通常用于顯示代碼
• pre的本質：它有一個默認的CSS white-space:pre

HTML實體

• 實體字符通常用于頁面中顯示一些特殊符號
• &單詞
• &#數(shù)字
• <

• &

• 空格 &nbsp
• & &nmp

a元素

• 超鏈接

• target屬性：表示跳轉窗口位置（_self/_black）

• 跳轉地址软棺；跳轉到某個錨點喘落；功能鏈接

• <a href='javascript:alert('你好')'></a>

• <a href='tel'></a>

  路徑的寫法

• 絕對路徑：站外資源
• 協(xié)議名：//主機名：站口號瘦棋、路徑（協(xié)議相同可省略協(xié)議）
• 相對路徑：站內資源
• 以./開頭表示當前資源所在的目錄
• 以../表示返回上一級目錄

  圖片元素 img元素

• src屬性;source
• alt屬性：當圖片資源失效時用文字表示
• 和<a><img></a>
• 和map元素
  <map name='1'>
<img usemap='#1'>
  map劃分區(qū)域
  <area shape="x,y,z" coords='''' href='' alt=''></area></map>

• 衡量坐標避免誤差凰狞，需要用專業(yè)的衡量工具（QQ截圖赡若，屏幕發(fā)100%）和figure元素關聯(lián)

• 指代定義通常把圖片包括起來

• <figure><h1></h1><img></figure>

  多媒體元素video audio

• controls顯示控件、布爾屬性
• autoplay自動播放往枣、布爾屬性
• muted靜音播放分冈、布爾屬性
• loop循環(huán)播放雕沉、布爾屬性

  列表元素

• 有序列表 ol li
• 無序列表 ul li
• 定義列表 dl>dt（標題dd描述）

  容器元素

• 該元素代表一個塊區(qū)域坡椒，內部用于放置其他元素
• div沒語義
• 語義化容器元素
• header通常表示頁頭倔叼，也可以表示文章的頭部
• footer通常用于表示頁腳丈攒，也可用于表示文章的尾部
• article通常英語表示整片文章
• section通常用于表示文章的章節(jié)
• aside通常用于表示側邊欄

元素的包含關系

• 塊級元素可包含行級元素巡验，行級元素不可以包含塊級元素际插，a元素除外
• 元素的包含關系由元素的內容類別決定
• 容器元素中可包含任何元素
• a元素幾乎可以包含任何元素
• 某些元素有固定的子元素，dl>dt/dd,ul>li,ol>li
• 標題元素和段落元素不能嵌套显设，并且不能包含容器元素

CSS

color

• 元素內部的字體顏色

• 預設值:定義好的單詞

• 三原色：色值 rgb(,,)

• 淘寶紅ff4400

• background-color

  字體相關

• 元素內部文字的尺寸大小

• px像素框弛，高度占的像素

• em相對父元素的字體大小--->html也無字體，則使用基準字號（瀏覽器設置）

• font-weigt：文字粗細程度捕捂，可以取值數(shù)字功咒，也可以取值預設值

• font-family:字體愉阎，必須用戶計算機中存在的字體力奋，設置多個字體榜旦，sans-serif非襯現(xiàn)字體

• font-size:字體樣式，通常設置傾斜：italic景殷；strong:重要的溅呢，不能忽略的內容;em表示強弱的內容（斜體）

• text-decoration:underline(下劃線)

• a元素下劃線，del中劃線

• text-indentz:首行文本縮進

• line-height:行高（多行文字時不設置絕對單位猿挚，用相對單位咐旧，直接用數(shù)值），單行文本垂直：絕對單位

• text-align:元素內部文字的水平排列方式

• letter-space文字間隙

選擇器

幫助你精確的選中想要的元素

• ID選擇器
• document.getElementById()
• class選擇器
• document.getElementsByClassName()
• 通過標簽的class名進行選擇绩蜻，返回的是一個數(shù)組铣墨，當我們需要對單個進行操作時，可利用數(shù)組的操作來選擇單個的元素办绝；這里需要注意的是伊约，不同于ID選擇器，因為是一個數(shù)組所以是Elements,注意有一個s孕蝉，又由于在ES6中有class關鍵字屡律，為了避免重復這里用的是ClassName
• 標簽選擇器
• document.getElementsByTagName()
• name選器
• document.getElementsByName()
• name選擇器一般用于表單，含有name屬性的標簽降淮；同樣超埋，返回的是一個數(shù)組。
• 屬性選擇器
• *[title] {color:red;}img[alt] {border: 5px solid red;}
• 根據(jù)屬性和屬性值選中元素
• 偽類選擇器
• 選中某些元素的某種狀態(tài)
• hover：鼠標懸停狀態(tài)
• active：激活狀態(tài)佳鳖，鼠標按下狀態(tài)
• link:超鏈接訪問的狀態(tài)
• visited:訪問過后的狀態(tài)
• link>visited>hover>active
• 偽元素選擇器
• ::before{content:'<<'}
• ::after{content:}
• 選擇器的組合
• 后代元素 空格
• 子元素 >
• 相鄰兄弟元素+
• 后邊出現(xiàn)的所有兄弟元素~
• 選擇器的并列
• 多個選擇器用逗號隔開

層疊樣式表

• 聲明沖突：同一個樣式多次應用到同一個元素
• 層疊：解決聲明沖突的過程霍殴，瀏覽器自動處理（權重計算）
• 1，比較重要性2.比較特殊性3.比較源次序
• 比較重要性
• a.作者樣式的!important
• b.作者樣式表中的普通樣式
• c.瀏覽器默認樣式
  -比較特殊性：
• 總體規(guī)則：選擇器中的范圍越窄越特殊
• 具體規(guī)則:通過選擇器計算出一個4位數(shù)
• 千位：如果是內聯(lián)樣式計位1系吩，否則為0
• 百位：將選擇器中所有ID選擇器的數(shù)量
• 十位：等于選擇器中類選擇器繁成、偽類選擇器、屬性選擇器
• 個位：等于選擇器中元素選擇器淑玫、偽元素選擇器
• 應用
• 重置樣式表
• reset.css
• normslize.css
• meyer.css

繼承

• 子元素會繼承父元素的css樣式
• 文字內容相關的屬性都可以繼承

屬性值的計算過程

• 渲染每個元素的前提條件：該元素的所有css屬性必須有值

  
  
  在這里插入圖片描述
• 1巾腕、確定聲明值：參考樣式表中沒有沖突的聲明，作為css的屬性值絮蒿，瀏覽器樣式
• 2尊搬、層疊沖突：對樣式表中有沖突的聲明使用層疊規(guī)則，確定css屬性
• 特殊的兩個css取值:
• inherit強制讓元素繼承;initial表示初始值（默認值）

盒模型

• 行盒:display:inline-block
• 塊盒：display：block

寬高

• 改變寬高范圍
• 衡量設計稿尺寸的時候土涝，往往使用的是邊框盒佛寿，但設置width和height則設置的是內容盒
• 1.精確計算2.css3屬性：box-sizing:content-box/border-box
• 背景覆蓋范圍
• 默認情況下覆蓋邊框盒
• 可以通過background-clip進行修改
• 溢出處理
• 默認visible
• overflow控制內容溢出邊框盒的處理方式
• hidden/scroll（可控制水平overflow-y/x）
• 短詞規(guī)則
• word-break會影響文字在什么位置截斷換行
• normal普通，字/單詞截斷
• break-all截斷所有，英文單詞內部截斷
• keep-all所有文字都在單詞之間顯示冀泻，中文則一行顯示（空格位置顯折）
• 空白處理
• 只能控制單行文本
• white-space:nowrap(不換行）
• text-overflow:elipsis(文本溢出用點代替）
• pre不空白折疊

行盒的盒模型

• 盒子沿著內容延伸
• 行高不能設置常侣，寬高：調整盒行的寬高，應使用字體大小弹渔，行高字體類型間接觸調整
• 內邊距（填充區(qū)）：水平方向有效胳施，垂直方向只會影響背景，不會實際占據(jù)空間
• border/margin同上

行塊盒inline-block

• 不獨占一行肢专，盒模型所有尺寸都有效
• 空白折疊發(fā)生在行塊盒的內部或者行塊盒之間

可替換元素和非可替換元素

• 大部分元素，頁面上顯示的結果博杖，取決于元素內容，成為非可替換元素剃根；小部分元素，頁面顯示的結果狈醉，取決于元素屬性，成為可替換元素舔糖，例如：img莺匠、video、audio
• 可替換元素類似于行塊趣竣，盒模型中所有尺寸都有效
• object-fit:fill/cover圖片的寬高自適應

視覺格式化模型（布局規(guī)則）

• 頁面中的多個盒子排列規(guī)則

• 1.常規(guī)流2.浮動3.定位

• 常規(guī)流布局

• 所有元素默認情況下都屬于常規(guī)流布局

• 總體規(guī)則：塊行獨占一行，行盒水平依次排列

• 包含塊：每個盒子都有它的包含塊遥缕，包含塊決定了盒子的排列區(qū)域

• 絕大部分情況下，盒子的包含塊单匣，為其父元素的內容盒

• 塊盒;

• 1.每個塊盒的總寬度必須剛好等于包含塊的寬度，寬度默認值auto户秤，margin：0；width吸收能力強于margin鸡号；auto將剩余的空間吸收掉转砖；

• 若寬度、邊框鲸伴、內邊距府蔗、外邊距計算后晋控，仍然有剩余空間，該剩余空間全部被margin-right吸收掉姓赤，（和文字的排列方式有關）

• 2.每個塊盒垂直方向上的auto值

• height:auto適應內容的高度

• margin;auto表示0

• 3.百分比取值

• padding赡译、寬高、margin可取百分比

• 所有百分比相對包含塊的寬度

• 高度的百分比:

• 包含塊的高度是取決于子元素的模捂，設置百分比無效

• 包含塊的高度是取決于子元素的高度捶朵，百分比相對于父元素的高度

• 4.上下外邊距的合并（父子元素相鄰也合并）

• 兩個外邊距取最大值

• 浮動

• 應用場景：文字環(huán)繞、橫向排列

• 基本特點：修改float屬性值：默認值為none,left(左浮動狂男，元素靠左靠上）综看，right(元素靠右靠上）

• 當一個元素浮動后，元素必定為塊盒（更改為display:block）

• 浮動元素的包含塊為父元素的內容盒

• 浮動的表現(xiàn)：浮動的框可以向左向右移動時岖食，直到它的外邊緣碰到包含塊或另一個浮動框的邊緣為止红碑。

• 盒子尺寸

• 1.寬度為auto時，適應內容寬度

• 2.高度為auto時泡垃，與常規(guī)流一致析珊，適應內容的高度
  -3. margin為auto是為0

• 4.邊框、內邊距蔑穴、百分比設置與常規(guī)流一樣

• 部分無視和全部無視

• 1.使用float脫離文檔流時忠寻，其他盒子會無視這個盒子，但其他盒子內的文本會為這個元素讓出位置存和，環(huán)繞在周圍（可以說是部分無視）

• 2.使用absolute脫離文檔流的元素奕剃，其他盒子內的文本都會無視它（全部無視）
  如果一個元素被設置了position:absolute/fixed，則該元素不能被設置為float,因為這是兩個不同的流捐腿，一個是浮動流纵朋，另外一個是‘定位流’

• 盒子排列

• 1.左浮動的盒子靠上靠左排列

• 2.右浮動的盒子靠上靠右排列

• 3.浮動盒子包含在排列的時候，會避開常規(guī)流的排列

• 4.常規(guī)流盒子在排列的時候茄袖，無視浮動盒子

• 5.行盒在排列時會避開浮動盒子如果沒有文字在行盒中操软，瀏覽器會自動生成一個行盒包裹文字，該行盒叫匿名行盒

• 6.外邊距合并不會發(fā)生

• 高度塌陷：原因：常規(guī)流盒子的自動高度宪祥，在計算時蝗羊，不會考慮浮動盒子

• 清除浮動：涉及的CSS屬性：

• 1.clear:none

• both/left/right:清除左右浮動肘交，該元素必須出現(xiàn)在所浮動的下方

• 2.clearfix::after{
content:''
display:block
clear:both
}

• 定位

• 手動控制元素在包含塊的精確位置

• position屬性值：

• 默認值：static靜態(tài)定位（不定位）

• relative相對定位

• absolute絕對定位

• fixed固定定位

• 一個元素只要position的值不是static認為該元素是一個定位元素

• 定位元素會脫離文檔流、相對定位除外

• 一個脫離文檔流的元素：

• 1.文檔流的元素擺放時腻要，會忽略脫離了文檔流的元素

• 2.文檔流中元素計算自動高度時雄家，會忽略脫離了文檔流的元素

• 相對定位：

• 不會導致文檔脫離文檔流胀滚，只是讓元素在原來位置上進行偏移

• 盒子的偏移不會對其他盒子造成任何影響

• 絕對定位

• 1.高度為auto咽笼，適應內容

• 2.包含塊的變化：找祖先元素中第一個定位元素剑刑，該元素的填充盒

• 固定定位

• 1.其他情況和絕對定位完全一樣

• 2.包含塊不一樣，固定為視口（瀏覽器的可視窗口）

• 定位的居中

• 多個定位元素重疊時：堆疊上下文钮惠，只有定位元素設置z-index有效素挽，可以是負數(shù)预明，設置z-index锌历，通常情況下值越大究西，越靠近用戶卤材，常規(guī)流和定位元素可覆蓋浮動

• 絕對定位峦失，固定定位一定是塊盒

• 絕對定位尉辑，固定定位一定不是浮動

表單元素

• 主要用于收集用戶數(shù)據(jù)
• 1.input元素，type='text'/'password'密碼/'date'日期選擇框/'serch'搜索框/'range'劃塊選擇器/‘color’顏色選擇/'number'數(shù)字輸入框/'checkbox'多選框/‘radio’單選框
• value：輸入框的值
• placeholder屬性隘蝎，顯示提示的文本嘱么，文本框沒有內容時顯示
• input元素可以制造按鈕顽悼，當type的值為reset,button,submit時
• 2.select元素，下拉列表選擇框冰评，mutble多選
• 通常和option元素配合使用（下拉列表的選項）
• selected='selected'默認選中
• <opygroup label=''></opygroup>下拉框選擇分組集索，分組是不能選擇的
• 3.fextarea元素：文本域务荆，多行文本框穷遂，col橫向多少字蚪黑，rows可寫多少行，沒有空白折疊
• 4.按鈕元素：button,type屬性：reset,submit,button默認值是submit
• 5.表單狀態(tài)：readonly表示只讀抒寂，不會改變顯示樣式屈芜；disabled是否禁用井佑，會改變現(xiàn)實樣式
• 6.配合表單元素的其他元素
• label通常配合多選和單選框使用眠寿，顯示關聯(lián)
• <input id='radmore' type='radio'>可通過for屬性讓lable元素關聯(lián)某一個表單元素盯拱，for屬性書寫表單元素id的值
• <lable for='radmore'>男</lable>
• 隱式關聯(lián)，input套在lable之中
• datelist數(shù)據(jù)列表宁舰，該元素本身不會顯示到頁面明吩，通常用于和普通文本框配合使用，
• <datalist id='userAgen'>
<option value=""></option>
</datalist>
<input type="text" list='userAgen'>
• 7.form元素：通常會將整個表單元素放置到form元素的內部低葫，作用是當提交表單時嘿悬，會將form元素善涨，內部的表單內容以后合適的方式提交到服務器钢拧。
• 8.fieldset元素炕横，表單分組
• 9.美化表單元素
• 新的偽類
• focus
• checked單選和多選被選中的樣式
• 常見用法：
• a.重置表單元素樣式
• b.設置textarea是否允許調整尺寸份殿，resize:both/none/horizontal(水平方向可以)/vertical(垂直方向可以)
• c.文本框邊緣到內容的距離:方式一：使用padding卿嘲，方式二：使用text-indent首行縮進
• d.控制單選和多選的樣式

表格元素

表格不用使用于網(wǎng)頁布局表格的渲染速度更慢

其他元素 元素周期表

• <abbr>縮寫詞
• <tim>提供給瀏覽器
• <b>區(qū)分同等重要的元素拾枣，主要用于加粗字體，dataTime屬性
• <q>表示一小段引用文本忿磅，cite屬性表示引用 來自哪里
• <blockquote>表示一大段引用的文本凭语，cite屬性表示引用 來自哪里
• <hr>分割線
• meta name ='' description='' content=''用于搜索引擎優(yōu)化
• <link>鏈接外部資源似扔，rel屬性：relation，鏈接的資源和當前網(wǎng)頁的關系豪墅，type屬性：MIME類型鏈接的資源類型

其他

• 1.透明度
• opacity它設置的是整個元素的透明偶器，它的取值0~1
• 在顏色位置設置alpha通道（rgba）
• 2.鼠標
• 用cursor設置屏轰，默認值auto
• cursor:url('../../icom')也可以自定義
• 3.盒子隱藏
• display:none不生成盒子
• visibility:hidden生成盒子憋飞，只是從視角上移除盒子榛做，盒子仍然占據(jù)空間
• 4.背景圖
• img屬于HTML的概念
• 背景圖屬于css的概念
• 當圖片屬于網(wǎng)頁內容時，必須使用img圖片
• 當圖片僅用于美化頁面頁面時厘擂，必須使用背景圖
• 設計的css屬性
• background-img:背景圖會在X軸好Y軸重復
• background-reapt:
• background-size:預設值contain cover,類似于object-fit驴党，數(shù)值或百分比相對于盒子
• background-position：center（橫港庄、縱向居中）鹏氧，top/botton/left/right,雪碧圖（精靈圖）（spirit）
• background-attachment:通常用它控制背景圖是否固定佩谣，fixed
• 背景圖和背景顏色混用
• 速寫（簡寫）background:背景圖茸俭，重復，尺寸艇炎，50% 50% 缀踪，100%，fixed,顏色
• 5.ifram元素：可替換元素
• 通常是行盒
• 通常顯示的內容取決于元素的屬性
• css不能完全控制其中的樣式
• 具有行塊盒的特點
• 6.@規(guī)則
• import:'路徑'奏候，導入另外一個文件
• charset=‘utf-8’必須寫到第一行寺惫，告訴瀏覽器該字符編碼
• 7.web字體和圖標
• font-family:'...'
• 當用戶電腦上沒有安裝相應字體時笆焰，強制讓用戶下載該字體
• 使用@font-face{
  font-family遍烦；‘名字’
  src='url=(../..);'
  }