HTML5和CSS3网页设计基础.pptx

HTML5和CSS3网页设计基础.pptx

《HTML5和CSS3网页设计基础.pptx》由会员分享，可在线阅读，更多相关《HTML5和CSS3网页设计基础.pptx（335页珍藏版）》请在冰豆网上搜索。

HTML5与CSS3网页设计基础,长治学院赵健,第一章Internet和Web基础,访问网站，是一个什么样的过程？

Web建站技术中，HTML、HTML5、XHTML、CSS、SQL、JavaScript、PHP、ASP.NET、WebServices是什么？

网站开发中的前端与后端各自代表什么含义？

访问一个网站的数据交流过程,在浏览器的地址栏输入一个地址，发生了什么？

HTML与CSS,HTML就是一种标记语言（P12）：

超文本标记语言（HyperTextMarkupLanguage）HTML不是一种编程语言，而是一种标记语言标记语言是一套标记标签（markuptag）HTML使用标记标签来描述网页,HTML与CSS,访问一个网站时，服务器返回了一个html文件，用来标识网页的内容，浏览器对之进行解释，并渲染页面供用户浏览。

HTML与CSS,如果不用CSS，浏览器按照默认的样式显示出列表、图片、超链接、输入框、按钮等等：

所以很多时候我们需要自定义样式，现行通用的规定样式的语言是CSS，我们可以用它写一些定义样式的代码，然后在html文件里用一个标签把这些规定样式的CSS代码与表达内容语义的HTML代码关联起来，然后你就能看到一个符合人类正常审美的页面了:

HTML与CSS,CSS概述CSS指层叠样式表（CascadingStyleSheets）样式定义如何显示HTML元素样式通常存储在样式表中把样式添加到HTML4.0中，是为了解决内容与表现分离的问题外部样式表可以极大提高工作效率外部样式表通常存储在CSS文件中多个样式定义可层叠为一,CSS代码的基本格式,基本格式：

浏览器就会根据这些CSS代码，“画”出对应的样式。

属性：

值,HTML5与XHTML,XHTML是更严谨更纯净的HTML版本。

XHTML指可扩展超文本标签语言（EXtensibleHyperTextMarkupLanguage）。

XHTML的目标是取代HTML。

XHTML与HTML4.01几乎是相同的。

XHTML是更严格更纯净的HTML版本。

XHTML是作为一种XML应用被重新定义的HTML。

XHTML是一个W3C标准。

HTML5与XHTML,HTML5是下一代的HTML。

什么是HTML5？

HTML5将成为HTML、XHTML以及HTMLDOM的新标准。

HTML的上一个版本诞生于1999年。

自从那以后，Web世界已经经历了巨变。

HTML5仍处于完善之中。

然而，大部分现代浏览器已经具备了某些HTML5支持。

HTML5的新特性与新规则,新特性用于绘画的canvas元素用于媒介回放的video和audio元素对本地离线存储的更好的支持新的特殊内容元素，比如article、footer、header、nav、section新的表单控件，比如calendar、date、time、email、url、search,新规则新特性应该基于HTML、CSS、DOM以及JavaScript。

减少对外部插件的需求（比如Flash）更优秀的错误处理更多取代脚本的标记HTML5应该独立于设备开发进程应对公众透明,浏览器支持：

最新版本的Safari、Chrome、Firefox以及OperaInternetExplorer9将支持某些HTML5特性。

JavaScript与浏览器脚本,JavaScript:

可用于HTML和web，更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。

为网页添加一些动态效果JavaScript是脚本语言JavaScript是一种轻量级的编程语言。

JavaScript是可插入HTML页面的编程代码。

JavaScript插入HTML页面后，可由所有的现代浏览器执行。

JavaScript很容易学习。

WebServer和WebServices,浏览器给服务器发一个请求，服务器不是一看就知道怎么响应的。

首先这些请求和响应要有一个通用的写法，也就是要有一个协议，常用的是HTTP协议。

状态码：

200OK：

你请求的这个东西我有404NotFound：

你请求的这个东西我这里没有,协议,协议用来描述客户端和服务器之间如何在网络上进行通信的规则。

电子邮件协议（SMTP/POP/IMAP）超文本传输协议（HTTP）文件传输协议FTPTCP/IPUDP,HTTP,SMTP,DNS,RTP,TCP,UDP,IP,网际层,网络接口层,运输层,应用层,网络接口1,网络接口2,网络接口3,EverythingoverIPIP可为各式各样的应用程序提供服务,IPoverEverythingIP可应用到各式各样的网络上,IP地址和域名,IP地址根据功能可以划分为两部分：

网络地址和主机地址。

网络号用来标识一个逻辑网络，主机号用来标识网络中的一台主机。

根据TCP/IP协议规定，每个IP地址均由32位的二进制数组成（即4个字节），每8位（1个字节）之间用圆点分开。

用二进制数表示的IP地址难于书写和记忆，通常将32位的二进制地址写成4个十进制数字字段。

例：

01101100.10000000.11111000.11111110例：

108.128.248.254,域名系统DNS,域名是人们为了减轻记忆负担而给IP地址起的“别名”例如百度服务器对应的IP地址是“63.135.16第一节05”，该IP地址对应的域名为“”。

域名系统也就是对IP地址的“命名系统”。

域名服务器是用来完成域名到IP地址的转换工作的服务器。

一个普通网站的请求过程,用户操作浏览器访问，浏览器向服务器发出一个HTTP请求；服务器接收到HTTP请求，WebServer进行相应的初步处理，使用服务器脚本生成页面；服务器脚本（利用WebFramework）调用本地和客户端传来的数据，生成页面；WebServer将生成的页面作为HTTP响应的body，根据不同的处理结果生成HTTPheader，发回给客户端；客户端（浏览器）接收到HTTP响应，通常第一个请求得到的HTTP响应的body里是HTML代码，于是对HTML代码开始解析；解析过程中遇到引用的服务器上的资源（额外的CSS、JS代码，图片、音视频，附件等），再向WebServer发送请求，WebServer找到对应的文件，发送回来；,一个普通网站的请求过程,浏览器解析HTML包含的内容，用得到的CSS代码进行外观上的进一步渲染，JS代码也可能会对外观进行一定的处理；用户与页面交互（点击，悬停等等）时，JS代码对此作出一定的反应，添加特效与动画；交互的过程中可能需要向服务器索取或提交额外的数据（局部的刷新，类似微博的新消息通知），一般不是跳转就是通过JS代码（响应某个动作或者定时）向WebServer发送请求，WebServer再用服务器脚本进行处理（生成资源or写入数据之类的），把资源返回给客户端，客户端用得到的资源来实现动态效果或其他改变。

HTML文档示例,学习HTML欢迎来到HTML世界,HTML代码,浏览器处理代码并进行显示,HTML文档结构,学习HTML欢迎来到HTML世界,HTML网页结构,头部部分以开始以结束,主体部分以开始以结束,标签标记HTML文档的开始和结束,这部分包括标题和其他说明信息。

包括在标签内,这部分包含文本、图像和链接。

它包括在标签内,HTML文档结构,/文档类型声明/表示HTML文档开始/包含文档元数据开始/声明字符编码基本结构/设置文档标题/包含文档元数据结束/body里的表示HTML文档内容/表示HTML文档结束,HTML文档结构,Doctype（DocumentTypeDoctype）。

主要告诉浏览器所查看的文件类型。

在以往的HTML4.01和XHTML1.0中，它表示具体的HTML版本和风格，而如今HTML5不需要再表示版本和风格了。

head用来包含元数据内容，元数据包括：

、。

这些内容用来为浏览器提供信息，比如link提供CSS信息，script提供JavaScript信息，title提供页面信息等。

meta元素用来提供关于文档的信息。

Charset=“utf-8”，表示告诉浏览器页面采用的什么编码，一般来说我们就用utf8。

当然文件保存的时候也是urf-8，而浏览器也设置utf8即可显示中文,HTML标签,HTML标签是由尖括号包围的关键词，如HTML文档和HTML元素是通过HTML标签进行标记的HTML标签由开始标签和结束标签组成开始标签是被括号包围的元素名，如结束标签是被括号包围的斜杠和元素名,某些HTML元素没有结束标签，比如,HTML标签,学习HTML欢迎来到HTML世界,标签,标识body元素,属性,提供有关元素的附加信息,值,分配给属性的内容,META标签（XHTML中）,meta标签是一个特殊的HTML标签，提供有关网页的信息，例如作者、日期和时间、网页描述、关键词、页面刷新等标签位于文档的头部，不包含任何内容。

标签的属性定义了与文档相关联的名称/值对许多搜索引擎都使用meta标签信息例如，要将GrahamBrowne指定为作者，则使用以下meta标签：

META标签（XHTML中）,用于META标签的属性,META标签,http-equiv属性可用来代替meta标签中的name属性,表示有效期：

格林尼治标准时间2011年9月14日，星期三14:

25:

27一旦网页过期，必须到服务器上重新传输。

表示每隔2秒，自动刷新网页,第二章网页结构基础,标题段落换行/水平标尺块引用元素短语元素列表特殊字符Div语法校验,HTML元素,什么是HTML元素HTML文档是由HTML元素定义的。

HTML元素指的是从开始标签（starttag）到结束标签（endtag）的所有代码。

HTML元素语法HTML元素以开始标签起始HTML元素以结束标签终止元素的内容是开始标签与结束标签之间的内容某些HTML元素具有空内容（emptycontent）空元素在开始标签中进行关闭（以开始标签的结束而结束）大多数HTML元素可拥有属性,HTML标题,标题（Heading）是通过-等标签进行定义的。

动物世界从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感从大自然获得灵感,H1到H6标签用于指定不同级别的标题,HTML段落,32,诗词学习我是第一段我是第二段左对齐显示居中显示右对齐显示,标签用于标记段落,换行标签,文本中（break）标签，就会强制换行,诗词学习我是第一行我是第二行我是第一段我是第二段,水平标签,标签在HTML页面创建一条水平线，该水平线在视觉上将文档分隔成各个部分。

hr标签定义水平线：

这是段落1。

这是段落2。

这是段落3。

使用字体和属性,动物世界了解有关动物的更多信息斑马的特性没有任何两匹斑马的斑纹是完全一样的，因此每匹斑马都是独一无二的,可以按名称或十六进制值指定颜色,可以为字体指定的大小范围为从1到7,可以指定一列字体，各字体间用逗号分隔。

浏览器以最先找到的字体显示文本,元素及其相关属性（如SIZE、COLOR和FACE）可用于控制网页上文本的显示,*内联样式,当特殊的样式需要应用到个别元素时，就可以使用内联样式。

使用内联样式的方法是在相关的标签中使用样式属性。

样式属性可以包含任何CSS属性。

Thisisaparagraph,块引用元素,与之间的所有文本都会从常规文本中分离出来，经常会在左、右两边进行缩进（增加外边距），而且有时会使用斜体。

也就是说，块引用拥有它们自己的空间。