前端开发面试笔试题学习---html/css-02

最新推荐文章于 2024-08-25 13:39:45 发布

M612a34

最新推荐文章于 2024-08-25 13:39:45 发布

阅读量467

点赞数

CC 4.0 BY-SA版权

分类专栏：前端开发面试笔试题学习--html/css

本文链接：https://blog.youkuaiyun.com/M612a34/article/details/79159628

前端开发面试笔试题学习--html/css 专栏收录该内容

2 篇文章

订阅专栏

本文介绍了HTML5的新特性，包括新增的标签元素如canvas、video和audio，支持本地离线存储的新特性，以及新的表单控件等。此外还探讨了HTML5在移动设备上的良好表现、响应式设计的支持、离线缓存技术webStorage的应用。

1、 请写出至少20个HTML5标签

2、HTML5 新特性？

为 HTML5 建立的一些规则：

新特性应该基于 HTML、CSS、DOM 以及 JavaScript。
减少对外部插件的需求（比如 Flash）
更优秀的错误处理
更多取代脚本的标记
HTML5 应该独立于设备
开发进程应对公众透明

新特性

HTML5 中的一些有趣的新特性：

用于绘画的 canvas 元素
用于媒介回放的 video 和 audio 元素
对本地离线存储的更好的支持
新的特殊内容元素，比如 article、footer、header、nav、section
新的表单控件，比如 calendar、date、time、email、url、search

视频：

<video src="movie.ogg" controls="controls"></video>

controls 属性供添加播放、暂停和音量控件。

<video> 与 </video> 之间插入的内容是供不支持 video 元素的浏览器显示的：

<video></video>使用DOM进行控制

var myVideo=document.getElementById("video1");

function playPause()
{ 
if (myVideo.paused) 
  myVideo.play(); 
else 
  myVideo.pause(); 
} 

function makeBig()
{ 
myVideo.width=560; 
} 

function makeSmall()
{ 
myVideo.width=320; 
} 

function makeNormal()
{ 
myVideo.width=420; 
}

音频：

<audio src="song.ogg" controls="controls"></audio>control 属性供添加播放、暂停和音量控件。

<audio> 与 </audio> 之间插入的内容是供不支持 audio 元素的浏览器显示的：

audio 元素允许多个 source 元素。source 元素可以链接不同的音频文件。浏览器将使用第一个可识别的格式：
拖放：drag和drop

设置元素可拖放：为了使元素可拖动，把 draggable 属性设置为 true ：

<img draggable="true" />

拖动什么 - ondragstart 和 setData()：

在上面的例子中，ondragstart 属性调用了一个函数，drag(event)，它规定了被拖动的数据。

dataTransfer.setData() 方法设置被拖数据的数据类型和值：

function drag(ev)
{
ev.dataTransfer.setData("Text",ev.target.id);
}

在这个例子中，数据类型是 "Text"，值是可拖动元素的 id ("drag1")。

放到何处 - ondragover：

ondragover 事件规定在何处放置被拖动的数据。

默认地，无法将数据/元素放置到其他元素中。如果需要设置允许放置，我们必须阻止对元素的默认处理方式。

这要通过调用 ondragover 事件的 event.preventDefault() 方法：

event.preventDefault()

当放置被拖数据时，会发生 drop 事件。

在上面的例子中，ondrop 属性调用了一个函数，drop(event)：

function drop(ev)
{
ev.preventDefault();//来避免浏览器对数据的默认处理（drop 事件的默认行为是以链接形式打开）
var data=ev.dataTransfer.getData("Text");//
ev.target.appendChild(document.getElementById(data));//把被拖元素追加到放置元素（目标元素）中

}

canvas：用于在页面上绘制图形

canvas 元素本身是没有绘图能力的。所有的绘制工作必须在 JavaScript 内部完成：

<script type="text/javascript">
var c=document.getElementById("myCanvas"); //用id来寻找canvas元素
var cxt=c.getContext("2d");  //创建context对象
cxt.fillStyle="#FF0000";
cxt.fillRect(0,0,150,75);//fillStyle 方法将其染成红色，fillRect 方法规定了形状、位置和尺寸。
</script>

getContext("2d") 对象是内建的 HTML5 对象，拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。

内联 SVG

什么是内联svg

SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用于定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有损失

在 HTML5 中，您能够将 SVG 元素直接嵌入 HTML 页面中：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>

Geolocation（地理定位）用于定位用户的位置

<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
    {
    navigator.geolocation.getCurrentPosition(showPosition);
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
  }
function showPosition(position)
  {
  x.innerHTML="Latitude: " + position.coords.latitude +
  "<br />Longitude: " + position.coords.longitude;
  }
</script>

在客户端存储数据

HTML5 提供了两种在客户端存储数据的新方法：

localStorage - 没有时间限制的数据存储
sessionStorage - 针对一个 session 的数据存储

之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。

在 HTML5 中，数据不是由每个服务器请求传递的，而是只有在请求时使用数据。它使在不影响网站性能的情况下存储大量数据成为可能。

对于不同的网站，数据存储于不同的区域，并且一个网站只能访问其自身的数据。

HTML5 使用 JavaScript 来存储和访问数据。

2、 谈谈对html5的了解

1.良好的移动性，以移动设备为主。

2.响应式设计，以适应自动变化的屏幕尺寸

3.支持离线缓存技术，webStorage本地缓存

4.新增canvas，video，audio等新标签元素。新特殊内容元素：article，footer，header，nav，section等，新的表单控件：calendar，date，time，email，url，search。

5.地理定位...

6.新增webSocket/webWork技术

3、 列举5种IE hastlayout的属性及其值

haslayout 是Windows Internet Explorer渲染引擎的一个内部组成部分。在Internet Explorer中，一个元素要么自己对自身的内容进行计算大小和组织，要么依赖于父元素来计算尺寸和组织内容。为了调节这两个不同的概念，渲染引擎采用了 hasLayout 的属性，属性值可以为true或false。当一个元素的 hasLayout 属性值为true时，我们说这个元素有一个布局（layout）

部分的 IE 显示的错误，都可以通过激发元素的 haslayout 属性来修正。可以通过设置 css 尺寸属性(width/height)等来激发元素的 haslayout，使其“拥有布局”。如下所示，通过设置以下 css 属性即可。

* display: inline-block
* height: (任何值除了auto)
* float: (left 或 right)
* position: absolute
* width: (任何值除了auto)
* writing-mode: tb-rl
* zoom: (除 normal 外任意值)

Internet Explorer 7 还有一些额外的属性(不完全列表):

* min-height: (任意值)
* max-height: (除 none 外任意值)
* min-width: (任意值)
* max-width: (除 none 外任意值)
* overflow: (除 visible 外任意值)
* overflow-x: (除 visible 外任意值)
* overflow-y: (除 visible 外任意值)
* position: fixed

4、 编写一个布局，页面宽度自适应，最小宽度300px，左边定宽35%，右边定宽65%

</div>

<style>

.container{

height: 600px;

_width: 300px;

min-width: 300px;

}

.left{

width: 35%;

height: 100%;

background: #ff0;