任务4-初识HTML
2016-07-07 本文已影响70人
进击的阿群
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格式。）
全局属性
<meta> 标签支持 HTML 中的全局属性。
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 |
| Webkit->Blink |
本教程版权归饥人谷_阿群和饥人谷所有，转载须说明来源
