HTML5 常用的结构化标签整理
一、语义化结构化标签
结构化标签优点:
1、方便浏览器处理和识别,提升了网页的质量和语义。
2、减少了大量无意义的div标签,增强代码的可读性。
结构化标签:(header,nav,body,article,section,aside,hgroup,figure,figcaption,footer)
<header>定义文档的页眉
<nav>定义导航链接的部分
<article>定义外部的内容,可以是一篇新的文章
<section>定义文档的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。
<aside>定义article以外的内容,aside的内容可用作文章的侧边栏
<figure>用于对元素进行组合,使用figcaption元素为元素组添加标题
<figcaption>定义figure元素的标题
<hgroup>用于对section或网页的标题进行组合,使用figcaption元素为元素添加标题
<time>定义日期或时间,或者两者。
<footer>定义section或文档的页脚
HTML5的文档结构
<header>...</header>
<nav>...</nav>
<article>
<section> ... </section>
</article>
<aside>...</aside>
<footer>...</footer>
HTML5的图片结构
<figure id="fig2">
<legend>Figure 2. Install Mozilla XForms dialog</legend>
<img alt="A Web site is requesting permission to install the ollowing item: Mozilla XForms 0.7 Unsigned" src="installdialog.jpg" />
</figure>
虽然这些标签都有固定的用意,但具体情况还要具体分析。标签的使用可以根据自己的需求做适当的调整!
二、格式化文本标签
三、常用表格标签
四、常用列表标签
HTML5 常用的结构化标签整理的更多相关文章
- HTML5常用的语义化标签
快速查询 article | aside | nav | section | header | footer 架构预览 nav 定义导航链接的部分 在页脚显示一个站点的导航链接,如首页.服务信息页面. ...
- HTML5结构化标签
一 结构化标签 在之前的HTML页面中,大家基本上都是用了Div+CSS的布局方式.而搜索引擎去抓取页面的内容的时候,它只能猜测你的某个Div内的内容是文章内容容器,或者是导航模块的容器,或者是作者介 ...
- HTML5学习之语义化标签(一)
一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
- HTML5学习之语义化标签
一.为什么HTML5要引入新语义标签 在HTML5出现之前,我们一般采用DIV+CSS布局我们的页面.但是这样的布局方式不仅使我们的文档结构不够清晰,而且不利于搜索引擎爬虫对我们页面的爬取.为了解决上 ...
- 从零开始学 Web 之 HTML5(一)HTML5概述,语义化标签
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- html5新增的语义化标签极其作用
在html5中,新增了几个语义化标签:<article>.<section>.<aside>.<hgroup>. <header>,< ...
- Html5新增的语义化标签(部分)
2014年10月29日,万维网联盟宣布,经过接近8年的艰苦努力,html5的标准规范终于制定完成.这是互联网的一次重大变革,这也许是一个时代的来临! 总结一些h5新增的语义化标签,记录下来方便自己学习 ...
- My SQL随记 001 常用名词/结构化语言
DBMS (Database Management System) 字段/域(列名或者列头 如:姓名身高性别为字段) 姓名 身高 性别 小周周 157 女 记录(一行数据 如:小周周 157 女 ) ...
- HTML5 部分新增语义化标签元素
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
随机推荐
- js-回车事件控制
1.文本框回车时间 < script type = "text/javascript" language = "javascript" > fun ...
- TODO: http框架HttpManager的实现
提供get, post, 同步, 异步方式访问网络
- RegExp正则校验之Java及R测试
前言: 正则表达式(英语:Regular Expression)原属于计算机科学的一个概念.正则表达式使用单个字符串来描述.匹配一系列符合某个句法规则的字符串.在很多文本编辑器里边,正则表达式通常被用 ...
- 69.Android之天气预报app
最近买了本书<Android第一行代码>,通篇看了下感觉不错,书本最后有个实战项目酷欧天气,闲来无事就照着敲了一遍代码,主要在请求天气接口和背景优化做了些小改动,现在来记录下. (1) a ...
- Hadoop版本变迁
内容来自<Hadoop技术内幕:深入解析YARN架构设计与实现原理>第2章:http://book.51cto.com/art/201312/422022.htm Hadoop版本变迁 当 ...
- codevs3305 水果姐逛水果街Ⅱ
本文版权归ljh2000和博客园共有,欢迎转载,但须保留此声明,并给出原文链接,谢谢合作. 本文作者:ljh2000作者博客:http://www.cnblogs.com/ljh2000-jump/转 ...
- CLR/.NET/C#/Visual Studio/ASP.NET各版本之间的关系(转)
由于这篇文章记录的是2015年7月,那时.net core还是叫做.net core 5 名词定义 下列这些名词,写.NET 的人一定都不陌生,但你是否有真正理解呢?如果看了我的摘要文字说明还无法理解 ...
- SQL Server配置管理器”远程过程调用失败“的问题解决
出现如下错误: 由于服务器上安装了SQLServer2008,然后再安装了VS2015 解决方案一: 由于安装VS2015会默认把[Microsoft SQL Server 2014 Express ...
- hdu 4324 拓扑排序
题意:给出一堆人的喜爱关系,判断有没有三角恋-_-|| 其实就是判断是否存在三条边的环. 一开始我是这么想的: 先拓扑排序,如果没有环那就直接No 如果有环?挑出环里的任意一个点(拓扑排序结束后不在拓 ...
- 数据结构算法C语言实现(十二)--- 3.4循环队列&队列的顺序表示和实现
一.简述 空队列的处理方法:1.另设一个标志位以区别队列是空还是满:2.少用一个元素空间,约定以队列头指针在队尾指针下一位置上作为队列呈满的状态的标志. 二.头文件 //3_4_part1.h /** ...