HTML5的新特性

力美健 2024-07-15 19:44 12次浏览 0 条评论 taohigo.com

好好學習,天天向上

本章主要內容為:新增語義化標簽、多媒體標簽、新增表單和屬性

一、HTML5 新增語義化標簽

標簽語義化

  • 以前制作網頁佈局,我們基本用div 來做。 div就是一個普通的塊級標簽, 對於搜索引擎來說,是沒有語義的

①、新增語義化標簽

  • <header>:頭部標簽
  • <nav>:導航標簽
  • <main>: 主體標簽
  • <article>:獨立的內容標簽
  • <section>:區段標簽
  • <aside>:側邊欄標簽
  • <footer>:尾部標簽

註意事項

  • 這種語義化標準主要針對搜索引擎的
  • 這些新標簽頁面中可以使用多次的
  • 在IE9中,需要把這些元素轉換為塊級元素
  • 其實,我們移動端更喜歡使用這些標簽

* {
margin: 0;
padding: 0;
}

header,nav,article,aside,main,footer {
display: block;
}

header {
width: 1000px;
height: 100px;
margin: 0 auto;
background-color: skyblue;
}
nav {
width: 1000px;
height: 50px;
margin: 10px auto;
background-color: sandybrown;
}

main {
width: 1000px;
height: 400px;
margin: 0px auto;
background-color: springgreen;
}

main aside {
float: left;
width: 150px;
height: 400px;
margin-right: 10px;
background-color: tomato;
}

main article {
float: left;
width: 840px;
height: 400px;
background-color: tomato;
}

footer {
width: 1000px;
height: 50px;
margin: 10px auto 0;
background-color: yellow;
}

<header> 頭部 </header>
<nav> 導航 </nav>
<main>
<aside> 側邊欄 </aside>
<article> 主體內容 </article>
</main>
<footer> 底部 </footer>