整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线:

前端程序员不可忽略的 11 个有用的 HTML 属性

TML 是网络的基石。 了解这种标记语言的一些鲜为人知但有用的部分可以让您的前端工作更轻松。 HTML 属性提供了多种功能,可以帮助您充分利用 HTML。 它定义了 HTML 元素的附加特征或属性。在本文中,小编将带您了解 11 个您可能还没有听说过的 HTML 属性。

1. multiple

此属性允许用户输入多个值。 您可以将 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>

2.contenteditable

您可以使用 contenteditable 属性使网页上的 HTML 内容可编辑。 这是一个全局属性,即它对所有 HTML 元素都是通用的。

<p contenteditable="true">
在这里您可以编辑您想输入的内容
</p>

3.spellcheck

spellcheck 属性指定是否可以检查元素的拼写错误。 您可以对 <textarea> 元素中的文本、可编辑元素中的文本或输入元素中的文本(密码除外)中的文本进行拼写检查。

<p contenteditable="true" spellcheck="true">
在这里输入您想拼写检查的内容
</p>

4.download

您可以使用下载属性下载资源。 download 属性告诉浏览器下载指定的 URL 而不是导航到它。 您可以将下载属性与 <a> 标签和 <area> 标签一起使用。

注意:下载属性仅适用于同源 URL。 它遵循同源策略的规则。

<a href="xyz.png" download="myImage">下载</a>

5. accept

<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">

6. translate

translate 属性告诉浏览器在页面本地化时该元素是否应该被翻译。 它可以有 2 个值:“是”或“否”。

<p translate="no">
输入您想翻译或者不需要翻译的内容
</p>

7.poster

poster 属性用于在视频下载或用户播放视频之前显示图像。

注意:如果您不指定任何内容,则在第一帧可用之前不会显示任何内容。 当第一帧可用时,它显示为海报帧。

<video controls
src="http://www.示例.com/gtv-videos-bucket/sample/ElephantsDream.mp4"
poster="posterImage.png">
</video>

8.inputmode

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" />

Email

<input type="text" inputmode="email" />

URL

<input type="text" inputmode="url" />

Search

<input type="text" inputmode="search" />

9. pattern

<input> 元素的模式属性允许您指定一个正则表达式,元素的值将根据该正则表达式进行验证。 您可以将模式属性与多种输入类型一起使用,例如文本、日期、搜索、URL、电话、电子邮件和密码。

<form>
<input name="username" id="username" pattern="[A-Za-z0-9]+">
</form>

10.autocomplete

autocomplete 属性指定浏览器是否应根据用户输入自动完成输入。 您可以将 autocomplete 属性用于多种输入类型,例如文本、搜索、URL、电话、电子邮件、密码、日期选择器、范围和颜色。 您可以将此属性与 <input> 元素或 <form> 元素一起使用。

<input name="credit-card-number" id="credit-card-number" autocomplete="off">

11.autofocus

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 One-Liners 让您的生活更轻松

单行代码有助于以更少的代码实现更多的目标。 您可以像专业人士一样使用多个 JavaScript 单行代码来编写代码。

只需一行代码,您就可以对数组进行混合、求数组的平均值、检查数组是否为空、生成随机十六进制颜色、生成随机 UUID 等等。

内容是《Web前端开发之Javascript视频》的课件,请配合大师哥《Javascript》视频课程学习。

多窗口和窗体:

可以打开多个浏览器窗口,每个窗口都是独立的;

一个浏览器窗口可能包含多个标签页;每个标签页都是独立的上下文,都是独立的window对象,而且相互之间互不干扰;

但是窗口也并不总是和其他窗口完全没有关系;一个窗口或标签页中的脚本可以打开新的窗口或标签页,如此,这些多窗口或标签页就可以互相操作;

打开窗口:

window.open()方法,打开一个新的浏览器窗口、标签页,导航到一个指定的URL;

语法:window.open(url,name,features,replace);url为打开新窗口的url,name为窗口目标,features设置窗口特性参数列表,replace为Boolean值,指定是否用新窗口替换当前页面;

一般使用第一个参数,如果也省略该参数或使用空字符串,则会打开一个空页面的URL about:blank;

如果使用第二个参数,而且该参数是已有窗口或框架的名称,就会在该窗口或框架中加载指定的URL;否则弹出新窗口,并将新窗口的name命名为该参数,如果省略此参数,则会使用指定的“_blank”打开一个新的、未命名的窗口;

第二个参数也可以是:_self、_parent、_top、_blank;

窗口的名字也可作为<a>和<form>元素上target属性的值,用来表示引用的文档或提交处理的页面;

<script>
window.open("https://www.zeronetwork.cn/","myWindow");
</script>
<a href="https://www.google.cn/" target="myWindow">baidu.com</a>

窗口特性属性:

第三个参数是一个逗号分隔的设置字符串,表示在新窗口中都显示哪些特性;如果省略,则以默认的形式呈现;

  • fullscreen:yes / no,是否最大化;仅限IE;
  • height:数值,新窗口的高,不能小于100;
  • left:数值,新窗口的左坐标,不能是负值;
  • location:yes / no,是否显示地址栏;不同浏览器的默认值不同;设置为no,地址栏有可能会隐藏,也有可能会被禁用;
  • menubar:yes / no,是否显示菜单栏,默认为no;
  • resizable:yes / no,是否能改变大小,默认为no ;
  • scrollbars:yes / no,如果内容区域大于视口,是否允许滚动,默认为no;
  • status:yes / no,是否显示状态栏,默认为no;
  • toolbar:yes / no,是否显示工具栏,默认为no;
  • top:数值,新窗口的上坐标,不能是负值;
  • width:数值,新窗口的宽,不能小于100;

字符串格式为:设置使用键值对,且全部使用逗号分隔,而且不能有空格;

window.open("https://www.zeronetwork.cn/","myWindow",
            "width=400,height=400,top=50,left=50,resizable=yes");

显式指定这些特性,打开的应该是新窗口,而不是新标签页;这个参数是非标准的,而且HTML5也主张浏览器应该忽略它;

另外,出于安全考虑,浏览器包含对可能指定的功能的限制,如,通常不允许指定一个太小的或者位于屏幕之外的窗口,并且一些浏览器不允许创建一个没有状态栏的窗口;

第四个参数只有在设置了第二个参数命名的是一个已存在的窗口时才有用;它是一个布尔值,声明了由第一个参数指定的URL是替换掉窗口浏览历史的当前记录(true)还是应该在窗口浏览历史中创建一个新的记录(false),默认为false;

window.open()会返回一个window对象,用于操作新创建的窗口;该引用可以操作新窗口的内容,从而就可以在一个窗口中控制另一个窗口的内容,例如向一个新开的浏览器窗口中输出内容;

var w = window.open();  // 打开一个新的空白窗口
w.document.write("<h2>零点网络</h2>");
w.alert("详情请进入https://www.zeronetwork.cn/");
w.location = "https://www.zeronetwork.cn/";

某些浏览器在默认情况下可能不允许针对主浏览器窗口调整大小或移动,但不允许针对通过open()创建的窗口调整大小或移动,如:

var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
            "width=400,height=400,top=50,left=50,resizable=yes");
newWindow.resizeTo(600,600);
newWindow.moveTo(200,200);

注:有些浏览器默认不允许这样操作;

窗口opener属性:

opener属性是新窗口对打开它的原始窗口的引用;即指向调用window.open()的窗口或框架;但只在弹出窗口的最外层window对象(top)中有定义;

var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
            "width=400,height=400,top=50,left=50,resizable=yes");
console.log(newWindow.opener === window); // true
 
<!-- 主窗口 -->
<input type="text" id="selectCity" placeholder="选择" />
<script>
var selectCity = document.getElementById("selectCity");
selectCity.onclick = function(){
    var newWin = window.open("select.html","newWin","width=400,height=400");
}
</script>
 
<!-- 新窗口 -->
<select id="city">
    <option value="beijing">北京</option>
    <option value="nanjing">南京</option>
    <option value="anhui">安徽</option>
</select>
<script>
var city = document.getElementById("city");
city.onchange = function(){
    window.opener.document.getElementById("selectCity").value = city.options[city.selectedIndex].value;
    window.close();
}
</script>

有些浏览器(如IE8和Chrome)会在独立的进程中运行每个标签页,当一个标签页打开另一个标签页时,如果两个window对象之间需要彼此通信,那么新标签页就不能运行在独立的进程中。在Chrome中,将新创建的标签页的opener属性设置为null,即表示在单独的进程中运行新标签页。

newWindow.opener = null;

标签页之间的联系一旦切断,将没有办法恢复。

window.close()关闭窗口:

对于主窗口,如果没有得到用户的允许是不能关闭它的;但弹出窗口可以不经用户允许可以关闭自己;

窗口关闭后,窗口的引用仍然存在,可以使用window.closed属性检测,但在实际场景中没有多大用处;

function openWin(){
    var newWindow = window.open("https://www.zeronetwork.cn/","myWindow",
            "width=400,height=400,top=50,left=50,resizable=yes");
    newWindow.document.write("<h2>零点网络</h2>");
    function closeWin(){
        newWindow.close();
        //alert(newWindow.closed);
        if(newWindow.close)
            alert("已关闭");
    }
    setTimeout(closeWin,3000);
}
openWin();

注:document对象也有close()方法,为了避免混淆,所以调用close()方法时,要显式调用,即使用window.close();

安全限制:

大多数浏览器针对弹出窗口实施了多方面的安全限制,如:不允许在屏幕之外创建弹出窗口,不允许将弹出窗口移动到屏幕之外,不允许关闭状态栏等;不允许关闭地址栏,默认情况下不允许移动弹出窗口或调整其大小;或者部分浏览器不支持修改状态栏,始终显示地址栏等;

通常,对于open()方法只有当用户手动单击按钮或超链接时才会调用;如果尝试在浏览器初始载入时开启一个弹出窗口时,通常会被屏蔽;

弹出窗口屏蔽程序:

大多数浏览器都内置有弹出窗口屏蔽程序,如果没有内置,可以安装第三方实用工具;内置屏蔽会使window.open可能返回null,第三方会返回错误;通过需要检测其返回值;

// 内置的屏蔽程序
var newWin = window.open("https://www.zeronetwork.cn/","_blank");
if(newWin == null){
    alert("弹窗被阻止!");
}
 
// 第三方
var blocked = false;
try{
    var newWin = window.open("https://www.zeronetwork.cn/","_blank");
    if(newWin == null)
        blocked = true;
}catch(e){
    blocked = true;
}
if(blocked){
    alert("弹窗被屏蔽");
}

弹出窗口通信:

主窗口向新窗口传值,直接为新窗口window对象添加成员,如:

// 主窗口
var newWin = window.open("select.html","_blank");
var person = {
    name:"wangwei",
    sex: true,
    age: 18
}
newWin.person = person;
 
// 新窗口
document.write("姓名:",person.name);
document.write("性别:",person.sex);
document.write("年龄:",person.age);

新窗口向主窗口传值,通过window.opener获取原始窗口的属性或者html元素;

<!-- 主窗口 -->
<div id="mydiv"></div>
<script>
var newWin = window.open("select.html","_blank");
function showDiv(str){
    var mydiv = document.getElementById("mydiv");
    mydiv.innerHTML = str;
}
</script>
 
<script>
// 新窗口
var str = "零点网络";
window.opener.showDiv(str);
window.close();
</script>

通过普通的get传值;

// 主窗口
function putId(id){
    window.open("select.html?id=" + encodeURIComponent(id),"putWin");
}
putId("1002");
 
// 新窗口
var id = location.search;
id = id.split("=");
console.log(id[1]);
document.write(decodeURIComponent(id[1]));

框架窗口:

如果页面使用了框架集合(包含frameset和iframe),则每个框架都由它自己的window对象表示,并存放在frames集合中;

与相互独立的标签页或窗口不同,框架窗口之间并不是相互独立的;

每个window对象都有一个name属性,其中包含框架的名称;

<frameset rows="100,*">
    <frame src="top.html" name="topFrame" />
    <frameset cols="50%,50%">
        <frame src="left.html" name="leftFrame" />
        <frame src="right.html" name="rightFrame" />
    </frameset>
</frameset>

在frames集合中,可用数字(下标从0开始,从左到右,从上到下)访问;即可以使用frames[0]表示第1个子窗口、frames[1]表示第2个子窗口;

可使用名称对框架进行访问,该名称就是该框架的name属性,如 window.frames[“topFrame”]引用;

也可以window.topFrame 使用架框的名字访问;

window.onload = function(){
    console.log(frames);
var topFrame = frames[0];
    console.log(topFrame);
    console.log(topFrame.name);
    var leftFrame = window.frames["leftFrame"];
    console.log(leftFrame.name);
    console.log(window.rightFrame.name);
}

可使用frames.length 取得框架集合长度;

如果是内联框架,那就更简单了,如:

<iframe src="right.html" name="myFrame" width="200" height="200"></iframe>
<script>
    console.log(frames);
    console.log(frames[0].name);
</script>

对于顶级窗口的window对象来说,可以看作为由若干个子窗口组成的窗口数组,也就是说可以把window对象当作为窗口的集合,如:

    console.log(window.length);
    console.log(window[0]);

但在实际场景中,最好还是使用frames来代替window,因为frames显得更清晰些;

对于<iframe>元素,如果设置了id,也可以通过document.getElementById()方法获取,如:

var myframe = document.getElementById("myframe");
console.log(myframe);
myframe.src = "one.html";

<iframe>元素有contentWindow属性,引用该窗体的window对象,所以此窗体的window对象就是:

var mywin = document.getElementById("myframe").contentWindow;
console.log(mywin);
mywin.document.write("是内联框架window对象");

可以进行反向操作,通过window对象的frameElement属性,来获取该窗体的<iframe>元素;表示顶级窗口的window对象的frameElement属性为null,窗体中的window对象的frameElement属性不是null;

var myframe = document.getElementById("myframe");
var mywin = myframe.contentWindow;
console.log(mywin.frameElement);
console.log(mywin.frameElement === myframe);
console.log(window.frameElement);
 
// 在one.html会返回<iframe id="myframe" src="one.html"></iframe>
console.log(window.frameElement);

尽管可以通过document.getElementById()和contentWindow属性来获取窗口中的子窗体的引用,但在实际场景中,用的还是比较少,主要还是使用frames属性来访问;

top对象:

可以使用top引用最顶层(外层)框架,就是浏览器窗口;使用它可以确保在一个框架中正确的访问另一个框架;

// 框架集页面
window.onload = function(){
    console.log(frames);
    console.log(top);
console.log(top === frames);  // true
console.log(top === window);  // true
    console.log(frames === window);  // true
}
// 框架页面
console.log("topFrame:",frames);
console.log("topFrame:",top);
console.log("topFrame:",top === frames);  // false

因此,使用top访问框架时,也可以如下:

    console.log(top[0].name);
    console.log(top["topFrame"].name);
    console.log(top.topFrame.name);
 
    console.log(top.frames[0].name);
    console.log(top.frames["topFrame"].name);
console.log(top.frames === frames);  // true

parent对象:

与top相对的另一个window对象是parent,其指的当前框架的直接上层框架,即父框架;

parent在不同的位置指不同的对象;在某些情况下,parent有可能等于top,但在没有框架的情况下,parent一定等于top(此时,它们都等于window),如:

<!-- frameset.html -->
<frameset rows="100,*">
    <frame src="top.html" name="topFrame" />
    <frameset cols="50%,50%">
        <frame src="left.html" name="leftFrame" />
        <frame src="right.html" name="rightFrame" />
    </frameset>
</frameset>
<!-- right.html -->
<frameset cols="50%,50%">
    <frame src="one.html" name="oneFrame" />
    <frame src="two.html" name="twoFrame" />
</frameset>

// one.html中的代码
var parentFrame = window.parent;
console.log("从one.html中访问:",parentFrame.name);  // rightFrame
parentFrame.frames[1].document.write("<h2>框架访问</h2>");
 
// top.html中的代码
var parentFrame = window.parent;
console.log("top:", parentFrame.name);
console.log("top:", parentFrame.length);
console.log("top:", parentFrame.frames.length);
console.log("top:", parentFrame === top);  // true
console.log("top:", parentFrame.frames[1].name);
parentFrame.frames[1].document.write("<h2>是left页面吗?</h2>");

注:除非最顶层的窗口是通过window.open()打开的,否则其window对象的name属性不会包含任何值;

self对象:

指向当前window自身,即self和window可以互换使用;

引入self的目的只是为了与top和parent对象对应起来;

对于顶级窗口,parent == self; // true

注:所有的这些对象都是window对象的属性,可以通过window.parent、window.top等形式访问;同时,这也意味着可以将不同层次的window对象连接起来,如:window.parent.parent.frames[0];

窗口交互:

对于一个复杂的框架,窗口之间可以相互访问,它主要包括对框架自身的引用、父窗口对子窗口的引用、子窗口对父窗口及其他窗口的引用、对顶级窗口的引用;

在使用框架的情况下,浏览器中会存在多个Global对象,即每个窗口都会有自己的执行上下文,在每个框架中定义的全局变量会自动成为框架中window对象的属性;

<!-- right.html -->
<div id="myDiv"></div>
<div id="imgDiv"></div>
<script>
function showImg(){
    var imgDiv = document.getElementById("imgDiv");
    var img = document.createElement("img");
    img.src = "images/1.jpg";
    imgDiv.appendChild(img);
}
</script>
 
// 框架集页面
window.onload = showDiv;
function showDiv(){
    var rightFrame = parent[2];
    var myDiv = rightFrame.document.getElementById("myDiv");
    myDiv.innerHTML = "<h2>零点网络</h2>";
}
 
<!-- top.html -->
<h2>Top页面</h2>
<div><button id="showBtn">显示图片</button>
    <button id="closeBtn">关闭图片</button></div>
<script>
window.onload = function(){
    var showBtn = document.getElementById("showBtn");
    var closeBtn = document.getElementById("closeBtn");
    var rightFrame = top[2];
    showBtn.onclick = rightFrame.showImg;
    closeBtn.onclick = closeImg;
}
function closeImg(){
    var rightFrame = top.rightFrame;
    var imgDiv = rightFrame.document.getElementById("imgDiv");
    imgDiv.innerHTML = "";
}
</script>

对于构造函数,它也是函数,所以当用构造函数和相关的原型对象定义一个自定义类时,这个类只在一个单独的窗口中定义;子窗口也可以引用这个类;

对于内置类来说,和自定义类就有所不同了;内置的类都会在所有的窗口中自动预定义,即每个窗口的window对象都包含原生类型的构造函数,因此每个框架一套自己的构造函数,这些构造函数一一对应,但并不相等;如:top.Object并不等于top.frames[0].Object,这个问题会影响到对跨框架传递的对象使用instanceof操作符;

WindowProxy对象:

window对象是客户端Javascript的全局变量;但是从技术上来看,并不是这样的;Web浏览器每次向窗口或窗体中载入新的内容,它都会开始一个新的JavaScript执行上下文,包含一个新创建的全局对象;但是当多个窗口或窗体在使用时,有一个重要的概念,尽管窗体或窗口载入了新的文档,但是引用窗体或窗口的window对象还仍然是一个有效的引用;

所以客户端Javascript有两个重要的对象;客户端全局对象处于作用域链的顶级,并且是全局变量和函数所定义的地方;事实上,全局对象会在窗口或窗体载入新内容时被替换;

而我们称之为“window对象”的对象实际上不是全局对象,而是全局对象的一个代理;每次查询或设置window对象的属性时,就会在窗口或窗体的当前全局对象上查询或设置相同的属性;

HTML5规范称这个代理对象为WindowProxy;由于它的代理行为,除了有更长的生命周期之外,代理对象表现得像真正的全局对象;如果可以比较两个对象,那么区分它们会很困难;但是事实上,没有办法可以引用到真正的客户端全局对象;全局对象处于作用域链的顶端,但是window、self、top、parent以及窗体的属性全部返回代理对象;window.open()也返回代理对象;甚至顶级函数里this的值也是代理对象,而不是真正的全局对象;


Web前端开发之Javascript-零点程序员-王唯

带有两个输入字段和相关标记的简单 HTML 表单:

<form action="demo_form.asp">

<label for="male">Male</label>

<input type="radio" name="sex" id="male" value="male"><br>

<label for="female">Female</label>

<input type="radio" name="sex" id="female" value="female"><br>

<input type="submit" value="提交">

</form>


浏览器支持

目前大多数浏览器支持 <label> 标签。


标签定义及使用说明

<label> 标签为 input 元素定义标注(标记)。

label 元素不会向用户呈现任何特殊效果。不过,它为鼠标用户改进了可用性。如果您在 label 元素内点击文本,就会触发此控件。就是说,当用户选择该标签时,浏览器就会自动将焦点转到和标签相关的表单控件上。

<label> 标签的 for 属性应当与相关元素的 id 属性相同。


提示和注释

提示:"for" 属性可把 label 绑定到另外一个元素。请把 "for" 属性的值设置为相关元素的 id 属性的值。


HTML 4.01 与 HTML5之间的差异

"form" 属性是 HTML5 的新属性。


属性

New:HTML5 新属性。

属性描述
forelement_id规定 label 与哪个表单元素绑定。
formNewform_id规定 label 字段所属的一个或多个表单。

全局属性

<label> 标签支持全局属性,查看完整属性表 HTML全局属性。


事件属性

<label> 标签支持所有 HTML事件属性。

如您还有不明白的可以在下面与我留言或是与我探讨QQ群308855039,我们一起飞!