内容
html语义化就是让页面的内容结构化。
1.在没有样式CCS情况下也以一种文档格式显示,并且是容易阅读的。
2.搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重,利于 SEO。
3.使阅读源代码的人对网站更容易将网站分块,便于阅读维护理解。
4.方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以有意义的方式来渲染网页;
5.便于团队开发和维护,语义化更具可读性,是下一步吧网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化
Web语义化是指使用恰当语义的html标签、class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容。语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究网页的信息,从而可以读懂网页的内容,然后将收集汇总的信息进行分析,结果为人类所用;另一方面它可以让开发人员读懂结构和用户以及屏幕阅读器(如果访客有视障)能够读懂内容。
包含两个方面:html语义化及css命名语义化。
简单来说就是利于 SEO,便于阅读维护理解。
总结起来就是:
正确的标签做正确的事情
页面内容结构化
无CSS样子时也容易阅读,便于阅读维护和理解
便于浏览器、搜索引擎解析。 利于爬虫标记、利于SEO
html语义化标签包括 body, article, nav, aside, section, header, footer, hgroup, 还有 h1-h6 address等。h1拥有最高的权值,在一个页面中最好指使用1个h1来突出你的内容,太多的h1会分散其整个页面的权重,对搜索引擎也是非常的不友好。
原理:HTML5的离线存储是基于一个新建的app cache文件的缓存机制(不是存储技术),通过这个文件上的解析清单离线存储资源,这些资源就会像cookie一样被存储了下来。之后当网络在处于离线状态下时,浏览器会通过被离线存储的数据进行页面展示。
如果需要使用iframe,最好是通过javascript动态给iframe添加src属性值,这样可以绕开以上两个问题
web标准简单来说可以分为结构(HTML)、表现(CSS)和行为(JS)。
W3C对 web标准提出了规范化的要求,也就是在实际编程中的一些代码规范。
网页标准和标准制定机构都是为了能让web发展的更“健康”,开发者遵循统一的标准,降低开发难度,开发成本,SEO也会更好做,也不会因为滥用代码导致各种BUG、安全问题,最终提高网站易用性。
标签闭合、标签小写、不乱嵌套、使用外链css和js、结构行为表现的分离
严格模式:又称标准模式,是指浏览器按照 W3C标准解析代码
混杂模式:又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码
区分
1、如果文档包含严格的 DOCTYPE,那么它一般以严格模式呈现。(严格 DTD——严格模式)
2、包含过渡 DTD和 URI的 DOCTYPE,也以严格模式呈现,但有过渡 DTD而没有 URI(统一资源标识符,就是声明最后的地址)会导致页面以混杂模式呈现。(有 URI的过渡 DTD——严格模式;没有 URI的过渡 DTD——混杂模式)
3、DOCTYPE不存在或形式不正确会导致文档以混杂模式呈现。(DTD不存在或者格式不正确——混杂模式)
4、HTML5没有 DTD,因此也就没有严格模式与混杂模式的区别,HTML5有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。( HTML5没有严格和混杂之分)
class:为元素设置类标识
data-*: 为元素增加自定义属性
draggable: 设置元素是否可拖拽
id: 元素id,文档内唯一
lang: 元素内容的的语言
style: 行内css样式
title: 元素相关的建议信息
SVG
SVG 是一种使用 XML 描述 2D 图形的语言。
SVG 基于 XML,这意味着 SVG DOM 中的每个元素都是可用的。您可以为某个元素附加 JavaScript 事件处理器。
在 SVG 中,每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化,那么浏览器能够自动重现图形。
Canvas
Canvas 通过 JavaScript 来绘制 2D 图形。
Canvas 是逐像素进行渲染的。
在 canvas 中,一旦图形被绘制完成,它就不会继续得到浏览器的关注。如果其位置发生变化,那么整个场景也需要重新绘制,包括任何或许已被图形覆盖的对象。
Canvas 与 SVG 的比较
Canvas
cookie是网站为了标示用户身份而储存在用户本地终端(Client Side)上的数据(通常经过加密)
cookie数据始终在同源的http请求中携带(即使不需要),记会在浏览器和服务器间来回传递
sessionStorage和localStorage不会自动把数据发给服务器,仅在本地保存
存储大小:
cookie数据大小不能超过4k
sessionStorage和localStorage虽然也有存储大小的限制,但比cookie大得多,可以达到5M或更大。
有期时间:
localStorage存储持久数据,浏览器关闭后数据不丢失除非主动删除数据
sessionStorage数据在当前浏览器窗口关闭后自动删除
cookie设置的cookie过期时间之前一直有效,即使窗口或浏览器关闭
web应用有不同设备尺寸和分辨率,这时需要响应式界面设计来满足复杂的布局需求,Flex弹性盒模型的优势在于开发人员只是声明布局应该具有的行为,而不需要给出具体的实现方式,浏览器负责完成实际布局,当布局涉及到不定宽度,分布对齐的场景时,就要优先考虑弹性盒布局。
不同浏览器的标签默认的margin和padding不一样。
IE6双边距bug:块属性标签float后,又有横行的margin情况下,在IE6显示margin比设置的大。hack:display:inline;将其转化为行内属性。
渐进识别的方式,从总体中逐渐排除局部。首先,巧妙的使用“9”这一标记,将IE浏览器从所有情况中分离出来。接着,再次使用“+”将IE8和IE7、IE6分离开来,这样IE8已经独立识别。
设置较小高度标签(一般小于10px),在IE6,IE7中高度超出自己设置高度。hack:给超出高度的标签设置overflow:hidden;或者设置行高line-height小于你设置的高度。
IE下,可以使用获取常规属性的方法来获取自定义属性,也可以使用getAttribute()获取自定义属性;Firefox下,只能使用getAttribute()获取自定义属性。解决方法:统一通过getAttribute()获取自定义属性。
因为浏览器的兼容问题,不同浏览器对有些标签的默认值是不同的,如果没对CSS初始化往往会出现浏览器之间的页面显示差异。