渡一开班考试题

11个月前 ⋅ 0

1、下列哪个标签告诉浏览器把其中的文本表示为强调的内容？（B）[单选题]
A. <br />
B.  <em></em>
C. <div></div>
D.  <h1></h1>
解析：
A. <br /> ：换行标签
B.  <em></em>：em 是 emphasis 的缩写，意为强调，作用为告诉浏览器把其中的文本表示为强调的内容，通常浏览器会把 em 元素包裹的文本展示为斜体，但是要记住其还有强调的作用，跟 i 标签不一样，i 仅仅是将文本变为斜体而已，除此之外还要记住另一个标签 <strong> ，<strong> 标签也有强调文本的作用，表示文本十分重要，会将字体加粗展示， <b> 标签的展示和 <strong> 标签一致，但是这里要注意，<b> 和 <i> 一样，只是有了样式的改变而已，无任何其他作用。
那么，<em> 和 <strong> 的强调哪个更重一点？

  • 在html4中，<strong> 代表一个更强的强调，强调程度高于 <em>
  • 在html5中，<strong> 被描述为表示“内容强烈的重要性”，这是一个比较重要的区别。
    • <em> 标签用于改变一个句子的意思，如：我喜欢胡萝卜 和 我喜欢胡萝卜，分别强调 喜欢 和 胡萝卜
    • <strong> 用来对一个句子的部分增加重要性，如：警告！这非常危险
    • <strong> 和 <em> 都可以分别通过嵌套来增加相对重要性或强调重点

C. <div></div>：定义文档中的分区
D.  <h1></h1>：标题标签，从 <h1> 到 <h6> ，<h1> 定义最大的标题，<h6> 定义最小的标题

2、下列哪个不是块元素？（D）[单选题]
A. <div>
B. <p>
C. <h1>
D. <span>
解析：
A. <div> 容器标签，块级元素
B. <p> 段落标签，块级元素
C. <h1> 标题标签，块级元素
D. <span> 容器标签，内联元素

html元素被分为两种元素：块级元素 和 内联(级)元素（W3C 的 HTML4 规范：内联元素，W3C的CSS规范：内联级元素）

1、块级元素：
常见的块级元素有：div、p、h1、ul、ol、li、table...
注意：  块级元素 和 display 为 block 的元素 不是一个概念。例如 <li> 元素默认的 display 值是 list-item，<table> 元素默认的 display 值是 table，但是他们均是块级元素，因为他们都符合块级元素的基本特征，也就是在一个水平方向上只能单独显示一个元素，多个块级元素则换行显示。

事实上，每个元素都有两个盒子：外在盒子 和 内在盒子（容器盒子）

  • 外在盒子负责元素是可以一行显示，还是只能换行显示；
  • 内在盒子负责宽高以及内容的实现。

所以，按照 display 的属性值的不同：

  • 值为 block 的元素的盒子实际由 外在的 块级盒子，和内在的  块级容器盒子 组成
  • 值为 inline-block 的元素，有外在 的内联盒子 和 内在的 块级容器盒子 组成
  • 值为 inline 的元素 则内外均为 内联盒子

问：display: inline-table; 该盒子是如何组成的？
答：由外在的内联盒子，和内在的table盒子，所以得到的是一个可以和文字在一行中显示的表格。

2、内联元素：
常见的内联元素有：span、img、button、input...
注意： 内联元素 和 display 为 inline 的元素 不是一个概念，内联元素 的 内联 特指 外在盒子 ，及 inline-block 和 inline-table 都是 内联元素，因为他们的外在盒子都是内联盒子，display: inline; 的元素也是 内联元素，所以，button 按钮元素是内联元素，因为其 display 默认值是 inline-block，img 图片元素也是内联元素，因为其display 默认值是 inline。                                                                                                                                                                                                                                                                                                                                                                                  

4、请选出用于标题的标签（AD）。[多选题]
A. <h1></h1>
B. <h7></h7>
C. <em></em>
D. <h3></h3>
解析：
html中的标题标签有：h1 - h6

5、通常我们在浏览器内容区看到的内容，都是放入在（D）之间。[单选题]
A. <!doctype html>
B. <html></html>
C. <head></head>
D. <body></body>
解析：没有解析，还用解析？？不用，over。

6、img标签中src属性表示（A）。[单选题]
A. 图片存储的地址
B. 图片的描述
C. 图片的名称
D. 图片大小
解析：

  • src：图片存储的地址（不填这个，就没法展示图片！！！）
  • alt：图片的描述（加载不出来图片的时候，就展示这个文字）
  • title：图片的名称（把鼠标移到图片上，鼠标图标右下角展示的文字）
  • width：图片大小（不说了就）

7、以下颜色值错误的是： （A）[单选题]
A. rgb(255， 256， 244)
B. #009880
C. #000
D. red
解析：
设置字体颜色。可设置规则：

  • 纯英文单词，如：green、red、blue、yellow、pink等
  • 颜色代码（16进制），如：#000、#fff、#f0f0f0、#ff4400，如果每两位的颜色值是重复的，像 #ff4400 这类的值可以缩写为：#f40
  • 颜色函数，如 rgb(255, 255， 255)，每个颜色值的范围是 [0, 255]，why 255？ 看下面 ↓

先普及一下 多进制 转换为 十进制的方法：
二进制 AB => A2 + B2  即 01 = 02 + 12 = 1
八进制 AB => A8 + B8  即 67 = 68 + 78 = 55
16进制 AB => A16 + B16  即 A3 =  1016 + 38 = 163

找到规律了吗？
n 进制 AB 转换为 十进制的方法为：An + Bn

那么，已知 css 颜色代码 为16进制，最低为 00，最高为 FF，则10进制为：[0, 255]。

8、一个元素的上外边距为45px，右外边距为45px，左外边距为10px，下外边距为45px，以下（AB）中的css样式是错误的。[多选题]
A. margin: 45px 10px 45px 45px
B. margin: 45px 45px 10px
C. margin: 45px 45px 45px 10px
解析：
margin为 设置元素的四个方向上的外边距，也就是 margin-top、margin-right、margin-bottom、margin-left 四个外边距，margin 为四个方向的简写，margin 的应用规则：

  • margin: 10px; 四个边的外边距皆为 10px
  • margin: 10px 20px; 上、下外边距为10px，左右外边距为 20px
  • margin: 10px 20px 30px; 上 外边距为10px，左右外边距为20px，下外边距为30px
  • margin: 10px 20px 30px 40px; 上外边距为1px，右外边距为20px，下外边距为30px，右外边距为40px

9、CSS中clear: both;的作用是什么？（C）[单选题]
A. 清除该元素所有样式
B. 清除该元素父元素的所有样式
C. 指明该元素周围不可出现浮动元素
D. 指明该元素的父元素周围不可出现浮动元素
解析：对于各种网站上（菜鸟教程、w3cschool）的 clear 的解释基本都跟选项上一致，但是此种解释会对理解 clear 的真正意义有所误导（不是不对），这里推荐同学们学习前端时，首先阅读的文档是：mdn。
在 mdn 上 clear 的释义如下：
指定一个元素是否必须移动(清除浮动后)到在它之前的浮动元素下面

其实，对于这句话，我们的中文水平仍然不足以去联想 clear 究竟是干啥的。但从这句话中，我们可以知道，clear 属性设置的是 元素自身如何如何，而不是让 有浮动的元素 如何如何，就管好自己这一摊子的事儿，所以，大家可以对 clear 进行如下理解：

  • none：默认值，左右浮动来就来
  • left：左侧抗浮动
  • right：右侧抗浮动
  • both：两侧抗浮动

也就是说，除了默认值之外，其他的值都是：“任前方风吹草动，我都雷打不动”。
注意： clear 属性只有在块级元素才有效，所以清除浮动 3 件套：

.clear::after {
    content: '';
  display: block; // 这里有一个问题，一定是 block 吗？
  clear: both;
}

10、下面哪个属性不会让 div 脱离文档流（normal flow）？（C）[单选题]
A. position: absolute;
B. position: fixed;
C. position: relative;
D. float: left;
解析：可以代码测试，你可以的~