网页设计与制作基础（HTML5+CSS3）课件全套 徐晓丹 第1--10章 网页设计基础---JavaScript基础.pptx

第1章

网页设计基础;目录;1.1网站概述;要访问网络上的任何一个资源，需要提供资源的地址，这个地址，通常称为统一资源定位器，URL(uniformresourcelocator)。

URL用于完整地描述Internet上网页和其他资源的地址，其组成如图1-2所示：;1.1.2URL和域名;域名系统的结构如图所示：

域名系统（DNS）用于提供名字和IP地址之间的映射关系，有了这个映射关系，用户在上网时不需要记住长长的数字地址（IP地址），而只需记住容易记忆的有特定规律的字符串即可。;1.1.2URL和域名;1.1.2URL和域名;静态页页面。静态页面是用html语言构造的，无法与使用者产生互动的网页。静态页面只能够单纯的显示网页内容，无法针对不同的网页浏览状况做出实时响应。也就是页面一旦做好以后，其内容是不会发生变化的。静态页面的扩展名为.htm或.html。;动态页面指的是包含HTML标记和程序语言(ASP,JSP,PHP)，是在得到页面请求之后动态生成的页面。动态页面可以根据用户的请求生成不同的内容，以实现和用户的交换。

动态页面的扩展名为.asp、.aspx、.jsp和.php等。

;1.1.4动态页面开发技术;1.1.4动态页面开发技术;1.2网站规划及布局;1.2网站规划及布局;网站目录设计;1）树状链接结构。

2）网状链接结构。

;1.2.2网页布局;1.2.2网页布局;1.2.2网页布局;1.2.2网页布局;1.2.2网页布局;1.3站点建立和访问;1.3.3常用网页编辑工具;1.3.3常用网页编辑工具;1.3.4建立本地站点;新建HTML页面;设置样式，应用样式;设置背景;小结;第2章HTML5基础;目录;2.1.html文档结构;head标记;head标记;2.2HTML标签;2.2.1HTML内容标签;ulli/liul无序列表，用于将相关内容以条目的方式呈现，使内容看起来更加简洁明了。

ul

li富强、民主、文明、和谐/li

li自由、平等、公正、法治/li

li爱国、敬业、诚信、友善/li

/ul

ulli的列表默认为项目符号列表

olli/li/ol有序列表，olli的列表默认为为数字列表，

ol

li富强、民主、文明、和谐/li

li自由、平等、公正、法治/li

li爱国、敬业、诚信、友善/li

/ol;form/form：表单,主要包含以下元素：

input元素，根据不同的type属性，input元素又可以分为：

inputtype=text?定义供文本输入的单行输入字段；

inputtype=password?定义密码字段；

inputtype=radio定义单选按钮；

inputtype=checkbox定义复选框；

inputtype=submit?定义提交表单数据至表单处理程序的按钮；

inputtype=button”?定义按钮；

select元素（下拉列表）

selectname=pc

optionvalue=联想联想笔记本/option

optionvalue=惠普惠普笔记本/option

optionvalue=神州神州笔记本/option

optionvalue=方正方正笔记本/option

/select;2.2.2HTML字符格式标记;HTML5引入了多个新的语义元素用来更加细致地描述页面及文档结构。他们用于明确web页面的不同部分，

header:为article元素定义文章“头部”信息。

nav:“导航条”。

section:分块。

article:页面上独立、完整的一篇文章。

aside:用于定义当前页面或当前文章的附属信息。

figcaption:用于定义图片区域的标题。

figure:可包含一个或多个img元素所代表的图片。

footer:“脚注”部分。;使用语义元素设置个人博客;2.4HTML5功能元素;2.4.2video视频;2.4.3audio音频;2.4.4embed元素;2.4.5mark元素;2.4.6time标记;2.4.7dialog元素;2.4.8bdi元素;2.4.9figcaption标签;canvas元素用于在网页上绘制图形。canvas元素本身没有行为，只提供一块画布，但它会把绘图的API展现给客户端Javascript，由JavaScript将图形绘制在画布上。下面的代码定义了一个canvas元素。

canvasid=myCanvaswidth=200height=100/canvas

;接下来使用