標籤:無法找到 section seo 選擇 常見 功能 全域 水平線 特性
這篇將簡單會編寫網頁整體網站架構,通過HTML來表示網站結構。
標題<header>,通常頂部有個大標題或表徵圖,是網站的主要常見資訊,存在於每個網頁
導航<nav>,通常包含功能表按鈕、連結、選項卡,要跳轉的導航內容與相應的網頁保持一致
主要內容<main>,中心大地區包含網頁給定的大部分獨特內容,
側欄 <aside>主要是一些次要資訊,連結,引言,廣告等,也可以是一些導航輔助系統;經常嵌套在<main>中
頁尾<footer>, 橫跨頁面底部的條紋,通常包含著作權。聯絡想你洗,放置公用資訊的地方,也提供快速存取熱門內容的連結,頁尾也用於引擎SEO,
用於結構化網站的HTML
需要用正確的元素來語義化工作,恰好這些語義化元素能夠被閱讀器所識別。
布局元素細節,總體上把握包含header nav main footer .然後main裡麵包含article和aside
<main> 展現頁面內容特性,只可以在一個頁面使用一次,直接放在body裡理想情況下,不應該把他嵌套在別的元素中。
<article> 閉合一塊與自身相關的內容,這塊內容能夠詳細區段視它自身而不是頁面其他內容
<section> 類似於<article>被作為一個部分,區塊,標題的一部分,吧不同的section分到不同的article裡
<aside> 包含的內容不與主要內容有直接聯絡,通常放一些術語表條目,輔助菜單,相關連結等
<header> 展現一些介紹性內容,如果它是body的子項目,它就定義網站的全域頁首,當然它還可以用於article部分的,當其充當article的子項目是,它就定義了這部分特定的頁首,
<nav> 包含了頁面主要的導航功能,二級連結,不會進入導航功能部分
<footer> 包含頁面的頁尾部分
沒有特定語義的裝飾元素
<div><span>無語義元素,在使用的時候最好用一些class屬性來提供一些標籤,容易被找到
其中span 是行內無語音元素,只有當無法找到更合適的語義元素包含內容時再使用;div塊級無語音元素,同樣也是在找不到更合適的時候選用;打個比方,你要想做一個購物車組件,考慮到和之內容不存在必要聯絡,所以不能用aside,也不是頁面內容的一部分也不能用section,此時選擇div比較合適,為了語義化,應該將div的使用量降到最低,因為不利於升級和維護;
換行和水平分割線
<br><hr> 著兩個元素代表換行和水平分割線, 產生一系列的短行的地方,<br>是唯一能夠產生這種結構的元素;<hr>水平線,
HTML入門6