前端面试问题html汇总

时间:2023-03-09 19:09:37
前端面试问题html汇总

1、对WEB标准以及W3C的理解与认识

  结构层 html ;表示层  css;行为层:js;

  标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索机率、使用外链css和js脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件,容易维护、改版方便,不需要变动页面内容、提供打印版本而不需要复制内容、提高网站易用性;

2、什么是盒子模型?

  在网页中,一个元素占有空间的大小由几个部分构成,其中包括元素的内容(content),元素的内边距(padding),元素的边框(border),元素的外边距(margin)四个部分。这四个部分占有的空间中,有的部分可以显示相应的内容,而有的部分只用来分隔相邻的区域或区域。4个部分一起构成了css中元素的盒模型。

3,.xhtml和html有什么区别

  HTML是一种基本的WEB网页设计语言,

  XHTML是一个基于XML的置标语言

  最主要的不同:

  XHTML 元素必须被正确地嵌套,元素必须被关闭,标签名必须用小写字母,文档必须拥有根元素。

4, doctype的两种模式?区分它们有何意义?如何触发这两种模式?

  doctype包含两种模式:严格模式,混杂模式。 
  用于声明文档使用那种规范(html/Xhtml)一般为 严格 过度 基于框架的html文档。(参考链接:http://www.cnblogs.com/youxin/archive/2013/09/29/3345100.html)

  根据Doctype是否存在以及使用哪种DTD来触发其不同的模式。如果Doctype不存在或者其形式不正确那么默认为混杂模式。如果XHTMLl文档中包含完整的Doctype,那么它一般以标准模式呈现。

  严格模式下:页面排版及JS解析是以该浏览器支持的最高标准来执行

  混杂模式:不严格按照标准执行,主要用来兼容旧的浏览器,向后兼容

5,什么是语义化的html片段?为什么要做到html的语义化?

  语义化的HTML就是写出的HTML代码,符合内容的结构化(内容语义化),选择合适的标签(代码语义化),能够便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析。

  1.有利于SEO,有利于搜索引擎爬虫更好的理解我们的网页,从而获取更多的有效信息,提升网页的权重。

  2.在没有CSS的时候能够清晰的看出网页的结构,增强可读性。

  3.便于团队开发和维护,语义化的HTML可以让开发者更容易的看明白,从而提高团队的效率和协调能力。

  4.支持多终端设备的浏览器渲染。

6,标签上title与alt属性的区别是什么?  

  Alt 当图片不显示时 用文字代表。 

  Title 为该属性提供信息

7,清除浮动的几种方式,各自的优缺点

  1.使用空标签清除浮动 clear:both(理论上能清除任何标签,缺点是增加无意义的标签)
  2.使用overflow:auto(解决空标签元素清除浮动而不得不增加无意代码的弊端,,使用zoom:1用于兼容IE)
  3.使用after伪元素清除浮动(用于非IE浏览器)

  .clear {
    clear: both;
    overflow: hidden;
    height: 0;
  }
  .clearfix {
    display: block;
    zoom: 1;
  }
  .clearfix:after {
    content: " ";
    display: block;
    font-size: 0;
    height: 0;
    clear: both;
    visibility: hidden;
  }