HTML5块级元素_html/css_WEB-ITnose
目录 [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>
Hot AI Tools
Undresser.AI Undress
AI-powered app for creating realistic nude photos
AI Clothes Remover
Online AI tool for removing clothes from photos.
Undress AI Tool
Undress images for free
Clothoff.io
AI clothes remover
Video Face Swap
Swap faces in any video effortlessly with our completely free AI face swap tool!
Hot Article
Hot Tools
Notepad++7.3.1
Easy-to-use and free code editor
SublimeText3 Chinese version
Chinese version, very easy to use
Zend Studio 13.0.1
Powerful PHP integrated development environment
Dreamweaver CS6
Visual web development tools
SublimeText3 Mac version
God-level code editing software (SublimeText3)
Hot Topics
1386
52
What is the purpose of the <progress> element?
Mar 21, 2025 pm 12:34 PM
The article discusses the HTML <progress> element, its purpose, styling, and differences from the <meter> element. The main focus is on using <progress> for task completion and <meter> for stati
Is HTML easy to learn for beginners?
Apr 07, 2025 am 12:11 AM
HTML is suitable for beginners because it is simple and easy to learn and can quickly see results. 1) The learning curve of HTML is smooth and easy to get started. 2) Just master the basic tags to start creating web pages. 3) High flexibility and can be used in combination with CSS and JavaScript. 4) Rich learning resources and modern tools support the learning process.
What is the purpose of the <datalist> element?
Mar 21, 2025 pm 12:33 PM
The article discusses the HTML <datalist> element, which enhances forms by providing autocomplete suggestions, improving user experience and reducing errors.Character count: 159
What is the viewport meta tag? Why is it important for responsive design?
Mar 20, 2025 pm 05:56 PM
The article discusses the viewport meta tag, essential for responsive web design on mobile devices. It explains how proper use ensures optimal content scaling and user interaction, while misuse can lead to design and accessibility issues.
What is the purpose of the <iframe> tag? What are the security considerations when using it?
Mar 20, 2025 pm 06:05 PM
The article discusses the <iframe> tag's purpose in embedding external content into webpages, its common uses, security risks, and alternatives like object tags and APIs.
The Roles of HTML, CSS, and JavaScript: Core Responsibilities
Apr 08, 2025 pm 07:05 PM
HTML defines the web structure, CSS is responsible for style and layout, and JavaScript gives dynamic interaction. The three perform their duties in web development and jointly build a colorful website.
What is the purpose of the <meter> element?
Mar 21, 2025 pm 12:35 PM
The article discusses the HTML <meter> element, used for displaying scalar or fractional values within a range, and its common applications in web development. It differentiates <meter> from <progress> and ex
Understanding HTML, CSS, and JavaScript: A Beginner's Guide
Apr 12, 2025 am 12:02 AM
WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.
