現在的位置: 首頁 > web前端 > 正文

HTML5新增語義化布局標簽是什么意思

2020年01月14日 web前端 ⁄ 共 1181字 ⁄ 字號 評論關閉

  HTML5是Web中核心語言HTML的規范,用戶使用任何手段進行網頁瀏覽時看到的內容原本都是HTML格式的,在瀏覽器中通過一些技術處理將其轉換成為了可識別的信息。HTML5在從前HTML4.01的基礎上進行了一定的改進,雖然技術人員在開發過程中可能不會將這些新技術投入應用,但是對于該種技術的新特性,網站開發技術人員是必須要有所了解的。

  HTML5是HTML最新的修訂版本,2014年10月由萬維網聯盟(W3C)完成標準制定。

  在HTML5出現之前,我們一般采用DIV+CSS布局我們的頁面。但是這樣的布局方式不僅使我們的文檔結構不夠清晰,而且不利于搜索引擎爬蟲對我們頁面的爬取。為了解決上述缺點,HTML5新增了很多新的語義化標簽

  HTML5布局

  < header>...< /header> 頭部

  < nav>...< /nav> 導航

  < section>...< /section> 定義文檔中的節。比如章節、頁眉、頁腳或文檔中的其它部分

  < aside>...< /aside> 側邊欄

  < footer>...< /footer> 頁腳

  < article>...< /article> 代表一個獨立的、完整的相關內容塊,可獨立于頁面其它內容使用。例如一篇完整的論壇帖子,一篇博客文章,一個用戶評論等

  使用HTML5的新的結構標簽,做出上面的布局,代碼如下:

  < header>定義一個頁面或是區域的頭部< /header>

  < div>

  < section>定義一個區域< /section>

  < aside>定義頁面內容的側邊框部分< /aside>

  < /div>

  < footer>定義一個頁面或是區域的底部< /footer>

  /*頁面頂部 header*/

  header{

  height:150px;

  background-color:#abcdef;

  }

  /*頁面中間 div*/

  div{

  margin-top:10px;

  height:300px;

  }

  section{

  height:300px;

  background-color:#abcdef;

  width:70%;

  float:left;

  }

  article{

  background-color:#F33;

  width:500px;

  text-align:center;

  margin:0px auto;

  }

  aside{

  height:300px;

  background-color:#abcdef;

  width:28%;

  float:right;

  }

  /*頁面底部*/

  footer{

  height:100px;

  background-color:#abcdef;

  clear:both;

  margin-top:10px;

  }

抱歉!評論已關閉.

奔驰宝马破解版下载 四人麻将单机免费 20选8快乐十分开奖结果天津 添加微信平台捕鱼游戏 福州麻将攻略 江西多乐彩出号走势图 六开香港开奖结果 股票趋势分析方法 娱乐棋牌官网下载 平特一肖2019免费公开资料 香港股票指数 友好广西棋牌正版 能赚钱的网络手游 千炮捕鱼攻略 东北麻将胡法大全图片 pk10开奖记录 股票加杠杆软件