html基础 - lucifer_acc

对web标准的理解是什么？

首先是html标签上，标签闭合，标签小写，不乱嵌套；
使用语义化标签，例如header，article，少用<b></b>这样没有语义的标签，以提高搜索几率；
使用外部的css文件及js文件，使结构表现行为分离；
减少文件数目，达到减少网络请求次数，文件下载与页面速度更流畅；
内容能被更多的用户及设备访问，保证在版本较低的浏览器下能够呈现完整内容，在版本高的浏览器上能够展现更完美的视觉效果；
代码低耦合高内聚，易维护。

1.DOCTYPE有什么作用？标准模式与混杂模式如何区分？它们有何意义?

告诉浏览器使用哪个版本的HTML规范来渲染文档。DOCTYPE不存在或形式不正确会导致HTML文档以混杂模式呈现。
标准模式（Standards mode）以浏览器支持的最高标准运行；混杂模式（Quirks mode）中页面是一种比较宽松的向后兼容的方式显示。

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

HTML5不基于SGML（Standard Generalized Markup Language 标准通用标记语言），因此不需要对DTD（DTD 文档类型定义）进行引用，但是需要DOCTYPE来规范浏览器行为。

HTML4.01基于SGML，所以需要引用DTD。才能告知浏览器文档所使用的文档类型，如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

3.行内元素有哪些？块级元素有哪些？空(void)元素有那些？

行内元素：a span img input select
块级元素：div ul ol li dl dt dd h1 p
空元素：<br> <hr> <link> <meta>

4.页面导入样式时，使用link和@import有什么区别？

相同的地方，都是外部引用CSS方式，区别：

link是xhtml标签，除了加载css外，还可以定义RSS等其他事务；@import属于CSS范畴，只能加载CSS
link引用CSS时候，页面载入时同时加载；@import需要在页面完全加载以后加载，而且@import被引用的CSS会等到引用它的CSS文件被加载完才加载
link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持
link支持dom操作，可以使用javascript控制去改变样式；而@import不支持
link方式的样式的权重高于@import的权重
import在html使用时候需要<style type="text/css">标签

5.无样式内容闪烁（FOUC）Flash of Unstyle Content

@import导入CSS文件会等到文档加载完后再加载CSS样式表。因此，在页面DOM加载完成到CSS导入完成之间会有一段时间页面上的内容是没有样式的。

解决方法：使用link标签加载CSS样式文件。因为link是顺序加载的，这样页面会等到CSS下载完之后再下载HTML文件，这样先布局好，就不会出现FOUC问题。

6.介绍一下你对浏览器内核的理解？

主要分成两部分：渲染引擎(Layout Engine或Rendering Engine)和JS引擎。

渲染引擎：负责取得网页的内容（HTML、XML、图像等等）、整理讯息（例如加入CSS等），以及计算网页的显示方式，然后会输出至显示器或打印机。浏览器的内核的不同对于网页的语法解释会有不同，所以渲染的效果也不相同。
JS引擎：解析和执行javascript来实现网页的动态效果。

最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎。

7.常见的浏览器内核有哪些？

Trident(-ms-)：IE、傲游、世界之窗、腾讯TT、360、搜狗
Gecko(-moz-)：FireFox
Webkit(-webkit-)：Chrome、Safari
Kestrel(-o-)：9.5版本以上Opera
Presto(-o-)：9.5以前Opera

8.HTML5有哪些新特性,移除了那些元素？如何处理HTML5新标签的浏览器兼容问题？如何区分HTML和HTML5

新增加了图像、位置、存储、多任务等功能。
新增元素：

canvas
用于媒介回放的video和audio元素
本地离线存储。localStorage长期存储数据，浏览器关闭后数据不丢失;sessionStorage的数据在浏览器关闭后自动删除
语意化更好的内容元素，比如 article footer header nav section
位置API：Geolocation
表单控件，calendar date time email url search
新的技术：web worker(web worker是运行在后台的 JavaScript，独立于其他脚本，不会影响页面的性能。您可以继续做任何愿意做的事情：点击、选取内容等等，而此时 web worker 在后台运行) web socket
拖放API：drag、drop

移除的元素：

纯表现的元素：basefont big center font s strike tt u
性能较差元素：frame frameset noframes

区分：

DOCTYPE声明的方式是区分重要因素
根据新增加的结构、功能来区分

9.简述一下你对HTML语义化的理解？

去掉或丢失样式的时候能够让页面呈现出清晰的结构。
有利于SEO和搜索引擎建立良好沟通，有助于爬虫抓取更多的信息，爬虫依赖于标签来确定上下文和各个关键字的权重。
方便其它设备解析。
便于团队开发和维护，语义化根据可读性。

10.HTML5的文件离线储存怎么使用，工作原理是什么？

在线情况下，浏览器发现HTML头部有manifest属性，它会请求manifest文件，如果是第一次访问，那么浏览器就会根据manifest文件的内容下载相应的资源，并进行离线存储。如果已经访问过并且资源已经离线存储了，那么浏览器就会使用离线的资源加载页面。然后浏览器会对比新的manifest文件与旧的manifest文件，如果文件没有发生改变，就不会做任何操作，如果文件改变了，那么就会重新下载文件中的资源，并且进行离线存储。例如，

在页面头部加入manifest属性： <html manifest='cache.manifest'>

在cache.manifest文件中编写离线存储的资源

CACHE MANIFEST
#v0.11
CACHE:
js/app.js
css/style.css
NETWORK:
Resourse/logo.png
FALLBACK:
//offline.html

11.cookies，sessionStorage和localStorage的区别？

共同点：都是保存在浏览器端，且是同源的。

区别：

cookies是为了标识用户身份而存储在用户本地终端上的数据，始终在同源http请求中携带，即cookies在浏览器和服务器间来回传递，而sessionstorage和localstorage不会自动把数据发给服务器，仅在本地保存。
存储大小的限制不同。cookie保存的数据很小，不能超过4k，而sessionstorage和localstorage保存的数据大，可达到5M。
数据的有效期不同。cookie在设置的cookie过期时间之前一直有效，即使窗口或者浏览器关闭。sessionstorage仅在浏览器窗口关闭之前有效。localstorage始终有效，窗口和浏览器关闭也一直保存，用作长久数据保存。
作用域不同。cookie在所有的同源窗口都是共享；sessionstorage不在不同的浏览器共享，即使同一页面；localstorage在所有同源窗口都是共享

12.iframe框架有那些优缺点？

缺点
- iframe能够原封不动的把嵌入的网页展现出来。
- 如果有多个网页引用iframe，那么你只需要修改iframe的内容，就可以实现调用的每一个页面内容的更改，方便快捷。
- 网页如果为了统一风格，头部和版本都是一样的，就可以写成一个页面，用iframe来嵌套，可以增加代码的可重用。
- 如果遇到加载缓慢的第三方内容如图标和广告，这些问题可以由iframe来解决。
缺点
- 搜索引擎的爬虫程序无法解读这种页面
- 框架结构中出现各种滚动条
- 使用框架结构时，保证设置正确的导航链接。
- iframe页面会增加服务器的http请求

13.label的作用是什么? 是怎么用的?

label标签用来定义表单控件间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上。label 中有两个属性是非常有用的, FOR和ACCESSKEY。
FOR属性功能：表示label标签要绑定的HTML元素，你点击这个标签的时候，所绑定的元素将获取焦点。例如，

<Label FOR="InputBox">姓名</Label><input ID="InputBox" type="text">

ACCESSKEY属性功能：表示访问label标签所绑定的元素的热键，当您按下热键，所绑定的元素将获取焦点。例如，

<Label FOR="InputBox" ACCESSKEY＝"N">姓名</Label><input ID="InputBox" type="text">

14.HTML5的form如何关闭自动完成功能？

HTML的输入框可以拥有自动完成的功能，当你往输入框输入内容的时候，浏览器会从你以前的同名输入框的历史记录中查找出类似的内容并列在输入框下面，这样就不用全部输入进去了，直接选择列表中的项目就可以了。但有时候我们希望关闭输入框的自动完成功能，例如当用户输入内容的时候，我们希望使用AJAX技术从数据库搜索并列举而不是在用户的历史记录中搜索。

方法：

在IE的internet选项菜单中里的自动完成里面设置
设置form输入框的autocomplete为on或者off来来开启输入框的自动完成功能

15.如何实现浏览器内多个标签页之间的通信?

WebSocket SharedWorker
也可以调用 localstorge、cookies 等本地存储方式。 localstorge 在另一个浏览上下文里被添加、修改或删除时，它都会触发一个事件，我们通过监听事件，控制它的值来进行页面信息通信。

注意：Safari 在无痕模式下设置 localstorge 值时会抛出QuotaExceededError 的异常

16.webSocket如何兼容低浏览器？

Adobe Flash Socket ActiveX HTMLFile (IE) 基于 multipart 编码发送 XHR 基于长轮询的 XHR
引用WebSocket.js这个文件来兼容低版本浏览器。

17.页面可见性（Page Visibility）API 可以有哪些用途？

通过visibility state的值得检测页面当前是否可见，以及打开网页的时间。
在页面被切换到其他后台进程时，自动暂停音乐或视频的播放。

18.如何在页面上实现一个圆形的可点击区域？

map+area或者svg
border-radius
纯js实现，一个点不在圆上的算法

19.实现不使用 border 画出1px高的线，在不同浏览器的Quirks mode和CSS Compat模式下都能保持同一效果

<div style="height:1px;overflow:hidden;background:red"></div>

20.网页验证码是干嘛的，是为了解决什么安全问题？

区分用户是计算机还是人的程序;
可以防止恶意破解密码、刷票、论坛灌水；

21.title与h1的区别、b与strong的区别、i与em的区别？

title属性没有明确意义，只表示标题；h1表示层次明确的标题，对页面信息的抓取也有很大的影响
strong标明重点内容，语气加强含义；b是无意义的视觉表示
em表示强调文本；i是斜体，是无意义的视觉表示
视觉样式标签：b i u s
语义样式标签：strong em ins del code

22.元素的alt和title有什么异同？

在alt和title同时设置的时候，alt作为图片的替代文字出现，title是图片的解释文字。

23. 一级域名？二级域名是指什么？

.com ：顶级域名
baidu.com：一级域名
www.baidu.com／tieba.baidu.com：二级域名

24.浏览器解析url过程？

浏览器输入地址
- 输入baidu，浏览器自动添加.com
- baidu.com的时候，这是一级域名，给你重定向到www.baidu.com这样的二级域名。
浏览器查看是否有缓存
- 浏览器缓存
- 系统缓存
- DNS缓存（路由器缓存）
请求到了DNS服务器，DNS服务器将域名解析为ip地址
浏览器有了ip就可以找到服务器，两者之间就可以建立tcp链接，服务器需要和浏览器建立tcp三次握手。
握手成功后，首先浏览器得向服务器发送http请求（如果是http协议）和请求数据包
- 请求方式
- 请求协议的版本
- 想到得到什么数据，数据是什么格式的
服务器收到了请求后进行处理，将需要的数据返回浏览器
浏览器收到http响应头，此时就会读取数据，进行浏览器渲染。
- 解析DOM树
- 遇到图片样式表js文件启动下载
显示html页面

25.iframe的使用场景有哪些？

左侧是功能树，右侧是具体功能。为了每一个功能单独分离。
加载别的网站的内容。
ajax上传文件
在上传图片时，不使用flash实现无刷新。
跨域的时候作为中间人

26.什么是重排和重绘？

以下三种情况，会导致网页重新渲染

修改DOM
修改样式表
用户事件（页面滚动，输入框键入文字，改变窗口大小等等）

重新渲染，就需要重新生成布局和重新绘制。
前者就叫重排，后者就叫做重绘。

重绘不一定触发重排，比如改变页面某个元素的颜色，并没有导致布局改变。
重排一定触发重绘，比如改变了一个网页元素的位置，就会触发重排和重绘。

27.不同的字符编码

utf-8：针对Unicode点可变长字符编码，又称万国码。UTF-8用1到6个字节编码UNICODE字符。用在网页上可以同一页面显示中文简体繁体及其它语言（如英文，日文，韩文）。
GBK：汉字编码，表示简体繁体。
ISO8859-2：收集了东欧字符。
理论上是gb2312加载的比utf-8快一些

28.meta的作用及用法

作用：

搜索引擎优化
定义页面使用的语言
自动刷新并指向新的页面
页面转换时的动态效果
控制页面缓存
页面描述
网页显示的窗口信息

用法：

语法：<meta name="参数"content="具体的参数值">。主要参数：
- keywords：告诉搜索引擎你的网页关键字是什么。<meta name="keywords"content="xxx">
- description：告诉搜索引擎引擎你的网站的主要内容。<meta name="description"content="xxx">
- robots（机器人向导）：用来告诉哪些页面需要索引。<meta name="robots"content="none">
  - all：文件将被检索，且页面上的链接可以被查询；
  - none：文件不会被检索，页面上的链接不可以被查询；
  - index：文件将被检索；
  - follow：页面上的链接可以被查询。
  - noindex：文件将不被检索，但页面上的链接可以被查询；
  - nofollow：文件将被检索，但页面上的链接不可以被查询；
- author：标注网页的作者<meta name="author"content="root,root@xxxx.com">
- generator：表示网站采用的什么软件制作
- COPYRIGHT：说明网站版权信息
- revisit-after：代表网站重访<META name="revisit-after"CONTENT="7days">代表7天。
http-equiv属性：相当于http文件头的作用，可以向浏览器传回一些有用的信息
- Expires：设置网页到期时间，一旦网页到期，必须到服务器上重新传输。<meta http-equiv="expires"content="Fri,12Jan200118:18:18GMT"> 注意时间使用的是GMT格式。
- Pragma：禁止浏览器从本地计算机的缓存中访问页面内容。<meta http-equiv="Pragma"content="no-cache">。
- Refresh：自动刷新并指向新页面。<meta http-equiv="Refresh"content="2;URL=http://www.haorooms.com"> //(注意后面的引号，分别在秒数的前面和网址的后面)。
- Set-Cookie：如果页面过期，那么存盘的cookie将被删除。<meta http-equiv="Set-Cookie"content="cookie value=xxx;expires=Friday,12-Jan-200118:18:18GMT；path=/">
- Window-target(显示窗口的设定)：用来防止别人在框架里调用自己页面。<meta http-equiv="Window-target"content="_top">强制页面在当前窗口以独立页面显示。
- content-Type(显示字符集的设定)：设定页面使用的字符集。<meta http-equiv="content-Type"content="text/html;charset=gb2312">
- content-Language（显示语言的设定）<meta http-equiv="Content-Language"content="zh-cn"/>
- Cache-Control指定请求和响应遵循的缓存机制。
- imagetoolbar：指定是否显示图片工具栏，false不显示，true显示。<meta http-equiv="imagetoolbar"content="false"/>
- Content-Script-Type：制定脚本类型<Meta http-equiv="Content-Script-Type"Content="text/javascript">
- X-UA-Compatible：模拟ie版本 <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
关于移动端的meta属性：
- viewport属性：<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
  - width：viewport的宽度
  - height：viewport的高度
  - initial-scale：初始的缩放比例
  - minimum-scale：允许用户缩放到的最小比例
  - maximum-scale：允许用户缩放到的最大比例
  - user-scalable：用户是否可以手动缩放
- <meta name="apple-mobile-app-capable" content="yes">：是否启用 WebApp 全屏模式，删除苹果默认的工具栏和菜单。
- <meta name="apple-mobile-app-status-bar-style" content="black">：改变顶部状态条的颜色。
- <meta name="format-detection" content="telphone=no, email=no"/>：忽略页面中的数字识别为电话，忽略email识别。

29.CDN是什么？

即内容分发网络，其基本思路是尽可能避开互联网有可能影响数据传输和稳定性的瓶颈和环境，是内容传输更稳定更快。

30.正向代理，反向代理是什么？

正向代理：a想找c借钱，但是a并不能直接找c借钱，那么a找b借钱，b找c借钱，那么a就得到了c的钱，但是c并不知道把钱借给了谁。比如a访问google访问不了，但搭建在国外的b可以访问google，那么让他去请求google再把内容返回给a就好了。
反向代理：a访问baidu，但是baidu背后有成千上万台服务器，a并不知道具体是哪台给的服务，但你只需要知道代理服务器是www.baidu.com就好了，反向代理服务器会帮我们把请求发给真实的服务器。主要用来做负载均衡。

posted on 2019-07-11 17:23 lucifer_acc 阅读(249) 评论(0) 收藏举报

刷新页面返回顶部