HTML 基础
一、utf-8和GBK的区别
字符均使用双字节来表示,只不过为区分中文,将其最高位都定成1。
至于UTF-8编码则是用以解决国际上字符的一种多字节编码,它对英文使用8位(即一个字节),中文使用24位(三个字节)来编码。对于英文字符较多的论坛则用UTF-8节省空间。
GBK包含全部中文字符;UTF-8则包含全世界所有国家需要用到的字符。
GBK是在国家标准GB2312基础上扩容后兼容GB2312的标准(好像还不是国家标准)
UTF-8编码的文字可以在各国各种支持UTF8字符集的浏览器上显示。
比如,如果是UTF8编码,则在外国人的英文IE上也能显示中文,而无需他们下载IE的中文语言支持包。 所以,对于英文比较多的论坛 ,使用GBK则每个字符占用2个字节,而使用UTF-8英文却只占一个字节。
UTF8是国际编码,它的通用性比较好,外国人也可以浏览论坛,GBK是国家编码,通用性比UTF8差,不过UTF8占用的数据库比GBK大。
二、乱码产生的原因
乱码产生的根本原因是保存的编码格式和浏览器解析时的解码格式不匹配导致的。
解决方法:
首页,在文件保存的时候自己要清楚是用哪种编码方式保存的(sublime默认保存方式是utf-8,如果安装了插件也可另存为gbk,其它IDE可以做设置保存格式)。如果文件是保存为utf-8格式,那么一定要在html 的 <head>里添加<meta charset="utf-8">,这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了,直接用utf-8去解码。 同理,如果你的文件保存为gbk格式,一定在文件里添加<meta charset="gbk">。
三、颜色的几种写法
- 颜色名(例如:red,green,blue)
- 十六进制颜色值(例如:#ff0000,#00ff00,#0000ff,六位颜色值按位数分为三部分,分别对应R,G,B)
- RGB值(例如:rgb(255,0,0),rgb(0,255,0),rgb(0,0,255))
红色、 绿色、蓝色、白色、黑色如何表示? 透明黑色如何表示?#ccc的颜色, #eee的颜色? #333的颜色?
- 白色:White,#ffffff,rgb(255,255,255)
- 黑色:black,#000000,rgb(0,0,0)
还有一种RGBA值,RGBA是代表Red(红色) Green(绿色) Blue(蓝色)和 Alpha的色彩空间,即在RGB值后多加一位来表示透明度,例如rgba(255,0,0,0.5)为半透明红色。A取值范围是0~1,,0为完全透明,1为完全不透明。
- 透明黑色:rgba(0,0,0,0.5)
如果十六进制颜色值中分别对应R、G、B值的两位都相同,则可以缩写。
- “#ccc”:为#cccccc的缩写
- “#eee”:为#eeeeee的缩写
- “#333”:为#333333的缩写
四、<!DOCTYPE html>的作用是
向浏览器说明是HTML5的文档,在html文件中必须有。
五、严格模式和混杂模式
DOCTYPE可以声明三种DTD(文档类型定义(Document Type Definition)),分别表示严格版本、过渡版本以及基于框架的 HTML 文档。
当浏览器厂商开始创建与标准兼容的浏览器时,他们希望确保向后兼容性。为了实现这一点,他们创建了两种呈现模式:严格模式和混杂模式
- 在严格模式中,浏览器以其支持的最高标准呈现页面;
- 在混杂模式中,页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
浏览器根据DOCTYPE是否存在以及使用的哪种DTD来选择要使用的呈现方法。
- 如果XHTML、HTML 4.01文档包含形式完整的DOCTYPE,那么它一般以标准模式呈现。
- 包含过渡DTD和URI的DOCTYPE也导致页面以标准模式呈现,但是有过渡DTD而没有URI会导致页面以混杂模式呈现。
- DOCTYPE不存在或形式不正确会导致HTML和XHTML文档以混杂模式呈现。
- HTML5没有DTD,也就没有严格模式与宽松模式的区别,html5有相对宽松的语法,实现时,已经尽可能大的实现了向后兼容。
六、meta的作用以及常见的值
META标签用来描述一个HTML网页文档的属性,例如作者、日期和时间、网页描述、关键词、页面刷新等。
META标签是HTML标记HEAD区的一个关键标签,它位于HTML文档的<head>和<title>之间(有些也不是在<head>和<title>之间)。它提供的信息虽然用户不可见,但却是文档的最基本的元信息。<meta>除了提供文档字符集、使用语言、作者等基本信息外,还涉及对关键词和网页等级的设定。
META标签可分为两大部分:HTTP-EQUIV变量(HTTP-EQUIV用于向浏览器提供一些说明信息,从而可以根据这些说明做出反应。HTTP-EQUIV并不仅仅只有说明网页的字符编码一个作用,常用的HTTP-EQUIV类型还包括:网页到期时间、默认的脚本语言、默认的风格页语言、网页自动刷新时间等)和NAME变量(description和keywords等)。
实例:
- <meta charset="utf-8">
- <meta http-equiv="Content-Type" content="text/html>
- <meta name="description" content="网页描述">
- <meta name="keywords" content="关键词">
七、实例分析
<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1"> 的作用:告诉浏览器以最高级模式解析渲染此网页。即使用IE的最新版本edge,使用chrome内核。
八、常见的浏览器以及内核
- Internet Explorer浏览器,简称IE浏览器,使用Trident内核,又称IE内核
- Mozilla Firefox浏览器,使用Gecko内核
- Safari、Chrome浏览器,使用Webkit内核
- Opera浏览器,使用Presto内核
本教程版权归饥人谷和作者所有,转载须说明来源。