Web前端—入门篇—练习题

一、简答题

1. html 中 title 属性和 alt 属性的区别?

【1】Alt属性
1、Alt属性（注意是“属性”而不是“标签”）包括替换说明，对于图像和图像热点是必须的。它只能用在img、area和input元素中（包括applet元素）。对于input元素，alt属性意在用来替换提交按钮的图片。
2、使用alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明。这包括那些使用本来就不支持图像显示或者图像显示被关闭的浏览器的用户，视觉障碍的用户和使用屏幕阅读器的用户。替换文字是用来替代图像而不是提供额外说明文字的。
3、文字的图像图片设置替换文字是最简单的，图像中包含的文字一般来说就可以作为alt属性值。Alt属性值得长度必须少于100个英文字符或者用户必须保证替换文字尽可能的短。

【2】title属性为设置该属性的元素提供建议性的信息。
1、title属性可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。但是并不是必须的。可能这正是为什么很多人不明白何时使用它。
2、使用title属性提供非本质的额外信息。大部分的可视化浏览器在鼠标悬浮在特定元素上时显示title文字为提示信息，然而这又由制造商来决定如何渲染title文字。一些浏览器会将title文字显示在状态栏里。
3、title属性有一个很好的用途，即为链接添加描述性文字，特别是当连接本身并不是十分清楚的表达了链接的目的。这样就使得访问者知道那些链接将会带他们到什么地方，他们就不会加载一个可能完全不感兴趣的页面。另外一个潜在的应用就是为图像提供额外的说明信息，比如日期或者其他非本质的信息。
【3】在img标签中的区别

2. 请说出几个常用的块级元素和行内元素.
1、行内元素会在一条直线上排列（默认宽度只与内容有关），都是同一行的，水平方向排列。
2、块级元素各占据一行（默认宽度是它本身父容器的100%（和父元素的宽度一值），与内容无关），垂直方向排列。块级元素从新行开始，结束接着一个断行。
3、块级元素可以包含行内元素和块级元素。
行内元素不能包含块级元素，只能包含文本或者其他行内元素
4、行内元素与块级元素属性的不同，主要是盒模型属性上：行内元素设置 width无效，height无效(可以设置line-height)，margin上下无效，padding上下无效

块级元素 li,p,div,h1,table

行内元素a,span,sub,sup,i,b

3. 介绍一下 CSS 的盒子模型?

在一个文档中，每个元素都被表示为一个矩形的盒子。确定这些盒子的尺寸, 属性 — 像它的颜色，背景，边框方面 — 和位置是渲染引擎的目标。
在CSS中，使用标准盒模型描述这些矩形盒子中的每一个。这个模型描述了元素所占空间的内容。每个盒子有四个边：外边距边, 边框边, 内填充边与内容边。

4. JavaScript 里有哪些数据类型
   字符串值，数值，布尔值，数组，对象。

var length = 7;                             // 数字
var lastName = "Gates";                      // 字符串
var cars = ["Porsche", "Volvo", "BMW"];         // 数组
var x = {firstName:"Bill", lastName:"Gates"};    // 对象 

5. JS 怎么实现一个类。怎么实例化这个类。
   严格的说，JavaScript 是基于对象的编程语言，而不是面向对象的编程语言。
   在面向对象的编程语言中（如Java、C++、C#、PHP等），声明一个类使用 class 关键字。
   例如：public class Person{}
   但是在JavaScript中，没有声明类的关键字，也没有办法对类的访问权限进行控制。

JavaScript使用函数来定义类。

语法：
function className(){
// 具体操作
}

function ren(name,age){
    this.name=name;
    this.age=age;
    this.study=function(){
        alert('我会学习');
    }
    this.eat=function(){
        alert('我会吃饭');
    }
}

创建对象（类的实例化）

创建对象的过程也是类实例化的过程。
在JavaScript中，创建对象（即类的实例化）使用 new 关键字。
语法：
new className();
6. 请列举五个常用的 Javascript DOM 方法
一、

1、getElementById

2、getElementsByClassName

3、getElementsByTagName

4、getAttribute

5、setAttribute

二、

其中可以从document对象调用获取元素节点有以下三种方法

1、getElementById

document.getElementById(id) 根据ID，将返回一个与那个有着同样id属性的元素节点对应的对象

2、getElementsByClassName

document.getElementsByClassName(class)根据类名，将返回一个对象数组，对应着文档里一组特定的元素节点

3、getElementsByTagName

element.getElementsByTagName(Tag) 根据标签名，将返回一个对象数组，对应着文档里一组特定的元素节点

其次是不能从document对象中调用，只能通过元素节点对象调用的两种方法

1、getAttribute

object.getAttribute(attribute) 只用一个参数，打算查询，获取的属性的名字

2、setAttribute

object.setAttribute(attribute，value)，可以对属性节点的值做出修改
二. 项目实例

1. 导航栏:
   网站使用导航栏是为了让访问者更清晰明朗的找到所需要的资源区域,寻找资源。
   设置导航栏如下:
   

2. 特征布局:图片列表
   

3. 特征布局:淘宝主页

4. 电影排行榜

5. 用户登录注册页面
   参考网址: https://www.awwwards.com/6.
   

6.仿腾讯微博效果图
参考网址: http://www.fgm.cc/learn/lesson6/02.html