前端考试题型
垃圾考试题型也不知道塞到哪里去,就塞这里了
一、语义标记
请列举五个不同类型的语义标记,并一一说明其语义及用法
- 1.块级元素:
div:
含义:页面内容的一个独立组成部分。
作用:
1)划分页首、页尾、页边栏或导航栏等等;
2)表示页面的分栏;
3)将文章进一步分成几个部分,比如正文、评论、文章的元数据等等。
用法:
<div id="header">页面的头部</div>
- 2.行内元素:
含义:与href属性搭配使用时,链接至外部链接,或者同一页的某个锚点。
用法:
<a href="chapter2.html">第二章</a>
- 3.列表元素:
ul, ol, li
含义:表示一维数组的元素。
用法: - 4.表格元素table
th和td:前者用来显示数据的名称,后者用来显示数据的内容。
<table border="1">
<tr>
<th>Month</th>
<th>Savings</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
</tr>
</table>
实例展示:如图
Month | Savings |
---|---|
January | $100 |
为什么要使用语义标记?请说明其优势或益处
正确的使用语义标记,可以更好的刻画文本的结构,易于浏览器等正确显示(或语音朗读)网页的内容。
三、布局
1.请编写代码,实现如图所示的页面布局
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三列布局</title>
<style type="text/css">
*{
margin:0px;
padding:0px;
}
.top{
margin-left:0px;
margin-right:0px;
height:100px;
background-color:lawngreen;
float:none;
}
.bottom{
margin-left:0px;
margin-right:0px;
height:100px;
background-color:mediumslateblue;
float:none;
}
.left{
width:200px;
height:600px;
background-color:pink;
float:left;
}
.right{
width:200px;
height:600px;
background-color:khaki;
float: right;
}
.center{
height:600px;
background :deepskyblue;
margin-left: 202px;
margin-right: 202px;
}
</style>
</head>
<body>
<div class="top">上</div>
<div class="left">左</div>
<div class="right">右</div>
<div class="center">中</div>
<div class="bottom">下</div>
</body>
</html>
2.请列举至少三种浏览器支持的列式布局方式,并说明其各自的优点与缺点
- 浮动方式
- 栅格布局:水平布局方便,纵向居中不方便
- 960.css:
优点:
采用栅格布局把网页宽度固定在960px,使网页不容易变形,大大地减少编写CSS的时间。
缺点:
固定960px的宽度不适应于当前1280的主流屏幕
对移动端的支持不好
不支持响应式布局
不支持构建工具,定制不方便
- 960.css:
-
- bootstrap 栅格系统
优点:
针对主流的屏幕尺寸,预先给出了不同的容器宽度和相应的class,可方便实现响应式布局.
提供了更多方便好用的class,如.row(不再需要手动清除浮动)等.
提供了构建工具支持,可快速定制栅格系统.
缺点:
1.如果有自己特殊的需求,就需要重新定制样式,如果一个网站中有大量的非bootstrap“风格”的样式存在,那么你就需要做大量的css重写,因此也就失去了使用框架的意义。
2.会有兼容问题,虽然网上存在很多兼容IE的办法,但需要引入其他文件,有些还不小,势必导致加载速度变慢,影响用户体验。
- bootstrap 栅格系统
- 原生的CSS布局:自适应 cssgrid
兼容:浮动>栅格>原生
四、解释下列名词,并举一实例说明其用途及用法
- DOM(包括模型本身和API):Document Object Model,文档对象类型,通过 HTML DOM API,可创建、访问、修改、替换、删除 JavaScript HTML 文档的所有元素。
举例说明:改变id为p1元素的值
<p id="p1">Hello World!</p>
<script>
document.getElementById("p1").innerHTML="新文本!";
</script>
- CSS伪类:CSS伪类是用来添加一些选择器的特殊效果。
a:link {color:#000000;} /* 未访问链接*/
a:visited {color:#00FF00;} /* 已访问链接 */
a:hover {color:#FF00FF;} /* 鼠标移动到链接上 */
a:active {color:#0000FF;} /* 鼠标点击时 */
<a href="/css/" target="_blank">这是一个链接</a>
- SCSS:SCSS是CSS预处理语言,它基于CSS的语言风格,但增加了诸如变量、循环、函数和继承等编程语言特性。
$width:50px;
.wt{
width:$width;
}
- 响应式设计:响应式网页设计是伴随移动设备平台兴起而出现的技术,主要解决同一个WEB页面在不同设备和环境中均能获得一致性用户体验的问题.
举例:移动优先的代码设置
<meta name="viewport" content="width=device-width, initial-scale=1.0">
- 元标记:关于如何处理html文档的特殊标记,其目的是方便浏览器正确的解析、处理和渲染html文档的内容。便于搜索引擎机器人查找、分类,互联网应用应该要注意。和显示无关
举例:页面关键词,用于搜索引擎。
<meta name="keywords" content="新闻,新闻中心, 新闻频道">
- BOM:与 DOM 代表浏览器中的文档相似,BOM 代表着浏览器自身
通过 BOM, 网页开发者可以了解到浏览器的信息和运行时的信息,还可以通过程序化的方式操控浏览器
<script>
txt = "<p>浏览器名称: " + navigator.appName + "</p>";
document.getElementById("example").innerHTML=txt;
</script>
- CSS伪元素
CSS伪元素是用来添加一些选择器的特殊效果。
有first-letter,before,after等伪元素
p:first-line
{
color:#ff0000;
font-variant:small-caps;
}
- jquery: jquery 是使用 javascript 编写的第三方工具库,它为原生的javscript增加了许多便利的语法糖、常用功能及工具等.jquery一度成为javscript事实上的标准,它对javascript的所做的许多改进后来被javascript官方吸收和采用.
用法举例:首先先把它引入,然后再使用下面是一个隐藏的例子
<script src="https://cdn.staticfile.org/jquery/2.0.0/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$(this).hide();
});
});
</script>
<button>点我</button>
综合编程
代码
<!DOCTYPE html>
<html>
<style>
.one li{
width:100px;
height:30px;
line-height:30px;
float:left;
text-align:center;
margin-left:10px;
cursor:pointer;
_display:inline;
position:relative;}
li ul{
position:absolute;
left:0;
top:30px;
display:none;}
</style>
<ul class="one">
<li id="li01">
<span>一级菜单</span>
<ul id="ul01">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li id="li02">
<span>一级菜单</span>
<ul id="ul02">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
<li id="li03">
<span>一级菜单</span>
<ul id="ul03">
<li>二级菜单1</li>
<li>二级菜单2</li>
<li>二级菜单3</li>
</ul>
</li>
</ul>
<script>
function fn(canshu1,canshu2){
var li01 = document.getElementById(canshu1);
var ul01 = document.getElementById(canshu2);
li01.onmouseover = function(){
ul01.style.display = "block"
}
li01.onmouseout = function(){
ul01.style.display = "none"
}
}
fn("li01","ul01")
fn("li02","ul02")
fn("li03","ul03")
</script>
</html>
对图中的小图标,列举出可能的实现技术,并说明各自的优劣或适用场景
css sprite:
缺陷:
制作过程比较麻烦、传统图片采用的是栅格图片类型,难以进行响应式设计,如支持平滑缩放、自由着色等
优势:
- 减少网页的http请求,提高性能,这也是CSS Sprites最大的优点,也是其被广泛传播和应用的主要原因;
- 减少图片的字节
- 减少了命名困扰
- 更换风格方便
icon font:
- 利用字体工具将图形图标(icons)转换成 web fonts,形成 icon fonts 库。
- 借助 CSS3 的 @font-face 指令将该资源引入页面。
- 字体是矢量化图形,它天生具有「分辨率无关」的特性,即在任何分辨率和PPI下面,都可以做到完美缩放,不会像传统位图, 如:png,jpeg,放大后有锯齿或模糊现象。
结合本例,谈一谈你对前端开发中结构、样式、行为三者分离的认识
结构:列表
样式:css定位布局
行为:js
图标字体图标
兼容性差
究竟这种现象出现,是属于样式还是行为,特效,事件。
今天是个样式不是行为。
用户有个操作,不会弹出来,又是个行为。
结构:结构和语义有关,如果不是浏览器去9,是阅读器去访问,能不能有个特效,结构是可以随意乱用的