任务四~HTML1

2016-07-13 本文已影响85人 dengpan

一、网页乱码的问题是如何产生的？怎样解决?

知识拓展~几种编码方式的认识

ASCII
American Standard Code for Information Interchange，美国信息交换标准代码）是基于拉丁字母的一套电脑编码系统。它主要用于显示现代英语，而其扩展版本EASCII则可以部分支持其他西欧语言，并等同于国际标准ISO/IEC 646。其由128个字符组成，包括大小写字母、数字0-9、标点符号、非打印字符（换行符、制表符等4个）以及控制字符（退格、响铃等）组成，每个字符占7位（1字节是8位）。

ISOLatin-1
ISO 8859-1，正式编号为ISO/IEC 8859-1:1998，它是因为对于一些特殊的拉丁字符，比如法文德文里某些字符，ASCII字符集不包括的情况下。于是欧洲人发明了一种8位字符集是ISO 8859-1Latin 1，也简称为ISOLatin-1。它对ASCII做了个扩充，对于0-127之间的字符还使用ASCII里的字符不变，把位于128-255之间的字符表示拉丁字母表中特殊语言字符。

Unicode
Unicode是计算机科学领域里的一项业界标准。它对世界上大部分的文字系统进行了整理、编码，使得电脑可以用更为简单的方式来呈现和处理文字。Unicode的实现方式不同于编码方式。一个字符的Unicode编码是确定的。但是在实际传输过程中，由于不同系统平台的设计不一定一致，以及出于节省空间的目的，对Unicode编码的实现方式有所不同。Unicode的实现方式称为Unicode转换格式（Unicode Transformation Format，简称为UTF）

UTF-8
UTF-8（8-bit Unicode Transformation Format）是一种针对Unicode的可变长度字符编码)，也是一种前缀码。它可以用来表示Unicode标准中的任何字符，且其编码中的第一个字节仍与ASCII兼容，这使得原来处理ASCII字符的软件无须或只须做少部分修改，即可继续使用。因此，它逐渐成为电子邮件、网页及其他存储或发送文字的应用中，优先采用的编码。
UTF-8使用一至六个字节为每个字符编码：
1.128个US-ASCII字符只需一个字节编码（Unicode范围由U+0000至U+007F）。
2.带有附加符号的拉丁文、希腊文、西里尔字母、亚美尼亚语、希伯来文、阿拉伯文、叙利亚文及它拿字母则需要两个字节编码（Unicode范围由U+0080至U+07FF）。
3.其他基本多文种平面（BMP）中的字符（这包含了大部分常用字，如大部分的汉字）使用三个字节编码（Unicode范围由U+0800至U+FFFF）。
4.其他极少使用的Unicode 辅助平面的字符使用四至六字节编码（Unicode范围由U+10000至U+1FFFFF使用四字节，Unicode范围由U+200000至U+3FFFFFF使用五字节，Unicode范围由U+4000000至U+7FFFFFFF使用六字节）。

GBK
GBK是由中国制定一套自己的规则，于是用2个字节来表示一个汉字，总共可以覆盖2万多个文字。对于英文，保留和你UTF-8同样的方式使用一个字节来表示。

网页乱码的问题是如何产生的？

乱码的根本原因保存的编码格式和浏览器解析时的解码格式不匹配导致的
乱码一般是英文以外的字符才会出现。

网页乱码的问题怎样解决？

保证编写代码的保存方式和浏览器解析代码格式保持一致，要使浏览器知道是的代码文件使用了什么样的编码格式。比如，如果你的文件是保存为utf-8格式，那么一定要在html 的<head>里添加<meta charset="utf-8">，这句话的意思是告诉浏览器在打开这个页面的时候不要去猜了，直接用utf-8去解码。同理，如果你的文件保存为gbk格式，一定在文件里添加<meta charset="gbk">。

二、颜色有几种写法？红色、绿色、蓝色、白色、黑色如何表示？透明黑色如何表示？#ccc的颜色， #eee的颜色？ #333的颜色？

颜色有几种写法？
写法如下：

命名颜色
- 用法：直接使用颜色名；eg：p{ color:red;}
RGB~~通过组合不同的红色、绿色、蓝色分量来创造颜色
- 用法1：整数型RGB,整数范围为0~255，eg: p{ color:rgb(255,255,255);}
- 用法2：百分数型RGB,百分数范围为0~100%，eg: p{ color:rgb(100%,100%,100%);}
- 用法3：十六进制型RGB,eg: p{ color:#FFFFFF;}
RGBA~~在RGB的基础上增加了alpha通道，用来设置颜色的透明度
- 用法：p{ background:rgba(r,g,b,a);},其中r，g，b三个参数正整数的取值范围是0_{255；百分数值的取值范围是0}100%；a参数的取值范围是0~1,1表示元素完全不透明，0表示元素完全透明不可见
- HSL~~通过对色调（H），饱和度（S），亮度（L）三个颜色通道的变化以及它们相互之间的叠加得到各式各样的颜色
- 用法： p{ background:hsl{h,s,l};},其中，h取整数值，可以为任意整数，其中0（360或-360）表示红色，60表示黄色，120表示绿色，180表示青色，240表示蓝色，300表示洋红，当值大于360时，实际值等于该值除360之后的余数；s取百分数，范围为0_{100%，其中0表示灰度（没有该颜色），100%表示饱和度最高（该颜色最鲜艳）；**l**取值范围为0}100%，其中0最暗（黑色），100最亮（白色）
HSLA~~HSLA是HSL的拓展模式，在HSL的基础上增加一个透明通道alpha来设置不透明参数
- 用法：p{ background:hsla{h,s,l,a};}，其中h，s，l参数同HSL一样，a参数取值0~1，值越大，透明度越低

红色、绿色、蓝色、白色、黑色如何表示？

颜色种类	直接命名法表示	RGB整数型表示	RGB百分数表示
红色	red	rgb(255,0,0)	rgb(100%,0%,0%)
绿色	green	rgb(0,128,0)	rgb(0%,50%,0%)
蓝色	blue	rgb(0,0,255)	rgb(0%,0%,100%)
白色	white	rgb(255,255,255)	rgb(100%,100%,100%)
黑色	black	rgb(0,0,0)	rgb(0%,0%,0%)

以下为续表1

颜色种类	RGB十六进制表示	RGBA整数型表示	RGBA百分数型表示
红色	#FF0000	rgb(255,0,0,1)	rgb(100%,0%,0%,1)
绿色	#008000	rgb(0,128,0,1)	rgb(0%,50%,0%,1)
蓝色	#0000FF	rgb(0,0,255,1)	rgb(0%,0%,100%,1)
白色	#FFFFFF	rgb(255,255,255,1)	rgb(100%,100%,100%,1)
黑色	#000000	rgb(0,0,0,1)	rgb(0%,0%,0%,1)

以下为续表2

颜色种类	HSL表示	HSLA表示
红色	hsl(0,100%,50%)	hsl(0,100%,50%,1)
绿色	hsl(120,100%,25%)	hsl(120,100%,25%,1)
蓝色	hsl(240,100%,50%）	hsl(240,100%,50%,1）
白色	hsl(0,0%,100%)	hsl(0,0%,100%,1)
黑色	hsl(0,0%,0%)	hsl(0,0%,0%,1)

3 . 透明黑色如何表示？

颜色种类	RGBA表示	HSLA表示
透明黑色	rgb(0%,0%,0%,0.6)	hsl(0,0%,0%,0.6)

以上透明黑色为40%的透明

4 . #ccc的颜色， #eee的颜色？ #333的颜色？

#ccc表示浅灰色
#eee表示灰色
#333表示深灰色

三、<!doctype html> 的作用是什么？

doctype告诉浏览器你的文档类型是什么，通过使用doctype可以使浏览器可以更准确地解释和显示页面；随着HTML5的到来，HTML变成了一个“活标准，它会随着技术的发展形成相应的文档，不再会有版本号,但是会有向后兼容性；<!doctype html>告诉浏览器文档类型是HTML5，以HTML5的规则来解释文档内容！！！

四、严格模式和混杂模式指什么？

严格模式是指浏览器在打开文档时，按照严格的规范来呈现页面。
混杂模式是指浏览器在打开文档时，以一种比较宽松的向后兼容的方式呈现页面

五、meta 有什么作用，常见的值有哪些?

1 . <meta>元素可提供有关页面的元信息（meta-information），主要用于描述网页，比如针对搜索引擎和更新频度的描述和关键词。它可用于浏览器（如何显示内容或重新加载页面），搜索引擎（关键词），或其他 web 服务。 —— W3School
2 . 常见的属性、值及常见用法：

必要属性

属性	值	描述
content	some text)	定义与http-equiv或name属性相关的元信息

可选属性

属性	值	描述
http-equiv	content-type / expire / refresh / set-cookie	把 content 属性关联到 HTTP 头部
name	author / description / keywords / generator / revised / others	把 content 属性关联到一个名称
content	some text	定义用于翻译 content 属性值的格式

页面关键词，每个网页应具有描述该网页内容的一组唯一的关键字。
<meta name="keywords" content="your tags" />
页面描述，每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签。
<meta name="description" content="150 words" />
搜索引擎索引方式，robotterms是一组使用逗号(,)分割的值，通常有如下几种取值：none，noindex，nofollow，all，index和follow。确保正确使用nofollow和noindex属性值。

 - **页面重定向和刷新**：content内的数字代表时间（秒），既多少时间后刷新。如果加url,则会重定向到指定网页（搜索引擎能够自动检测，也很容易被引擎视作误导而受到惩罚）。
```<meta http-equiv="refresh" content="0;url=" />```
 - **其他**

 - **viewport**：能优化移动浏览器的显示。如果不是响应式网站，不要使用initial-scale或者禁用缩放。

  1. width：宽度（数值 / device-width）（范围从200 到10,000，默认为980 像素）
  2. height：高度（数值 / device-height）（范围从223 到10,000）
  3. initial-scale：初始的缩放比例 （范围从>0 到10）
  4. minimum-scale：允许用户缩放到的最小比例
  5. maximum-scale：允许用户缩放到的最大比例
  6. user-scalable：用户是否可以手动缩 (no,yes) 

**以上内容主要来自：**
1. [W3C](http://www.w3school.com.cn/tags/tag_meta.asp)
2.  [segmentfault](https://segmentfault.com/a/1190000002407912)

## 六、<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1>"有什么作用？
 - **X-UA-Compatible**是针对 IE8 版本的一个特殊文件头标记，用于为 IE8 指定不同的页面渲染模式，对于ie8之外的浏览器是不识别的
 - **IE=edge**会强制浏览器按照最新的标准去渲染
 - **chrome=1**将允许站点在使用了谷歌浏览器内嵌框架（Chrome Frame）的客户端渲染，对于没有使用的，则没有任何影响。
 - [知识拓展](http://www.ido321.com/940.html)

## 七、 常见的浏览器有哪些，什么内核？

| 浏览器 | 内核 |
| :--------: | :--------: |
|Firefox | Gecko | 
|Safari、chrome | Webkit | 
|IE | Trident | 
|Opera | Gecko（曾经）、WebKit（现在） | 
|QQ浏览器、360浏览器 | Webkit+Trident |

**版权声明：本教程版权归邓攀和饥人谷所有，转载须说明来源！！！！**

任务四~HTML1

一、网页乱码的问题是如何产生的？怎样解决?

二、颜色有几种写法？红色、绿色、蓝色、白色、黑色如何表示？透明黑色如何表示？#ccc的颜色， #eee的颜色？ #333的颜色？

三、<!doctype html> 的作用是什么？

四、严格模式和混杂模式指什么？

五、meta 有什么作用，常见的值有哪些?

猜你喜欢

热点阅读

任务四~HTML1

一、网页乱码的问题是如何产生的？怎样解决?

二、颜色有几种写法？红色、 绿色、蓝色、白色、黑色如何表示？ 透明黑色如何表示？#ccc的颜色， #eee的颜色？ #333的颜色？

三、<!doctype html> 的作用是什么？

四、严格模式和混杂模式指什么？

五、meta 有什么作用，常见的值有哪些?

猜你喜欢

热点阅读

二、颜色有几种写法？红色、绿色、蓝色、白色、黑色如何表示？透明黑色如何表示？#ccc的颜色， #eee的颜色？ #333的颜色？