HTML5学习笔记(四)语义元素
语义元素能够清楚的描述其意义给浏览器和开发者。
无语义 元素实例: <div> 和 <span> - 无需考虑内容.
语义元素实例: <form>, <table>, and <img> - 清楚的定义了它的内容.
HTML5 提供了新的语义元素来明确一个Web页面的不同部分:
- <header> 头部,可以使用多个<header> 元素.
- <nav> 导航链接
- <section> 定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
- <article> 定义独立的内容。.
- <aside> 定义页面主区域内容之外的内容(比如侧边栏)。
- <figcaption>定义 <figure> 元素的标题.应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
- <figure> 规定独立的流内容(图像、图表、照片、代码等等)。如果被删除,则不应对文档流产生影响。
- <footer> 文档的底部区域.可以使用多个 <footer>元素.

以上的元素都是块元素(除了<figcaption>).
为了让这些块及元素在所有版本的浏览器中生效,你需要在样式表文件中设置一下属性 (以下样式代码可以让旧版本浏览器支持本章介绍的块级元素):
{
display: block;
}
HTML5学习笔记(四)语义元素的更多相关文章
- HTML5学习笔记三 HTML元素、属性、标题、段落简介
一.HTML 元素 HTML 元素以开始标签起始 HTML 元素以结束标签终止 元素的内容是开始标签与结束标签之间的内容 某些 HTML 元素具有空内容(empty content) 空元素在开始标签 ...
- HTML5学习笔记<四>: 列表, 块和布局
HTML列表 列表标签 标签 描述 <ol> 定义有序列表. <ul> 定义无序列表. <li> 定义列表项. <dl> 定义定义列表. <dt& ...
- HTML5学习笔记四:html5结构
一.大纲:大纲即文档中各内容区块的结构编排 1. 显示编排内容区块:使用section等元素创建文档结构,每个内容区块使用标题(h1~h6,hgroup); 2. 隐式编排内容区块:根据页面所书写的各 ...
- angular学习笔记(四)- input元素的ng-model属性
input元素的ng-model属性: 用于将input的值和变量的值进行双向绑定 <!DOCTYPE html> <html ng-app> <head> < ...
- HTML5学习笔记四 HTML文本格式化
HTML 格式化标签 HTML 使用标签<b> 与<i> 对输出的文本进行格式, 如:粗体 or 斜体 这些HTML标签被称为格式化标签 通常标签 <strong> ...
- Html5学习笔记1 元素 标签 属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- HTML5学习笔记之表格标签
HTML5学习笔记之表格标签 其他HTML5相关文章 HTML5学习笔记之HTML5基本介绍 HTML5学习笔记之基础标签 HTML5学习笔记之表格标签 HTML5学习笔记之表单标签 HTML5学习笔 ...
- html5学习笔记一
HTML5学习笔记 <video>标记:定义视频,Ogg.MPEG4.WebM三种格式 <video src=”movie.ogg” controls=”controls”> ...
- python3.4学习笔记(四) 3.x和2.x的区别,持续更新
python3.4学习笔记(四) 3.x和2.x的区别 在2.x中:print html,3.x中必须改成:print(html) import urllib2ImportError: No modu ...
- HTML5学习第四天
HTML5学习第四天 一.HTML列表 HTML列表,有无序表,有序表以及自定义表,列表于列表之间可以实现嵌套 列表相关操作 <ul> <li>(多选)谁世界第二可爱?< ...
随机推荐
- 【题解】Sumdiv
[题解]Sumdiv 传送门 根据组合的乘法原理,一个数的所有约数和 \[ sum=\prod_{i=1} \Sigma_j^{a_i} p_i^j \] 所以任务就变成了分解\(A\)的质因数,分解 ...
- Cocos2d-X开发中国象棋《九》走棋规则
在上一节中实现了走棋,这篇博客将介绍中国象棋中的走棋规则 在写博客前先可能一下象棋的走棋规则: 1)将 将的坐标关系:横坐标相等,纵坐标相减绝对值等于1,或者纵坐标相等,横坐标相减绝对值等于1 将的特 ...
- 2017SN多校D1T1 loveletter:模拟
题意: 两张n*m的纸.一张透明纸,上面有些地方是黑的,有些地方是透明的.另一张纸上写满了字母. 你需要将透明纸放在写字的纸上,分别顺时针旋转0°.90°.180°.270°,每次从上到下.从左到右写 ...
- html5--1.18 div元素与布局
1.18 div元素与布局 1.元素的分类2.div元素与布局 1.元素的分类 块元素:主要特征是会产生换行效果,自动与其他元素分离成两行:通常可以作为容器在内部添加其他元素. 已经学过的块元素有: ...
- codeforces 558A A. Lala Land and Apple Trees(水题)
题目链接: A. Lala Land and Apple Trees time limit per test 1 second memory limit per test 256 megabytes ...
- Vue 中数据流组件
好久不见呀,这两年写了很多很多东西,也学到很多很多东西,没有时常分享是因为大多都是我独自思考.明年我想出去与更多的大神交流,再修筑自己构建的内容. 有时候我会想:我们遇到的问题,碰到的界限,是别人给的 ...
- java面试题05
1.写一个冒泡排序的算法 升序排列: public static void main(String[] args) { int score[] = { 67, 20, 75, 87, 89, 90, ...
- ACM学习历程——HDU 5014 Number Sequence (贪心)(2014西安网赛)
Description There is a special number sequence which has n+1 integers. For each number in sequence, ...
- Redis 客户端安装与远程连接图解
Linux环境:Centos 6.8 Redis服务端版本:3.2.6 Redis客户端下载链接:https://redisdesktop.com/download 省略Linux系统安装Redis教 ...
- bzoj 4592(洛谷 4344) [Shoi2015]脑洞治疗仪——线段树上二分
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4592 1操作就是用线段树来二分找到第一个有 k 个0的位置. 在洛谷上A了,与暴力和网上题解 ...