html+css基础错题整理

左手的ㄟ右手 2023-06-22 08:25 12阅读 0赞

1.  HTML元素中，（vlink）属性用于定义超链接被鼠标点击后所显示的颜色。

*  alink
 *  background
 *  bgcolor
 *  vlink

> 1.  `<body>`标签的vlink属性已被弃用，HTML 4.01 Strict和XHTML 1.0 Strict DTD均不支持此属性。 请采用CSS作为替代。  
>     CSS语法（用于`<head>`段中）：`<style>a:visited {color:#FF0000}</style>`
> 2.  `text`：设置整个页面文字颜色，其值可以为rag函数或者颜色的六进制或者颜色的英文名称
> 3.  `bgcolor`：设置整个页面背景颜色
> 4.  `alink`：活动链接的颜色(当链接被点击时，该链接就处于活动状态。)
> 5.  `link`：位访问链接的颜色
> 6.  `vlink`：已被访问链接的颜色
> 7.  `background`：设置页面背景图

1.  超链接访问过后hover样式就不出现了，被点击访问过的超链接样式不再具有hover和active了，解决方法是改变CSS属性的排列顺序

a:link {} a:visited {} a:hover {} a:active {}

> 1）超链接访问过后`hover`样式就不出现了 所以，`a:hover`必须放在`a:link`和`a:visited`之后  
> 2）被点击访问过的超链接样式不再具有`hover`和`active`了 所以，`a:active`必须放在`a:hover`之后

1.  在使用table表现数据时，有时候表现出来的会比自己实际设置的宽度要宽，为此需要设置下面哪些属性值？(没看清楚是多选题)  
    正确答案: A D 你的答案: A (错误)

*  cellpadding=”0″
 *  padding:0
 *  margin:0
 *  cellspacing=”0″

> 单元格边距(表格填充)(`cellpadding`) – 代表单元格外面的一个距离,用于隔开**单元格与单元格**空间；  
> 单元格间距(表格间距)(`cellspacing`) – 代表**表格边框与单元格补白**的距离,也是单元格补白之间的距离。  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]

1.  iframe的使用场景有？

> 1.  与第三方域名下的页面共享cookie
> 2.  上传图片，避免当前页刷新
> 3.  左边固定右边自适应的布局
> 4.  资源加载

1.  `<input>`元素的type属性的取值可以是( )

*  image
 *  checkbox
 *  button
 *  select  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]

1.  下面有关CSS sprites说法错误的是？  
    正确答案: C 你的答案: D (错误)  
    A. 允许你将一个页面涉及到的所有零星图片都包含到一张大图中去  
    B. 利用CSS的“background-image”，“background-repeat”，“background-position”的组合进行背景定位  
    C. CSS Sprites虽然增加了总的图片的字节，但是很好地减少网页的http请求，从而大大的提高页面的性能  
    D. CSS Sprites整理起来更为方便，同一个按钮不同状态的图片也不需要一个个切割出来并个别命名

> CSS Sprites  
> 1.简介  
> CSS Sprites在国内很多人叫css精灵，是一种**网页图片应用处理方式**。它**允许将一个页面涉及到的所有零星图片都包含到一张大图中**， 利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位， 访问页面时**避免图片载入缓慢的现象**。  
> 2.优点  
> （1）CSS Sprites能很好地减少网页的http请求，从而大大的提高页面的性能，这是CSS Sprites最大的优点，也是其被广泛传播和应用的主要原因；  
> （2）CSS Sprites能减少图片的字节；曾经比较过多次3张图片合并成1张图片的字节总是小于这3张图片的字节总和，所以c错误  
> （3）CSS Sprites解决了网页设计师在图片命名上的困扰，只需对一张集合的图片命名，不需要对每一个小图片进行命名，从而提高了网页制作效率。  
> （4）CSS Sprites只需要修改一张或少张图片的颜色或样式来改变整个网页的风格。  
> 3.缺点  
> （1）图片合并麻烦：图片合并时，需要把多张图片有序的合理的合并成一张图片，并留好足够的空间防止版块出现不必要的背景。  
> （2）图片适应性差：在高分辨的屏幕下自适应页面，若图片不够宽会出现背景断裂。  
> （3）图片定位繁琐：开发时需要通过工具测量计算每个背景单元的精确位置。  
> （4）可维护性差：页面背景需要少许改动，可能要修改部分或整张已合并的图片，进而要改动css。在避免改动图片的前提下，又只能（最好）往下追加图片，但这样增加了图片字节。

1.  关于 animation-timing-function 下列说法正确的是？()  
    正确答案: B 你的答案: A (错误)

*  linear 默认动画，动画从头到尾的速度是相同的
 *  ease 默认动画，动画以低速开始，然后加快，在结束前变慢
 *  cubic-bezier(n,n,n,n)，在 cubic-bezier 函数中自己的值。可能的值是从 0 到 100 的数值
 *  ease-in 动画以低速结束

> A错误，因为默认样式为ease![这里是引用][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]  
> ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]

1.  下面的 HTML 代码中符合规范的是 ( )  
    正确答案: D 你的答案: B (错误)

> D：有个特别的元素，一个是`p`一个是`a`，p是块元素，但是其不能包含除了它本身之外的任何块元素，a是内联元素，但是它可以包含除了它本身外的任意块元素  
> B：tr没有结束符/

1.  下列哪些功能可以通过Cookie来实现？（ ）  
    正确答案: A B C 你的答案: A B (错误)

*  记录访问者的信息
 *  在页面之间传递信息
 *  自动识别用户
 *  对数据库进行操作

> A 项，访问者的信息一般都可以处理成 kv 键值对的形式，故可以保存在 Cookie 中，正确。  
> B 项，通过设置 Cookie 的 path 等属性，可以在特定域名或 URI 下共享 Cookie 信息，正确。  
> C 项，通过在 Cookie 中保存用户uid、服务器会话sid等方法，可以记录用户登录状态，正确。  
> D 项，Cookie 是保存在用户浏览器上的小文本文件，不是数据库，也没有提供操作数据库的 API，故此项错误。

1.  下列哪些元素在语义上可以用于强调内容？  
    正确答案: A B 你的答案: A B C (错误)

*  strong
 *  em
 *  b
 *  big

> ![这里是引用][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]  
> `b`只是展示在浏览器视觉上的加粗，但是没有任何语义，搜索引擎爬虫不能识别那是加粗强调效果

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191215152710793.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 1]: https://img-blog.csdnimg.cn/20191215160108701.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200205125005545.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20200205125038789.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20200205125813926.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQyNzAxOTk5,size_16,color_FFFFFF,t_70