整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
、HTML 塊元素
二、HTML 內聯元素
三、HTML <div> 元素
四、div的使用
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>無標題文檔</title>
</head>
<style>
.all{
width:500px;
height:500px;
margin:0 auto;
background-color:#000;
}
.one{
height:100px;
background-color:#89E1BF;
}
.two{
height:100px;
background-color:#DEE099;
}
.three{
height:100px;
background-color:#D7A1CE;
}
</style>
<body>
<!--父div，all是黑色-->
<div class="all">
<!--子div，one是綠色-->
<div class="one">
</div>
<!--子divtwo，是黃色-->
<div class="two">
</div>
<!--子div，three是紫色-->
<div class="three">
</div>
</div>
</body>
</html>
演示效果如圖所示：
局元素
語義化是html5的一個特色，他不僅能規范代碼，清晰結構，更好地開發和維護，而且還有利于SEO。當然你在實際開發中可以不用，但衡量一個人專不專業就在于一些小細節。
現如今是2021年，距離發布HTML5的2014年已有7年之久！當初對于HTML5標準規范，很多人張口就來說，瀏覽器不兼容、不支持，國情還是用IE的多等等。反正就是拒絕擁抱新技術和新標準。
不管這些快被優化下崗的老鳥愿不愿意，時代還是要進步的。智能手機的快速發展，win10、MAC等硬軟件市場占有率提高，畢業生扎堆涌入IT行業等等，直接、間接推動HTML5的普及率。現如今還有哪個瀏覽器不支持html5，甚至不支持html5都不是這個時代的瀏覽器。
所以如果你是外行剛進入it前端行業，尤其是單單看了一些老到掉牙的教學視頻，當面試官問你關于一些html5的問題，千萬不要在張口就說html5是新技術。。。 畢竟這已是個標準規范，不是加分項，而是必填項，還不能錯的那種。
言歸正傳，本篇介紹HTML5里的一大特色：語義化。相信面試時肯定也被問到語義化理解。
語義學是研究語言中單詞和短語的含義。語義化呢？就是用合理、正確的標簽來展示內容。更具體一點，就是使用新增的語義標簽。在HTML5以前，我們有使用過標題標簽(h1~h6)、表格標簽（table）、表單標簽（form）等。這些標簽都帶有很明顯的意義，無法亂用。
然而最基礎、最重要的html布局元素卻是被人忽視，絕大部分都是使用非語義元素（div和span）來布局，對其內容意義一無所知。代碼一多，實在讓人看得頭疼。
問你眼花沒有，通篇div標簽
倘若是以下的布局，相信不是專業的程序員，有點基礎的小學生都能看得懂！
Html5布局標簽
<header>元素描述了文檔的頭部區域，相當于一篇文章的頭部。
主要是用在網頁的頭部，或者某個部分的頭部。
在一個文檔中，您可以定義多個<header>元素。
header
<main>元素描述了文檔的主體區域，相當于一篇文章的中間主體。
主要是用在網頁的主體部分。
該內容在文檔中應當是獨一無二的，不包含任何在文檔中重復的內容，建議只出現一次。
main
<footer>元素描述了文檔的尾部區域，相當于一篇文章的尾部。
主要是用在網頁的末尾部分，或者某個部分的尾部。常見于版權信息、友情鏈接等等。
在一個文檔中，您可以定義多個<header>元素。
footer
<nav>元素描述了多個超鏈接的區域。
主要是作用于菜單欄、導航欄等多個超鏈接集合。
nav
<article>元素描述了相對比較獨立、完整的的內容區塊
主要是作用于定義獨立模塊，例如一個網站有娛樂、新聞、動漫三個區塊，就用<article>定義3個模塊。
article
<section>元素描述了一個區域或者章節
主要是作用于<article>的子模塊，<article>定義大模塊，<section>則是填充里面的子模塊；亦可以單獨做一個小模塊。
?
section
<aside>元素描述了和頁面內容幾乎無關的部分，可以被單獨的拆分出來而不會影響整體。
主要是作用于側邊欄或嵌入內容（廣告之類）。
aside
近有一個同學想學網頁前端，自己去做一些網站，總是布局變形跑過來問了，問多了就很煩，都是同一個問題，并且完全自己能夠解決的，還要問？所以歸納一下自己學習CSS+DIV布局步驟，如下：
一、認清學習的要求
1、弄清目的，首先要認識為什么要學習CSS？
2、心態不能急，如果你很急躁，否則會很快喪失興趣。
3、堅持，這個不是一到兩天的事情，是一個漫長的過程（至少兩個月）。
二、基礎學習
1、了解CSS作用是什么？（即CSS、html和js的關系是什么，html結構重要性）
2、css基礎知識、css屬性樣式
3、html上面幾點，一般都是很快的掌握了，也不需要做到精通，了解大概就可以。
差不多時候，開始在網上找一些psd設計稿，自己做做看，做完之后發現問題，并把他們總結，不要要遇到一個問題就問一個，其實好多問題，是你自己馬虎，還有你做著做著，就明白是怎么回事，如果真不明白也不要急。
三、學會分析別人網頁布局
當你做psd設計的代碼，發現問題，可能找不到答案或沒有人幫你回答，也不要急，這是最好看看別人網頁布局結構，主要html布局框架，讓后借鑒（網上還有很多結構代碼很槽糕），也的學會鑒別。了解美工圖如何分析、如何使用PS工具切出需要素材、如何使用這些切出圖片素材進行布局、布局技巧、兼容性解決與避免等。
總之：就是讓自己布局時候能知道大的布局結構如何布局，建立布局思想與技巧。
四、代碼的規范
看完別人很多網頁代碼之后，你發現，他們都有規范，這些規范網上有很多，你需要總結和背誦，當然不是死記硬背，主要在切圖多做多實踐，熟了就能記住。
我們有的老師，可能說沒必要那么規范，技術到位就可以。可是到了工作，你就會發現很不現實。你自己也得想明白，前端人員水平差距是很大，這就是他只能在這個小地方當老師。
五、大量練習
練習是從始到終的，不要斷，即使找一些簡單的網頁進行布局實踐，開始可能開發很慢，會遇到很多小問題，也不急。
最后總結
這個是沒有討巧的過程，網上什么速成，適合自己、靠譜嗎？開始學習吧！多學點總是有好處的
文/丁向明
做一個有博客的web前端自媒體人，專注web前端開發，關注用戶體驗，加我qq/微信交流：6135833
http://dingxiangming.com
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
