時間：2023-09-08 18:24:01 | 來源：網(wǎng)站運營
時間：2023-09-08 18:24:01 來源：網(wǎng)站運營
HTML語義化 & 網(wǎng)頁布局：Semantics is the study of the meanings of words and phrases in a language. - w3schools.com說白了，讓 HTML文本 語義化，就是讓 HTML元素 能夠表明其內(nèi)部 內(nèi)容的意義。
在線咨詢
<header>頭部欄（如：Logo，標(biāo)題）<nav>導(dǎo)航（如：各個部分的鏈接）<article>文章（如：獨立的一篇文章）<figure>流內(nèi)容（如：圖像、圖表、照片、代碼）<aside>側(cè)邊欄（如：相關(guān)信息，廣告）<footer>底部欄（如：作者信息，聯(lián)系信息）<div id="header"> <div id="nav"></div></div><div id="article"> <div id="figure"></div></div><div id="aside"></div><div id="footer"></div> <header> <nav></nav></header><article> <figure></figure></article><aside></aside><footer></footer> 要實現(xiàn)上圖的結(jié)構(gòu)，我們可以用著兩種方法去實現(xiàn)。一種是非語義化的，一種是語義化的。<div>元素 里面，不也用 id屬性 表明元素的作用了嗎？id屬性 定義上一個人類看得懂的單詞，但是如果你隨便寫幾個字母呢？機器不會管你 id 里寫了什么，它只知道這是個沒有任何特殊含義的 div塊級元素。class，id屬性，并不能保證每個人都明白所表達(dá)的意思。<header>元素<header>元素描述了文檔的頭部區(qū)域。不要把它和<h1>-<h6>弄混哦。<header>元素里，應(yīng)該包含 介紹性的內(nèi)容。<section>, <article>, <body>的開頭。<header>元素里。<nav>元素<nav>元素定義導(dǎo)航鏈接的部分。用戶通過鏈接前往相關(guān)的頁面。<nav>元素里<footer>元素<footer> 元素描述了文檔的底部區(qū)域。一個頁腳通常包含文檔的作者，著作權(quán)信息，鏈接的使用條款，聯(lián)系信息等。<footer>元素 和 <header>元素 基本上一樣，只不過它是被放在 文章/網(wǎng)頁 底部的。有的網(wǎng)頁中也會把<nav>放到<footer>里。這些完全取決于你想怎么安排網(wǎng)頁結(jié)構(gòu)。<footer>中就有一個<nav>。<article>元素<article> 元素定義網(wǎng)頁中獨立內(nèi)容。每一個<article>元素就像一個個獨立的頁面。<header>和<footer>。比如說在一個博客頁面中，每一篇文章就應(yīng)該被放在獨立<article>中。<article> 是獨立的，意思是說，每一個 <article>元素 之間都是沒關(guān)系的，同時和它所在的頁面也是沒關(guān)系的。<article>元素。上面所說的 獨立 的意思在下圖中就有體現(xiàn)。每一個橙色框里的內(nèi)容刪掉，都不會對其他橙色框造成影響。同時，對于本站這個網(wǎng)站，也不會造成影響。本站網(wǎng)站 和 其他文章 并不因為任何一篇文章的存在而存在。<section> 元素<section>標(biāo)簽定義文檔中的節(jié)（section、區(qū)段）。比如章節(jié)、頁眉、頁腳或文檔中的其他部分。<article>元素，<section>元素并不需要獨立于所屬文章/頁面。<div>。用來有意義的劃分空間。同時，<section>中應(yīng)該有標(biāo)題<h1> - <h6> ，用來表明這個區(qū)塊所包含的內(nèi)容。<aside> 元素<aside> 標(biāo)簽定義頁面主區(qū)域內(nèi)容之外的內(nèi)容（比如側(cè)邊欄）。<header>和<footer>都是為了給 文章/頁面 添加額外信息。但是有的時候有些信息是和 文章/頁面 沒什么關(guān)系的。這個時候 側(cè)邊欄<aside> 就是個好地方去這些無關(guān)內(nèi)容。<article> 中：放置主要內(nèi)容的附屬信息，比如與當(dāng)前文章相關(guān)的資料、名詞解釋，等等。<div>還要繼續(xù)用嗎？<div>可以作為一個很好的不帶語義 容器元素（“container element”）。margin: 0 auto; 水平居中頁面內(nèi)容部分<body> <div class="wrap"> <header>...</header> <section>...</section> <footer>...</footer> </div></body> 這個時候用一個<div>元素把頁面內(nèi)容包起來，然后在瀏覽器中居中，是個很好的選擇。FlexBox或者 Grid網(wǎng)格中，我們都會經(jīng)常用到<div>去進(jìn)行布局。<div class="container"> <div id="left"></div> <!- 定寬 --> <div id="right"></div> <!- 自適應(yīng) --></div> CSS.container { display: flex; /* 設(shè)置為 FlexBox 容器 */}#left, #right { height: 200px; border: 1px solid red; margin: 5px;}#left { width: 50px; }#right { flex: 1 1 auto; /* 簡寫屬性，意思是flex-grow:1; flex-shrink:1; flex-basis:auto; container有剩余空間就擴大，沒有就縮小 */} .container { display: grid; /* 設(shè)置為 Grid 容器 */ grid-template-columns: 50px minmax(0, auto); /* 左列定寬50px, 右列寬度為剩余空間 */ grid-template-rows: 200px; grid-column-gap: 10px;}#left, #right { border: 1px solid red;} <div class="container"> <div id="left"></div> <div id="center"></div> <div id="right"></div></div> CSS.container { display: flex; /* 設(shè)置為 FlexBox 容器 */}#left, #right, #center { border: 1px solid red; margin: 10px;}#left, #right { width: 50px; height: 200px;}#center { flex: 1 1 auto;} .container { display: grid; /* 設(shè)置 Grid 容器 */ grid-template-columns: 50px minmax(0, auto) 50px; /* 三列，左右兩列定寬50px，中間寬度為剩余空間 */ grid-template-rows: 200px; grid-column-gap: 10px;}#left, #right, #center { border: 1px solid red;} <div class="container"> <div id="left">我的寬度可能并不確定。。</div> <div id="right">我的寬度自適應(yīng)。</div></div> CSS.container { display: flex;}#left, #right { height: 200px; margin: 10px; border: 1px solid red;}#right { flex: 1 1 auto;} .container { display: grid; /* 設(shè)置為 Grid 容器 */ grid-template-columns: minmax(0, auto) minmax(0, auto); grid-template-rows: 200px; grid-column-gap: 10px;}#left, #right { border: 1px solid red;} <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div></div>CSS.container { display: flex;}.item { flex: 1 1 auto; /* 寬度平均分 */ height: 200px; border: 1px solid red; margin: 10px;} .container { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; /* 四個項目等分剩余空間 */ grid-template-rows: 200px;}.item { margin: 10px; border: 1px solid red;}<div class="container"> <div class="row"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="row"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div> <div class="row"> <div class="item"></div> <div class="item"></div> <div class="item"></div> </div></div> CSS.container { display: flex; flex-direction: column;}.row { display: flex;;}.item { width: 50px; height: 50px; margin: 10px; border: 1px solid red;} <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div> <div class="item"></div></div> CSS.container { display: grid; grid-template-columns: 50px 50px 50px; grid-template-rows: 50px 50px 50px; grid-column-gap: 10px; grid-row-gap: 10px;}.item { border: 1px solid red;} <div class="container"> <div class="item"></div> <div class="item"></div> <div class="item"></div></div> CSS.container { display: flex; flex-wrap: wrap;}.item { width: 33.3%; /* 一共三個item, 3 x 33.3% = 100% */ height: 200px; box-sizing: border-box; border: 1px solid red;} <div class="container"> <div class="left"></div> <div class="right"> <div class="up"></div> <div class="down"></div> </div></div> CSS.container { display: flex; height: 200px;}.left, .right, .up, .down { border: 1px solid red; box-sizing: border-box;}.left { width: 100px;}.right { flex: 1 1 auto;}.up { height: 40%;}.down { height: 60%;} Grid網(wǎng)格布局.container { display: grid; grid-template-columns: 100px minmax(0, auto); grid-template-rows: 200px;}.left, .right, .up, .down { border: 1px solid red; box-sizing: border-box;}.up { height: 40%;}.down { height: 60%;} 當(dāng)然 Grid網(wǎng)格布局 不局限于這一種寫法，你能想出別的寫法嗎？box-sizing屬性box-sizing這個屬性，這個是干什么的呢?width和height屬性的時候。padding, border, margin屬性之后，這個元素在頁面中的尺寸也無形的增加了。<div class="container"> <div class="left"></div> <div class="right"></div><div> CSS.container { display: flex; flex-wrap: wrap;}.left, .right { height: 100px; border: 1px solid red;}.left { width: 40%;}.right { width: 60%;}本來預(yù)期 40% + 60% = 100%, .left 占 .container 40% 的寬度； .right 占 .container 60% 的寬度，兩個<div>元素水平排布開來。border: 1px solid red;讓每個<div>的寬度多了2px（左右各1px）。.left, .right { height: 100px; border: 1px solid red; box-sizing: border-box;} 這個時候在CSS中加上box-sizing: border-box;。這樣我們定義的尺寸就是 content + padding + border 的總和了。div的排列合乎預(yù)期了。box-sizing屬性值content-box：默認(rèn)值。width 和 height 屬性只包含content。 border 和 padding 不包括。border-box：width 和 height 屬性包含 content, padding 和 border。inherit：從父元素繼承關(guān)鍵詞：布局
微信公眾號
版權(quán)所有? 億企邦 1997-2025 保留一切法律許可權(quán)利。
