HTML&CSS基础-meta标签

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

一.常见字符集

1>ASCII

　　我们知道计算机是由外国人发明的，他们当时也没有考虑到全球都用到计算机，因此在设计编码的时候压根就没有考虑中文，日文，泰文等等，而是仅仅将英文大小写和标点符号等一些特殊字符考虑进去了，这种编码格式被称为ASCII编码，每个字母或特殊字符都会用8个“0”和“1”的二进制组合进行标识，聪明的小伙伴估计口算都能算出来2的八次方是多少了，没错是256个，也就是说用8个连续的“0”或者“1“是没有办法表示所有国家的语言的。因为它最大上限就是256个字符存储。比如我们要保存一个大写的字母”A“就需要一个字节，用二进制表示则为：“0100 0001”

2>.gb2312和gbk

　　这种编码格式就是为了解决ASCII无法存储汉字的情况而诞生的，也就是说gb2312可以存储我们的汉字，而gbk只是对gb2312的一个补充，它主要补充了中国的繁体字。这两种编码格式都可以存储ASCII的所有字符且可以存储所有的中国字符，也就是说你开发了一个中国人的游戏，如果你将这游戏放在日本，泰国等国家的电脑上安装的话可能无法运行，因为他们的电脑安装的操作系统也是他们的母语哟。gb2312和gbk编码在存储汉字上要比utf8要好的多，因为utf8在存储一个汉字的时候需要3个字节（即24位）进行存储，而gbk只需要2个字节就可以搞定，占用空间较少。

3>.万国码

　　但是随着计算机的快速发展，其他国家也有需求存入相应国家的文字（如中国出现了gbk编码，日本出现了Shift_JIS编码，韩国出现了Euc-kr编码等等。），因此又出现了一种能够存储各个国家的编码，我们称之为“万国码”（即Unicode），支持大多数个国家的语言文字。它有一个下限要求，就是美国字符都必须用最少16位（两个字节）来进行存储，也就是说要用连续的16个”0“和”1“的二进制数字来表示一个字符，没错，这种编码格式能够保存所有的ASCII的字符，只不过之前用一个字节存取的ASCII编码，现在要用两个字节进行存取。比如存取一个大写的“A”，用二进制表示则为：”000000000100 0001“，很明显，浪费了空间。本来用8位就可以存储的现在却用了16位来进行存储。而存储一个普通的中国汉字只需要用3个字节来存取，也就是24位来进行存储，即连续的24个“0”或者“1”来进行存储。甚至如果出现更复杂的文字可能需要用4到5个字节来进行存储。

4>.UTF8

　　我们刚刚也提到万国码的确是不错的，因为它能存几乎所有国家的语言和文字，但是缺陷就是对每个字符的存储空间最小必须是2个字节，这在存储一些简单的字符很明显就是浪费空间呢，于是又兴起了另外一种编码UTF-8，我们称之为可变长字符编码。它实际上是对万国码的一种压缩，能够用最少的位数表示一个字符（每个字符表示最少是8位，即一个字节）。换句话说，一个英文字符就用一个字节来表示（按照之前ASCII的方式来存取），而存储汉字还是按照万国码的方式进行存储，即3个字节表示一个汉字。

5>.ANSI
　　自动以系统的默认编码来保存文件，比如window10保存一个文件默认编码就是使用的是GB2312,而Linux保存文件默认使用的是UTF-8。

6>.推荐使用的编码格式

　　我们知道编码格式有很多种，虽然gbk存储汉字要比utf8要节省空间，但是我们还是推荐使用utf8编码格式，原因有三：

　　　　第一，gbk并没有包含其它国家的文字；

　　　　第二，很多开源软件使用的都是外国人开发的，他们大多数都是使用utf8编码格式；

　　　　第三，Python3.x解释器默认使用utf-8方式进行编码和解码（当然你也可以指定编码格式）；

二.html源代码

<!DOCTYPE html>

<html>

    <head>

        <!--

            需要来告诉浏览器，网页所采用的编码字符集

            meta标签用来设置网页的一些元数据，比如网页的字符集，关键字，简介等

            meta时一个自结束标签，编写一个自结束标签时，可以在开始标签中添加一个"/"

            charset:

                指定网页文件的字符编码格式。

        -->

        <meta charset="utf-8"/>

        <!--

            使用meta标签还可以设置网页的关键字

        -->

        <meta name="keywords" content="运维 开发 devops 大数据"/>

        <!--

            还可以用来指定网页的描述

            搜索引擎在检索页面时，会同时检索页面中的关键词和描述，但是这两个值不会影响在搜索引擎中的排名。

        -->

        <meta name="description" content="Python自动化运维平台"/>

        <!--

            使用meta可以用来做请求的重定向,如打开网页5秒后，自动跳转到指定URL

        -->

        <meta http-equiv="refresh" content="5;https://www.cnblogs.com/yinzhengjie/"/>

        <title>尹正杰的网页</title>

    <head>

    <body>

        <h1>我的博客地址:<font color="red" size="7">https://www.cnblogs.com/yinzhengjie/</font></H1>

    </body>

</html>

三.浏览器打开以上代码渲染结果

1>.如下图所示，浏览器会在该页面停留5秒

2>.5秒后，页面发生跳转了

HTML&CSS基础-meta标签的更多相关文章

  1. HTML&CSS基础-html标签的实体

    HTML&CSS基础-html标签的实体 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.HTML源代码 <!DOCTYPE html> <html&g ...

  2. h5标签基础 meta标签

    <meta>标签位于<head>标签里面,具体作用有如下: 1.设置网页编码 eg: <meta charset="utf-8"/>  ,//u ...

  3. HTML+CSS基础学习标签代码

    HTML基础 一.HTML页面结构 1.HTML定义 (HTML)为超文本标记语言,是写给浏览器的语言, 目前网络上应用最广泛的语言,目前已经更新到HTML5,HTML添加了一些写的语义化标签,放弃了 ...

  4. HTML+css基础 表格标签table Table标签属性 td标签属性

    表格标签table:   他是由行与列构成,最小单位是单元格. 行标签  <tr></tr> 单元格标签<td></td> Table标签属性: Bor ...

  5. HTML+css基础 img 标签的属性

    img: src=”” src是标签的属性 等号右边是属性值.就是图片的路径. 路径 1. 绝对路径:按照一个路径能找到,具体到某一个盘符下,某一个文件夹内. 2. 相对路径:以当前页面为参考物,去查 ...

  6. Meta标签 h5

    一  PC端meta标签 1 页面关键词 <meta name="keywords" content="your tags"> 2 页面描述 < ...

  7. HTML+css基础 p段落标签 a 超链接标签 Src和href有什么区别和关联？ target属性 Meta标签

    p段落标签: <p></p> 1.他是唯一一个可以不写结束标签的双标签. a 超链接标签: 从一个页面链接到另一个页面.靠的是href属性.  Src和href有什么区别和关联 ...

  8. HTML常用标签与CSS基础知识

    一.HTML页面结构 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> ...

  9. HTML&CSS基础-html的图片标签

    HTML&CSS基础-html的图片标签 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任. 一.如下图所示,准备一张图片,存放路径和html文件在同一目录 二.HTML源代码 ...

随机推荐

  1. Flutter入门（一）

    Flutter的sdk地址https://flutter.dev/docs/development/tools/sdk/releases 如果网络不能翻墙,只需要在环境变量里增加如下 FLUTTER_ ...

  2. EasyNVR摄像机网页无插件直播方案H5前端构建之：区分页面是自跳转页面还是分享页面

    背景分析 EasyNVR整套方案的架构中,涉及到前端设备(摄像机IPC.硬盘录像机NVR.编码器等).流媒体服务端(EasyNVR).客户端终端设备(PC.浏览器.Android.iOS.微信). 在 ...

  3. 【转】Notepad++如何设置行高

    Notepad++行高没有提供正式的设置方法,但可以通过一个 hack 来调整: 在[设置]「Style Configurator」对话框(中文是「语言格式设置」)里选择语言的地方选第一项「Globa ...

  4. express脚手架重建node项目

    安装express 和express-generator cnpm install express express-generator -g express demo1 创建demo1项目, 进入项目 ...

  5. 自动问答最新研究成果展示（SQuAD）

    地址:https://rajpurkar.github.io/SQuAD-explorer/ Stanford Question Answering Dataset (SQuAD) is a read ...

  6. [转帖]关于4A（统一安全管理平台）系统的理解

    雪山上的蒲公英 https://www.cnblogs.com/zjfjava/p/10674577.html 关于4A(统一安全管理平台)系统的理解   1. 4A系统的需求分析 近年来企业用户的业 ...

  7. Word页眉实现首页不同、奇偶页不同 、更改页眉横线、页眉文字对齐 -- 视频教程(8)

    1. 目标 目标1:实现页眉"首页不同,奇偶页不同" 目标2:更改页眉横线 目标3:页眉文字有三部分:第一部分左对齐,第二部分居中,第三部分右对齐 2. 教程 未完 ...... ...

  8. C++ STL学习总结

    1.vector //最好给它一个初始化大小 #include <iostream> #include <vector> using namespace std; int ma ...

  9. Python之虚拟环境virtualenv、pipreqs生成项目依赖第三方包

    virtualenv简介 含义: virtual:虚拟,env:environment环境的简写,所以virtualenv就是虚拟环境,顾名思义,就是虚拟出来的一个新环境,比如我们使用的虚拟机.doc ...

  10. linux redis 安装和密码设置

    1.下载redis wget http://download.redis.io/releases/redis-4.0.8.tar.gz 2.解压 tar xzvf redis-4.0.8.tar.gz ...