html的根基 理论
HTML
语义化
HTML标签的语义化是指:通过使用包括语义的标签(如h1-h6)适当地表示文档构造
css命名的语义化是指:为html标签增加成心义的class
为什么需要语义化:
去除样式后页面显现清楚的构造
盲人使用读屏器更好地阅读
搜索引擎更好地懂得页面,有益于收录
便团队项目的可连续运作及保护
简述一下你对HTML语义化的懂得?
用准确的标签做准确的事情。
html语义化让页面的内容构造化,构造更清楚,便于对阅读器、搜索引擎解析;
即便在没有样式CSS状况下也以一种文档格局显示,并且是容易阅读的;
搜索引擎的爬虫也依靠于HTML标志来肯定上下文和各个关键字的权重,利于SEO;
使阅读源代码的人对网站更容易将网站分块,便于阅读保护懂得
Doctype作用?标准模式与兼容模式各有什么不同?
<!DOCTYPE>
声明位于位于HTML
文档中的第一行,处于<html>
标签此前。告知阅读器的解析器用什么文档标准解析这个文档。DOCTYPE
不存在或格局不准确会致使文档以兼容模式显现标准模式的排版 和JS运作模式都是以该阅读器支撑的最高标准运转。在兼容模式中,页面以宽松的向后兼容的方式显示,模拟老式阅读器的行动以防止站点没法工作
HTML5 为什么只需要写 <!DOCTYPE HTML>?
HTML5 不基于 SGML,因此不需要对DTD停止援用,但是需要doctype来标准阅读器的行动(让阅读器依照它们应当的方式来运转)
而HTML4.01基于SGML,所以需要对DTD停止援用,才能告知阅读器文档所使用的文档类型
行内元素是什么?块级元素是什么? 空(void)元素有那些?
行内元素有:
a b span img input select strong
(强调的语气)块级元素有:
p ul ol li dl dt dd h1 h2 h3 h4…p
常见的空元素:
<br> <hr> <img> <input> <link> <meta>
页面导入样式时,使用link和@import有什么不同?
link
属于XHTML
标签,除了加载CSS
外,还能用于定义RSS
,定义rel
连接属性等作用;而@import
是CSS
供给的,只能用于加载CSS
页面被加载的时,
link
会同时被加载,而@import
援用的CSS
会比及页面被加载完再加载import
是CSS2.1
提出的,只在IE5
以上才能被识别,而link
是XHTML
标签,无兼容问题
介绍一下你对阅读器内核的懂得?
主要分成两部分:渲染引擎(
layout engineer
或Rendering Engine
)和JS
引擎渲染引擎:负责取得网页的内容(HTML、XML、图像等等)、整理讯息(例如参加CSS等),乃至运算网页的显示方式,然后会输出至显示器或打印机。阅读器的内核的不一样关于网页的语法说明会有不一样,所以渲染的结果也不雷同。所有网页阅读器、电子邮件客户端乃至其它需要编纂、显示网络内容的利用程序都需要内核
JS引擎则:解析和施行javascript来实现网页的动态结果
最开端渲染引擎和JS引擎并没有区分的很明白,后来JS引擎越来越独立,内核就倾向于只指渲染引擎
常见的阅读器内核是什么?
Trident
内核:IE,MaxThon,TT,The World,360
,搜狗阅读器等。[又称MSHTML]Gecko
内核:Netscape6
及以上版本,FF,MozillaSuite/SeaMonkey
等Presto
内核:Opera7
及以上。 [Opera
内核原为:Presto,现为:Blink
;]Webkit
内核:Safari,Chrome
等。 [Chrome
的Blink
(WebKit
的分支)]
html5是什么新特性、移除了那些元素?怎样处置HTML5新标签的阅读器兼容问题?怎样区分 HTML 和 HTML5?
HTML5 此刻已经不是 SGML 的子集,主如果关于图像,位置,储备,多任务等功效的增添
绘画 canvas
用于媒介回放的 video 和 audio 元素
当地离线储备 localStorage 长期储备数据,阅读器关闭后数据不丧失
sessionStorage 的数据在阅读器关闭后主动删除
语意化更好的内容元素,比方 article、footer、header、nav、section
表单控件,calendar、date、time、email、url、search
新的技术webworker, websocket, Geolocation
移除的元素:
纯展现的元素:basefont,big,center,font, s,strike,tt,u
对可用性发生负面影响的元素:frame,frameset,noframes
支撑HTML5新标签:
IE8/IE7/IE6支撑通过document.createElement办法发生的标签
可以利用这一特性让这些阅读器支撑HTML5新标签
阅读器支撑新标签后,还需要增加标签默许的样式
当然也可以直接使用成熟的框架、比方html5shim
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com /svn/trunk/html5.js"</script><![endif]-->
怎样区分HTML5: DOCTYPE声明新增的构造元素功效元素
HTML5的离线贮存如何使用,工作道理能不克不及说明一下?
在会员没有与因特网连接时,可以正常拜访站点或利用,在会员与因特网连接时,更新会员机器上的缓存文件
道理:HTML5的离线储备是基于一个创建的.appcache文件的缓存机制(不是储备技术),通过这个文件上的解析清单离线储备资源,这些资源就会像cookie一样被储备了下来。之后当网络在处于离线状态下时,阅读器会通过被离线储备的数据停止页面展现
怎样使用:
页面头部像下面一样参加一个manifest的属性;
在cache.manifest文件的编写离线储备的资源
在离线状态时,操纵window.applicationCache停止需求实现
CACHE MANIFEST #v0.11 CACHE: js/app.js css/style.css NETWORK: resourse/logo.png FALLBACK: / /offline.html
阅读器是如何对HTML5的离线贮存资源停止治理和加载的呢?
在线的状况下,阅读器发明html头部有manifest属性,它会恳求manifest文件,假如是第一次拜访app,那么阅读器就会按照manifest文件的内容下载响应的资源并且停止离线储备。假如已经拜访过app并且资源已经离线储备了,那么阅读器就会使用离线的资源加载页面,然后阅读器会对照新的manifest文件与旧的manifest文件,假如文件没有发生改动,就不做任何操纵,假如文件改动了,那么就会从新下载文件中的资源并停止离线储备。
离线的状况下,阅读器就直接使用离线储备的资源。
请描写一下 cookies,sessionStorage 和 localStorage 的不同?
cookie是网站为了标示会员身份而贮存在会员当地终端(Client Side)上的数据(平常经过加密)
cookie数据始终在同源的http恳求中携带(即便不需要),记会在阅读器和效劳器间来回传递
sessionStorage
和localStorage
不会主动把数据发给效劳器,仅在当地留存储备大小:
cookie
数据大小不克不及超越4ksessionStorage
和localStorage
虽然也有储备大小的限制,但比cookie大得多,可以到达5M或更大有期时间:
localStorage
储备耐久数据,阅读器关闭后数据不丧失除非主动删除数据sessionStorage
数据在当前阅读器窗口关闭后主动删除cookie
设定的cookie
过期时间此前不断有效,即便窗口或阅读器关闭
iframe有那些缺陷?
iframe会堵塞主页面的Onload事件
搜索引擎的检索程序没法解读这种页面,不利于SEO
iframe和主页面同享连接池,而阅读器对雷同域的连接有限制,所以会影响页面的并行加载
使用
iframe
此前需要思考这两个缺陷。假如需要使用iframe
,最好是通过javascript
动态给iframe
增加src
属性值,这样可以绕开以上两个问题
Label的作用是啥?是如何用的?
label标签来定义表单操纵间的关系,当会员选中该标签时,阅读器会主动将焦点转到和标签相关的表单控件
HTML5的form怎样关闭主动完成功效?
给不想要提醒的 form 或某个 input 设定为 autocomplete=off。
怎样实现阅读器内多个标签页之间的通讯? (阿里)
WebSocket、SharedWorker
也可以调取localstorge、cookies等当地储备方式
webSocket怎样兼容低阅读器?(阿里)
Adobe Flash Socket 、
ActiveX HTMLFile (IE) 、
基于 multipart 编码发送 XHR 、
基于长轮询的 XHR
页面可见性(Page Visibility API) 可以是什么用处?
通过 visibilityState 的值检测页面当前可否可见,乃至翻开网页的时间等;
在页面被切换到其他后台进程的时候,主动暂停音乐或视频的播放
怎样在页面上实现一个圆形的可点击区域?
map+area或者svg
border-radius
纯js实现 需要求一个点在不在圆上简便算法、猎取鼠标坐标等等
实现不使用 border 画出1px高的线,在不一样阅读器的标准模式与怪异模式下都能保持一致的结果
<p style="height:1px;overflow:hidden;background:red"></p>
网页验证码是干嘛的,是为理解决什么平安问题
区分会员是运算机还是人的公共全主动程序。可以防止歹意破解密码、刷票、论坛灌水
有效防止黑客对某一个特定注册会员用特定程序暴力破解方式停止不竭的登陆尝试
title与h1的不同、b与strong的不同、i与em的不同?
title
属性没有明白意义只表示是个标题,H1则表示层次明白的标题,对页面信息的抓取也有很大的影响strong
是标明重点内容,有语气增强的含义,使用阅读设备阅读网络时:会重读,而是展现强调内容i内容展现为歪体,em表示强调的文本
页面导入样式时,使用 link 和 @import 有什么不同?
link 属于HTML标签,除了加载CSS外,还能用于定 RSS等;@import 只能用于加载CSS
页面加载的时,link 会同时被加载,而 @import 援用的 CSS 会比及页面被加载完再加载
@import 只在 IE5 以上才能被识别,而 link 是HTML标签,无兼容问题
介绍一下你对阅读器内核的懂得?
阅读器内核主要分为两部分:渲染引擎(layout engineer 或 Rendering Engine) 和 JS引擎
渲染引擎负责取得网页的内容停止规划计和样式渲染,然后会输出至显示器或打印机
JS引擎则负责解析和施行JS足原本实现网页的动态结果和会员交互
最开端渲染引擎和JS引擎并没有区分的很明白,后来JS引擎越来越独立,内核就倾向于只指渲染引擎
常见的阅读器内核是什么?
Blink内核:新版 Chrome、新版 Opera
Webkit内核:Safari、原Chrome
Gecko内核:FireFox、Netscape6及以上版本
Trident内核(又称MSHTML内核):IE、国产阅读器
Presto内核:原Opera7及以上
HTML5是什么新特性?
新增选中器 document.querySelector、document.querySelectorAll
拖拽开释(Drag and drop) API
媒体播放的 video 和 audio
当地储备 localStorage 和 sessionStorage
离线利用 manifest
桌面通知 Notifications
语意化标签 article、footer、header、nav、section
增强表单控件 calendar、date、time、email、url、search
地理位置 Geolocation
多任务 webworker
全双工通讯和谈 websocket
历史治理 history
跨域资源同享(CORS) Access-Control-Allow-Origin
页面可见性改动事件 visibilitychange
跨窗口通讯 PostMessage
Form Data 对象
绘画 canvas
HTML5移除了那些元素?
纯展现的元素:basefont、big、center、font、s、strike、tt、u
对可用性发生负面影响的元素:frame、frameset、noframes
怎样处置HTML5新标签的阅读器兼容问题?
通过 document.createElement 创立新标签
使用垫片 html5shiv.js
怎样区分 HTML 和 HTML5?
DOCTYPE声明、新增的构造元素、功效元素
HTML5的离线贮存工作道理能不克不及说明一下,如何使用?
HTML5的离线贮存道理:
会员在线时,留存更新会员机器上的缓存文件;当会员离线时,可以正常访离线贮存问站点或利用内容
HTML5的离线贮存使用:
在文档的 html 标签设定 manifest 属性,如 manifest="/offline.appcache"
在项目中创建 manifest 文件,manifest 文件的命名倡议:xxx.appcache
在 web 效劳器配置准确的 MIME-type,即 text/cache-manifest
阅读器是如何对HTML5的离线贮存资源停止治理和加载的?
在线的状况下,阅读器发明 html 标签有 manifest 属性,它会恳求 manifest 文件
假如是第一次拜访app,那么阅读器就会按照 manifest 文件的内容下载响应的资源并且停止离线储备
假如已经拜访过app且资源已经离线储备了,阅读器会对照新的 manifest 文件与旧的 manifest 文件,假如文件没有发生改动,就不做任何操纵。假如文件改动了,那么就会从新下载文件中的资源并停止离线储备
离线的状况下,阅读器就直接使用离线储备的资源。
iframe 有那些长处和缺陷?
长处:
用来加载速度较慢的内容(如广告)
可以使足本可以并行下载
可以实现跨子域通讯
缺陷:
iframe 会堵塞主页面的 onload 事件
没法被一些搜索引擎索识别
会发生许多页面,不容易治理
label 的作用是啥?如何使用的?
label标签来定义表单控件的关系:
当会员选中label标签时,阅读器会主动将焦点转到和label标签相关的表单控件上
使用办法1:
<label for="mobile">Number:</label>
<input type="text" id="mobile"/>
使用办法2:
<label>Date:<input type="text"/></label>
怎样实现阅读器内多个标签页之间的通讯?
iframe + contentWindow
postMessage
SharedWorker(Web Worker API)
storage 事件(localStorge API)
WebSocket
webSocket 怎样兼容低阅读器?
Adobe Flash Socket
ActiveX HTMLFile (IE)
基于 multipart 编码发送 XHR
基于长轮询的 XHR
页面可见性(Page Visibility API) 可以是什么用处?
在页面被切换到其他后台进程的时候,主动暂停音乐或视频的播放
当会员阅读其他页面,暂停网站首页幻灯主动播放
完成登陆后,无刷新主动同步其他页面的登录状态
title 与 h1 的不同、b 与 strong 的不同、i 与 em 的不同?
title 表示是整个页面标题,h1 则表示层次明白的标题,对页面信息的抓取有很大的影响
strong 标明重点内容,有语气增强的含义,使用阅读设备阅读网络时,strong 会重读,而 b
是展现强调内容
i 内容展现为歪体,em 表示强调的文本
天然样式标签:b, i, u, s, pre
语义样式标签:strong, em, ins, del, code
应当准确使用语义样式标签, 但不克不及滥用。假如不克不及肯定时,首选使用天然样式标签
相关引荐:
几个HTML根基知识点
在前端中的html根基知识
html根基图像知识详解
以上就是html的根基 理论的具体内容,更多请关注百分百源码网其它相关文章!