整合营销服务商

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

免费咨询热线:

web前台小测试题

、选择题(1-18题各3分19-36题各2分,共92分)

1.在HTML的<TD>标签中,align 属性的取值是( C )

A. top ; B. middle ; C. center ; D. bottom

<table border="1">

<tr>

<td width="100px">姓名</td>

<td>性别</td>

<td>年龄</td>

</tr>

<tr>

<td>张三</td>

<td>男</td>

<td>20龄</td>

</tr>

</table>

2. CSS样式表根据所在网页的位置,可分为( B )

A.行内样式表、内嵌样式表、混合样式表; B.行内样式表、内嵌样式表、外部样式表;

C.外部样式表、内嵌样式表、导入样式表; D.外部样式表、混合样式表、导入样式表

行内样式:

<html>

<body>

<div style="width:100px;height:100px;background:red;"></div>>

</body>

</html>

-----------------------------------------------------------------

内嵌样式:

<html>

<head>

<style type="text/css">

#div{width:100px;height:100px;background:red;}

</style>

</head>

<body>

<div id="div"></div>

</body>

</html>

--------------------------------------------------------------

外部样式:

<html>

<head>

<link rel="stylesheet" type="text/css" href="ccss.css">

</head>

<body>

<div id="div"></div>>

</body>

</html>

---------------------

css文件

#div{width:100px;height:100px;background:red;}

#和.区别

.点是使用class引用的,多个控件可以同时使用一个class,一个控件上也可以使用多个class,比如

.tdRed{border:solid 1px red;}

.tdBKBlue{background-color:blue;}

<td class="tdRed" />

<td class="tdRed tdBKBule"/>

而ID是在一个页面中唯一的

总得来说class表示泛性的,id表示个性的

比如你所有的按钮都是一个颜色的

.normalButton{background-color:blue;border:solid 0px black;}

对于提交按钮会要做的大一点

#submit{width:100px;height:100px;}

那么你的按钮就是

<input type="button" id="submit" class="normalButton" value="提交" />

普通的按钮就是

<input type="button" id="abcdefg" class="normalButton" value="普通按钮" />

3. 在插入图片标签中,对插入的图片进行文字说明使用的属性是( D )

A.name; B.id; C.src; D. alt

4. 对于<FORM action=″URL″ method=*>标签,其中*代表GET或( C )

A.SET; B. PUT; C. POST ; D. INPUT

Get和post区别

安全性:POST比GET安全;

编码方式:POST方式提交时可以通过HTML文档中的<META>元素设置实体部分的编码方式,而GET方式提交时URI默认的编码方式为ISO-8859-1,不可以在页面中设置;

传输文件大小:POST方式提交文件放在实体部分传输,大小无上限,而GET方式提交文件内容放在URI部分传输,最大为2KB;

请求速度:GET比POST快。

数据传输方式:GET:查询字符串(名称/值对)是在 GET 请求的 URL 中发送的,如:/test/demo_form.asp?name1=value1&name2=value2;POST:查询字符串(名称/值对)是在 POST 请求的 HTTP 消息主体中发送的。

5. 下列标签可以不成对出现的是( B )

A.〈HTML〉〈/HTML〉 ; B.〈P〉 〈/P〉; C.〈TITLE〉〈/TITLE〉 ; D.〈BODY〉〈/BODY〉

<p>是段落标签。

在HTML4.01中某些标签(<p><br>,<hr>,<img>, <input>,<link>等)允许不成对出现,但是不推荐。在现在的浏览器里,都会“兼容”这些单标签。浏览器解释<p>标签后,碰到一个不对应的标签时,会自动填补</p>。所以<p>标签可以单标签使用,但不推荐。

在HTML5中规定了元素必须始终关闭,也就是标签必须成对出现。

6. 对于标签〈input type=*〉,如果希望实现密码框效果,*值是( C

A. hidden; B.text ; C. password ; D. submit

7. HTML代码<select name=“name”></select>表示?( D

A. 创建表格 ; <table>

B. 创建一个滚动菜单; <marquee>

C. 设置每个表单项的内容;

D.创建一个下拉菜单

8. BODY元素用于背景颜色的属性是( C )

A. alink ; B. vlink ; C. bgcolor; D. background

9. 在表单中包含性别选项,且默认状态为“男”被选中,下列正确的是( A )

A. <input type=radio name=sex checked> 男 ; B.<input type=radio name=sex enabled>

C.<input type=checkbox name=sex checked>男;

D.nput type=checkbox name=sex enabled>男

性别(单选框):<input type="radio" value="1" name="sex" checked="checked"/>男

<input type="radio" value="2" name="sex"/>女

角色(下拉框):<select name="role">

<option value="1" selected="selected">教师</option>

<option value="2">学生</option>

</select>

10. 在CSS中下面哪种方法表示超链接文字在鼠标经过时,超链接文字无下划线?( B )

A. A:link{TEXT-DECORATION: underline }; B. A:hover {TEXT-DECORATION: none};

C. A:active {TEXT-DECORATION: blink }; D. A:visited {TEXT-DECORATION: overline }

11. JavaScript代码: 'abcdefg'.indexOf('D') 结果是( B )

A:0 B:-1 C:3 D:4

Js常用方法

1.substr

substr(start,length)表示从start位置开始,截取length长度的字符串。

var src="images/off_1.png";

alert(src.substr(7,3));

弹出值为:off

2.substring

substring(start,end)表示从start到end之间的字符串,包括start位置的字符但是不包括end位置的字符。

var src="images/off_1.png";

alert(src.substring(7,10));

弹出值为:off

3.indexOF

indexOf() 方法返回某个指定的字符串值在字符串中首次出现的位置(从左向右)。没有匹配的则返回-1,否则返回首次出现位置的字符串的下标值。

var src="images/off_1.png";

alert(src.indexOf('t'));

alert(src.indexOf('i'));

alert(src.indexOf('g'));

弹出值依次为:-1,0,3

4.lastIndexOf

lastIndexOf()方法返回从右向左出现某个字符或字符串的首个字符索引值(与indexOf相反)

var src="images/off_1.png";

alert(src.lastIndexOf('/'));

alert(src.lastIndexOf('g'));

弹出值依次为:6,15

5.split

将一个字符串分割为子字符串,然后将结果作为字符串数组返回。

以空格分割返回一个子字符串返回

var s, ss;

var s = "1,2,3,4";

ss = s.split(",");

alert(ss[0]);

alert(ss[1]);

12. <img src="name">的意思是?( A )

A. 图像相对于周围的文本左对齐; B. 图像相对于周围的文本右对齐;

C. 图像相对于周围的文本底部对齐; D. 图像相对于周围的文本顶部对齐

13. 点击按钮,在ID为“Link”的DIV标签内显示东软实训超链接, 下面对该按钮的onClick事件函数描述正确的是:C

A. Link.innerText='<a href="http://www.jb-aptech.com.cn">东软实训</a>';

B. Link.outerText='<a href="http://www.jb-ptech.com.cn">东软实训</a>';

C. Link.innerHTML='<a href="http://www.jb-aptech.com.cn">东软实训</a>';

D. Link.outerHTML='<a href="http://www.jb-aptech.com.cn">东软实训</a>'

innerHTML 设置或获取位于对象起始和结束标签内的

HTML

outerHTML 设置或获取对象及其内容的 HTML 形式

innerText 设置或获取位于对象起始和结束标签内的文本

outerText 设置(包括标签)或获取(不包括标签)对象的文本

innerText和outerText在获取时是相同效果,但在设置时,innerText仅设置标签内的文本,而outerText设置包括标签在内的文本

14.(“24.7” + 2.3 ) 的计算结果是( C

A. 27 ; B. 24.7 2.3; C. 24.72.3; D. 26.7

15. ( B )事件处理程序可用于在用户单击按钮时执行函数

A. onSubmit; B. onClick; C. onChange; D. onExit

属性当以下情况发生时,出现此事件onabort图像加载被中断onblur元素失去焦点onchange用户改变域的内容onclick鼠标点击某个对象ondblclick鼠标双击某个对象onerror当加载文档或图像时发生某个错误onfocus元素获得焦点onkeydown某个键盘的键被按下onkeypress某个键盘的键被按下或按住onkeyup某个键盘的键被松开onload某个页面或图像被完成加载onmousedown某个鼠标按键被按下onmousemove鼠标被移动onmouseout鼠标从某元素移开onmouseover鼠标被移到某元素之上onmouseup某个鼠标按键被松开onreset重置按钮被点击onresize窗口或框架被调整尺寸onselect文本被选定onsubmit提交按钮被点击onunload用户退出页面

16. 用户更改表单元素 Select 中的值时,就会调用( D )事件处理程序

A. onClick; B. onFocus; C. onMouseOver; D. onChange

17.onMouseUp 事件处理程序表示( A

A. 鼠标被释放; B. 鼠标按下; C. 鼠标离开某个区域; D. 鼠标单击

18. 下列哪一项表示的不是按钮( C

A. type="submit"; B. type="reset"; C. type="image"; D. type="button"

<img src="/i/eg_tulip.jpg" alt="上海鲜花港 - 郁金香" />

19.下面哪一项是换行符标签?( C

A. <body>; B. <font>; C. <br>; D. <p>

font规定文本字体、大小和颜色:

<font size="3" color="red">This is some text!</font>

<font size="2" color="blue">This is some text!</font>

<font face="verdana" color="green">This is some text!</font>

20. 下列哪一项是在新窗口中打开网页文档。( B

A. _self; B. _blank; C. _top; D. _parent

_blank在新窗口中打开被链接文档;

_self是指在本身这个网页窗口来打开新的网页链接;

_top表示在顶层窗口打开网页链接,即在整个窗口中打开被链接文档;

_parent表示在父窗口打开网页链接;

<a href="http://www.w3school.com.cn/" target="_blank">Visit W3School!</a>onclick="javascript:window.open('Default.aspx','_blank');"

21. 下面说法错误的是( D )

A. CSS样式表可以将格式和结构分离;

B. CSS样式表可以控制页面的布局;

C. CSS样式表可以使许多网页同时更新;

D. CSS样式表不能制作体积更小下载更快的网页

CSS样式表能为我们实现些什么样的功能?

1、你可以将格式和结构分离。

2、你可以以前所未有的能力控制页面布局。

3、你可以制作体积更小下载更快的网页。

4、你可以将许多网页同时更新,比以前更快更容易。

5、浏览器将成为你更友好的界面

将格式和结构分离

HTML从来没打算控制网页的格式或外观。这种语言定义了网页的结构和各要素的功能,而让浏览器自己决定应该让各要素以何种模样显示。 但是网页设计者要求的更多。所以当 Netscape推出新的可以控制网页外观的HTML标签时,网页设计者无不欢呼雀跃。 我们可以用<FONT FACE>、<I>包在<P>外边控制文章主体的外观等等。然后我们将所有东西都放入表格,用隐式GIF空格 产生一个20象素的边距。一切都变得乱七八糟。编码变得越来越臃肿不堪,要想将什么内容迅速加到网页中变得越来越难。 串接样式表通过将定义结构的部分和定义格式的部分分离使我们能够对页面的布局施加更多的控制。HTML仍可以保持简单明了的初衷。CSS代码独立出来从另一角度控制页面外观。

以前所未有的能力控制页面的布局

<FONT SIZE>能使我们调整字号,表格标签帮助我们生成边距,这都没错。但是,我们对HTML总体上的控制却很有限。我们不可能精确地生成80象素的高度,不可能控制行间距或字间距,我们不能在屏幕上精确定位图象的位置。但是现在,样式表使这一切都成为可能。

可以制作出体积更小下载更快的网页还有更好的消息:

样式表只是简单的文本,就象HTML那样。它不需要图象,不需要执行程序,不需要插件,不需要流式。它就象HTML指令那样快。有了CSS之后,以前必须求助于GIF的事情现在通过CSS就可以实现。还有,正如我先前提到的,使用串接样式表可以减 少表格标签及其它加大HTML体积的代码, 减少图象用量从而减少文件尺寸。

可以更快更容易地维护及更新大量的网页

没有样式表时,如果我想更新整个站点中所有主体文本的字体,我必须一页一页地修改每张网页。即便站点用数据库提供服务,我仍然需要更新所有的模板, 而且更新每一模板中每一个实例实例的 <FONT FACE>。样式表的主旨就是将格式和结构分离。 利于样式表,我可以将站点上所有的网 页都指向单一的一个CSS文件,我只要 修改CSS文件中某一行,那么整个站点 都会随之发生变动。

浏览器将成为你更友好的界面

不象其它的的网络技术,样式表的代码 有很好的兼容性,也就是说,如果用户 丢失了某个插件时不会发生中断,或者 使用老版本的浏览器时代码不会出现杂 乱无章的情况。 只要是可以识别串接样式表的浏览器就 可以应用它。

22. 要使表格的边框不显示,应设置border的值是( B )

A. 1; B. 0; C. 2; D. 3

23. 如果要在表单里创建一个普通文本框,以下写法中正确的是( A )

A. <INPUT>; B. <INPUT type="password">;

C. <INPUT type="checkbox">; D. <INPUT type="radio">

24. 以下有关按钮的说法中,错误的是( B )

A. 可以用图像作为提交按钮; B. 可以用图像作为重置按钮;

C. 可以控制提交按钮上的显示文字; D. 可以控制重置按钮上的显示文字。

<input type="image" src="pic.jpg" onclick="fangfa();"/>

function fangfa(){

document.formname.submit();

document.formname.reset();

}

习目标:了解JavaScript是如何与HTML结合来创建动态网页,网页中嵌入JavaScript的不同方式,JavaScript的内容类型及其与<script>的关系

<script>元素

<script>是由Netscape创造出来,后来加到HTML规范中的。

<script>有8个属性:

1、async:表示立即开始下载脚本,但不能阻止其他页面动作,比如下载资源或者等待其他脚本加载。只对外部脚本文件有效。

2、charset:使用src属性指定代码字符集。这个属性很少用,因为大多数浏览器不在乎它的值。

3、crossorigin;配置资源请求的CORS(跨源资源共享)设置。默认情况下不使用CORS。crossorigin = “anonymous”配置文件请求不用设置凭据标志。crossorigin = ”use-credentials“设置凭据标志,意味着出站请求会包含凭据。

4、defer:表示脚本可以延迟到文档全部解析和显示后再执行。新版本中只能用于外部脚本。

5、integrity:允许比对接收到的资源和指定的加密签名以验证子资源完整性(SRI,Subresource integrity),如果验证签名不匹配则脚本不会执行。这个属性可以用于确保内容分发网络(CDN,Content Delivery Network)不会提供恶意内容。

6、language:此属性已被废止。

7、src:表示包含外部要执行的代码的外部文件。

8、type:代替language,表示代码块中脚本语言的内容类型(也称为MIME类型),按照惯例这个值始终都是”text/JavaScript“,尽管”text/JavaScript“和”text/ecmascript“都已经废弃。JavaScript文件的MIME类型通常是”application/x-javascript“,不过给type属性这个值的话可能会导致脚本被忽略。在非IE的浏览器中有效的值还有”application/JavaScript“和”application/ecmascript"。如果这个值是module,则代码会被当成是ES6模块,而且只有这时候代码中才能出现import和export关键字。

使用<script>的方式有内联和外嵌两种,只要把code写入<script>code</script>中就好,code中要是包含字符串“<script>”,只要加上转义字符“\”即可。

如果要外嵌JavaScript代码只要使用src属性来链接外部文件即可如:

<script src=“example.js”></script>

XHTML 文档中,可以忽略结束标签写成<script src=“example.js”/>即可,但是这在HTML中不能使用。

标签位置

过去把JavaScript和CSS一起写在head中,但是这意味着必须下载所有code并解析和解释完成后才开始渲染页面,对于JavaScript很多的页面会导致页面渲染速度过慢,为解决这个问题,JavaScript一般写在body元素的页面内容的最后边,如下

<html>

<head></head>

<body>

message

<script>code<\script>

<\body>

</html>

推迟使用脚本

在外联JavaScript时可以使用defer属性来推迟脚本的运行。可以写成:

<html>

<head>

<script defer src = "example.js">code<\script>

</head>

<body>

message

<\body>

</html>

异步执行脚本

async属性从脚本处理方式上与defer类似,但是不同的是标记async的脚本并不能保证脚本按照他们的出现顺序执行,比如:

<html>

<head>

<script sync src = "example1.js">code<\script>

<script sync src = "example2.js">code<\script>

</head>

<body>

message

<\body>

</html>

不能保证example1比example2先执行。

动态加载脚本

除了<script>以外还可以用其他方式加载脚本。因为JavaScript可以使用DOM API,所以通过向DOM中动态地加入script元素同样可以加载指定脚本。只要创建一个script元素并将其添加到DOM即可。

let script = document.createElement('script');

script.src = 'gibberish.js';

document.head.appendChild(script);

当然,在把 HTMLElement 元素添加到 DOM 且执行到这段代码之前不会发送请求。默认情况下,以这种方式创建的<script>元素是以异步方式加载的,相当于添加了 async 属性。不过这样做可能会有问题,因为所有浏览器都支持 createElement()方法,但不是所有浏览器都支持 async 属性。因此,如果要统一动态脚本的加载行为,可以明确将其设置为同步加载:

let script = document.createElement('script');

script.src = 'gibberish.js';

script.async = false;

document.head.appendChild(script);

以这种方式获取的资源对浏览器预加载器是不可见的。这会严重影响它们在资源获取队列中的优先级。根据应用程序的工作方式以及怎么使用,这种方式可能会严重影响性能。要想让预加载器知道这些动态请求文件的存在,可以在文档头部显式声明它们:

<link rel="preload" href="gibberish.js">

XHTML中的变化

可扩展超文本标记语言(XHTML,Extensible HyperText Markup Language)是将 HTML 作为 XML的应用重新包装的结果。与 HTML 不同,在 XHTML 中使用 JavaScript 必须指定 type 属性且值为text/javascript,HTML 中则可以没有这个属性。XHTML 虽然已经退出历史舞台,但实践中偶尔可能也会遇到遗留代码,为此本节稍作介绍。在 XHTML 中编写代码的规则比 HTML 中严格,这会影响使用<script>元素嵌入 JavaScript 代码。下面的代码块虽然在 HTML 中有效,但在 XHML 中是无效的。

<script type="text/javascript">

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

}

</script>

在 HTML 中,解析<script>元素会应用特殊规则。XHTML 中则没有这些规则。这意味着 a < b语句中的小于号(<)会被解释成一个标签的开始,并且由于作为标签开始的小于号后面不能有空格,这会导致语法错误。避免 XHTML 中这种语法错误的方法有两种。第一种是把所有小于号(<)都替换成对应的 HTML实体形式(<)。结果代码就是这样的:

<script type="text/javascript">

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

}

</script>

这样代码就可以在 XHTML 页面中运行了。不过,缺点是会影响阅读。好在还有另一种方法。第二种方法是把所有代码都包含到一个 CDATA 块中。在 XHTML(及 XML)中,CDATA 块表示文档中可以包含任意文本的区块,其内容不作为标签来解析,因此可以在其中包含任意字符,包括小于号,并且不会引发语法错误。使用 CDATA 的格式如下:

<script type="text/javascript"><![CDATA[

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

}

]]></script>

在兼容 XHTML 的浏览器中,这样能解决问题。但在不支持 CDATA 块的非 XHTML 兼容浏览器中则不行。为此,CDATA 标记必须使用 JavaScript 注释来抵消:

<script type="text/javascript">

//<![CDATA[

function compare(a, b) {

if (a < b) {

console.log("A is less than B");

} else if (a > b) {

console.log("A is greater than B");

} else {

console.log("A is equal to B");

}

}

//]]>

</script>

这种格式适用于所有现代浏览器。虽然有点黑科技的味道,但它可以通过 XHTML 验证,而且对XHTML 之前的浏览器也能优雅地降级。

废弃的语法

自 1995 年 Netscape 2 发布以来,所有浏览器都将 JavaScript 作为默认的编程语言。type 属性使用一个 MIME 类型字符串来标识<script>的内容,但 MIME 类型并没有跨浏览器标准化。即使浏览器默认使用 JavaScript,在某些情况下某个无效或无法识别的 MIME 类型也可能导致浏览器跳过(不执行)相关代码。因此,除非你使用 XHTML 或<script>标签要求或包含非 JavaScript 代码,最佳做法是不指定 type 属性。在最初采用 script 元素时,它标志着开始走向与传统 HTML 解析不同的流程。对这个元素需要应用特殊的解析规则,而这在不支持 JavaScript 的浏览器(特别是 Mosaic)中会导致问题。不支持的浏览器会把<script>元素的内容输出到页面上,从而破坏页面的外观。Netscape 联合 Mosaic 拿出了一个解决方案,对不支持 JavaScript 的浏览器隐藏嵌入的 JavaScript 代码。最终方案是把脚本代码包含在一个 HTML 注释中,像这样:

<script><!--

function sayHi(){

console.log("Hi!");

}

//--></script>

使用这种格式,Mosaic 等浏览器就可以忽略<script>标签中的内容,而支持 JavaScript 的浏览器则必须识别这种模式,将其中的内容作为 JavaScript 来解析。虽然这种格式仍然可以被所有浏览器识别和解析,但已经不再必要,而且不应该再使用了。在XHTML 模式下,这种格式也会导致脚本被忽略,因为代码处于有效的 XML 注释当中。

行内代码与外部文件

虽然可以直接在 HTML 文件中嵌入 JavaScript 代码,但通常认为最佳实践是尽可能将 JavaScript 代码放在外部文件中。不过这个最佳实践并不是明确的强制性规则。推荐使用外部文件的理由如下。

 可维护性。JavaScript 代码如果分散到很多 HTML 页面,会导致维护困难。而用一个目录保存所有 JavaScript 文件,则更容易维护,这样开发者就可以独立于使用它们的 HTML 页面来编辑代码。

 缓存。浏览器会根据特定的设置缓存所有外部链接的 JavaScript 文件,这意味着如果两个页面都用到同一个文件,则该文件只需下载一次。这最终意味着页面加载更快。

 适应未来。通过把 JavaScript 放到外部文件中,就不必考虑用 XHTML 或前面提到的注释黑科技。包含外部 JavaScript 文件的语法在 HTML 和 XHTML 中是一样的。在配置浏览器请求外部文件时,要重点考虑的一点是它们会占用多少带宽。在 SPDY/HTTP2 中,预请求的消耗已显著降低,以轻量、独立 JavaScript 组件形式向客户端送达脚本更具优势。比如,第一个页面包含如下脚本:

<script src="mainA.js"></script>

<script src="component1.js"></script>

<script src="component2.js"></script>

<script src="component3.js"></script>

...

后续页面可能包含如下脚本:

<script src="mainB.js"></script>

<script src="component3.js"></script>

<script src="component4.js"></script>

<script src="component5.js"></script>

...

在初次请求时,如果浏览器支持 SPDY/HTTP2,就可以从同一个地方取得一批文件,并将它们逐个放到浏览器缓存中。从浏览器角度看,通过 SPDY/HTTP2 获取所有这些独立的资源与获取一个大JavaScript 文件的延迟差不多。在第二个页面请求时,由于你已经把应用程序切割成了轻量可缓存的文件,第二个页面也依赖的某些组件此时已经存在于浏览器缓存中了。当然,这里假设浏览器支持 SPDY/HTTP2,只有比较新的浏览器才满足。如果你还想支持那些比较老的浏览器,可能还是用一个大文件更合适。

文档模式

IE5.5 发明了文档模式的概念,即可以使用 doctype 切换文档模式。最初的文档模式有两种:混杂模式(quirks mode)和标准模式(standards mode)。前者让 IE 像 IE5 一样(支持一些非标准的特性),后者让 IE 具有兼容标准的行为。虽然这两种模式的主要区别只体现在通过 CSS 渲染的内容方面,但对JavaScript 也有一些关联影响,或称为副作用。本书会经常提到这些副作用。

IE 初次支持文档模式切换以后,其他浏览器也跟着实现了。随着浏览器的普遍实现,又出现了第三种文档模式:准标准模式(almost standards mode)。这种模式下的浏览器支持很多标准的特性,但是没有标准规定得那么严格。主要区别在于如何对待图片元素周围的空白(在表格中使用图片时最明显)。

混杂模式在所有浏览器中都以省略文档开头的 doctype 声明作为开关。这种约定并不合理,因为混杂模式在不同浏览器中的差异非常大,不使用黑科技基本上就没有浏览器一致性可言。标准模式通过下列几种文档类型声明开启:

<!-- HTML 4.01 Strict -->

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">

<!-- XHTML 1.0 Strict -->

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Strict//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!-- HTML5 -->

<!DOCTYPE html>

准标准模式通过过渡性文档类型(Transitional)和框架集文档类型(Frameset)来触发:

<!-- HTML 4.01 Transitional -->

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Transitional//EN"

"http://www.w3.org/TR/html4/loose.dtd">

<!-- HTML 4.01 Frameset -->

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD HTML 4.01 Frameset//EN"

"http://www.w3.org/TR/html4/frameset.dtd">

<!-- XHTML 1.0 Transitional -->

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<!-- XHTML 1.0 Frameset -->

<!DOCTYPE html PUBLIC

"-//W3C//DTD XHTML 1.0 Frameset//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

准标准模式与标准模式非常接近,很少需要区分。人们在说到“标准模式”时,可能指其中任何一个。而对文档模式的检测(本书后面会讨论)也不会区分它们。本书后面所说的标准模式,指的就是除混杂模式以外的模式。

<noscript>元素

针对早期浏览器不支持 JavaScript 的问题,需要一个页面优雅降级的处理方案。最终,<noscript>元素出现,被用于给不支持 JavaScript 的浏览器提供替代内容。虽然如今的浏览器已经 100%支持JavaScript,但对于禁用 JavaScript 的浏览器来说,这个元素仍然有它的用处。<noscript>元素可以包含任何可以出现在<body>中的 HTML 元素,<script>除外。在下列两种情况下,浏览器将显示包含在<noscript>中的内容:

 浏览器不支持脚本;

 浏览器对脚本的支持被关闭。任何一个条件被满足,包含在<noscript>中的内容就会被渲染。否则,浏览器不会渲染<noscript>中的内容。

下面是一个例子:

<!DOCTYPE html>

<html>

<head>

<title>Example HTML Page</title>

<script defer="defer" src="example1.js"></script>

<script defer="defer" src="example2.js"></script>

</head>

<body>

<noscript>

<p>This page requires a JavaScript-enabled browser.</p>

</noscript>

</body>

</html>

这个例子是在脚本不可用时让浏览器显示一段话。如果浏览器支持脚本,则用户永远不会看到它。

小结

JavaScript 是通过<script>元素插入到 HTML 页面中的。这个元素可用于把 JavaScript 代码嵌入到HTML 页面中,跟其他标记混合在一起,也可用于引入保存在外部文件中的 JavaScript。本章的重点可以总结如下。

 要包含外部 JavaScript 文件,必须将 src 属性设置为要包含文件的 URL。文件可以跟网页在同一台服务器上,也可以位于完全不同的域。

 所有<script>元素会依照它们在网页中出现的次序被解释。在不使用 defer 和 async 属性的情况下,包含在<script>元素中的代码必须严格按次序解释。

 对不推迟执行的脚本,浏览器必须解释完位于<script>元素中的代码,然后才能继续渲染页面的剩余部分。为此,通常应该把<script>元素放到页面末尾,介于主内容之后及</body>标签之前。

 可以使用 defer 属性把脚本推迟到文档渲染完毕后再执行。推迟的脚本原则上按照它们被列出的次序执行。

 可以使用 async 属性表示脚本不需要等待其他脚本,同时也不阻塞文档渲染,即异步加载。异步脚本不能保证按照它们在页面中出现的次序执行。

 通过使用<noscript>元素,可以指定在浏览器不支持脚本时显示的内容。如果浏览器支持并启用脚本,则<noscript>元素中的任何内容都不会被渲染。

着工作闲暇之余,总结下string的方法

string目前所有方法

1,anchor() 方法用于创建 HTML 锚,该方法返回加了 <a> 标签的字符串。



2,at()方法,根据索引获取字符,可以接受负索引。


3,big() 方法用于把字符串显示为大号字体,该方法返回加了 <big> 标签的字符串。

small() 方法用于把字符串显示为小号字,该方法返回加了 <small> 标签的字符串。

blink() 方法用于显示闪动的字符串,该方法返回加了 <blink> 标签的字符串。

fixed() 方法用于把字符串显示为打字机字体,该方法返回加了 <tt> 标签的字符串。

strike() 方法用于显示加删除线的字符串,该方法返回加了 <strike> 标签的字符串。

bold() 方法用于把字符串显示为粗体,该方法返回加了 <b> 标签的字符串。

italics() 方法用于把字符串显示为斜体,该方法返回加了 <i> 标签的字符串。

fontcolor() 方法用于按照指定的颜色来显示字符串,该方法返回加了 <font> 标签的字符串。

fontsize() 方法用于按照指定的尺寸来显示字符串,该方法返回加了 <font> 标签的字符串。

sub() 方法用于把字符串显示为下标,该方法返回加入 <sub> 标签的字符串。

sup() 方法用于把字符串显示为上标,该方法返回加入 <sup> 标签的字符串。

link() 方法用于把字符串显示为超链接,该方法返回加了 <a> 标签的字符串。



4,charAt() 方法返回字符串中指定索引(下标)处的字符,不传默认索引为 0,小数索引转换为整数,如果索引无效,则为空字符串 (""),超出范围的索引返回空字符串。

5,charCodeAt() 方法可返回指定位置的字符的 Unicode 编码,返回值是 0 - 65535 之间的整数,表示给定索引处的 UTF-16 代码单元。字符串中第一个字符的位置为 0, 第二个字符位置为 1,以此类推。不传默认为0。


6,codePointAt() 方法返回字符串中索引(位置)处的 Unicode 值。

charCodeAt() 和 codePointAt() 的区别

charCodeAt() 是 UTF-16,codePointAt() 是 Unicode。

charCodeAt() 返回 0 到 65535 之间的数字。

只有 codePointAt() 可以返回大于 0xFFFF (65535) 的 Unicode 值的完整值


7,concat() 方法连接两个或多个字符串。不会更改现有字符串。返回新字符串。一般实际使用时用+号更方便一些。


8,constructor 属性返回对 String 对象属性创建的函数。


9,startsWith() 方法用于检测字符串是否以指定的子字符串开始。如果是以指定的子字符串开头返回 true,否则 false。startsWith() 方法对大小写敏感。

endsWith() 方法用来判断当前字符串是否是以指定的子字符串结尾的(区分大小写)。如果传入的子字符串在搜索字符串的末尾则返回 true,否则将返回 false。


10,includes() 方法如果字符串包含指定的字符串,includes() 方法将返回 true。否则返回 false。includes() 方法区分大小写。


11,indexOf() 方法可返回某个指定的字符串值在字符串中首次出现的位置。如果没有找到匹配的字符串则返回 -1。 indexOf() 方法区分大小写。

lastIndexOf() 方法可返回一个指定的字符串值最后出现的位置,如果指定第二个参数 start,则在一个字符串中的指定位置从后向前搜索。该方法将从后向前检索字符串,但返回是从起始位置 (0) 开始计算子字符串最后出现的位置。 看它是否含有字符串。开始检索的位置在字符串的 start 处或字符串的结尾(没有指定 start 时)。如果没有找到匹配字符串则返回 -1 。lastIndexOf() 方法是区分大小写的!


12,isWellFormed()方法用于判断字符串格式是否正确。

toWellFormed()方法用于将字符串转换为正确格式。

新的方法,提案地址:https://github.com/tc39/proposal-is-usv-string

13,length 属性返回字符串的长度(字符数)。

未完待续。。。