前端考试题型
垃圾考试题型也不知道塞到哪里去，就塞这里了
一、语义标记
请列举五个不同类型的语义标记，并一一说明其语义及用法
- 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，是阅读器去访问，能不能有个特效，结构是可以随意乱用的
1544
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
