当前位置: 首页 > 编程日记 > 正文

2017-1-7 html元素分类(1)

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 元素的内容)或整个网页的发布日期。
新增input输入类型

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

相关文章:

MyEclipse使用技巧小总结

1、 自动提示:窗口->首选项->Java->编辑器->内容辅助->自动激活,在下面的“Java的自动激活触发器里面填上“.abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789”。 2、 加快自动提示的时间:窗口->首选项…

开放源码,华为鸿蒙HarmonyOS 2.0来了

作者 | Just出品 | AI科技大本营(ID:rgznai100)去年8月,鸿蒙HarmonyOS一经发布,在开发者群体中引发强烈反响。有人赞赏华为的战略和技术,但也有不少人质疑那只是个PPT操作系统,凡此种种,热议不断…

纯CSS实现对白框

如果一个盒子的长宽都为零,那么它的四条border就会碰到一起,变成实心的,而且每一条border都是一个三角形;我们就可以利用三角形来实现对白框的尖下巴。 通过把border上左设置为有颜色,下右设置为透明,在#de…

HTML4.0标准语法--表格

表格的色彩 表元的背景色彩和背景图象<th bgcolor#> <th background"URL"> #rrggbb 16 进制 RGB 数码, 或者是下列预定义色彩名称&#xff1a;Black, Olive, Teal, Red, Blue, Maroon, Navy, Gray, Lime, Fuchsia, White, Green, Purple, Silver, Yello…

能力差的程序员90%输在这点上!CTO:其实都是瞎努力!

在大数据浪潮当中&#xff0c;数据分析是这个时代的不二“掘金技能”。我们每一个人&#xff0c;每天无时无刻都在生产数据&#xff0c;一分钟内&#xff0c;微博上新发的数据量超过10万&#xff0c;b站的视频播放量超过600万......这些庞大的数字&#xff0c;意味着什么&#…

zendframwork入口关键Zend_Application.php类

为什么80%的码农都做不了架构师&#xff1f;>>> 推荐阅读&#xff1a;http://www.cnblogs.com/rexy/archive/2010/05/13/1734406.html 里面有详细的类图关系&#xff0c;UML图。。。 转载于:https://my.oschina.net/wufa/blog/71634

2017伊始-随笔

微信小程序发布 今天&#xff0c;2017年1月9日&#xff0c;微信的小程序发布了。我打开了美团外卖小程序&#xff0c;然后把美团外卖app卸载了&#xff1b;我打开了摩拜单车小程序&#xff0c;然后把摩拜单车app卸载了。有人问&#xff0c;这种小程序与网页版的桌面图标有什么区…

广告条随滚动条的移动而移动

文章来源&#xff1a;蓝色理想<html><head><title>跟随滚动条的图片</title><meta http-equiv"Content-Type" content"text/html; charsetgb2312"><STYLE mediascreen typetext/css>#floater { POSITION: abs…

使用wget在linux服务器上下载oracle软件

今天需要在远程几台服务器上安装oracle软件&#xff0c;本地的网络不是很好&#xff0c;如果同本地下载&#xff0c;然后再上传到服务器上比较耗时。所以就想直接在服务器上直接下载软件&#xff0c;这样不光速度比较快&#xff0c;而且还节省了很多时间。 我是这样做的。 首先…

揭秘华为AI一站式开发平台,3步构建一个AI模型 | 华为昇腾师资培训沙龙西安场...

2018 年&#xff0c;在第三届 HUAWEI CONNECT&#xff08;华为全联接大会&#xff09;上&#xff0c;华为首次公布了 AI 战略与全栈全场景 AI 解决方案&#xff0c;其中包含全球首个覆盖全场景人工智能的华为昇腾&#xff08;Ascend&#xff09;系列处理器以及基于华为昇腾全栈…

PYTHON黑帽编程1.5 使用WIRESHARK练习网络协议分析

Python黑帽编程1.5 使用Wireshark练习网络协议分析 1.5.0.1 本系列教程说明 本系列教程&#xff0c;采用的大纲母本为《Understanding Network Hacks Attack and Defense with Python》一书&#xff0c;为了解决很多同学对英文书的恐惧&#xff0c;解决看书之后实战过程中遇…

20种看asp源码的方法及工具

作者&#xff1a;欧杨飘雪 http://blog.csdn.net/flyingsnowy/众所周知windows平台漏洞百出&#xff0c;补丁一个接一个&#xff0c;但总是补也补不净。我把我所知道的20种看asp源码的方法总结了一下&#xff0c;并且用c#写了个应用程序来扫描这些漏洞&#xff0c;发现虽然大…

关注度越来越高的行人重识别,有哪些热点?

来源 | HyperAI超神经责编 | Carol封图 | CSDN付费下载自视觉中国在茫茫人海中&#xff0c;你能不能一眼就找到想找的那个人&#xff1f;如今&#xff0c;这个任务对于计算机来说&#xff0c;可能是小菜一碟了。而这得益于近年行人重识别技术的飞速发展。行人重识别&#xff0…

《QTP自动化测试进阶》(1)

学习《QTP自动化测试进阶》第一章。 采用不同的项目开发模型对自动化测试有不同的影响。 &#xff08;1&#xff09;瀑布模型&#xff1a;瀑布模型在需求定义方面做得很好&#xff0c;这对自动化测试是有益的&#xff0c;包括可以尽早选择合适的自动化测试策略&#xff0c;让自…

JNDI概述(转载)

JNDI是 Java 命名与目录接口&#xff08;Java Naming and Directory Interface&#xff09;&#xff0c;在J2EE规范中是重要的规范之一&#xff0c;不少专家认为&#xff0c;没有透彻理解JNDI的意义和作用&#xff0c;就没有真正掌握J2EE特别是EJB的知识。那么&#xff0c;JNDI…

怎样用Python控制图片人物动起来?一文就能Get!

作者 | 李秋键责编 | 李雪敬头图 | CSDN 下载自视觉中国出品 | AI科技大本营&#xff08;ID&#xff1a;rgznai100&#xff09;引言&#xff1a;近段时间&#xff0c;一个让梦娜丽莎图像动起来的项目火遍了朋友圈。而今天我们就将实现让图片中的人物随着视频人物一起产生动作。…

Directx11教程(61) tessellation学习(3)

现在我们看看在不同tess factor的情况下&#xff0c;三角形是如何细分的&#xff1f;(这儿三条边和内部tess factor值是一样的&#xff0c;而且partitioning("integer")) 下面8张图是三角形在tess factor 1到8的情况下的细分细节&#xff1a; 因为TS阶段是硬件自己做…

HTML語法大全

作者&#xff1a;闪吧標籤 , 屬性名稱 , 簡介 <! - - ... - -> 註解 <!> 跑馬燈 <marquee>...</marquee>普通捲動 <marquee behaviorslide>...</marquee>滑動 <marquee behaviorscroll>...</marquee>預設捲動 <marquee beh…

php相关书籍视频

虽然如今web领域&#xff0c;PHP JSP .NET 并驾齐驱&#xff0c;但PHP用的最广&#xff0c;原因不用我多说。 首先发一个PHP手册&#xff0c;方便查询&#xff0c;这个肯定是学PHP必备的。 下载地址&#xff1a;http://u.115.com/file/aq3e5sv9PHP100的视频教程&#xff0c;这个…

你究竟了解多少HTML代码

作者&#xff1a;十二 文章来源&#xff1a; 蓝色理想今天想学习一下基础知识&#xff0c;就看了一下HTML(4.0)&#xff0c;发现自己对HTML掌握的太少了。很多代码都很陌生&#xff0c;根本就没见过&#xff0c;更别提用了。就拿<a></a>元素来举个例子。它的属性…

Delphi 调用webservice接口

一、使用向导 1.导入wsdl文件&#xff1a;file--new----other----webservice---WSDLimporter---输入wsdl地址 http://www.webxml.com.cn/webservices/qqOnlineWebService.asmx?wsdl 完成之后&#xff0c;即可导入wsdl文件。 注&#xff1a;结尾处的&#xff1f;wsdl不能少。 2…

都是程序员,凭什么他能站在鄙视链的顶端?

在写代码、改bug之中&#xff0c;有时候会陷入焦虑&#xff1a;明年我还要继续这样的生活吗&#xff1f;程序员群体中有一条无形的鄙视链&#xff0c;最直观的表现就是薪资差异。在最新的调查报告中&#xff0c;全国范围内&#xff0c;程序员年薪达到 50 万以上的&#xff0c;仅…

软件开发经验总结(一)细节决定软件的成败

最近在公司做开发的时候,需要开发一个自动备份的功能,于是我想到了SQL SERVER备份调度功能,于是打开SQL SERVER 备份调度界面,想照样画葫芦做一个,然后20分钟就把该功能做出来。30分钟过去了&#xff0c;我的界面依然还没有做完&#xff0c;原来打算很快做完的界面却总是离目标…

简明 HTML CSS 开发规范

作者&#xff1a;wjack 文章来源&#xff1a; 蓝色理想//总论本规范既是一个开发规范&#xff0c;也是一个脚本语言参考&#xff0c;本规范并不是一个一成不变的必须严格遵守的条文&#xff0c;特殊情况下要灵活运用&#xff0c;做一定的变通。但是&#xff0c;请大家千万不…

B 站神曲damedane:精髓在于换脸,五分钟就能学会

导读&#xff1a;AI 换脸技术层出不穷&#xff0c;但一代更比一代强。最近&#xff0c;一个发表在 NeurIPs 2019 的 AI 换脸模型 first order motion model 火了起来&#xff0c;其表情迁移效果胜过同领域其它方法。最近&#xff0c;这项技术在 B 站引起一波新潮流……来源 | H…

html select以数组的方式提交

2019独角兽企业重金招聘Python工程师标准>>> 1).select 以数组的方式提交 <form> <input type"hidden" name"app" value"wap_test"> <select name"attribute[颜色]"> &…

META的一些功用

作者&#xff1a;军军 文章来源&#xff1a;闪吧 META的一些功用 META标记用于描述不包含在标准HTML里的一些文档信息。基于这一基 础上又开发出一些其它的有用功能&#xff0c;下面我挑选几种功能和大家说一下&#xff1a; &#xff11;、如何让搜索引擎搜索到你的页面 …

Python爬虫并自制新闻网站,太好玩了

来源 | 凹凸数据&#xff08;ID&#xff1a;alltodata&#xff09;我们总是在爬啊爬&#xff0c;爬到了数据难道只是为了做一个词云吗&#xff1f;当然不&#xff01;这次我就利用flask为大家呈现一道小菜。Flask是python中一个轻量级web框架&#xff0c;相对于其他web框架来说…

CPU值满resmgr:cpu quantum造成的Oracle等待事件解决办法

cpu quantum造成的Oracle等待事件解决办法 不少接触数据库的朋友有一个困扰已久的问题——resmgr:cpu quantum。已经遇过不少次这种CPU突然全绿的情况&#xff0c;通过隐含参数屏蔽了一下&#xff0c;方便研究。 刚好有人问我这个问题&#xff0c;就干脆翻文档写一篇文章给这位…

讲解用户角色切换

方法一&#xff1a;有root密码&#xff0c;可以使用su - root切换到root下&#xff0c;为了安全起见&#xff0c;不建议使用&#xff0c;因为如果切换到root下&#xff0c;被人修改了root密码&#xff0c;就真的完蛋了.......方法二&#xff1a;通过sudo给普通用户授权&#xf…