语义元素能够清楚的描述其意义给浏览器和开发者。

无语义 元素实例: <div> 和 <span> - 无需考虑内容.

语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.

HTML5 提供了新的语义元素来明确一个Web页面的不同部分:

  • <header> 头部,可以使用多个<header> 元素.
  • <nav>      导航链接
  • <section>  定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
  • <article>   定义独立的内容。.
  • <aside>     定义页面主区域内容之外的内容(比如侧边栏)。
  • <figcaption>定义 <figure> 元素的标题.应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
  • <figure>   规定独立的流内容(图像、图表、照片、代码等等)。如果被删除,则不应对文档流产生影响。
  • <footer>  文档的底部区域.可以使用多个 <footer>元素.

以上的元素都是块元素(除了<figcaption>).

为了让这些块及元素在所有版本的浏览器中生效,你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):

header, section, footer, aside, nav, article, figure

    display: block; 
}

HTML5学习笔记(四)语义元素的更多相关文章

  1. HTML5学习笔记三 HTML元素、属性、标题、段落简介

    一.HTML 元素 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容(empty content) 空元素在开始标签 ...

  2. HTML5学习笔记<四>: 列表, 块和布局

    HTML列表 列表标签 标签 描述 <ol> 定义有序列表. <ul> 定义无序列表. <li> 定义列表项. <dl> 定义定义列表. <dt& ...

  3. HTML5学习笔记四:html5结构

    一.大纲:大纲即文档中各内容区块的结构编排 1. 显示编排内容区块:使用section等元素创建文档结构,每个内容区块使用标题(h1~h6,hgroup); 2. 隐式编排内容区块:根据页面所书写的各 ...

  4. angular学习笔记(四)- input元素的ng-model属性

    input元素的ng-model属性: 用于将input的值和变量的值进行双向绑定 <!DOCTYPE html> <html ng-app> <head> < ...

  5. HTML5学习笔记四 HTML文本格式化

    HTML 格式化标签 HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如:粗体 or 斜体 这些HTML标签被称为格式化标签 通常标签 <strong> ...

  6. Html5学习笔记1 元素 标签 属性

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  7. HTML5学习笔记之表格标签

    HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...

  8. html5学习笔记一

    HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg”  controls=”controls”> ...

  9. python3.4学习笔记(四) 3.x和2.x的区别,持续更新

    python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...

  10. HTML5学习第四天

    HTML5学习第四天 一.HTML列表 HTML列表,有无序表,有序表以及自定义表,列表于列表之间可以实现嵌套 列表相关操作 <ul> <li>(多选)谁世界第二可爱?< ...

随机推荐

  1. 九度OJ 1067:n的阶乘 (数字特性)

    时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6476 解决:2471 题目描述: 输入一个整数n,输出n的阶乘 输入: 一个整数n(1<=n<=20) 输出: n的阶乘 样例 ...

  2. 将众多小文件输入Hadoop的解决方案 可挂载的HDFS

    配置HDFS为可挂载后: 1-可挂载后才支持非完整POSIX语义: 2-仍然不支持随机写入,仍然为“一次写入,多次读取”: 3-可能误用,导致众多小文件: : 1-使用Solr存储和检索小文件: 2- ...

  3. Hadoop实战-Flume之自定义Source(十八)

    import java.nio.charset.Charset; import java.util.HashMap; import java.util.Random; import org.apach ...

  4. iOS Dev (53) 修复UIImagePickerController偷换StatusBar颜色的问题

    版权声明:本文为 CSDN 博主 大锐哥(ID 为 prevention)原创文章,未经博主同意不得转载. https://blog.csdn.net/prevention/article/detai ...

  5. 使用pidof/kill组合命令,变相解决mediaserver内存泄漏【转】

    本文转载自:https://blog.csdn.net/lj402159806/article/details/78950384 在5.1系统下mediaserver有内存泄漏的问题,原因在于使用ca ...

  6. 51Nod 1294 修改数组 —— LIS

    题目链接:http://www.51nod.com/onlineJudge/questionCode.html#!problemId=1294 1294 修改数组  题目来源: HackerRank ...

  7. 去js校验

    1.首先,找到项目所在的路径 2.关掉eclipse,找到项目文件 3.打开.project

  8. matlab之sortrows()函数

    sortrows()函数的格式: sortrows(A,column) A是一个矩阵,如果没有第二个参数column,则默认按照第一列升序排列,如果遇到重复数字,则按照第二列升序排列,依次类推... ...

  9. ios图文混编瀑布流

    ios图文混编瀑布流,利用UICollectionView 实现图文混编的瀑布流,支持section内容伸缩 http://www.huiyi8.com/pubuliu/

  10. 分享知识-快乐自己:JAVA中的 Iterator 和 Iterable 区别

    java.lang.Iterable  java.util.Iterator  Iterator是迭代器类,而Iterable是接口. 好多类都实现了Iterable接口,这样对象就可以调用itera ...