时间：2023-09-08 18:24:01 | 来源：网站运营
时间：2023-09-08 18:24:01 来源：网站运营
HTML语义化 & 网页布局：Semantics is the study of the meanings of words and phrases in a language. - w3schools.com说白了，让 HTML文本 语义化，就是让 HTML元素 能够表明其内部 内容的意义。
在线咨询
<header>头部栏（如：Logo，标题）<nav>导航（如：各个部分的链接）<article>文章（如：独立的一篇文章）<figure>流内容（如：图像、图表、照片、代码）<aside>侧边栏（如：相关信息，广告）<footer>底部栏（如：作者信息，联系信息）<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> 要实现上图的结构，我们可以用着两种方法去实现。一种是非语义化的，一种是语义化的。<div>元素 里面，不也用 id属性 表明元素的作用了吗？id属性 定义上一个人类看得懂的单词，但是如果你随便写几个字母呢？机器不会管你 id 里写了什么，它只知道这是个没有任何特殊含义的 div块级元素。class，id属性，并不能保证每个人都明白所表达的意思。<header>元素<header>元素描述了文档的头部区域。不要把它和<h1>-<h6>弄混哦。<header>元素里，应该包含 介绍性的内容。<section>, <article>, <body>的开头。<header>元素里。<nav>元素<nav>元素定义导航链接的部分。用户通过链接前往相关的页面。<nav>元素里<footer>元素<footer> 元素描述了文档的底部区域。一个页脚通常包含文档的作者，著作权信息，链接的使用条款，联系信息等。<footer>元素 和 <header>元素 基本上一样，只不过它是被放在 文章/网页 底部的。有的网页中也会把<nav>放到<footer>里。这些完全取决于你想怎么安排网页结构。<footer>中就有一个<nav>。<article>元素<article> 元素定义网页中独立内容。每一个<article>元素就像一个个独立的页面。<header>和<footer>。比如说在一个博客页面中，每一篇文章就应该被放在独立<article>中。<article> 是独立的，意思是说，每一个 <article>元素 之间都是没关系的，同时和它所在的页面也是没关系的。<article>元素。上面所说的 独立 的意思在下图中就有体现。每一个橙色框里的内容删掉，都不会对其他橙色框造成影响。同时，对于本站这个网站，也不会造成影响。本站网站 和 其他文章 并不因为任何一篇文章的存在而存在。<section> 元素<section>标签定义文档中的节（section、区段）。比如章节、页眉、页脚或文档中的其他部分。<article>元素，<section>元素并不需要独立于所属文章/页面。<div>。用来有意义的划分空间。同时，<section>中应该有标题<h1> - <h6> ，用来表明这个区块所包含的内容。<aside> 元素<aside> 标签定义页面主区域内容之外的内容（比如侧边栏）。<header>和<footer>都是为了给 文章/页面 添加额外信息。但是有的时候有些信息是和 文章/页面 没什么关系的。这个时候 侧边栏<aside> 就是个好地方去这些无关内容。<article> 中：放置主要内容的附属信息，比如与当前文章相关的资料、名词解释，等等。<div>还要继续用吗？<div>可以作为一个很好的不带语义 容器元素（“container element”）。margin: 0 auto; 水平居中页面内容部分<body> <div class="wrap"> <header>...</header> <section>...</section> <footer>...</footer> </div></body> 这个时候用一个<div>元素把页面内容包起来，然后在浏览器中居中，是个很好的选择。FlexBox或者 Grid网格中，我们都会经常用到<div>去进行布局。<div class="container"> <div id="left"></div> <!- 定宽 --> <div id="right"></div> <!- 自适应 --></div> CSS.container { display: flex; /* 设置为 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; /* 设置为 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; /* 设置为 FlexBox 容器 */}#left, #right, #center { border: 1px solid red; margin: 10px;}#left, #right { width: 50px; height: 200px;}#center { flex: 1 1 auto;} .container { display: grid; /* 设置 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">我的宽度自适应。</div></div> CSS.container { display: flex;}#left, #right { height: 200px; margin: 10px; border: 1px solid red;}#right { flex: 1 1 auto;} .container { display: grid; /* 设置为 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网格布局.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%;} 当然 Grid网格布局 不局限于这一种写法，你能想出别的写法吗？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%;}本来预期 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的排列合乎预期了。box-sizing属性值content-box：默认值。width 和 height 属性只包含content。 border 和 padding 不包括。border-box：width 和 height 属性包含 content, padding 和 border。inherit：从父元素继承关键词：布局
