如何使用details元素和summary元素

html-css010

如何使用details元素和summary元素,第1张

下面就是规范中的描述The details element represents a disclosure widget from which the user can obtain additional information or controls.— WHATWG HTML5 specification 理论上我们可以用它创建那种折叠的小组件,用户可以有打开和关闭的交互.在<details>我们可以放入我们任何想放入的内容.浏览器的支持情况在我们开始之前,实际一点,让我们看看目前浏览器的支持情况,目前只有chrome支持 <details >元素.Opera很快就会支持Opera will support it soon,让我们来用chrome演示这种效果吧.<details 的使用方法这里有两个相关的元素:<details>和可选的让我们来看下面的代码: 1 2 3 4 <details> <summary>Show/Hide me</summary> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></details> 你可以通过下面的链接察看效果see this in action over at jsbin.这是一个简单的例子但是可以将效果完美展现的代码,没有任何Javascript.OPen 属性在上面的例子中,在页面加载的时候内容是隐藏的。我们可以将<detail>默认的视觉属性通过布尔值作修改,让其当我们加载页面的时候是展开的:1 2 3 4 <details open> <summary>Show/Hide me</summary> <p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p></details> 注意,这里并没有 closed 属性,因为只要你移除 open 属性,执行的就是 closed 属性效果。<summary>元素我们已经简要的看了的作用。因为它是短语内容,我们可以使用内联 (inline)标签 <span>。我们为什么会有这种想法呢?也许这样子能更方便的通过而外样式控制显示效果或者像 spec 建议的那样:为一个表单元素增加一个 <label>标签。如果他能生效的话,至少能让我很顺手:1 2 3 4 <details> <summary><label for="name">Name:</label></summary> <input type="text" id="name" name="name" /></details> 常理看,我们点击 summary 的任何位置都应该展开 <detail>元素的内容。但是在这个例子中,我们点击<summary>并没有展开内容,因为你点击的是<label>他会将焦点放到 <input>标签-即使那部分内容被隐藏在<details>标签。很明显,在这点需要更好的声明,你认为这个地方应该发生什么事情呢?可能某个浏览器生产商能看一下这个效果。<details>元素多层嵌套你可以在<details>中嵌套<details>,可以完美的案例查看这个效果:1 2 3 4 5 6 7 8 9 10 11 12 13 <details> <summary>Question 1</summary> <p><strong>Pellentesque habitant morbi tristique</strong>senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. <em>Aenean ultricies mi vitae est.</em>Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, <code>commodo vitae</code>, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. <a href="#">Donec non enim</a>in turpis pulvinar facilisis. Ut felis.</p> <details><summary>Related documents</summary><ul> <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li> <li><a href="#">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</a></li> <li><a href="#">Aliquam tincidunt mauris eu risus.</a></li></ul> </details></details> 使用案例在哪些情况时会用到 <details>?FAQ表可能是我们最先涌现的想法。大家经常使用手风琴效果是用在FAQ列表,所以 <details>是这一效果的最佳效果。考虑到这一系列内容,它可能被固定在某一区域,当我们滚动内容的时候。像这样子?你也可以使用<details>来操作博客的评论内容,用户简介,下载列表,复杂的表单,或者像规范中描述下面的应用:An example of the <details>element from the spec 实际上,只要你看看我写的wordpress,会发现有大量的使用 <details>的机会。让我们在评论中了解一下你的观点和想法。样式格式化你如何对这个定义样式?同时,在webkit浏览器中我们可以使用伪类样式 ::-webkit-details-marker。你可以看到这个小的案例:1 2 3 4 5 details summary::-webkit-details-marker { background: red color: #fff font-size: 500%} 我们也可以将这个小组件定位。这里是向右浮动的这就是我们初始化效果。我们如何将默认的组件Icon自定义呢?那就是用 属性选择器 (attribute selector),你可以用来检测 <details>元素是打开的还是关闭的,然后为其定义一个合适的背景图片。我们咋下面的例子中作了一个类似的效果,使用 :after pseudo-element元素定义成我们喜欢的背景图片:1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 summary::-webkit-details-marker { display: none } summary:after { background: red border-radius: 5px content: "+" color: #fff float: left font-size: 1.5em font-weight: bold margin: -5px 10px 0 0 padding: 0 text-align: center width: 20px} details[open] summary:after { content: "-"} 在上面的例子中,我们使用文本 “+”和“-”来定义这个组件的状态,根据你的设计需要,你可能希望使用 :before来代替 :after,这两个为类元素都可以使用 image.details的[open]属性选择器能创造很多有意思的可能性。因为我们是好医生,下面是我们装饰后的效果,下面是截屏效果:Styled <details>element in Chrome 如果我们可以用过css的动画效果来修饰打开和关闭时的状态,这样设计就更完美了,但是目前为止我们还没有办法做到这点。可访问性不幸的是在我们写这篇文章的时候,<details>h还无法通过键盘访问,Steve Faulkner 写到:Bottom line is, currently no keyboard support and no usable information exposed to assistive technology.自己试一下,如果你使用鼠标打开 <details>元素,你可以使用键盘到达内容部分,但是你无法使用键盘打开和关闭区域。所以目前这并不是理想状态,不过我们相信这个小国很快会被改进。向后兼容在我们抱怨其在IE6中无法生效之前,感谢这些聪明的人们,我们可以提供优雅的像狗兼容。这些效果也被列在下面的网站very handy collection of cross-browser polyfills,这两个都需要 jQuery:<details>fallback via jQuery by Mathias Bynens Another <details>alternative, also based on jQuery by Manuel Bieh 1 2 3 4 5 <script> if (!("open" in document.createElement("details"))) { alert("No details") } </script> 更新:感谢的评论。上面的代码并不是100%可靠,因为他在某些chrome版本下会失败。你可以使用this Modernizr snippet。我们为何使用这种类型的交互?言归正传,为什么会有这个效果在HTML5中?就像其它HTML5的效果,使用这种效果能够更简单。比如时间选择,Date pickers, sliders, progress indicators, 现在这种手风琴效果就可以在不使用JavaScript的情况下更方便实施。谁能想到下一个是什么?如果是 tabs 标签那就好了。总结在这篇文章中,我们阐述了如何去使用<details>和<summary>元素。<details>是一个新元素,通过和<summary>元素通过浏览器可以创造手风琴的交互效果。目前,<details>只能在 Chrome 工作,不过我们期待这会在不久的将来有所改变。这里只有一个css trick我们可以使用 ::-webkit-details-marker,但是我们拥有很多的其它css。让我们在评论中知道关于<details>元素你在这方面的经验和想法。中文原文:details 和 summary 元素英文原文:The details and summary elements http://www.alixixi.com/web/a/2011090273705.shtml

在BootStrap中,关于下列类的说明正确的有

+ show用来显示一个区块

+ hidden用来隐藏一个div而不是hide

+ text-hide将会隐藏掉文字

1

2

3

1

2

3

2 jQuery Ajax中都支持哪些返回类型?

XML HTML JSONP json

1

1

3 可继承的样式属性包括

不可继承的有:

display margin border padding background height min-height max-height width min-width max-width overflow position left right top Bottom z-index float clear table-layout vertical-align page-break-after page-bread-before Unicode-bidi

所有元素可继承:visibility和cursor

内联元素可继承:

letter-spacing word-spacing white-space line-height color font font-family font-size font-style font-variant font-weight text-decoration text-transform direction

块状元素可继承:text-indent text-algin

列表元素可继承:list-style list-style-type list-style-position list-style-image

表格元素可继承:border-collapse

3 iframe的使用场景有?

+ 典型系统结构,左侧是功能树,右侧就是一些常见的table或者表单之类的。为了每一个功能,单独分离出来,采用iframe。

+ Ajax上传文件

+ 加载别的网站内容,例如Google广告,网站流量分析等,例如加载资源。

+ 上传图片时,不用flash实现无刷新

+ 跨域访问的时候可以用到iframe,使用iframe请求不同域名下的资源。比如与第三方域名下的页面共享cookie

1

2

3

4

5

1

2

3

4

5

4 bootstrap中关于屏幕的尺寸标准

超小屏幕(手机) 小屏幕(平板) 中等屏幕(桌面) 大屏幕(桌面)

5 放在 HTML 里的哪一部分 JavaScript 会在页面加载的时候被执行?

在 HTML body部分中的JavaScript会在页面加载的时候被执行。在HTML head部分中的JavaScripts会在被调用时才执行。

6 下列 media queries 的定义方式中,哪一个是适配 iphone6s 的?

.@media(min-device-width:414px) and(max-device-width:736px) and(-webkit-min-device-pixel-ratio:3){}

1

1

7 head 标签中必不可少的是

title

HTML5中不再支持的元素

<noframes>,<frameset>,<frame>,<applet>,<acronym>,<basefont>,<dir>,<tt>,<strike>,<big>,<blink>,<s>,<font>

1

1

HTML5中新增加的标签?

<article>标签定义外部的内容(结构元素)

<aside>定义页面内容之外的内容。 aside的内容与article的内容相关。(结构元素)

<figure>定义一组媒介内容的分组,以及它们的标题。(结构元素)

<section>标签定义文档中的节(section,区段)。比如章节,页眉,页脚或文档中的其他部分(结构元素)

<meter>定义预定义范围内的度量。仅用于已知最大和最小值的度量(内联元素)

<progress>定义任何类型的任务的进度。可以使用<progress>标签来显示javascript中耗费时间的函数的进度(内联元素) <time>定义一个日期/时间 (内联元素)

<audio>定义声音内容。(内嵌元素) audio 元素允许多source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式

<video>定义视频。(内嵌元素) Ogg支持firefox3.5,opera10.5,chrome3.0 Mpeg 4 支持chrome3.0,safsri3.0 Video也支持多个source元素,链接到不同的视频文件,浏览器将使用第一个可识别的格式 属性值: autoplay=”autoplay”就绪后马上播放 loop=“loop”播放完再次播放

<command>定义命令按钮 (交互元素)

<datalist>定义下拉列表,与input元素配合使用该元素,定义input可能出现的值,datalist的选项不会被显示出来,它仅仅是合法的输入值列表(交互元素)

<details>定义元素的细节 (交互元素)

<canvas>定义图形,绘制路径,矩形,圆形,字符以及添加图像的方法 Canvas元素本身没有绘图能力,所有的绘制工作必须在javascript内部完成 渐变

<dialog>定义对话(会话)dialog元素表示几个人之间的对话。HTML5dt元素可以表示讲话者,HTML5dd元素可以表示讲话内容。(结构元素)

<embed>定义外部交互内容或插件

<event-source>为服务器发送的事件定义目标

<footer>定义 section 或 page 的页脚

<figcaption>标签定义 figure 元素的标题。

<hgroup>标签用于对网页或区段(section)的标题进行组合。 对网页或区段的标题进行组合

<keygen>标签提供一种验证用户的可靠方法。keygen 元素是密钥对生成器(key-pair generator)。当提交表单时,会生成两个键,一个是私钥,一个公钥。私钥(private key)存储于客户端,公钥(public key)则被发送到服务器。公钥可用于之后验证用户的客户端证书(client certificate)。

<header>定义 section 或 page 的页眉(介绍信息)

<mark>标签定义带有记号的文本。请在需要突出显示文本时使用 <m>标签。

<nav>定义导航链接。

<output>定义输出的一些类型。

<source>定义媒体资源

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

要运用css3动画,你需要运用什么规则?

keyframes

关于label属性

label标签只有两个属性for(规定 label 绑定到哪个表单元素。 )

基于以下 HTML 结构,以下关于 main1.css 和 main2.css 的描述有哪些是正确的?

<head>

<link href="main1.css" ref="stylesheet">

<link href="main2.css" ref="stylesheet">

</head>

1

2

3

4

1

2

3

4

main1.css和main2.css同时开始加载,先加载完成的优先解析。

如果main1.css和main2.css中有相同的选择器规则,那么main2.css中的规则将合并main1.css的规则

在不涉及样式情况下,页面元素的优先显示与标签选用无关。

CSS 样式,下面哪一个元素能够达到最大宽度,且前后各有一个换行?

Block Element

以下对form表单中input元素的readonly与disabled属性描述正确的是?

设置readonly = true,页面上无法修改内容,但是可以通过JavaScript修改,内容会被提交

设置disabled = true,无法修改内容,也不会被提交

span标签的width和height分别为多少?

<div style=”width:400pxheight:200px”>

<span style=”float:leftwidth:autoheight:100%”>

<i style=”position:absolutefloat:leftwidth:100pxheight:50px”>hello</i>

</span>

</div>

1

2

3

4

5

1

2

3

4

5

width = 0px ,height = 200px

下列关于btn标签的说法正确的是

该 class 用于形成基本的按钮组。

.btn-group 中放置一系列带有 class .btn 的按钮。

.btn-toolbar 有助于把几组

结合到一个

中, 一般获得更复杂的组件。

.btn-group-lg, .btn-group-sm, .btn-group-xs 可应用到整个按钮组的大小调整,而不需要对每个按钮进行大小调整。

可以在一个按钮组内嵌套另一个按钮组,即,在一个 .btn-group 内嵌套另一个 .btn-group 。

哪一个不是浏览器默认的天生inline-block标签(拥有内在尺寸,可设置高宽,不会自动换行)?

要理解display:inline、block、inline-block的区别,需要先了解HTML中的块级(block)元素和行级(inline)元素的特点,行内元素也叫内联元素。

块级元素 总是另起一行开始; 高度,行高以及顶、底边距都可以控制; 宽度缺省是它所在容器的100%,除非设定一个宽度。 块级元素通常作为其他元素的容器,可以容纳内联元素和其他块元素。

block element的HTML标签如下:

+ address-地址

+ blockquote-块引用

+ center-居中对齐块

+ div-常用块级元素

+ dl-定义列表

+ form-交互表单

+ fieldset-form控制组

+ hr-水平分隔线

+ ol-排序表单

+ ul-非排序列表

+dir-目录列表

+ p-段落

+ pre-格式化文本

+ isindex-input prompt

+ menu-菜单列表

+ table-表格

+ h1…h6-标题

+ noframes-frames可选内容(对于不支持frame的浏览器显示此区块内容)

+ noscript-可选脚本内容(对于不支持script的浏览器显示此内容)

行级元素 和其他元素都在一行上; 高度,行高以及顶、底边距不可改变; 高度就是它所容纳的文字或图片的宽度,不可改变。 一般都是基于语义级(semantic)的基本元素,只能容纳文本或者其他内联元素,内联元素的HTML标签分类如下:

+ a-锚点

+ abbr-缩写

+ acronym-首字

+ font-字体设定(不推荐)

+ b-粗体(不推荐)

+ big-bidi override

+ em-强调

+ br-换行

+ small-小字体文本

+ strong-粗体强调

+ i-斜体

+ img-图片

+ input-输入框

+ label-表格标签

+ select-项目选择

+ textarea-多行文本输入框

+ u-下划线

+ var-定义变量

+ cite-引用

+ code-计算机代码(在引用源码的时候需要)

+ dfn-定义字段

+ kbd-定义键盘文本

+ q-短引用

+ s-中划线(不推荐)

+ strike-中划线

+ sub-下标

+ sup-上标

+ tt-电传文本 HTML中有些元素是可变元素,可根据上下文语境决定该元素为块元素或者内联元素。 applet-java applet

+ button-按钮

+ del-删除文本

+ iframe-inline frame ins-插入的文本

+ map-图片区块(map)

object-object对象 script-客户端脚本 display:block就是将元素显示为块级元素,display:inline则将元素显示为行内元素。 display:inline-block将元素显示为行内元素,但是元素的内容作为块元素处理。旁边的内联元素和该对象显示在同一行,并且允许空格,但是该元素具有块元素的特性,可以设置其高度,宽度等属性。在同一行内有不同高度内容的元素时,通常要设置对齐方式如vertical-align: top来使元素顶部对齐。 兼容性 CSS中使用display:inline-block来样式化,在Firefox, Safari, Google Chrome 和 IE 8及以上是有效的。但是在早期的IE,比如IE 7,对行内元素设置inline-block无法实现inline-block的效果。只是触发了块元素的layout,而行内元素本身就是行布局,所以触发后,依然是行布局。 对IE8以下的版本,可以采用以下两种方法来实现inline-block的效果: 先用display:inline-block属性触发块元素,然后再定义display:inline,让块元素呈递为内联对象(原理:这是IE的一个经典bug,如果先定义了display:inline-block,然后再设置display回inline或block,layout不会消失),代码如下: 1 div {display:inline-block}2 div {display:inline} 将块元素设置为内联对象(display:inline),然后通过zoom:1触发块元素的layout,代码如下: div {display:inlinezoom:1}

当表单中包含文件上传控件时,需要将enctype设置为

enctype 属性规定在发送到服务器之前应该如何对表单数据进行编码。默认地,表单数据会编码为“application/x-www-form-urlencoded”。就是说,在发送到服务器之前,所有字符都会进行编码(空格转换为 “+”加号,特殊符号转换为ASSCII HEX值)。

值 描述

application/x-www-form-urlencoded 在发送前编码所有字符(默认)

multipart/form-data 不对字符编码。在使用包含文件上传控件的表单时,必须使用该值。

text/plain 空格转换为“+”加号,但不对特殊字符编码

关于web表单登录中用到的图形验证码的实现,以下做法不正确的有:

服务器端生成验证码后一方面通过图片将验证码返回给客户端,同时在服务器端保存文本的验证码,由服务器端验证输入内容是否正确。

当margin-top padding-top的值时百分比时,分别是如何计算的?

值 描述

auto 浏览器计算内/外边距

length 规定以具体单位计的内边距值,比如像素、厘米等。默认值时0px

% 规定基于父元素的 **宽度** 的百分比的边距

inherit 规定应该从父元素继承边距值

bootstrap辅助类

.text-muted:文字的颜色换成灰色 /

.text-primary:文字的颜色变成蓝色 /

.text-success:文字的颜色变成绿色 /

.text-info:文字的颜色变成暗蓝色 /

.text-warning:文字颜色变成暗黄色 /

.text-danger:文字的颜色变成红色

1

2

3

4

5

6

1

2

3

4

5

6

在使用table表现数据时,有时候表现出来的会比自己实际设置的宽度要宽,为此需要设置下面哪些属性值?

cellpadding="0"

cellspacing="0"

1

2

1

2

CSS盒子模型中,padding 是透明的,这部分可以显示背景

input 元素的type属性取值可以是()

button checkbox file hidden image password radio reset submit text

1

1

bootstrap辅助类-下列辅助类navbar的说法正确的是?

通过添加 .navbar-left 和 .navbar-right 工具类让导航链接、表单、按钮或文本对齐。两个类都会通过CSS设置特定方向的浮动样式。

例如,要对齐导航链接,就要把它们放在个分开的、应用了工具类的<ul>标签里。

1

2

1

2

拓展

这些类是 .pull-left和 .pull-right的mixin版本,但是他们被限定了媒体查询(media query)中,

这样可以更容易的在各种尺寸的屏幕上处理导航条组件

1

2

1

2

关于HTML标签正确的是

<ul>

<li></li>

</ul>

<ol>

<li></li>

</ol>

<dl>

<dt></dt>

<dd></dd>

</dl>

1

2

3

4

5

6

7

8

9

10

11

12

1

2

3

4

5

6

7

8

9

10

11

12

特别注意 dl 的用法

在details标签外加一个相对定位的div 把details定义为绝对定位就可以了。

css是层叠样式表(英文全称:CascadingStyleSheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。

CSS能够对网页中元素位置的排版进行像素级精确控制,支持几乎所有的字体字号样式,拥有对网页对象和模型样式编辑的能力。