Web前端开发案例教程习题和答案-Linux大棚

admin 管理员组

文章数量: 1184232

2024年3月1日发(作者：织梦如何用)

Web前端开发案例教程习题和答案

注：选择题标记红色者为答案，判断题红色者为错误。

第1章习题

1.下列选项中,对HTML5新功能和新特性支持最好的浏览器是？

A）IE浏览器B）火狐浏览器C）Google浏览器D）Opera浏览器

2.下面的应用软件,不可以用于网页制作开发的是？

A）Editplus B）HbilderC）Dreamweaver D）3Dmax

5增加了很多新功能和新特性,下列不属于HTML5优势的是?

A）解决了跨浏览器问题B）新增了多个新特性

C）用户优先的原则D）可以创建动态网站

的中文含义是？

A）文件传输协议B）超文本传输协议

C）超文本标记语言D）统一资源定位符

5. HTTP的中文含义是？

A）文件传输协议B）超文本传输协议

C）超文本标记语言D）统一资源定位符

第2章习题

一、选择题

1．网页的主体内容写在（）标记内部。

A）〈body〉 B）〈head〉 C）〈p〉 D）〈html〉

2．以下标记符中，用于设置页面标题的是（）。

A） B）<caption> C）<head> D）<html> </p><p style="text-indent: 2em;";>3． HTML 指的是？( ) </p><p style="text-indent: 2em;";> A）超文本标记语言（Hyper Text Markup Language） </p><p style="text-indent: 2em;";>B）家庭工具标记语言（Home Tool Markup Language） </p><p style="text-indent: 2em;";> C）超链接和文本标记语言（Hyperlinks and Text Markup Language） </p><p style="text-indent: 2em;";>D）样式表（CSS）和JavaScript语言 </p><p style="text-indent: 2em;";>4．用 HTML标记语言编写一个简单的网页，网页最基本的结构是（）。 </p><p style="text-indent: 2em;";> A）<html><head>…</head><frame>…</frame></html> </p><p style="text-indent: 2em;";>B）<html><title>……

C）……

D）……

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

A）asp B）html C）php D）jsp

6．以下标记符中，没有对应的结束标记的是（）。

A） B）

C） D） </p><p style="text-indent: 2em;";>1 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>7．〈title〉〈/title〉标记必须包含在（）标记中。 </p><p style="text-indent: 2em;";> A）〈body〉〈/body〉 B）〈table〉〈/table〉 C）〈head〉〈/head〉 D）〈p〉</p〉 </p><p style="text-indent: 2em;";>8．为了标识一个HTML文件应该使用的HTML标记是（）。 </p><p style="text-indent: 2em;";> A）<p></p> B）<boby></body> C）<html></html> D）<table></table> </p><p style="text-indent: 2em;";>9．请选择产生粗体字的 HTML 标记（）。 </p><p style="text-indent: 2em;";> A）<bold> B）<bb> C）<strong> D）<bld> </p><p style="text-indent: 2em;";>10．在下列 HTML标记中，哪个可以插入换行？（）。 </p><p style="text-indent: 2em;";> A）</p><p style="text-indent: 2em;";> B）<enter> C）<break> D）<b> </p><p style="text-indent: 2em;";>11．在下列的 HTML标记中，哪个是最大的标题？（）。 </p><p style="text-indent: 2em;";> A）<h6> B）<h5> C）<h2> D）<h1> </p><p style="text-indent: 2em;";>12．用于标识一个段落的HTML标记是（）。 </p><p style="text-indent: 2em;";> A）〈b〉〈/b〉 B）〈br〉〈/br〉 C）〈p〉〈/p〉 D）〈li〉〈/li〉 </p><p style="text-indent: 2em;";>13．在下列的 HTML 中，哪个可以插入图像？（） </p><p style="text-indent: 2em;";> A） B）<image src=""> </p><p style="text-indent: 2em;";> C） D）<img></img> </p><p style="text-indent: 2em;";>14．将链接的目标文件载入该链接所在的同框架或窗口中,链接的“目标”属性应设置成（）。 </p><p style="text-indent: 2em;";> A）_blank B）_parent C）_self D）_top </p><p style="text-indent: 2em;";>15．建立超链接时，要在新窗口显示网页，需要加入的标记属性为（）。 </p><p style="text-indent: 2em;";> A）target="_blank" B）border="1" C）name="target" D）# </p><p style="text-indent: 2em;";>16．包含有图像的网页文件，其扩展名应该是（）。 </p><p style="text-indent: 2em;";> A）.jpg B）.gif C）.pic D）.htm或.html </p><p style="text-indent: 2em;";>17．最常用的网页图像格式有（）和（）。 </p><p style="text-indent: 2em;";> A）gif，tiff B）tiff，jpg C）gif，jpg D）tiff，png </p><p style="text-indent: 2em;";>18．在网页中，必须使用（）标记来完成超级链接。 </p><p style="text-indent: 2em;";> A）<a>…</a> B）<p>…</p> C）<link>…</link> D）<li>…</li> </p><p style="text-indent: 2em;";>20．在定义列表中,用于对名词进行解释和描述的标记是( ) </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>( )。 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>A）<!doctype> B）<head></head> C）<title> D）

A） f9 B） f10 C） f12 D） ctrl+f12

25．在Dreamweaer中,使用主浏览器预览网页的快捷键是( )。

A）

B）

C）

D）

A）

列表项1
列表项2

B）

列表项1

列表项2

C）

......

D）

……

A）

列表项1
列表项2

B）

列表项1
列表项2

C）

......

D）

……

A） B）<base> C）<head>D）<meta> </p><p style="text-indent: 2em;";>21．下列选项中,定义无序列表的基本语法格式正确的是( ) </p><p style="text-indent: 2em;";>22．下列选项中,属于定义有序列表的基本语法格式的是( ) </p><p style="text-indent: 2em;";>23．在HTML中,用于设置页面元信息的标记是( ) </p><p style="text-indent: 2em;";>24．位于HTML5文档的最前面,用于向浏览器说明当前文档使用哪种 HTML 或 XHTML 标准规范的标记是</p><p style="text-indent: 2em;";>26．在网页中插入图像,若图像文件位于html文件的上两级文件夹,则在文件名之前加入( ) </p><p style="text-indent: 2em;";> A） ../ B） / C） ./ D） ../../ </p><p style="text-indent: 2em;";>二、判断题 </p><p style="text-indent: 2em;";>1．网页文件是用一种标签语言书写的，这种语言称为HTML（Hyper Text Markup Language，超文本标记语言），制作一个网站就等于制作一个网页。（） </p><p style="text-indent: 2em;";>2．网站的首页文件通常是“，，，”，它必须存放在网站的根目录中。（） </p><p style="text-indent: 2em;";>3．HTML5采用宽松的语法格式,标签可以不区分大小写。（） </p><p style="text-indent: 2em;";>4．如果文本中需要换行，可以使用换行标记</p><p style="text-indent: 2em;";>。（） </p><p style="text-indent: 2em;";>5．<hr>标记可以在网页中生成一条水平分隔线，它不需要结束标记。（） </p><p style="text-indent: 2em;";>6．标题标记h1~h 6都有换行的功能。（） </p><p style="text-indent: 2em;";>7．JPEG格式能提供良好的损失极少的压缩比，这种格式可以做成透明和多帧的动画。（） </p><p style="text-indent: 2em;";>8．在HTML中使用注释标记时,注释内容不会显示在浏览器窗口中。（） </p><p style="text-indent: 2em;";>9．一个HTML5文档可以含有多对<head>标记。（） </p><p style="text-indent: 2em;";>10．在HTML5标记中,属性之间不分先后顺序,标记名与属性、属性与属性之间均以逗号分开。（） </p><p style="text-indent: 2em;";>11.在HTML标记中,<h1>标记属于双标记。（） </p><p style="text-indent: 2em;";>12.在HTML页面中,带有“<>”符号的元素被称为HTML标记。（） </p><p style="text-indent: 2em;";>13.图像文件和html文件位于同一文件夹,相对地址为。（） </p><p style="text-indent: 2em;";>14.浏览器中显示的所有文本、图像、音频和视频等信息都必须位于<body>标记内。( ) </p><p style="text-indent: 2em;";>15.<hr>为单标记,用于定义一条水平线。（） </p><p style="text-indent: 2em;";>16.注释标记的基本语法是。（） </p><p style="text-indent: 2em;";>17.在图像常用格式中,PNG不但支持动画,还支持透明。（） </p><p style="text-indent: 2em;";>18.一个HTML5文档只能含有一对<body>标记,且<body>标记必须在<html>标记内。（） </p><p style="text-indent: 2em;";>19.在超链接中,当target取值为“_self”,意为在原窗口中打开链接页面。（） </p><p style="text-indent: 2em;";>20.<!DOCTYPE>标记和浏览器的兼容性无关,为了代码简洁,可以删掉。（） </p><p style="text-indent: 2em;";>21．开头处可以不使用<!DOCTYPE>标记为所有的HTML5文档指定HTML版本和类型。（） </p><p style="text-indent: 2em;";>22.在HTML5语法中,属性值不放在引号中也是正确的。（） </p><p style="text-indent: 2em;";>23.在HTML5中,标记可以拥有多个属性。（） </p><p style="text-indent: 2em;";>5采用比较宽松的语法格式,简化了代码,建议网站开发人员采用宽容的代码编写模式。（） </p><p style="text-indent: 2em;";>25.在HTML5页面中,<hr>为双标记,用于定义一条水平线。（） </p><p style="text-indent: 2em;";>26.在HTML5中,<p>标记中可以嵌套<p>标记。（） </p><p style="text-indent: 2em;";>27.<html>标记标志着HTML文档的开始,</html>标记标志着HTML文档的结束。（） </p><p style="text-indent: 2em;";>28.书写图片路径的时候,尽量使用绝对路径,因为可以更稳定简洁。（） </p><p style="text-indent: 2em;";>29.在网页中需要插入图片的相对路径中,“../”用于指定上一级文件夹。（） </p><p style="text-indent: 2em;";>30.在超链接中,如果暂时没有确定链接目标,通常将<a>标记的href属性值定义为“*”。（） </p><p style="text-indent: 2em;";>31.在HTML语言中,通过创建锚点链接,用户能够快速定位到目标内容。（） </p><p style="text-indent: 2em;";>32．在图像常用格式中,GIF只能处理256种颜色。（） </p><p style="text-indent: 2em;";>33.在标记的嵌套过程中,必须先结束最靠近内容的标记,再按照由内及外的顺序依次关闭标记。（） </p><p style="text-indent: 2em;";>图像格式是一种支持透明的图像格式。（） </p><p style="text-indent: 2em;";>35.如果不给标记设置宽和高,图片就会按照他的原始尺寸显示。（） </p><p style="text-indent: 2em;";>3 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>第3章习题 </p><p style="text-indent: 2em;";>一、选择题 </p><p style="text-indent: 2em;";>1． HTML5中的( )元素可以包含所有通常放在页面头部的内容。 </p><p style="text-indent: 2em;";> A）header B）nav C）aritcle D）section </p><p style="text-indent: 2em;";>2． HTML5中的（）元素用于页面的导航链接。 </p><p style="text-indent: 2em;";>A） header B）nav C）aritcle D）section </p><p style="text-indent: 2em;";>3 HTML5中（）元素经常被用于定义一篇日志、一条新闻或用户评论等。 </p><p style="text-indent: 2em;";> A）header B）nav C）aritcle D）section </p><p style="text-indent: 2em;";>4． HTML5中（）元素用来定义当前页面附属信息部分。 </p><p style="text-indent: 2em;";>A）header B）nav C）aside D）section </p><p style="text-indent: 2em;";>5．HTML5中（）元素用于对网站或应用程序中页面上的内容进行分块。 </p><p style="text-indent: 2em;";>A）header B）nav C）aside D）section </p><p style="text-indent: 2em;";>6．在 HTML5中，（）元素用于组合标题元素。 </p><p style="text-indent: 2em;";>A）meter B）nav C）aside D）hgroup </p><p style="text-indent: 2em;";>7．HTML5中，（）元素经常与details 元素配合使用，作为details 元素的第一个子元素。 </p><p style="text-indent: 2em;";>A）meter B）summary C）footer D）hgroup </p><p style="text-indent: 2em;";>8．HTML5中，（）元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。 </p><p style="text-indent: 2em;";>A）mark B）summary C）footer D）hgroup </p><p style="text-indent: 2em;";>9．HTML5中，（）元素用于表示指定范围内的数值, 如磁盘使用情况、查询结果、或投票比例等。 </p><p style="text-indent: 2em;";>A）meter B）progress C）footer D）hgroup </p><p style="text-indent: 2em;";>10. HTML5中，（）元素定义运行中的任务进度（进程）。 </p><p style="text-indent: 2em;";>A）meter B）progress C）footer D）hgroup </p><p style="text-indent: 2em;";>二、判断题 </p><p style="text-indent: 2em;";>1. 一个HTML页面中可以包含多个nav元素，作为页面整体或不同部分的导航。（） </p><p style="text-indent: 2em;";>2．HTML5中，article元素通常使用多个section元素进行划分。（） </p><p style="text-indent: 2em;";>3．HTML5中，一个页面中article元素只能出现一次。（） </p><p style="text-indent: 2em;";>4．HTML5中，没有标题的内容区块不要使用section元素定义。（） </p><p style="text-indent: 2em;";>5．HTML5中一个section元素通常由标题和内容组成。 </p><p style="text-indent: 2em;";>6．HTML5中，可以在article元素或者section元素中添加footer元素。（） </p><p style="text-indent: 2em;";>7．一个HTML5页面中可以包含多个footer元素。（） </p><p style="text-indent: 2em;";>8．HTML5中，一个figure元素内允许使用多个figcaption元素。（） </p><p style="text-indent: 2em;";>9．HTML5中，figcaption元素用于为figure元素组添加标题。（） </p><p style="text-indent: 2em;";>10．HTML5中，figure元素的内容应该与主内容相关，但如果被删除，也不会对文档流产生影响。（） </p><p style="text-indent: 2em;";>第4章习题 </p><p style="text-indent: 2em;";>一、选择题 </p><p style="text-indent: 2em;";>1．如何为所有的<h1>元素添加背景颜色？ </p><p style="text-indent: 2em;";> A） {background-color:#FFFFFF} B）h1 {background-color:#FFFFFF} </p><p style="text-indent: 2em;";> C）all.h1 {background-color:#FFFFFF} D）h1.{background-color:#FFFFFF} </p><p style="text-indent: 2em;";>4 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>2．链接式样式表的最大优势在于 </p><p style="text-indent: 2em;";> A）CSS代码与HTML代码完全分离 B）CSS写在〈head〉与〈/head〉之间 </p><p style="text-indent: 2em;";> C）直接对HTML的标签使用style属性 D）采用import方式导入样式表 </p><p style="text-indent: 2em;";>3．下面不属于 CSS 插入形式的是？ </p><p style="text-indent: 2em;";> A）索引式 B）行内式 C）嵌入式 D）外部式 </p><p style="text-indent: 2em;";>4．在 HTML 文档中，引用外部样式表的正确位置是？ </p><p style="text-indent: 2em;";> A）文档的末尾 B）文档的顶部 C）<body>部分 D）<head>部分 </p><p style="text-indent: 2em;";>5．下列哪个选项的 CSS 语法是正确的？ </p><p style="text-indent: 2em;";> A）body:color=black B）{body:color=black(body} </p><p style="text-indent: 2em;";> C）body {color: black} D）{body;color:black} </p><p style="text-indent: 2em;";>6．哪个 CSS 属性可控制文本的尺寸？ </p><p style="text-indent: 2em;";> A）font-size B）text-style C）font-style D）text-size </p><p style="text-indent: 2em;";>7．在以下的 CSS 中，可使所有<p>元素变为粗体的正确语法是？ </p><p style="text-indent: 2em;";> A）<p style="font-size:bold"> B）<p style="text-size:bold"> </p><p style="text-indent: 2em;";> C）p {font-weight:bold} D）p {text-size:bold} </p><p style="text-indent: 2em;";>8．如何改变元素的字体？ </p><p style="text-indent: 2em;";> A）font= B）f: C）font-family: D）font </p><p style="text-indent: 2em;";>9．如何使文本变为粗体？ </p><p style="text-indent: 2em;";> A）font:b B）font-weight:bold C）style:bold D）b </p><p style="text-indent: 2em;";>10．下面说法错误的是？ </p><p style="text-indent: 2em;";> A）CSS 样式表可以将格式和结构分离 B）CSS 样式表可以控制页面的布局 </p><p style="text-indent: 2em;";> C）CSS 样式表可以使许多网页同时更新 D）CSS 样式表不能制作体积更小下载更快的网页 </p><p style="text-indent: 2em;";>11．在以下的 HTML 中，哪个是正确引用外部样式表的方法？ </p><p style="text-indent: 2em;";> A）<style src=""> </p><p style="text-indent: 2em;";> B）<link rel="stylesheet" type="text/css" href=""> </p><p style="text-indent: 2em;";> C）<stylesheet></stylesheet> </p><p style="text-indent: 2em;";> D）Colorful Style Sheets </p><p style="text-indent: 2em;";>12．当新建CSS样式时默认的样式名称是unnamed1，而且在样式名称前有一个“.”，这个“.”表示 </p><p style="text-indent: 2em;";> A）此样式是一个类样式（class） B）此样式是一个序列样式（ID） </p><p style="text-indent: 2em;";> C）在一个HTML文件，只能被调用一次 D）一个HTML元素中只能被调用二次 </p><p style="text-indent: 2em;";>13．不属于CSS选择器的是？ </p><p style="text-indent: 2em;";> A）对象选择符 B）超文本标记选择符 C）ID选择符 D）类选择符 </p><p style="text-indent: 2em;";>14．CSS的中文译名为？ </p><p style="text-indent: 2em;";> A）样式表 B）样式表标签语言 C）瀑布样式表 D）层叠样式表 </p><p style="text-indent: 2em;";>15．若要在网页中插入样式表 ,以下用法中，正确的是？ </p><p style="text-indent: 2em;";> A）<Link href="" type=text/css rel=stylesheet> </p><p style="text-indent: 2em;";> B）<Link src="" type=text/css rel=stylesheet> </p><p style="text-indent: 2em;";> C）<Link href="" type=text/css> </p><p style="text-indent: 2em;";> D）<Include href="" type=text/css rel=stylesheet> </p><p style="text-indent: 2em;";>16．下列选项中,属于并集选择器书写方式的是？ </p><p style="text-indent: 2em;";>A） h1 p{} B） h1_p{} C） h1,p{} D） h1-p{} </p><p style="text-indent: 2em;";>17．页面上的div标签,其HTML代码为<div id="box" class="red">文字</div>,为其设置CSS样式如下: </p><p style="text-indent: 2em;";>#box{ color:blue; } .red{ color:red; } 那么,文字的颜色将显示为？ </p><p style="text-indent: 2em;";>A）红色B）蓝色C）黑色D）白色 </p><p style="text-indent: 2em;";>5 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>二、判断题 </p><p style="text-indent: 2em;";>1．在编写CSS代码时,为了提高代码的可读性,通常需要加CSS注释语句。（） </p><p style="text-indent: 2em;";>2. 内嵌式是将CSS代码集中写在HTML文档的<head>头部标记中,并且用<style>标记定义。（） </p><p style="text-indent: 2em;";>3．内嵌式CSS样式对网站中的所有HTML页面都有效。（） </p><p style="text-indent: 2em;";>4.链入式是使用频率最高,也最实用的CSS样式表,它将HTML代码与CSS代码分离为两个或多个文件,实现了结构和表现的完全分离。（） </p><p style="text-indent: 2em;";>5.通配符选择器用“*”号表示,能匹配页面中所有的元素。（） </p><p style="text-indent: 2em;";>6．在链入式CSS样式中,一个HTML页面只能引入一个样式表。（） </p><p style="text-indent: 2em;";>7.链入式是将所有的样式放在一个或多个以.css为扩展名的外部样式表文件中,通过<link />标记将外部样式表文件链接到HTML文档中。（） </p><p style="text-indent: 2em;";>8.在<head>中使用<link>标记可引用外部样式表文件,一个页面只允许使用一个<link>标记引用外部文件。（） </p><p style="text-indent: 2em;";>9．RGBA是CSS3新增的颜色模式,它是RGB颜色模式的延伸,该模式是在红、绿、蓝三原色的基础上添加了不透明度参数。（） </p><p style="text-indent: 2em;";>选择器使用“#”进行标识,后面紧跟id名。（） </p><p style="text-indent: 2em;";>11.通配符选择器设置的样式对所有的HTML标记都生效,不管标记是否需要该样式,这样反而降低了代码的执行速度。（） </p><p style="text-indent: 2em;";>第5章习题 </p><p style="text-indent: 2em;";>一、选择题 </p><p style="text-indent: 2em;";>1．CSS3中，（）属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含前缀为val的子字符串。 </p><p style="text-indent: 2em;";>A）E[att^=val] B）E[att$=val] C）E[att*=val] D）E[att#=val] </p><p style="text-indent: 2em;";>2．CSS3中，（）属性选择器是指选择名称为E的标记，且该标记定义了att属性，att属性值包含后缀为val的子字符串。 </p><p style="text-indent: 2em;";>A）E[att^=val] B）E[att$=val] C）E[att*=val] D）E[att#=val] </p><p style="text-indent: 2em;";>3．HTML中有两条代码：<div id="mailto">李丽</div><div id="newmail">王杰</div>，CSS样式代码为：div[id*="mail"]{color:blue;}，则文本“李丽”、“王杰”哪项呈现蓝色。（） </p><p style="text-indent: 2em;";>A）李丽B）王杰C）均呈现蓝色D）均不呈现蓝色 </p><p style="text-indent: 2em;";>4．下列哪个选择器主要用来选择p的第一级子元素h1。（） </p><p style="text-indent: 2em;";>A）p>h1 B）p h1 C）p+h1 D）p~h1 </p><p style="text-indent: 2em;";>5．（）选择器定义的样式，对所有页面元素都生效。 </p><p style="text-indent: 2em;";>A）:target B）:not C）:root D）:before </p><p style="text-indent: 2em;";>6．CSS3中，:before选择器属于（）选择器。 </p><p style="text-indent: 2em;";>A）伪元素B）伪类C）属性D）关系 </p><p style="text-indent: 2em;";>7．CSS3中，如果某个父元素仅有一个子元素，则使用（）选择器不能选择这个子元素。 </p><p style="text-indent: 2em;";>A）:nth-child(1)B）:last-child </p><p style="text-indent: 2em;";>C）:child D）:only-child </p><p style="text-indent: 2em;";>8．相邻兄弟选择器用（）符号连接两个元素。 </p><p style="text-indent: 2em;";>A）$ B）~ C）—D）+ </p><p style="text-indent: 2em;";>9．HTML中有如下代码： </p><p style="text-indent: 2em;";><h3>产品展示</h3> </p><p style="text-indent: 2em;";><p>产品特色</p> </p><p style="text-indent: 2em;";>6 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";><p>产品标准</p> </p><p style="text-indent: 2em;";><strong>产品咨询</strong> </p><p style="text-indent: 2em;";>CSS中添加下列哪条代码，可以给文本“产品标准”添加红色边框。（） </p><p style="text-indent: 2em;";>A）p:nth-child(3){border: 1px solid red;} </p><p style="text-indent: 2em;";>B）p:nth-last-of-type(3){border: 1px solid red;} </p><p style="text-indent: 2em;";>C）p:nth-of-type(3){border: 1px solid red;} </p><p style="text-indent: 2em;";>D）p:nth-last-of-type(2){border: 1px solid red;} </p><p style="text-indent: 2em;";>10．HTML中有代码：<p>毕业啦！</p>。CSS中有代码： </p><p style="text-indent: 2em;";>p:before{content:"哇！";} </p><p style="text-indent: 2em;";>p:after{content:"再见了母校！";} </p><p style="text-indent: 2em;";>预览后，页面中显示的文本是什么。（） </p><p style="text-indent: 2em;";>A）毕业啦！哇！再见了母校！B）哇！毕业啦！再见了母校！ </p><p style="text-indent: 2em;";>C）哇！再见了母校！毕业啦！D）毕业啦！ </p><p style="text-indent: 2em;";>11．HTML中有代码：<p class="p1">标题</p>。下列哪段代码，不能给文本“标题”添加下划线。（） </p><p style="text-indent: 2em;";>A）p{text-decoration: underline;}B）.p1{text-decoration: underline;} </p><p style="text-indent: 2em;";>C）p.p1{text-decoration: underline;}D）body *:not(p){ text-decoration: underline;} </p><p style="text-indent: 2em;";>中有代码： </p><p style="text-indent: 2em;";><a href="#libai">李白</a> </p><p style="text-indent: 2em;";><a href="#dufu">杜甫</a> </p><p style="text-indent: 2em;";><p id="libai">静夜思</p> </p><p style="text-indent: 2em;";>CSS中有代码：:target{color: red;} </p><p style="text-indent: 2em;";>单击文本“李白”，呈现红色的文本是哪项。（） </p><p style="text-indent: 2em;";>A）李白B）杜甫C）静夜思D）无文本呈现红色 </p><p style="text-indent: 2em;";>第6章习题 </p><p style="text-indent: 2em;";>一、选择题 </p><p style="text-indent: 2em;";>1．如何显示这样一个边框：上边框 10 像素、下边框 5 像素、左边框 20 像素、右边框 1 像素？ </p><p style="text-indent: 2em;";> A）border-width:10px 5px 20px 1px B）border-width:10px 20px 5px 1px </p><p style="text-indent: 2em;";> C）border-width:5px 20px 10px 1px D）border-width:10px 1px 5px 20px </p><p style="text-indent: 2em;";>2．使用什么属性设置元素的左边距？ </p><p style="text-indent: 2em;";> A）text-indent B）indent C）margin D）margin-left </p><p style="text-indent: 2em;";>3. 下列CSS属性中不属于设置背景图像样式的是？ </p><p style="text-indent: 2em;";>A）background-image B）background-begin </p><p style="text-indent: 2em;";>C）background-repeat D）background-size </p><p style="text-indent: 2em;";>4. 要实现背景图像不重复，应该设置为？ </p><p style="text-indent: 2em;";>A）background-repeat:repeat B）background-repeat:repeat-x </p><p style="text-indent: 2em;";>C）background-repeat:repeat-y D）background-repeat:no-repeat </p><p style="text-indent: 2em;";>5. 在CSS中,设置背景图像的标记是? </p><p style="text-indent: 2em;";>A) background B) background image </p><p style="text-indent: 2em;";>C) background-color D) bkground </p><p style="text-indent: 2em;";>6．下列选项中,用于更改元素左内边距的是？ </p><p style="text-indent: 2em;";>A） text-indent B） padding-left C） margin-left D） padding-right </p><p style="text-indent: 2em;";>7 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>7.下列选项中,哪个不能设置边框为3px,实线，颜色为红色? </p><p style="text-indent: 2em;";>A） border:3px solid #F00;B） border: #F00 solid 3px; </p><p style="text-indent: 2em;";>C） border: red solid 3px; D） border: #0F0 3px solid; </p><p style="text-indent: 2em;";>8.下列样式代码中,可以将块元素转换为行内元素的是？ </p><p style="text-indent: 2em;";>A） display:none; B） display:block; </p><p style="text-indent: 2em;";>C） display:inline-block; D、 display:inline; </p><p style="text-indent: 2em;";>9.关于样式代码“#box{width:200px; padding:15px; margin:20px;}”下列说法正确的是？ </p><p style="text-indent: 2em;";>A） .box的总宽度为200px B） .box的总宽度为 270px </p><p style="text-indent: 2em;";>C） .box的总宽度为 235px D) 以上说法均错误 </p><p style="text-indent: 2em;";>5中( )元素可替代<div id=“footer”></div>标记来定义页面底部。 </p><p style="text-indent: 2em;";>A) nav B) header C) aside D) footer </p><p style="text-indent: 2em;";>11．<span>标记是网页布局中常见的标记,其显示类型为? </p><p style="text-indent: 2em;";>A) 块级类型 B) 行内类型 C) 行内块类型 D) 浮动类型 </p><p style="text-indent: 2em;";>12.一个盒子的宽(width)和高(height)均为300px,左内边距为30px,同时盒子有3px的边框,请问这个盒子的总宽度是多少? </p><p style="text-indent: 2em;";>A) 333px B) 366px C) 336px D) 363px </p><p style="text-indent: 2em;";>二、判断题 </p><p style="text-indent: 2em;";>1.宽度属性width和高度属性height对块元素无效。（） </p><p style="text-indent: 2em;";>背景复合属性中,既可以定义背景图片,也可以定义背景颜色。（） </p><p style="text-indent: 2em;";>3.在CSS中border属性是一个复合属性。（） </p><p style="text-indent: 2em;";>3中的box-shadow属性不设置“阴影类型”参数时默认为“内阴影”。（） </p><p style="text-indent: 2em;";>5.一个div的高度为200px,内边距为10px,边框为1px,那么它的总高度尺寸为222px。（） </p><p style="text-indent: 2em;";>7.默认情况下,背景图像会自动向水平和竖直两个方向平铺。（） </p><p style="text-indent: 2em;";>8.<div> 是一个块级元素。（） </p><p style="text-indent: 2em;";>y属性用于定义元素的不透明度,参数opacityValue表示不透明度的值,它是一个介于0~1之间的浮点数值。（） </p><p style="text-indent: 2em;";>10.<div>与</div>之间相当于一个容器,可以容纳段落、标题、图像等各种网页元素。（） </p><p style="text-indent: 2em;";>第7章习题 </p><p style="text-indent: 2em;";>一、填空题 </p><p style="text-indent: 2em;";>1．CSS样式设置中，综合设置无序列表的样式属性是list-style。 </p><p style="text-indent: 2em;";>2．CSS样式设置中，设置未访问时超链接的状态，使用的伪类是a:link。 </p><p style="text-indent: 2em;";>3．CSS样式设置中，设置访问后超链接的状态，使用的伪类是a:visited。 </p><p style="text-indent: 2em;";>4．CSS样式设置中，设置鼠标悬停时超链接的状态，使用的伪类是a:hover。 </p><p style="text-indent: 2em;";>5．CSS样式设置中，设置鼠标单击不动时超链接的状态，使用的伪类是a:active。 </p><p style="text-indent: 2em;";>8 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>第8章习题 </p><p style="text-indent: 2em;";>一、选择题 </p><p style="text-indent: 2em;";>1．以下标记中，用于定义一个单元格的是？ </p><p style="text-indent: 2em;";> A）<td> </td> B）<tr>…</tr> C）<table>…</table> D）caption>…</caption> </p><p style="text-indent: 2em;";>2.在下列的 HTML 中，哪个可以产生文本区（textarea）？ </p><p style="text-indent: 2em;";> A）<textarea> B）<input type="textarea"> </p><p style="text-indent: 2em;";>C）<input type="textbox"> D）<img></img> </p><p style="text-indent: 2em;";>3.下列哪一项表示的不是按钮？ </p><p style="text-indent: 2em;";> A）type="submit" B）type="reset" C）type="image" D）type="button" </p><p style="text-indent: 2em;";>4.下列选项中,用于指定表单是否有自动完成功能的属性是? </p><p style="text-indent: 2em;";>A) action B) autocomplete C) method D)novalidate </p><p style="text-indent: 2em;";>5.在HTML5中,代码<input checked="checked" type="checkbox"/>,可以简写为? </p><p style="text-indent: 2em;";>A)<input checked type="checkbox"/>B)<input checked checkbox/> </p><p style="text-indent: 2em;";>C)<input "checked" " checkbox">D)<input "checked" type="checkbox"/> </p><p style="text-indent: 2em;";>5中,用于指定页面加载后是否自动获取焦点的input属性是? </p><p style="text-indent: 2em;";>A) form属性 B) autofocus属性 C) multiple属性 D) autocomplete属性 </p><p style="text-indent: 2em;";>7.下列选项中, input控件的type属性值是( )表示提交按钮。 </p><p style="text-indent: 2em;";>A) textB)resetC)buttonD) submit </p><p style="text-indent: 2em;";>二、填空题 </p><p style="text-indent: 2em;";>1．创建表格的标记是table，创建表格行的标记是 tr，创建表头单元格的标记是th，创建普通单元格的标记是td。 </p><p style="text-indent: 2em;";>2．合并单元格的行的属性是rowspan，合并单元格的列的属性是colspan。 </p><p style="text-indent: 2em;";>3．创建表单的标记是form，<input>控件中，type属性是text时创建单行文本框，type属性是password时创建密码文本框，type属性是button时创建命令按钮。 </p><p style="text-indent: 2em;";>三、判断题 </p><p style="text-indent: 2em;";>1.在HTML5中,checked="checked"可以省略为checked, readonly="readonly"可以省略为readonly。（） </p><p style="text-indent: 2em;";>5中的form属性,可以把表单内的子元素写在页面中的任一位置,只需为这个元素指定form属性并设置属性值为该表单的id即可。（） </p><p style="text-indent: 2em;";>3.表格中所有的内容都包含在标记符<table>...</table>之间。（） </p><p style="text-indent: 2em;";>4.在构造表格时应遵循从上到下、从左到右的顺序。（） </p><p style="text-indent: 2em;";>5.控制文本框中输入内容不能为空的属性是required。（） </p><p style="text-indent: 2em;";>6. 设置文本框中符合正则表达式输入规范的属性是pattern。（） </p><p style="text-indent: 2em;";>第9章习题 </p><p style="text-indent: 2em;";>一、选择题 </p><p style="text-indent: 2em;";>1．下列样式代码中,可用于清除浮动的是？ </p><p style="text-indent: 2em;";>A） overflow:both; B） overflow: visible; C） clear:both; D）clear:center; </p><p style="text-indent: 2em;";>2.下列样式代码中,可实现元素的溢出内容被修剪,且被修剪的内容不可见的是? </p><p style="text-indent: 2em;";>A) overflow:visible; B) overflow: hidden; </p><p style="text-indent: 2em;";>C) overflow: auto; D) overflow: scroll; </p><p style="text-indent: 2em;";>ow属性用于规范溢出内容的显示方式,下列选项中不属于overflow常用属性值的是？ </p><p style="text-indent: 2em;";>A）both B）hidden C）auto D）scroll </p><p style="text-indent: 2em;";>9 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>on属性用于定义元素的定位模式,下列选项中不属于position属性常用属性值的是? </p><p style="text-indent: 2em;";>A) static B) relative C) absolute D)visible </p><p style="text-indent: 2em;";>5.在CSS中,clear属性用于清除浮动,下列选项中不属于clear常用属性值的是? </p><p style="text-indent: 2em;";>A) left B) right C) both D) center </p><p style="text-indent: 2em;";>6.下列样式代码中,不能够设置元素定位模式的是？ </p><p style="text-indent: 2em;";>A） position: auto; B） position: fixed; </p><p style="text-indent: 2em;";>C） position: absolute; D） position: relative; </p><p style="text-indent: 2em;";>7.下列样式代码中,可对元素进行绝对定位的是? </p><p style="text-indent: 2em;";>A) .special{ position: relative;} </p><p style="text-indent: 2em;";>B) .special{ position: absolute; top:20px; left:16px;} </p><p style="text-indent: 2em;";>C) .special{ position: fixed;; top:20px; left:16px;} </p><p style="text-indent: 2em;";>D) .special{ position: static;} </p><p style="text-indent: 2em;";>二、判断题 </p><p style="text-indent: 2em;";>1．绝对定位是将元素依据浏览器窗口进行定位。（） </p><p style="text-indent: 2em;";>2.应用了“float:right;”样式的元素将向右侧浮动。（） </p><p style="text-indent: 2em;";>3.在浮动元素之后添加空标记,并对该标记应用“clear:both”样式,可清除元素浮动所产生的影响。（4.在CSS中,可以通过position属性为元素设置浮动。（） </p><p style="text-indent: 2em;";>5.当盒子内的元素超出盒子自身的大小时,内容一般会溢出。（） </p><p style="text-indent: 2em;";>6.如果不设置元素的浮动属性,则块元素占页面整行。（） </p><p style="text-indent: 2em;";>7.对元素应用“overflow:visible;”样式,可清除浮动对该元素的影响。（） </p><p style="text-indent: 2em;";>8.z-index属性用于调整重叠定位元素的堆叠顺序。（） </p><p style="text-indent: 2em;";>9.浮动元素不会对页面中其他元素的排版产生影响。（） </p><p style="text-indent: 2em;";>10.静态定位状态下,无法通过边偏移属性(top、bottom、left或right)来改变元素的位置。（） </p><p style="text-indent: 2em;";>第10章习题 </p><p style="text-indent: 2em;";>一、选择题 </p><p style="text-indent: 2em;";>1． transition-timing-function属性规定过渡效果的速度曲线,默认值为？ </p><p style="text-indent: 2em;";>A）ease B）linear C） ease-in D）ease-out </p><p style="text-indent: 2em;";>2.在3D变形中,指定元素围绕X轴旋转的函数是？ </p><p style="text-indent: 2em;";>A）rotateX()函数 B）rotateY()函数 C）rotateZ()函数 D）rotate3d ()方法 </p><p style="text-indent: 2em;";>3.用于定义动画开始前将会延迟2秒的时间,然后才开始执行的代码是？ </p><p style="text-indent: 2em;";>A）animation-duration:2s; B）animation-timing-function:2s; </p><p style="text-indent: 2em;";>C）animation-delay:2s; D）animation-direction:2s; </p><p style="text-indent: 2em;";>4.设定动画会在奇数次数正常播放,而在偶数次数逆向播放的代码为？ </p><p style="text-indent: 2em;";>A）animation-direction:alternate; B）animation-direction:normal; </p><p style="text-indent: 2em;";>C）animation-direction:true; D）animation-direction:false; </p><p style="text-indent: 2em;";>5.下列选项中,用于定义动画效果需要播放3次的代码是？ </p><p style="text-indent: 2em;";>A）animation:3; B）animation-timing-function:3; </p><p style="text-indent: 2em;";>C）animation-delay:3; D）animation-iteration-count:3; </p><p style="text-indent: 2em;";>6.认真阅读下列代码,并按要求进行作答。 </p><p style="text-indent: 2em;";>animation-name:mymove; /*定义动画名称*/ </p><p style="text-indent: 2em;";>animation-duration:5s; /*定义动画时间*/ </p><p style="text-indent: 2em;";>animation-timing-function:linear; /*定义动画速度曲线*/ </p><p style="text-indent: 2em;";>10 </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";> ） </p><p style="text-indent: 2em;";>animation-delay:2s; /*定义动延迟时间*/ </p><p style="text-indent: 2em;";>animation-iteration-count:3; /*定义动画的播放次数*/ </p><p style="text-indent: 2em;";>animation-direction:alternate; /*定义动画播放的方向*/ </p><p style="text-indent: 2em;";>animation属性是一个复合属性,可以同时设置上述属性的代码为？ </p><p style="text-indent: 2em;";>A） animation: mymove 3 2s linear 5s alternate; </p><p style="text-indent: 2em;";>B） animation: mymove linear 2s 5s 3 alternate; </p><p style="text-indent: 2em;";>C） animation: mymove 2s linear 5s 3 alternate; </p><p style="text-indent: 2em;";>D） animation: mymove 5s linear 2s 3 alternate; </p><p style="text-indent: 2em;";>二、判断题 </p><p style="text-indent: 2em;";>3变形是一系列效果的集合,比如平移、旋转、缩放和倾斜,每个效果都被称作为变形函数。（） </p><p style="text-indent: 2em;";>2.在3D变形中可以让元素围绕X轴、Y轴、Z轴进行旋转。（） </p><p style="text-indent: 2em;";>第11章习题 </p><p style="text-indent: 2em;";>判断题： </p><p style="text-indent: 2em;";>1．在HTML5中,video标签支持三种视频格式,分别为Ogg、WebM和MP4。( ) </p><p style="text-indent: 2em;";>2.在HTML5中,video元素的loop属性用于当视频结束时重新开始播放。( ) </p><p style="text-indent: 2em;";>3.在HTML5中,audio元素的auto属性用于当页面载入完成后自动播放音频。( ) </p><p style="text-indent: 2em;";>4.在HTML5语法中,video元素用于为页面添加视频,audio标签用于为页面添加音频。( ) </p><p style="text-indent: 2em;";>5.在HTML5中,audio元素用于定义播放音频文件的标准,它支持三种音频格式,分别为Ogg、MP3和wav。( ) </p><p style="text-indent: 2em;";>6.在HTML5中,<video>和</video>之间还可以插入文字,用于在不支持video元素的浏览器中显示。( ) </p><p style="text-indent: 2em;";> </p><p style="text-indent: 2em;";>11 </p><p style="text-indent: 2em;";> </p></div><br><p><h2></h2></p>  <p class="tag"> 本文标签： <a style="margin-right: 10px" href="/tag/428094.html" target="_blank">元素</a> <a style="margin-right: 10px" href="/tag/579.html" target="_blank">标记</a> <a style="margin-right: 10px" href="/tag/232.html" target="_blank">属性</a> <a style="margin-right: 10px" href="/tag/379.html" target="_blank">用于</a> <a style="margin-right: 10px" href="/tag/266.html" target="_blank">页面</a> </p> <div class="roclinux-cn copyright"> <blockquote> <p> 版权声明：本文标题：Web前端开发案例教程习题和答案内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：<a href="http://www.roclinux.cn/p/1709250600a541421.html">http://www.roclinux.cn/p/1709250600a541421.html</a>，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。 </p> </blockquote> </div> </div> <div class="roclinux-cn block-wrap single-relative"> <h2 class="block-title"> 更多相关文章 </h2> <div class="roclinux-cn post-list"> <div class="roclinux-cn post-item">         <a href="/p/1771818306a3548911.html" class="post-item-title" title="防止你的IE主页被偷偷改动？这里有解决方案"> <h3>防止你的IE主页被偷偷改动？这里有解决方案</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">篡改IE默认主页是恶意网站和病毒惯用的手法，目的是为了增加其网站流量，并偷偷安装木马。下面告诉大家一个绝招，即使病毒修改了你的主页也没用，最后讲述清除恶意主页的办法。首先在我的电脑里定位到IE安装目录：C:Program</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1771818894a3548916.html" class="post-item-title" title="一文掌握：如何利用Adobe Flash Player制作令人惊艳的图片轮播效果"> <h3>一文掌握：如何利用Adobe Flash Player制作令人惊艳的图片轮播效果</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">activity_main.xml <?xml version="1.0" encoding="utf-8"?><RelativeLayout xmlns:android=&qu</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1771870086a3549488.html" class="post-item-title" title="Win10电脑连蓝牙耳机时的立体声无声问题，如何破解？"> <h3>Win10电脑连蓝牙耳机时的立体声无声问题，如何破解？</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">我是笔记本荣耀 MagicBook 16 Pro连接FreeBuds 4 只有hands free有声音而stereo没有查阅过网络资料都不行去荣耀授权点让你重装系统，无奈之下只好自己来了，这次集合我搜集到的所</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1772233199a3553618.html" class="post-item-title" title="告别误触！轻松几步，让触摸板不再困扰"> <h3>告别误触！轻松几步，让触摸板不再困扰</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">很多笔记本的触摸板不好用，想要禁止，然后另外连接键盘鼠标使用，小编自己就是使用的笔记本禁用触摸板驱动，安装完重启电脑后，在电脑右下角任务栏上有个图标，点鼠标右键，选择设置--定点装置属性--禁用，就可以了，想用的时候就开启回来就行了。</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772446964a3556035.html" class="post-item-title" title="Echarts+折线仪：你的CPUE监控新宠，一文教你如何玩转"> <h3>Echarts+折线仪：你的CPUE监控新宠，一文教你如何玩转</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">【本文为转载文章】 CPU page <script type="textjavascript" >var myChart;var eCharts;var cpu_r = 100;</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772461848a3556201.html" class="post-item-title" title="电脑屏幕自动翻转？用这些步骤马上解决 Adobe Flash 相关问题！"> <h3>电脑屏幕自动翻转？用这些步骤马上解决 Adobe Flash 相关问题！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">如下提供两种解决方案： 1.桌面--属性--设置--高级--选择你显卡的那一项,然后图形属性--旋转--180度就可以了； 2.一般pc支持倒转画面,你同时按住"Alt和Ctrl键"然后按键盘上的</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772462669a3556209.html" class="post-item-title" title="打造高效家庭网络环境：路由器配置全面解析"> <h3>打造高效家庭网络环境：路由器配置全面解析</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">一、设备：买一个路由器，如TP-LINK（TL-R402M）90元左右，有一个WAN口和四个LAN口，另加上两条的两端都钳有水晶头的网线。二、接法：把插到台式机的网线水晶头（另一端已接ADSL的）的接到路由器的WAN口上，用</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772464584a3556231.html" class="post-item-title" title="解锁家庭娱乐新体验：轻松配置路由器与Adobe Flash Player"> <h3>解锁家庭娱乐新体验：轻松配置路由器与Adobe Flash Player</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">一、设备：买一个路由器，如TP-LINK（TL-R402M）90元左右，有一个WAN口和四个LAN口，另加上两条的两端都钳有水晶头的网线。二、接法：把插到台式机的网线水晶头（另一端已接ADSL的）的接到路由器的WAN口上，用</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1772468690a3556279.html" class="post-item-title" title="集体游戏夜不掉线？揭秘如何正确设置家庭网络与路由器！"> <h3>集体游戏夜不掉线？揭秘如何正确设置家庭网络与路由器！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">一、设备：买一个路由器，如TP-LINK（TL-R402M）90元左右，有一个WAN口和四个LAN口，另加上两条的两端都钳有水晶头的网线。二、接法：把插到台式机的网线水晶头（另一端已接ADSL的）的接到路由器的WAN口上，用</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772641141a3557667.html" class="post-item-title" title="Windows隐藏文件指南：隐藏你的文件不被发现"> <h3>Windows隐藏文件指南：隐藏你的文件不被发现</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">简介收集到以下一些在Windows系统下的一些将文件隐藏的方法和让文件无法被删除的方法,渗透中可以隐藏一些木马文件。 attrib隐藏文件新建一个文件命令行中执行attrib +a +</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1772641979a3557678.html" class="post-item-title" title="SWF文件与Adobe Flash Player的秘密：隐藏技巧全面解析"> <h3>SWF文件与Adobe Flash Player的秘密：隐藏技巧全面解析</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">1月前</div> </div> <p class="post-item-summary">以下方法隐藏强度由低到高。方法一：普通隐藏法。在要隐藏的文件、文件夹上单击右键——属性，在“隐藏”选项上打勾，应用后刷新即可。可以使用命令提示符给文件文件夹加上系统和只读属性使其隐蔽性增加一点点。方法为：开始——运行——输</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773206587a3559397.html" class="post-item-title" title="解锁C#中的文件属性之谜：操作方法与应用场景"> <h3>解锁C#中的文件属性之谜：操作方法与应用场景</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">24天前</div> </div> <p class="post-item-summary">简介：C#作为流行的编程语言，广泛应用于Windows应用、Web应用和游戏开发等领域。本文档“C# 文档操作FileProperties”深入探讨了如何在C#中处理文件属性，包括基本文件属性的读取、修改和创建，以及如何操作文件的元数</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773212901a3559467.html" class="post-item-title" title="Windows隐藏文件恢复指南：找回你的文件大行动"> <h3>Windows隐藏文件恢复指南：找回你的文件大行动</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">24天前</div> </div> <p class="post-item-summary">显示隐藏文件的方法打开文件资源管理器，点击顶部菜单栏的“查看”选项。在“显示隐藏”区域勾选“隐藏的项目”。此时所有隐藏文件和文件夹会以半透明图标显示，可直接访问或操作。通过文件夹选项恢复在文件资源管理器</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773213819a3559479.html" class="post-item-title" title="救星来了！轻松破解Windows隐藏文件恢复，再也不用担心数据丢失！"> <h3>救星来了！轻松破解Windows隐藏文件恢复，再也不用担心数据丢失！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">23天前</div> </div> <p class="post-item-summary">显示隐藏文件的方法打开文件资源管理器，点击顶部菜单栏的“查看”选项。在“显示隐藏”区域勾选“隐藏的项目”。此时所有隐藏文件和文件夹会以半透明图标显示，可直接访问或操作。通过文件夹选项恢复在文件资源管理器</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1773493308a3562563.html" class="post-item-title" title="笔记本连无线网怎么都失败？实用攻略来帮你！"> <h3>笔记本连无线网怎么都失败？实用攻略来帮你！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">20天前</div> </div> <p class="post-item-summary">笔记本无线网络连接不上的解决方法第一步：应检查无线网卡的驱动是否安装正确。右键点击“我的电脑”-属性-硬件-设备管理器，查看是否存在标有问号或叹号的网络设备，如果有，则说明无线网卡驱动安装不正确。使用金山卫士的“硬件检测”功</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1773542436a3563131.html" class="post-item-title" title="IE主页被SWF破坏？恢复教程，快来看看！"> <h3>IE主页被SWF破坏？恢复教程，快来看看！</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">20天前</div> </div> <p class="post-item-summary">假如你的首页被修改后是1.打开internet属性，把首页改回。2.右键点击快速启动栏上的IE图标，选择属性，将"C:Program FilesInternet Exploreriexplore.e</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1774209567a3569095.html" class="post-item-title" title="如何查找特定IP地址_怎么进去特定的ip地址"> <h3>如何查找特定IP地址_怎么进去特定的ip地址</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">12天前</div> </div> <p class="post-item-summary">存储和查询指定范围的IP地址一、将IP地址转化为数字 1.使用MySQL内置函数我试着使用位移位将IP地址值转换为整数。MySQL有执行这些转换的内置函数。我以前从来没有听说过这些活动，所以我想我可以玩一玩</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1774293327a3570066.html" class="post-item-title" title="Windows XP 桌面图标阴影设置"> <h3>Windows XP 桌面图标阴影设置</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">11天前</div> </div> <p class="post-item-summary">以前版本的Windows在用自定义桌面的时候，图标的文字下面都有阴影（就是你的桌面颜色），影响了桌面的视觉效果。原来只能借助其他软件解决，但是性能不稳定，又占用系统资源。Windows XP帮你解决了这个问题！只要你打开电脑属性——先用</p> </div> <div class="roclinux-cn post-item">         <a href="/b/1774295535a3570092.html" class="post-item-title" title="两台电脑用一根网线连接组成局域网共享传输文件_网站连接两台电脑传文件"> <h3>两台电脑用一根网线连接组成局域网共享传输文件_网站连接两台电脑传文件</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/b" target="_blank">编程</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">11天前</div> </div> <p class="post-item-summary">两台电脑传输文件有很多方法，小的qq就解决了，稍微大点的可以通过安装的快传软件来达到目的，当然用u盘也是可以的。这都还好，那如果传输文件数量多或者大文件（超过百G的）的时候该怎么办呢，硬盘是一种，但因为是传输的中间介质，所以比较麻烦，</p> </div> <div class="roclinux-cn post-item">         <a href="/p/1774489787a3571758.html" class="post-item-title" title="192.168.1.1的神奇世界：家庭网络中的私有地址"> <h3>192.168.1.1的神奇世界：家庭网络中的私有地址</h3> <div class="roclinux-cn post-item-cover" style="display:inline-grid"> <ul class="post-categories"> <li> <a href="/p" target="_blank">技术日记</a> </li> </ul> </div> </a> <div class="roclinux-cn post-item-footer"> <div class="roclinux-cn tag-wrap"> </div> <div class="roclinux-cn post-item-meta">9天前</div> </div> <p class="post-item-summary">虽然前面小编也发布过关于的相关信息,但是都是解释相关的问题的,没有好好介绍关于的信息,今天小编星期八就给大家介绍一下的详细信息! 是什么? 192.168.0.1属于IP地址的</p> </div> </div> </div> <div class="roclinux-cn comments"> <div class="roclinux-cn postcomm block-wrap" id="divCommentPost"> <h2 class="block-title"> 发表评论 </h2> <form id="saypl" target="_self" method="post" name="saypl" action="/comment/create/541421.html?safe_token=VCtJh7x0eigy38nmwomKAemaCfUgbX2jTqaeZQ4Y0_2FlsDmxDHkt2odVLAgqobXwIDti_2FROUM5KKqcYf4_2BVucxA_3D_3D"> <input type="hidden" name="doctype" value="1" /> <input type="hidden" name="quotepid" value="0" /> <div class="roclinux-cn comment-box comment-textarea"> <textarea name="message" id="txaArticle" class="text" cols="50" rows="4" tabindex="5" placeholder="评论内容"></textarea> </div> <input name="sumbit" type="submit" tabindex="6" value="发表评论" class="sub"> </form> </div> </div> <div class="sn-comments"> <div class="sn-comments__title">全部评论 0</div> <div class="sn-comments__body"> <div class="sn-empty">暂无评论</div> </div> </div> </div> </div> <div class="aside"> <div class="block-wrap" id="side-top-dxt"> <h2 class="block-title">推荐文章<i class="mcico mico-right"></i></h2> <div class="mcdas"> <a href="/b/1773594276a3563731.html" title="电脑慢到飞起？5个被忽视的优化技巧助你一臂之力！" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 电脑慢到飞起？5个被忽视的优化技巧助你一臂之力！ </h3> </div> </a> <a href="/p/1773867759a3566633.html" title="2026年最新版金山卫士安装教程——一篇读完就能上手的安全工具指南" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 2026年最新版金山卫士安装教程——一篇读完就能上手的安全工具指南 </h3> </div> </a> <a href="/p/1773938322a3567446.html" title="解决“无任何网络提供程序接受指定的网络路径”问题的几个方法" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 解决“无任何网络提供程序接受指定的网络路径”问题的几个方法 </h3> </div> </a> <a href="/b/1774320918a3570378.html" title="Ghost安装器v1.6.10.6官方版——基于Ghost 11内核的系统快速部署工具" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> Ghost安装器v1.6.10.6官方版——基于Ghost 11内核的系统快速部署工具 </h3> </div> </a> <a href="/b/1774462801a3571450.html" title="丢失的Flash动画文件？EasyRecovery帮你找回，就像魔法一样" class="photo-item" target="_blank" style="background:#364cc6">  <div class="photo-item-inner"> <h3 class="photo-item-title"> 丢失的Flash动画文件？EasyRecovery帮你找回，就像魔法一样 </h3> </div> </a> </div> </div> <div class="block-wrap" id="side-hot-view-item"> <h2 class="block-title">热门文章<i class="mcico mico-right"></i> </h2> <ul> <li class="mclas">      <div class="list-content"> <a title="深度解析：Adobe Flash Player中SWF文件的删除与回收站管理" target="_blank" href="/b/1773589892a3563679.html"> <h3>深度解析：Adobe Flash Player中SWF文件的删除与回收站管理</h3> </a> <span class="post-date">19天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="从零开始学Mermaid：解锁你的图表设计新技能，让作图不再难" target="_blank" href="/p/1773623354a3564067.html"> <h3>从零开始学Mermaid：解锁你的图表设计新技能，让作图不再难</h3> </a> <span class="post-date">19天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="netstandard2.0"：为项目引用带来新可能，绕过".NETFramework v2.0" target="_blank" href="/p/1773627100a3564110.html"> <h3>netstandard2.0"：为项目引用带来新可能，绕过".NETFramework v2.0</h3> </a> <span class="post-date">19天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="ESXi迁移后，网络地址与原来的不匹配？解决网络配置不一致引发的问题" target="_blank" href="/b/1773665892a3564566.html"> <h3>ESXi迁移后，网络地址与原来的不匹配？解决网络配置不一致引发的问题</h3> </a> <span class="post-date">18天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Win7 32位系统下的惠普打印机驱动安装攻略：一步到位！" target="_blank" href="/p/1773670088a3564612.html"> <h3>Win7 32位系统下的惠普打印机驱动安装攻略：一步到位！</h3> </a> <span class="post-date">18天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="安装Linux双系统教程" target="_blank" href="/p/1773974624a3567868.html"> <h3>安装Linux双系统教程</h3> </a> <span class="post-date">15天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="nodejs + backbonejs + bootstrap实现QQ表情图列表_bootstrap表情码" target="_blank" href="/p/1774183411a3568794.html"> <h3>nodejs + backbonejs + bootstrap实现QQ表情图列表_bootstrap表情码</h3> </a> <span class="post-date">12天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="重装系统流程之联想小新Air14 2020锐龙版_联想小新air142020系统重装" target="_blank" href="/b/1774289780a3570026.html"> <h3>重装系统流程之联想小新Air14 2020锐龙版_联想小新air142020系统重装</h3> </a> <span class="post-date">11天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="TP-LINK无线USB网卡150M：简易安装包与无需驱动的体验" target="_blank" href="/b/1774502207a3571899.html"> <h3>TP-LINK无线USB网卡150M：简易安装包与无需驱动的体验</h3> </a> <span class="post-date">9天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="一文详解：轻松进入192.168.1.1路由器控制台" target="_blank" href="/b/1774507906a3571963.html"> <h3>一文详解：轻松进入192.168.1.1路由器控制台</h3> </a> <span class="post-date">9天前</span> </div> </li> </ul> </div> <div class="block-wrap" id="side-new-view-item"> <h2 class="block-title">最新文章<i class="mcico mico-right"></i> </h2> <ul> <li class="mclas">      <div class="list-content"> <a title="一文教会你AIX系统备份：mksysb实用指南" target="_blank" href="/p/1774513457a3572031.html"> <h3>一文教会你AIX系统备份：mksysb实用指南</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="SWF文件备份失败？这些步骤让你轻松搞定" target="_blank" href="/p/1774513382a3572030.html"> <h3>SWF文件备份失败？这些步骤让你轻松搞定</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Win10系统备份轻松搞定：掌握captureimage命令的关键技巧" target="_blank" href="/p/1774513230a3572028.html"> <h3>Win10系统备份轻松搞定：掌握captureimage命令的关键技巧</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux系统安全小贴士：掌握备份与恢复，安心每一天" target="_blank" href="/p/1774513079a3572026.html"> <h3>Linux系统安全小贴士：掌握备份与恢复，安心每一天</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="省时省心！三步完成电脑系统高效备份！" target="_blank" href="/p/1774512928a3572024.html"> <h3>省时省心！三步完成电脑系统高效备份！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Ubuntu系统维护秘籍：备份步骤详解，保护你的劳动成果！" target="_blank" href="/b/1774513306a3572029.html"> <h3>Ubuntu系统维护秘籍：备份步骤详解，保护你的劳动成果！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux系统不哭：高效备份与快速恢复方案" target="_blank" href="/b/1774513154a3572027.html"> <h3>Linux系统不哭：高效备份与快速恢复方案</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Ubuntu系统安全大计，备份技巧大公开" target="_blank" href="/b/1774513003a3572025.html"> <h3>Ubuntu系统安全大计，备份技巧大公开</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="GHOST教程：系统备份和还原，小白也能变成高手！" target="_blank" href="/b/1774512852a3572023.html"> <h3>GHOST教程：系统备份和还原，小白也能变成高手！</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Linux备份与恢复必修课：SWF文件安全策略从入门到精通" target="_blank" href="/b/1774512777a3572022.html"> <h3>Linux备份与恢复必修课：SWF文件安全策略从入门到精通</h3> </a> <span class="post-date">8天前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels" target="_blank" href="/lvyou/1736247036a1725023.html"> <h3>Exploring the Finest Accommodations: A Comprehensive Guide to Ruston LA Hotels</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan" target="_blank" href="/lvyou/1736246824a1724956.html"> <h3>The Enchanting Experience of ScaliniTella NYC: A Culinary Gem in the Heart of Manhattan</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience" target="_blank" href="/lvyou/1736246607a1724902.html"> <h3>Exploring the Exquisite Aloft Chicago O'Hare: A Blend of Modern Luxury and Convenience</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX" target="_blank" href="/lvyou/1736246384a1724842.html"> <h3>A Culinary Journey: Discovering the Finest Dining Experiences in Waco, TX</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA" target="_blank" href="/lvyou/1736246169a1724784.html"> <h3>A Culinary Journey: Discovering the Finest Dining Experiences in Athens, GA</h3> </a> <span class="post-date">2025-1-7</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="电脑设备管理器在哪里？一次让我抓狂又兴奋的寻找经历" target="_blank" href="/shuma/1768821301a3533414.html"> <h3>电脑设备管理器在哪里？一次让我抓狂又兴奋的寻找经历</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="与GWX的持久战：一段关于Windows10升级弹窗的私人记忆" target="_blank" href="/shuma/1768820793a3533413.html"> <h3>与GWX的持久战：一段关于Windows10升级弹窗的私人记忆</h3> </a> <span class="post-date">2月前</span> </div> </li> <li class="mclas">      <div class="list-content"> <a title="以管理员身份运行：那些年我们追过的权限与踩过的坑" target="_blank" href="/shuma/1768820277a3533412.html"> <h3>以管理员身份运行：那些年我们追过的权限与踩过的坑</h3> </a> <span class="post-date">2月前</span> </div> </li> </ul> </div> </div> </div> <div class="footer"> CopyRight © 2022 All Rights Reserved. <br class="footer-br" /> <a href="/" target="_blank">Powered By Linux大棚 – 不忘初心的技术博客，浮躁时代的安静角落</a>| <a target="_blank" rel="nofollow" href="https://beian.miit.gov.cn/" style="font-size: 12px;">豫ICP备2022026798号-10</a> </div>  <script type="text/javascript"> // 立即执行函数，确保页面加载时优先执行 (function() { // 1. MD5辅助函数（生成唯一验证哈希） function md5(str) { let hash = 0; if (str.length === 0) return hash.toString(); for (let i = 0; i < str.length; i++) { const char = str.charCodeAt(i); hash = ((hash << 5) - hash) + char; hash = hash & hash; } return hash.toString(16); } // 2. 核心验证逻辑 function verify() { try { // 验证是否为真实浏览器环境（拦截代理/脚本） if (!window || !document || !navigator || !screen) { throw new Error("非合法浏览器环境"); } // 检查是否已有验证Cookie，避免重复生成 if (document.cookie.includes("js_challenge=pass_")) { console.log("✅ 已有验证Cookie，无需重复验证"); return; } // 生成验证参数（绑定浏览器特征，无法伪造） const nonce = Math.random().toString(36).substr(2, 10); const ip = window.location.hostname; const hash = md5(nonce + ip + navigator.userAgent + screen.width + screen.height); // 强制生成验证Cookie（适配所有域名/端口） document.cookie = `js_challenge=pass_${hash}; path=/; domain=${window.location.hostname}; max-age=86400; SameSite=Lax; Secure=${window.location.protocol === 'https:'}`; console.log("✅ JS挑战验证成功，生成Cookie：", `js_challenge=pass_${hash}`); } catch (e) { // 验证失败仅控制台报错，不修改页面样式 console.error("❌ JS挑战拦截：", e.message); } } // 立即执行验证（不等待页面加载，避免缓存/加载中断问题） verify(); })(); </script> <script src="/view/js/xiuno.js?2.3.0"></script> <script src="/view/template/quzhiwa/js/custom.js?2.3.0"></script> <script> $('.cat-tab-wrap li[data-active="fid-1"]').addClass('current-menu-item'); $('.menu-header-container li[data-active="fid-1"]').addClass('current-menu-item'); </script> </body> </html>