整合營銷服務(wù)商
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數(shù)據(jù)同步管理
免費咨詢熱線：
局元素
語義化是html5的一個特色，他不僅能規(guī)范代碼，清晰結(jié)構(gòu)，更好地開發(fā)和維護，而且還有利于SEO。當(dāng)然你在實際開發(fā)中可以不用，但衡量一個人專不專業(yè)就在于一些小細節(jié)。
現(xiàn)如今是2021年，距離發(fā)布HTML5的2014年已有7年之久！當(dāng)初對于HTML5標準規(guī)范，很多人張口就來說，瀏覽器不兼容、不支持，國情還是用IE的多等等。反正就是拒絕擁抱新技術(shù)和新標準。
不管這些快被優(yōu)化下崗的老鳥愿不愿意，時代還是要進步的。智能手機的快速發(fā)展，win10、MAC等硬軟件市場占有率提高，畢業(yè)生扎堆涌入IT行業(yè)等等，直接、間接推動HTML5的普及率。現(xiàn)如今還有哪個瀏覽器不支持html5，甚至不支持html5都不是這個時代的瀏覽器。
所以如果你是外行剛進入it前端行業(yè)，尤其是單單看了一些老到掉牙的教學(xué)視頻，當(dāng)面試官問你關(guān)于一些html5的問題，千萬不要在張口就說html5是新技術(shù)。。。 畢竟這已是個標準規(guī)范，不是加分項，而是必填項，還不能錯的那種。
言歸正傳，本篇介紹HTML5里的一大特色：語義化。相信面試時肯定也被問到語義化理解。
語義學(xué)是研究語言中單詞和短語的含義。語義化呢？就是用合理、正確的標簽來展示內(nèi)容。更具體一點，就是使用新增的語義標簽。在HTML5以前，我們有使用過標題標簽(h1~h6)、表格標簽（table）、表單標簽（form）等。這些標簽都帶有很明顯的意義，無法亂用。
然而最基礎(chǔ)、最重要的html布局元素卻是被人忽視，絕大部分都是使用非語義元素（div和span）來布局，對其內(nèi)容意義一無所知。代碼一多，實在讓人看得頭疼。
問你眼花沒有，通篇div標簽
倘若是以下的布局，相信不是專業(yè)的程序員，有點基礎(chǔ)的小學(xué)生都能看得懂！
Html5布局標簽
<header>元素描述了文檔的頭部區(qū)域，相當(dāng)于一篇文章的頭部。
主要是用在網(wǎng)頁的頭部，或者某個部分的頭部。
在一個文檔中，您可以定義多個<header>元素。
header
<main>元素描述了文檔的主體區(qū)域，相當(dāng)于一篇文章的中間主體。
主要是用在網(wǎng)頁的主體部分。
該內(nèi)容在文檔中應(yīng)當(dāng)是獨一無二的，不包含任何在文檔中重復(fù)的內(nèi)容，建議只出現(xiàn)一次。
main
<footer>元素描述了文檔的尾部區(qū)域，相當(dāng)于一篇文章的尾部。
主要是用在網(wǎng)頁的末尾部分，或者某個部分的尾部。常見于版權(quán)信息、友情鏈接等等。
在一個文檔中，您可以定義多個<header>元素。
footer
<nav>元素描述了多個超鏈接的區(qū)域。
主要是作用于菜單欄、導(dǎo)航欄等多個超鏈接集合。
nav
<article>元素描述了相對比較獨立、完整的的內(nèi)容區(qū)塊
主要是作用于定義獨立模塊，例如一個網(wǎng)站有娛樂、新聞、動漫三個區(qū)塊，就用<article>定義3個模塊。
article
<section>元素描述了一個區(qū)域或者章節(jié)
主要是作用于<article>的子模塊，<article>定義大模塊，<section>則是填充里面的子模塊；亦可以單獨做一個小模塊。
?
section
<aside>元素描述了和頁面內(nèi)容幾乎無關(guān)的部分，可以被單獨的拆分出來而不會影響整體。
主要是作用于側(cè)邊欄或嵌入內(nèi)容（廣告之類）。
aside
么寫一個優(yōu)質(zhì)的div+css頁面
1.margin屬性容易在低版本的IE中出現(xiàn)兼容性問題，盡量少用，可以選用padding或position方式代替。
2.在寬高固定、子元素比較多、子元素位置雜亂，子元素類型較多的區(qū)域中，盡量用定位方法來做，比如美團左側(cè)的產(chǎn)品區(qū)塊，如 果用margin來做，不同版本IE瀏覽器下的表現(xiàn)可能會讓你崩潰的。
3.能設(shè)置具體寬高的區(qū)塊盡量設(shè)置具體的寬高。
4.需要設(shè)置背景圖的元素盡量設(shè)置具體的寬高。
5.用常見的標簽和css屬性，盡量別用另類的用法。
6.放文字的標簽一定要設(shè)置行高
7.不要用行級標簽（a標簽、span標簽等）和文字標簽（p標簽等）當(dāng)做劃分區(qū)域的標簽。
8.盡量不要在行級標簽內(nèi)嵌套塊級標簽
9.了解自己寫的每一個標簽，每個標簽的大小范圍、屬性、嵌套層級都要很清楚才行，其實就是深入理解盒子模型。
10.深化區(qū)塊的概念，把頁面嚴格的分成不同的區(qū)塊，盡量避免不同區(qū)塊之間的沖突。
11.不知道不認識的屬性和標簽一定不要亂用
12.寫頁面的時候?qū)懸稽c就測一下兼容性，發(fā)現(xiàn)問題及時改正，不要想著等到全寫完后統(tǒng)一調(diào)試兼容性。
13.前端開發(fā)最忌諱直接參考別人的標簽和寫法，一定要有自己的開發(fā)思路，不要怕麻煩，一旦被別人的思路綁架，你會很痛苦的。
14.一般來說，開發(fā)兩個國美、京東規(guī)模的頁面就算入門了，開發(fā)五個以上就能體會到一定的開發(fā)技巧。開發(fā)的頁面數(shù)量越多，就越 熟練，hack用的也會越來越少。SO，動手去做吧！
?opacity: 0.5;
? w3c標準屬性，火狐等瀏覽器支持。取值范圍：0-1
?filter:alpha(opacity=50);
? IE瀏覽器支持的，取值范圍：0-100，取整數(shù)
visibility 用來控制元素的隱藏和顯示狀態(tài)
visible 當(dāng)前元素為顯示狀態(tài)
hidden 當(dāng)前元素為隱藏狀態(tài)
用visibility隱藏的元素，元素原來所占的空間位置還在。
瀏覽器會默認給li標簽前面加一個黑圓點樣式，這種默認的樣式對現(xiàn)在的開發(fā)者來說已經(jīng)沒有太大的用處了， 一般我們會取消掉這個默認的樣式，方法如下：
list-style：none;
對于頁面中具有唯一性、結(jié)構(gòu)性的模塊，使用id選擇器，其他一般采用class選擇器
? 選擇器命名一律使用小寫字母
? 要有合理的注釋
? 結(jié)構(gòu)上有父子包含關(guān)系的樣式，應(yīng)通過命名體現(xiàn)。
? 命名使用駝峰結(jié)構(gòu)+橫線，即同一對象的命名如果需要多個單詞， 使用駝峰命名法則，如：boxMusic
? 名字不能以數(shù)字開頭
? 命名的時候一定要有意義
lt;style>
*{ padding:0; margin:0;}
#box{ width:200px; height:200px; padding:30px; border:#000 solid 1px; margin:30px;s}
</style>
<div id="box" class="boxClass">
<p>1</p>
<p>2</p>
</div>
<script>
var box = document.getElementById("box");
console.dir(box);
</script>
盒子模型
1、私有屬性
//className 屬性設(shè)置或返回元素的 class 屬性
//clientHeight返回元素的可見高度（樣式高+padding）
//clientWidth返回元素的可見寬度（樣式寬+padding）
//clientLeft左側(cè)邊框的大小，即(offsetWidth-clientWidth)/2
//clientTop上側(cè)邊框的大小，即(offsetHeight-clientHeight)/2
//offsetHeight返回元素的高度（樣式高+padding+border）
//offsetWidth返回元素的寬度（樣式寬+padding+border）
//offsetLeft返回元素的水平偏移位置
//offsetTop返回元素的垂直偏移位置
//offsetParent返回元素的偏移容器
//scrollHeight滾動條的高度
//scrollWidth滾動條的寬度
//tagName返回元素的標簽名（大寫）
box的屬性__proto__指向HTMLDivElement的原型鏈
*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。
