前端编程课件01-HTML+CSS.pdf

01-HTML-CSS-常⻅⾯试题

1.HTML标签有哪些⾏内元素

a

img

picture

span

input

textarea

select

label

2.说说你对元素语义化的理解

元素语义化就是⽤正确的元素做正确的事情。虽然在理论上，所以的html元素都可以通过css样式实现

相同的事情，但是这么做会使事情复杂化，所以我们需要元素语义化来降低复杂度。

元素语义化在我们实际的开发中有很多好处，⽐如：

提⾼代码的阅读性和可维护性;

减少coder之间的沟通成本;

能让语⾳合成⼯具正确识别⽹⻚元素的⽤途，以便做出正确的反应

有利于SEO(SearchEngineOptimization)

3.HTML中有哪些语义化标签

header

footer

main

aside

article

section

address

summary/details

menu

h1/h2/h3/h4/h5/h6

img

p

strong/italic

4.什么是URL编码(URLEncode)

encodeURI⽤来编码URI，其不会编码保留字符。

encodeURIComponent⽤来编码URI参数，除了字符：A-Za-z0-9-_.!~*()，都将会转义。

5.说说你对SEO的理解

SEO就是搜索引擎优化(SearchEngineOptimization)，SEO通过了解搜索引擎的运⾏规则来调整⽹站，

以提⾼⽹站的曝光度,以及⽹站的排名。

Google搜索引擎的⼯作流程主要分为三个阶段：

抓取：Google会使⽤名为“抓取⼯具”的⾃动程序搜索⽹络，以查找新⽹⻚或更新后的⽹⻚。Google会

将这些⽹⻚的地址（即⽹址）存储在⼀个⼤型列表中，以便⽇后查看。我们会通过许多不同的⽅法查找

⽹⻚，但主要⽅法是跟踪我们已知的⽹⻚中的链接。

编⼊索引：Google会访问它通过抓取得知的⽹⻚，并会尝试分析每个⽹⻚的主题。Google会分析⽹⻚

中的内容、图⽚和视频⽂件，尝试了解⽹⻚的主题。这些信息存储在Google索引中，⽽Google索引

是⼀个存储在海量计算机中的巨⼤数据库。

呈现搜索结果：当⽤户在Google上进⾏搜索时，Google会尝试确定最优质的搜索结果。“最佳”结果取

决于许多因素，包括⽤户的位置、语⾔、设备（桌⾯设备或⼿机）以及先前⽤过的搜索查询。例如，在

⽤户搜索“⾃⾏⻋维修店”后，Google向巴黎⽤户显示的答案与向⾹港⽤户显示的答案有所不同。⽀付费

⽤不能提⾼⽹⻚在Google搜索结果中的排名，⽹⻚排名是完全依靠算法完成的。

6.+与~选择器有什么不同

~是匹配元素之后的选择器

+是匹配相邻元素选择器

template

div我是div/div

p我是p/p

p我是p/p

div我是div/div

p我是p/p

div

p我是div下⾯的p/p

p我是div下⾯的p/p

/div

span我是span/span

/template

style

div+p{

color:red;

}

/*第⼀个p标签变红⾊了*/

div~p{

color:red;

}

/*div后⾯的p标签都变成红⾊了*/

/style

7.说明text-align居中的条件

text-align:直接翻译过来设置⽂本的⽔平对⻬⽅式(是继承属性)(是继承属性)

text-align并不控制块元素⾃⼰的对⻬，只控制它的⾏内内容的对⻬

MDN解释:定义⾏内内容（例如⽂字）如何相对它的块⽗元素对⻬(可以设置图⽚居中)

W3C官⽅⽂档解释:设置⾏内(inline-level)元素(没有填满⽗元素)在快级⽗元素的对⻬⽅式

8.line-height为什么可以让⽂字垂直居中？

line-height:两⾏⽂字基线(baselin