本标签: 32
例:
<dl>
<dt>标题1</dt>
<dd>内容11</dd>
<dd>内容12</dd>
<dt>标题2</dt>
<dd>内容21</dd>
<dd>内容22</dd>
</dl>
target="...",决定链接源在什么地方显示(用户自定义的名字,_blank,_parent,_self,_top);
rel="...",发送链接的类型;
rev="...",保存链接的类型;
accesskey="...",指定该元素的热键;
shape="...",允许我们使用已定义的形状定义客户端的图形镜像(default,rect,circle,poly);
coord="...",使用像素或者长度百分比来定义形状的尺寸;
tabindex="...",使用定义过的tabindex元素设置在各个元素之间的焦点获取顺序(使用tab键使元素获得焦点).
action="...",接收数据的服务器的URL;
method="...",HTTP的方法(get,,post),其中get是被反对使用的;
enctype="...",指定MIME(Internet媒体类型);
onsubmit="...",当提交表单时发生的内部事件;
noreset="...",在重新设置表单时发生的内部事件;
target="...",决定把内容显示在什么地方(_blank,_parent,_self,_top)
disabled="...",把按钮的状态设置为不能;
name="...",按钮的控制名,value="...",按钮的值;
type="...",按钮的类型(button,,submit,,reset);
type="...",用于输入控件的类型(text,password,checkbox,radio,submit,reset,file,hidden,image,button);
name="...",控件的控制名(要求是除了submit和reset之外的任何名字);
value="...",控件的初始值;
checked="...",把一个单选钮设置为选中的状态;
disabled="...",把控件的状态设置为不能使用;
readonly="...",只对输入密码的文本框使用;
size="...",表示以像素为单位的除了文本框和密码框控件之外的其它控件的宽度,它是用来指定字符的数目;
src="...",一个图像控件的URL;
maxlength="...",指定可以输入的最多的字符数目;
alt="...",另外一种文本描述;
usemap="...",到客户端图形镜像的URL;
align="...",被反对.控制对齐方式(left,,center,,right,,justify);
tabindex="...",通过定义的tabindex值确定在不同元素之间获得焦点的顺序;
onfocus="...",当元素获得焦点时发生的事件;
onblur="...",当元素失去焦点时发生的事件;
onselect="...",当元素被选中时发生的事件;
onchang="...",当元素状态被改变时发生的事件;
accept="...",允许上载的文件类型.
scr="...",定义在帧中显示的内容的来源;
frameborder="...",定义帧之间的边界(0或1);
align="...",被反对,控制对齐方式(left,,center,,right,,justify);
height="...",帧的高度,width="..."帧的宽度;
联网给我们带来方便的同时,也时常让我们感到困惑。随便搜搜就出一大堆结果,然而总是有大量的重复和错误。小妖发出的内容,都是自己实测过的,有问题请留言。
前方出现一头牛!
没错,这是一个 gif,但这个 gif 也是从小妖的 Demo 页上录下来的,闻到了原滋原味的 CSS3 的味道了吗?Demo 见:
http://xngeer.frostbelt.cn/itemcss/frame-animation.html
那如何用 CSS3 实现这个帧动画呢?
准备素材
头儿经常说前端应该能做出炫酷的东西,但巧媳妇难为无米之炊,没有好的设计和素材,前端有时候还是只能徒唤奈何呀。本Demo素材来源于网络
怎么让它动起来呢?
有同学已经想到了,把这张图片设为背景,不断修改 background-position 就可以了!对,其实就是这个道理
那有没有更优雅,而且不涉及 JS 的实现方式呢?
我们今天说的 CSS3 帧动画就是用来解决这个问题,上代码:
定义一个简单的 keyframes , 修改 background-position-x,从 0 到 -590(图片宽度)
animation: ox1 1s steps(6, start) 0ms infinite normal backwards
分别说一下各属性的涵义:
animation-name: ox1; /* 使用 keyframes ox1 */
animation-duration: 1s; /* 动画持续时间 1s */
animation-timing-function: steps(6, start); /* 动画函数,分6步执行,每一帧显示帧结束时的状态 */
animation-delay: 0ms; /* 延迟多长时间后开始执行动画 */
animation-iteration-count: infinite; /* 动画执行无限次 */
animation-direction: normal; /* 是否应该轮流反向播放动画 normal/alternate */
animation-fill-mode: backwards; /* 会在向元素应用动画样式时迅速应用动画的初始帧 */
不必计算每一帧具体的偏移,没有 JS!
这里提到了 animation,帧动画是 animation 的一种使用,想了解更多 animation 相关属性请查看以下 Demo 的源码:
http://xngeer.frostbelt.cn/itemcss/animation.html
有了 CSS3 这把利剑,相信你会走得更远~
TML 是网络的基石。 了解这种标记语言的一些鲜为人知但有用的部分可以让您的前端工作更轻松。 HTML 属性提供了多种功能,可以帮助您充分利用 HTML。 它定义了 HTML 元素的附加特征或属性。在本文中,小编将带您了解 11 个您可能还没有听说过的 HTML 属性。
此属性允许用户输入多个值。 您可以将 multiple 属性与 <input> 标签和 <select> 标签一起使用。 此布尔属性仅对电子邮件或文件输入类型有效。
在 <select> 标签中使用 multiple 属性
<label for="language">Select languages:</label>
<select name="language" id="language" multiple>
<option value="C++">C++</option>
<option value="Python">Python</option>
<option value="JavaScript">JavaScript</option>
<option value="Java">Java</option>
</select>
使用 multiple 属性进行文件输入
通过对文件输入使用 multiple 属性,您可以选择多个文件(通过按住 Shift 或 Ctrl 键)。
<input type="file" multiple>
使用 multiple 属性进行电子邮件输入
通过对电子邮件输入使用 multiple 属性,您可以输入以逗号分隔的电子邮件地址列表。 将从列表中的每个地址中删除所有空格。
<input type="email" multiple>
您可以使用 contenteditable 属性使网页上的 HTML 内容可编辑。 这是一个全局属性,即它对所有 HTML 元素都是通用的。
<p contenteditable="true">
在这里您可以编辑您想输入的内容
</p>
spellcheck 属性指定是否可以检查元素的拼写错误。 您可以对 <textarea> 元素中的文本、可编辑元素中的文本或输入元素中的文本(密码除外)中的文本进行拼写检查。
<p contenteditable="true" spellcheck="true">
在这里输入您想拼写检查的内容
</p>
您可以使用下载属性下载资源。 download 属性告诉浏览器下载指定的 URL 而不是导航到它。 您可以将下载属性与 <a> 标签和 <area> 标签一起使用。
注意:下载属性仅适用于同源 URL。 它遵循同源策略的规则。
<a href="xyz.png" download="myImage">下载</a>
<input> 标签的 accept 属性指定用户可以上传的文件类型。 您可以指定一个或多个文件类型的逗号分隔列表作为其值。
接受音频文件
<input type="file" id="audioFile" accept="audio/*">
接受视频文件
<input type="file" id="videoFile" accept="video/*">
接受图像文件
<input type="file" id="imageFile" accept="image/*">
接受 Microsoft Word 文件
<input type="file" id="docpicker"
accept=".doc,.docx,application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document">
接受 PNG 或 JPEG 文件
<input type="file" id="imageFile" accept=".png, .jpg, .jpeg">
接受 PDF 文件
<input type="file" id="pdfFile" accept=".pdf">
translate 属性告诉浏览器在页面本地化时该元素是否应该被翻译。 它可以有 2 个值:“是”或“否”。
<p translate="no">
输入您想翻译或者不需要翻译的内容
</p>
poster 属性用于在视频下载或用户播放视频之前显示图像。
注意:如果您不指定任何内容,则在第一帧可用之前不会显示任何内容。 当第一帧可用时,它显示为海报帧。
<video controls
src="http://www.示例.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>
inputmode 属性指示浏览器在用户选择任何 input 或 textarea 元素时显示哪个键盘。 此属性接受各种值:
None
<input type="text" inputmode="none" />
Numeric
<input type="text" inputmode="numeric" />
Tel
<input type="text" inputmode="tel" />
Decimal
<input type="text" inputmode="decimal" />
<input type="text" inputmode="email" />
URL
<input type="text" inputmode="url" />
Search
<input type="text" inputmode="search" />
<input> 元素的模式属性允许您指定一个正则表达式,元素的值将根据该正则表达式进行验证。 您可以将模式属性与多种输入类型一起使用,例如文本、日期、搜索、URL、电话、电子邮件和密码。
<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+">
</form>
autocomplete 属性指定浏览器是否应根据用户输入自动完成输入。 您可以将 autocomplete 属性用于多种输入类型,例如文本、搜索、URL、电话、电子邮件、密码、日期选择器、范围和颜色。 您可以将此属性与 <input> 元素或 <form> 元素一起使用。
<input name="credit-card-number" id="credit-card-number" autocomplete="off">
autofocus 属性是一个布尔属性,指示元素应该专注于页面加载。 您可以将此属性与 <button>、<input>、<keygen>、<select> 或 <textarea> 元素一起使用。
在 input 元素中使用 autofocus 属性
<input type="text" autofocus>
在 select 元素中使用 autofocus 属性
select name="languages" id="languages">
<option value="C++">
C++
</option>
<option value="Python">
Python
</option>
<option value="JavaScript">
JavaScript
</option>
<option value="Java">
Java
</option>
</select>
在 textarea 元素中使用 autofocus 属性
<textarea autofocus>
输入您想要显示的内容
</textarea>
单行代码有助于以更少的代码实现更多的目标。 您可以像专业人士一样使用多个 JavaScript 单行代码来编写代码。
只需一行代码,您就可以对数组进行混合、求数组的平均值、检查数组是否为空、生成随机十六进制颜色、生成随机 UUID 等等。
*请认真填写需求信息,我们会在24小时内与您取得联系。