HTML · 前端面试题

### **1、HTML5为什么只需要写< !DOCTYPE HTML>** - HTML5 不基于 SGML，因此不需要对 DTD 进行引用，但是需要 DOCTYPE 来规范浏览器的行为（让浏览器按照它们应该的方式来进行） - 而 HTML4.01 基于 SGML，所以需要对 DTD 进行引用，才能告知浏览器文档所使用的文档类型。 ### **2、什么是SGML** - 标准通用标记语言（Standard Generalized Markup Language，SGML）是现时常用的超文本格式的最高层次标准，是可以定义标记语言的元语言，甚至可以定义不必采用< >的常规方式。由于它的复杂，因而难以普及。 - HTML 和 XML 同样派生于它：XML可以被认为是它的一个子集，而 HTML 是它的一个应用。 - XML 的产生就是为了简化它，以便用于更加通用的目的，比如语义 Web。它已经应用于大量的场合，比较著名的有XHTML、RSS、XML-RPC 和 SOAP。 ### **3、HTML5哪些操作可以SEO优化** - title 标签、meta 标签、header 标签、footer 标签 - 元标签（meta 标签）、导航标签（nav 标签）、文章标签（article 标签）、左或右侧标签（aside 标签） ### **4、CSS盒模型有哪些及区别** **Q1** - IE 盒子模型 box-sizing: border-box;（怪异模式） - W3C 标准盒子模型 box-sizing: content-box;（标准模式）默认模式 **Q2** - border-box：width 和 height 属性包括 padding 和 border，但不包含 margin。这是盒模型的文档时，Internet Explorer 使用 Quirks 模式。 - content-box：这是默认样式指定 CSS 标准。测量 width 和 height 属性只包括的内容，但不包含 border, margin, 或者 padding。 - 两者之间的区别 border-box 包含 padding，content-box 不包含 padding。 ### **5、XHTML 与 HTML 4.01的区别** 实际上，XHTML 与 HTML 4.01 标准没有太多的不同。它们最主要的不同： 1.XHTML 元素必须被正确地嵌套。 ``` 错误：this is example. 正确：this is example. ``` 2.XHTML 元素必须被关闭。 ``` 错误：this is example. 正确：this is example. ``` 3.标签名必须用小写字母。 ``` 错误：this is example. 正确：this is example. ``` 3.1空标签也必须被关闭 ``` 错误： 正确： ``` 4.XHTML 文档必须拥有根元素。所有的 XHTML 元素必须被嵌套于 <html> 根元素中。 ### **6、CSS3有哪些新特性** 1. CSS3实现圆角（border-radius），阴影（box-shadow）， 2. 对文字加特效（text-shadow），线性渐变（gradient），旋转（transform） 3. transform: rotate(9deg) scale(0.85, 0.90) translate(0px, -30px) skew(-9deg, 0deg);// 旋转，缩放，定位，倾斜 4. 增加了更多的 CSS 选择器多背景 rgba 5. 在 CSS3 中唯一引入的伪元素是 ::selection 6. 媒体查询，多栏布局 7. border-image ### **7、多栏布局** CSS3多栏布局 | 属性 | 描述 | |---|---| | column-count | 规定元素应该被分隔的列数 | | column-fill | 规定如何填充列 | | column-gap | 规定列之间的间隔 | | column-rule | 设置所有 column-rule-* 属性的简写属性 | | column-rule-color | 规定列之间规则的颜色 | | column-rule-style | 规定列之间规则的样式 | | column-rule-width | 规定列之间规则的宽度 | | column-span | 规定元素应该横跨的列数 | | column-width | 规定列的宽度 | | columns | 规定设置 column-width 和 column-count 的简写属性 | ### **8、HTML5 有哪些新特性、移除了那些元素？如何处理 HTML5 新标签的浏览器兼容问题？如何区分 HTML 和 HTML5** **HTML5 有哪些新特性** 1. 拖拽释放(Drag and drop) API 2. 语义化更好的内容标签（header, nav, footer, aside,article, section） 3. 音频、视频API(audio, video) 4. 画布(Canvas) API 5. 地理(Geolocation) API 6. 本地离线存储 localStorage 长期存储数据，浏览器关闭后数据不丢失 7. sessionStorage 的数据在浏览器关闭后自动删除 8. 表单控件，calendar、date、time、email、url、search 9. 新的技术 webworker, websocket, Geolocation **移除的元素：** 1. 纯表现的元素：basefont，big，center，font, s，strike，tt，u； 2. 对可用性产生负面影响的元素：frame，frameset，noframes **支持HTML5新标签：** IE8 / IE7 / IE6 支持通过 document.createElement 方法产生的标签，可以利用这一特性让这些浏览器支持 HTML5 新标签，浏览器支持新标签后，还需要添加标签默认的样式（当然最好的方式是直接使用成熟的框架、使用最多的是 html5shim 框架） ```  ``` **如何区分：** DOCTYPE声明新增的结构元素、功能元素 ### **9、请描述一下 cookies，sessionStorage 和 localStorage 的区别** cookie 是网站为了标示用户身份而储存在用户本地终端（Client Side）上的数据（通常经过加密）。 cookie 数据始终在同源的http请求中携带（即使不需要），记会在浏览器和服务器间来回传递。 sessionStorage 和 localStorage 不会自动把数据发给服务器，仅在本地保存。 **存储大小** cookie 数据大小不能超过 4k sessionStorage 和 localStorage 虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大 **有期时间：** cookie 设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭 sessionStorage 数据在当前浏览器窗口关闭后自动删除 localStorage 存储持久数据，浏览器关闭后数据不丢失除非主动删除数据

HTML