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

2024-04-27 15:15:51

字体：大中小

来源：转载

供稿：网友

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标准中，一个盒模型包括四个区，分别是内框、内边距、边框、外边距。在指定一个元素的大小时，就是根据盒模型中各个部分的大小来决定的。CSS的盒模型如下所示：

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