整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
天在写一个关于 html 中 select 下拉元素选择的动态事件时，发现如果使用 javascript 中的 click 事件的话，会被执行两次。网上查了一下资料，发现 select 元素下拉选中事件并不适合使用 click 来触发，而要使用 change 事件。
html代码
<select name="mochu" id="mochu">
<option value="1">下拉1</option>
<option value="2">下拉2</option>
<option value="3">下拉3</option>
<option value="4">下拉4</option>
</select>
<script>
$('#mochu').click(function(){
console.log($(this).val());
});
</script>
点击下拉后，输出信息如下：
通过上图可以发现，如果 select 元素的下拉菜单使用 click 事件的话，会输出两次结果，也就说在展开下拉菜单之前与选择下拉菜单之后分别触发了 click 事件，所以 select 下拉选项的触发事件，不能使用 click，而使用 change 事件。
示例代码
<select name="mochu" onchange="GetVal(this)">
<option value="下拉1">选项1</option>
<option value="下拉2">选项2</option>
<option value="下拉3">选项3</option>
<option value="下拉4">选项4</option>
</select>
<script>
function GetVal(obj){
//代表的是选中项的index索引
var index = obj.selectedIndex;
//代表的是选中项的的值
var val = obj.options[index].value;
//代表的是选中项的text
var txt = obj.options[index].text;
console.log(index);
console.log(val);
console.log(txt);
}
</script>
输出结果：
TML 的 select 标签是网页开发人员构建交互式下拉列表的强大工具。它允许用户从预定义的选项列表中进行选择，使表单输入更加高效且用户友好。在本文中，我们将全面探索 select 标签的各种可能性，揭秘一些提高表单功能和用户体验的技巧。
select 标签的基本语法
select 标签的基本语法如下：
<select>
<option value="value1">选项 1</option>
<option value="value2">选项 2</option>
<option value="value3">选项 3</option>
</select>
在这个例子中，select 标签定义了下拉列表，而 option 标签定义了列表中的选项。每个 option 标签都有一个 value 属性，表示选项的值，以及显示给用户的文本。
自定义选项
select 标签提供了多种属性来自定义选项：
来看一个带有默认选中和禁用选项的例子：
<select>
<option value="apple">苹果</option>
<option value="banana" selected>香蕉</option>
<option value="orange" disabled>橙子</option>
</select>
在这个例子中，"香蕉" 选项将被默认选中，而 "橙子" 选项将被禁用。
增强 select 标签
select 标签可以通过多种方式进行增强，以提高用户体验：
来看一个带有多个选中的例子：
<select multiple>
<option value="apple">苹果</option>
<option value="banana">香蕉</option>
<option value="orange">橙子</option>
</select>
在这个例子中，用户可以选择多个水果选项。
样式化 select 标签
虽然 select 标签的样式化受到浏览器限制，但你仍然可以使用 CSS 来一定程度地美化它：
来看一个添加自定义样式的例子：
<style>
select {
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
}
select:hover {
border-color: #007bff;
}
</style>
<select>
<option value="option1">选项 1</option>
<option value="option2">选项 2</option>
</select>
在这个例子中，我们使用 CSS 为 select 标签添加了内边距、边框和圆角，并在悬停时改变边框颜色。
结论：打造动态选择体验
HTML select 标签为网页开发人员提供了创建动态选择体验的强大工具。通过结合选项自定义、增强功能和样式化技术，你可以创建出高效、直观且视觉吸引人的下拉列表。不断探索 select 标签的无限可能，让你的网页表单更加充满活力和互动性！释放你的创造力，打造令人难忘的用户选择体验！
、选择题（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();
}
*请认真填写需求信息，我们会在24小时内与您取得联系。
