怎样理解web语义化?
1 | Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。 |
语义化的好处?
1 | 1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构 |
csskr。
1 | Web语义化是指使用语义恰当的标签,使页面有良好的结构,页面元素有含义,能够让人和搜索引擎都容易理解。 |
1 | 1. 去掉或者丢失样式的时候能够让页面呈现出清晰的结构 |
1 | Cookies是服务器在本地机器上存储的小段文本并随每一个请求发送至同一个服务器。 |
1 | 具体来说cookie机制采用的是在客户端保持状态的方案。 |
1 | 正统的cookie分发是通过扩展HTTP协议来实现的,服务器通过在HTTP的响应头中加上一行特殊的指示以提示浏览器按照指示生成相应的cookie。 |
1 | cookie的内容主要包括:名字,值,过期时间,路径和域。路径与域一起构成cookie的作用范围。 |
1 | 而session机制采用的是一种在服务器端保持状态的解决方案。同时我们也看到,由于采用服务器端保持状态的方案在客户端也需要保存一个标识, |
1 | session是针对每一个用户的,变量的值保存在服务器上,用一个sessionID来区分是哪个用户session变量, |
1 | 就安全性来说:当你访问一个使用session 的站点,同时在自己机子上建立一个cookie,建议在服务器端的session机制更安全些, |
1 | 当程序需要为某个客户端的请求创建一个session时,服务器首先检查这个客户端的请求里是否已包含了一个session标识(称为session id), |
Cookie与Session都能够进行会话跟踪,但是完成的原理不太一样。普通状况下二者均能够满足需求,但有时分不能够运用Cookie,
有时分不能够运用Session。下面经过比拟阐明二者的特性以及适用的场所。
1 | 1、存取方式的不同 |
HTML 5增加了一项新功能是自定义数据属性,也就是 data-*自定义属性。在HTML5中我们可以使用以data-为前缀来设置我们需要的自定义属性,
来进行一些数据的存放。当然高级浏览器下可通过脚本进行定义和数据存取。在项目实践中非常有用。1
<div id="user" data-uid="12345" data-uname="ifanybug"></div>
1 | var user = document.getElementById('user'); |
1 | user.setAttribute('data-site', 'http://www.ifanybug.com'); |
1 | 此方法能在所有的现代浏览器中正常工作,但它不是HTML 5 的自定义 data-* 属性被使用目的, |
这种“原始”的自定义属性和上面data-*自定义属性没什么区别,知识属性名不一样。
1 | 这种方式通过访问一个元素的dataset属性来存取data-*自定义属性的值。这个dataset属性是HTML5 JavaScript API的一部分, |
1 | data-*主要是对自定义属性做了标准化; |
1 | <script type="text/javascript"> |
如果你想删掉一个data-属性,可以这么做:1
2
3delete el.dataset.id;
//或者
el.dataset.id=null; 。
看起来很美,哈哈,但是不幸的是,新的dataset属性只有在Chrome 8+ Firefox(Gecko) 6.0+
Internet Explorer 11+ Opera 11.10+ Safari 6+浏览器中实现,
所以在此期间最好用的getAttribute和setAttribute来操作。
1 | 在实际开发时,您可能会发现它很有用,你可以根据自定义的data-属性选择相关的元素。例如使用querySelectorAll选择元素: |
1 | .data( key, value ) |
从jQuery 1.4.3起, HTML 5 data- 属性 将自动被引用到jQuery的数据对象中。
1
2
3
4
5
6
7例如HTML:
<div data-role="page" data-last-value="43" data-hidden="true" data-options='{"name":"John"}'></div>
下面的 jQuery代码都是返回 true 的:
$("div").data("role") === "page";
$("div").data("lastValue") === 43;
$("div").data("hidden") === true;
$("div").data("options").name === "John";
和html5的api不同的是,jQuery会尝试将字符串转换为一个JavaScript值(包括布尔值(booleans),数字(numbers),对象(objects),
数组(arrays)和空(null))。如果这样做不会改变数值的表示,那么该值将转换为一个数字(number)。
例如,“1E02”和“100.000”是等同于数字(数字值100),但将转换它们会改变他们的表示,所以他们被保留为字符串。
字符串值“100”被转换为数字100。
如果数据(data)属性是一个对象(以“{”开始)或数组(以’[‘开始),可以用jQuery.parseJSON 将其解析成字符串;
它必须遵循有效的JSON的语法,包括带双引号的属性名称。如果该值不能解析为一个JavaScript值,它将被保留为字符串。
如果不想将取出的属性值直接当作字符串的话,请使用attr()方法。
data-属性是在第一次使用这个数据属性后不再存取或改变(所有的数据值都在jQuery内部存储)。
调用 .data() 时如果不带参数,将会以 JavaScript 对象的形式获取所有数据。这个对象可以安全的存放在变量中,
因为一旦这个新对象被提取出来,之后对元素进行的 .data(obj)操作,将不会再影响这个对象。
另外,直接操作这个对象会比每次调用 .data() 来设置或获取值要快一些。
1 | 所谓的标准模式是指,浏览器按W3C标准解析执行代码; |
如果你的网页代码不含有任何声明,那么浏览器就会采用怪异模式解析,便是如果你的网页代码含有DTD声明,浏览器就会按你所声明的标准解析。1
2<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
上面的代码,浏览器会按HTML 4.01的标准进行解析。
1 | 标准模式中IE6不认识!important声明,IE7、IE8、Firefox、Chrome等浏览器认识; |
到底都有哪些声明呢?哪种声明更好呢?我们建议你使用XHTML 1.0最严格模式,从一开始我们就应该严格的要求自己,具体声明如下:1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
如果你接手的是一个遗留网页,最初并没有DTD声明,并且使用了很多在XHTML中已经废除的标签,那么建议你使用XHTML兼容模式,声明如下:1
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
tag:
缺失模块。
1、请确保node版本大于6.2
2、在博客根目录(注意不是yilia根目录)执行以下命令:
npm i hexo-generator-json-content --save
3、在根目录_config.yml里添加配置:
jsonContent: meta: false pages: false posts: title: true date: true path: true text: false raw: false content: false slug: false updated: false comments: false link: false permalink: false excerpt: false categories: false tags: true