HTML高频面试题

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

神仙奶奶-

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

阅读量157

点赞数

本文链接：https://blog.csdn.net/lms1231/article/details/118659330

版权

本文详细介绍了HTML在面试中常见的问题，包括div+css布局的优势、HTML的兼容性问题及解决方案、HTML5的新特性和移除的元素、新表单属性、Canvas元素的作用，以及CSS和JS的优化技巧。此外，还探讨了页面结构、行为层和表示层的构成，圆形可点击区域的实现方法，以及link和@import的区别。HTML语义化的优点也进行了阐述。

摘要由CSDN通过智能技术生成

1. div+css 的布局较 table 布局有什么优点？

分离方便改版快清晰简洁 seo

1）.改版的时候更方便只要改 css 文件。

2）.页面加载速度更快、结构化清晰、页面显示简洁。

3）.表现与结构相分离。

4）.易于优化（seo）搜索引擎更友好，排名更容易靠前。

2.html 常见兼容性问题？

1）.双边距 BUG float 引起的，解决办法: 使用 display解决

2）.3 像素问题使用 float 引起的，解决办法: 使用 dislpay:inline -3px

3）.超链接 hover 点击后失效，解决办法: 使用正确的书写顺序 link visited hover active

4）.Ie z-index 问题，解决办法: 给父级添加 position:relative

5）.Png 透明，解决办法: 使用 js 代码

6）.Min-height 最小高度，解决办法: ！Important 解决

7）.select 在 ie6 下遮盖，解决办法: 使用 iframe 嵌套

8）.为什么没有办法定义 1px 左右的宽度容器，解决办法: （IE6 默认的行高造成的，使用 over:hidden,zoom:0.08 line-height:1px）

9）.IE5-8 不支持 opacity，解决办法：

<!-- .opacity {

opacity: 0.4;

filter: alpha(opacity=60); /_ for IE5-7 _/

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)"; /_ for IE 8_/

} -->

10）.IE6 不支持 PNG 透明背景，解决办法: IE6 下使用 gif 图片

3.html5 有哪些新特性、移除了那些元素？

新特性：

拖拽释放(Drag and drop) API

语义化更好的内容标签（header,nav,footer,aside,article,section）

音频、视频 API(audio,video)

画布(Canvas) API

地理(Geolocation) API

本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失；

sessionStorage 的数据在浏览器关闭后自动删除

表单控件，calendar、date、time、email、url、search

新的技术 webworker, websocket, Geolocation

移除的元素：

纯表现的元素：basefont，big，center，font, s，strike，tt，u；

对可用性产生负面影响的元素：frame，frameset，noframes；

4.HTML5 引入什么新的表单属性？

Datalist datetime output keygen date month week time number range emailurl

5.HTML5 Canvas 元素有什么用？

Canvas 元素用于在网页上绘制图形，该元素标签强大之处在于可以直接在 HTML 上进行图形操作。

6.为什么最好把 CSS 的<link>标签放在<head></head>之间？为什么最好把 JS 的<script>标签恰好放在</body>之前，有例外情况吗?

把<link>放在<head>中把<link>标签放在<head></head>之间是规范要求的内容。此外，这种做法可以让页面逐步呈现，提高了用户体验。将样式表放在文档底部附近，会使许多浏览器（包括 Internet Explorer）不能逐步呈现页面。一些浏览器会阻止渲染，以避免在页面样式发生变化时，重新绘制页面中的元素。这种做法可以防止呈现给用户空白的页面或没有样式的内容。

把<script>标签恰好放在</body>之前

脚本在下载和执行期间会阻止 HTML 解析。把<script>标签放在底部，保证 HTML 首先完成解析，将页面尽早呈现给用户。

例外情况是当你的脚本里包含document.write()时。但是现在，document.write()不推荐使用。同时，将<script>标签放在底部，意味着浏览器不能开始下载脚本，直到整个文档（document）被解析。也许，对此比较好的做法是，<script>使用defer属性，放在<head>中。

7.严格模式与混杂模式

严格模式：以浏览器支持的最高标准运行

混杂模式：页面以宽松向下兼容的方式显示，模拟老式浏览器的行为

8.前端页面有哪三层构成，分别是什么？作用是什么？

分成：结构层、表示层、行为层。

1）结构层（structural layer）

由 HTML 或 XHTML 之类的标记语言负责创建。标签，也就是那些出现在尖括号里的单词，对网页内容的语义含义做出了描述，但这些标签不包含任何关于如何显示有关内容的信息。例如，P 标签表达了这样一种语义：“这是一个文本段。”

2）表示层（presentation layer）

由 CSS 负责创建。 CSS 对“如何显示有关内容”的问题做出了回答。

3）行为层（behaviorlayer）

负责回答“内容应该如何对事件做出反应”这一问题。这是 Javascript 语言和 DOM 主宰的领域。

9.如何在页面上实现一个圆形的可点击区域？

css3、js、map 加 area

1）.border-radius (css3)

对于圆形，最直接的方法想到的就是 css3 的圆角属性，这个属性可以将 html 元素的形状设置为圆形，这之后你想对该圆形区域设置什么事件就设置什么事件(当然包括点击)。（这里就不做具体的 test 了）

2）.通过事件坐标来实现（js）

也就是通过 js 来进行一个区域判断，进而简介地的形成可点区域，以下给出主要的 js 测试代码：

// 获取目标元素
var box = document.getElementById("box");

// 对目标元素target的圆形区域进行一个点击事件绑定
function bindClickOnCircleArea(target, callback) {
  target.onclick = function(e) {
    e = e || window.event;

    // target中心点的坐标
    var x1 = 100;
    var y1 = 100;

    // 事件源坐标
    var x2 = e.offsetX;
    var y2 = e.offsetY;

    // 校验是否在圆形点击区，在的话就执行callback回调
    // 计算事件触发点与target中心的位置
    var len = Math.abs(Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2)));
    // 通过半径进行校验
    if (len <= 100) {
      callback();
    } else {
      alert("死鬼，跑哪去啊，你老婆我是黄皮肤还是白皮肤都分不清了吗");
    }
  };
}

// 执行
bindClickOnCircleArea(box, function() {
  alert("老婆，你让我好找啊，呜呜呜");
});

3）.通过 map 加 area

<img src="../imgs/test.jpg" width="200" border="0" usemap="#Map" />
<map name="Map" id="Map">
  <area
    shape="circle"
    coords="100,100,100"
    href="http://www.baidu.com"
    target="_blank"
  />
</map>

10.页面导入样式时，使用link和@import有什么区别？

相同的地方，都是外部引用CSS方式，区别：