HTML基础 关于代码最初的理解
2017-06-29 本文已影响79人
疯小儿
第一节 浏览器知识
什么是浏览器
- 浏览器是网页运行的平台，常用的浏览器有IE、360、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。
什么是内核
- 浏览器最重要或者说核心的部分是“Rendering Engine”，可大概译为“渲染引擎”，不过我们一般习惯将之称为“浏览器内核”。负责对网页语法的解释（如标准通用标记语言下的一个应用HTML、JavaScript）并渲染（显示）网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染（显示）效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
| chrome | firefox | safari | IE | opera | |
|---|---|---|---|---|---|
| 排版引擎 | blink | Gecko | webkit | Trident | blink |
| Javascript引擎 | V8 | Spidermonkey | Nitro | Chakra | carakan |
参考:http://www.jianshu.com/p/74b6117f1022
网页的定义
- 网页主要由文字、图像和超链接等元素构成。当然，除了这些元素，网页中还可以包含音频、视频以及Flash等。
网页的形成：特殊的符号和文本经过浏览器的渲染生成图文并茂的页面。
网页的组成：
HTML：页面结构
CSS：页面样式表现
JavaScript：交互行为
网页乱码的产生及解决途径
网页乱码的产生
- 世界上存在着多种编码方式，同一个二进制数字可以被解释成不同的符号。因此，当浏览器解析时的解码方式和你文档保存时所用的编码方式不一致，你打开的文档就会是乱码。
解决乱码的途径
- 当你在编写文档时，应该html的head 里用mata标签注明你使用的是什么编码方式。这样浏览器就会以你的编码方式解码。
第二节 html基础
HTML简介
- HTML（英文Hyper Text Markup Language的缩写）中文译为“超文本标记语言”，主要是通过HTML标记对网页中的文本、图片、声音等内容进行描述。
HTML之所以称为超文本标记语言，不仅是因为他通过标记描述网页内容，同时也由于文本中包含了所谓的“超级链接”点。通过超链接将网站与网页以及各种网页元素链接起来，构成了丰富多彩的Web页面。
HTML的结构
HTML的结构包括：
<html> 表示html文档
<head></head> html的头部部分
<body>
内容
</body> html的身体部分
</html>
- 特点：成对出现，有开有闭合。
- 语法：<标签名> 标签内容</标签名>
第一：标签成对出现。
第二：结束标签内部用/开头。
第三：标签可以嵌套。
第四：标签名之后如果有属性的话，加空格然后是属性名=""。
第五：如果有多个属性，属性间用一个或多个空格隔开。
HTML的头部标签
- Doctype标签，文档协议声明标签
<!DOCTYPE> 声明不是 HTML 标签；它是指示 web 浏览器关于页面使用哪个 HTML 版本进行编写的指令。 - head标签
标签用于定义HTML文档的头部信息，主要用来封装其他位于文档头部的标记，例如、<meta>、<link>及<style>等，用来描述文档的标题、作者以及和其他文档的关系等。 - meta标签
meta是html语言head区的一个辅助性标签。
<meta> 元素可提供有关页面的元信息（meta-information），比如针对搜索引擎和更新频度的描述和关键词。
meta属性：
1.content：定义与 http-equiv 或 name 属性相关的元信息。
2.http-equiv:把 content 属性关联到 HTTP 头部。它可以向浏览器传回一些有用的信息，以帮助正确和精确地显示网页内容。
3.name:把 content 属性关联到一个名称，主要用于描述网页。
4.scheme：定义用于翻译 content 属性值的格式。
参考：w3school
HTML 2种路径的写法：相对路径和绝对路径
HTML相对路径
- 同一个目录的文件引用如果源文件和引用文件在同一个目录里，直接写引用文件名即可。
我们现在建一个源文件info.html，在info.html里要引用index.html文件作为超链接。假设info.html路径是：
C:/Users/asus/Desktop/Untitled-1.html
假设index.html路径是：
C:/Users/asus/Desktop/Untitled-2.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "index.html">index.html</a>
如何表示上级目录
../表示源文件所在目录的上一级目录，
../../表示源文件所在目录的上上级目录，以此类推。
- 假设info.html路径是：
C:/Users/asus/Desktop/Untitled-1.html
假设index.html路径是：
C:/Users/asus/Untitled-2.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../index.html">index.html</a> - 假设info.html路径是：
C:/Users/asus/Desktop/Untitled-1.html
假设index.html路径是：
C:/Users/Untitled-2.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../../index.html">index.html</a> - 假设info.html路径是：
C:/Users/asus/Desktop/Untitled-1.html
假设index.html路径是：
C:/Users/asus/babala/Untitled-2.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "../babala/index.html">index.html</a>
如何表示下级目录
引用下级目录的文件，直接写下级目录文件的路径即可。
- 假设info.html路径是：C:/Users/asus/Desktop/Untitled-1.html
假设index.html路径是：C:/Users/asus/Desktop/html/Untitled-2.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "html/index.html">index.html</a> - 假设info.html路径是：C:/Users/asus/Desktop/Untitled-1.html
假设index.html路径是：C:/Users/asus/Desktop/html\tutorials\index.html
在info.html加入index.html超链接的代码应该这样写：
<a href = "html/tutorials/index.html">index.html</a>
HTML绝对路径(Absolute Path)
- HTML绝对路径(absolute path)指带域名的文件的完整路径。假设你注册了域名www.admin5.com/html，并申请了虚拟主机，你的虚拟主机提供商会给你一个目录，比如www，这个www就是你网站的根目录。假设你在www根目录下放了一个文件index.html，这个文件的绝对路径就是：http://www.admin5.com/html。假设你在www根目录下建了一个目录叫html_tutorials，然后在该目录下放了一个文件index.html，这个文件的绝对路径就是http://www.admin5.com/html/html_tutorials/index.html。
参考：写给技术小白的HTML初级教程
颜色的几种表达方式
颜色有几种写法：
|颜色名| HEX |RGB|HSL|
|:-|:-|
|红色| #ff0000| rgb(255,0,0)| hsl(0,100%,50%)|
|绿色| #00ff00| rgb(0,255,0)| hsl(120,100%,50%)|
|蓝色| #0000ff| rgb(0,0,255)| hsl(240,100%,50%)|
|白色| #ffffff|rgb(255,255,255)| hsl(0,0%,100%)|
|黑色| #000000| rgb(0,0,0) | hsl(0,0%,0%)|
- 透明黑色如何表示：
在CSS3中，加入了Alpha透明通道,所以黑色透明就是rgba(0,0,0,0.5),其实最后一个alpha的值为0~1，0表示完全透明，1表示不透明。
参考：HTML颜色
其他
-
对<meta http-equiv="X-UA-compatible" content="IE=edge,chrome=1">的解析：
以上代码告诉IE浏览器，IE8/9及以后的版本都会以最高版本IE来渲染页面，chrome=1则可以激活Chrome Frame。
X-UA-Compatible是自从IE8新加的一个设置，对于IE8以下的浏览器是不识别的。 通过在meta中设置X-UA-Compatible的值，可以指定网页的兼容性模式设置。
参考：
X-UA-compatible
IE兼容模式及客户端兼容模式、服务器端兼容模式设置 -
严格模式和混杂模式
当浏览器厂商开始创建与标准兼容的浏览器时，他们希望确保向后兼容性。为了实现这一点，他们创建了两种呈现模式：标准模式和混杂模式
- 在标准模式中，浏览器以其支持的最高标准呈现页面；
- 在混杂模式中，页面以一种比较宽松的向后兼容的方式显示。混杂模式通常模拟老式浏览器的行为以防止老站点无法工作。
