本篇内容适合新手小白以及想系统回顾前端知识的开发者。基础知识是前端一面一定会问的,如果你在基础知识这里翻了车,面试官可能不会给你展示其它能力的机会,所以大家千万不要因为基础知识错过了自己心仪的公司。今天就用这28道前端面试题来测试一下自己对于前端基础的掌握吧~
1.字符集
utf-8是目前最常用的字符集编码方式,常用的字符集编码方式还有gbk和gb2312;
gb2312简单中文,包括6763个汉字;
BIG5繁体中文,港澳台等用;
GBK包含全部中文字符,是GB2312的扩展,加入对繁体字的支持,兼容GB2312;
UTF-8则包含全世界所有国家需要用到的字符;
记住一点:以后我们统统使用UTF-8字符集,这样就避免出现字符集不统一而引起乱码的情况了。
2.标题标签
单词缩写:head 头部、标题
为了使网页更具有语义化,我们经常会在页面中用到标题标签,HTML提供了6个等级的标题,即:
标题标签语义:作为标题使用,并且依据重要性递减!
其基本语法格式如下:
注意:h1标签因为重要,尽量少用,一般h1都是给logo使用。
3.段落标签
单词缩写:paragraph 段落
在网页中要把文字有条理的显示出来,离不来段落标签,就如同写文章需要首行缩进、需要分段一样,整个网页也可以分为若干个段落。
段落标签:
是HTML文档中最常见的标签,默认情况下,文本在一个段落中会根据浏览器窗口的大小自动换行。例如以下的文本,就随着窗口大小的变化换行:
4.水平线标签
单词缩写:horizontal横线
在网页中常常看到一些水平线讲段落与段落之间隔开,使得文档结构清晰,层次分明。这些水平线可以通过插入图片实现,也可以简单的通过标记来完成,其基本语法格式如下:
横线如下图:
5.换行标签
在HTML中一个段落的文字会从左到右依次排列,直到浏览器窗口的右端,然后自行换行。如果希望某段文本强制换行显示,就需要使用换行标签。<br/>
这时如果还像在word中直接敲回车键换行就不起作用了。
6.div span标签
div span是没有语义的,是我们网页布局主要的两个盒子;
div就是分割、分区的意思,其实有很多div来组合网页;
span跨度、跨距、范围。
7.文本格式化标签
在网页中有时需要为文字设置粗体、斜体或者下划线效果,这时候就需要用到HTML中的文本格式化标记,使文字以特殊的方式显示。
8.图像标签
图像标签:img
该语法中src属性用于指定图像文件的路径和文件名,它是img标签的必要属性。<img src=“图像URL”/>
9.链接标签
在HTML中创建超链接非常简单,只需用标签环绕需要被链接的对象即可,其基本语法格式如下:
<a href=“跳转目标”target=“目标窗口的弹出方式”>文本或图像</a>
href:用于指定链接目标的url地址,当为标签应用href属性时,它就具有了超链接的功能。
Target:用于指定链接页面的打开方式,其取值有self和blank两种,其中self为默认值,blank为在新窗口中打开方式。
10.锚点定位
通过创建锚点链接,用户能够快速定位到目标内容。
11.base标签
base可以设置整体链接的打开状态。<base target=“blank”/>
12.特殊字符标签
13.注释标签
多写注释是非常好的写代码习惯,团队协作更顺畅。注释是写给队友看的,浏览器是不执行的。例如:
14.相对路径
路径可以分为两种:相对路径和绝对路径
相对路径:
(1) 图像文件和HTML文件位于同一文件夹,只需要输入图像文件的名称即可,如<img src=“logo.gif”>
.
(2) 图像文件位于HTML文件的下一级文件夹,输入文件夹名和文件名,之间用“/”隔开,如<img src=“img/img01/logo.gif”/>
.
(3) 图像文件位于HTML文件的上一级文件夹,在文件名之前加入“../”,如果是上两级,则需要使用“../../”,以此类推,如<img src=“../logo.gif”/>
.
绝对路径:
“D:webimgiogo.gif”,或者完整的网络地址。
15.无须列表
无需列表的各个列表项之间没有顺序级别之分,是并列的,起基本语法格式如下:
16.有序列表
有序列表即为有排列顺序的列表,其各个列表项按照一定的顺序排列定义,有序列表的基本语法格式如下:
17.自定义列表
定义列表常用于对术语或名词进行解释和描述,定义列表的列表项前没有任何项目符号,其基本语法如下:
18.CSS的书写方式
书写方式有三种:嵌入式、外链式、行内式。
嵌入式:将CSS代码嵌入到HTML文件中,嵌入式是通过HTML中的<style>
标签将CSS代码嵌入到HTML网页中!
语法规则:<style type=“text/css”>
/*书写css代码*/
选择器(属性:值;属性;值)
</style>
如果我们使用的是HTML5的文档,type属性可以省略不写!
注意:<style></style>
它可以出现在HTML中的任何地方,但是一般情况我们只会将它放置在head标签里面。
外链式:
外链式是指单独写一个以.css为扩展名的文件,然后在<head></head>
标签中使用<link/>
标签,将这个css文件链接到html文件中。
注意:css文件不能单独的运行,它必须要依赖于HTML文件!
语法格式:
代码示例:
我们一定要确保css文件已经被正确的引入成功!
link标签可以有多个,一个HTML页面可以同时引入多个单独的css文件。
行内式:
将css代码书写在HTML标签的style属性中。
style是一个通用属性,每一个标签里面都拥有这个属性!
语法格式:<标签名 style=“属性:值;属性;值;”></标签名>
总结:
-使用嵌入式的方式来书写css代码,它只能作用于当前的HTML文件。
-使用外链式的方式来书写css代码,它可以作用于多个HTML文件。
19.注释
格式:/*注释的内容*/
注意:千万不要在css代码中使用HTML的注释。
20.基本选择器
选择器是指通过一定的语法规则选取到对应的HTML标记,然后给这个对应的HTML标记设置样式。
选择器分为四大类:基本选择器、复合选择器、伪类选择器、属性选择器。
通用选择器:
标签选择器:
类选择器:
Id选择器:
21.尺寸样式属性
问:<span></span>
能够设置宽度、高度吗?
答:不可以,因为span标签式一个行内元素,它是不可以设置宽度和高度的,只有块级元素才可以设置宽度与高度。
22.文本属性
23.字体属性
关于字体:一般很特殊的字体,网站上面都是使用图片来表示,是否能够显示此字体是根据用户电脑里面是否有对应的字体文件,如果没有该文件就会显示为宋体。
24.复合选择器
25.列表样式属性
这里的列表指的是:无序列表和有序列表。
在整个网页布局中无序列表使用的是最多的。
list-style-image:将列表前面的项目符号设置为一张图片,它的值是:url(图片的地址)
list-style:这个属性是一个简写属性,它集成了上面三个属性的功能,可以同时设置上面的三个属性,每一个属性值之前使用空格分隔!它的属性值可以有一个也可以有两个也可以有三个,其属性值个数不定,位置也不定!
26.伪类选择器
伪类选择器是用来给超级链接的不同状态设置样式。
超级链接的不同状态:
-正常状态 超链接没有被访问 :link
-访问过后状态 超链接已经被访问 :visited
-鼠标放上状态 鼠标放在超链接上面,但是并没有将鼠标的左键按下去 :hover
-激活状态 鼠标左键已经按下去了,但是并没有将鼠标的左键弹出 :active
伪类选择器都是带有冒号“:”
:link
:visited
:hover
:active
注意:
超链接的不同状态它其实是有顺序,也就是说伪类选择器设置其实是有顺序。
如果不按照伪类选择器的顺序,那么样式就会失效。
顺序:要遵守“爱恨原则”,要先有爱,才有恨。
27.属性选择器
属性选择器它是与标签的属性名和属性值有关。
属性选择器是通过标签的属性名和属性值来匹配元素。
attr是英文单词“attribute”的简写,中文意思“属性” 属性名
val是英文单词“value”的简写,中文意思是“值” 属性值
28.JavaScript语句
程序的三种基本结构
顺序结构:从上到下执行的代码就是顺序结构,程序默认就是由上到下顺序执行的;
分支结构:根据不同的情况及判断,执行对应代码;
循环结构:重复执行一段代码;
If判断:
switch-case的用法:
While循环:
do-while循环:
For循环:
Continue和break
break立即跳出整个循环,即循环结果,开始执行循环后面的内容;
continue立即跳出当前循环,继续下一次循环。
代码的执行流程分为顺序、分支和循环三种结构,顺序结构是默认的,判断结构主要有if-else和switch-case两种,循环结构有while、do-while、for三种,其中continue和break是跳出循环。
更多专业知识,面试技巧就在阿里云开发者社区,持续更新中……
感谢浏览~
本内容来源:阿里云开发者社区学习中心-前端开发学习路线