slide1
Download
Skip this Video
Download Presentation
前端(交互)

Loading in 2 Seconds...

play fullscreen
1 / 13

前端(交互) - PowerPoint PPT Presentation


  • 112 Views
  • Uploaded on

美工(设计). 前端(交互). 后台(服务器). 前端(交互). 前端(交互). HTML(XHTML,HTML5). CSS(CSS3). JavaScript(Ajax). <!DOCTYPE HTML PUBLIC "-// W3C//DTD XHTML 1.0 Transitional//EN" " http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd "> <html xmlns="http://www.w3.org/1999/xhtml">.

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about ' 前端(交互)' - meghan


An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
slide1

美工(设计)

前端(交互)

后台(服务器)

slide3

前端(交互)

HTML(XHTML,HTML5)

CSS(CSS3)

JavaScript(Ajax)

slide4

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<!DOCTYPE HTML PUBLIC

"-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<body>

<blockquote cite=“http://www.w3school.com.cn”>

<h1>为 HTML5 建立的一些规则:</h1>

<ul>

<li>新特性应该基于HTML、CSS、DOM以及JavaScript。</li>

<li>减少对外部插件的需求(比如 Flash)</li>

<li>更优秀的错误处理</li>

<li>更多取代脚本的标记</li>

<li>HTML5 应该独立于设备</li>

<li>开发进程应对公众透明</li>

</ul>

</blockquote>

</body>

</html>

<body>

<blockquote cite=“http://www.w3school.com.cn”>

<h1>HTML5 中的一些新特性:</h1>

<ul>

<li>用于绘画的 canvas 元素</li>

<li>用于媒介回放的 video 和 audio 元素</li>

<li>对本地离线存储的更好的支持</li>

<li>新的特殊内容元素,如 article、footer、header、nav、section</li>

<li>新的表单控件,如 calendar、date、time、email、url、search</li>

<li>。。。</li>

</ul>

</blockquote>

</body>

</html>

slide5

前端(交互)

HTML(XHTML,HTML5)

CSS(CSS3)

JavaScript(Ajax)

slide6

CSS(Cascading Style Sheets,叠层样式表)

Example:

<p>Some Text</p>

P{

padding:15px 10px;

background:#4f81bd;

border:#FFF soild 1px;

}

P{

padding:15px 10px;

background:#4f81bd;

border:#FFF soild 1px;

border-radius:5px;

box-shadow:10px 10px 5px #888;

}

Some Text

slide7

前端(交互)

HTML(XHTML,HTML5)

CSS(CSS3)

JavaScript(Ajax)

slide8

JavaScript :弱类型、轻量级、最流行的编程语言

Example:

<p>Some Text</p>

varobj =

document.getElementByTagName(“p”);

obj.onclick = function(){

this.style.display = “hidden”;

}

Some Text

slide9

Ajax:AsynchronousJavaScript and XML

(异步的 JavaScript 和 XML)

  • AJAX 不是新的编程语言,而是一种使用现有标准的新方法。
  • AJAX 是在不重新加载整个页面的情况下,与服务器交换数据
  • 并更新部分网页的艺术,。
slide10

前端(交互)

开发工具

· Dreamweaver ·VIM ·Editeplus ·notepad

·zen coding

调试工具

· Firebug ·Webkit调试工具·IE Web Developer

·IE Test ·JSLint·JSBeautifier·JSCompress

slide12
书籍推荐
  • 《javascript精粹》
  • 《css设计指南(第三版)》
  • 《javascript权威指南》
ad