顧問提供專業咨詢
大模型定制 · WEB3 · 元宇宙 · 區塊鏈 · 高端網站建設 · 小程序 · APP · 微信 · H5 · 电商
网页如何布局？一直是网站設計網站制作中一个常会谈到的话题，总结起来就是头部、内容、侧栏、底部几个“盒子(Box)”的集合等。看似一个简单的问题在网页設計中会随着网站越来越庞大交错，而变得越来越复杂。所以网站設計师在工作中也要按照正确的规范来进行，否则可以会因为不符合现行的规范，而造成一些逻辑不正确，或是設計元素无法使用的问题。
爲什麽要規範網頁布局的標簽使用及命名？
首先，html5提出了標簽邏輯化，在標簽本身已經規範了內容的使用，無論在頁面體驗還是搜索引擎親和方面都是大勢所趨。
其次，對于一個網站的代碼編寫，尤其是結構複雜的大項目難免涉及到多人合作、接替的工作內容，因此規範化的使用標簽及命名能更好的讓多人“兼容”在一起，減少因工作交接而耽擱的工作進程時間。
結合HTML5標簽介紹網頁布局方式的規範
規範一，爲整個頁面添加“容器”標簽
这是一种形象的比喻，将整个页面比做一个房间，那么我們需要为这个房间起一个名称标签，以便罩住、囊括里面所有的页面元素。简单的说就是在body内设置一个最外层“div”，有了它我們可以控制整张网页的位置——居左、居右、居中。在名称标签的命名上可以最直观的标写<div id=”page”>。
規範二，用<Header>定義頁面的“頁眉”部分
在网站設計網站制作中“页眉”部指的就是网页的顶部部分，又称为head或header。这部分内容包括：网站名称、LOGO、主导航、Banner内容。在代码编写时，统的做法是：使用 <div id=”header”> 来定义网页的头文件部分。
HTML5直接提出了用<header>标签来更直观的告诉web开发者与搜索引擎：这里是相对父级的头部/顶部/页眉部分。header标签可以在页面里重复出现，我們可以将作为页面布局的header标签命名为 id=”masthead”或其他。
規範三，用“Content”命名頁面的主要內容部分
企业网站中每个页面都有它的主要部分，如文章页里面的文章、列表页的文章标题列表。html5对于这部分内容提供了<article>标签，但在实际工作中，主要内容页面还面包屑、广告位、评论等内容，这时我們可以单独设置一个<div=”content”> 来定义它为页面内容部分。
页面的主要内容依据不同层次的页面，其内容各自不同，如网站首页内部则由多个“部分”组成。每一块内容我們可以使用 <section> 标签定义。而<article> 标签我們用于定义页面内的主题内容。
规范四，用 “Sidebar”命名页面的辅助信息部分
Sidebar是頁面布局中稱爲“側欄”或“邊欄”，它往往是頁面的可選部分。Sidebar內放置的是相對于Content的相關內容或輔助內容，如“最新文章”、“熱門文章”等。html5的新標簽<aside>代表與頁面內容相關、有別于主要內容的部分。
規範五，用<Footer>定義頁面的頁腳部分
了解了header标签之后我們就不难了解footer标签了，它是相对于父级的底部/页脚部分。由于网站底部内容主要是体现版权类信息，所以我們可以为footer标签命名为“colophon”。
北京分形科技有限公司成立于2003年，是一家以AI为核心驱动力，提供网络品牌策划、AI互聯網服務、WEB3服務、AI人工智能解决方案的综合服務商
我們一直秉承的经营理念：责任、热情、品质、包容
主要业务范围：AI互聯網服務（網站建設,网站群,短视频社交平台,APP,小程序）AI人工智能行业解决方案（智慧博物館,智慧公園,智慧景区,智慧社區,智慧医疗,智慧校园,）IoT智能物联産品（智能步道,AR太极,AI健身,AI导览,AI单车,智慧树）WEB3（區塊鏈,元宇宙,NFT數字藏品）