好好學習,天天向上
本章主要內容為:新增語義化標簽、多媒體標簽、新增表單和屬性
一、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>
-
扫码下载安卓APP
-
微信扫一扫关注我们微信扫一扫打开小程序手Q扫一扫打开小程序
-
返回顶部