『壹』 css 前端求解， display: inline-block 左右兩個元素不對齊
你看錯了吧，你這個demo上用的是display:inline-table;沒有對其，如果用display:inline-block；是可以的
『貳』 web前端入門到實戰：元素顯示隱藏的9種思路
在網頁製作中，元素的顯示隱藏是非常常見的需求。本文將介紹元素顯示隱藏的9種思路
對於元素顯隱來說，最常見就是display:none | display:block，但是使用這種方法有個問題，元素的display屬性在隱藏前並不都是block，還有可能是inline、inline-block等
注意：如果要適用於任何元素需要提前儲存元素的display值
visibility:hidden與display:none作為隱藏元素的兩種方式，常常被人們拿來比較。其實區別很簡單，前者不脫離文檔流，保留隱藏之前元素占據的物理區域；而後者則脫離文檔流，如果重新顯示則需要頁面的重新繪制。還有一點區別卻很少人提到，如果父級設置display:none;子級設置display:block也不會顯示；而如果父級設置visibility:hidden;子級設置visibility:visible時子級會顯示出來
注意：visilibity可應用transition屬性。因為visibility是離散步驟，在0到1數字范圍之內，0表示隱藏，1表示顯示。visibility:hidden可以看成visibility:0；visibility:visible可以看成visibility:1。於是，visibility應用transition等同於0~1之間的過渡效果。實際上，只要visibility的值大於0就是顯示的。由於這個現象，我們可以利用transition實現元素的延時顯示隱藏
可能有些人不太熟悉，HTML有個hidden全局屬性，專門用於顯示隱藏元素，與display:none的作用類似，元素隱藏時脫離文檔流，無法接受javascript事件
注意：IE10-不支持test.hidden='hidden'寫法，只支持test.setAttribute('hidden','hidden')寫法
對於元素顯隱，opacity的使用頻率也挺多。opacity的好處是，即使opacity為0的元素，仍然可以接受javascript事件，這是display:none和visiblity:hidden所不具備的。
CSS中有一個屬性是overflow，overflow:hidden代表著溢出隱藏。我們可以利用父級的overflow:hidden配合父級的height:0或width:0來實現元素的顯隱
注意：當設置overflow的元素在絕對定位元素和其包含塊之間的時候，overflow屬性會失效
CSS裁剪clip這個屬性平時用的不多，當clip:rect(top,right,bottom,left)中的top>=bottom，或者left>=right時，可實現元素的隱藏效果，效果類似於visibility:hidden
注意：clip屬性只能應用在絕對定位元素上
CSS變形transform是一些效果的集合，主要是移動、旋轉、縮放和傾斜這四種基本操作，還可以通過設置matrix矩陣來實現更復雜的效果。通過不同的變形函數可以實現元素顯隱效果
注意：IE9-瀏覽器不支持，safari3.1-8、android2.1-4.4.4、IOS3.2-8.4都需要添加前綴
【1】scale
transform:scale(0)時，元素被隱藏
【2】rotate
transform:rotateX(90deg)時，元素被隱藏
【3】skew
transform:skew(90deg)時，元素被隱藏
利用定位元素可以覆蓋普通流元素的特性。為元素的before偽元素設置相同的尺寸，通過控制偽元素的定位屬性，實現顯隱效果
//滑鼠移入移出會出現元素的顯隱效果
元素顯示隱藏的另一種常見思路是偏移，將元素移動到視窗范圍外，也可以實現等價的顯隱效果
【1】margin-top
利用負margin將元素移出視窗外，要注意的是設置負margin的元素並沒有脫離普通流，後續元素會跟著一起移動
【2】left
通過設置相對定位或絕對定位元素的偏移屬性，將元素移動到視窗外
【3】translate
『叄』 前端開發，這是什麼情況，下面錯誤後直接display:none，內容不見了
專業的web前端培訓機構百讀易萊勝為你解答：display:none的功能就是讓HTML標簽不顯示
『肆』 如何理解CSS的display屬性
display屬性是我們在前端開發中常常使用的一個屬性，其中，最常見的有：
none
block
inline
inline-block
inherit
下面，我將按照順序將上述幾種屬性做一個完整的講解。
第一部分：display:none
none這個值表示此元素將不被顯示。比如，當我們在瀏覽網頁時，如果看到了某個煩人的廣告遮擋了我們的實現，更為可氣的是，它還沒有關閉的選項，這時（以chrome為例），我們就可以按下F12，打開開發者工具，點擊element，然後使用左上角的選擇工具選中想要刪除的廣告，可以看到element中會有高亮的一行或幾行代碼，右鍵，點擊Add Attribute，然後輸入：style="display:none"，這時就可以發現廣告不見啦！ 當然display:none的用法絕不是專門用於這里的，它還可以用於二級下拉菜單的製作中將二級下拉菜單先設置位display:none;,當滑鼠滑過一級菜單時，再顯示出來（詳見《如何實現導航菜單中的二級下拉菜單》）。還可以用於登陸模態框的製作等等。
第二部分：display:block
使用了display：block;之後， 此元素將顯示為塊級元素，此元素前後會帶有換行符。我們先來回顧以下塊級元素是什麼，他有什麼特點。
既然要區分塊級元素和行內元素，就得先說說標准文檔流了。標准文檔流：簡稱標准流，指的是在不使用其他的與排列和定位相關的css規則時，各種元素的排列規則。於是，我們將「各種元素」分為塊級元素和行內元素。（註：實際上還有空元素，如<br>用於換行，<hr>為一條水平線，這里對空元素不做過多討論）
塊級元素特點：
總是以一個塊的形式表現出來，佔領一整行。若干同級塊元素會從上之下依次排列（使用float屬性除外）。
可以設置高度、寬度、各個方向外補丁（margin）以及各個方向的內補丁（padding）。
當寬度（width）預設時，它的寬度時其容器的100%，除非我們給它設定了固定的寬度。
塊級元素中可以容納其他塊級元素或行內元素。
常見的塊級元素由<p><div><h1><li>等等。
塊級元素的display屬性值默認為block。
行內元素特點：
它不會單獨占據一整行，而是只佔領自身的寬度和高度所在的空間。若干同級行內元素會從左到右（即某個行內元素可以和其他行內元素共處一行），從上到下依次排列。
行內元素不可以設置高度、寬度，其高度一般由其字體的大小來決定，其寬度由內容的長度控制。
行內元素只能設置左右的margin值和左右的padding值，而不能設置上下的margin值和上下的padding值。因此我們可以通過設置左右的padding值來改變行內元素的寬度。
常見的行內元素由<a><em><img>等等。
行內元素一般不可以包含塊級元素。
塊級元素的display屬性值默認為inline。
ok!簡單回顧了塊級元素和行內元素之後，我們就可以進行下一步講解了。
通過對一個行內元素設置display:block;可以將行內元素設置為塊級元素，進而設置它的寬高和上下左右的padding和margin。
應用：
如果我們經常會製作導航欄，這時就要使用ul li 和a組合的方式，但是<a>是行內元素，我們無法設置它的寬和高，這時，就可以在<a>的樣式表中，將之設置為display：block。這樣就可以設置它的寬和高，以及上下左右的margin和padding以達到我們想要的效果了。
『伍』 關於一個前端HTML的問題.通過javascript的onclick事件來改變<span>的display值.但是遇到一個問題~
不用這么麻煩,我這種最適合小弟
<script type ="text/javascript">
function hide(obj){
obj.parentNode.nextSibling.style.display="inline";//取父節點的兄弟節點就OK了
}
</script>
//html代碼
<li><span class="short">簡短文字<a href="#" onclick ="hide(this)">點擊此處</a></span><span class="all" style="display: none;">
完整的文字</span> </li>
<li><span class="short">簡短文字<a href="#" onclick ="hide(this)">點擊此處</a></span><span class="all" style="display: none;">
完整的文字</span> </li>
<li><span class="short">簡短文字<a href="#" onclick ="hide(this)">點擊此處</a></span><span class="all" style="display: none;">
完整的文字</span> </li>
不瞞您說,這個有個小小缺點,<span></span>這標記之間不能有空格和換行,其它一切運行正常,原因很簡單,有空格和換行就取不到span標記了,這不影響你正常使用和界面的布局哦
本程序已通過上機測試,祝你好運!
『陸』 前端使用JS和JQuery顯示隱藏標簽
一.使用JQuery使用
二.jquery判斷元素是否隱藏
三.使用JS隱藏和顯示
a.隱藏後釋放佔用的頁面空間
通過設置display屬性可以使div隱藏後釋放佔用的頁面空間.
style="display: none;"
b.隱藏後仍佔有頁面空間，顯示空白
div的visibility可以控制div的顯示和隱藏，但是隱藏後頁面顯示空白.
style="visibility: none;"
『柒』 Web前端企業面試題
答：
一、display和visibility的相同與不同點
1、相同點：display和visibility都有講元素隱藏的意思
2、不同點：display是元素隱藏，隱藏的元素不佔文檔流
而visibility隱藏的元素仍然占文檔流
二、display和visibility的屬性值
1、display
2、visibility
答：
在開發過程中經常需要循環遍歷數組或者對象，使用最多的方法 forEach、for…in 、 for…of ，整理一下他們的異同點
for循環
其實除了這三種方法以外還有一種最原始的遍歷，自Javascript誕生起就一直用的 就是for循環，它用來遍歷數組
for循環中可以使用return、break等來中斷循環
結果：
forEach
對數組的每一個元素執行一次提供的函數（不能使用return、break等中斷循環），不改變原數組，無返回值undefined。
輸出結果：
for…in
循環遍歷的值都是數據結構的鍵值
總結一句: for in也可以循環數組但是特別適合遍歷對象
結果：
for…of
它是ES6中新增加的語法，用來循環獲取一對鍵值對中的值
循環一個數組
循環一個普通對象（報錯）
答：
px：像素（Pixel）,相對長度單位。像素px是相對於顯示器屏幕解析度而言的 。--即解析度不同的機型當前對應的距離可能發生變化。(1Inches=xPx)。
所以相對於同一機型來說是一個絕對的長度單位。
em：是相對長度單位。相對於當前對象內文本的字體尺寸。如當前對行內文本的字體尺寸未被人為設置，則相對於瀏覽器的默認字體尺寸 。
以其父級元素為基準來變化長度。所以其演算法不是一個固定的值。
rem：是CSS3新增的一個相對單位（root em，根em） 。
那麼其好用在用可以直接設置HTML的font-size，然後在其子類都是以這個大小為基準變化的值。
在移動設備上，我們常常設置
此方式的目的是為了將當前屏幕(PC)解析度的px轉化成手機端的px，讓px在手機上能夠兼容此方式。
因此，此時看見的12px與PC端的12px無異。但是，如果不寫著個meta的話，那麼，瀏覽器會一直以PC的視圖來決定手機端的px的大小，讓視圖看起來變小了很多。
那麼，響應式頁面則經常配合媒體查詢media 來設置不同解析度下手機的各種不同的配置機構，然後根據父級來變化所有的相對長度。
基礎篇
1.shift
// 刪除原數組的第一項，並返回刪除元素的值，如果數組為空則返回undefined
2.unshift
// 將參數添加到原數組開頭，並返回數組的長度
//註：此方法在ie6.0下
// 測試的返回值始終為undefined，在firefox下測試的返回值為7，所以此方法不可靠
// 一般需要用返回值時可用splice代替
3.pop
// 刪除原數組的最後一項，並返回刪除元素的值；如果數組為空則返回undefined
4.push
// 將參數添加到原數組末尾，並返回數組的長度
5.concat
// 返回一個新數組，是將參數添加到原數組中構成的
6.splice
7.reverse
8.sort(orderfunction)
9.slice(start,end)
10.join(separator)
11.indexOf
12.lastIndexOf
13. Array.isArray()
14. Array.toString()
進階篇
1.forEach
是最為常用的情景，它至於遍歷，可以在獲取當前數據項的前提下，對數據進行修改。它沒有返回值。理解起來也是最容易的。
2.map
map的本意就是映射，也就是將一個值從一種形式映射到另一種形式，比如將key映射到value。它的每一次遍歷都會有一個返回值。這些返回值組合成最終的結果數組。事實就是如此
forEach和map對比
相同點
1）都是循環遍歷數組中的每一項；
2）forEach()和map()匿名函數的參數相同，參數分別是item（當前每一項）、index（索引值）、arr（原數組）；
3）this都是指向調用方法的數組；
4) 只能遍歷數組；
不相同點
1）map()創建了新數組，不改變原數組；forEach()可以改變原數組。
2）遇到空缺的時候map()雖然會跳過，但保留空缺；forEach()遍歷時跳過空缺，不保留空缺。
3）map()按照原始數組元素順序依次處理元素；forEach()遍歷數組的每個元素，將元素傳給回調函數。
3.filter
它致力於從已有的數組中篩選出符合一定條件的數據項，最後的返回值是所有符合條件的數據項構成的數組。它不會修改原來的數組。記住，它的立足點就是篩選。也僅僅是篩選。還有一點需要注意：每一次遍歷都會有一個返回值，它的類型是布爾類型。返回值只有是true，當前遍歷項才會被篩選中。不要試圖在filter中去修改原始數組。
理解: 就是在一堆數據裡面去篩選你需要的數據 或者 剔除你不需要的數據
4.find()
返回通過測試的數組的第一個元素的值,
理解:假如你去一個一群人的地方去找人 你說我找xxb 他要是在那裡就找到 不在那裡就是undefined
在第一次調用 callback 函數時會確定元素的索引范圍，因此在 find 方法開始執行之後添加到數組的新元素將不會被 callback 函數訪問到。如果數組中一個尚未被callback函數訪問到的元素的值被callback函數所改變，那麼當callback函數訪問到它時，它的值是將是根據它在數組中的索引所訪問到的當前值。被刪除的元素仍舊會被訪問到。
語法
array.find(function(value, index, arr),thisValue)
value:必須，代表當前元素，其他四個參數都是可選，index代表當前索引值，arr代表當前的數組，thisValue代表傳遞給函數的值，一般用this值，如果這個參數為空，undefined會傳遞給this值
返回值：返回符合測試條件的第一個數組元素的值，如果沒有符合條件的則返回undefined。
擴展: findIndex()方法的用法與find()方法非常類似，返回第一個符合條件的數組成員的位置，如果所有成員都不符合條件，則返回-1。自己try吧
5.every
理解: 這個就像 上課了 老師說 昨天布置的作業 只要有一個人沒有寫完 今天就不講課 然後挨個檢查 當檢查到有一個沒有寫完的時候 就不檢查了 返回 不講課了(false)
6.some
理解: 相當於在一個數組裡面找你想要的那個數 找到了 就返回true 找不到就返回false
7.rece
它這個方法是接收一個函數作為累加器,將數組中的值(從左向右)開始合並,最總為一個值 然後返回出來,callback
他可以傳四個參數:
1,previousValue:上一次調用回調返回的值,或者是提供的初始值(initialValue)
2,currentValue:數組中當前被處理的元素
3,index:不啰嗦,自己顧名思義去吧
4,array:返回調用rece的數組
彩蛋: 這里附上前幾天某某人比較喜歡的切割字元串的方法
substring() 和 substr()
相同點： 如果只是寫一個參數，兩者的作用都一樣：都是是截取字元串從當前下標以後直到字元串最後的字元串片段。
不同點： 第二個參數
substr(startIndex, lenth) // 第二個參數是截取字元串的長度（從起始點截取某個長度的字元串）；
substring(startIndex, endIndex) // 第二個參數是截取字元串最終的下標 （截取2個位置之間的字元串,『含頭不含尾'）。
1：在使用vue框架的過程中，我們經常需要給一些數據做一些初始化處理，這時候我們常用的就是在created與mounted選項中作出處理。
首先來看下官方解釋，官方解釋說created是在實例創建完成後唄立即調用。在這一步，實例已完成以下配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
這話的意思我覺得重點在於說掛架階段還沒開始，什麼叫還沒開始掛載，也就是說，模板還沒有被渲染成html，也就是這時候通過id什麼的去查找頁面元素是找不到的。下面看下實例來證明。
所以，一般creadted鉤子函數主要是用來初始化數據。
2：mounted鉤子函數一般是用來向後端發起請求拿到數據以後做一些業務處理。官方解釋如下：
el 被新創建的 vm.$el 替換，並掛載到實例上去之後調用該鉤子。如果 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
這意思是該鉤子函數是在掛在完成以後也就是模板渲染完成以後才會被調用。下面看實例
下面是結果
nihao
取到了值，這說明這時候vue模板已經渲染完畢。因此，Dom操作一般是在mounted鉤子函數中進行的
computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。
總結：
通常created使用的次數多，而mounted通常是在一些插件的使用或者組件的使用中進行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常會有這一步，而如果你寫入組件中，你會發現在created中無法對chart進行一些初始化配置，一定要等這個html渲染完後才可以進行，那麼mounted就是不二之選。
methods:{}中的方法都需要主動去觸發，比如點擊click之類的
而created(){}、mounted(){}、裡面的代碼都是自動去執行的，即vue生命周期到了哪一步就直接去執行對應鉤子函數裡面的代碼了，無需手動去執行
created中主要放初始化獲取數據之類，mounted()中掛載到具體的DOM節點
computed:{} 計算屬性，什麼是計算屬性呢，我個人理解就是對數據進行一定的操作，可以包含邏輯處理操作，對計算屬性中的數據進行監控。計算屬性是基於它的以來進行更新的，只有在相關依賴發生改變時側能更新變化，以函數的形式返回結果。然後可以像綁定普通屬性一樣在模板中綁定計算屬性。
mounted 是生命周期鉤子，vue的生命周期中一個實例的mounted只會運行一次。mounted在vue的渲染模板掛載到$el元素上才會調用，很顯然你export的時候el都么有自然不會運行mounted鉤子函數了。
所有的方法都應該在methods里定義，然後在created或者mounted里 使用this調用方法，用這種方式實現初始化
6、Vue中組件之間的傳參方式有哪些方式？
Vue 組件傳參的八種方式總結
Vue 組件的使用不管是在平常工作還是在面試面試中，都是頻繁出現的。因此系統的梳理一下組件之間的傳參還是非常有必要的
一、props 傳參
子組件定義 props 有三種方式:
// 第一種數組方式
// 第二種對象方式
// 第三種對象嵌套對象方式
第三種對象默認支持 4 種屬性，並且都是非必填的。可以隨意使用
父組件傳參的倆種方式
第一種靜態屬性傳參
注意：
1、在不定義 props 類型的情況下 props 接受到的均為 String。
2、當 props 屬性指定為 Boolean 時，並且只有屬性 key 沒有值 value 時接受到的是 true
第二種動態屬性傳參
注意：
1、需要區分非簡寫形式傳入的值是對象，則會對應 props 中多個值
2、會保留傳入值的類型
3、如果是表達式則獲取到的是表達式的計算結果
二、attrs 和listeners
$attrs
$attrs 會獲取到 props 中未定義的屬性（class 和 style 屬性除外）,支持響應式。常用的場景有倆種：
組件嵌套組件時可以使用 $attrs 來支持過多的屬性支持。比如 elementUI 的 table 組件。支持的屬性十幾個，而平常封裝的時候用的最多的也就一倆個。
屬性默認是添加在父組件上的，有時候想把多餘的屬性添加在子組件上（可以結合 inheritAttrs: false 屬性，讓父屬性不接受多餘的屬性）
$listeners 定義的事件都在子組件的根元素上，有時候想加到其他元素上。就可以使用 $listerners。它包含了父組件中的事件監聽器(除了帶有 .native 修飾符的監聽器)
三、$emit 通知
這里有一道考題: for 循環的時候如何拿到子組件的傳值和 for 中循環的值
答案有倆種，一是 $event, 二是 閉包。只是需要注意 $event 只能獲取到第一個值
四、v-model
這個其實是一種通過 emit，on 的組合方式。優點再於同步值方便,寫法優雅。下面三種寫法其實是一個意思
五、插槽
六、$refs, $root, $parent, $children
$root 獲取根組件
$parent 獲取父組件
$children 獲取子組件(所有的子組件，不保證順序)
$refs 組件獲取組件實例，元素獲取元素
七、project / inject
注意：注入的值是非響應的
八、Vuex
這個相當於單獨維護的一組數據，就不過多的說了。
watch，computed和methods的關系
1.watch和computed都是以Vue的依賴追蹤機制為基礎的 ，它們都試圖處理這樣一件事情：當某一個數據（稱它為依賴數據）發生變化的時候，所有依賴這個數據的「相關」數據「自動」發生變化，也就是自動調用相關的函數去實現數據的變動。
2.對methods:methods裡面是用來定義函數的，很顯然，它需要手動調用才能執行。而不像watch和computed那樣，「自動執行」預先定義的函數
watch和computed各自處理的數據關系場景不同
1. watch 擅長處理的場景： 一個數據影響多個數據
2. computed 擅長處理的場景： 一個數據受多個數據影響
watch用法 監聽下記haiZeiTuan_Name的值，會改變其他所有的值
結果：this.suoLong會變為 '橡膠海賊團索隆',以此類推
computed用法 監聽下記firstName，secName，thirdName的值，會改變luFei_Name的值
methods和computed的區別例子
注意兩次點擊computed返回的時間是相同的！！
1.兩次點擊methods返回的時間是不同的
2.注意兩次點擊computed返回的時間是相同的
【注意】為什麼兩次點擊computed返回的時間是相同的呢？new Date()不是依賴型數據 （不是放在data等對象下的實例數據） ，所以computed只提供了緩存的值，而沒有重新計算
只有符合：1.存在依賴型數據 2.依賴型數據發生改變這兩個條件 ,computed才會重新計算。
參考：http://www.cnblogs.com/penghuwan/p/7194133.html
答：https://codecat.blog.csdn.net/article/details/100031285
1、Promise
Promise 是非同步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大，簡單地說，Promise好比容器，裡面存放著一些未來才會執行完畢（非同步）的事件的結果，而這些結果一旦生成是無法改變的
2、async await
async await也是非同步編程的一種解決方案，他遵循的是Generator 函數的語法糖，他擁有內置執行器，不需要額外的調用直接會自動執行並輸出結果，它返回的是一個Promise對象。
兩者的主要用法、語法就不贅述了，感興趣的同學可以自行查閱 es6中文文檔
兩者的區別
1、Promise的出現解決了傳統callback函數導致的「地域回調」問題，但它的語法導致了它向縱向發展行成了一個回調鏈，遇到復雜的業務場景，這樣的語法顯然也是不美觀的。而async await代碼看起來會簡潔些，使得非同步代碼看起來像同步代碼，await的本質是可以提供等同於」同步效果「的等待非同步返回能力的語法糖，只有這一句代碼執行完，才會執行下一句。
2、async await與Promise一樣，是非阻塞的。
3、async await是基於Promise實現的，可以說是改良版的Promise，它不能用於普通的回調函數。
簡單來看，這兩者除了語法糖不一樣外，他們解決的問題、達到的效果是大同小異的，我們可以在不同的應用場景，根據自己的喜好來選擇使用。
『捌』 「display:block」是什麼意思
display是控制項的css屬性之一，表示的是顯示模式。none表示不顯示在網頁上，但是代碼存在;bolck是此元素將顯示為塊級元素，此元素前後會帶有換行符。
『玖』 前端開發中經常遇到的一些英語單詞
很多時候跟著書和不系統的視頻學習，會發現沒有方向，學了很多卻不知道自己能夠做出什麼成績。
學習要有一個清晰的職業學習規劃，學習過程中會遇到很多問題，你可以到我們的web學習交流君 點擊此處 ，
同時准備了基礎，進階學習資料。學友都會在裡面交流，分享一些學習的方法和需要注意的小細節，每天也會准時講一些項目實戰案例。
在前端開發與探討過程中熟悉並了解一些英語是非常關鍵的，下面整理了一些基礎的前端英語單詞，希望對給位有所幫助
首先、頁面布局（layout）
header 頭部/頁眉；
index 首頁/索引；
logo 標志；
nav/sub_nav 導航/子導航；
banner 橫幅廣告；
main/content 主體/內容；
container/con 容器；
wrapper/wrap 包裹（類似於container）；
menu 菜單；
sub_menu/second_menu 子菜單/二級菜單；
list 列表；
section 分區/分塊（類似於div）;
article 文章；
aside 側邊欄/廣告；
footer 頁腳/底部；
title/sub_title 標題/副標題；
news 新聞；
hot 熱點；
pro 產品（proct）；
company 公司；
msg/info 信息（message）/消息；
ads 廣告（advertisements）;
icon 小圖標；
img 圖片（image）；
right 版權；
contact_us 聯系我們；
friend_link 友情鏈接；
tel 聯系電話（telephone）；
address 地址；
其次、CSS樣式（style）
CSS 層疊樣式表 (Cascading Style Sheets) ；
background 背景；
position 位置/定位；
relative/absolute/fixed 相對定位/絕對定位/固定定位；
float 浮動；
clear 清除；
vertical-align: middle/top/bottom; 垂直居中/上/下；
line-height 行高；
margin 外邊距；
padding 內邊距；
border 邊框；
solid/dashed/dotted 實線/線虛線/點虛線；
border-radius 圓角；
shadow 陰影；
display 展示；
hidden 隱藏；
block/inline-block 塊元素/行內塊；
overflow 溢出；
cursor 游標；
animation 動畫；
css sprites 雪碧圖/圖片精靈；
column 分列；
flex 彈性（布局）；
然後、表單（form）與表格（table）
form 表單；
action 行為；
method 方式/方法；
input 輸入框；
label 標簽；
password 密碼；
radio 單選框；
checkbox 復選框；
btn 按鈕（button）；
submit/reset 提交/重置；
textarea 文本域；
select/option 選擇框/選擇項；
placeholder 佔位符（起提示作用）；
search 搜索；
icon 小圖標；
autofocus 自動聚焦；
disabled 禁用；
checked 選中（單選框/復選框）；
selected 默認選擇項（下拉選擇框）；
required 必填項；
readonly 只讀；
table 表格；
thead/tbody/tfoot 表格標題/主體/底部；
colspan 跨列；
rowspan 跨行；
cellspacing 單元格間距（類似於margin）；
cellpadding 單元格邊距（類似於padding）；
border-collapse: collapse; 邊框
相關資料：
詳解html中頁面跳轉傳遞參數的問題
html5關於標簽的知識吧
相信很多人在剛接觸前端或者中期時候總會遇到一些問題及瓶頸期，如學了一段時間沒有方向感或者堅持不下去一個人學習枯燥乏味有問題也不知道怎麼解決，對此我整理了一些資料 喜歡我的文章想與更多資深大牛一起討論和學習的話 歡迎加入我的學習交流群
關於書籍：需要學習資料的小夥伴們可以加群， 點擊此處
『拾』 前端幾種常見的布局方式
1.靜態布局（固定寬高）
2.彈性布局（flex）————常用
3.聖杯布局
flex：flex-group、flex-shrink、flex-basis
flex：auto/none/負數/一個長度或百分比/兩個非負數/一個非負數和一個長度或百分比等
A，flex-group：當父元素有剩餘空間時，子元素占據剩餘空間的量
B，flex-shrink：當父元素的空間不足以展示所有的子元素，父元素沒設置flex-wrap，子元素需要進行收縮的量
C，flex-basis：表示該子元素的初始寬度
4.自適應布局（為不同的屏幕解析度定義的布局 @media媒體查詢技術）
5.流式布局：（寬高用百分比，按屏幕解析度調整，布局不發生變化）
6.響應式布局（使用meta標簽，寬高隨窗口調整自動適配，適應布局和流式布局的綜合方式）
7.柵格布局
1）.柵格(網格劃分)：在一個特定區域內劃分出有規律的格子，依靠這些格子進行有規律的版面布局。
使用柵格布局：bootstrap（12列），element（24欄），antDesign
2）.柵格布局
container：柵格系統容器；rows：行；cols：列；gutters：各列間的空隙
3）.柵格布局實現響應式布局
8.table布局（使用表格進行頁面排版和樣式設置）
1）.用法
display:table
display:table-cell，相當於td元素
display:table-row，相當於tr元素
table-layout:fixed | auto(默認)：table-layout 屬性用於顯示表格單元格、行、列；auto, 自動表格布局，列的寬度由單元格中最大內容的寬度決 定；fixed ,固定表格布局。