您的位置:新葡亰496net > 新葡亰官网 > 新葡亰496net:培养和练习2009年的网页设计行业的

新葡亰496net:培养和练习2009年的网页设计行业的

发布时间:2019-06-19 08:37编辑:新葡亰官网浏览(82)

    塑造2010年的网页设计行业的那些事

    2011/01/13 · HTML5 · HTML5

    导读:原文由王五翻译,已修正原译文中的一些误译之处。以下是全文。

    在2009年末,我曾坐下来考虑网页设计会向何处发展,当时发生的一切又将走向何方。我提起笔来(确切地说,我是坐在键盘前)写下了《2010年塑造Web的五项科技》,力图总结正在推动我们这个行业发展的科技趋势和行业发展的方向。为了真实的反映过去一年所发生的事,我在本文会讨论一些塑造了2010年网页设计行业的科技和趋势。

    新的标记标准:CSS3 和HTML5

    毫无疑问,在2010年中标记标准有巨大的发展。W3C理事会曾建议在几年之后最终确定CSS3和HTML5语言的地位(原本预计HTML5的地位最终会在2022年确立),可它们却已迅速成为新的标准。

    新葡亰496net 1

    幸运的是。和IE9一样,当今的浏览器如Safari、Chrome、 Opera、 Firefox,都意识到了CSS3和HTML5对于移动平台和传统电脑桌面的的价值。它们都进了一步,将CSS3和HTML5投入应用,而不再只是做为样本。

    对我而言,当看到2010出版的相关书籍,不少关于CSS3和HTML5的文章标题,如《无情的网页设计业》, 《网页设计者的CSS3》和 《网页设计者的HTML5 》时,我能总能感觉到一些更为切实和权威的意味——这只是冰山的一角。

    新葡亰496net 2

    伴随对新语言的性能进行的无数实验和概念验证,网站设计者和浏览器供应商有了新的觉悟,这也把他们引入了主流。

    也许开始赢得众多怀疑论者的是这些新规范在IE9中的应用——在最常用的浏览器中的重新运用——结果很受欢迎。微软浏览器的标准基于(大部分)其它浏览器供应商正在使用的标准,这意味着CSS3和HTML5在现今的项目中还是可以用的。

    新葡亰496net 3

    IE9或许还不能支持CSS3和HTML5的所有特性,如你在谷歌浏览器和火狐浏览器中所看到的那样,但微软的工程师的确已经做出了很大转变,朝正确方向的转变。

    即使在得到各种浏览器的全面支持之前,JavaScript助手资源库也扮演了很重要的角色,使得我们可以使用新CSS和HTML的特性。开放源代码项目如:Modernizr,HTML5 shiv, 和 HTML5 Boilerplate继续帮助网页设计者和网络开发者通过这些新的标记语言标准日益提升其产品的性能,同时又能迎合那些已经过时的浏览器。

    网页排版

    新葡亰496net 4

    使用CSS @font-face规则排版对网页设计也有很大的帮助。新的网络服务如Google Font API 和Font Deck,以及原有的TypeKit使得设计者可以跳出原来少量的网络安全字体的限制而有了更多的选择。

    移动互联网

    新葡亰496net 5

    2010年1月17日,苹果公司发布了iPad。iPad、笔记本电脑、MacBook Air和Android smartphones之类的超级便携电脑,使浏览器脱离了传统的静态桌面,转向沙发、机场休息室、火车及公园长凳上,实际上可以说是所有能接收无线网络信号的地方。

    另一方面,去年有许多关于CSS3设计网页的讨论(和更多的应用)方面的媒体调查和反馈,使设计的网站可以在多种不同的平台展示。

    通过设计iPad应用程序、设计现有网站的易用的移动版本、使用平果软件开发工具包设计iPhoner应用程序或利用开放的技术即设计HTML5 语言的iPhone程序, 很多设计者已经进入移动网络领域。

    社交网络

    2010年网络社交继续发展,甚至还有一部关于网络社交的电影!毋庸置疑现在网络社交比任何时候都要流行。对很多人而言,Facebook就是因特网。

    我们已经看到了网络社交的文化效应,如某人网上的推特,还有Gap,这个国际大公司在Twitter和Facebook用户公开批评其选择后改换了公司标志。

    有人说,并不是所有的网络社交理念都实现了, Google Wave做到了,谁不同意?

    JavaScript

    如果我问你在去年JavaScript做为一种标记语言发生了哪些变化,你或许发现并没有多少。新的JavaScript在开发方面的进展有些让人失望,尽管ECMAScript 5让人看到了JS引擎在现代浏览器中局部地应用(如FireFox)。

    无论怎样,在去年通过做为CSS3和HTML5的业务引擎,JavaScript已为网页设计者和网络开发者所熟悉。JavaScript是HTML5中许多令人兴奋的功能的驱动程序, 如canvas的APIs, 音频, 视频, 网络存储等。我们可以看到服务器端面脚本语言在项目中的应用(如node, JS)使客户端和服务器端和服务器端面实现无缝对接。

    简而言之,JavaScrip比以往更流行了。Promote JS之类的项目对做到更好的文件编制有所助益并且激发了对JavaScript的讨论。

    2010年下半年涌现出大量的新的JavaScript的博客,同时原有的博客的关注度也大为提高。JavaScript周刊等通讯刊物高调报道了关于JavaScript的相关新闻。

    新葡亰496net 6

    JavaScript在新闻报道中被提及的次数较之2010年以前大为增加(通过Google Trends 的统计可以看出),这一数据证明了JavaScript在主流设计领域中正日益流行。

    原文:sixrevisions  译文:王五

     

    赞 收藏 评论

    新葡亰496net 7

     

    摘要:本文主要探讨了Web开发技术之间的关系,以及他们组合起来到底有什么用的问题。

    本文是维基百科相关页面的翻译,主要介绍了前端编程的三大工具以及发展目的。

    关于 HTML

    超文本标记语言(HyperText Markup Language,简称 HTML)是一种用于创建网页的标准标记语言。HTML是一种基础技术,常与CSS、JavaScript一起被众多网站用于设计令人赏心悦目的网页、网页应用程序以及移动应用程序的用户界面。网页浏览器可以读取HTML文件,并将其渲染成可视化网页。

    • HTML是网页内容的载体。内容就是网页制作者放在页面上想要让用户浏览的信息,可以包含文字、图片、视频等
    • CSS样式是表现。就像网页的外衣,比如:标题字体、颜色变化,或为标题加入背景图片、边框等。所有这些用来改变内容外观的东西称之为表现
    • JavaScript是用来实现网页上的特殊效果。如:鼠标滑过弹出下拉菜单,或鼠标划过表格的背景颜色改变,还有焦点新闻(图片)的轮换。可以这么理解,有动画的,有交互的一般都是用JavaScript来实现的

    如果你是一个Web开发初学者,那么你难免会在网上搜索HTML, CSS, XML, JS(Javascript), DOM, XSL等等这些词的意思,然而,随着学习的深入。当你把他们搅在一起,你又糊涂了,你会不停的问,HTML是什么?CSS是什么?XML是什么?JS是什么?它们到底有什么用?无论是网络百科,还是一些IT专题网站,又或者一些牛人博客,他们都会告诉你,某个单一的东西是什么,这类文章很多,但很少有涉及,它们组合起来是什么,有什么用。我想,我写这篇文章,就是为了说明一下这个他们很少涉及的问题。


    发展

    年份 版本
    1997.1 HTML 3.2
    1997.12 HTML 4.0
    1999.12 HTML 4.01
    2014.10 HTML 5

     

    归纳、总结、提炼能力是我们进步的发动机,这种能力是可以有意识地培养的,拉卡拉电子支付公司董事长兼总裁孙陶然提到:在拉卡拉我们要求用三条说清楚任何问题就是一种能力训练,任何问题如果不能用三条说清楚说明你还没想透。

    前端网络编程,也被认为是用户端编程,是为了网页或者网页应用,而编写HTML,CSS以及JS代码,所以用户能够看到并且和这些页面进行交流。前端网络编程的挑战在于用于实现前端页面的工具以及技术变化得很快,所以工程师需要不断注意产业是如何发展的(例如去年的ECMAScript 6)。

    HTML vs XML vs XHTML


    在这里,我争取用最根本的语言向大家分别说明HTML, CSS, XML, JS到底是什么,有什么用。然后我们再来看把他们组合起来是什么,有什么用。当然如果你对HTML, CSS, XML, JS有足够了解,可以直接跳过,看文章的后半部分,那里才是本文核心所在。

    设计网页的目的在于:确保用户打开站点的时候,信息是以容易阅读并且相互关联的形式呈现的。随之带来的问题是,现在用户实用大量的设备来访问网页,这些设备具有不同的屏幕尺寸以及清晰度。所以设计者在设计网页的时候需要注意这些方面。他们需要确保他们的网页在不同的浏览器、不同的操作系统以及不同的设备上显示正确,这需要在工程师端进行仔细的计划。

    HTML

    HTML(Hyper Text Markup Language)即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言。它告诉浏览器如何显示内容

     

    第一部分

    1. HTML超文本标记语言 (Hyper Text Markup Language) ,是用来描述网页的一种标记语言。

      HTML

      Hello World! I'm HTML

    网页文件本身是一种文本文件,通过在文本文件中添加标记,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。
      HTML之所以称为超文本标记语言,是因为文本中包含了所谓“超链接”点。超文本(Hypertext)是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。
      概括,HTML就是整合网页结构和内容显示的一种语言。

    Hello World! I'm HTML
    

    浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容。
      这段内容在浏览器上显示的结果是:Hello World! I'm HTML
      我们看<p>标签上有一个id,这是<p>这个标签的唯一标识,方便别人找到它,对它进行操作。

    1. CSS 层叠样式表单(Cascading StyleSheet)。是将样式信息与网页内容分离的一种标记性语言 。作为网站开发者,你能够为每个HTML元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。这样,即设计人员能够将更多的时间用在设计方面,而不是费力克服HTML的限制。说白了,CSS就是设置网页上HTML元素属性的语言。
        CSS代码:
    #hello{  
    color:blue;  
    } 
    

    当把这段CSS代码应用于HTML中,它会找到id为“hello”的HTML标签,将其中的内容以蓝色显示出来;具体的插入HTML的方法这里不再赘述(说一句,只说明是什么,有什么用的问题,不关注技术细节,技术细节网上很好找)。

    1. Javascript,首先说明JavaScript和Java无关,JavaScript 是属于网络的脚本语言!那么为什么名字如此相似?这是典型的市场营销方面的成功,它的推广成功,也是借了Java的东风。当微软开始意识到Javascript在Web开发人员中流行起来时,微软还是一贯风格,建立了自己的脚本语言,JScript。
        Javascript是一种基于对象(Object)和事件驱动(Event Driven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。例如可以设置鼠标悬停效果,在客户端验证表单,创建定制的HTML页面,显示警告框,设置cookie等等。
        网页中所有的对数据进行判断、操作以及向浏览者反馈信息的本地代码实现部分均是Javascript(当然也有其他的),这样既可以使网页更具交互性,给用户提供更令人兴奋的体验,同时减轻了服务器负担。
        JS的代码如下:
    function jsHello(){  
           alert('Hello World!');    
    }
    

    当把以上代码应用于HTML代码,它会在你的HTML载入时,弹出一个内容为“Hello World!”的对话框。同样,它是通过嵌入或调入在标准的HTML语言中实现的,至于如何嵌入或调入不再赘述,理由上面提到了。

    1. Xml可扩展标记语言 (Extensible MarkupLanguage),是一套定义语义标记的规则,这些标记将文档分成许多部件并对这些部件加以标识。它也是元标记语言,即定义了用于定义其他与特定领域有关的、语义的、结构化的标记语言的句法语言。你可以把XML理解为一种数据库,例如rss就是xml的一种变体。
        XML代码如下:
    <Hello>  
    <bcd>China</bcd>  
    <bcd>USA</bcd>  
    <bcd>UK</bcd>  
    </Hello>  
    

    XML的起因是,用户受到SGML(后面再说)复杂性的挫伤和HTML的不充分。相对HTML来说,XML更追求严谨性,如果说你在HTML代码中标签比较混乱,如未关闭等,或许浏览器会忽略这些错误;但同样的事情发生在XML中会给你带来大麻烦。
      铺垫终于完了,在进入正题之前,建议大家对比着图来理解后边的内容,废话不多说,开始进入正题。

    第二部分

    新葡亰496net 8

      这里的DOM指的是HTML DOM。HTML DOM是W3C的标准,同时它也是HTML的文档对象模型的缩写(the Document Object Model for HTML)。HTML DOM定义了用于HTML的一系列标准的对象,以及访问和处理HTML文档的标准方法。通过DOM,可以访问所有的HTML元素,连同它们所包含的文本和属性。其中的内容可以修改和删除,同时也可以创建新的元素。HTML DOM独立于平台和编程语言。它可被任何编程语言诸如Java、Javascript和VBScript所使用。HTML DOM就是HTML语言对外界开通的接口,以便其他语言能够访问或修改HTML内部的元素。
      当js需要对html元素进行操作时,DOM是一个很必要的对象。
      你便可以通过利用DOM对象构造如下代码并插入到HTML代码中的任何位置来实现。

    <script>  
    window.onload=function hello(){  
          document.getElementById("hello").innerHTML="Hello China!";  
    }  
    </script>
    

    (web前端学习交流群:328058344 禁止闲聊,非喜勿进!)

    新葡亰496net 9

      当用CSS去修饰HTML中的元素,这一过程可以称为声明HTML元素样式的过程。

    新葡亰496net 10

      SGML标准通用标记语言(standardgeneralized markup language)。由于SGML的复杂,导致难以普及。SGML有非常强大的适应性,也正是因为同样的原因,导致在小型的应用中难以普及。HTML 和 XML同样衍生于SGML:XML可以被认为是SGML的一个子集,而HTML是SGML的一个应用。XML的产生就是为了简化SGML,以便用于更加通用的目的。比如语义Web,它已经应用于大量的场合,比较著名的有XHTML、RSS 、XML-RPC 和SOAP 。
      XHTML是可扩展超文本标识语言(TheExtensible HyperText MarkupLanguage)。HTML是一种基本的Web网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。
      简单的说,XHTML比HTML要严谨些,但又没像XML那么严重——譬如所有的XHTML标签以及属性必须要小写,属性性必须要加双引号(当然如今的浏览器不管是IE还是FF,对HTML和XHTML采取兼容措施,这也是XSS产生的根本原因),而且也可以像XML一样自定义部分标签,因此有了极大的灵活性。
      而且进入了XHTML时代,大家倡导的是CSS DIV,这也是web2.0的基础。
      DHTML只是一种制作网页的概念,实际上没有一个组织或机构推出过所谓的DHTML标准或技术规范之类的。DHTML不是一种技术、标准或规范,DHTML只是一种将目前已有的网页技术、语言标准整和运用,制作出能在下载后仍然能实时变换页面元素效果的网页的设计概念。DHTML就是动态的html,Dynamic HTML。传统的html页面是静态的,Dhtml就是在html页面上加入了javascript脚本,使其能根据用户的动作作出一定的响应,如鼠标移动到图片上,图片改变颜色,移动到导航栏,弹出一个动态菜单等等。
      一般如:![](pic)

    新葡亰496net 11

      Expression是微软为了使样式表能够在修饰HTML样式的同时执行javascript脚本而在IE浏览器中增加的一个功能,这样你可以做譬如:图片的自适应宽度,表格的隔行换色等等。
      如:img{max-width:500px;width:expression(document.body.clientWidth> 200 ? "200px": "auto");}

    新葡亰496net 12

      XMLHTTP最通用的定义为:XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。
      来自MSDN的解释:XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。
      现在的绝对多数浏览器都增加了对XmlHttp的支持,IE中使用ActiveXObject方式创建XmlHttp对象,其他浏览器如:Firefox、Opera等通过window.XMLHttpRequest来创建XmlHttp对象。
      一个简单的定义IE的XmlHttp的对象及应用的实例如下:

    var XmlHttp=new ActiveXObject("Microsoft.XMLhttp");  
    XmlHttp.Open("get","url",true);  
    XmlHttp.send(null);  
    XmlHttp.onreadystatechange=function ServerProcess(){  
        if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')  
        {  
               alert(XmlHttp.responseText);  
        }  
    }  
    

    新葡亰496net 13

      XSLT(eXtensibleStylesheet LanguageTransformation)最早设计XSLT的用意是帮助XML文档(document)转换为其它文档。但是随着发展,XSLT已不仅仅用于将XML转换为HTML或其它文本格式,更全面的定义应该是:XSLT是一种用来转换XML文档结构的语言。
      XSL-FO:XSL在转换XML文档时分为明显的两个过程,第一转换文档结构;其次将文档格式化输出。这两步可以分离开来并单独处理,因此XSL在发展过程中逐渐分裂为XSLT(结构转换)和XSL-FO(formattingobjects)(格式化输出)两种分支语言,其中XSL-FO的作用就类似CSS在HTML中的作用。

    新葡亰496net 14

      AJAX:异步JavaScript和XML(AsynchronousJavaScript and XML)。
      最后一个东东,它算得上是web2.0思想的心。AJAX=CSS HTML JS XML DOM XSLT XMLHTTP。是指一种创建交互式网页应用的网页开发技术。AJAX不是一种单一的新技术,而是有机地利用了一系列相关的技术。
      在 2005年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。
      Google Suggest 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,Javascript会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。
      在AJAX中,XmlHttp用来在不改变页面的情况下传输数据,其中传输的数据即是XML,然后通过XSLT将其格式化,利用js通过dom对象将其显示到HTML中,同时利用CSS确定数据的显示及位置。
      这项技术在网络上的应用无处不在,如你的微博,你的邮箱,你的QQ空间,再如搜索引擎,电子商务平台,网络地图等等。

    总结


    终于完了,本文主要探讨了Web开发技术之间的关系,以及他们组合起来到底有什么用的问题。这篇文章总结得挺不容易的,期间参考了不少别人的东西,包括:还有一些大牛的博客,这里就不一一罗列了。希望对挣扎在Web开发学习前线的朋友有所帮助。如果有什么不够准确的地方,请大家斧正。


    主要特点

    1. 简易性:超级文本标记语言版本升级采用超集方式,从而更加灵活方便
    2. 可扩展性:超级文本标记语言的广泛应用带来了加强功能,增加标识符等要求,超级文本标记语言采取子类元素的方式,为系统扩展带来保证
    3. 平台无关性:虽然个人计算机大行其道,但使用MAC等其他机器的大有人在,超级文本标记语言可以使用在广泛的平台上,这也是万维网(WWW)盛行的另一个原因
    4. 通用性:另外,HTML是网络的通用语言,一种简单、通用的全置标记语言。它允许网页制作人建立文本与图片相结合的复杂页面,这些页面可以被网上任何其他人浏览到,无论使用的是什么类型的电脑或浏览器

    如果你是一个Web开发初学者,那么你难免会在网上搜索HTML,CSS,XML,JS(Javascript),DOM,XSL等等这些词的意思,然而,随着学习的深入。当你把他们搅在一起,你又糊涂了,你会不停的问,HTML是什么?CSS是什么?XML是什么?JS是什么?它们到底有什么用?无论是网络百科,还是一些IT专题网站,又或者一些牛人博客,他们都会告诉你,某个单一的东西是什么,这类文章很多,但很少有涉及,它们组合起来是什么,有什么用。我想,我写这篇文章,就是为了说明一下这个他们很少涉及的问题。

    前端网络编程所使用的工具

    这里有一些工具能被用于进行前端编程,理解工具最适用于哪些任务,这有助于产生一个高质量的、可升级的站点。

    XML

    XML(EXtensible Markup Language),即可扩展标记语言,是用于网络上数据交换的语言。它没有标签集,也没有语法规则,但是它有句法规则

     

    超文本标记语言(HTML):

    HTML是任何网页工程程序的骨架,没有它网页不会存在。超文本标记语言能提供站点总体的样子。HTML被Tim Berners-Lee所发展。随着HTML的发展,在万维网中产生了许多版本。最新版本的超文本标记语言被称为HTML5,在2014年0月28日被W3所推出。这一版本包含了新的并且高效的方式来传输元素,例如音频以及视频文件。H5在前端工程师中非常受欢迎。和老的版本相比,HTML5有很多特点。

    随着HTML的发展,在网络中产生了一场革命。现在,世界开始通过同一种语言相互交流,那就是超文本标记语言。其由两种部分组成,第一是超文本(就是超链接),第二是标记语言(raditionally written with ablue pencilon authors'manuscripts.)。

    XML 与 HTML 的主要区别

    1. 目标:HTML的设计目标是显示数据并集中于数据外观,而XML的设计目标是描述数据并集中于数据的内容,它的显示形式靠CSS或XSL帮完成
    2. 语法:HTML的标记不是所有的都需要成对出现,XML则要求所有的标记必须成对出现;HTML标记不区分大小写,XML则大小敏感,即区分大小写
    3. 更新:XML允许粒度更新,不必在XML文档每次有局部改变时都发送整个文档的内容,只有改变的元素才必须从服务器发送到客户机,而HTML却不支持这样的功能
    4. 新葡亰496net:培养和练习2009年的网页设计行业的这多少个事,你询问多少。可读性:HTML侧重于网页数据表现形式的定义和描述,欠缺对文档数据含义的确切描述,不能适应对于日益增多的各类信息进行传递与存档的需求。例如<h2>Apple</h2>,在浏览器中显示的Apple,人们并不知道它具体是水果还是一个手机,HTML并不能解释数据Apple的含义;而XML不会给大家这个错觉如果描述的是水果中的苹果的话它会很清楚的这样表示<水果>Apple</水果>。所以说HTML的可读性相对较差。
    5. 还有一点就是XML标记由架构或文档的作者定义,并且是无限制的。HTML 标记则是预定义的;HTML 作者只能使用当前 HTML 标准所支持的标记

    层叠样式列表(CSS):

    CSS控制了站点的样子,让你的站点有自己独有的外观。其实现形式是:保证样式列表先于其他的样式规则,由其他的输入形式所影响,例如屏幕的尺寸和分辨率。

    XHTML

    XHTML(EXtensible HyperText Markup Language),即扩展超文本标签语言,目标是取代HTML

     

    JS:

    JS是基于场景的命令式语言(和HTML的说明性语言不同),用于将静态的HTML界面动态化。JS的代码能使用HTML标准提供的文档对象模型(DOM),来根据事件,例如用户的输入,操纵网络页面。

    使用一种被称为异步JavaScript和XML的技术(AJAX),JS代码也能动态的改变网页的内容(与原始的HTML页面端相独立),并且也能回应服务端的事件,让网页体验增加了真正动态的特性。


    XHTML 与 HTML 的主要区别

    1. XHTML是当前HTML版的继承者,由于HTML的语法较为松散,对于许多其他设备的要求较高,因此就出现了由DTD定义规则,语法要求更加严格的XHTML
    2. XHTML与HTML的最大的变化在于所有标签必须闭合
    3. XHTML中所有的标签必须小写
    4. XHTML 元素必须被正确地嵌套
    5. XHTML 文档必须拥有根元素

     

    发展的目的

    前端工程师牢记以下要点,使用可获得的工具以及技术来到达后端。

    怎样理解 HTML 语义化

    • 语义化HTML是一种编写HTML的方式,是指根据内容的结构化(内容语义化),选择合适的标签(代码语义化),便于开发者阅读和写出更优雅的代码的同时,让浏览器的爬虫和机器很好的解析
    • 优点
      • 为了在没有CSS的情况下,页面也能呈现出很好地内容结构、代码结构;
      • 用户体验:例如title、alt用于解释名词或解释图片信息、label标签的活用;
      • 有利于SEO(Search Engine Optimization),即搜索引擎优化:和搜索引擎建立良好沟通,有助于爬虫抓取更多的有效信息:爬虫依赖于标签来确定上下文和各个关键字的权重;
      • 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以有意义的方式来渲染网页;
      • 便于团队开发和维护,语义化更具可读性,是下一步网页的重要动向,遵循W3C标准的团队都遵循这个标准,可以减少差异化。

     

    可达性:

    随着移动设备(例如例如手机和平板)的持续发展,设计者需要确保他们的站点在所有的设备中的浏览器正确运行。这能通过在CSS的样式列表中使用响应式的网页设计(responsive web design)。

    怎样理解内容与样式分离的原则

    • 对于内容、结构与表现相分离,最早是在软件开发架构理论中提出来的,XHTML的标签只用来定义文档的结构,所有涉及表现的东西通通剥离出来,把它放到一个单独的文件里,这个单独的文件就是CSS。
    • 运用
      • 写HTML的时候先不管样式,重点放在HTML的结构和语义化上,让HTML能体现页面结构或者内容。然后通过CSS进行样式设置减少HTML和CSS契合度(即内容和样式分离)
      • 写JS的时候,尽量不要用JS去直接操作样式,而是通过给元素添加删除class来控制样式变化(即行为分离)
      • HTML内不允许出现属性样式,尽量不要出现行内样式
    • 优点
      1. 数据的多样显示。通过不同的样式表适应不同的设备,做到内容与设备无关;
      2. 保持整个站点的视觉一致性变得非常简单,修改样式表就可以轻松改版;
      3. 由于结构清晰,数据的集成、更新和处理更加方便灵活;
      4. 更有意义的搜索。

    归纳、总结、提炼能力是我们进步的发动机,这种能力是可以有意识地培养的,拉卡拉电子支付公司董事长兼总裁孙陶然提到:在拉卡拉我们要求用三条说清楚任何问题就是一种能力训练,任何问题如果不能用三条说清楚说明你还没想透。

    性能:

    性能指标主要关注加载时间,使用HTML,CSS以及JS来确保站点快速打开。

    常见的 meta 标签

    • 元数据是(MetaData)是数据的的数据信息
    • <meta>标签提供了HTML文档的元数据。元数据不会显示在页面上,但是对于机器是可读的。它可用于浏览器(如何显示内容或重新加载页面),搜索引擎(关键词),或其他 web 服务。
    • 属性新葡亰496net:培养和练习2009年的网页设计行业的这多少个事,你询问多少。:
    属性 说明
    charset UTF-8(Unicode 字符编码)、ISO-8859-1(拉丁字母表的字符编码) 规定HTML文档的字符编码。文档的编码一定要与文件本身的编码保持一致,否则会出现乱码,推荐使用UTF-8编码(charset属性可以通过任意元素上的lang属性来重写)
    context text 定义与 http-equiv 或 name 属性相关的元信息
    http-equiv content-type(规定文档的字符编码)、default-style(规定要使用的预定义的样式表)、refresh(定义文档自动刷新的时间间隔)、expires(指定网页在缓存中的过期时间)、set-cookie 把 content 属性关联到 HTTP 头部
    name application-name(规定页面所代表的 Web 应用程序的名称)、author(规定文档的作者的名字)、description(规定页面的描述。搜索引擎会把这个描述显示在搜索结果中)、generator(规定用于生成文档的一个软件包(不用于手写页面))、keywords(规定一个逗号分隔的关键词列表 - 相关的网页(告诉搜索引擎页面是与什么相关的))、revised、others 把 content 属性关联到一个名称
    • 注意:
      • <meta>标签通常位于<head>区域内
      • 元数据通常以 名称/值 对出现
      • 如果没有提供name属性,那么名称/值对中的名称会采用http-equiv属性的值

     

    SEO 优化

    • 页面关键词,每个网页应具有描述该网页内容的一组唯一的关键字。使用人们可能会搜索,并准确描述网页上所提供信息的描述性和代表性关键字及短语。标记内容太短,则搜索引擎可能不会认为这些内容相关。另外标记不应超过 874 个字符
    <meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript" />
    
    • 页面描述,每个网页都应有一个不超过 150 个字符且能准确反映网页内容的描述标签
    <meta name="description" content="Free Web tutorials on HTML and CSS" />
    
    • 搜索引擎索引方式,robotterms是一组使用逗号,分割的值,通常有如下几种取值:none,noindex,nofollow,all,index 和 follow。确保正确使用 nofollow 和 noindex 属性值。
    <meta name="robots" content="index, follow" />
    
    <!-- 
    all:文件将被检索,且页面上的链接可以被查询;
    none:文件将不被检索,且页面上的链接不可以被查询;
    index:文件将被检索; follow:页面上的链接可以被查询;
    noindex:文件将不被检索; nofollow:页面上的链接不可以被查询。
    -->
    
    <meta name="google" content="index,follow" />
    <meta name="googlebot" content="index,follow" />
    <meta name="verify" content="index,follow" />
    
    • 页面重定向和刷新:content 内的数字代表时间(秒),即多少时间后刷新。如果加 url,则会重定向到指定网页(搜索引擎能够自动检测,也很容易被引擎视作误导而受到惩罚)。
    <!-- 定时跳转(让网页多少秒刷新,或跳转到其他网页) -->
    <meta http-equiv="refresh" content="5" />
    <meta http-equiv="refresh" content="5; url=http://www.baidu.com" />
    
    • 其它
    <!-- 作者、版权 -->
    <meta name="author" content="littlematch" />
    <meta name="copyright" content="" />
    

    在这里,我争取用最根本的语言向大家分别说明HTML,CSS,XML,JS到底是什么,有什么用。然后我们再来看把他们组合起来是什么,有什么用。当然如果你对HTML,CSS,XML,JS有足够了解,可以直接跳过,看文章的后半部分,那里才是本文核心所在。

    移动设备

    • viewport:能优化移动浏览器的显示。如果不是响应式网站,不要使用 initial-scale 或者禁用缩放。大部分4.7-5寸设备的 viewport 宽设为360px;5.5寸设备设为400px;iphone6设为375px;ipone6 plus设为414px。
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- 
    `width=device-width` 会导致 iPhone 5 添加到主屏后以 WebApp 全屏模式打开页面时出现黑边
    width:宽度(数值 / device-width)(范围从 200 到 10,000,默认为980 像素)
    height:高度(数值 / device-height)(范围从 223  到 10,000)
    initial-scale:初始的缩放比例 (范围从 >0 到 10)
    minimum-scale:允许用户缩放到的最小比例
    maximum-scale:允许用户缩放到的最大比例
    user-scalable:用户是否可以手动缩 (no,yes)
    minimal-ui:可以在页面加载时最小化上下状态栏。(已弃用)
    -->
    
    • 注意:很多人使用 initial-scale=1 到非响应式网站上,这会让网站以100%宽度渲染,用户需要手动移动页面或者缩放。
      如果和 initial-scale=1 同时使用 user-scalable=no 或 maximum-scale=1,则用户将不能放大/缩小网页来看到全部的内容。
    // WebApp全屏模式:伪装app,离线应用
    <meta name="apple-mobile-web-app-capable" content="yes" /><!-- 启用 WebApp 全屏模式 -->
    
    // 隐藏状态栏/设置状态栏颜色:只有在开启WebApp全屏模式时才生效。content的值为 default | black | black-translucent 。
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
    
    // 添加到主屏后的标题
    <meta name="apple-mobile-web-app-title" content="标题" />
    
    // 忽略数字自动识别为电话号码
    <meta content="telephone=no" name="format-detection" />
    
    // 忽略识别邮箱
    <meta content="email=no" name="format-detection" />
    
    // 添加智能 App 广告条 Smart App Banner:告诉浏览器这个网站对应的app,并在页面上显示下载 banner
    <meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL" />
    
    • 其它
    <!-- 针对手持设备优化,主要是针对一些老的不识别 viewport 的浏览器,比如黑莓 -->
    <meta name="HandheldFriendly" content="true">
    <!-- 微软的老式浏览器 -->
    meta name="MobileOptimized" content="320">
    <!-- uc强制竖屏 -->
    <meta name="screen-orientation" content="portrait">
    <!-- QQ强制竖屏 -->
    <meta name="x5-orientation" content="portrait">
    <!-- UC强制全屏 -->
    <meta name="full-screen" content="yes">
    <!-- QQ强制全屏 -->
    <meta name="x5-fullscreen" content="true">
    <!-- UC应用模式 -->
    <meta name="browsermode" content="application">
    <!-- QQ应用模式 -->
    <meta name="x5-page-mode" content="app">
    <!-- windows phone 点击无高光 -->
    <meta name="msapplication-tap-highlight" content="no">
    

     

    网页相关

    • 声明编码
    <meta charset="utf-8">  
    
    • 优先使用 IE 最新版本和 Chrome
    <!-- 强制浏览器按照特定的版本标准进行渲染。但不支持IE7及以下版本。如果是IE浏览器就用最新的IE渲染,如果是双核浏览器就用Chrome内核 -->
    <meta http-equiv='X-UA-Compatible' content='IE=edge, chrome=1' />
    
    <meta http-equiv="X-UA-Compatible" content="IE=6" ><!-- 使用IE6 -->
    <meta http-equiv="X-UA-Compatible" content="IE=7" ><!-- 使用IE7 -->
    <meta http-equiv="X-UA-Compatible" content="IE=8" ><!-- 使用IE8 -->
    
    • 浏览器内核控制:国内浏览器很多都是双内核(webkit 和 Trident),webkit 内核高速浏览,IE内核兼容网页和旧版网站。而添加 meta 标签的网站可以控制浏览器选择何种内核渲染。
      • 国内双核浏览器默认内核模式如下:1. 搜狗高速浏览器、QQ浏览器:IE内核(兼容模式)2. 360极速浏览器、遨游浏览器:Webkit内核(极速模式)
    <meta name="renderer" content="webkit|ie-comp|ie-stand">
    
    • 禁止浏览器从本地计算机的缓存中访问页面内容:这样设定,访问者将无法脱机浏览。
    <meta http-equiv="Pragma" content="no-cache">
    
    • Windows 8
    <meta name="msapplication-TileColor" content="#000"/> <!-- Windows 8 磁贴颜色 -->
    <meta name="msapplication-TileImage" content="icon.png"/> <!-- Windows 8 磁贴图标 -->
    
    • 站点适配:主要用于PC-手机页的对应关系
    <meta name="mobile-agent"content="format=[wml|xhtml|html5]; url=url">
    <!-- [wml|xhtml|html5] 根据手机页的协议语言,选择其中一种;url="url" 后者代表当前PC页所对应的手机页URL,两者必须是一一对应关系。 -->
    
    • 转码申明:用百度打开网页可能会对其进行转码(比如贴广告),避免转码可添加如下 meta
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    
    • 其它:
    <!-- 期限(指定网页在缓存中的过期时间) -->
    <meta http-equiv="Expires" Content="0" />
    <meta http-equiv="Expires" Content="Sat Nov 28 2016 21:19:15 GMT 0800" /> 
    
    <!-- cookie -->
    <meta http-equiv="Set-Cookie" Content="cookievalue=xxx; expires=Sat Nov 28 2015 21:19:15 GMT 0800; path=/" />
    

     

    文档声明的作用?严格模式和混杂模式指什么?<!DOCTYPE html> 的作用?

    • 声明叫做文件类型定义(DTD),声明的作用为了告诉浏览器该文件的类型。让浏览器解析器知道应该用哪个规范来解析文档。声明必须在 HTML 文档的第一行,这并不是一个 HTML 标签
      • <!DOCTYPE>标签没有结束标签
      • <!DOCTYPE>声明不区分大小写
    • 严格模式(Strict):又称标准模式,是指浏览器按照 W3C 标准解析代码。
      混杂模式(Transitional):又称怪异模式或兼容模式,是指浏览器用自己的方式解析代码
    • <!DOCTYPE html>的作用就是让浏览器进入标准模式,使用最新的 HTML5标准来解析渲染页面;如果不写,浏览器就会进入混杂模式,而这是我们要避免的
    • 常用的 DOCTYPE 声明:
    HTML 5
      <!DOCTYPE html>
    
    HTML 4.01 Strict
      该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)
    
    HTML 4.01 Transitional
      该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。
    
    HTML 4.01 Frameset
      该 DTD 等同于 HTML 4.01 Transitional,但允许框架集内容。
    
    XHTML 1.0 Strict
      该 DTD 包含所有 HTML 元素和属性,但不包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 
    XML 来编写标记。
    
    XHTML 1.0 Transitional
      该 DTD 包含所有 HTML 元素和属性,包括展示性的和弃用的元素(比如 font)。不允许框架集(Framesets)。必须以格式正确的 
    XML 来编写标记。
    
    XHTML 1.0 Frameset
      该 DTD 等同于 XHTML 1.0 Transitional,但允许框架集内容。
    
    XHTML 1.1
      该 DTD 等同于 XHTML 1.0 Strict,但允许添加模型(例如提供对东亚语系的 ruby 支持)。
    

     

    浏览器乱码的原因是什么?如何解决

    HTML超文本标记语言 (Hyper Text Markup Language) ,是用来描述网页的一种标记语言。

    乱码产生的原因

    • 乱码产生的根本原因是文件保存的编码格式和 meta 中指定的解码格式不匹配导致的
    • 没有指定 meta 的 charset
    • 注意:
      • 只有非英文和阿拉伯数字以外的字符才会出现乱码
        • 纯粹的英文不会出现乱码问题,即使编码方式和解码方式不一致。因为 utf-8、gbk 对英文都是采用1个字节的编码方式,并且使用了相同的码字
      • 不同编码集中字符占用的 byte 值不一样
    • 常见编码集:UTF-8、UTF-16、GBK、Unicode

     

    如何解决?

    • 指定正确的 charset 值。在文件保存的时候,自己要清楚使用哪种编码方式保存,并且规定 HTML 文档的字符编码。
      • 比如文件保存为 utf-8 格式,那么就要在<head>里添加<meta charset="utf-8">,告诉浏览器打开此页面时直接使用 utf-8 进行解码。如果文件保存为 gbk 格式,则添加 <meta charset="gbk">

    网页文件本身是一种文本文件,通过在文本文件中添加标记,可以告诉浏览器如何显示其中的内容(如:文字如何处理,画面如何安排,图片如何显示等)。

    常见的浏览器与内核

     

    常见的浏览器

    • IE、Mozilla Firefox、Google Chrome、Opera、360、QQ、搜狗、猎豹、遨游等

    HTML之所以称为超文本标记语言,是因为文本中包含了所谓“超链接”点。超文本(Hypertext)是用超链接的方法,将各种不同空间的文字信息组织在一起的网状文本。

    浏览器内核

     

    浏览器内核是什么?

    浏览器内核可以分成两部分:渲染引擎(layout engineer 或者 Rendering Engine)和 JS 引擎。它负责取得网页的内容(HTML、XML、图像等等)、整理信息(例如加入CSS等),以及计算网页的显示方式,然后会输出至显示器或打印机。浏览器内核的不同对于网页的语法解释会有不同,所以渲染的效果也不相同。所有网页浏览器、电子邮件客户端以及其它需要编辑、显示网络内容的应用程序都需要内核。JS 引擎则是解析 Javascript 语言,执行 Javascript 语言来实现网页的动态效果。最开始渲染引擎和 JS 引擎没有并没有区分的很明确,后来 JS 引擎越来越独立,内核就倾向于只指渲染引擎

    浏览器内核主要指的是浏览器的渲染引擎,2013 年以前,代表有 Trident(IE),Gecko(Firefox),Webkit(Safari Chrome 等)以及 Presto(Opera)。2013 年,谷歌开始研发 Blink 引擎,Chrome 28 以后开始使用,而 Opera 则放弃了自主研发的 Presto 引擎,投入谷歌怀抱,和谷歌一起研发 Blink 引擎,国内各种 Chrome系的浏览器(360、UC、QQ、2345 等等)也纷纷放弃 Webkit,投入 Blink 的怀抱。

     概括,HTML就是整合网页结构和内容显示的一种语言。

    Trident

    Trident:IE浏览器使用的内核,该内核在 1997 年的 IE4 种首次被采用,是微软在 Mosaic(“马赛克”,这是人类历史上第一个浏览器,从此网页可以在图形界面的窗口浏览) 代码的基础之上修改而来的,并沿用到 IE11,也被普遍称作“IE内核”

    Trident 实际上是一款开放的内核,其接口内核设计的相当成熟,因此才有许多采用 IE 内核而非 IE 的浏览器(壳浏览器)涌现。由于 IE 本身的 “垄断性”,而使得 Trident 内核的长期一家独大。国内很多的双核浏览器的其中一核便是 Trident,美其名曰 “兼容模式”。

        <html>  
            <head>  
                <title>HTML</title>  
            </head>  
            <body>  
                <p id="num1">Hello World! I'm HTML</p>  
            </body>  
        </html>  
    

    Gecko

    Gecko(Firefox 内核):Netscape6 开始采用的内核,后来的 Mozilla FireFox(火狐浏览器)也采用了该内核,Gecko 的特点是代码完全公开,因此,其可开发程度很高,全世界的程序员都可以为其编写代码,增加功能。因为这是个开源内核,因此受到许多人的青睐,Gecko 内核的浏览器也很多,这也是 Gecko 内核虽然年轻但市场占有率能够迅速提高的重要原因

    浏览器按顺序阅读网页文件,然后根据标记符解释和显示其标记的内容

    Webkit

    一提到 Webkit,首先想到的便是 Chrome,可以说,Chrome 让 Webkit 内核深入人心,殊不知,Webkit 的鼻祖其实是 Safari。现在很多人错误地把 Webkit 叫做 Chrome 内核(即使 Chrome 内核已经是 Blink 了)。

    WebKit 前身是 KDE 小组的 KHTML 引擎,可以说 WebKit 是 KHTML 的一个开源的分支。当年苹果在比较了 Gecko 和 KHTML 后,选择了后者来做引擎开发,是因为 KHTML 拥有清晰的源码结构和极快的渲染速度。

    Webkit 内核可以说是以硬件盈利为主的苹果公司给软件行业的最大贡献之一。随后,2008 年谷歌公司发布 Chrome 浏览器,采用的 Chromium 内核便 fork 了 Webkit。

    这段内容在浏览器上显示的结果是:HelloWorld! I'm HTML

    Chromeium/Bink

    2008 年,谷歌公司发布了 Chrome 浏览器,浏览器使用的内核被命名为 Chromium。

    谷歌公司还研发了自己的 Javascript 引擎,V8,极大地提高了 Javascript 的运算速度。

    Chromium 问世后,带动了国产浏览器行业的发展。一些基于 Chromium 的单核,双核浏览器如雨后春笋般拔地而起,例如 搜狗、360、QQ浏览器等等,无一不是套着不同的外壳用着相同的内核。

    2013年开始,Google 在 WebKit 代码的基础上研发更加快速和简约的渲染引擎,并逐步脱离 WebKit 的影响,创造一个完全独立的 Blink 引擎。Blink 引擎问世后,国产各种 Chrome 系的浏览器也纷纷投入 Blink 的怀抱,可以在浏览器地址栏输入 chrome://version 进行查看

    我们看<p>标签上有一个id,这是这个<p>标签的唯一标识,方便别人找到它,对它进行操作。

    Presto

    Presto 是挪威产浏览器 Opera 的 “前任” 内核,为何说是 “前任”,因为最新的 Opera 浏览器早已将之抛弃从而投入到了谷歌大本营。

    Opera 的一个里程碑作品是 Opera7.0,因为它使用了 Opera Software 自主开发的 Presto 渲染引擎,取代了旧版 Opera 4 至 6 版本使用的 Elektra 排版引擎。该款引擎的特点就是渲染速度的优化达到了极致,然而代价是牺牲了网页的兼容性。

    Presto 与开源的 WebKit 和经过谷歌加持的 Chromium 系列相比毫无推广上的优势,这是 Opera 转投 WebKit 的主要原因,并且使用 WebKit 内核的 Opera 浏览器可以兼容谷歌 Chrome 浏览器海量的插件资源。但是换内核的代价对于 Opera 来说过于惨痛。使用谷歌的 WebKit 内核之后,原本快速,轻量化,稳定的 Opera 浏览器变得异常的卡顿,而且表现不稳定,造成了众多的用户流失。

     

    KHTML

    KHTML,是HTML网页排版引擎之一,由KDE所开发。KDE系统自KDE2版起,在档案及网页浏览器使用了KHTML引擎。该引擎以C 编程语言所写,并以LGPL授权,支援大多数网页浏览标准。由于微软的Internet Explorer的占有率相当高,不少以FrontPage制作的网页均包含只有IE才能读取的非标准语法,为了使KHTML引擎可呈现的网页达到最多,部分IE专属的语法也一并支援。KHTML拥有速度快捷的优点,但对错误语法的容忍度则比Mozilla产品所使用的Gecko引擎小

    CSS 层叠样式表单(Cascading StyleSheet)。是将样式信息与网页内容分离的一种标记性语言 。作为网站开发者,你能够为每个HTML元素定义样式,并将之应用于你希望的任意多的页面中。如需进行全局的更新,只需简单地改变样式,然后网站中的所有元素均会自动地更新。这样,即设计人员能够将更多的时间用在设计方面,而不是费力克服HTML的限制。说白了,CSS就是设置网页上HTML元素属性的语言。

    移动端

    移动端的浏览器内核主要说的是系统内置浏览器的内核。

    目前移动设备浏览器上常用的内核有 Webkit,Blink,Trident,Gecko 等。其中 iPhone 和 iPad 等苹果 iOS 平台主要是 WebKit。Android 4.4 之前的 Android 系统浏览器内核是 WebKit,Android4.4 系统浏览器切换到了Chromium,内核是 Webkit 的分支 Blink。Windows Phone 8 系统浏览器内核是 Trident。

     

    参考

    • HTML语义化
    • HTML中meta标签用法详解
    • HTML <!DOCTYPE> 声明
    • Doctype是什么?如何触发严格模式与混杂模式模式?区分它们
    • 关于浏览器乱码
    • 常见的浏览器有哪些?有哪些浏览器内核?
    • 主流浏览器内核介绍(前端开发值得了解的浏览器内核历史)

    CSS代码:

        #hello{  
               color:blue;  
        }
    

     

    当把这段CSS代码应用于HTML中,它会找到id为“hello”的HTML标签,将其中的内容以蓝色显示出来;具体的插入HTML的方法这里不再赘述(说一句,只说明是什么,有什么用的问题,不关注技术细节,技术细节网上很好找)

     

    Javascript,首先说明JavaScript和Java无关,JavaScript 是属于网络的脚本语言!那么为什么名字如此相似?这是典型的市场营销方面的成功,它的推广成功,也是借了Java的东风。当微软开始意识到 JavaScript在Web开发人员中流行起来时,微软还是一贯风格,建立了自己的脚本语言,JScript。

    JavaScript 是一种基于对象(Object)和事件驱动(EventDriven)并具有安全性能的脚本语言。使用它的目的是与HTML超文本标记语言、Java脚本语言(Java小程序)一起实现在一个Web页面中链接多个对象,与Web客户交互作用。例如可以设置鼠标悬停效果,在客户端验证表单,创建定制的 HTML页面,显示警告框,设置cookie等等。

    网页中所有的对数据进行判断、操作以及向浏览者反馈信息的本地代码实现部分均是javascript(当然也有其他的),这样既可以使网页更具交互性,给用户提供更令人兴奋的体验,同时减轻了服务器负担。

     

    JS的代码如下:

     

        function jsHello(){  
               alert('Hello World!');  
    
        }  
    

     

    当把以上代码应用于HTML代码,它会在你的HTML载入时,弹出一个内容为“HelloWorld!”的对话框。同样,它是通过嵌入或调入在标准的HTML语言中实现的,至于如何嵌入或调入不再赘述,理由上面提到了。

     

     

     

    Xml 可扩展标记语言 (Extensible MarkupLanguage),是一套定义语义标记的规则,这些标记将文档分成许多部件并对这些部件加以标识。它也是元标记语言,即定义了用于定义其他与特定领域有关的、语义的、结构化的标记语言的句法语言。你可以把XML理解为一种数据库,例如rss就是xml的一种变体。

     

     

     

    XML代码如下:

    <Hello>  
    <bcd>China</bcd>  
    <bcd>USA</bcd>  
    <bcd>UK</bcd>  
    </Hello>
    

    XML的起因是,用户受到SGML(后面再说)复杂性的挫伤和HTML的不充分。相对HTML来说,XML更追求严谨性,如果说你在HTML代码中标签比较混乱,如未关闭等,或许浏览器会忽略这些错误;但同样的事情发生在XML中会给你带来大麻烦。

     

    铺垫终于完了,在进入正题之前,建议大家对比着图来理解后边的内容,废话不多说,开始进入正题。

    新葡亰496net 15

    这里的DOM指的是HTMLDOM。HTML DOM是W3C的标准,同时它也是HTML的文档对象模型的缩写(the Document Object Model forHTML)。HTMLDOM定义了用于HTML的一系列标准的对象,以及访问和处理HTML文档的标准方法。通过DOM,可以访问所有的HTML元素,连同它们所包含的文本和属性。其中的内容可以修改和删除,同时也可以创建新的元素。HTMLDOM独立于平台和编程语言。它可被任何编程语言诸如 Java、JavaScript和VBScript所使用。HTMLDOM就是HTML语言对外界开通的接口,以便其他语言能够访问或修改HTML内部的元素。

     

    当js需要对html元素进行操作时,DOM是一个很必要的对象。

    你便可以通过利用DOM对象构造如下代码并插入到HTML代码中的任何位置来实现

        <script>  
        window.onload=function hello(){  
              document.getElementById("hello").innerHTML="Hello China!";  
        }  
        </script>  
    

    新葡亰496net 16

    当用CSS去修饰HTML中的元素,这一过程可以称为声明HTML元素样式的过程。

     

    新葡亰496net 17

     

     

    SGML 标准通用标记语言(standardgeneralized markup language)。由于SGML的复杂,导致难以普及。SGML有非常强大的适应性,也正是因为同样的原因,导致在小型的应用中难以普及。HTML 和 XML同样衍生于SGML:XML可以被认为是SGML的一个子集,而HTML是SGML的一个应用。XML的产生就是为了简化SGML,以便用于更加通用的目的。比如语义Web.它已经应用于大量的场合,比较著名的有XHTML、RSS 、XML-RPC 和SOAP 。

     

    XHTML 是可扩展超文本标识语言(TheExtensible HyperText MarkupLanguage)。HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言,看起来与HTML有些相象,只有一些小的但重要的区别,XHTML就是一个扮演着类似HTML的角色的XML,所以,本质上说,XHTML是一个过渡技术,结合了部分XML的强大功能及大多数HTML的简单特性。

    简单的说,XHTML比HTML要严谨些,但又没像XML那么严重——譬如所有的XHTML标签以及属性必须要小写,属性性必须要加双引号(当然如今的浏览器不管是IE还是FF,对HTML和XHTML采取兼容措施,这也是XSS产生的根本原因),而且也可以像XML一样自定义部分标签,因此有了极大的灵活性。

     

    而且进入了XHTML时代,大家倡导的是CSS DIV,这也是web2.0的基础。 

     

    DHTML 只是一种制作网页的概念,实际上没有一个组织或机构推出过所谓的DHTML标准或技术规范之类的。DHTML不是一种技术、标准或规范,DHTML只是一种将目前已有的网页技术、语言标准整和运用,制作出能在下载后仍然能实时变换页面元素效果的网页的设计概念。DHTML就是动态的 html,Dynamic HTML。传统的html页面是静态的,Dhtml就是在html页面上加入了javascript脚本,使其能根据用户的动作作出一定的响应,如鼠标移动到图片上,图片改变颜色,移动到导航栏,弹出一个动态菜单等等。

    一般如:<img src="pic" onmouseover="it is a picture !">

    新葡亰496net 18

     

    Expression是微软为了使样式表能够在修饰HTML样式的同时执行javascript脚本而在IE浏览器中增加的一个功能,这样你可以做譬如:图片的自适应宽度,表格的隔行换色等等。

    新葡亰496net,如:img{max-width:500px;width:expression(document.body.clientWidth> 200 ? "200px": "auto");}

     

    新葡亰496net 19

     

     

    XMLHTTP最通用的定义为:XmlHttp是一套可以在Javascript、VbScript、Jscript等脚本语言中通过http协议传送或从接收XML及其他数据的一套API。XmlHttp最大的用处是可以更新网页的部分内容而不需要刷新整个页面。

    来自MSDN的解释:XmlHttp提供客户端同http服务器通讯的协议。客户端可以通过XmlHttp对象向http服务器发送请求并使用微软XML文档对象模型Microsoft® XML Document Object Model (DOM)处理回应。

    现在的绝对多数浏览器都增加了对XmlHttp的支持,IE中使用ActiveXObject方式创建XmlHttp对象,其他浏览器如:Firefox、Opera等通过window.XMLHttpRequest来创建xmlhttp对象。

     

    一个简单的定义IE的xmlhttp的对象及应用的实例如下:

        var XmlHttp=new ActiveXObject("Microsoft.XMLhttp");  
        XmlHttp.Open("get","url",true);  
        XmlHttp.send(null);  
        XmlHttp.onreadystatechange=function ServerProcess(){  
            if (XmlHttp.readystate==4 || XmlHttp.readystate=='complete')  
            {  
                   alert(XmlHttp.responseText);  
            }  
         }  
    

    新葡亰496net 20

     

     

    XSLT(eXtensibleStylesheet LanguageTransformation)最早设计XSLT的用意是帮助XML文档(document)转换为其它文档。但是随着发展,XSLT已不仅仅用于将XML转换为HTML或其它文本格式,更全面的定义应该是:XSLT是一种用来转换XML文档结构的语言。

     

    XSL- FO:XSL在转换XML文档时分为明显的两个过程,第一转换文档结构;其次将文档格式化输出。这两步可以分离开来并单独处理,因此XSL在发展过程中逐渐分裂为XSLT(结构转换)和XSL-FO(formattingobjects)(格式化输出)两种分支语言,其中XSL-FO的作用就类似CSS在 HTML中的作用。

    新葡亰496net 21

     

     

    AJAX:异步JavaScript和XML(AsynchronousJavaScript and XML)

    最后一个东东,它算得上是web2.0思想的心。AJAX==CSS HTML JS XML DOM XSLT XMLHTTP。是指一种创建交互式网页应用的网页开发技术。AJAX不是一种单一的新技术,而是有机地利用了一系列相关的技术。

     

    在 2005年,Google 通过其 Google Suggest 使 AJAX 变得流行起来。

    GoogleSuggest 使用 AJAX 创造出动态性极强的 web 界面:当您在谷歌的搜索框输入关键字时,JavaScript会把这些字符发送到服务器,然后服务器会返回一个搜索建议的列表。

     

    在AJAX中,xmlhttp用来在不改变页面的情况下传输数据,其中传输的数据即是XML,然后通过XSLT将其格式化,利用js通过dom对象将其显示到HTML中,同时利用CSS确定数据的显示及位置。

     

    这项技术在网络上的应用无处不在,如你的微博,你的邮箱,你的QQ空间,再如搜索引擎,电子商务平台,网络地图等等。

     

    总结:终于完了,本文主要探讨了Web开发技术之间的关系,以及他们组合起来到底有什么用的问题。这篇文章总结得挺不容易的,期间参考了不少别人的东西,包括:W3CSchool在线教程,《BeginningXML With DOM and Ajax》,《Javascript基础教程》,《css2.0中文手册》,还有一些大牛的博客,这里就不一一罗列了。希望对挣扎在Web开发学习前线的朋友有所帮助。如果有什么不够准确的地方,请大家斧正。

    本文由新葡亰496net发布于新葡亰官网,转载请注明出处:新葡亰496net:培养和练习2009年的网页设计行业的

    关键词: