任务4-初识HTML

HTML是一种标记语言，今天所做的主要任务就是了解HTML的一些基础。

1.网页乱码的问题是如何产生的？怎样解决？

网页乱码的主要原因是保存HTML时的编码格式和浏览器解析时的解码格式不一致。
eg：

保存HTML的编码方式

浏览器解码方式.png

保存时的编码方式.png

如图，如果在<meta>标签中写好utf-8的编码方式，浏览器就会按UTF-8去解码，而只有当保存HTML也是选择UTF-8时才可以正常显示不至于乱码。
PS：

下面这幅图是编码基本知识：

浏览器乱码问题.png

Unicode 和 UTF-8 的区别：

unicode的“知”码字.png

utf-8规则的“知”码字.png

区别就是编码规则不同，导致存储容量不足。unicode给每个字符一个编码，占用2个字节，而UTF-8对英文字母采用单个字节首位是0，和ASCII码相同，对其他例如汉字则采用如图的规则进行编码，第1个字节前n位是1，n+1位是0，其他字节前2位是10，其余各位补齐unicode码，高位用0补。

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

可以用以下方法来规定 CSS 中的颜色：

十六进制色
RGB颜色
RGBA颜色
HSL颜色
HSLA颜色
预定义颜色

十六进制颜色

p
{
background-color:#0000ff;
}

RGB颜色

p
{
background-color:rgb(255,0,0);
}

RGBA颜色

RGBA 颜色值是 RGB 颜色值的扩展，带有一个 alpha 通道 - 它规定了对象的不透明度。

p
{
background-color:rgba(255,0,0,0.5);
}

HSL颜色

H为Hue色调，0红，120绿，240蓝；
S为Saturation饱和度,65%等；
L为lightness亮度，75%等。

p
{
background-color:hsl(120,65%,75%);
}

HSLA颜色

同理，也是带有一个alph通道，调节不透明度。

p
{
color:hsla(240,50%,75%,0.6)
}

CSS 颜色名

HTML 和 CSS 颜色规范中定义了 147 中颜色名（17 种标准颜色加 130 种其他颜色）。
提示：17 种标准色是 aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, yellow。——引用自W3Cschool。

颜色	16进制法	RGB法	预定以名称法
红色	#ff0000	rgb(255,0,0)	red
绿色	#00ff00	rgb(0,255,0)	green
蓝色	#0000ff	rgb(0,0,255)	blue
白色	#ffffff	rgb(255,255,255)	white
黑色	#000000	rgb(0,0,0)	black
透明黑色	-	rgba(0,0,0,0.6)	-

16进制	颜色
#ccc	灰色
#eee	浅灰色
#333	深灰色

3. `<!doctype html>`的作用是什么？

声明文档的解析类型(document.compatMode)，避免浏览器的怪异模式。放在HMTL顶部，让浏览器按照W3C标准模式去渲染页面，而不是按本身怪异模式运行。

4. 严格模式和混杂模式指什么？

HTML中正确写入<!doctype html>，则浏览器按照W3C标准渲染页面，此为严格模式。
HTML中未写入文档类型说明，则浏览器按照本身的方式渲染页面，不同浏览器渲染效果也不同，此为怪诞模式。

5. `<meta>`有什么作用，常见的值有哪些？

浏览器支持：

浏览器

所有浏览器都支持<meta>标签.
<meta>标签提供有关页面元信息，位于<head>内，不包含内容，其属性定义了相关值/名称对。
在XHTML中更为严格，必须正确关闭，而HTML则没有结束标签。
元数据总是以名称/值的形式成对传递。

属性

必需的属性content：提供信息，与http-equiv和name属性有关。

属性	值	描述
content	some_text	定义与http-equiv和name有关的元信息

属性	值	描述
http-equiv	refresh xepires set-cookie content-type	把content属性值关联到html头部
name	description author keywords generator others	把content属性关联到名称
scheme	some_text	定义翻译content属性值格式

`name` 属性

类似这样的 meta标签可能对于进入搜索引擎的索引有帮助：

<meta name="keywords" content="HTML,,Python,SQL">

`http-equiv`属性

服务器将把名称/值对添加到发送给浏览器的内容头部。例如，添加：

<meta http-equiv="charset" content="GBK">
<meta http-equiv="expires" content="07 Jul 2016">

这样发送到浏览器的头部就应该包含：

charset:GBK
expires:07 Jul 2016

（PS：时间必须采用GWT格式。）

全局属性

eg(重定向等）：

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="description" content="这是任务四的name测试" />
    <meta name="author" content="赵力群" />
    <meta name="keywords" content="jirengu" />
    <meta http-equiv="refresh" "5,url=http://www.jirengu.com.cn" />
    <title>饥人谷_阿群</title>
  </head>
  <body>
    <h1>这是任务4</h1>
    <p>
      这是任务4！
      <a href="http://jscode.me/topic/33/">任务4界面</a>
    </p>
  </body>
</html>

6. `<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">`有什么作用?

这是<meta>标签对文档兼容模式的定义。
content中的属性表示以IE最高版本渲染页面，如果用户安装了Google chrome Frame，则用GCF渲染页面。

7. 常见的浏览器有哪些，什么内核?

主流浏览器一览

浏览器	内核
IE	Trident
Firefox	Gecko
Opera	Presto->Blink
Safari	Webkit
google	Webkit->Blink

本教程版权归饥人谷_阿群和饥人谷所有，转载须说明来源