HTML5块级元素_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

HTML5块级元素_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

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>

声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

了解HTML，CSS和JavaScript：初学者指南Apr 12, 2025 am 12:02 AM

WebDevelovermentReliesonHtml，CSS和JavaScript：1）HTMLStructuresContent，2）CSSStyleSIT和3）JavaScriptAddSstractivity，形成thebasisofmodernWebemodernWebExexperiences。

HTML的角色：构建Web内容Apr 11, 2025 am 12:12 AM

HTML的作用是通过标签和属性定义网页的结构和内容。1.HTML通过到、等标签组织内容，使其易于阅读和理解。2.使用语义化标签如、等增强可访问性和SEO。3.优化HTML代码可以提高网页加载速度和用户体验。

HTML和代码：仔细观察术语Apr 10, 2025 am 09:28 AM

htmlisaspecifictypefodyfocusedonstructuringwebcontent，而“代码” badlyLyCludEslanguagesLikeLikejavascriptandPytyPythonForFunctionality.1）htmldefineswebpagertuctureduseTags.2）“代码”代码“ code” code code code codeSpassSesseseseseseseseAwiderRangeLangeLangeforLageforLogageforLogicIctInterract

HTML，CSS和JavaScript：Web开发人员的基本工具Apr 09, 2025 am 12:12 AM

HTML、CSS和JavaScript是Web开发的三大支柱。1.HTML定义网页结构，使用标签如、等。2.CSS控制网页样式，使用选择器和属性如color、font-size等。3.JavaScript实现动态效果和交互，通过事件监听和DOM操作。

HTML，CSS和JavaScript的角色：核心职责Apr 08, 2025 pm 07:05 PM

HTML定义网页结构，CSS负责样式和布局，JavaScript赋予动态交互。三者在网页开发中各司其职，共同构建丰富多彩的网站。

HTML容易为初学者学习吗？Apr 07, 2025 am 12:11 AM

HTML适合初学者学习，因为它简单易学且能快速看到成果。1)HTML的学习曲线平缓，易于上手。2)只需掌握基本标签即可开始创建网页。3)灵活性高，可与CSS和JavaScript结合使用。4)丰富的学习资源和现代工具支持学习过程。

HTML中起始标签的示例是什么？Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。