中国建设银行个人卡信息网站,凡科网站为什么免费做网站,WordPress评论楼层,天眼查企业查询官网登录目录 一、src 和 href 的区别
二、对 HTML 语义化的理解
三、DOCTYPE(⽂档类型) 的作⽤
四、script 标签中 defer 和 async 的区别
五、常⽤的 meta 标签有哪些#xff1f;
六、HTML5 有哪些更新
八、行内元素有哪些#xff1f;块级元素有哪些#xff1f; 空(void)元素…目录 一、src 和 href 的区别
二、对 HTML 语义化的理解
三、DOCTYPE(⽂档类型) 的作⽤
四、script 标签中 defer 和 async 的区别
五、常⽤的 meta 标签有哪些
六、HTML5 有哪些更新
八、行内元素有哪些块级元素有哪些 空(void)元素有那些
九、说一下 web worker
十、HTML5 的离线储存怎么使用它的工作原理是什么
十一、浏览器是如何对 HTML5 的离线储存资源进行管理和加载
十二、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别
十三、iframe 有那些优点和缺点
十四、label 的作用是什么如何使用
十五、Canvas 和 SVG 的区别
十六、head 标签有什么作用其中什么标签必不可少
十七、文档声明Doctype和有何作用? 严格模式与混杂模式如何区分它们有何意义?
十八、浏览器乱码的原因是什么如何解决
十九、渐进增强和优雅降级之间的区别
二十、说一下 HTML5 drag API 一、src 和 href 的区别
src 和 href 都是用来引用外部的资源它们的区别如下
src表示对资源的引用它指向的内容会嵌入到当前标签所在的位置。src 会将其指向的资源下载并应⽤到⽂档内如请求 js 脚本。当浏览器解析到该元素时会暂停其他资源的下载和处理直到将该资源加载、编译、执⾏完毕所以⼀般 js 脚本会放在页面底部。href表示超文本引用它指向一些网络资源建立和当前元素或本文档的链接关系。当浏览器识别到它指向的⽂件时就会并⾏下载资源不会停⽌对当前⽂档的处理。 常用在 a、link 等标签上。
二、对 HTML 语义化的理解
语义化是指根据内容的结构化内容语义化选择合适的标签代码语义化。通俗来讲就是用正确的标签做正确的事情。
语义化的优点如下
对机器友好带有语义的文字表现力丰富更适合搜索引擎的爬虫爬取有效信息有利于 SEO。除此之外语义类还支持读屏软件根据文章可以自动生成目录对开发者友好使用语义类标签增强了可读性结构更加清晰开发者能清晰的看出网页的结构便于团队的开发与维护
常见的语义化标签
header/header 头部
nav/nav 导航栏
section/section 区块有语义化的div
main/main 主要区域
article/article 主要内容
aside/aside 侧边栏
footer/footer 底部 三、DOCTYPE(⽂档类型) 的作⽤ DOCTYPE 是 HTML5 中一种标准通用标记语言的文档类型声明它的目的是告诉浏览器解析器应该以什么样html 或 xhtml的文档类型定义来解析文档不同的渲染模式会影响浏览器对 CSS 代码甚⾄ JavaScript 脚本的解析。它必须声明在 HTML ⽂档的第⼀⾏。 浏览器渲染页面的两种模式可通过 document.compatMode 获取比如语雀官网的文档类型是CSS1Compat
CSS1Compat标准模式Strick mode默认模式浏览器使用 W3C 的标准解析渲染页面。在标准模式中浏览器以其支持的最高标准呈现页面。BackCompat怪异模式混杂模式Quick mode浏览器使用自己的怪异模式解析渲染页面。在怪异模式中页面以一种比较宽松的向后兼容的方式显示。四、script 标签中 defer 和 async 的区别
如果没有 defer 或 async 属性浏览器会立即加载并执行相应的脚本。它不会等待后续加载的文档元素读取到就会开始加载和执行这样就阻塞了后续文档的加载。
下图可以直观的看出三者之间的区别: 其中蓝色代表 js 脚本网络加载时间红色代表 js 脚本执行时间绿色代表 html 解析。
defer 和 async 属性都是去异步加载外部的 JS 脚本文件它们都不会阻塞页面的解析其区别如下
执行顺序: 多个带 async 属性的标签不能保证加载的顺序多个带 defer 属性的标签按照加载顺序执行脚本是否并行执行async 属性表示后续文档的加载和执行与 js 脚本的加载和执行是并行进行的即异步执行defer 属性加载后续文档的过程和 js 脚本的加载(此时仅加载不执行)是并行进行的(异步)js 脚本需要等到文档所有元素解析完成之后才执行DOMContentLoaded 事件触发执行之前。五、常⽤的 meta 标签有哪些
meta 标签由 name 和 content 属性定义用来描述网页文档的属性比如网页的作者网页描述关键词等除了 HTTP 标准固定了一些name作为大家使用的共识开发者还可以自定义 name。
常用的 meta 标签
1charset用来描述 HTML 文档的编码类型
meta charsetUTF-8
2keywords页面关键词
meta namekeywords content关键词 /
3description页面描述
meta namedescription content页面描述内容 /
4refresh页面重定向和刷新
meta http-equivrefresh content0;url /
5viewport适配移动端可以控制视口的大小和比例
meta nameviewport contentwidthdevice-width, initial-scale1, maximum-scale1
其中content 参数有以下几种
width viewport宽度(数值/device-width)height viewport高度(数值/device-height)initial-scale初始缩放比例maximum-scale最大缩放比例minimum-scale最小缩放比例user-scalable是否允许用户缩放(yes/no
6搜索引擎索引方式
meta namerobots contentindex,follow /
其中content 参数有以下几种
all文件将被检索且页面上的链接可以被查询none文件将不被检索且页面上的链接不可以被查询index文件将被检索follow页面上的链接可以被查询noindex文件将不被检索nofollow页面上的链接不可以被查询。六、HTML5 有哪些更新
1. 语义化标签
header定义文档的页眉头部nav定义导航链接的部分footer定义文档或节的页脚底部article定义文章内容section定义文档中的节section、区段aside定义其所处内容之外的内容侧边
2. 媒体标签
1 audio音频
audio src controls autoplay looptrue/audio
属性
controls 控制面板autoplay 自动播放loop‘true’ 循环播放
2video 视频
video src posterimgs/aa.jpg controls/video
属性
poster指定视频还没有完全下载完毕或者用户还没有点击播放前显示的封面。默认显示当前视频文件的第一针画面当然通过 poster 也可以自己指定controls 控制面板widthheight
3source 标签
因为浏览器对视频格式支持程度不一样为了能够兼容不同的浏览器可以通过 source 来指定视频源。
videosource srcaa.flv typevideo/flv/sourcesource srcaa.mp4 typevideo/mp4/source
/video
3. 表单
表单类型
email 能够验证当前输入的邮箱地址是否合法url 验证 URLnumber 只能输入数字其他输入不了而且自带上下增大减小箭头max 属性可以设置为最大值min 可以设置为最小值value 为默认值search 输入框后面会给提供一个小叉可以删除输入的内容更加人性化range 可以提供给一个范围其中可以设置 max 和 min 以及 value其中 value 属性可以设置为默认值color 提供了一个颜色拾取器time 时分秒date 日期选择年月日datetime 时间和日期(目前只有 Safari 支持)datetime-local 日期时间控件week 周控件month月控件
表单属性
placeholder 提示信息autofocus 自动获取焦点autocomplete“on” 或者 autocomplete“off” 使用这个属性需要有两个前提
表单必须提交过 必须有 name 属性
required要求输入框不能为空必须有值才能够提交pattern 里面写入想要的正则模式例如手机号 patte^(86)?\d{10}$multiple可以选择多个文件或者多个邮箱form form 表单的 ID
表单事件
oninput 每当 input 里的输入框内容发生变化都会触发此事件oninvalid 当验证不通过时触发此事件
4. 进度条、度量器
progress 标签用来表示任务的进度IE、Safari 不支持max 用来表示任务的进度value 表示已完成多少meter 属性用来显示剩余容量或剩余库存IE、Safari 不支持high/low规定被视作高/低的范围max/min规定最大/小值value规定当前度量值
设置规则min low high max
5.DOM 查询操作
document.querySelector()document.querySelectorAll()
它们选择的对象可以是标签可以是类(需要加点)可以是 ID(需要加#)
6. Web 存储
HTML5 提供了两种在客户端存储数据的新方法
localStorage - 没有时间限制的数据存储sessionStorage - 针对一个 session 的数据存储
7. 其他
拖放拖放是一种常见的特性即抓取对象以后拖到另一个位置。设置元素可拖放
img draggabletrue / 画布canvas canvas 元素使用 JavaScript 在网页上绘制图像。画布是一个矩形区域可以控制其每一像素。canvas 拥有多种绘制路径、矩形、圆形、字符以及添加图像的方法。
canvas idmyCanvas width200 height100/canvas
SVGSVG 指可伸缩矢量图形用于定义用于网络的基于矢量的图形使用 XML 格式定义图形图像在放大或改变尺寸的情况下其图形质量不会有损失它是万维网联盟的标准地理定位Geolocation地理定位用于定位用户的位置。‘
总结
1新增语义化标签nav、header、footer、aside、section、article
2音频、视频标签audio、video
3数据存储localStorage、sessionStorage
4canvas画布、Geolocation地理定位、websocket通信协议
5input 标签新增属性placeholder、autocomplete、autofocus、required
6history APIgo、forward、back、pushstate
移除的元素有
纯表现的元素basefontbigcenterfont, sstrikettu;对可用性产生负面影响的元素frameframesetnoframes七、img 的 srcset 属性的作用
响应式页面中经常用到根据屏幕密度设置不同的图片。这时就用到了 img 标签的 srcset 属性。srcset 属性用于设置不同屏幕密度下img 会自动加载不同的图片。用法如下
img srcimage-128.png srcsetimage-256.png 2x /
使用上面的代码就能实现在屏幕密度为 1x 的情况下加载 image-128.png, 屏幕密度为 2x 时加载 image-256.png。
按照上面的实现不同的屏幕密度都要设置图片地址目前的屏幕密度有 1x,2x,3x,4x 四种如果每一个图片都设置 4 张图片加载就会很慢。所以就有了新的 srcset 标准。代码如下
img srcimage-128.pngsrcsetimage-128.png 128w, image-256.png 256w, image-512.png 512wsizes(max-width: 360px) 340px, 128px /
其中 srcset 指定图片的地址和对应的图片质量。sizes 用来设置图片的尺寸零界点。对于 srcset 中的 w 单位可以理解成图片质量。如果可视区域小于这个质量的值就可以使用。浏览器会自动选择一个最小的可用图片。
sizes 语法如下
sizes[media query] [length], [media query] [length] ...
sizes 就是指默认显示 128px, 如果视区宽度大于 360px, 则显示 340px。 八、行内元素有哪些块级元素有哪些 空(void)元素有那些
行内元素有a b span img input select strong块级元素有div ul ol li dl dt dd h1 h2 h3 h4 h5 h6 p
空元素即没有内容的 HTML 元素。空元素是在开始标签中关闭的也就是空元素没有闭合标签
常见的有br、hr、img、input、link、meta鲜见的有area、base、col、colgroup、command、embed、keygen、param、source、track、wbr。九、说一下 web worker 在 HTML 页面中如果在执行脚本时页面的状态是不可响应的直到脚本执行完成后页面才变成可响应。web worker 是运行在后台的 js独立于其他脚本不会影响页面的性能。 并且通过 postMessage 将结果回传到主线程。这样在进行复杂操作的时候就不会阻塞主线程了。 如何创建 web worker
检测浏览器对于 web worker 的支持性创建 web worker 文件js回传函数等创建 web worker 对象十、HTML5 的离线储存怎么使用它的工作原理是什么
离线存储指的是在用户没有与因特网连接时可以正常访问站点或应用在用户与因特网连接时更新用户机器上的缓存文件。
原理HTML5 的离线存储是基于一个新建的 .appcache 文件的缓存机制(不是存储技术)通过这个文件上的解析清单离线存储资源这些资源就会像 cookie 一样被存储了下来。之后当网络在处于离线状态下时浏览器会通过被离线存储的数据进行页面展示
使用方法
1创建一个和 html 同名的 manifest 文件然后在页面头部加入 manifest 属性
html langen manifestindex.manifest
2在 cache.manifest 文件中编写需要离线存储的资源
CACHE MANIFEST#v0.11CACHE:js/app.jscss/style.cssNETWORK:resourse/logo.pngFALLBACK:/ /offline.html
CACHE: 表示需要离线存储的资源列表由于包含 manifest 文件的页面将被自动离线存储所以不需要把页面自身也列出来。NETWORK: 表示在它下面列出来的资源只有在在线的情况下才能访问他们不会被离线存储所以在离线情况下无法使用这些资源。不过如果在 CACHE 和 NETWORK 中有一个相同的资源那么这个资源还是会被离线存储也就是说 CACHE 的优先级更高。FALLBACK: 表示如果访问第一个资源失败那么就使用第二个资源来替换他比如上面这个文件表示的就是如果访问根目录下任何一个资源失败了那么就去访问 offline.html 。
3在离线状态时操作 window.applicationCache 进行离线缓存的操作。
如何更新缓存
1更新 manifest 文件
2通过 javascript 操作
3清除浏览器缓存
注意事项
1浏览器对缓存数据的容量限制可能不太一样某些浏览器设置的限制是每个站点 5MB。
2如果 manifest 文件或者内部列举的某一个文件不能正常下载整个更新过程都将失败浏览器继续全部使用老的缓存。
3引用 manifest 的 html 必须与 manifest 文件同源在同一个域下。
4FALLBACK 中的资源必须和 manifest 文件同源。
5当一个资源被缓存后该浏览器直接请求这个绝对路径也会访问缓存中的资源。
6站点中的其他页面即使没有设置 manifest 属性请求的资源如果在缓存中也从缓存中访问。
7当 manifest 文件发生改变时资源请求本身也会触发更新。 十一、浏览器是如何对 HTML5 的离线储存资源进行管理和加载
在线的情况下浏览器发现 html 头部有 manifest 属性它会请求 manifest 文件如果是第一次访问页面 那么浏览器就会根据 manifest 文件的内容下载相应的资源并且进行离线存储。如果已经访问过页面并且资源已经进行离线存储了那么浏览器就会使用离线的资源加载页面然后浏览器会对比新的 manifest 文件与旧的 manifest 文件如果文件没有发生改变就不做任何操作如果文件改变了就会重新下载文件中的资源并进行离线存储。离线的情况下浏览器会直接使用离线存储的资源。十二、title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别
strong 标签有语义是起到strong加重语气/strong的效果而 b 标签是没有的b 标签只是一个b简单加粗/b标签。b 标签之间的字符都设为粗体strong 标签加强字符的语气都是通过粗体来实现的而**搜索引擎更侧重 strong 标签title 属性没有明确意义只表示是个title标题/titleH1 则表示h1层次明确的标题/h1对页面信息的抓取有很大的影响i 内容展示为i斜体/iem 表示em强调的文本/em十三、iframe 有那些优点和缺点
iframe 元素会创建包含另外一个文档的内联框架即行内框架。
优点
用来加载速度较慢的内容如广告可以使脚本并行下载可以实现跨子域通信
缺点
iframe 会阻塞主页面的 onload 事件无法被一些搜索引擎所识别会产生很多页面不容易管理十四、label 的作用是什么如何使用
label 标签来定义表单控件的关系当用户选择 label 标签时浏览器会自动将焦点转到和 label 标签相关的表单控件上。
使用方法 1
label formobileNumber:/label
input typetext idmobile/
使用方法 2
labelDate:input typetext//label 十五、Canvas 和 SVG 的区别
1SVG SVG 可缩放矢量图形Scalable Vector Graphics是基于可扩展标记语言 XML 描述的 2D 图形的语言SVG 基于 XML 就意味着 SVG DOM 中的每个元素都是可用的可以为某个元素附加 JavaScript 事件处理器。在 SVG 中每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化那么浏览器能够自动重现图形。 其特点如下
不依赖分辨率支持事件处理器最适合带有大型渲染区域的应用程序比如谷歌地图复杂度高会减慢渲染速度任何过度使用 DOM 的应用都不快不适合游戏应用
2Canvas Canvas 是画布通过 JavaScript 来绘制 2D 图形是逐像素进行渲染的。其位置发生改变就会重新进行绘制。 其特点如下
依赖分辨率不支持事件处理器弱的文本渲染能力能够以 .png 或 .jpg 格式保存结果图像最适合图像密集型的游戏其中的许多对象会被频繁重绘
注矢量图也称为面向对象的图像或绘图图像在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体它具有颜色、形状、轮廓、大小和屏幕位置等属性。 十六、head 标签有什么作用其中什么标签必不可少
作用
用于定义文档的头部它是所有头部元素的容器。引用资源脚本、样式表等。描述文档元信息、文档标题、在 Web 中的位置以及和其他文档的关系等绝大多数文档头部包含的数据都不会真正作为内容显示给用户
常见标签
baselinkmetascriptstyletitle(唯一必需)十七、文档声明Doctype和!Doctype html有何作用? 严格模式与混杂模式如何区分它们有何意义? 文档声明的作用文档声明是为了告诉浏览器当前HTML文档使用什么版本的HTML来写的这样浏览器才能按照声明的版本来正确的解析。 !Doctype html的作用!doctype html 的作用就是让浏览器进入标准模式使用最新的 HTML5 标准来解析渲染页面如果不写浏览器就会进入混杂模式我们需要避免此类情况发生。 严格模式与混杂模式的区分
严格模式 又称为标准模式指浏览器按照W3C标准解析代码混杂模式 又称怪异模式、兼容模式是指浏览器用自己的方式解析代码。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作区分网页中的DTD直接影响到使用的是严格模式还是浏览模式可以说DTD的使用与这两种方式的区别息息相关如果文档包含严格的DOCTYPE那么它一般以严格模式呈现严格 DTD ——严格模式包含过渡 DTD 和 URI 的 DOCTYPE 也以严格模式呈现但有过渡 DTD 而没有 URI 统一资源标识符就是声明最后的地址会导致页面以混杂模式呈现有 URI 的过渡 DTD ——严格模式没有 URI 的过渡 DTD ——混杂模式DOCTYPE 不存在或形式不正确会导致文档以混杂模式呈现DTD 不存在或者格式不正确——混杂模式HTML5 没有 DTD 因此也就没有严格模式与混杂模式的区别HTML5 有相对宽松的 法实现时已经尽可能大的实现了向后兼容(HTML5 没有严格和混杂之分)。
总之严格模式让各个浏览器统一执行一套规范兼容模式保证了旧网站的正常运行。 十八、浏览器乱码的原因是什么如何解决
产生乱码的原因
网页源代码是gbk的编码而内容中的中文字是utf-8编码的这样浏览器打开即会出现html乱码反之也会出现乱码html网页编码是gbk而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码浏览器不能自动检测网页编码造成网页乱码
解决办法
使用软件编辑 HTML 网页内容如果网页设置编码是gbk而数据库储存数据编码格式是UTF-8此时需要程序查询数据库数据显示数据前进程序转码如果浏览器浏览时候出现网页乱码在浏览器中找到转换编码的菜单进行转换十九、渐进增强和优雅降级之间的区别
1渐进增强progressive enhancement主要是针对低版本的浏览器进行页面重构保证基本的功能情况下再针对高级浏览器进行效果、交互等方面的改进和追加功能以达到更好的用户体验。
2优雅降级 graceful degradation 一开始就构建完整的功能然后再针对低版本的浏览器进行兼容。
两者区别
优雅降级是从复杂的现状开始的并试图减少用户体验的供给而渐进增强是从一个非常基础的能够起作用的版本开始的并在此基础上不断扩充以适应未来环境的需要降级功能衰竭意味着往回看而渐进增强则意味着往前看同时保证其根基处于安全地带
优雅降级观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为过时或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段并把测试对象限定为主流浏览器如 IE、Mozilla 等的前一个版本。 在这种设计范例下旧版的浏览器被认为仅能提供简陋却无妨 (poor, but passable)的浏览体验。可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点因此除了修复较大的错误之外其它的差异将被直接忽略。
渐进增强观点则认为应关注于内容本身。内容是建立网站的诱因有的网站展示它有的则收集它有的寻求有的操作还有的网站甚至会包含以上的种种但相同点是它们全都涉及到内容。这使得渐进增强成为一种更为合理的设计范例。这也是它立即被 Yahoo 所采纳并用以构建其分级式浏览器支持 (Graded Browser Support)策略的原因所在。 二十、说一下 HTML5 drag API
dragstart事件主体是被拖放元素在开始拖放被拖放元素时触发。darg事件主体是被拖放元素在正在拖放被拖放元素时触发。dragenter事件主体是目标元素在被拖放元素进入某元素时触发。dragover事件主体是目标元素在被拖放在某元素内移动时触发。dragleave事件主体是目标元素在被拖放元素移出目标元素是触发。drop事件主体是目标元素在目标元素完全接受被拖放元素时触发。dragend事件主体是被拖放元素在整个拖放操作结束时触发。
