web专题：关于HTML的面试题了解一下！（内含福利）

时间：2023-09-06 21:30:01 | 来源：网站运营

时间：2023-09-06 21:30:01 来源：网站运营

web专题：关于HTML的面试题了解一下！（内含福利）：原文转自朗妹儿公众号，原文链接：Web| 关于HTML的面试题了解一下！（内含福利）

HTML

Web前端面试题及答案




1

Q：每个HTML文件里开头都有个很重要的东西：<!DOCTYPE>这是干什么的吗？




1

DOCTYPE标签是一种标准通用标记语言的文档类型声明，它的目的是要告诉标准通用标记语言解析器，它应该使用什么样的文档类型定义（DTD）来解析文档。

2

标准模式：排版样式和js运行模式都是按该浏览器支持的最高标准运行。

3

兼容模式：页面以宽松的向后兼容的方式显示，模拟老式浏览器，防止站点无法工作







2







Q：Html4 和 Html5 有哪些不同, 新增的有哪些? 移除了哪些元素？

不同：HTML4是基于SGML的子集，需要在DOCTYPE里设置DTD，而HTML5不是SGML的子集，只需要写<!DOCTYPE>

新增：

语义化元素—article、section、nav、header、footer、figure等

其他元素：video、audio、canvas

本地存储：localStorage、sessionStorage

表单空间：time、email、search、number等

新技术：webworker、websocket、geolocation地理定位

移除：纯表现的元素：basefont，big，center,font,s,strike,u

对可用性产生负面影响：frame、frameset、noframe







3

Q：如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5?




要支持HTML5标签，IE9以下，在script里写 document.createElement(‘header’) 同时css设置 header{display:block}，也可以直接用框架，如html5shiv

区分HTML和HTML5：DOCTYPE声明、新增的结构元素和功能元素




4







Q：SGML和DTD

SGML —标准通用置标语言，是定义电子文档结构和描述其内容的国际标准语言

DTD — 文档类型定义，可定义合法的标准通用标记语言，可扩展标记语言文档构建模块







5




Q：Html5 如何让一个div 旋转?




Transform：rotate（30deg）







6







Q：你做的页面在哪些浏览器试过？这些浏览器的内核分别是什么？




使用Trident内核的浏览器：IE、Maxthon、TT、The World等；

使用Gecko内核的浏览器：Netcape6及以上版本、FireFox、MozillaSuite/SeaMonkey；

使用Presto内核的浏览器：Opera7及以上版本；

使用Webkit内核的浏览器：Safari、Chrome。







7




Q:行内元素有哪些？块级元素有哪些？

行内元素：a、b、span、i、em、strong、input等

块级元素：div、ul、ol 、li、p、form、h1-h6等







8







Q：从输入网址到显示网页的过程发生了什么？

简化版：

1.浏览器开启一个线程处理这个请求，将请求的URL交给域名解析系统DNS，找到对应的IP，向服务器发起请求。

2.服务器交给后台处理，完成后发挥数据，浏览器接收文件(html,js,css,img等)

3.浏览器对拿到资源进行语法解析，建立对应的内部数据结构，如DOM树

4.载入解析到的资源文件，渲染页面，完成













9







Q：语义化标签是什么？为什么要使用语义化标签？

1.语义化标签：如header,nav,footer,section等，标签的意思就代表着页面的结构

2.为什么要使用语义化标签：

A.可以让页面的内容结构化，结构更清晰，方便浏览器和搜索引擎解析

B.即使在没有css样式的情况下，也以一种文档格式显示，容易阅读,方便维护

C.便于搜索引擎爬虫抓取，

D.对盲人设备友好







10







Q: Css和Html要注意什么？

1.减少无意义标签使用，尽量使用语义化标签，

2.css选择器命名要尽量使用英文名，且用驼峰或’-’连接，要语义化

3.设置高度的时候，看情况是否写死

4.html代码的结构要考虑数据渲染和后期扩展