前端知识体系回顾——第三章 HTML 1

posted @ May 8, 2016 • 陈凯 • HTML

摘要：「前端知识体系系列第三章，这部分主要是HTML内容，比较简单，容易掌握，分为两个部分讲解。这是第一部分。」

1. HTML5的了解

  • a.Html5有哪些新特性、移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分 HTML 和 HTML5？
    1. HTML5 现在已经不是 SGML 的子集，主要是关于图像，位置，存储，多任务功能的增加。
    2. 绘画 canvas、用于媒介回放的 video 和 audio 元素 ，拖拽释放(Drag and drop) API，语义化更好的内容标签 header,nav,footer,aside,article,section，音频、视频API(audio,video)，画布(Canvas) API，地理(Geolocation) API，
    3. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失
    4. sessionStorage 的数据在浏览器关闭后自动删除
    5. 语意化更好的内容元素，比如 article、footer、header、nav、section
    6. 表单控件，calendar、date、time、email、url、search
    7. 新的技术webworker, websockt, Geolocation。
  • b.移除的元素：
    1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u；
    2. 对可用性产生负面影响的元素：frame，frameset，noframes；
  • c.支持HTML5新标签： IE8/IE7/IE6支持通过document.createElement方法产生的标签，可以用这一特性让这些浏览器支持HTML5新标还需要添加标签默认的样式：当然最好的方式是直接使用成熟的框架、使用最多的是html5shim框架.
<!--[if lt IE 9]> 
<script> src="http://html5shim.googlecode.com/svn/trunk/html5.js"</script>
<![endif]-->
  • d.HTML5的离线储存？
  1. localStorage 长期存储数据，浏览器关闭后数据不丢失；
  2. sessionStorage 数据在浏览器关闭后自动删除。
  • e.请描述一下 cookies，sessionStorage 和 localStorage 的区别？
    1. cookie在浏览器和服务器间来回传递。
    2. sessionStorage和localStorage不会；sessionStorage和localStorage的存储空间更大；
    3. sessionStorage和localStorage有更多丰富易用的接口； 并且有各自独立的存储空间；

  • f.如何实现浏览器内多个标签页之间的通信? (阿里)

    调用localstorge、cookies等本地存储方式

  • g.webSocket如何兼容低浏览器？(阿里)

    Adobe Flash Socket 、 ActiveX HTMLFile (IE) 、 基于 multipart 编码发送 XHR 、 基于长轮询的 XHR

  • H. 如何区分： DOCTYPE声明\新增的结构元素\功能元素

2. 语义化标签

  1. 用正确的标签做正确的事情！
  2. 不同的功能区域用不同的标签类型，即使去掉CSS样式，也具有清晰可读的结构。
  3. Html语义化就是让页面的内容结构化，便于对浏览器、搜索引擎解析；
  4. 在没有样式CCS情况下也以一种文档格式显示，并且是容易阅读的。
  5. 搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于 SEO。
  6. 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解。

3. 文档声明：类型，区别（DTD）

用于声明文档使用那种规范（html/Xhtml）一般为 严格 过度 基于框架的html文档

你知道多少种Doctype文档类型？

该标签可声明三种 DTD 类型，分别表示严格版本、过渡版本以及基于框架的 HTML 文档。

HTML 4.01 规定了三种文档类型：Strict、Transitional 以及 Frameset。 XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。 Standards （标准）模式（也就是严格呈现模式）用于呈现遵循最新标准的网页，而 Quirks（包容）模式（也就是松散呈现模式或者兼容模式）用于呈现为传统浏览器而设计的网页。

加入XMl声明可触发

  1. <!DOCTYPE> 声明位于文档中的最前面，处于 <html> 标签之前。告知浏览器以何种模式来渲染文档。
  2. 严格模式的排版和 JS 运作模式是以该浏览器支持的最高标准运行。
  3. 在混杂模式中，页面以宽松的向后兼容的方式显示。模拟老式浏览器的行为以防止站点无法工作。
  4. DOCTYPE不存在或格式不正确会导致文档以混杂模式呈现。

4. 浏览器的模式：标准和混杂模式的区别

  1. 在标准模式中，浏览器根据规范呈现页面；在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器（比如 Microsoft IE 4和Netscape Navigator 4）的行为以防止老站点无法工作。
  2. 浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。如果XHTML文档包含形式完整的DOCTYPE，那么它一般以标准模式 呈现。对于HTML 4.01文档，包含严格DTD的DOCTYPE常常导致页面以标准模式呈现。包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现，但是有过 渡DTD而没有URI会导致页面以混杂模式呈现。DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
  3. 还有盒子模型 渲染模式的不同，使用 window.top.document.compatMode 可显示为什么模式。

5. HTML的相关知识

HTML和 XHTML的区别： 1. XHTML是HTML向XML的过渡 2. 在xhtml下所有标签是闭合的； 标签不允许大写；不许与错误的嵌套。html下这些都不是错。布尔值的属性要写全，如checked=”checked“；同时属性的值要用引号；

区别： 1. 所有的标记都必须要有一个相应的结束标记 2. 所有标签的元素和属性的名字都必须使用小写 3. 所有的XML标记都必须合理嵌套 4. 所有的属性必须用引号”“括起来 5. 把所有<和&特殊符号用编码表示 6. 给所有属性赋一个值 7. 不要在注释内容中使“–” 8. 图片必须有说明文字

6.使用 XHTML 的局限有哪些？

xhtml要求严格，必须有head、body每个dom必须要闭合。

7. HTML5 为什么只需要写 <!DOCTYPE HTML>？

HTML5 不基于 SGML，因此不需要对DTD进行引用，但是需要doctype来规范浏览器的行为（让浏览器按照它们应该的方式来运行）； 而HTML4.01基于SGML,所以需要对DTD进行引用，才能告知浏览器文档所使用的文档类型。

8. 如果页面使用 ‘application/xhtml+xml’ 会有什么问题吗？

一些老的浏览器并不兼容。

9. 如果网页内容需要支持多语言，你会怎么做？

编码UTF-8，空间域名需要支持多浏览地址。

10.在设计和开发多语言网站时，有哪些问题你必须要考虑？

1.应用字符集的选择 2、语言书写习惯&导航结构 3、数据库驱动型网站