html元素分类
结构性元素
section 在web页面应用中,该元素也可以用于区域的章节描述
header 页面主体的头部
footer 页面的底部
nav 专门用于菜单的导航、链接导航的元素
article 用于表示一篇文章的主体内用
块级元素
aside 泳衣表达注记、贴士、侧栏、摘要的引用等作为补充主体的内用
figure 是对多个元素进行合并并展示的元素,通常与figcaption联合使用
code 表示一段代码
diglog 用于表达人与人之间的对话,该元素还包括dt和dd这两个组合元素,dt表示说话者,dd则用来表示说话者说的内容
行内语义性元素
meter 表示特定范围内的数值,可用于工资 数量 百分比等
time 表示时间值
progress 用来表示进度条,可通过对其max min setp 等属性进行控制,完成对进度的表示和监视
video 视频元素
audio 音频元素
交互性元素
details 用来:用来表示一段具体的内容,但是内容默认可能不显示,通过某种手段(如单击)与legend 交互才会显示出来。与summary联用
datagrid:用来控制客户端数据与显示,可以由动态脚本及时更新
command:用来处理命令按钮

aricle 与 setion使用
article 元素与 section 元素都是 HTML5 新增的元素,它们的功能与 div 类似,都是用来区分不同区域,它们的使用方法也相似,因此很多初学者会将其混用。HTML5 之所以新增这两种元素,就是为了更好地描述文档的内容,所以它们之间肯定是有区别的
article 元素代表文档、页面或者应用程序中独立完整的可以被外部引用的内容。例如,博客中的一篇文章,论坛中的一个帖子或者一段浏览者的评论等。因为 article 元素是一段独立的内容,所以article 元素通常包含头部(header 元素)和底部(footer 元素)。
section 元素用于对网站或者应用程序中页面上的内容进行分块。一个 section 元素通常由内容以及标题组成。
section 元素需要包含一个标题元素,一般不用包含头部(header 元素)或者底部(footer 元素)。通常用 section 元素为那些有标题的内容进行分段。
section 元素的作用是对页面上的内容分块处理,如对文章分段等,相邻的 section 元素的内容,应当是相关的,而不是像 article 那样独立。
在使用 section 元素时应该注意以下几个问题。
1、不要将 section 元素当做设置样式的页面容器,对于此类操作应该使用 div 元素实现。
2、如果 article 元素、aside 元素或 nav 元素更符合使用条件,不要使用 section 元素。
3、不要为没有标题的内容区块使用 section 元素。

设计导航信息
nav元素
1、传统导航条。常规网站都设置有不同层级的导航条,其作用是将当画面跳转到网站的其他主要页面上去。
2、侧边栏导航。现在主流博客网站及商品网站上都有侧边栏导航,其作用是将页面从当前文章或当前商品跳转到其他文章或其他商品页面上去。3、页内导航。页内导航的作用是在本页面几个主要的组成部分之间进行跳转。
4、翻页操作。翻页操作是指在多个页面的前后页或博客网站的前后篇文章滚动。

设计辅助信息
aside
1、作为主要内容的附属信息部分,包含在 article 元素中,其中的内容可以是与当前文章有关的参考资料、名词解释等。
2、作为页面或站点全局的附属信息部分,在 article 元素之外使用。最典型的形式是侧边栏,其中的内容可以是友情链接,博客中其他文章列表、广告单元等。
添加发布日期
pubdate属性是一个可选的布尔值属性,可用在 article 元素中的 time 元素上,意思是 time 元素代表了文章(artilce 元素的内容)或整个网页的发布日期。

转载于:https://www.cnblogs.com/wangxiaofeng5277/p/6262073.html

2017-1-7 html元素分类(1)相关推荐

  1. 阅读类型HTML,W3C HTML5标准阅读笔记 – 元素分类与内容模型(Content Model)

    HTML4中,元素被分成两大类: inline(内联元素)与block(块级元素).但在实际的开发过程中,因为页面表现的需要,前端工程师经常把inline元素的display值设定为block(比如a ...

  2. html元素分类以及嵌套规则

    2019独角兽企业重金招聘Python工程师标准>>> 一.html元素分类 html元素分为块级元素和内联元素. block(块)元素的特点: ①总是在新行上开始: ②高度,行高以 ...

  3. 深入css布局 (1) — 盒模型 元素分类

    深入css布局(1)-- 盒模型 & 元素分类     " 在css知识体系中,除了css选择器,样式属性等基础知识外,css布局相关的知识才是css比较核心和重要的点.今天我们来深 ...

  4. css知识笔记(一)——基础知识、选择器、元素分类

    CSS全称为"层叠样式表 (Cascading Style Sheets)",它主要是用于定义HTML内容在浏览器内的显示样式,如文字大小.颜色.字体加粗等. 如下列代码: p{f ...

  5. html:(38):元素分类和块级元素

    元素分类 在讲解CSS布局之前,我们需要提前知道一些知识,在CSS中,html中的标签元素大体被分为三种不同的类型:块状元素.内联元素(又叫行内元素)和内联块状元素. 常用的块状元素有: <di ...

  6. C++学习之路 | PTA乙级—— 1075 链表元素分类 (25 分)(精简)

    1075 链表元素分类 (25 分) 给定一个单链表,请编写程序将链表元素进行分类排列,使得所有负值元素都排在非负值元素的前面,而 [0, K] 区间内的元素都排在大于 K 的元素前面.但每一类内部元 ...

  7. html 指定对象为块元素,html内联(行内)元素、块级(块状)元素和行内块元素分类...

    HTML可以将元素分类方式分为内联(行内)元素.块级(块状)元素和行内块元素三种. 注:HTML是标签语言,那么既然是标签,就可以自己定义一些自己元素(如自定义的元素等),自定义元素浏览器默认解析为内 ...

  8. CSS快速学习5:文本溢出和XHTML元素分类

    文本溢出 1.溢出属性(容器的) overflow:visible/hidden(隐藏)/sroll/auto(自动)/inherit; visible:默认值,内容不会被修剪,会出现在元素框之外: ...

  9. 那些是html5新增元素类型,HTML5 元素分类

    HTML5 元素分类 发布时间:2020-03-02 02:39:31 来源:51CTO 阅读:547 作者:双士之心 HTML5元素分类:结构性元素.级块性元素.行内语义性元素.交互性元素. 目的: ...

最新文章

  1. VM虚拟机常见问题之五--网络相关的问题
  2. 用Python实现二叉树,完全二叉树和满二叉树
  3. perl里面隐式的继承
  4. C语言解析日志,存储数据到伯克利DB
  5. CTS(23) --- Android 8.1GMS注意事项
  6. [IDDFS+背包] 洛谷P2744 [USACO5.3]量取牛奶Milk Measuring
  7. error: (-215:Assertion failed) !ssize.empty() in function 'cv::resize'产生原因
  8. 自行编译cups绕过错误:file /etc/rc.d/rc.local from install of systemd conflicts with file from
  9. eclipse(window平台)快捷键总结
  10. 一个门外汉的产品设计漫谈[转]
  11. WPF界面设计风格资源库
  12. 批量查询数据的sql语句
  13. php页面添加背景图片,css怎么增加背景图片
  14. 【matlab实现股票量化分析收盘价曲线作图-附源码】
  15. java ocr引擎_java 实现 OCR 图片文字识别
  16. 怎么把html格式转换成数字,Excel文本格式怎么转化成数字格式 excel文本转化数字格式教程...
  17. 【SQL管理】-Flyway数据库版本管理利器从入门到入味
  18. mysql导入pet表
  19. 技术博客丨神经网络不再“卷” 全靠“变形金刚”
  20. 【高老师软件需求分析】20级云班课习题答案合集

热门文章

  1. iOS_25彩票_幸运转盘
  2. python-sendcmd主动模式访问ftp——修改port中IP地址信息
  3. 使用dom4j解析XML例子
  4. 如何修改 远程桌面的 默认端口号 3389
  5. 改变Repeater控件中按钮颜色
  6. 什么是三层交换机、网关、DNS、子网掩码、MAC地址
  7. IdentityServer4关于多客户端和API的最佳实践【含多类型客户端和API资源,以及客户端分组实践】【中】...
  8. GIS开发随笔(2)——关于建立GIS数据库的几个问题
  9. MySQL 的性能(下篇)—— 性能优化方法
  10. 最锋利的Visual Studio Web开发工具扩展:Web Essentials详解(转)