局元素
語義化是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
么寫一個優質的div+css頁面
1.margin屬性容易在低版本的IE中出現兼容性問題,盡量少用,可以選用padding或position方式代替。
2.在寬高固定、子元素比較多、子元素位置雜亂,子元素類型較多的區域中,盡量用定位方法來做,比如美團左側的產品區塊,如 果用margin來做,不同版本IE瀏覽器下的表現可能會讓你崩潰的。
3.能設置具體寬高的區塊盡量設置具體的寬高。
4.需要設置背景圖的元素盡量設置具體的寬高。
5.用常見的標簽和css屬性,盡量別用另類的用法。
6.放文字的標簽一定要設置行高
7.不要用行級標簽(a標簽、span標簽等)和文字標簽(p標簽等)當做劃分區域的標簽。
8.盡量不要在行級標簽內嵌套塊級標簽
9.了解自己寫的每一個標簽,每個標簽的大小范圍、屬性、嵌套層級都要很清楚才行,其實就是深入理解盒子模型。
10.深化區塊的概念,把頁面嚴格的分成不同的區塊,盡量避免不同區塊之間的沖突。
11.不知道不認識的屬性和標簽一定不要亂用
12.寫頁面的時候寫一點就測一下兼容性,發現問題及時改正,不要想著等到全寫完后統一調試兼容性。
13.前端開發最忌諱直接參考別人的標簽和寫法,一定要有自己的開發思路,不要怕麻煩,一旦被別人的思路綁架,你會很痛苦的。
14.一般來說,開發兩個國美、京東規模的頁面就算入門了,開發五個以上就能體會到一定的開發技巧。開發的頁面數量越多,就越 熟練,hack用的也會越來越少。SO,動手去做吧!
?opacity: 0.5;
? w3c標準屬性,火狐等瀏覽器支持。取值范圍:0-1
?filter:alpha(opacity=50);
? IE瀏覽器支持的,取值范圍:0-100,取整數
visibility 用來控制元素的隱藏和顯示狀態
visible 當前元素為顯示狀態
hidden 當前元素為隱藏狀態
用visibility隱藏的元素,元素原來所占的空間位置還在。
瀏覽器會默認給li標簽前面加一個黑圓點樣式,這種默認的樣式對現在的開發者來說已經沒有太大的用處了, 一般我們會取消掉這個默認的樣式,方法如下:
list-style:none;
對于頁面中具有唯一性、結構性的模塊,使用id選擇器,其他一般采用class選擇器
? 選擇器命名一律使用小寫字母
? 要有合理的注釋
? 結構上有父子包含關系的樣式,應通過命名體現。
? 命名使用駝峰結構+橫線,即同一對象的命名如果需要多個單詞, 使用駝峰命名法則,如:boxMusic
? 名字不能以數字開頭
? 命名的時候一定要有意義
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 屬性設置或返回元素的 class 屬性
//clientHeight返回元素的可見高度(樣式高+padding)
//clientWidth返回元素的可見寬度(樣式寬+padding)
//clientLeft左側邊框的大小,即(offsetWidth-clientWidth)/2
//clientTop上側邊框的大小,即(offsetHeight-clientHeight)/2
//offsetHeight返回元素的高度(樣式高+padding+border)
//offsetWidth返回元素的寬度(樣式寬+padding+border)
//offsetLeft返回元素的水平偏移位置
//offsetTop返回元素的垂直偏移位置
//offsetParent返回元素的偏移容器
//scrollHeight滾動條的高度
//scrollWidth滾動條的寬度
//tagName返回元素的標簽名(大寫)
box的屬性__proto__指向HTMLDivElement的原型鏈
*請認真填寫需求信息,我們會在24小時內與您取得聯系。