web前端技术练习题

web技术练习题

与风也错过

3772人浏览 · 2022-07-01 15:51:03

与风也错过 · 2022-07-01 15:51:03 发布

选择题

1.以下哪个不属于Web前端开发的核心技术？（）。

A、HTML

C、JavaScript

B、CSS

D、Java

2.关于HTML说法错误的是（）。

A、HTML标签的嵌套结构可以描述成一个网状结构

B、在＜title＞和＜/title＞标签之间的是标题信息

C、HTML是大小写无关的，＜b＞跟＜B＞表示的意思是一样的

D、<meta>标签表示网页元数据，是提供给浏览器和搜索引擎的关于网页的描述性数据

3.关于HTML文件类型，以下哪种说法是正确的？（）。

A.HTML文件后缀名既可以是.html也可以是.htm结尾

B.HTML文件后缀名只能是.html结尾

C.HTML文件可以没有后缀名

D.HTML文件后缀名是.txt

4.以下哪个标签显示出来的标题字体最大？（）。

A、<h1>

B、<h2>

C、<h3>

D、<h4>

5.下面标记中，（）在标记的位置添加一个回车符。

A、<h1>

B、<enter>

C、<br />

D、<hr />

6.CSS样式表根据代码放置的位置共有3种形式，那么代码片段<p style="color:red">测试</p>的声明方式属于哪一种？（）。

A、外部样式表

B、内部样式表

C、内联样式表

D、以上都不正确

7.超链接基本语法是：（）

A、<a goto="URL"> ... </a>

C、<a link="URL"> ... </a>

B、<a herf="URL"> ... </a>

D、<a href="URL"> ... </a>

8.引用外部样式表的格式是（）?

A、<style src="mystyle.css">

B、<link rel="stylesheet" type="text/css" href="mystyle.css">

C、<stylesheet>mystyle.css</stylesheet>

D、<a href="style.css"></a>

9.以下哪个属性或属性值用于标记CSS样式的使用优先级？（）。

A、!important

C、C.display

B、B.z-index

D、position

10.下列哪个css属性能够更改文本字体（）。

A、text

B、line-height

C、font-family

D、text-decoration

11.下列样式定义字体为宋体、字体颜色为红色、斜体、大小20px、粗细800号，正确的定义是（）。

A、p{font-family:20px; font-size:宋体; font-weight:800; color: red; font-style:italic; }

B、p{font-family:宋体; font-size:20px; font-weight:800; color:red; font-style:italic; }

C、p{font-family:20px; font-size:800; font-weight:宋体; color:red; font-style:italic; }

D、p{font-family:800; font-size:20px; font-weight:red; color:italic; font-style:宋体; }

12.下面代码使用HTML元素的id属性，将样式应用于网页上的某个段落：

<p id="firstp">这是第一个段落</p>

以下关于样式规则定义正确的是（）。

A、<style type="text/css">

p{color:red}

</style>

C、<style type="text/css">

.firstp {color:red}

</style>

B、<style type="text/css">

# firstp {color:red}

</style>

D、<style type="text/css">

p.firstp {color:red}

</style>

13.关于外部样式表的说法错误的是？（）。

A、文件扩展名为.CSS

B、外部样式表中的内容以<style>开始，</style>结束

C、使用外部样式表可以使多个网页统一样式风格

D、同一个网页文档允许引用多个外部样式表

14.在JavaScript中使用（）来分隔两条语句。

A、逗号

B、句号

C、分号

D、括号

15.在CSS 中，为页面中的某个DIV标签设置以下样式，则该标签的占用宽度为（）。

div { width:200px; padding:0 20px; border:5px; } padding两个参数为上下,左右

boarder*2+width+padding*2

A、200px

B、220px

C、240px

D、250px

16.下面选项中，可以设置页面中某个DIV标签相对页面水平居中的CSS样式是（）。

A、margin : 0 auto

C、padding : 0 auto

B、text-align: center

D、vertical-align : middle

17.声明函数时，要使用一个关键词是（）。

A、console

B、log

C、function

D、method

18.下述关于循环语句的描述中，（）是错误的。

A、循环体内必须同时出现 break 语句和 continue 语句

B、循环体内可以出现条件语句

C、循环体内可以包含循环语句

D、循环体可以是空语句，即循环体中只出现一个分号

19.下面哪一个表达式的返回值为True。（）

A、!(3<=1)

B、(1!=2)&&(2<0)

C、!(20>3)

D、(5!=3)&&(50<10)

20.以下能正确保存字符串Today is a gift, that is why it is called “present”.的变量初始化的写法为（）。

A、var msg = ‘Today is a gift, that is why it is called “present”.’;

B、var msg = “Today is a gift, that is why it is called “present”.”;

C、var msg = “Today is a gift, that is why it is called \’present\’.”;

D、var msg = “Today is a gift, that is why it is called ‘present’.”;

21.下列哪个选项的CSS语法是正确的？（）

A、body:color=black

B、{body:color=black(body)}

C、body {color: black}

D、{body;color:black}

22.如何显示这样一个边框：顶边框8像素、底边框5像素、左边框20像素、右边框1像素（）

A、border-width:8px 1px 5px 20px

B、border-width:8px 20px 5px 1px

C、border-width:5px 20px 8px 1px

D、border-width:8px 5px 20px 1px

23.常用的网页图像格式有（）

A、gif，tiff

B、tiff ， jpg

C、gif，jpg

D、tiff, png

24.向页面输出“Hello World"的正确javascript语法是？（）

A、document.write("Hello World")

B、"Hello World"

C、response.write("Hello World")

D、(Hello World")

25.已知var x=10; x+="1";此时x最终等于多少？（）数字与字符串相加会变成字符串

A、101

B、11

C、10”1”

D、1

26.以下哪种JavaScript的变量声明是不规范的？（）

A、A. var hello;

C、var $hello;

B、var _hello;

D、var %hello;

27.已知<div id="test" class="style01"></div>, 以下哪句JavaScript代码可以获得该元素？（）

A. var x = document.createElement("test");

B. var x = document.createElement("style01");

C. var x = document.getElementById("test");

D. var x = document.getElementById(" style01");

28.下列哪种方式是用类选择器定义样式的（）

A、p{color:red;}

C、#two{color:red;}

B、.one{color:red;}

D、p,h1{color:red;}

29. 有如下JavaScript代码：

var a=1; a算全局变量

function sum(b){

console.log(a);

a+=2;

}

sum(a);

console.log(a);

此程序的最终结果为（）。

A、1 2

B、2 1

C、3 1

D、1 3

30.已知var x = 2e9000; 假设尝试执行alert(x);最终显示的结果是？（）

A、NaN

C、Infinity

B、2e9000

D、x

1.在HTML中如何对元素标签以及其内部的内容（选项中用…表示）进行注释？（）

A、/*…*/

C、

B、//…

D、“…”

2.如果有函数定义function f(x.y){…}，那么以下正确的函数调用是（）

。

A、f1,2

B、f(1)

C、f(1,2)

D、f(,2)

3.如果希望在网页中内嵌其他网页内容，需要用到的标签是？（）

A、<div>

B、<span>

C、<iframe>

D、<table>

4.关于<span>标签的说法，哪个不正确？（）。

A、<span>是一个内联元素，即不会在前后放置换行符号，默认在同一行显示。

B、<span>一般用作文本容器。

C、<span>首尾标签括住的文本内容默认变为黄色背景。

D、<span>本身没有任何样式，需要配合CSS样式代码才会有样式效果。

5.下列（）表示p元素中的字体是粗体。

A、p {text-size:bold}

C、p {font-weight:bold}

B、<p style="text-size:bold">

D、<p style="font-size:bold">

6.在JavaScript中，下列满足变量x大于等于20且小于100条件的正确表达式是（）。

A、(x>=20 & x<100)

C、(x>=20 or x<=100)

B、(x>=20 and x<100)

D、(x>=20 && x<100)

7. 已知有字符串var s = "happy"; 那么以下哪句可以获取到里面的字符’a’？（）

A、s.charAt(1) B、s.charAt(2) C、s.charAt(-1) D、s.charAt(-2)

String str = "leetcode";

str.charAt(0) 为"l"

str.charAt(1) 为"e"

8.下列（）是正确的CSS规则。

A、div{color:#999999;}

C、div:color=black

B、{div;color:black}

D、{div:color=black(body)}

9.在CSS样式中font-size属性用于设置字体大小，以下哪种写法单位不正确？（）

A、font-size: 30px;

C、font-size: 30pt;

B、font-size: 30deg;

D、font-size: 30em;

10.下列表达式结果为真的是（）。

A、5>"5" false

C、Math.round(10.5)>12 加上0.5后向下取整

B、1==true

D、NaN==NaN false

11. 关于字体的样式风格，以下哪种说法是不正确的？（）。

A、font-variant: small-caps;用于设置字体中英文字母均为小写字母

B、font-family: "宋体";用于设置字体的系列为宋体字

C、font-size:16px;用于设置字体尺寸大小为16像素

D、font-weight: bold;用于设置字体加粗

12.标题标记包含6种标记，每一个级别的字体大小都有明显的区分，下面哪级标题的字号最大（）。

A、<h3>

B、<h4>

C、<h5>

D、<h6>

14.以下哪个常量值最大?（）

A、70

B、025

C、0x90

D、0x85

15.下面四个变量声明语句中，哪一个变量的命名是正确的? （）

A、var for

B、var txt_name

C、var myname myval

D、var 2s

16.有如下JavaScript代码：

var i=0;

while(i<5){

i++;

if(i==3){

continue;

}

console.log(“*”);

}

该程序最终输出几个*（）。

A、3

B、4

C、5

D、6

17. 参数之间必须用（）分隔。

A.逗号

B.句号

C.分号

D.空格

18.下面哪一个表达式的返回值为True。（）

A、!(3<=1)

B、(1!=2)&&(2<0) false

C、!(20>3)

false

D、(5!=3)&&(50<10)

false

19.表达式160%9的计算结果是（）。

A、5

B、6

C、7

D、8

20.表达式"a90"+"90"的计算结果是（）。

A、a180

B、a9090

C、a90

D、180

21.为了标识一个HTML文件应该使用的HTML标记是（）。

A、<p></ p>

B、<boby> </body>

C、<html> </html>

D、<table> </table>

22.下面不属于CSS插入形式的（）。

A、索引式

B、内联式

C、嵌入式

D、外部式

23.可以不用发布就能在本地计算机上浏览的页面编写语言是（）。

A、ASP

B、HTML

C、PHP

D、JSP

24.以下标记中，用于定义一个单元格的是（）

A <td>  </td>

C、<table> ...</table>

B、<tr> ...</tr>

D、<caption> ...</caption>

25. 以下哪个标签可以实现斜体字效果？（）。

A、<br>

C、<b>

B、<i>

D、<strong>

26.若要产生一个4行30列的多行文本域，以下方法中，正确的是（）。

A、<Input type=" text” Rows=”4”Cols=” 30” Name=" txtintrol”>

B、<TextArea Rows=”4”Cols=” 30”Name=" txtintro”>

C、<TextArea Rows=”4”Cols=” 30”Name=" txtintro” > </TextArea>

D、<TextArea Rows=”30" Cols=”4” Name=" txtintro” > </TextArea>

27.下列哪一项表示的不是按钮。（）

A、type="submit"

C、type="image" ?

B、type= "reset"

D、D. type="button"

28.在HTML中使用哪个标签定义样式信息，例如字体风格、背景颜色、文本对齐方式等？（）。

A、<script>

C、<style>

B、<base>

D、<meta>

29.下列样式定义字体间距为 0.5 倍间距、水平左对齐、垂直顶端对齐、有下划线，正确的定义是：（）

A. P{text-decoration : underline; letter-spacing: 0.5em; vertical-align : top; text-align: left; }

B. p{text-decoration : 0.5em; letter-spacing: underline; vertical-align : top; text-align: left; }

C. P{text-decoration : left; letter-spacing: top; vertical-align : 0.5em; text-align: underline; }

D.p{text-decoration : underline; letter-spacing : 0.5em; vertical-align : left; text-align : top; }

30.如果有序列表中，“start"属性指定编号起始值为“3"，“type"类型为“A"，则下一个列表值为（）

A、3

B、C

C、Ⅲ

D、iii

1.在HTML中使用哪个标签显示网页标题？（）。

A、<title>

B、<link>

C、<script>

D、<meta>

2.关于HTML中的列表元素，以下哪个标签表示的是无序列表？（）。

A、<ol>

B、<ul>

C、<li>

D、<list>

3.（）标签可以用于<head>中。

A、<body>

B、<title>

C、<image>

D、<html>

4.已知外部css文件中有：p{color:red}，<style>与</style>中有：p{color:green} , 而<body>与</body>中有：<p style="color:yellow">测试</p> 请问此时段落元素<p>的字体颜色是？（）。

A、黄色

B、绿色

C、红色

D、黑色

5.有如下JavaScript代码：

function add(){ // 1

var sum = 1 + 2; // 2

console.log( sum ); // 3

}

console.log( sum ) ; // 4

在此程序中哪一行语句是错误的（）。

A、1

B、2

C、3

D、4

6.已知有var msg = "HappyBirthday";且var y1 = msg.indexOf("a");var y2 = msg.lastIndexOf("a");请问y1和y2的返回值分别是多少？（）。

A、y1的值是2，y2的值是12

C、y1的值是1,y2的值是11

B、y1的值是2，y2的值是-2

D、y1的值是1, y2的值是-1

7.如何给页面上所有的段落元素<p>添加字体颜色为绿色？（）。

A、.p{color:green}

B、all{color:green}

C、<p{color:green}

D、p{color:green}

8.希望为段落元素<p>设置：文本居中对齐、首行缩进2个字符、字符间距为10像素，以下哪种写法是正确的？（）。

A、p{text-indent: center; text-align: 2em; letter-spacing: 10px;}

B、p{letter-spacing: center; text-indent: 2em; text-align: 10px;}

C、p{text-align: center; letter-spacing: 2em; text-indent: 10px;}

D、p{text-align: center; text-indent: 2em; letter-spacing: 10px;}

9.有如下JavaScript代码：

var i=1

while(i<5){

console.log(“*”);

}

该程序最终输出几个*（）。

A、4

B、5

C、6

D、无数个

10.下列的哪一个表达式将返回值为假（）。

A、!(3 <= 1);

C、(4 >= 4) && (5 <= 2);

B、(“a” == “a”) && (“c” != “d”);

D、(2 < 3) || (3 < 2);

11.在JavaScript中，’1555’+3 的运行结果是（）。

A、1558

B、1552

C、15553

D、1553

12.以下哪种做法可以让背景图像balloon.jpg不平铺并且固定在屏幕上不要随着滚动条下拉而滚动？（）。

A、body{background: url(balloon.jpg) no-repeat; background-attachment: scroll;}

B、body{background: url(balloon.jpg); background-attachment: scroll;}

C、body{background: url(balloon.jpg) no-repeat; background-attachment: fixed;}

D、body{background: url(balloon.jpg); background-attachment: fixed;}

13. 以下能正确获取var s = “Hello”;字符串长度的JavaScript语句是（）。

A、Length(s) B、s.length C、s.len D、s.getLength()

14.下列JavaScript 的循环开始语句中（）是正确的。

A、for i=1 to

B、for(i=O;i<=10)

C、for(i<=10;i++)

D、for(i=O;i<=10;i++)

15.若在CSS样式表中有p{border: 7px solid orange},等同于以下哪种写法？（）。

A、p{border-style: 7px solid; border-color: orange}

B、p{border-style: solid orange; border-width: 7 px}

C、p(border-width: 7px; border-style: solid; border-color: orange}

D、p{border-width: solid; border-style: 7px; border-color: orange}

16.以下哪种写法可以将文本中的字母全部转成大写字母？（）。

A、text-transform: lowercase;

B、text-transform: uppercase;

C、text-transform: none;

D、text-transform: capitalize;

17．下面哪一个语句定义了一个名为Myval的变量并将它的值赋为2205? （）

A、var myval=2205

B、var MyVal=2205

C、var Myval=2205

D、Myval=2205

18. 已知有var s="Happy Birthday";且有var y=s.indexOf("y");请问运行后y的值是 ( )。

A、3 B、4 C、13 D、-1

20.关于超链接<a>的样式描述，以下哪种是不正确的？（）

A、a:visited表示已经访问过的超链接

B、a:hover表示鼠标昙浮在上面的超链接

C、a:active表示正在被点击的超链接

D、a:link表示当前没有被鼠标悬浮的超链接

21.下面哪一项是换行符标签？（）

A、<body >

B、<font>

C、<br>

D、<p>

22.下列哪一项是在新窗口中打开网页文档。（）

A、_self

B、_blank

C、_top

D、_parent

23.下面（）是ID的样式规则定义。

A、TR{clore:red;font-family:"隶书";font-size:24px;}

B、H2{color:red;font-family:."隶书";}

C、#grass{color:green;font- family:"隶书"; font-size:24px;}

D 、P{background-color:#CCFF33;text-align:left;}

24. 下列样式定义字体为宋体、字体颜色为红色、斜体、大小 20px、粗细 800 号，正确的定义是：（）

A、p {font-family :宋体;font-size: 20px; font-weight : 800; color:red; font-style : italic ; }

B、p {font-family : 20px; font-size:宋体; font-weight : 800; color:red;font-style : italic ; }

C、p {font-family : 20px; font-size: 800; font-weight:宋体; color:red;font-style : italic ; }

D、p {font-family : 800; font-size: 20px; font-weight : red; color: italic;font-style :宋体;}

25.下列代表无序清单的标签是（）

A、<ul> …<li> …</ul>

C、<hl> …<li> …</hl>

B、<ol>…<li> …</ol>

D、< li > …< ol > …</ li >

26.定义表单所用的标签是（）

A、table

B、form

C、select

D、input

27.要实现表单元素中的复选框， input 标签的 type 属性应设为（ b）

A、radio

B、checkbox

C、select

D、text

28.若要在网页中插入样式表 main.css, 以下用法中正确的是（）。

A、<Link Src= " main.css " type=text/css rel=stylesheet>

B、<Link href= " main.css " type=text/css rel=stylesheet> rel属性值必须写

C、<Link href= " main.css " type=text/css>

D、<Include href= " main.css " type=text/css rel=stylesheet>

29.网页中的空格在 html 代码里表示为（）.

A、&

B、 

C、"

D、<

30.以下哪个不属于图像文件的格式？（）。

A、GIF格式

B、JPEG格式

C、PDF格式

D、PNG格式

问答题

简述HTML文件命名规则。

文档的扩展名为htm或者html，建议统一用html。
文档名称只可由英文字母、数字或下划线组成，建议以字母或下划线开始。
文档名称中不能包含特殊符号，如空格、$、&等。
文档名称区分大小写，特别在Unix、Linux系统中大小写表示的文件是不同的。
Web服务器主页一般命名为index.html或default.html。

JS命名规则

不可以使用关键字或保留字命名,不能超过255个字符
var break=10;// Unexpected token 'break'
不能使用纯数字命名
var 2000=10000;//Unexpected number
变量以字母,$,_ 为开头
命名尽量语义化
驼峰命名 headerWrap
以数据类型为开头 sText nPrice oHeader
区分大小写

Web前端技术的三大核心基础是哪些内容

HTML、CSS和JavaScript

常用的CSS选择器有哪些？

元素选择器
id选择器
类选择器
属性选择器

CSS 样式表分为几种?写出定义语法。

行内样式表，如<p style=”text-align:center;color:red;”>
内部样式表，如<style type=”text/css”>p{color:red;}</style>
导入样式表，如@import url(“css1.css”)
链接样式表，如<link rel=”stylesheet” type=”text/css” href=”123456.css/>

CSS样式表有哪几种类型？它们的层叠优先级关系是？

外部样式表、内部样式表和内联样式表。

优先级由低到高分别为：外部样式表-->内部样式表-->内联样式表

如何使用CSS设置元素的层叠效果？

使用属性z-index可以为元素规定层次顺序，其属性值为整数，并且该数值越大将叠放在越靠上的位置

元素可以向哪些方向进行浮动？如何清除浮动效果？

在CSS中float属性可以用于令元素向左或向右浮动。

常用clear:both来清除之前元素的浮动效果。

在JavaScript中有哪些常用的循环语句？

for循环
for-in循环
while循环
do-while循环

可在拖放过程中被传递的常见数据类型有哪些？

纯文本类型：text/plain
超链接类型：text/uri-list
HTML代码类型：text/html

写出 JavaScript常用的消息对话框名称及使用方法?

警示对话框的关键字是alert，因为它本质上是JAVAScript内置函数，所以在应用时直接输入alert( )即可。

alert()对话框的功能是直接在页面上以对话框的形式输出字符串或者输出变量的值。

alert()对话框在输出时除显示输出的内容外，对话框中还有一个“确定”按钮，当单击这个“确定”按钮后，会关闭对话框。

括号内字符串和变量用+连接。

确认对话框的关键字是confirm，同alert()对话框一样，在本质上也是JavaScript内置函数，所以在应用时直接输入confirm()即可。

confirm()对话框的功能同alert()对话框功能十分相似，不同之处是confirm对话框有“确认”“取消”两个按钮。并且在单击“确定”按钮后会返回布尔值true，单击“取消”按钮将返回布尔值false。

提示对话框的关键字是prompt，同alert()、confirm()对话框一样，在应用时直接输入prompt( )即可。

prompt()对话框不但提供带有“确定”“取消”两个按钮，而且还提供一个用户可以用键盘输入的文本框，通过这个文本框可以实现系统与用户的交互功能。

prompt()提示对话框是一个具有人机交互功能的消息对话框。

写出定义表格的所有标记,并说明它们的作用。

写出<font>标签常用的属性名，并举例说明。

face:指定字体，如”宋体，隶书，…，仿宋”等；
size:字体大小，取值为1-7，可以是+数，表示比原来字再大些；也可以是-数，表示比原来字再小些；
color:表示字体的颜色，如红色“red”

例如: <font face="黑体,宋体" size="+4" color="red" >Web前端开发技术</font>

按要求写出id为“div_top”的样式表。（上下边距:20px，左边距:30px，右边距40px;宽度:200px，高度:150px。）上右下左

#div_top{ Margin:20px 40px 20px 30px; Width:200px; Height:150px; }

按要求写出：字体间距为0.5倍间距、水平左对齐、垂直顶端对齐、有下划线

p{text-decoration：underline；letter-spacing：0.5em；vertical-align：top；text-align：left； }

在JavaScript代码引入到 html 中有哪些方式?请简单介绍。/js的引入方式。

第一种：外部引入：

第二种：内部引入：

第三种：行内引入：

如何创建与调用自定义名称的JavaScript函数？

使用关键词function来创建自定义函数，例如：

function welcome(){

alert("Welcome to JavaScript World");

}

函数可以通过使用函数名称的方法进行调用，例如welcome()

如何使用JavaScript对浮点数进行四舍五入获取最接近的整数值？

Math.round()

如何使用JavaScript查找第一个出现的段落元素<p>？

使用var p = document.getElementsByTagName(“p”)方法先获取全部的段落元素<p>，其中第一个出现的段落元素<p>就是p[0]

构成 CSS 盒模型的属性有哪些?

Content:盒模型里的内容，即元素的内容
Padding：内边距，也称填充，指内容与边框的间距
Border：边框，指盒子本身
Margin;外边距，指与其他盒模型的距离，外边距默认是透明的，因此不会遮挡其他后面的任何元素

请分别说出下列内容中变量x运算结果。

var x = 9+9; (2)var x = 9+"9"; (3)var x ="9"+"9";

18 99 99

看以下JavaScript程序

var str1,str2,str3,str4;

str1="10.5";

str2="8";

str3=str1+str2;

alert(str3);

str4=Number(str1)+Number(str2);

alert(str4);

运行以上程序后，弹出的对话框依次输出的值为10.58和18.5.

看以下JavaScript程序

var x=prompt(“请输入1-5的数字！”,“”);

switch (x)

case “1”:alert(“one”);

case “2”:alert(“two”);

case “3”:alert(“three”);

case “4”:alert(“four”);

case “5”:alert(“five”);

default:alert(“none”);

运行以上程序，在提示对话框中输入“4”，依次弹出的对话框将输出:four,five,none

看以下JavaScript程序

var x,y;

x=10；

y=x++；

运行以上程序后，变量y的值为10

用JavaScript实现打开一个新窗口，地址为abc.html,正确的方法是window.open(“abc.html”，“”，“”)

写出HTML、CSS、JavaScript三大部分程序注释的方法。

HTML注释方法两种： <!—注释1-->

CSS中注释可以用“ /* 这是样式表注释 */”
JavaScript中可以用两种：//单行注解

/*多行注释

location对象中可实现重新链接到其他网址的属性或方法

href属性
replace（）

如何将指定元素设置为允许放置元素的目标区域？

作为可放置区域的元素必须带有ondragover事件

在进行本地文件的拖放时，DataTransfer对象中的哪个属性可以用于获取文件列表？

放置文件时使用DataTransfer对象的files属性可获取文件列表，里面包含所有文件。

按钮标签<button>有哪些类型？分别表示什么含义？

有三种类型，分别是提交（submit）、重置（reset）或无动作按钮（button）类型。

提交（submit）用于提交表单数据；重置（reset）用于重置表单填写的内容；无动作按钮（button）本身没有任何动作，需要配合JavaScript代码使用。

<form>标签的method属性可以取哪些属性值？分别表示什么含义？

表单的method属性用于规定了发送表单数据的两种HTTP方法：GET和POST方法。其中表单标签默认的提交方式为GET方法

GET方法：提交表单数据时，GET方法会将表单组件的数据名称和值转换为文本形式的参数并直接加原URL地址后面，点击提交按钮后可以直接从浏览器地址栏看到全部内容。这种方式适用于传递一些安全级别要求不高的数据，并且有传输大小限制，每次不能超过2KB。

POST方法：这种方法传递的表单数据会放在HTML的表头中，不会出现在浏览器地址栏里，用户无法直接看到参数内容，适用于安全级别相对较高的数据。并且对于客户端而言没有传递数据的容量限制，完全取决于服务器的限制要求，总体来说传输的数据量比GET方法大。

history对象中能实现网页后退效果的方法

back（）
go（-1）

//history.forward()是前进

HTML5中列表标签有哪些，它们之间有什么区别（列表标签的类型

包括有序标签，无序标签和定义列表标签三种。

有序列表标签<ol>和</ol>用于定义带有编号的有序列表;
无序列表标签<ul>和</ul>用于定义不带编号的无序列表;
定义列表标签<dl></dl>是用于进行词条定义的特殊列表，每条表项需要结合词条标签<dt>和定义标签<dd>一起使用。

CSS背景图像的平铺方式

当值为“repeat”时可完全平铺背景（默认），
为“repeat-x”时可横向/水平平铺，
为“repeat-y”时可纵向/垂直平铺，
为“no-repeat”时不平铺（图像将仅显示一次）。

如何使用CSS为列表选项设置自定义标志图标？

list-style-image: url(图标文件的URL)

如何使用CSS实现表格为单线条框样式？

border-collapse: collapse

简述html文档基本结构

一个完整的HTML文件包含头部和主体两个部分的内容,在头部内容里,可定义标题、样式等，文档的主体内容就是要显示的信息。

<html>标记通常会作为HTML文档的于千始代码,出现在文档的第一句，而</html>标记通常作为HTML文档的结束代码,出现在文档的尾部,其他的所有的HTML代码都位于这两个标记之间,该标记用于告知浏览器或其他程序,这是一个Web文档,应该按照HTML语言规则对文档内容的标记进行解释：

<head>.../head>是HTML文档的头部标记;

<body>.../body>标记之间的文本是在浏览器中要显示的页面内容。

5.常用浏览器 5个

IE浏览器（Internet explorer）
Safari浏览器；
Firefox浏览器；
Opera浏览器；
Chrome浏览器；
360浏览器。

HTML5新增文档结构标签

<section>节标签，定义节段落
<article>文章，定义正文内容
<nav>导航标签，定义导航栏标签
<aside>侧栏，定义网页正文两侧的侧栏内容
<header>页眉标签，定义整个网页文档或其中一个节的标题
<footer>页脚，定义整个网页文档或其中一个

HTML5新增的格式标签有哪些？

<mark>记号标签
<progress>进度标签
<meter>度量标签

HTML5表单新增multiple属性可以用于何种类型的<input>标签？

该属性只适用于2种类型的<input>标签：email（电子邮箱）和file（上传文件控件）

HTML5表单新增width和height属性可以用于何种类型的<input>标签？

width和height属性只能用于类型为image的<input>标签。

如何使用HTML5表单新增pattern属性限制用户只允许输入6位阿拉伯数字？

关于正则表达式有多种用法，这里选择其中一种参考答案列举如下：

CSS颜色值表达方式

使用RGB颜色的方式：例如rgb(0,0,0)表示黑色、rgb(255,255,255)表示白色等；
RGB的十六进制表示法：例如#000000表示黑色、#FFFFFF表示白色等；
直接使用英文单词名称：例如red表示红色、blue表示蓝色等。

说明JavaScript中“==”和“===”的区别

==用于一般比较，在比较的时候可以转换成数据类型
===用于严格比较，只要类型不匹配就返回flase

例如：

要在网页中加入音乐或背景音乐，哪些标签可以实现

- 1、使用“<audio src="音频文件路径"></audio>”
- 2、使用“<embed src="音频文件路径"/>”
- 3、使用“<object data="音频文件路径"/>”
- 4、使用<bgsound src="bjyy.mp3" loop=-1 >

判断题

网站中的网页是逻辑相关的,可以通过超链接的方式被组织在一起。 T
如果希望字体加粗,使用标签<b>或者<strong>都可以做到。 T
在JavaScript中假如有var x= 0.999;且vary= x.toFixed(2);那么y的值是1
己知var x1="test", x2="TEST";那么x1>x2的J返回值是true.
在JavaScript中,有效变量的命名规范是必须以字母开头,其他位置上可以是数字、字母、美元符号或下画线。 F
web系统前端是指系统中用户接触到的部分。 T
所有HTML标签都有开始标签和结束标签构成。 F
网页对应着的源文件包含一些代码,而浏览器可以解析这些代码,呈现出来。 T
只有文字可以进行超链接的设置,而图片不可以。 F
HTML不区分大小写。 T
CSS样式的选择器可以是标签的名字。 T
有了CSS样式,就可以做到使内容与样式分离,便于分别修改。 T
文字、图片div区域水平居中，都可以使用text-align：center进行设置。 T
CSS行内样式添加的时候,采用的是style标签进行添加 F
<span>和<div>都是块级元素。 F

常见块级元素: div、form、footer、h1-h6、ol、ul、p、video

设置 display 属性为 display: block 可将元素转换为块级元素

常见行内元素: span、label、a、em、strong、img

设置 display 属性为 display: inline 可将元素转换为行内元素

常见行内块级元素: button、input、textarea、select

设置 display 属性为 display: inline-block 可将元素设置为行内块级元素

在JavaScript中可以使用双斜杠//表示多行注释，将其写在代码块的首尾处即可。F
table标签的border属性,默认可以看到两层边框线。 T
在CSS样式中text-align可以用于对齐文本,如果希望文本内容居中显示，则text-align的属性值是middle。 F

vertical-align:middle 只适用于内联元素的垂直居中（在需垂直居中的元素中设置）

text-align:center 用于设置文本或img标签等一些内联对象（或与之类似的元素）的水平居中（在容器盒子中设置）。

margin:0 auto 设置块元素（或与之类似的元素）的居中。

用于定位背景图像的属性background-positio1:left top还可以写成background-position:100%0%表达同样的含义。 F

background-position:100%0%是右上

块状元素在网页中就是以块的形式显示，所谓块状就是元素显示为矩形区域,常用的块状元素包括div,h1-h6,p,ul。 T
网页就是一个链接的集合 T
将网页上传到 Internet 时通常采用 FTP 方式 T
在CSS样式中,z-index属性值为999的元素在z-index属值为100的元素下方。
在CSS样式中,margin:20px 30px表示左右外边距为20px、上下外边距为30px。 F

margin-left:10px; 左外边距

margin-right:10px; 右外边距

margin-top:10px; 上外边距

margin-bottom:10px; 下外边距

margin:10px; 四边统一外边距

margin:10px 20px; 上下、左右外边距

margin:10px 20px 30px; 上、左右、下外边距

margin:10px 20px 30px 40px; 上、右、下、左外边距

在HTML5页面以使用<script>首尾标签嵌套来嵌入JavaScript代码
在HTML5页面也可以使用<script src="js文件url地址"></script>的形式来引用外部JavaScript文件,引用语句必须放在<head>首尾标签中
在JavaScript中,var x=3e2;等同于var x3*3;
可以使用<br>或者 来表示换行。 F
HTML是超文本标记语言,是制作网页的标准语言。 T
CSS负责网页的结构，JavaScript负责网页的行为,也就是跟用户的一些交互。 F
网页源文件本身的编码方式与浏览器解读的编码方式如果不同,就会出现乱码。 T
HTML的标签一定是成对出现的,否则无法完成嵌套关系 F
设置围绕表格的边框宽度的HTML代码是:<table border="">。 F

〈table border=#〉

a:link表示超链接文字在鼠标按下时的状态。 F

a:link，定义正常链接的样式

a:visited，定义已访问过链接的样式

a:hover，定义鼠标悬浮在链接上时的样式

a:active，定义鼠标点击链接时的样式

鼠标移过事件：onmouseout

鼠标移出事件：onmouseover

当输入焦点转移到 input 输入框时，将触发对象的 onFocus 事件

当输入焦点移出 input 输入框时，将触发对象的 onBlur 事件

在JavaScript中,var x =.12;的写法是正确的,它等同于var x=0.12;
浏览器默认的字体大小是16px，因此在用户未作更改的情况下1em=16px。
var x=99;x= null;x的类型为Null。
margin:0 5px可以设置网页中某个标签的左边界为5px。 T

标签的左边界为5px

margin:0 5px

margin:0 0 0 5px;

层定位通过position属性来设定。 T
在.html文件中应用abc.css文件中的样式的方法为<link href="abc.css"rel="stylesheet">。
var x1=3e9000; var x2=9e3000; alert(x1==x2)；弹窗的显示结果为false
盒子模型中的盒子是可以逐层嵌套的 T
GIF 格式的图象最多可以显示 256 种颜色 T
HTML 表格在默认情况下有边框 F
创建图象映射时，理论上可以指定任何形状作为热点 T
指定滚动字幕时，不允许其中嵌入图象 F
使用 FONT 标记符的 size 属性可以指定字体的大小 T
制作图像映射只需要使用 <AREA> 标记符 F

<MAP>和</MAP>之间添加映射区域，添加映射区域时使用<AREA>标记符

HTML表格中,表格的列数等于第一行中 TH 与 TD 的 colspan 属性的和 F
在HTML表格中,在TR、TD 或 TH 标记符中使用 align 属性可以控制单元格内容的垂直对齐 T
框架是一种能在同一个浏览器窗口中显示多个网页的技术 T
CSS 样式表项的组成格式为：selector{property1:value1, property2:value2, ……} F
默认情况下, h1标签的文字字号，要远小于h6标签。 F
用 H1 标记符修饰的文字通常比用 H6 标记符修饰的要小 F
HTML的注释语句格式为:/* */ F
<span>和<div>都是块级元素。 F
a:hover表示超链接文字在鼠标放上去时的状态。 T
盒子模型中,边框的属性是可以分为4个方向分别设置的。 T
定义列表标签<dl>可以结合词条标签<dt>和定义标签dd>一起使用。
position:属性设定，表示定位的参照物是哪个元素;而定位位置则由top,bottom,left,right的取值决定。 T
利用float属性将3个div盒子水平排列，可以将3个盒子都设置float:right。 T
CSS中在有多个属性时，用“;”进行区分
所有underfined类型的输出值都是underfined
在JavaScript中，var x = 12 ;的写法是正确的，它等同于var x = 0.12
在HTML DOM元素对象的方法removeAttribute()不能移除其属性值
在HTML5页面可以使用<script>首尾标签嵌套来嵌入JavaScript代码
A标签可以跳动到外部站点的所有页面，例如跳转到新浪网首页，可以写代码：<a href=’www.sina.com.cn’>新浪首页</a>
浮动定位通过float属性设置来实现
超链接标签<a>的target属性值为_blank时表示从新窗口打开连接内容
在CSS样式中padding用于设置元素的内边距，margin用于设置元素的边距
有序列表<ol>默认的起始数字是0
向HTML文档中插入javascript脚本时的标记是<script language=”javascript”><!--……--</script> T
语句 <FONT size="+2">这里是 2 号字</FONT> 将使文字以 2 号字显示 F
在创建列表时，LI 标记符的结束标记符不可省略 F
创建一个左右框架，右边框架宽度是左边框架的3倍，语句是<FRAMESET rows="*, 3*">T
在 IMG 标记符中使用 align 属性，可以控制图象与文字的环绕效果 T

编程题

用js计算正方形的面积

<html>

<head>

function area(radius) {

var radius = document.getElementById("radius").value;//获取正方形的边长

var area = Math.pow(radius, 2);//计算正方形的面积

return area;

}

function show() {

//输出正方形的面积

document.getElementById("area").value = area(radius);

}

</script>

</head>

<body>

<h2>计算正方形的面积</h2>

正方形的边长：<input type="text" id="radius" /><br>

正方形的面积：<input type="text" readonly="readonly" id="area" /><br>

</form>

</body>

</html>

1.使用JavaScript脚本在页面上输出一个用#填充的正方形，要求如下。

（1）使用prompt()方法，让用户输入正方形的行数。

（2）无论输入的正方形行数是否大于10，输出的正方形最多为10行。

页面效果如图所示:

<html>

<head>

</head>

<body>

var n = prompt("请输入正方形的行数：", "");

for (var i = 0; i <= n - 1; i++) {

for (var j = 0; j <= n - 1; j++) {

if (n > 10) {

n = 10

document.write("  #  ");

} else {

document.write("  #  ");

}

document.write("<br/>");

}

</script>

</body>

</html>

请设计一个内部超链接,显示的效果如下图所示。点击目录中的章节,就会跳转到内容章节。

<html>

<head>

<title>内部超链接的应用</title>

</head>

<body>

<h3>内部超链接的应用</h3>

<hr>

<p>

<ul>

</ul>

</p>

<hr>

<p>CSS基础</p>

</body>

</html>

请使用JavaScript语句设计代码实现弹出框效果，并且显示今天是星期几。其中请使用getDay()方法获取当前的日期

<html>

<head>

var a = new Array("日", "一", "二", "三", "四", "五", "六");

var week = new Date().getDay();

var str = "今天是星期" + a[week] +"。";

alert(str);

</script>

</head>

<body>

</body>

</html>

用Switch语句判断今天是星期几

<html>

<head>

<title>JavaScript switch语句的简单应用</title>

</head>

<body>

<h3>JavaScript switch语句的简单应用</h3>

<hr />

<p>

使用switch语句判断今天是星期几。

</p>

//获取当前日期时间对象

var date = new Date();

//获取当前是一周中的第几天（0-6）

var day = date.getDay();

//使用switch语句判断星期几

switch (day) {

case 1: alert("今天是星期一。"); break;

case 2: alert("今天是星期二。"); break;

case 3: alert("今天是星期三。"); break;

case 4: alert("今天是星期四。"); break;

case 5: alert("今天是星期五。"); break;

case 6: alert("今天是星期六。"); break;

case 0: alert("今天是星期日。"); break;

}

</script>

</body>

</html>

用if-else语句判断今天星期几

<html>

<head>

<title>JavaScript if-else语句的简单应用</title>

</head>

<body>

<h3>JavaScript if-else语句的简单应用</h3>

<hr />

<p>

使用if-else if-else语句判断今天是星期几。

</p>

//获取当前日期时间对象

var date = new Date();

//获取当前是一周中的第几天（0-6）

var day = date.getDay();

//使用if语句判断星期几

if (day == 1) {

alert("今天是星期一。");

} else if (day == 2) {

alert("今天是星期二。");

} else if (day == 3) {

alert("今天是星期三。");

} else if (day == 4) {

alert("今天是星期四。");

} else if (day == 5) {

alert("今天是星期五。");

} else if (day == 6) {

alert("今天是星期六。");

} else if (day == 0) {

alert("今天是星期日。");

}

</script>

</body>

</html>

11.请编写代码实现按钮点击效果，例如今天是星期五，通过点击按钮显示如下。

<body>

function myFunction() {

var d = new Date();

var weekday = new Array();

weekday[0] = "星期天";

weekday[1] = "星期一";

weekday[2] = "星期二";

weekday[3] = "星期三";

weekday[4] = "星期四";

weekday[5] = "星期五";

weekday[6] = "星期六";

document.getElementById("demo").innerHTML = "今天是" + weekday[d.getDay()];

}

</script>

</body>

3.用switch函数编写JavaScript代码显示今天的星期名称。请注意使用Sunday=0, Monday=1, Tuesday=2, 等等。

var day = new Date().getDay();

switch (day) {

case 0:

x = "Today it's Sunday";

break;

case 1:

x = "Today it's Monday";

break;

case 2:

x = "Today it's Tuesday";

break;

case 3:

x = "Today it's Wednesday";

break;

case 4:

x = "Today it's Thursday";

break;

case 5:

x = "Today it's Friday";

break;

case 6:

x = "Today it's Saturday";

break;

}

4.编写JavaScript在页面上弹出提示，根据每个用户输入的星期一至星期日的不同，弹出不同的信息。要求如下。

输入星期一时弹出“新的一周开始了”

输入星期二，星期三，星期四时弹出“努力学习吧！！”

输入星期五时弹出“明天就是周末了”

输入其他内容时弹出“放松休息”

var n = window.prompt("请输入今天是星期几：");

switch (n) {

case "星期一": window.alert("新的一周开始了"); break;

case "星期二": window.alert("努力学习吧！！"); break;

case "星期三": window.alert("努力学习吧！！"); break;

case "星期四": window.alert("努力学习吧！！"); break;

case "星期五": window.alert("明天就是周末了"); break;

case "星期六": window.alert("放松休息"); break;

case "星期日": window.alert("放松休息"); break;

default: window.alert("输入的星期有误！"); break;

}

请设计代码实现如下效果。其中黄色的框为p元素，宽度和高度为100px，五角星图标的路径为“image/star.jpg”

<html>

<head>

<title>HTML5拖放API之自定义拖曳图标</title>

<style>

p {

width: 100px; /*设置段落元素宽100像素*/

height: 100px; /*设置段落元素高100像素*/

background-color: yellow; /*设置段落元素背景色为黄色*/

}

</style>

</head>

<body>

<h3>HTML5拖放API之自定义拖曳图标</h3>

<hr />

<p draggable="true" οndragstart="drag(event)">这是一个可拖放的段落元素。</p>

function drag(ev) {

var img = new Image();

img.src = "image/star.jpg";

ev.dataTransfer.setDragImage(img, 5, 5);

}

</script>

</body>

</html>

JS求出100-999之间的水仙花数（一行显示三个）

<html>

<head>

<title>Document</title>

</head>

<body>

var j = 0

for (let i = 100; i < 1000; i++) {

let ge = parseInt(i % 10);

let shi = parseInt((i / 10) % 10);

let bai = parseInt(i / 100);

if (i == ge * ge * ge + shi * shi * shi + bai * bai * bai) {

document.write(i + ' ');

j++;

if (j % 3 == 0) {

document.write('<br/>');

}

</script>

</body>

</html>

HTML显示3行3列的表格

<html>

<head>

<title>表格标签的综合应用</title>

</head>

<body>

<h3>表格标签的综合应用</h3>

<hr />

成绩一览表

</caption>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

隐藏单元格边框效果

<html>

<head>

<title>隐藏空单元格的边框效果</title>

<style>

table {

empty-cells: hide;

}

</style>

</head>

<body>

<caption>隐藏空单元格的边框效果</caption>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

</body>

</html>

问卷表格

<html>

<head>

<title>Document</title>

</head>

<body>

<p>

问卷调查：您是通过何种方式了解XX产品？

</p>

<form>

<!-- <p>

问卷调查：您是通过何种方式了解XX产品？

</p> -->

<input type="checkbox" name="1">朋友宣传

<br>

<input type="checkbox" name="1">朋友宣传

<br>

<input type="checkbox" name="2">朋友宣传

<br>

<input type="checkbox" name="1">朋友宣传

<br>

</form>

</body>

</html>

2.在页面上编程输出0~100之间的所有素数，并要求每行显示5个素数。（素数一般指质数。质数是指在大于1的自然数中，除了1和它本身以外不再有其他因数的自然数）

<html>

<head>

</head>

<body>

document.write('<table><tr>');

var num = 0;

for (var i = 2, flag; i <= 100; i++) {

flag = false;

for (var j = 2; j < i; j++) {

if (i % j === 0) {

flag = true;

break;

}

if (!flag) {

if (num != 0 && num % 5 == 0) {

document.write('</tr><tr>')

}

num++;

document.write('<td>' + i + '</td>');

}

document.write('</table>');

</script>

</body>

</html>

6.请用JavaScript实现下面九九乘法表的效果。

<html>

<head>

<title>Document</title>

for (var i = 1; i <= 9; i++) {

for (var j = 1; j <= i; j++) {

document.write(j + "x" + i + "=" + j * i, "  ")

}

document.write("<br>")

}

</script>

</head>

<body>

</body>

</html>

7.编写JavaScript代码，实现交换两个变量的值。

//定义两个变量num1,num2，分别赋值5，6

var num1 = 5, num2 = 6;

//在定义一个临时变量tmp

var tmp;

//将num1的值赋值给tmp

tmp = num1;

//num2的值赋值给num1

num1 = num2;

//tmp的值赋值给num2

num2 = tmp;

//打印输出

console.log(num1, num2);

8.使用JavaScript，实现 fizzBuzz 函数，参数 num 与返回值的关系如下：

如果 num 能同时被 3 和 5 整除，返回字符串 fizzbuzz

如果 num 能被 3 整除，返回字符串 fizz

如果 num 能被 5 整除，返回字符串 buzz

如果参数为空或者不是 Number 类型，返回 false

其余情况，返回参数 num

function fizzBuzz(num) {

if (num % 3 === 0 && num % 5 === 0) {

return 'fizzbuzz';

} else if (num % 3 === 0) {

return 'fizz';

} else if (num % 5 === 0) {

return 'buzz';

} else if (num === null | typeof (num) != 'number') {

return false;

} else {

return num;

}

10.编写一个函数 Min(x.y)，求出x.y两个数中的最小值，要求x,y的值由用户通过提示对话框输入。

var x = prompt('输入数x');

var y = prompt('输入数y');

function min(x, y) {

if (x < y) {

console.log('最小值为' + x);

}

else if (x > y) {

console.log('最小值为' + y);

}

min(x, y);

</script>

华为云开发者联盟

为开发者提供学习成长、分享交流、生态实践、资源工具等服务，帮助开发者快速成长。

更多推荐

openEuler系统通过shell脚本安装openGauss 5.0.0企业版

华为云开发者联盟

一文了解npm install -g和npm install --save-dev的关系

华为云开发者联盟

【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit（2）

华为云开发者联盟

所有评论(0)

查看更多评论

与风也错过

@xty123abc

已为社区贡献1条内容