html5中的class HTML5中的新标签

转载

mob64ca1409970a 2023-11-24 18:50:03

文章标签 html5中的class 前端 html5 JSON 语义化 文章分类 HTML5 移动开发

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

前言

HTML5主要新增了哪些特性

1.新的语义化标签

如何理解HTML的语义化？

2.新增的选择器

3.新的JSON方法

4.新增的本地存储方式

cookie,sessionStorage,localStorage的区别

总结

前言

HTML5是HTML更新的第五代版本，为原始的HTML增添了很多功能，在实际的开发中改善了用户的体验。

HTML5主要新增了哪些特性

1.新的语义化标签

HTML5中新增了一些语义化标签。例如：

header(头部标签，定义section或page的页眉),

nav（导航标签），

article(内容标签)，

section(定义文档某个区域的标签)，

aside(侧边栏，定义页面内容之外的标签)，

footer(尾部标签，定义section或page的页脚)

这些新增的语义化标签相比较我们之前用<div>来布局对搜索引擎更加友好。

新增的标签：

html5中的class HTML5中的新标签_html5中的class

所以！！在这里有一道常见的前端面试题！

如何理解HTML的语义化？

html中自带了一些标签，这些标签有特定含义，比如H1-H6代表标题、p代表段落、img代表图片、html5里也推出了一些新的标签：header//头部、footer//尾部、nav//导航，这些标签都有特定的含义，使用的时候应该尽量按照它的语义来使用

语义化的好处：

1.别人阅读你的代码的时候能够根据标签才出来你的用意，有利于程序员阅读，便于团队开发和维护

2.浏览器读取方便

3.有利于搜索引擎优化（SEO：Search Engine Optimization）（比如说会根据标签来搜索，可能重点会搜索h1）

4.有一些标签默认会有一些样式，如果浏览器禁止了CSS样式还可以达到突出样式的效果，比如h1，如盲人阅读器等可以增加突出样式的效果

2.新增的选择器

在HTML5中主要新增了两个选择器(我们常用的)：querySelector和querySelectorAll.

queryselector : 该方法返回满足条件的单个元素。按照深度优先和先序遍历的原则使用参数提供的css选择器在dom进行查找，返回第一个满足条件的元素。

举例：

example = document.queryselector('p#yy');//返回id为yy的首个p标签
example = document.queryselector('div#yy');//返回id为yy的首个div标签
example = document.queryselector('.a,.b');//返回带有类名为a或者b样式的首个元素

queryselectorall:该方法返回所有满足条件的元素，结果是个nodelist集合。

example = document.queryselectorall('p.yy');//返回所有带yy类样式的p标签

但需要注意的是返回的nodelist集合中的元素是非实时的

什么是实时和非实时呢？

简单来说当我用document.getElementsByClassName('yy')获取所有类名为yy的元素时，我在添加一个新的类名为yy的元素，会进行实时的更新，得到新的所有的该类名的元素。这就是实时，反之则是非实时。而用querySelectorAll就是非实时的。

3.新的JSON方法

HTML5主要新增了两个JSON的方法：JSON.parse(),JSON.stringify().

JSON.parse():将字符串转化为对象。

要注意：在定义字符串时需要是JSON格式，不能是普通的字符串。

var str='{"name":"yy","age":"3"}';
  var obj=JSON.parse(str);
  console.log(obj);

输出：

html5中的class HTML5中的新标签_前端_02

JSON.stringify()：将对象转化为字符串。

var obj={
    name:'yy',
    age:'3',
   }
   var temp=JSON.stringify(obj);
   console.log(temp);

输出：

html5中的class HTML5中的新标签_语义化_03

应用：将浅拷贝转化为深拷贝。先利用JSON.stringify()将引用数据类型转换成基本数据类型，复制，再利用JSON.parse()把基本数据类型转化为引用数据类型，从而实现了深拷贝。

（这里先简单提一下深拷贝和浅拷贝的概念，在后面的文章中会详细解释并说几种实现深拷贝的方法。）

浅拷贝：复制的是对象的引用地址，没有开辟新的栈，复制的结果是两个对象指向同一个地址，所以修改其中一个对象的属性，另一个对象的属性也跟着改变了。（引用数据类型的复制就是浅拷贝）

深拷贝：会开辟新的栈，两个对象对应两个不同的地址，修改对象A的属性，并不会影响到对象B（基本数据类型的复制就是深拷贝）

4.新增的本地存储方式

sessionStorage和localStorage

用法：这两个的用法是相同的,注意参数须为字符串的格式，如果是对象用JSON的方法进行转换

存储的时候---setItem：sessionStorage.setItem("key","value");//以“key”为名称存储一个值“value”

获取---getItem：sessionStorage.getItem("key");//获取名称为“key”的值

删除---removeItem:sessionStorage.removeItem("key")//删除变量名为key的存储变量

区别：也是一道经典面试题

cookie,sessionStorage,localStorage的区别

共同点:

都是保存在浏览器端，且同源的。

不同点：

1.cookie数据始终在同源的http请求中携带(即使不需要)，即cookie在浏览器和服务器间来回传递。而sessionStoraqe和localStorage不会自动把数据发给服务器，仅在本地保存。
cookie数据还有路径(path)的概念，可以限制cookie只属于某个路径下。
2.存储大小限制也不同，cookie数据不能超过4k，同时因为每次http请求都会携带cookie，所以cookie只适合保存很小的数据。如会话标识。sessionStorage和localStoraqe虽然也有存储大小的限制，但比cookie大得多，可以达到5M或更大。
3.生命周期不同，sessionstorage:关闭浏览器就删除，localstorage:一直有，除非手动删除，Cookie:可以设置过期时间
sessionStorage:仅在当前浏览器窗口关闭前有效，自然也就不可能持久保持:localStorage:始终有效，窗口或浏览器关闭也一直保存，因此用作持久数据:cookie只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。
4.作用域不同，
sessionStorage不在不同的浏览器窗口中共享，即使是同一个页面;localStorage在所有同源窗口中都是共享的;