前端基礎知識入門概要（自我回顧用）
阿新 • • 發佈：2018-06-19
AD desc 功能 seo side 自然 所有 sid article
HTML基礎
HTML術語
HTML註釋 <!--註釋內容-->
用於描述代碼功能，瀏覽器解析時會忽略註釋內容。
HTML元素
HTML文檔的重要組成部分，一個HTML由大量元素組成，HTML中的所有內容結構，都是靠元素組織到頁面的。
元素的組成部分
一般元素
<a href = "/classroom/17" > 立即加入 </a>：元素 <a> 標記名 <a href = "/classroom/17"> 起始標記：表示元素開始 </a> 結束標記 ：表示元素結束 href = "/classroom/17" ：屬性 href ：屬性名 “/classroom/17”：屬性值 立即加入：內容空元素
又叫自閉合元素，空元素只有開始標記，沒有元素內容和結束標記。 舉例： 圖片 <ing src= "圖片路徑"> alt="編程入門基礎班"> 註意： 視頻和音頻不是空元素。元素的層次結構
一個元素的內容可以包含其他元素，形成嵌套的層次結構。 註意：兩個元素之間不能相互嵌套1.若A元素直接包含B元素則： A為B的父元素，B為A的子元素；
2.若兩個元素有同一個元素：它們互為兄弟元素；
3.若A直接或間接包含B則： A是B的祖先元素，B是A的後代元素。HTML文檔結構
文檔聲明 <!DOCTPYE html> html <html lang="zh-cmn-Hans">head body
meta title 其他元素
1.文檔聲明：既不是元素也不是註釋，總出現在代碼第一行，告訴瀏覽器解析模式；
2.html元素：又叫根標記、根元素，它是其他所有元素的祖先元素；相關屬性：lang（語言） 該屬性指定文檔的文字使用何種自然語言書寫的，可能會影響瀏覽器的語言閱讀和翻譯行為。3.head元素：又叫文檔頭，它是html的第一個子元素；
head元素的內容不會顯示到頁面上，可以包含其它一些元素用於描述頁面的附加信息; meta（標識頁面的其它元數據（頁面相關的附加信息）這是一個空元素，作為head的第一個子元素）; title（標識文檔標題，會顯示在瀏覽器標題欄或標簽頁上）、keyword、description等，利於SEO（搜索引擎優化）4.body元素：又叫文檔提，網頁中所有可視內容都放置在內，定義文檔的內容結構。
***絕對路徑和相對路徑
絕對路徑：當網站部署到服務器後，網站中的所有資源都可以通過一個地址（訪問），這種格式書寫的路勁，叫做絕對路徑。
書寫格式：協議：//域名/目錄 使用場景： 訪問站外資源時，只能用絕對路勁 訪問站內資源時，若網站已部署到服務器，可以使用絕對路徑，並可以省略協議和域名相對路徑：是相對於當前資源的位置
書寫格式：./路徑
使用場景：只能用於訪問站內資源
./表示當前資源所在目錄，必須作為相對路徑開始，可省略
../表示返回上一層目錄。CSS引用
1.使用外部樣式表
<link rel = "styleshet" href="main.css"> 是<head>子元素。 特點： 1.CSS代碼在一個獨立的文件中，html通過link元素引入。 2.使HTML代碼更加純凈，有利於程序員和搜索引擎的閱讀。是開發頁面的常見做法。2.使用內部樣式表
特點： 1.將CSS代碼寫到html文檔的style元素中，style也是head子元素。 2.沒有了樣式表文件，在某些時候提升效率。 3.多個頁面難以共享樣式 ，不利於代碼復用。 4.html和css代碼混雜，不利於程序員和搜索引擎閱讀。 5.在某些對效率要求苛刻或測試的場景下使用。3.使用內部樣式表
特點： 1.CSS代碼寫在某個元素開始標記的style屬性中，行內樣式，不寫選擇器 2.在某些時候提升效率。 3.多個元素難以共享樣式，不利於代碼復用。 4.不利於搜索引擎和程序員閱讀。 5.在測試的場景下使用。
CSS術語
CSS註釋
書寫格式：/*註釋內容*/ 快捷鍵：ctrl+?CSS規則
css代碼由一個一個規則組成，每個規則指定了哪些元素運用什麽樣式。 h1{color:red;text-align:center;} （規則） 選擇器 聲明塊（樣式）選擇器
1.元素選擇器
書寫格式：標記名{聲明塊} 意義：html中所有與標記名匹配的元素都應用聲明塊的規則。2.類選擇器 （多個類名 用空格隔開）
書寫格式：.類名{聲明塊} 意義：所有class屬性為指定類名的元素都應用聲明塊的規則。3.id選擇器 （id具有唯一性）
書寫格式：#id值{聲明塊} 意義：屬性id為指定值的元素，將應用聲明塊的規則。
語義化結構元素
和div沒有本質區別,只不過有語義。
- header：用於表示頁面或某個區域頭部；body的第一個子元素，一般有img這個子元素，可以在一個頁面中出現多次。
- nav：導航欄；子元素或後代元素a。
- aside：用於表示跟周圍主題相關的附加信息：側邊欄、廣告、評論、相關文章。
- article：用於表示文章或其他可獨立頁面存在的內容。
- section：用於表示一個整體的一部分主題。
- main：主題，一個頁面只能出現一次。
footer：用於表示頁面或某個區域的腳註。
a標簽
<a target="頁面打開位置" href="目標"> 內容 </a>
前端基礎知識入門概要（自我回顧用）