html基础

时间  2019-11-10
标签 html 基础 栏目 HTML 繁體版
原文   原文链接

 

对web标准的理解是什么？javascript

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

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

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

2.HTML5为何只须要写 <!DOCTYPE HTML>？java

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

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

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

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

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

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

  1. link是xhtml标签，除了加载css外，还能够定义RSS等其余事务；@import属于CSS范畴，只能加载CSS
  2. link引用CSS时候，页面载入时同时加载；@import须要在页面彻底加载之后加载，并且@import被引用的CSS会等到引用它的CSS文件被加载完才加载
  3. link是xhtml标签，无兼容问题；@import是在css2.1提出来的，低版本的浏览器不支持
  4. link支持dom操做，可使用javascript控制去改变样式；而@import不支持
  5. link方式的样式的权重高于@import的权重
  6. 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

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

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

移除的元素：

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

区分：

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

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

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

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

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

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

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

  1.   CACHE MANIFEST
  2.   #v0.11
  3.   CACHE:
  4.  js/app .js
  5.  css/style .css
  6.  NETWORK:
  7.  Resourse/logo .png
  8.  FALLBACK:
  9.   //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技术从数据库搜索并列举而不是在用户的历史记录中搜索。

方法：

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. 区分用户是计算机仍是人的程序;
  2. 能够防止恶意破解密码、刷票、论坛灌水；

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就行了，反向代理服务器会帮咱们把请求发给真实的服务器。主要用来作负载均衡。
相关文章
相关标签/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公众号
   欢迎关注本站公众号,获取更多信息
联系我们 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程