前端面试题-HTML、HTTP、web综合问题(二)

14 WEB标准以及W3C标准是什么?

  • 标签闭合、标签⼩写、不乱嵌套、使⽤外链 css 和 js 、结构⾏为表现的分离

15 xhtml和html有什么区别?

  • ⼀个是功能上的差别
    • 主要是 XHTML 可兼容各⼤浏览器、⼿机以及 PDA ,并且浏览器也能快速正确地编译⽹⻚
  • 另外是书写习惯的差别
    • XHTML 元素必须被正确地嵌套,闭合,区分⼤⼩写,⽂档必须拥有根元素

16 Doctype作⽤? 严格模式与混杂模式如何区分?它们有何意义?

  • ⻚⾯被加载的时, link 会同时被加载,⽽ @imort ⻚⾯被加载的时, link 会同时被加载,⽽ @import 引⽤的 CSS 会等到⻚⾯被加载完再加载 import 只在 IE5 以上才能识别,⽽ link 是 XHTML 标签,⽆兼容问题 link ⽅式的样式的权重 ⾼于 @import 的权重
  • 声明位于⽂档中的最前⾯,处于 标签之前。告知浏览器的解析器, ⽤什么⽂档类型 规范来解析这个⽂档
  • 严格模式的排版和 JS 运作模式是 以该浏览器⽀持的最⾼标准运⾏
  • 在混杂模式中,⻚⾯以宽松的向后兼容的⽅式显示。模拟⽼式浏览器的⾏为以防⽌站点⽆法⼯作。 DOCTYPE 不存在或格式不正确会导致⽂档以混杂模式呈现

17 ⾏内元素有哪些?块级元素有哪些? 空(void)元素有那些?⾏内元 素和块级元素有什么区别?

  • ⾏内元素有: a b span img input select strong
  • 块级元素有: div ul ol li dl dt dd h1 h2 h3 h4… p
  • 空元素:

  • ⾏内元素不可以设置宽⾼,不独占⼀⾏
  • 块级元素可以设置宽⾼,独占⼀⾏

18 HTML全局属性(global attribute)有哪些

  • class :为元素设置类标识
  • data-* : 为元素增加⾃定义属性
  • draggable : 设置元素是否可拖拽
  • id : 元素 id ,⽂档内唯⼀
  • lang : 元素内容的的语⾔
  • style : ⾏内 css 样式
  • title : 元素相关的建议信息

19 Canvas和SVG有什么区别?

  • svg 绘制出来的每⼀个图形的元素都是独⽴的 DOM 节点,能够⽅便的绑定事件或⽤来修
    改。 canvas 输出的是⼀整幅画布svg 输出的图形是⽮量图形,后期可以修改参数来⾃由放⼤缩⼩,不会失真和锯⻮。⽽canvas 输出标量画布,就像⼀张图⽚⼀样,放⼤会失真或者锯⻮

20 HTML5 为什么只需要写

  • HTML5 不基于 SGML ,因此不需要对 DTD 进⾏引⽤,但是需要 doctype 来规范浏览器
    的⾏为
  • ⽽ HTML4.01 基于 SGML ,所以需要对 DTD 进⾏引⽤,才能告知浏览器⽂档所使⽤的⽂档
    类型

21 如何在⻚⾯上实现⼀个圆形的可点击区域?

  • svg
  • border-radius
  • 纯 js 实现 需要求⼀个点在不在圆上简单算法、获取⿏标坐标等等

22 ⽹⻚验证码是⼲嘛的,是为了解决什么安全问题

  • 区分⽤户是计算机还是⼈的公共全⾃动程序。可以防⽌恶意破解密码、刷票、论坛灌⽔
  • 有效防⽌⿊客对某⼀个特定注册⽤户⽤特定程序暴⼒破解⽅式进⾏不断的登陆尝试

23 viewport

<!DOCTYPE html> <!--H5标准声明,使⽤ HTML5 doctype,不区分⼤⼩写--> <head lang=”en”> <!--标准的 lang 属性写法--> <meta charset=’utf-8> <!--声明⽂档使⽤的字符编码--> <meta http-equiv=X-UA-Compatible” content=IE=edge,chrome=1/> <!--优先使 <meta name=”description” content=”不超过150个字符”/> <!--⻚⾯描述--> <meta name=”keywords” content=””/> <!-- ⻚⾯关键词--> <meta name=”author” content=”name, email@gmail.com/> <!--⽹⻚作者--> <meta name=”robots” content=”index,follow”/> <!--搜索引擎抓取--> <meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-sc <meta name=”apple-mobile-web-app-title” content=”标题”> <!--iOS 设备 begin--> <meta name=”apple-mobile-web-app-capable” content=”yes”/> <!--添加到主屏后的标 是否启⽤ WebApp 全屏模式,删除苹果默认的⼯具栏和菜单栏--> <meta name=”apple-itunes-app” content=”app-id=myAppStoreID, affiliate-data= <!--添加智能 App ⼴告条 Smart App Banner(iOS 6+ Safari--> <meta name=”apple-mobile-web-app-status-bar-style” content=”black”/> <meta name=”format-detection” content=”telphone=no, email=no”/> <!--设置苹果 <meta name=”renderer” content=”webkit”> <!-- 启⽤360浏览器的极速模式(webkit)--> <meta http-equiv=X-UA-Compatible” content=IE=edge”> <!--避免IE使⽤兼容模 <meta http-equiv=Cache-Control” content=”no-siteapp” /> <!--不让百度转码- <meta name=HandheldFriendly” content=true> <!--针对⼿持设备优化,主要是针 <meta name=MobileOptimized” content=320> <!--微软的⽼式浏览器--> <meta name=”screen-orientation” content=”portrait”> <!--uc强制竖屏--> <meta name=”x5-orientation” content=”portrait”> <!--QQ强制竖屏--> <meta name=”full-screen” content=”yes”> <!--UC强制全屏--> <meta name=”x5-fullscreen” content=true> <!--QQ强制全屏--> <meta name=”browsermode” content=”application”> <!--UC应⽤模式--> <meta name=”x5-page-mode” content=”app”> <!-- QQ应⽤模式--> <meta name=”msapplication-tap-highlight” content=”no”> <!--windows phone 设置⻚⾯不缓存--> <meta http-equiv=”pragma” content=”no-cache”> <meta http-equiv=”cache-control” content=”no-cache”> <meta http-equiv=”expires” content=0>

你可能感兴趣的:(前端,前端,html,http)