认识新一代南充市嘉陵区网站建设HTML5对网页设计的影响

  • 时间:3个月前
  • 浏览:24次
南充市嘉陵区网站建设 南充市嘉陵区SEO优化排名

  了解早期网页设计的HTML架构


  由W3C负责制定的HTML是用来编写网页设计的标记语言,而目前我们所使用的版本为4.01。如果开启网页的原始档查看,会发现到很多类似<html>这样由<及>符号包含文字的卷标,这就是HTML语言。其实说穿了,网页就是一堆卷标的组合。


  HTML卷标通常都有起始卷标与结束卷标,例如<html>与</html>,而要构成一个网页架构,最基本的标签有<html>、<head>、<title>与<body>。<html>及</html>一定是放在程序的第一行与最后一行,告诉浏览器这是一份HTML文件。而<head>则是档头宣告,定义这一个网页的属性,例如使用何种编码方式,里面的内容除了<title>外,不会出现在网页上。title卷标被包含在head内,主要是显示页标题,里面的文字会出现在网页最上方的标题栏。而<body>标签的内容则是要呈现在网页设计上的信息。


  由于HTML4.01只能传达文字或图片等的静态信息,于是为了让网页设计能有动态的效果,开始出现了像JavaScript语言这样的技术,达成与用户互动的目标,后来还出现像DHTML、XHTML等标准,这些规格的出现都是为了加强与使用者的互动。不过这些技术也都是以HTML4.01为核心所衍生出来的。随着宽带的普及,网络应用愈来愈广,例如在线观看影音、网页游戏等。但目前我们所使用的4.01版本已经无法应付这些技术,于是才会出现如Flash、Silverlight等插件,实现这些功能。


  不过由于这些插件都是由不同公司所开发的,这之中牵涉到专利的问题,因此,开始有浏览器业者认为有制定新标准的必要。这些浏览器业者组成WHATWG团体,研究新的HTML标准,后来WHATWG与W3C合并,由W3C继续制定的工作。


  由W3C所制定的新一代网页标准HTML5,虽然目前还在草案阶段,预计在2012年3月才会正式发表,但由于许多知名浏览器如IE、Chrome、Firefox都已开始支持,而iPhone及Android等智能型手机更是早就支持了此规格。另外Amazon及Google等公司,也都使用HTML5开发WebApp,例如GoogleDocs、KindleCloudReader等。


  网络上也有许多人利用HTML5开发出许多有趣网页设计的应用程序,像是在线小画家、文字云等,同时由于HTML5具有跨平台的特性,未来开发人员只需写一套应用程序,不再需要针对不同平台开发相对应的程序代码,进而减少开发时间及成本,因此HTML5成为了目前较热门的话题之一。


  为减少插件为目标而诞生的HTML新标准


  以往要在网页上观赏影音或者玩网页游戏,必须要安装插件才能做到,而HTML5的制定则是为了要减少浏览器对插件的需求,因为如此,HTML5新增了许多可以用来制作网页应用程序的API,同时也增加了canvas标签,以达成能在网页设计上绘图的功能,要使用这些功能,必须搭配JavaScript语言使用。另外网页设计的美化,例如文字大小与颜色等,在以前虽然也可以使用<font>等标签做出来,但这样势必会让整分文件南充市顺庆区SEO优化排名 ">南充市顺庆区SEO优化排名 变得更复杂难懂。因此将美化的工作抽出来,交给CSS负责。而HTML5也废除了<font>及<center>标签。因此,广义来说,HTML5包含了HTML、JavaScript、CSS等三个部分。


  在HTML5中主要新增的功能有──首先是使用语意卷标来加强文件的结构化、接着是新增<video>及<audio>卷标强化对声音及影像等多媒体的播放功能、以及增加可以自由描绘图形的<canvas>卷标、最后则是提供多种有助于网页应用程序开发的API。如果要制作HTML5网页,只要在档案内容的第一行写入<!DOCTYPEhtml>,意思是宣告这文件为HTML5文件,浏览器只要读到这一行,就会将此文件视为HTML5了。


  语意标签让开发人员在维护时,更容易理解网页设计的内容


  以前在制作网页时,我们常会利用<div>或<table>标签来对文件进行排版,在HTML5中则使用了具有意义的语意卷标,例如<header>卷标是用来表示网页的标题或主选单。这里的<header>跟<head>虽然字面上看起来很像,但这二者代表的意思是不一样的,也就是说二者之间并没什么关系。


  使用语意标签制作网页文件,好处有很多,对开发人员而言,只要看到标签就能了解这部分是标题、内文还是选单;而搜索引擎在检索寻网页内容时,可以更精确地找到所要的数据;要构成一个具有完整结构化的HTML5网页,主要有<header>、<nav>、<section>、<article>、<aside>、<footer>这6个语意标签。


  <header>标签通常置于文件的顶部,它可以放在网站或文章的开头当作标题使用,主要的功能是用来放置网站的介绍信息、主选单及网站Logo。在这之中也能使用其它HTML标签,例如,当作标题时,我们可以使用<h1>到<h6>标签,也能使用<img>放置图片,而使用<form>卷标时,则是为了插入主选单或搜寻窗口。


  <nav>标签则是用来放置网站的选单或连结等,它可以放在<header>或<footer>标签里,也可以独立使用。如果在网页中需一次使用多个<nav>时,只要另外指定不同ID即可,例如<navid=”link1”>。


  而<section>卷标的功能是定义文件的区段,将具有主题性的内容群组化,例如,我们可以将网页中依照选单、主文、连络信息,区分为3个区段。当使用<section>标签定义群组之后,我们也能在其中置入<section>形成一个巢状的section或者是置入<article>标签。


  <article>标签是用来标示本文中的主要内容,在一个<article>标签中,可以包含标题、主文等。而同一个网页中也可以有多个<article>标签。一般来说,部落格文章、论坛发文或网页内容等都可以包含在内。而<article>与<section>标签不同的地方在于,<article>所包含的通常是一段独立的文章,而<section>标签包含的是文件中的一个章节或段落。


  如果要置入本文之外的其他部分,则是使用<aside>标签,通常用于与主要内容相关的部分,例如补充说明等。而<footer>标签是用来标示制作者、著作权等信息,一般都是摆在文件的下方。


  其他新增的卷标功能


  在HTML5里新增的标签还有<figure>和<figcaption>,以前没有为网页中的图片加上解说文字的方法,但现在利用这二个标签就可以轻松做到,使用的方法如下:


  <figure>


  <imgsrc=https://www.yuntask.com/news/”档案位置”>


  <figcaption>图片解说</figcaption>


  </figure>


  在<figure>标签里,也可以放入多个<img>标签。如果要强调文件中某一段文字,可以在文字前后加上<mark></mark>。<mark>卷标主要的功能是透过CSS的设定,改变所标示文字的背景颜色或文字颜色,藉以强调该段文字。另外HTML5还提供了可以表示日期格式的<time>卷标,只要在<time>卷标里指定日期,就能在浏览器中辨识日期,而日期的格式为yyyy-mm-dd,例如2011-10-10。<address>标签则是用来标示网页制作者的名称或连络信息等,用<address>所标示的文字会呈现出斜体样式。


  支持影音播放,减少插件需求


  HTML5里另一个受瞩目的功能,就是新增了用来播放音讯的<audio>,以及影片的<video>标签。不过目前各家浏览器所支持的格式并不相同,那是因为HTML5的标准规格还未确定,等正式的标准订立之后,程序代码应该会变得更简洁。


  <audio>卷标的属性包含了用来指定音频档案位置的src属性,当开启网页时是否自动加载的preload属性,而controls属性则是指定是否显示控制面板,如果指定了,控制面板就会显示在画面上,此时使用者就可以藉由面板进行播放、暂停等动作。


  <audio>标签的用法大致如下:


  <audiosrc=https://www.yuntask.com/news/”档案位置”controls>


  未支持此卷标时显示的内容


  </audio>


  要注意的是由于各家浏览器支持的音乐格式都不同,例如,Firefox并不支持MP3,而是支持.OGG格式的音频档案,所以在使用<audio>标签时,必须考虑到这点,因此可以改成使用<sourcesrc>标签的方法。


  例如要让Firefox也能播放音乐,可以将程序代码改成:


  <audiocontrols>


  <sourcesrc=https://www.yuntask.com/news/”文件名.mp3>


  <sourcesrc=https://www.yuntask.com/news/”文件名.ogg>


  未支持此卷标时显示的内容


  </audio>


  而<video>标签的用法大致与<audio>相同。


  在使用<video>插入影片时,需先指定影片的大小,例如<videowidth=”500”height=”400”>。同样的,由于各家的浏览器所支持的视讯译码器不太相同,因此在置入视讯时,也必须考虑到这点。


  目前各家浏览器所支持的视讯格式主要分为OGG(*.ogv)与MPEG4(*.mp4)二种。而在使用<sourcesrc>标签时,开发人员还必须指定文件类型(type),例如<sourcesrc=https://www.yuntask.com/news/”test.ogvtype=”video/ogg”>及<sourcesrc=https://www.yuntask.com/news/”test.mp4type=”video/mp4”>。


  canvas卷标功能,让网页设计也能绘出图形


  HTML5新增了具有绘图功能的<canvas>卷标,利用这项功能可以直接在网页上画出线条、图形及动画,甚至还能做出网页设计游戏。不过<canvas>标签并不能直接使用,而必须搭配JavaScript来操作。而且,目前<canvas>标签仅能画出2D图形。


  要使用canvas的功能,必须先配置<canvas>卷标,首先要指定ID名称,接着指定画布的大小,例如<canvasid=”draw”width=”500”height=”400”>,记得最后要加上</canvas>作为结尾。


  设定好画布之后,接着就可以使用JavaScript进行绘图。首先必须使用document.getElementById()方法来取得canvas对象,可以写成varcanvas=document.getElementById(draw),再使用canvas的getContext()方法取得绘图函数,例如varctx=canvas.getContext(2d);取得绘图方法之后,就要呼叫用来描绘的方法进行绘图。fillRect方法负责描绘矩形,fillStyle则是指定颜色。


  <canvas>卷标里唯一提供的图形只有矩形,如果要画三角形或圆形等其他图形,必须使用路径方法绘制。


  而使用路径绘制图形的方法有beginPath(开始绘制路径)、closePath(关闭路径)、stroke(绘制路径边框)、fill(将图形填色)。另外,moveTo(x,y)方法则是将绘制路径的起点移至(x,y)位置,若没有使用moveTo(),则路径起点默认是在(0,0)。lineTo(x,y)方法则是由目前端点到(x,y)画一直线。


  要绘制圆形或圆弧则是使用arc方法,我们可以写成arc(x,y,r,startAngle,endAngle,anticlockwise),意思是从(x,y)为起点画出半径(r)的圆形,其中的startAngle和endAngle参数是以角度标示圆形的起点及终点,而anticlockwise参数则是指定是否由逆时钟顺序来绘制,可以指定true(真)和false(假)。


  提供多种API开发网页设计应用程序


  HTML5为了让开发者能开发网页设计应用程序,提供了多种的API给开发者使用,例如应用程序快取(ApplicationCache)。


  一般来说,网页设计应用程序必须在网络联机的情况下才能使用,这种API的目的,则是为了让这些应用程序在脱机状态下也能使用。


  另一个值得介绍的API是WebSQLDatabase,则是当装置没有连上网络,可以利用此功能存取数据。


  如果要使用这些API,你必须对JavaScript有一定程度的理解,同时也要了解DOM(DocumentObjectModel)的相关知识才行。


  近期事情比较多,其实动狮网络一直想写这篇文章了,很多客户在找到我们之前,都已经建设好了网站,这很正常,因为SEO网站优化就是在网站建设的下游,只有在客户想做网络营销推广的时候,才发现在百度或谷歌搜索不到网站,通过自己的努力还是做不到或者就是不懂怎么做网络营销推广。


  每当看到没有融入SEO优化思想的网站时,动狮网络总是先要纠结会,网站建设不是小事,没有优化思想的的网站建设就像一个重病号,而我们就像医生,怎么通过SEO优化技术,把这个病号拯救出来,并培养它成为运动员,并最终登上奥运冠军领奖台。


  网站建设前一定要想清楚,网站仅仅是做为企业的品牌形象展示呢,还是要做为一种营销推广的渠道工具,营销型网站在建设前一定会考虑到后期的SEO优化工作,而没有营销思维的网站建设,只会堆砌大量的图片、Flash,加载很多的JS特效代码,虽然网站UI外观看起来很漂亮,但不实用,网站加载太多的富媒体或JS代码,造成网站速度打开迟缓,也增加了搜索引擎爬虫读取网页的困难,或者蜘蛛根本就读不出来任何有价值的信息。


  接受这样的重病号网站,动狮网络通常都要跟客户磨合半天,反复解释为什么要修改这些,增加那些,一般客户都非常理解,SEO网站优化是一项服务性的工作,本身就需要我们要有一颗真诚负责的心,才能做好每个细节,不能因为困难多而放弃。


  网站推广前,需要先对网站内部进行SEO优化,这个过程还需要网站建设公司的配合,因为涉及到网站程序或底层代码的修改和优化,只有一步步优化好细节工作,才能更有利于进行下一步的网络营销和网站推广工作,提高转化率和购买率,并最终提高销售额和获取利润,这是客户的最终目标,也是我们做为郑州SEO网站优化工作者的存在价值和使命。


  近期事情比较多,其实动狮网络一直想写这篇文章了,很多客户在找到我们之前,都已经建设好了网站,这很正常,因为SEO网站优化就是在网站建设的下游,只有在客户想做网络营销推广的时候,才发现在百度或谷歌搜索不到网站,通过自己的努力还是做不到或者就是不懂怎么做网络营销推广。


  每当看到没有融入SEO优化思想的网站时,动狮网络总是先要纠结会,网站建设不是小事,没有优化思想的的网站建设就像一个重病号,而我们就像医生,怎么通过SEO优化技术,把这个病号拯救出来,并培养它成为运动员,并最终登上奥运冠军领奖台。


  网站建设前一定要想清楚,网站仅仅是做为企业的品牌形象展示呢,还是要做为一种营销推广的渠道工具,营销型网站在建设前一定会考虑到后期的SEO优化工作,而没有营销思维的网站建设,只会堆砌大量的图片、Flash,加载很多的JS特效代码,虽然网站UI外观看起来很漂亮,但不实用,网站加载太多的富媒体或JS代码,造成网站速度打开迟缓,也增加了搜索引擎爬虫读取网页的困难,或者蜘蛛根本就读不出来任何有价值的信息。


  接受这样的重病号网站,动狮网络通常都要跟客户磨合半天,反复解释为什么要修改这些,增加那些,一般客户都非常理解,SEO网站优化是一项服务性的工作,本身就需要我们要有一颗真诚负责的心,才能做好每个细节,不能因为困难多而放弃。


  网站推广前,需要先对网站内部进行SEO优化,这个过程还需要网站建设公司的配合,因为涉及到网站程序或底层代码的修改和优化,只有一步步优化好细节工作,才能更有利于进行下一步的网络营销和网站推广工作,提高转化率和购买率,并最终提高销售额和获取利润,这是客户的最终目标,也是我们做为郑州SEO网站优化工作者的存在价值和使命。


  IE条件注释是一种特殊的网页设计注释,这种注释只有IE5.0及以上版本才能理解。比如普通的网页设计注释是:


  <!–This is a comment–>


  而只有IE可读的IE条件注释是:


  <!–[if IE]> <![endif]–>


  “非IE条件注释”:


  <!–[if !IE]>–> non-IE HTML Code <!–<![endif]–>


  “非特定版本IE条件注释”(很少用到):


  <!–[if ! lt IE 7]><![IGNORE[--><!--[IGNORE[]]–>Code for browsers that match the if condition<!–<![endif]–>


  简而言之,除了“Windows上的IE”之外的所有浏览器都会认为条件注释只是一段普通的网页设计注释。你不能在CSS代码中使用条件注释。IE 条件注释是很有用的对IE隐藏或者展现特定代码的方法,比起在CSS中用诡异的_/制造bug,利用IE条件注释来写CSS “hacks”是更合理的方法。通俗点,条件注释就是一些if判断,但这些判断不是在脚本里执行的,而是直接在html代码里执行的。


  1.条件注释的基本结构和HTML的注释(<!– –>)是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。


  2.IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。


  3.条件注释使用的是HTML的注释结构,因此他们只能使用在HTML档里,而不能在CSS檔中使用。


  从语法上看这是相当合法的普通网页设计注释。任何浏览器都会认为<!–和–>之间的部分是注释从而忽略它。但是IE也会看到其中[if IE]>,从而开始解释接下来的代码直到遇到<!–[endif]。所以,下面这些代码不会显示在任何其他浏览器中面。


  通过“比较操作符”可以更灵活地对IE版本进行控制,用法是在IE前面加上“比较操作符”。合法的操作符如下:


  lte:就是Less than or equal to的简写,也就是小于或等于的意思。


  lt :就是Less than的简写,也就是小于的意思。


  gte:就是Greater than or equal to的简写,也就是大于或等于的意思。


  gt :就是Greater than的简写,也就是大于的意思。


  ! :就是不等于的意思,跟javascript里的不等于判断符相同


  示例:


  <!––[if gt IE 5.5]–> / 如果IE版本大于5.5 /


  <!––[if lte IE 6]–> / 如果IE版本小于等于6 /


  <!––[if !IE]–> / 如果浏览器不是IE /


  虽然看上去当你第一次使用条件注释的时候会更费时,但当你以后调试你的CSS的时候,就会发现非常方便。用条件注释你只需要写一遍网页设计注释,而 用bug你需要为每一条规则都写上又长又丑的代码,而且还经常是为了改变其他的hacks而写的hacks。除此之外条件注释对于不支持它的任何浏览器而 言都是合法的网页设计注释。以下为条件注释与CSS hacks的一些区别:


  1.Hacks是基于浏览器的bug,而这些bug最终可能会被修复。


  2.条件注释是基于IE特定代码,这种识别机制任何时候都不会被移除。


  3.每一个浏览器都能看见你的hacks,或许下一个版本或者一个新的浏览器会在你的hacks代码上出错。


  4.只有IE才能看到条件注释,通过额外的“IE档”来影响页面,其他浏览器根本就不会下载它。


  5.Hacks不能确保对哪些浏览器生效而对哪些不,用的hacks越多,代码越混乱。


  6.条件注释利用版本匹配使得作者可以容易地对特定版本写代码。


留言反馈

Copyright Your WebSite.Some Rights Reserved.|西南ICP备123456号|Theme by Cn+网络, Soft by ZBlogPHP 关于我们| 在线留言| 网站地图| 网络营销