HTML5块级元素_html/css_WEB-ITnose
Jun 24, 2016 am 11:31 AM
目录 [1]section [2]article [3]aside [4]nav [5]header [6]footer [7]hgroup [8]address [9]案例
前面的话
几年前，用于网页布局的一般都用div元素，但语义化并不好。HTML5引入了大量新的块级元素来帮助提升网页的语义，使页面具有逻辑性的结构、容易维护，并且对数据挖掘服务更加友好
定义
区块型元素是用来定义区块内容范围的元素，重要特征是区块级内容会在文档大纲中产生级别，实际上仅包括
区块级元素
文档中的章节或区块，区块级通用元素
[ 如果标签只用来作为CSS和Javascript的钩子，则使用 用来定义独立的文档、页面、应用甚至站点。标准是判断其内容是否可以单独发布或重用 [注意]对于 不直接相关内容的侧边栏， [注意]关于 含有导航链接的区块。页面的主导航里有时含有相关链接或重复链接，但如果是不相关或冗余的，并对主导航不是至关重要的链接，那么一般不需要放在nav元素里 头部，用于将介绍内容和区块的辅助导航分组到一起，所以它有可能包含区块的标题元素以及其他的介绍内容(目录、logo等) 尾部，包含跟区块或页面整体相关的内容，比如作者、版权信息、联系地址以及其他少量信息 hgroup元素可以将一组标题元素放在一起，HTML5大纲算法只会处理其中排名最高的，h1元素封装标题，h2元素封装副标题 用于提供相近文章或这个页面作者的直接联系信息(e-mail地址、电话号码等)，而不是用于邮寄地址或类似的不是最直接能够联系到作者的方式的信息 [注意]在除了article和body之外的区块元素中使用address元素是不合适的，一个section元素不能含有一个address元素 想找一个规范使用html5新标签的网站不是很容易，国内大多数网站由于各种各样的原因，依然还是div布局，最终，案例选择使用苹果官网
其他块级元素
案例说明
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>苹果首页</title></head><body><nav> <ul> <li><a href="#">Apple</a></li> <li><a href="#">Mac</a></li> <li><a href="#">iPad</a></li> <li><a href="#">iPhone</a></li> <li><a href="#">Watch</a></li> <li><a href="#">Music</a></li> <li><a href="#">技术支持</a></li> <li><a href="#">搜索</a></li> <li><a href="#">购物袋</a></li> </ul></nav><article> <section>展示1</section> <section>展示2</section> <section>展示3</section> <section>展示4</section> <nav> <ul> <li>按钮1</li> <li>按钮2</li> <li>按钮3</li> <li>按钮4</li> </ul> </nav></article><aside> <ul> <li><a href="#">Watch</a></li> <li><a href="#">Pencil</a></li> <li><a href="#">iPad</a></li> <li><a href="#">MacBook</a></li> </ul></aside><footer> <nav> <div>选购及了解</div> <div>商店</div> <div>应用</div> <div>账户</div> <div>关于</div> </nav> <section> <div>其他杂项</div> </section></footer></body></html>
Article chaud
Outils chauds Tags
Article chaud
Tags d'article chaud
Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit
SublimeText3 version chinoise
Version chinoise, très simple à utiliser
Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP
Dreamweaver CS6
Outils de développement Web visuel
SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)
Sujets chauds
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
Mar 04, 2025 pm 12:32 PM
Difficulté à mettre à jour la mise en cache des pages Web officielles du compte: comment éviter l'ancien cache affectant l'expérience utilisateur après la mise à jour de la version?
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Mar 17, 2025 pm 12:27 PM
Comment utiliser les attributs de validation du formulaire HTML5 pour valider l'entrée utilisateur?
Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?
Mar 04, 2025 pm 02:39 PM
Comment ajouter efficacement les effets de course aux images PNG sur les pages Web?
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Mar 20, 2025 pm 06:05 PM
Quel est le but du & lt; iframe & gt; étiqueter? Quelles sont les considérations de sécurité lorsque vous l'utilisez?
Quel est le but du & lt; mètre & gt; élément?
Mar 21, 2025 pm 12:35 PM
Quel est le but du & lt; mètre & gt; élément?
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Mar 17, 2025 pm 12:20 PM
Quelles sont les meilleures pratiques pour la compatibilité entre les navigateurs dans HTML5?
Quel est le but du & lt; datalist & gt; élément?
Mar 21, 2025 pm 12:33 PM
Quel est le but du & lt; datalist & gt; élément?
Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage?
Mar 12, 2025 pm 04:08 PM
Comment utiliser le HTML5 & LT; METER & GT; élément pour afficher des données numériques dans une plage?
