一、 认识网页
网页是构成网站的基本元素，是承载各种网站应用的平台。通俗地说，您的网站就是由网页组成的，如果您只有域名和虚拟主机而没有制作任何网页的话，您的客户仍旧无法访问您的网站。
网页是一个包含HTML标签的纯文本文件，它可以存放在世界某个角落的某一台计算机中，是万维网中的一 “页”，是超文本标记语言格式 （标准通用标记语言的一个应用，文件扩展名为.html或.htm）。网页通常用图像档来提供图画。网页要通过网页浏览器来阅读。文字与图片是构成一个网页的两个最基本的元素。你可以简单地理解为：文字，就是网页的内容。图片，就是网页的美观。除此之外，网页的元素还包括动画、音乐、程序等等…
二、浏览器
2.1 浏览器种类
浏览器是网页显示、运行的平台，常用的浏览器有IE、火狐（Firefox）、谷歌（Chrome）、Safari和Opera等。我们平时称为五大浏览器。
2.2 浏览器内核
浏览器最重要或者说核心的部分是 “Rendering Engine”，可大概译为 “渲染引擎”，不过我们一般习惯将之称为 “浏览器内核”。负责对网页语法的解释 （如标准通用标记语言下的一个应用HTML、JavaScript） 并渲染 （显示） 网页。 所以，通常所谓的浏览器内核也就是浏览器所采用的渲染引擎，渲染引擎决定了浏览器如何显示网页的内容以及页面的格式信息。不同的浏览器内核对网页编写语法的解释也有不同，因此同一网页在不同的内核的浏览器里的渲染 （显示） 效果也可能不同，这也是网页编写者需要在不同内核的浏览器中测试网页显示效果的原因。
| 浏览器 | 内核 | 备注 |
|---|---|---|
| IE | Trident | IE、猎豹安全、360极速浏览器、百度浏览器 |
| Firefox | Gecko | 可惜这几年已经没落了，打开速度慢、升级频繁、猪一样的队友flash、神一样的对手chrome |
| Chrome | Chromium/blink | 在 Chromium 项目中研发 Blink 渲染引擎（即浏览器核心），内置于 Chrome 浏览器之中。Blink 其实是 WebKit 的分支。大部分国产浏览器最新版都采用Blink内核。二次开发 |
| Safari | WebKit | 现在很多人错误地把 webkit 叫做 chrome内核（即使 chrome内核已经是 blink 了） |
| Opera | blink | 现在跟随chrome用blink内核 |
2.3 拓展内容
移动端的浏览器内核主要说的是系统内置浏览器的内核。Android手机而言，使用率最高的就是Webkit内核，大部分国产浏览器宣称的自己的内核，基本上也是属于WebKit二次开发。IOS以及WP7平台上，由于系统原因，系统大部分自带浏览器内核，一般是Safari或者IE内核Trident。
三、Web标准
Web标准不是某一个标准，而是由W3C组织和其他标准化组织制定的一系列标准的集合。W3C万维网联盟是国际最著名的标准化组织。1994年成立后，至今已发布近百项相关万维网的标准，对万维网发展做出了杰出的贡献。
3.1 为什么要遵循WEB标准
因为浏览器不同、内核不同，他们显示页面或者排版就有差异，因此遵循web标准使我们开发的网页更统一化，标准化。
3.2 Web 标准的好处
1、让Web的发展前景更广阔
2、内容能被更广泛的设备访问
3、降低网站流量费用
4、使网站更易于维护
5、更容易被搜寻引擎搜索
6、提高页面浏览速度
3.3 Web 标准构成（重点）
主要包括结构（Structure）、表现（Presentation） 和 行为（Behavior） 三个方面。理想状态下，他们三层都是独立的， 放到不同的文件里面。
| 标准 | 说明 | 备注 |
|---|---|---|
| 结构 | 结构用于对网页元素进行整理和分类，制作网页骨架 | HTML、XHTML等 |
| 表现 | 表现用于设置网页元素的版式、颜色、大小等外观样式 | CSS等 |
| 行为 | 行为是指网页模型的定义及客户端与服务端交互程序的编写 | JavaScript等 |
3.4 拓展内容
浏览器内核包括两部分，渲染引擎 和 JS引擎。渲染引擎负责读取网页内容，整理讯息，计算网页的显示方式并显示页面，JS引擎是解析执行js获取网页的动态效果。 后来 JS引擎 越来越 独立，内核 就 倾向 于只指 渲染引擎。
深度阅读：五大主流浏览器内核的源起以及国内各大浏览器内核总结
四、HTML简介
HTML 指的是超文本标记语言 (Hyper Text Markup Language) 是用来描述网页的一种语言。
- HTML 不是一种编程语言，而是一种标记语言 (markup language)。
- 标记语言是一套标记标签 (markup tag)。
- 所谓超文本，有两层含义：
1、因为它可以加入图片、声音、动画、多媒体等内容 （超越文本限制）
2、不仅如此，它还可以从一个文件跳转到另一个文件，与世界各地主机的文件连接 （超级链接文本）。
4.1 HTML的标签分类
1、常规元素 （双标签）
<title>HTML学习</title>
- 该语法中 “<标签名>” 表示该标签的作用开始，一般称为“开始标签 （start tag）”，“</标签名>” 表示该标签的作用结束，一般称为“结束标签 （end tag）”。
- 和开始标签相比，结束标签只是在前面加了一个关闭符 “/”。
2、空元素 （单标签，又称自闭和标签）
<input name="queryBtn" type="submit" value="查询" />
- 空元素用单标签来表示，简单点说，就是里面不需要包含内容， 只有一个开始标签不需要关闭。
4.2 HTML的标签关系
主要针对于双标签的相互关系分为两种：请大家务必熟悉记住这种标签关系，因为后面我们标签嵌套特别多，容易弄混它们的关系：
1.嵌套关系：
<head>
<title> </title>
</head>
2.并列关系：
<head></head>
<body></body>
<img src="media/xiong.jpg" width="500">
- 如果两个标签之间的关系是嵌套关系，子元素最好缩进一个tab键的身位 （一个tab是4个空格）。如果是并列关系，最好上下对齐。
4.3 HTML5的标签空间属性
-
容器级标签特点 （块级元素）：
1、 独占一行
2、 高度、宽度、行高、内外边距都可控
4、 它可以容纳内联元素和其他块级元素
3、 宽度默认是它的容器的100%，除非设定一个宽度 -
文本级标签特点 （行内元素、内联元素等）：
1、 可以和其他元素在同一行内
2、 高度、宽度、上下外边距都不可控，左右外边距、内边距、行高 可控
3、 内联元素 只能容纳 文本 或者 其他内联元素
4、 设置padding、margin-left、margin-right有效，设置padding之后元素范围增大，但是对元素周围的内容是没影响 -
行内容器标签 （行内块元素）：
1.元素排列在一行
2.宽度默认由内容决定
3.元素间默认有间距
4.支持宽高、外边距、内边距的所有样式的设置
注意： 一般块级元素都是容器级标签，但是有几个特殊的块级元素只能包含内嵌元素，不能再包含块级元素如: <p><dd>
4.4 HTML5的语义化理解
根据内容的结构化，选择合适的标签，便于开发者阅读、写出更优雅的代码，让浏览器的爬虫和机器很好地解析。
好处：
1. 没有css时:，也可以很好地呈现出内容结构，代码结构。
2. 提升用户体验：title、alt用于解释名词或解释图片信息。label标签的用户体验优化。
3. 有利于SEO: 和 搜索引擎 建立良好沟通，有助于 爬虫抓取 更多的 有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
4. 方便其他设备解析 （如屏幕阅读器、盲人阅读器、移动设备） 以有意义的方式来渲染网页；
5. 便于团队开发和维护，语义化更具可读性，遵循W3C标准的团队都遵循这个标准，可以减少差异化。
语义化编码注意事项：
- 尽可能少的使用无语义的标签如 <div> 和 <span>；
- 在语义不明显时，既可以使用div或者p时，尽量用p, 因为p在默认情况下有上下间距，对兼容特殊终端有利；
- 不要使用纯样式标签，如：b、font、u等，改用css设置。需要强调的文本，可以包含在strong或者em标签中 （浏览器预设样式，能用CSS指定就不用他们），strong默认样式是加粗 （不要用b），em是斜体 （不用i）；
- 使用表格时，标题要用caption，表头用thead，主体部分用tbody包围，尾部用tfoot包围。表头和一般单元格要区分开，表头用th，单元格用td；
- 表单域要用 <fieldset> 标签包起来，并用 <legend> 标签说明表单的用途；每个input标签对应的说明文本都需要使用label标签，并且通过为input设置id属性，在lable标签中设置for=someld来让说明文本和相对应的input关联起来。
4.5 HTML的单标签 （自闭和标签）
| 标签 | 含义 |
|---|---|
| <br/> | 硬换行 |
| <hr/> | 水平线 |
| <area/> | 定义图像映射中的区域 |
| <base/> | 为页面上的所有链接规定默认地址或默认目标 |
| <img/> | 插入图片 |
| <input/> | 定义用户输入的文本框 |
| <link/> | 定义文档与外部资源的关系 |
| <meta/> | 提供有关页面的元信息 |
| <param/> | 为插入XHTML文档的对象规定run-time设置 |
| <col/> | 为表格中一个或多个列定义属性值 |
| <embed/> | 在页面中嵌入任何类型的文档 |
| <source/> | 为媒介元素，定义媒介资源 |
| <track/> | 为诸如video元素之类的媒介规定外部文本轨道 |
| <wbr/> | 软换行 |
150
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
