【前端面试】HTML5+CSS3初级面试2

最新推荐文章于 2024-08-09 18:20:18 发布

Wendy-lxq

最新推荐文章于 2024-08-09 18:20:18 发布

阅读量7.2k

点赞数 6

本文链接：https://blog.csdn.net/u010297791/article/details/54932890

版权

前端面试专栏收录该内容

8 篇文章 5 订阅

订阅专栏

1、请用代码写出<video>标签的使用方法。

方法一：<video src="test.mp4">video标签</video>。

方法二：<video><source src="test.avi">video标签</video>。

因为现阶段不同的浏览器支持的视频格式是不同的，当我们有多种格式的视频样式时，我们会用第二种方法来做兼容调试。

2、HTML5有哪些不同类型的存储。

HTML5支持本地存储，速度快而且安全，在之前版本中是通过Cookie实现的。

有两种不同的对象可用来存储数据。

第一种：localStorage，适用于长期存储数据，浏览器关闭后数据不丢失。

第二种：sessionStorage，存储的数据在浏览器关闭之后自动删除。

3、写出Web1.0和Web2.0常用的HTML标签。

Web1.0常用的HTML标签：<u>、<b>、<i>、<table>、<p>、</br>、<nobr>、<hr>

Web2.0常用的HTML标签：<article>、<header>、<nav>、<section>、<meter>、<progress>、<datalist>

4、HTML元素的分类及其特点。

1）HTML元素分为块级元素和行内元素

块级元素：dl、div、form、 h1-h6、 p 、ul等

行内元素：a、 br、 input 、span、 select等

2）块级元素和行内元素的特点

块级元素：总是在新行上开始；高度、行高以及外边距和内边距可以控制；宽度默认是容器的100%；可以容纳内联元素和其他块级元素。

行内元素：和其他元素在同一行上；高和外边距不可改变；宽度就是它的文字和图片的宽度，不可改变；内联元素只能容纳文本或者其他内联元素。

5、CSS代码的7个优化规则。

1）使用简写；

2）避免使用hack；

3）使用留白；

4）移除多余的结构和重设；

5）让CSS保证日后的维护；

6）记录工作（标记向导和样式表向导）；

7）压缩使用。

6、写出中英文强制换行的代码以及文字超长显示的代码。

1）word-break:break-all；只对英文起作用，以字母作为换行依据。

2）word-wrap:break-word; 只对英文起作用，以单词作为换行依据。

3）white-space:pre-wrap；只对中文起作用，强制换行。

4）white-space:nowrap；强制不换行，都起作用。

5）white-space:nowrap;

overflow:hidden;

text-overflow:ellipsis；

三个语句必须都要写，不换行，超出部分隐藏且以省略号形式出现。

7、画出CSS的盒模型。

盒模型是CSS中的重要概念，它是所有布局控制的基础，在CSS标准中，一个盒模型包括四个区，分别是内框、内边距、边框、外边距。在指定一个元素的大小时，就是根据盒模型中各个部分的大小来决定的。其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型。他们对盒子模型的解释各不相同。

从上图可以看到标准 W3C盒子模型的范围包括 margin、border、padding、content，并且 content 部分不包含其他部分。

从上图可以看到IE盒子模型的范围也包括 margin、border、padding、content，和标准 w3c 盒子模型不同的是：ie 盒子模型的 content 部分包含了 border 和 pading。

8、宽度自适应三栏的布局方式有哪些。

宽度自适应三栏的布局方式，在这里介绍两种：

1）绝对定位法

左右两栏采用绝对定位，分别固定在页面的左右两侧，中间的主体栏用左右margin值撑开距离，于是实现了三栏自适应布局。

2）自身浮动法

此方法代码最简单，应用了标签浮动跟随的特性。左栏左浮动，右栏右浮动，主体直接放后面，就实现了自适应。

9、用js实现图片文件上传，而且可以改变其样式

在开发中，文件上传必不可少，<input type="file" /> 是常用的上传标签，但是它长得又丑、浏览的字样不能换，我们一般会用让，<input type="file" />隐藏，点其他的标签（图片等）来时实现选择文件上传功能。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现input file文件上传</title>
    <style>
        .box{
            position: relative;
            width:119px;
            height:37px;
            background-color: #53AD3F;
            line-height: 37px;
            text-align: center;
            color: #fff;
            cursor: pointer;
            overflow: hidden;
            z-index: 1;
        }
        .box input{
            position: absolute;
            width: 119px;
            height: 40px;
            line-height:40px;
            font-size:23px;
            opacity:0;
            filter: "alpha(opacity:0)";
            filter: alpha(opacity:0);
            left:-5px;
            top:-2px;
            cursor: pointer;
            z-index: 2;

        }
    </style>
</head>
<body>
<form id="form1" method="post" enctype="multipart/form-data">
    <div>
        <div class="box">
            <input type="file" name="f" id="f"/>
            选择图片
        </div>
    </div>

</form>
</body>
</html>

效果：

注意：

1）用一个不透明度为0的 <input type="file" />盖在要用户可见的标签（或图片等）上，让用户点击。
2）用 width height line-height font-size 来控制<input type="file" />右侧浏览按钮的大小。
3）用 left top （right 、 bottum）来控制<input type="file" />右侧浏览按钮的位置，可以设置为负值。
4）用z-index来设置它们的层覆盖关系。
5）form 必须有enctype="multipart/form-data"标记才能上传文件。

前端面试系列文章：

1、【前端面试】HTML5+CSS3初级面试1

2、【前端面试】HTML5+CSS3初级面试2

3、【前端面试】HTML5+CSS3初级面试3

4、【前端面试】HTML5+CSS3初级面试4