lt;input> 元素的输入类型
大家学习了表单之后,有木有发现input通过定义不同的type属性,描述不同的输入类型。今天小编带大家总结一下input常用的输入类型。
1.文本输入
设置 type 属性值为 'text'
<input type="text">
文本输入框
2.密码输入
设置 type 属性值为 ‘password’
<input type="password">
密码输入框
3.提交表单按钮
设置 type 属性值为 ‘submit’
<input type="submit">
定义提交表单数据至表单处理程序的按钮
4.单选按钮
设置 type 属性值为 ‘radio’
<input type="radio">true
单选按钮
5.复选框
设置 type 属性值为 ‘checkbox’
<input type="checkbox">
6.按钮
设置 type 属性值为 ‘button’
<input type="button" value="确定">
<input>元素输入属性
在讲input的输入属性之前,给大家讲讲HTML属性是怎么回事。
可能大家也发现了,之前文章讲得的HTML中,好多加了属性的元素,例如a标签中加了href属性定义了链接的地址,还有table中加border属性给表格添加边框线。
<a href="https://www.toutiao.com/i6491189339890909709/">sublime的安装与使用</a>
<table border="1"></table>
HTML 标签可以拥有属性。属性提供了有关 HTML 元素的更多的信息。
属性总是以名称/值对的形式出现,比如:name="value"。属性总是在 HTML 元素的开始标签中规定。
虽然属性和属性值对大小写不敏感,但是小编还是建议大家用小写的。
后续课程CSS会用到属性给大家总结一下:
class 规定元素的类名
id 规定元素的唯一 id
style 规定元素的行内样式
好啦,我们开始学习input的输入属性。
看如下例子,
<input type="text" value="John">
type属性定义了文本的输入类型,value属性定义了输入字段的初始值。
设置默认值
用value设置初始值往往在你修改输入值时遇到麻烦,如果不提前把初始值删掉的话,你输入新值后跟在初始值后边。
修改输入值
为了解决这个问题,我们可以使用占位符(placeholder)
<input type="text" placeholder="John" >
当你输入新值时,初始值会消失。
使用占位符
readonly 属性
readonly 属性规定输入字段为只读(不能修改)
<input type="text" value="Sunshin" readonly>
disabled 属性
disabled 属性规定输入字段是禁用的。
被禁用的元素是不可用和不可点击的。
被禁用的元素不会被提交。
<input type="text" value="Sunshin" disabled >
输入框不可用
required 属性
required 属性是布尔属性。如果设置,则规定在提交表单之前必须填写输入字段。
<input type="text" value="Sunshin" required>
今天内容是不是又有点多呢?我控制不住我自己啊(⊙o⊙)…
打开编辑器好好练习一下吧!
你必须非常努力,才能看起来好不费力!
关注小白前端,才能持续收到文章推送哦~
, 判断字符串是否是这样组成的,第一个必须是字母,后面可以是字母、数字、下划线,总长度为5-20
var reg=/^[a-zA-Z][a-zA-Z_0-9]{4,19}$/;
reg.test("a1a__a1a__a1a__a1a__");
2,截取字符串abcdefg的efg
var str="abcdefg";
if (/efg/.test(str)) {
var efg=str.substr(str.indexOf("efg"), 3);
alert(efg);
}
3,判断一个字符串中出现次数最多的字符,统计这个次数
//将字符串的字符保存在一个hash table中,key是字符,value是这个字符出现的次数
var str="abcdefgaddda";
var obj={};
for (var i=0, l=str.length; i < l; i++) {
var key=str[i];
if (!obj[key]) {
obj[key]=1;
} else {
obj[key]++;
}
}
/*遍历这个hash table,获取value最大的key和value*/
var max=-1;
var max_key="";
var key;
for (key in obj) {
if (max < obj[key]) {
max=obj[key];
max_key=key;
}
}
alert("max:"+max+" max_key:"+max_key);
4,IE与FF脚本兼容性问题
(1) window.event:
表示当前的事件对象,IE有这个对象,FF没有,FF通过给事件处理函数传递事件对象
(2) 获取事件源
IE用srcElement获取事件源,而FF用target获取事件源
(3) 添加,去除事件
IE:element.attachEvent(“onclick”, function) element.detachEvent(“onclick”, function)
FF:element.addEventListener(“click”, function, true) element.removeEventListener(“click”, function, true)
(4) 获取标签的自定义属性
IE:div1.value或div1[“value”]
FF:可用div1.getAttribute(“value”)
(5) document.getElementByName()和document.all[name]
IE;document.getElementByName()和document.all[name]均不能获取div元素
FF:可以
(6) input.type的属性
IE:input.type只读
FF:input.type可读写
(7) innerText textContent outerHTML
IE:支持innerText, outerHTML
FF:支持textContent
(8) 是否可用id代替HTML元素
IE:可以用id来代替HTML元素
FF:不可以
这里只列出了常见的,还有不少,更多的介绍可以参看JavaScript在IE浏览器和Firefox浏览器中的差异总结
5,规避javascript多人开发函数重名问题
(1) 可以开发前规定命名规范,根据不同开发人员开发的功能在函数前加前缀
(2) 将每个开发人员的函数封装到类中,调用的时候就调用类的函数,即使函数重名只要类名不重复就ok
6,javascript面向对象中继承实现
javascript面向对象中的继承实现一般都使用到了构造函数和Prototype原型链,简单的代码如下:
function Animal(name) {
this.name=name;
}
Animal.prototype.getName=function() {alert(this.name)}
function Dog() {};
Dog.prototype=new Animal("Buddy");
Dog.prototype.constructor=Dog;
var dog=new Dog();
7,FF下面实现outerHTML
FF不支持outerHTML,要实现outerHTML还需要特殊处理
思路如下:
在页面中添加一个新的元素A,克隆一份需要获取outerHTML的元素,将这个元素append到新的A中,然后获取A的innerHTML就可以了。
SPANDIV
SPAN
P
8,编写一个方法 求一个字符串的字节长度
假设:
一个英文字符占用一个字节,一个中文字符占用两个字节
function GetBytes(str){
var len=str.length;
var bytes=len;
for(var i=0; i
if (str.charCodeAt(i) > 255) bytes++;
}
return bytes;
}
alert(GetBytes("你好,as"));
9,编写一个方法 去掉一个数组的重复元素
var arr=[1 ,1 ,2, 3, 3, 2, 1];
Array.prototype.unique=function(){
var ret=[];
var o={};
var len=this.length;
for (var i=0; i
var v=this[i];
if (!o[v]){
o[v]=1;
ret.push(v);
}
}
return ret;
};
alert(arr.unique());
10,写出3个使用this的典型应用
(1)在html元素事件属性中使用,如
(2)构造函数
function Animal(name, color) {
this.name=name;
this.color=color;
}
12,如何显示/隐藏一个DOM元素?
el.style.display="";
el.style.display="none";
el是要操作的DOM元素
13,JavaScript中如何检测一个变量是一个String类型?请写出函数实现
String类型有两种生成方式:
(1)Var str=“hello world”;
(2)Var str2=new String(“hello world”);
function IsString(str){
return (typeof str=="string" || str.constructor==String);
}
var str="";
alert(IsString(1));
alert(IsString(str));
alert(IsString(new String(str)));
14,网页中实现一个计算当年还剩多少时间的倒数计时程序,要求网页上实时动态显示“××年还剩××天××时××分××秒”
15,补充代码,鼠标单击Button1后将Button1移动到Button2的后面
16,JavaScript有哪几种数据类型
简单:Number,Boolean,String,Null,Undefined
复合:Object,Array,Function
17,下面css标签在JavaScript中调用应如何拼写,border-left-color,-moz-viewport
borderLeftColor
mozViewport
18,JavaScript中如何对一个对象进行深度clone
function cloneObject(o) {
if(!o || 'object' !==typeof o) {
return o;
}
var c='function'===typeof o.pop ? [] : {};
var p, v;
for(p in o) {
if(o.hasOwnProperty(p)) {
v=o[p];
if(v && 'object'===typeof v) {
c[p]=Ext.ux.clone(v);
}
else {
c[p]=v;
}
}
}
return c;
};
19,如何控制alert中的换行
\n alert(“p\np”);
20,请实现,鼠标点击页面中的任意标签,alert该标签的名称.(注意兼容性)
SPANDIV
SPAN
P
21,请编写一个JavaScript函数 parseQueryString,它的用途是把URL参数解析为一个对象,如:
var url=“http://witmax.cn/index.php?key0=0&key1=1&key2=2″;
function parseQueryString(url){
var params={};
var arr=url.split("?");
if (arr.length <=1)
return params;
arr=arr[1].split("&");
for(var i=0, l=arr.length; i
var a=arr[i].split("=");
params[a[0]]=a[1];
}
return params;
}
var url="http://witmax.cn/index.php?key0=0&key1=1&key2=2";
var ps=parseQueryString(url);
alert(ps["key1"]);
22,ajax是什么? ajax的交互模型? 同步和异步的区别? 如何解决跨域问题?
Ajax是多种技术组合起来的一种浏览器和服务器交互技术,基本思想是允许一个互联网浏览器向一个远程页面/服务做异步的http调用,并且用收到的数据来更新一个当前web页面而不必刷新整个页面。该技术能够改进客户端的体验。包含的技术:
XHTML:对应W3C的XHTML规范,目前是XHTML1.0。
CSS:对应W3C的CSS规范,目前是CSS2.0
DOM:这里的DOM主要是指HTML DOM,XML DOM包括在下面的XML中
JavaScript:对应于ECMA的ECMAScript规范
XML:对应W3C的XML DOM、XSLT、XPath等等规范
XMLHttpRequest:对应WhatWG的Web Applications1.0规范(http://whatwg.org/specs/web-apps/current-work/)
AJAX交互模型
同步:脚本会停留并等待服务器发送回复然后再继续
异步:脚本允许页面继续其进程并处理可能的回复
跨域问题简单的理解就是因为JS同源策略的限制,a.com域名下的JS无法操作b.com或c.a.com下的对象,具体场景如下:
PS:(1)如果是端口或者协议造成的跨域问题前端是无能为力的
(2) 在跨域问题上,域仅仅通过URL的首部来识别而不会尝试判断相同的IP地址对应的域或者两个域是否对应一个IP
前端对于跨域的解决办法:
(1) document.domain+iframe
(2) 动态创建script标签
23,请给出异步加载js方案,不少于两种
默认情况javascript是同步加载的,也就是javascript的加载时阻塞的,后面的元素要等待javascript加载完毕后才能进行再加载,对于一些意义不是很大的javascript,如果放在页头会导致加载很慢的话,是会严重影响用户体验的。
异步加载方式:
(1) defer,只支持IE
(2) async:
(3) 创建script,插入到DOM中,加载完毕后callBack,见代码:
function loadScript(url, callback){
var script=document.createElement("script")
script.type="text/javascript";
if (script.readyState){ //IE
script.onreadystatechange=function(){
if (script.readyState=="loaded" ||
script.readyState=="complete"){
script.onreadystatechange=null;
callback();
}
};
} else { //Others: Firefox, Safari, Chrome, and Opera
script.onload=function(){
callback();
};
}
script.src=url;
document.body.appendChild(script);
}
25,请设计一套方案,用于确保页面中JS加载完全。
var n=document.createElement("script");
n.type="text/javascript";
//以上省略部分代码
//ie支持script的readystatechange属性(IE support the readystatechange event for script and css nodes)
if(ua.ie){
n.onreadystatechange=function(){
var rs=this.readyState;
if('loaded'===rs || 'complete'===rs){
n.onreadystatechange=null;
f(id,url); //回调函数
}
};
//省略部分代码
//safari 3.x supports the load event for script nodes(DOM2)
n.addEventListener('load',function(){
f(id,url);
});
//firefox and opera support onload(but not dom2 in ff) handlers for
//script nodes. opera, but no ff, support the onload event for link
//nodes.
}else{
n.onload=function(){
f(id,url);
};
}
26,js中如何定义class,如何扩展prototype?
Ele.className=“***”; //***在css中定义,形式如下:.*** {…}
A.prototype.B=C;
A是某个构造函数的名字
B是这个构造函数的属性
C是想要定义的属性的值
27,如何添加html元素的事件,有几种方法.
(1) 为HTML元素的事件属性赋值
(2) 在JS中使用ele.on***=function() {…}
(3) 使用DOM2的添加事件的方法 addEventListener或attachEvent
28,documen.write和 innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分
29,多浏览器检测通过什么?
(1) navigator.userAgent
(2) 不同浏览器的特性,如addEventListener
30,js的基础对象有那些, window和document的常用的方法和属性列出来
String,Number,Boolean
Window:
方法:setInterval,setTimeout,clearInterval,clearTimeout,alert,confirm,open
属性:name,parent,screenLeft,screenTop,self,top,status
Document
方法:createElement,execCommand,getElementById,getElementsByName,getElementByTagName,write,writeln
属性:cookie,doctype,domain,documentElement,readyState,URL,
31,前端开发的优化问题
(1) 减少http请求次数:css spirit,data uri
(2) JS,CSS源码压缩
(3) 前端模板 JS+数据,减少由于HTML标签导致的带宽浪费,前端用变量保存AJAX请求结果,每次操作本地变量,不用请求,减少请求次数
(4) 用innerHTML代替DOM操作,减少DOM操作次数,优化javascript性能
(5) 用setTimeout来避免页面失去响应
(6) 用hash-table来优化查找
(7) 当需要设置的样式很多时设置className而不是直接操作style
(8) 少用全局变量
(9) 缓存DOM节点查找的结果
(10) 避免使用CSS Expression
(11) 图片预载
(12) 避免在页面的主体布局中使用table,table要等其中的内容完全下载之后才会显示出来,显示比div+css布局慢
32,如何控制网页在网络传输过程中的数据量
启用GZIP压缩
保持良好的编程习惯,避免重复的CSS,JavaScript代码,多余的HTML标签和属性
33,Flash、Ajax各自的优缺点,在使用中如何取舍?
Ajax的优势
(1) 可搜索型
(2) 开放性
(3) 费用
(4) 易用性
(5) 易于开发
Flash的优势
(1) 多媒体处理
(2) 兼容性
(3) 矢量图形 比SVG,Canvas优势大很多
(4) 客户端资源调度,比如麦克风,摄像头
Sdd;d’dsdsdsd
meta主要用于设置网页中的一些元数据,元数据不是给用户看 charset 指定网页的字符集 name 指定的数据的名称 content 指定的数据的内容
keywords 表示网站的关键字,可以同时指定多个关键字,关键字间使用,隔开
<meta name="Keywords" content="网上购物,网上商城,手机,笔记本,电脑,MP3,CD,VCD,DV,相机,数码,配件,手表,存储卡,京东"/>
description 用于指定网站的描述
<meta name="description" content="京东JD.COM-专业的综合网上购物商城,销售家电、数码通讯、电脑、家居百货、服装服饰、母婴、图书、食品等数万个品牌优质商品.便捷、诚信的服务,为您提供愉悦的网上购物体验!"/>
<meta http-equiv="refresh" content="3;url=https://www.mozilla.org">
将页面重定向到另一个网站
title标签的内容会作为搜索结果的超链接上的文字显示
<title>Document</title>
header 表示网页的头部 main 表示网页的主体部分(一个页面中只会有一个main) footer 表示网页的底部 nav 表示网页中的导航 aside 和主体相关的其他内容(侧边栏) article 表示一个独立的文章 section 表示一个独立的区块,上边的标签都不能表示时使用section
div 没有语义,就用来表示一个区块,目前来讲div还是我们主要的布局元素
span 行内元素,没有任何的语义,一般用于在网页中选中文字
<header></header>
<main></main>
<footer></footer>
<nav></nav>
<aside></aside>
<article></article>
<section></section>
<div></div>
<span></span>
使用ol标签来创建无序列表,使用li表示列表项
<ul>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ul>
使用ul标签来创建无序列表,使用li表示列表项
<ol>
<li>结构</li>
<li>表现</li>
<li>行为</li>
</ol>
使用dl标签来创建一个定义列表, 使用dt来表示定义的内容,使用dd来对内容进行解释说明
<dl>
<dt>结构</dt>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
<dd>结构表示网页的结构,结构用来规定网页中哪里是标题,哪里是段落</dd>
</dl>
<ul>
<li>
aa
<ul>
<li>aa-1</li>
<li>aa-2
<ul>
<li>aa-1</li>
<li>aa-2</li>
</ul>
</li>
</ul>
</li>
</ul>
超链接可以让我们从一个页面跳转到其他页面, 或者是当前页面的其他的位置
使用 a 标签来定义超链接
<a href="https://www.baidu.com">超链接</a>
指定跳转的目标路径
值可以是一个外部网站的地址
也可以写一个内部页面的地址
超链接是也是一个行内元素,在a标签中可以嵌套除它自身外的任何元素
用来指定超链接打开的位置
_self 默认值 在当前页面中打开超链接
_blank 在一个新的要么中打开超链接
<a href="07.列表.html" target="_blank">超链接</a>
将#作为超链接的路径的展位符使用
javascript:; 来作为href的属性,此时点击这个超链接什么也不会发生
将超链接的href属性设置为#,这样点击超链接以后 页面不会发生跳转,而是转到当前页面的顶部的位置
跳转到页面的指定位置,只需将href属性设置 #目标元素的id属性值
<a href="#bottom">去底部</a>
<br><br>
<a href="#p3">去第三个自然段</a>
<br><br>
<p>
内容多一点
</p>
<a href="#">这是一个新的超链接</a>
<br><br>
<a href="javascript:;">这是一个新的超链接</a>
<br><br>
<a id="bottom" href="#">回到顶部</a>
img标签来引入外部图片,img标签是一个自结束标签
属性:src 属性指定的是外部图片的路径(路径规则和超链接是一样的)
alt 图片的描述,这个描述默认情况下不会显示,有些浏览器会图片无法加载时显示
<img src="./img/1.gif" alt="松鼠">
用于向当前页面中引入一个其他页面
<iframe src="https://www.qq.com" width="800" height="600" frameborder="0"></iframe>
audio 标签用来向页面中引入一个外部的音频文件的
<audio src="./source/audio.mp3" controls autoplay loop></audio>
除了通过src来指定外部文件的路径以外,还可以通过source来指定文件的路径
<audio controls>
<!-- 对不起,您的浏览器不支持播放音频!请升级浏览器!-->
<source src="./source/audio.mp3">
<source src="./source/audio.ogg">
<embed src="./source/audio.mp3" type="audio/mp3" width="300" height="100">
</audio>
与 audio 相似
<video controls>
<source src="./source/flower.webm">
<source src="./source/flower.mp4">
<embed src="./source/flower.mp4" type="video/mp4">
</video>
<table border="1" width='50%' align="center">
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
<td>D1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
<td rowspan="2">D2</td>
</tr>
<tr>
<td>A3</td>
<td>B3</td>
<td>C3</td>
</tr>
<tr>
<td>A4</td>
<td>B4</td>
<td colspan="2">C4</td>
</tr>
</table>
<table border="1" width='50%' align="center">
<thead>
<tr>
<th>日期</th>
<th>收入</th>
<th>支出</th>
<th>合计</th>
</tr>
</thead>
<tbody>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>2000.1.1</td>
<td>500</td>
<td>200</td>
<td>300</td>
</tr>
</tbody>
<tfoot>
<tr>
<td></td>
<td></td>
<td>合计</td>
<td>300</td>
</tr>
</tfoot>
</table>
border-spacing: 0px;
border-collapse: collapse;
<input type="text" name="username">
<input type="radio" name="hello" value="a">
<input type="radio" name="hello" value="b" checked>
<input type="checkbox" name="test" value="1">
<input type="checkbox" name="test" value="2">
<input type="checkbox" name="test" value="3" checked>
<select name="haha">
<option value="i">选项一</option>
<option selected value="ii">选项二</option>
<option value="iii">选项三</option>
</select>
<input type="submit" value="注册">
<form action="target.html">
<input type="text" name="username" value="hello" readonly>
<br><br>
<input type="text" name="username" autofocus>
<br><br>
<input type="text" name="b">
<br><br>
<!-- <input type="color"> -->
<br><br>
<!-- <input type="email"> -->
<br><br>
<input type="submit">
<!-- 重置按钮 -->
<input type="reset">
<!-- 普通的按钮 -->
<input type="button" value="按钮">
<br><br>
<button type="submit">提交</button>
<button type="reset">重置</button>
<button type="button">按钮</button>
</form>
<!--
我是注释中的注释 注释不能嵌套
-->
<!doctype html>
*请认真填写需求信息,我们会在24小时内与您取得联系。