ASP.NET程序设计教程（C#版）第4版 PPT 第2章 Web前端设计基础.ppt

第2章Web网站前端设计基础本章讲述的主要内容2.1HTML5标记语言2.2网页的样式控制2.3页面布局2.4实训页面布局综合练习2.1HTML5标记语言2014年W3C在HTML4的基础上推出了HTML5的正式标准，并迅速获得各大浏览器产品的支持（如，IE、Firefox、Chrome等）。HTML5目前已成为网页设计的主流趋势，那些不支持或不完全支持HTML5的浏览器产品正逐步被淘汰。需要说明的是Microsoft的IE浏览器从IE9开始部分支持HTML5，直到IE11才实现了对HTML5的完全支持，但IE11只能运行在Windows7以上版本的操作系统上，不支持早期的WindowsXP。运行本书示例时建议在Windows7以上环境中，使用IE11浏览器。2.1HTML5标记语言2.1.1HTML5的基本结构1.文档结构2.1HTML5标记语言2.1.1HTML5的基本结构2.HTML5与早期版本的不同标记不区分大小写(2)结束标记可以省略(3)boolean类属性的设置(4)属性引号允许省略2.1HTML5标记语言2.1.2在VS中设计网页1.向ASP.NET网站中添加静态网页添加现有静态网页 添加→现有项→添加现有项→.html网页(2)新建静态网页 添加→添加新项→选择“HTML页”模板2.1HTML5标记语言2.1.2在VS中设计网页2..aspx文件和HTML文件VS2015中创建的Web窗体中各元素默认以HTML5规范描述，页面中Web服务器控件以asp标记表示。Web服务器控件与普通HTML元素相比最突出的不同点就是具有runat=server的属性，表示控件在服务器端运行。2.1HTML5标记语言2.1.2在VS中设计网页3.VS提供的设计环境在VisualStudio中编辑、修改HTML或.aspx文件时，无论是编写HTML标记代码还是编写JavaScript脚本代码，都可以通过系统提供的智能提示功能快速完成编辑工作。2.1HTML5标记语言2.1.3HTML5的常用元素1.文本元素标记2.1HTML5标记语言2.1.3HTML5的常用元素2.层标记div层标记以div标记开始，以/div标记结束。该标记用来定义页面中的一个特殊区域，区域内可包含文字、图片、表格或下级div等。使用div标记可方便的将若干页面元素组成一个集合，进而统一设置该集合的显示位置及所含元素的样式。div是HTML5页面布局中使用最多，也是最重要的标记之一。3.超链接标记a ahref=URL地址target=打开窗口方式热点文本/a2.1HTML5标记语言2.1.3HTML5的常用元素4.列表标记(1)无序列表标记ul(2)有序列表标记ol(3)自定义列表标记dl2.1HTML5标记语言2.1.2HTML5常用标记5.表格标记表格标记中除了需要包含最基本的tr和td标记外，其它一些辅助标记见教材表2-22.1HTML5标记语言2.1.2HTML5常用标记6.图像、音频和视频标记图像标记img(2)音频标记audio(3)视频标记video2.2网页的样式控制所谓样式控制是指对页面中各元素的外观（字体大小、颜色、背景对齐方式等）进行设置的方法。在HTML中如果页面较为简单，一般可使用各标记的style属性来实现页面样式的控制。但对于结构复杂，内容丰富的页面使用style属性控制样式势必会造成许多重复工作量，页面代码也会显得十分臃肿，此时可使用CSS对网页样式进行统一的控制。2.2网页的样式控制2.2.1标记的Style属性在HTML5中所有有关样式的设置都可以由标记的style属性来完成。其一般格式为：标记style=参数1:值1;参数2:值2;……;参数n:值n2.2网页的样式控制2.2.2CSS3的概念CSS（CascadingStyleSheets，级联样式表，也称为层叠样式表，简称为样式表）是一种将页面元素样式设置集中化的方法。引入CSS的主要目的就是为了实现将页面结构与页面外观表现分离。CSS目前最高版本是CSS3，它较之前的版本有很大的改进。2.2网页的样式控制2.2.2CSS3的概念1.嵌入式CSS2.