第二周博客预习----常见标签，认识浏览器(给出部分样例)

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

• <p></p>:该标签被用来放段落，paragraph的缩写
• <h></h>:标签，header表示标题，从h1到h6，h1最大
• <hr>:分割线
• <br>:换行标签，对应的是单词是break
• <center></center>:居中显示
• marquee：跑马灯效果
• <button></button>:按钮
• pre预保留格式
• span行内组合

• <a></a>:超链接

  • target="self"  :在当前界面打开该链接

    target="_blank":在新的界面打开该链接

  • href=“网址”，网址若为“#”，为虚拟超链接

  • 

• <img></img>:图片标签
  • src=“图片路径”
  • alt=“替换文本”
  • 

• table表格，th表头（内容加粗居中），tr单元行，td单元格

  • 

• form表单，有许多表单元素

  • input，根据type属性有不同功能，例如text文本框，password密码框，radio单选框，checkbox多选框。。。。

  • 

  • select>option，下拉选项框

  • 

  • textarea文本域

  • 

• 无序列表ul,li

• 有序列表ol，li

• 自定义列表di,dt,dd

• 浏览器的功能：网络、资源管理、网页浏览、多页面管理、插件和扩展、书签管理、历史记录管理、设置管理、下载管理、账号和同步、安全机制、隐私管理、外观主题、开发者工具等

  网络：它是第一步，浏览器通过网络模块来下载各种各样的资源，例如HTML文本、JavaScript代码、样式表、图片、音视频文件等。网络部分其实非常重要，因为它耗时比较长并且需要安全访问互联网上的资源

  资源管理：从资源下载或者本地获取资源，并将它们管理起来，这需要高效的管理机制，例如如何避免重复下载资源、缓存资源等，都是它们需要解决的问题

  网页浏览：这是浏览器的核心也是最基本、最重要的功能，它通过网络下载资源并从资源管理器获得资源，将它们转变为可视化的结果（浏览器内核的最终要的功能）

  多页面管理：支持多个页面同事加载，解决多页面的相互影响和安全等问题也非常重要，解决方法：使用进程或者使用线程来绘制网页

  插件和扩展：插件是用来显示网页特定内容的，而扩展则是增加浏览器新功能的软件或者压缩包

  安全机制：本质是提供一个安全的浏览器环境，避免用户信息被各种非法工具窃取和破坏，这可能包括显示用户访问的网站是否安全，为网站设置安全级别、防止浏览器被恶意代码攻破等

  开发者工具：审查HTML元素、调试JavaScript代码，改善网页性能等

  浏览器核心的种类
  浏览器的种类实在是太多，如IE、Firefox、Chrome、Opera等，但是浏览器内核的种类就比较少了，分别是Trident、Gecko、WebKit和Presto、Blink，对于Trident来说，代表的产品就是Internet Explorer（IE），Gecko的代表就是Mozilla Firefox，WebKit的代表就是Safari、Chrome，Presto的代表是Opera（之前版本），现在Opera使用的是Blink内核

  Blink内核是开源引擎WebKit中的WebCore组件的一个分支，在Chrome（28及往后版本）、Opera（15及往后版本）和Yandex浏览器中使用，Blink目前是从WebKit直接复制出的一个版本，将与Chromium无关的Ports都去掉，将代码结构重新整理

  浏览器之间产生兼容性的原因
  通过上面就可以看出，因为不同的浏览器可能使用不同的浏览器内核，因为内核的不同所以导致各个浏览器对于网页的解析产生了差异，在做前端方面的工作时，对于兼容性的问题的解决，可以从三方面入手：HTML、CSS、JavaScript

  HTML差异性主要体现在对HTML5的支持上，

  关于JavaScript的兼容性：

  事件绑定的方法，addEventListener和attachEvent（IE）

  event属性获取目标元素的方法，event.target和event.srcElement（IE）

  Ajax的实现方式，XMLHttpRequest和ActiveXObject（IE）

  DOM元素的属性，childNodes和children，childNodes它是标准属性，它返回指定元素的子元素集合，包括HTML节点，所有属性，文本节点，通过nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点，children只返回HTML节点，甚至不返回文本节点

  对于IE浏览器，有event.x和event.y属性，在Firefox下，event.pageX和event.pageY是存在的

  ​

  一些关于WebKit的概念
  当我在看那本书的时候，就看到这样几个概念，觉得比较容易混淆，所以专门列举出来

  WebKit：一个开源的项目，其前身来自于KDE的KHTML和KJS，该项目专注于网页内容的展示，开发出一流的网页渲染引擎，该项目包含两部分，一部分是WebCore，其中包含着对HTML、CSS等很多W3C规范的实现，第二部分是狭义的WebKit，它主要包含各个平台的移植并提供相对应的Web接口，也就是WebView或者类似WebView，这些接口提供操作和显示网页的功能。目前使用WebKit的主流的浏览器包括Chrome, Safari, QtWebKit, Android Browser以及众多的移动平台的浏览器

  WebKit2：相对于狭义的WebKit而言，不是简单的第二个版本，它是新的API层，最主要的变化在于将网页的渲染置于单独的进程，而接口层在另外一个进程，它们之间使用IPC来通讯。对于接口的调用者来说，中间的IPC和地下的是现实透明的，这样做的最明显的好处是，当网页的渲染出现问题的时候，不会阻碍Web解口的调用者进程，提高了浏览器的稳定性和安全性

  Chromium：是建立在WebKit上的开源项目，由Google发起，引入了很多先进的技术，如跨进程模型、沙箱模型等，也支持很多新的规范，如WebGL、Canvas2D、CSS3以及HTML5特性

  Chrome：是Google公司的浏览器产品，基于Chromium开源项目，但是Chrome的代码却没有开源，因为含有Google的私有Code和很多服务，Chrome可以自动更新，Chrome的版本更细是落后于Chromium的

  WebKit架构

  大体上分为了四个层次：

  1.最底层为操作系统层，这个也就说明了WebKit可以运行在不同的操作系统上

  2.所依赖的第三方库：主要有图形库、音频库、视频库

  3.WebKit层，它又可以分为三部分WebCore、JavaScriptCore、WebKit Ports

  WebCore：与平台无关，可以被多个浏览器移植使用，起加载和渲染网页的部分，具体包括了HTML解释器（HTML解析）、CSS解释器（CSS解析）、SVG、DOM、渲染树（RenderObject树、RenderLayer树等），以及Inspector（Web Inspector、调试网页）

  JavaScriptCore：在WebKit中起到的作用是解析和提供执行环境

  WebKit Ports：WebKit中的非共享部分，所谓一个WebKit Port，并没有确切的形式，可以看作是OS，平台（应用程序框架），JS引擎，以及各种第三方库的一个组合，详细介绍

  4.WebKit接口层：主要是提供嵌入式编程接口，提供给浏览器调用
   

---

---