HTML 面试常见知识点

原文->最近刚弄的个人博客:
http://hellopan.top/2017/10/15/html-knowledge-points/

intro

对HTML和CSS的平时容易忽略或忘记的小知识点做点总结,内容大都是从网上各种面试题还有一些文章里拷来的,有时间看看可以加深自己记忆,希望对自己和大家都有帮助。内容会不断更新…

html

HTML 和 Body 的区别

哪些全局样式应该应用在 HTML
- font-size rem
- background-color 将 background-color 应用到以后,即便 里的元素没有占满视口,背景颜色也会蔓延到整个视口。给 html 设置 background-color 可以解决这个问题。
- height: 100%
如果 及其子元素的高度需要设置为窗口高度时, 元素上也需要添加

哪些全局样式应该应用在 Body
- background
- margin-bottom margin-left margin-right margin-top
- font

JavaScript中html 对应 document.documentElement、body 对应 document.body

Doctype作用

声明位于位于HTML文档中的第一行,处于 标签之前。告知浏览器的解析器用什么文档标准解析这个文档。DOCTYPE不存在或格式不正确会导致文档以兼容模式呈现。

标准模式与兼容模式

标准模式的排版 和JS运作模式都是以该浏览器支持的最高标准运行。
在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式浏览器的行为以防止站点无法工作。
简单的说,就是尽可能的显示能显示的东西给用户看。

inline block void元素

(1)行内元素有:a b span img input select strong(强调的语气)
(2)块级元素有:div ul ol li dl dt dd h1 h2 h3 h4…p
(3)常见的空元素:br hr img input link meta

link和@import

(1)link属于XHTML标签,除了加载CSS外,还能用于定义RSS, 定义rel连接属性等作用;而@import是CSS提供的,只能用于加载CSS;
(2)页面被加载的时,link会同时被加载,而@import引用的CSS会等到页面被加载完再加载;
(3)import是CSS2.1提出的,只在IE5以上才能被识别,而link是XHTML标签,无兼容问题;
(4)link支持使用Javascript控制DOM去改变样式;而@import不支持;

<link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
<link rel="icon" sizes="any" mask href="//www.baidu.com/img/baidu.svg">
<link rel="search" type="application/opensearchdescription+xml" href="/content-search.xml" title="百度搜索" />

rel rev

a 标签的可选属性 rel 和 rev 分别表示源文档与目标文档之间正式的关系和方向。rel 属性指定从源文档到目标文档的关系,而 rev 属性则指定从目标文档到源文档的关系。这两种属性可以在 a 标签中同时使用。

<a href="part.html" rel="next" rev="prev">

浏览器内核

主要分成两部分:渲染引擎(layout engineer或Rendering Engine)和JS引擎。
- 渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。
- JS引擎则:解析和执行javascript来实现网页的动态效果。
Trident内核:IE,MaxThon,TT,The World,360,搜狗浏览器等。[又称MSHTML]
Gecko内核:Netscape6及以上版本,FF,MozillaSuite/SeaMonkey等
Presto内核:Opera7及以上。 [Opera内核原为:Presto,现为:Blink;]
Webkit内核:Safari,Chrome等。 [ Chrome的:Blink(WebKit的分支)]

html5新特性 移除的元素

HTML5 现在已经不是 SGML 的子集
- 主要是关于图像,位置,存储,多任务等功能的增加。
绘画 canvas;
用于媒介回放的 video 和 audio 元素;
本地离线存储 localStorage 长期存储数据,浏览器关闭后数据不丢失;
sessionStorage 的数据在浏览器关闭后自动删除;
语意化更好的内容元素,比如 article、footer、header、nav、section;
表单控件,calendar、date、time、email、url、search;
新的技术webworker, websocket, Geolocation;
- 移除的元素:
纯表现的元素:basefont,big,center,font, s,strike,tt,u;
对可用性产生负面影响的元素:frame,frameset,noframes;

HTML语义化

  • 让页面的内容结构化,结构更清晰,便于对浏览器、搜索引擎解析;
  • 即使在没有样式CSS情况下也以一种文档格式显示;
  • 搜索引擎的爬虫也依赖于HTML标记来确定上下文和各个关键字的权重,利于SEO;
  • 使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。

manifest

首先manifest是一个后缀名为minifest的文件,在文件中定义那些需要缓存的文件,支持manifest的浏览器,会将按照manifest文件的规则,像文件保存在本地,从而在没有网络链接的情况下,也能访问页面。
html新增了一个manifest属性,可以用来指定当前页面的manifest文件。
创建一个和html同名的manifest文件,比如页面为index.html,那么可以建一个index.manifest的文件,然后给index.html的html标签添加如下属性即可
一个典型的manifest文件代码结构:
CACHE:(必须)
标识出哪些文件需要缓存,可以是相对路径也可以是绝对路径。
NETWORK:(可选)
这一部分是要绕过缓存直接读取的文件,可以使用通配符*。
FALLBACK:(可选)
指定了一个后备页面,当资源无法访问时,浏览器会使用该页面。该段落的每条记录都列出两个 URI—第一个表示资源,第二个表示后备页面。两个 URI 都必须使用相对路径并且与清单文件同源。可以使用通配符。

CACHE MANIFEST
#version 1.3
CACHE:    
    test.css
NETWORK:
    *
FALLBACK:
    *.html /404.html

cookies,sessionStorage 和 localStorage

  • cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)。
    cookie数据大小不能超过4k。
    设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
  • sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存。
    sessionStorage和localStorage也有存储大小的限制可以达到5M或更大。
  • localStorage 存储持久数据,浏览器关闭后数据不丢失除非主动删除数据;
  • sessionStorage 数据在当前浏览器窗口关闭后自动删除。

iframe有那些缺点

iframe 元素会创建包含另外一个文档的内联框架(即行内框架)。
1. iframe会阻塞主页面的Onload事件;
2. 搜索引擎的检索程序无法解读这种页面,不利于SEO;
3. iframe和主页面共享连接池,而浏览器对相同域的连接有限制,所以会影响页面的并行加载。
使用iframe之前需要考虑这两个缺点。如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题。

Page Visibility API

  • doument.hidden:表示页面是否隐藏的布尔值。页面隐藏包括 页面在后台标签页中 或者 浏览器最小化(注意,页面被其他软件遮盖并不算隐藏,比如打开的 sublime 遮住了浏览器)
  • document.visibilityState:表示下面 4 个可能状态的值
    • hidden:页面在后台标签页中或者浏览器最小化
    • visible:页面在前台标签页中
    • prerender:页面在屏幕外执行预渲染处理 document.hidden 的值为 true
    • unloaded:页面正在从内存中卸载
  • Visibilitychange 事件:当文档从可见变为不可见或者从不可见变为可见时,会触发该事件。
    这样,我们可以监听 Visibilitychange 事件,当该事件触发时,获取 document.hidden 的值,根据该值进行页面一些事件的处理。
document.addEventListener('visibilitychange', function() {
  var isHidden = document.hidden;
  if (isHidden) {
    // 动画停止
    // 服务器轮询停止 等等
  } else {
    // 动画开始
    // 服务器轮询
  }
});

title与h1 b与strong i与em

  • title属性没有明确意义只表示是个标题,h1则表示层次明确的标题,对页面信息的抓取也有很大的影响;
  • strong是标明重点内容,有语气加强的含义,使用阅读设备阅读网络时:< strong >会重读,而< B >是展示强调内容。
  • i内容展示为斜体,em表示强调的文本;

end

你可能感兴趣的:(知识总结)