本文簡介

• 面試大廠,HTML/CSS,JS,網絡基礎這三塊硬知識是必不可少的
• 我整理了一些備考筆記，分享給大家
• 初中級前端到高級前端的蛻變，從基礎知識開始~

2 塊元素和行元素

2.1 請說出3個H5新增的塊元素，并介紹他們的應用場景

• aside:表示article元素內容之外，與article元素內容相關的輔助信息
• figure:代表一個塊級圖像，包含說明。figure添加標題時，與figcaption元素結合使用。
• dialog:表示幾個人直接的對話。與dt和dd元素結合使用，dt表示講話者，dd表示講話內容。

2.2 行內元素和塊元素的區別

• HTML元素分為行內、塊狀、行內塊元素三種。
• 塊元素和行內塊元素可以設置寬高
• 行內元素不可以，高度由內容撐開
• 三者是可以通過display屬性任意轉換的 block 塊狀元素 inline-block行內塊元素 inline 行內元素

2.3 塊級元素特征

• 可以設置寬高
• 設置margin、padding的上下左右都有效
• 元素獨占一行
• 多個塊狀元素一起寫，默認排列從上至下

我自己是一名從事了多年開發的web前端老程序員，目前辭職在做自己的web前端私人定制課程，今年我花了一個月整理了一份最適合2020年學習的web前端學習干貨，各種框架都有整理，送給每一位前端小伙伴，想要獲取的可以關注我的頭條號并在后臺私信我：前端，即可免費獲取。

2.4 行內塊元素特征

• 能設置寬高
• 不會自動換行
• 多個行內塊一起寫，默認從左至右排列

2.5 行內元素特征

• 設置寬高無效
• 設置margin的上下無效，左右有效，設置padding上下左右都有效（并且會撐大空間）
• 不會自動換行

3 CSS

3.1 請說出3個CSS瀏覽器前綴

1. -ms- 兼容IE瀏覽器
2. -moz- 兼容firefox
3. -o- 兼容opera
4. -webkit- 兼容chrome和safari

使用demo

div {  -ms-transform: rotate(0);  -webkit-transform: rotate(0);  -moz-transform: rotate(0);  -o-transform: rotate(0);  transform: rotate(0);}

CSS前綴自動補全：autoprefixer

3.2 盒模型

1. 盒模型分為標準盒模型和怪異盒模型(IE5.X和6)兩種
2. 標準盒模型 width = content
3. 怪異盒模型 width = content + padding + border

已知: margin:20px; border:10px; padding:10px; width:200px; height:50px;


標準盒模型:1\. 占用寬:margin*2+padding*2+border*2+width= 20*2+10*2+10*2+200 = 2802\. 占用高:margin*2+padding*2+border*2+height= 20*2+10*2+10*2+50 = 1303\. 盒子實際寬度:padding*2+border*2+width= 10*2+10*2+200 = 2404\. 盒子實際高度padding*2+border*2+height= 10*2+10*2+50 = 90


怪異盒模型:1\. 占用寬:margin*2+width= 20*2+200 = 2402\. 占用高:margin*2+height= 20*2+50 = 903\. 盒子實際寬度:width = 2004\. 盒子實際高度height = 50

IE8及更早版本不兼容問題解決方案：在HTML頁面聲明

3.3 box-sizing都有哪些值？他們的寬高分別如何計算？

1. content-box(標準盒模型)|border-box(怪異盒模型)|inherit(繼承父元素)
2. content-box的寬高由content決定
3. border-box的寬高由content+padding+border決定

4. BFC

4.1 什么是邊界塌陷（或邊界重疊）？

1. 兄弟div（上下margin塌陷）
2. 父子div（如果父級div沒有padding\border\inlinecontent, 子級div的margin會向上查找邊界塌陷的div，直到找到某個標簽包括border\padding\inline content的其中一個，然后按此div進行margin）

4.2 什么是BFC（格式化上下文）？如何實現？

BFC（塊狀格式化上下文，獨立的盒子，布局不受外部影響，但是如果同一個BFC中，同級塊狀元素的margin-top和margin-bottom會重疊）

只要元素滿足下面的任一條件，都會觸發BFC特征。

1. body根元素
2. position: fixed|absolute(絕對定位元素)
3. float(浮動元素) 除了none
4. overflow: hidden|auto|scroll (除了visible之外的值)
5. display: inline-block\ table-cells\flex （具有table-的屬性）

解決問題:

1. 解決邊界塌陷問題
2. 解決浮動元素導致父元素高度塌陷問題
3. 解決阻止元素被浮動元素覆蓋問題

4.3 多個inline元素之間會有空隙，為什么？如何解決？

元素被當成行內元素排版時，元素直接的空白符會被瀏覽器處理，根據white-spack的處理方式（默認是normal,合并多余空白），Html代碼在回車換行時被轉成一個空白符，在字體不為0的情況下，空白符占據一定寬度，所以inline-block元素之間就出現了空隙。

復現<ul>  <li>首頁</li>  <li>登陸</li>  <li>資源</li>  <li>社區</li>  <li>幫助</li></ul>


解決辦法：

1. 多個inline元素寫在同一行
2. 將父級元素的font-size:0
3. 給inline元素添加float的樣式
4. 設置子元素的margin為負值
5. 設置父元素display:table和word-spacing:-1em

5 浮動

5.1 浮動會出現什么問題？

• 浮動會導致父元素高度塌陷
• 會覆蓋其他元素

5.2 如何清除浮動？

• 父元素加上overflow:hidden
• 在浮動元素的后面（同級），添加一個div，屬性是clear:both
• 在父元素添加一個偽元素 .clearfix:after { display: block; height: 0; visibility: hidden; clear: both; content: '';} .clearfix{ //IE6模式下 zoom:1;}
• 在父元素添加雙偽元素 .clearfix:before,.clearfix:after { display: table; content: '';}.clearfix:after { clear: both;}.clearfix { zoom: 1; //兼容IE6下}

6 position都有哪些值？

• relative 相對定位 （相對元素在文檔中的初始位置定位）
• absolute絕對定位（相對于定位元素定位，最頂級是body）
• fixed 固定定位 （相對窗口定位）
• static 文檔流


7 CSS的選擇器

7.1 CSS的選擇器有哪些？

• id 選擇器
• class 選擇器
• tag 選擇器
• 屬性 選擇器（a[href=""] ）
• 派生 選擇器

7.2 優先級高低如何判斷？

• 不同級優先級： ！important>內聯>id>class = 屬性 = 偽類 >標簽 = 偽元素 > 通配符（*）
• 同一級別： 后來居上 （后寫覆蓋先寫） 內聯樣式 > 內部樣式表 > 外部樣式表 > 導入樣式 @import 

優先級相同時會發生什么? 樣式被覆蓋

7.3 列舉幾條常用的CSS reset

• *{ margin:0; padding:0;}
• ol, ul { list-style:none;}
• body {line-height:1;}

7.4 是否了解normalize？

normalize.css是一個css reset的替代方案。

• 保護有用的瀏覽器默認樣式而不是完全去掉
• 一般化樣式：為大部分html元素提供
• 修復瀏覽器自身的bug
• 優化css可用性
• 解釋代碼

7.5 如何做到一個list中奇數和偶數行的背景色不一樣？

 ul>li:nth-child(2n+1) {    background-color: red; }ul>li:nth-child(2n) {    background-color: yellow;}

7.6 如何做到一個list的第一行沒有上邊框？

 ul>li:first-child {      border-top: none;  }

有夢想的人，眼睛會發光。

希望屏幕前的你，能夠關注我一波。接下來，我會分享前端各種干貨，以及編程中的趣事。

我們在定義列表時，我們通常想得到如下的效果：

下面是我們的html代碼：

  <dl>
    <dt>Name:</dt>
    <dd>Lea Verou</dd>
    <dt>Email:</dt>
    <dd>lea@verou.me</dd>
    <dt>Location:</dt>
    <dd>Earth</dd>
  </dl>

實際得到的效果是

當我們想得到最上面的效果時，第一步通常是：

  <style>
    dd{
      margin: 0;
      font-weight: bold;
    }
  </style>

因為<dt>和<dd>是塊級元素，所以所有的名和值都各占一行，我們可能通過改變<dt>或<dd>的display屬性來做嘗試：

    dd, dt{
      display: inline;
    }

解決方案

如上，我們缺少幾個換行

實際上有一個Unicode字符專門代表換行符：0x000A。在CSS中，我們可以用"\A"表示，我們可以把它作為::after偽元素的內容，添加到dd的尾部，但是你會發現并沒有什么作用，但這并不代表我們錯了，而是在HTML代碼中，默認情況下換行符會與相鄰的其他空白符進行合并，我們這里保留源代碼中的這些空白符和換行，因此我們這么做：

    dd, dt{
      display: inline;
    }

    dd::after{
      content: "\A";
      white-space: pre;
    }

    dd{
      margin: 0;
      font-weight: bold;
    }

很明顯，我們已經得到了我們想要的效果，不過如果我們嘗試如下時：

由于我們在每個dd后面都加了一個換行符，每個值都會分到單獨一行，甚至不需要換行的時候也是如此。因此我們需要采取類似if else的判斷：

    dd + dt::before{
      content: "\A";
      white-space: pre;
    }

    dd + dd::before{
      content: ', ';
      font-weight: normal;
      margin-left: -.25em;
    }

另外上述的margin是為了修正逗號前的空格，尺寸是需要根據字體個尺寸調試的。

、什么是HTML

HTML簡介

HTML是用來描述網頁的一種語言，它是一種超文本標記語言，由一套標記標簽組成，在制作網頁時，HTML使用標記標簽來描述網頁。

發展史

HTML：Hyper Text Markup Language超文本標記語言

超文本標記語言—在1993年6月互聯網工程工作小組工作案發布（并非標準）

HTML2.0—1995年11月作為RFC1866發布，在RFC2854于2000年6月發布之后被宣布過時。

HTML3.2—1996年1月14日，W3C推薦標準

HTML4.0—1997年12月18日，W3C推薦標準

HTML4.01（微小改進）—1999年12月24日，W3C推薦標準，2000年5月15日發布基本嚴格的HTML4.01語法，是國標標準化組織和國際電工委員會的標準

XHTML1.0—發布于2000年1月26日，是W3C推薦標準，后來經過修訂于2002年8月1日重新發布

XHTML1.1—2001年5月31日發布

XHTML2.0是W3C的工作草案，由于改動過大，學習這個新技術的成本過高而最終胎死腹中，因此，現在最常用的還是XHTML1.0標準。

目前最新的版本為HTML5，它是2004年被提出，2007年被W3C接納并成立新的HTML工作團隊，

2008年1月22日公布HTML5第一份正式草案，

2012年12月17日HTML5規范正式定稿，

2013年5月6日，HTML5.1正式草案公布。

HTML 5作為最新版本，提供了一些新的元素和一些有趣的新特性，同時也建立了一些新的規則。這些元素、特性和規則的建立，提供了許多新的網頁功能，如使用網頁實現動態渲染圖形、圖表、圖像和動畫，以及不需要安裝任何插件直接使用網頁播放視頻等。目前企業開發中也在增大使用HTML5的力度

HTML的優勢

• 各大瀏覽器廠商對H5的支持
• 市場的需求
• 跨平臺

二、HTML的基本結構

• <html>......</html> HTML文檔的開始和結束標記。
• <head>……</head> 頭控制標記，不在界面上進行展示，子標簽可設置SEO優化的一些內容以及設置網頁的編碼。
• <title>……</title>：設置瀏覽器的窗口上標題。
• <body>……</body>：頁面可見內容。

三、HTML的基本標簽

• 標題標簽

h1~h6

• 段落標簽和換行標簽

p標簽為段落標簽，br標簽為換行標簽

• 水平線標簽

hr標簽為水平線標簽

• 字體樣式標簽

em為斜體標簽，strong為字體加粗標簽

• 注釋和特殊符號

注釋使用：<!--被注釋的內容-->

大于號：> great than的縮寫

小于號：< less than的縮寫

雙引號：""

版權符號：©

空格：

以上就是HTML的簡單入門，后續帶大家更深入的了解HTML