基础知识一(HTML)

白驹过隙,时间流逝,年纪长了,阅历长了,唯独感到自己的专业知识没太大长进,"轮子"用的久了,基础知识却丢了七七八八,随手写写,加深记忆!

HTML5有哪些新特性?移除了哪些元素?

新特性
  1. 语义化更好内容元素。例如 header、footer、article、nav、section
    表单控件:calendar、date、time、email、url、search
  2. 功能标签。例如 绘画用的 canvas ,媒介播放用的 video 和 audio
  3. 本地离线存储 localStorage 持久化的本地存储,除非主动删除数据,否则数据永不过期
    sessionStorage 会话级的存储,用于本地存储一个会话中的数据,这些数据只有在同一个会话中的页面才能访问并且当会话结束后数据也随之销毁。
  4. 新的技术。 webworker、websockt、Geolocation
移除的元素
  1. 纯表现的元素。例如 basefont、big、center、font、s、u、tt、strike
  2. 对可用性产生负面影响的元素。例如 frame、frameset、noframes

cookies、session、sessionStorage 和 localStorage 的区别

  1. cookies、sessionStorage、localStorage 是在客户端。
    session 是在服务器端,服务器端的 session 机制,session 对象保存在服务器上。
    服务器和客户端之间仅需传递 session id 即可,服务器根据 session id 查找对应的 sessioin 。会话数据仅在一段时间内有效,这个时间就是 server 设置的 session 有效期。
    服务器 session 存储数据相对安全,一般用来存放用户信息,而客户端只适合存储一般数据。
  2. cookies、sessionStorage、localStorage 三者的区别
    1. cookies 数据始终在同源的http请求中携带(即使不需要),即 cookies 在浏览器和服务器之间来回传递。
      sessionStorage 和 localStorage 不会自动把数据发送给服务器,仅在本地保存。

    2. cookies 存储的数据不能超过 4k ,同时因为每次http请求都会携带 cookies ,所以 cookies 只适合保存很小的数据。(cookies 携带在 http请求头上。 而 sessionStorage 和 localStorage 的大小限制为 5M 。

    3. 数据有效期。cookies 在设置的有效期(服务器设置)内有效,不管窗口或者浏览器是否关闭。sessionStorage 仅在当前浏览器窗口关闭前有效(浏览器窗口只要没有关闭,即使刷新页面或者进入同源的另一个页面,数据仍然存在。窗口关闭,数据销毁。)。localStorage 始终有效,无论窗口或者浏览器是否关闭。持久化保存。

    4. Web storage 支持事件通知机制,可以将数据更新的通知发送给监听者。例如:

      1
      2
      3
      window.addEventListener("storage", function (e) {
      alert(e.newValue);
      });

      Web storage 带来的好处
      减少网络流量:一旦数据保存在本地后,就可以避免再向服务器请求数据,因此减少不必要的数据请求,减少数据在浏览器和服务器之间的来回传递。
      快速显示数据:数据保存在本地,从本地读取数据比通过网络从服务器获取数据快得多,提高了性能。
      临时存储数据:很多数据只需要在用户访问一组页面期间使用,关闭窗口后数据就可以销毁了,这种情况下使用 sessionStorage 就非常方便。

Meta 标签

什么是 meta 标签

meta 标签是 html 文档在 head 标签里定义的一个对文档进行描述的功能性标签。

meta 标签的作用
  1. 搜索引擎优化,也就是 SEO
  2. 定义页面使用的语言
  3. 自动刷新并指向新的页面
  4. 实现网页转换时的动态效果
  5. 控制页面缓存
  6. 网页定级评价
  7. 控制网页显示的窗口
meta 标签的组成

meta 标签共有两个属性,一个是 http-equiv 属性,另一个则是 name 属性。不同的属性有不同的参数值,这些不同的参数值就实现了不同的功能。

name 属性

name 属性主要用于描述网页,与之对应的属性值为 content,content 中的内容主要是便于搜索引擎爬虫查找信息和分类信息用的。

meta 标签的 name 属性语法格式是:

1
<meta name="参数" content="参数值">

其中 name 属性主要有以下几种参数:

  1. keywords (关键字)
    说明:keywords 用来告诉搜索引擎网页的关键字。

    1
    <meta name="keywords" content="sean,emoii">
  2. description (网站描述内容)
    说明:description 用来告诉搜索引擎网页的主要内容。

    1
    <meta name="description" content="thispageisaboutthehtml,javascript,python,java.">
  3. robots(机器人向导)
    说明:robots 用来告诉搜索机器人(爬虫)哪些页面需要索引,而哪些页面不需要。

    1
    <meta name="robots" content="none">

    content 的参数有:all、none、index、noindex、follow、nofollow。默认是 all。

    1. none:文件将不被检索,且页面上的链接不可以被查询。
    2. noindex:文件将不被检索,但页面上的链接可以被查询。
    3. nofollow:文件将被检索,但页面上的链接不可以被查询。
    4. all:文件将被检索,且页面上的链接可以被查询。
    5. index:文件将被检索。
    6. follow:页面上的链接可以被查询。
  4. author(作者)
    说明:标注网页的作者。

    1
    <meta name="author" content="sean">
  5. renderer(渲染)
    说明:告诉浏览器页面的渲染模式。

    1
    <meta name="renderer" content="webkit">
  6. viewport(视图模式)
    说明:虚拟窗口。

    1
    <meta name="viewport" content="width=device-width,initial-scale=1">
  7. generator(网页制作软件)
    说明:标识网页生成工具。

    1
    <meta name="Generator" content="ECSHOP v2.7.3">
  8. copyright(版权)
    说明:标注版权信息。

    1
    <meta name="copyright" content="sean">
  9. revisit-after(搜索引擎爬虫重访时间)
    说明:设定爬虫重访时间,减轻搜索引擎爬虫对服务器带来的压力。(如果网址不经常更新的话。。。)

    1
    <meta name="revisit-after" content="7 days">
http-equiv 属性

http-equiv 顾名思义,相当于http的文件头作用,它可以向浏览器传回一些有用的信息,以帮助正确和精确地显示网页内容,与之对应的属性值为 content,content 中的内容其实就是各个参数的变量值。

meta 标签的 http-equiv 属性语法格式是:

1
<meta http-equiv="参数" content="参数变量值">

其中 http-equiv 属性主要有以下几种参数:

  1. X-UA-Compatible(浏览模式)
    说明:告诉 IE 使用何种版本去渲染,chrome 则可以激活 Chrome Frame 。

    1
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  2. Expires(期限)
    说明:用于设定网页的到期时间。一旦网页过期,则必须到服务器重新传输。

    1
    <meta http-equiv="expires"content="Fri,22Jan201718:18:18GMT">

    注意:必须使 GMT 的时间格式。

  3. Pragma(cache模式)
    说明:禁止浏览器从本地计算机的缓存中访问页面内容。

    1
    <meta http-equiv="Pragma" content="no-cache">

    注意:这样设定,访问者将无法脱机浏览。

  4. Refresh(刷新)
    说明:自动刷新并指向新的页面。

    1
    <meta http-equiv="Refresh" content="2;URL=http://emoii.me">

    注意:其中的 2 是指停留 2 秒后自动刷新到 URL 网址。

  5. Set-Cookies(cookies设定)
    说明:如果网页过期,那么存储的 cookies 将被删除。

    1
    <meta http-equiv="Set-Cookie" content="cookievalue=xxx;expires=Friday,12-Jan-200118:18:18GMT;path=/">

    注意:必须使 GMT 的时间格式。

  6. Window-target(显示窗口设定)
    说明:强制页面在当前窗口以独立页面显示。

    1
    <meta http-equiv="Window-target" content="_blank">

    注意:防止别人在框架中调用自己的页面。

  7. Content-type(字符集设定)
    说明:设定页面使用的字符集。

    1
    <meta http-equiv="Content-type" content="text/html;charset=utf-8">
  8. Content-Language(语言设定)
    说明:设定页面使用的语言。

    1
    <meta http-equiv="Content-Language" content="zh-cn"/>
  9. Cache-Control(指定请求和响应遵循的缓存机制)
    说明:标识浏览器如何缓存某个响应以及缓存的时间。

    1
    <meta http-equiv="cache-control" content="no-cache">

    用法如下:

    1. no-cache:先发送请求,与服务器确认该资源是否被更改,如果未更改,则使用缓存。
    2. no-store:不允许缓存,每次都要到服务器下载完整的响应。
    3. public:缓存所有响应,但并非必须。因为 max-age 也可以做到相同效果。
    4. private:只为单个用户缓存,因此不允许任何中继进行缓存。
    5. max-age:表示当前请求开始,该响应在多久内能被缓存和重用,而不去服务器重新请求。
0%