全套课件·HTML5与CSS3项目实战.ppt

1、企业级卓越人才培养（信息类专业集群）01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 01 学习目标学习目标 学习目标学习目标010203了解HTML5的文档结构、新增标签了解CSS样式规则掌握CSS3选择器学习目标 通过实现同程旅游 界 面，学 习HTML5与CSS3相关知识，了解HTML5与CSS3发展历史、基础标签和自适应网站标签的使用04了解自适应网站的概念企业级卓越人才培养（信息类专业集群）02 02 学习路径学习路径 学习路径学习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任务描述 01 情境导入 02 功能描述03

2、 基本框架 04 开发环境 任务描述任务描述企业级卓越人才培养（信息类专业集群）情境导入情境导入随着科技的发展，网络在人们的生活中占着主导地位，而旅游作为人们缓解压力的方式之一，旅游网站也慢慢的走进了我们的生活。本次任务主要是实现同程旅游的界面设计。企业级卓越人才培养（信息类专业集群）功能描述功能描述情境入01使用响应式布局技术来设计同城旅游界面 01 02 03 04头部包括同城旅游的logo主体包括各种图片链接底部包括本站点的版权信息企业级卓越人才培养（信息类专业集群）基本框架基本框架企业级卓越人才培养（信息类专业集群）系统环境Windows 7系统及以上系统软件环境服务器浏览器Subli

3、me TextTomcat 7.0电脑端：火狐浏览器 谷 歌 浏 览器手机端：Webkit内核浏览器 Android手机内置 浏览器 开发环境开发环境企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能任务技能 HTML5概述 HTML5基础 网页编辑器及环境 CSS3初体验 CSS样式表 CSS选择器 任务技能任务技能企业级卓越人才培养（信息类专业集群）建设制造强国12HTML5万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言（HTML）的第五次重大修改（W3C Recommendation）。2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，标准规范终

4、于制定完成。（1）快速迭代（2）减低成本（3）导流入口多（4）分发效率高 HTML5概述概述HTML5的发展HTML5的优点企业级卓越人才培养（信息类专业集群）HTML5文档的基本结构1HTML5语法2HTML5新增标签3（1）用于向浏览器说明当前文档使用哪种HTML标签。（2）和分别表示文档的开始和结束，用于告知浏览器其自身是一个HTML文档。（3）为头部标签，用于定义HTML文档的头部信息，紧跟在标签后，里面包括的内容有、和等。（4）为主体标签，用于定义HTML文档所要显示的内容，在浏览器中所看到的图片，音频，视频，文本等都位于内。该标签中的内容是展示给用户看的。HTML5为了更大兼容各浏

5、览器，在设计和语法方面发生了一些变化，语法变化的主要内容如下：l 标签不在区分大小写l 元素可以省略结束标签l 允许省略属性的属性值l 允许属性值不使用引号 HTML5基础基础HTML5和HTML相比，增加了结构标签，语义标签、特殊功能标签以及audio和video标签等。其中新增标签如表标签标签描述描述用于描述页面上一处完整的文章用于定义导航条，包括主导航条、页面导航、底部导航等aside用于定于当前页面的附属信息，内容和article内容相关hgroup用于对网页或区段（section）的标题进行组合用于对元素进行组合header用于定义文档的页眉（介绍信息）footer用于定义 sect

6、ion 或 document 的页脚企业级卓越人才培养（信息类专业集群）网页编辑器1自适应网页设计2手机端访问网页环境部署3随着编写网页的语言在不断的更新，网页编辑器也在不断的开发。其中几款为大家所熟知的网页编辑 器 有 N o t e p a d+、Dreamweaver、Sublime Text随着智能手机的普及，设计的界面也需在手机端显示，为了能够在手机端正常显示，我们需要使网页宽度自动调整。（1）在网页代码的头部，加入一行viewport元标签。（2）不使用绝对宽度（3）Media Query模块，自动探测屏幕宽度（4）media，根据不同的屏幕分辨率，选择不同的CSS规则。在Subl

7、ime Text制作完之后，点击浏览器就能出现效果，想要手机访问，我们不仅需要在头部添加响应式布局所对应代码，还需配置服务器的环境才可以在手机上访问。（1）下载tomcat软件，网址为http:/tomcat.apache.org/download-70.cgi（2）配置tomcat环境（3）启动Tomcat软件 网页编辑器及环境网页编辑器及环境企业级卓越人才培养（信息类专业集群）建设制造强国12CSS3（Cascading Style Sheet，层叠样式表）是一种不需要编译、可直接由浏览器执行的标记性语言，用于控制页面的布局、文字的大小和颜色、图片位置、列表、表单等样式。CSS3的产生大大

8、简化了编程模型CSS3主要是给文字、图片设置样式和布局，CSS3的标准格式为：选择器属性1:属性值1；属性2:属性值2 CSS3初体验初体验CSS3概述CSS3样式规则企业级卓越人才培养（信息类专业集群）建设制造强国12CSS3样式可以写在HTML标签内，用style属性表示，这个方法简便快捷，但是具有局限性，无法通用，该属性的语法格式为：定义内部样式表即CSS3样式表写在HTML文档内，我们可以对整个或者整个设置样式，也可以对单个标签设置样式。CSS3样式表样式表定义标记的style属性定义内部样式企业级卓越人才培养（信息类专业集群）建设制造强国34嵌入外部样式表就是在HTML代码中直接导入

9、样式表的方法。基本语法import url(外部样式表的文件名称);链接外部样式表就是把外部的CSS文件链接到HTML中，基本语法为：CSS3样式表样式表嵌入外部样式表链接外部样式表企业级卓越人才培养（信息类专业集群）类选择器根据类名来选择前面以“.”来标志类选择器标签选择器ID选择器后代选择器一个完整的HTML页面是有很多不同的标签组成，而标签选择器，则是决定哪些标签，采用相应的CSS样式。ID 选择器前面以”#”号来标志，根据元素ID来选择元素，具有唯一性，这意味着同一id在同一文档页面中只能出现一次，ID 属性不允许有以空格分隔的词列表后代选择器也称为包含选择器，用来选择特定元素或元素组

10、的后代，将对父元素的选择放在前面，对子元素的选择放在后面，中间加一个空格分开。CSS选择器选择器子选择器子代选择器与后代选择器的区别在于，子选择器仅是指它的直接后代。而后代选择器是作用于所有子后代元素。子选择器是通过“”进行选择伪类选择器有时候还会需要用文档以外的其他条件来应用元素的样式，比如鼠标悬停等。这时候就需要用到伪类了。企业级卓越人才培养（信息类专业集群）05 05 任务实施任务实施输入标题输入标题输入标题第一步：在里面添加标签，使网页适应手机屏幕宽度。第二步：头部为同程旅游的logo，用标签表示第三步：主体部分包括各种图片的超链接，需要用到列表样式标签第四步：尾部主要为本站点的版权信

11、息，版权信息的样式为文字居中，内间距为10px点击输入说明文字点击输入说明文字点击输入说明文字 任务实施任务实施企业级卓越人才培养（信息类专业集群）06 06 任务总结任务总结任务技能任务技能任务实施任务实施任务拓展任务拓展任务描述任务描述 通过本项目的学习，对HTML5的发展、优势、文档结构具有初步了解，对HTML5新增的标签及属性有了初步认识，同时也掌握了CSS3选择器和自适应网站的相关概念。任务总结任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载： 企业级卓越人才培养（信息类专业集群）01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06

12、任务总结01 01 学习目标学习目标 学习目标学习目标010203掌握HTML5中常用的文本标签掌握CSS3文本属性掌握CSS字体属性学习目标 通过实现百度导 航 界 面，学 习HTML5与CSS3相关的文本标签、字体颜色以及弹性布局的使用。04了解流式布局和弹性布局企业级卓越人才培养（信息类专业集群）02 02 学习路径学习路径 学习路径学习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任务描述 01 情境导入 02 功能描述03 基本框架 04 开发环境 任务描述任务描述企业级卓越人才培养（信息类专业集群）情境入01 情境导入情境导入百度导航是网络时代最受欢迎的导航之一，百度

13、导航上的功能能够帮助人们解决所遇到的困难，同时百度导航除了搜索之外，还提供一系列的链接，为我们快速、准确的提供信息。本次任务主要是实现百度导航界面的设计。企业级卓越人才培养（信息类专业集群）功能描述功能描述头部包括百度导航的logo 01 02 03主体包括搜索表单、本站点导航等底部包括本站点的版权信息企业级卓越人才培养（信息类专业集群）基本框架基本框架 企业级卓越人才培养（信息类专业集群）系统环境Windows 7系统及以上系统软件环境服务器浏览器Sublime TextTomcat 7.0电脑端：火狐浏览器 谷 歌 浏 览器手机端：Webkit内核浏览器 Android手机内置 浏览器 开

14、发环境开发环境企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能任务技能 HTML5文本标签 CSS文本属性 CSS字体属性 CSS导航栏 固定布局和流动布局的介绍 任务技能任务技能企业级卓越人才培养（信息类专业集群）1段落标签2标题一共有6级，分别用h1-h6表示，其中标题最大的为h1，依次递减，h6最小。标题文本默认是全部加粗是段落标签，主要功能是定义网页中的文本内容，段落标签可以使文本段落上下边距加大HTML5文本标签文本标签标题标签企业级卓越人才培养（信息类专业集群）3标签与标签4标签主要用于换行，使用该标签只能输入空行，不能分割段落。该标签是一个单标签，不能成对出现，没

15、有结束符号标签主要用于软换行，在文本中添加该标签时，当文本内容（中英文部分）在一行放不下时自动换行到下一行标签是用户可以创建一个可折叠的控件，只显示想要的标题和文字，隐藏一些对标题或者文字描述的信息。标签一般与标签配合使用，显示的内容一般为标签的内容，如果点击了标签，则会显示出标签中的内容HTML5文本标签文本标签标签与 标签企业级卓越人才培养（信息类专业集群）字体类型1字体风格2字体变形3在CSS中，有两种不同类型的字体系列：通用字体类型：拥有相似外观的字体系统组合（例如“Serif”或“Monospace”）。特定字体类型：具体的字体系列（例如“Times”或“Courier”）。文本字体

16、的设置用font-style属性，该属性有三个取值：normal（文本正常显示）、i t a l i c（文 本 斜 体 显 示）、oblique（对于没有设计过斜体样式的文字强行用代码使其倾斜）小型大写字母使用font-variant属性设置，小型大写字母即字母都是大写字母，但字体尺寸会比大写字母小CSS字体属性字体属性企业级卓越人才培养（信息类专业集群）4字体大小5文本的粗细程度使用font-weight属性设置，该属性功能为字体设置一个加粗程度，用数字或normal、bold、bolder设置，一般设置字体粗度的值为100-900，数字越大，字体越粗，在大多数浏览器中数字400相当于所写

17、的normal，700相当于bold文本中字体的大小一般用font-size属性设置，可以用绝对值、相对值或px、pt、em来表示CSS字体属性字体属性字体加粗企业级卓越人才培养（信息类专业集群）文本对齐属性 1文本水平对其2文本垂直对其3text-align用来设定文本的对齐方式。有以下四种设置文本对齐的方式：left(居左，缺省值)，right(居右)，center(居中)，justify(两端对齐)。文本水平对齐用text-align属性设置，该属性根据指定行与某一个点对齐进行设置块级元素文本的水平对齐方式文本垂直对齐用文本垂直对齐用vertical-align属性设置，在该属性中值可以

18、属性设置，在该属性中值可以是负数或者百分比的形式。在表格中，通常用这个属性来是负数或者百分比的形式。在表格中，通常用这个属性来设置单元格内容的对齐方式设置单元格内容的对齐方式CSS文本属性文本属性企业级卓越人才培养（信息类专业集群）文本修饰属性 4文本缩进属性5文本字符转换6设置文本划线用设置文本划线用text-decoration属性，有四种属性值属性，有四种属性值none(无，缺省值无，缺省值)，underline(下划线下划线)，overline(上划线上划线)，line-through(当中划线当中划线)设置文本缩进采用text-indent属性，有以下三种设置方式length 长度，

19、绝对单位(c m,m m,i n,p t,p c)、相 对 单位(em,ex,px)或者percentage(百分比，相当于父对象宽度的百分比)文本的大小写用文本的大小写用text-transform属性属性设置，有四种取值：设置，有四种取值：none（默认值）、（默认值）、uppercase（大写）、（大写）、lowercase（小写）（小写）和和capitalize（首字母大写）。默认值（首字母大写）。默认值none对文本不做任何对文本不做任何改动，将使用原文档中的原有大小写改动，将使用原文档中的原有大小写CSS文本属性文本属性企业级卓越人才培养（信息类专业集群）1CSS导航栏分为垂直导航

20、栏和水平导航栏，用和元素来设置CSS导航栏导航栏CSS导航栏企业级卓越人才培养（信息类专业集群）1流体布局2在制作界面时自己设置的一个宽度（固定值）叫做固定宽度布局，比如说980px。使用这种布局通常需要设置一个整个的DIV布局，通常里面各个模块的宽度也是固定的，不会根据整个界面的变换而变换，所以说不管是手机端还是在PC端，访问的界面的宽度都是一样的，所显示的信息也是不变的流动布局在设计页面时宽度和高度不再是固定值，而是采用百分比来设置的。现如今主流的网页都是响应式布局网页，在设计网页时采用的都是百分比设置网页的宽度。流体布局页面对用户更友好，因为它能自适应用户的设置。页面周围的空白区域在所有

21、分辨率和浏览器下都是相同的，在视觉上更美观。固定布局和流动布局固定布局和流动布局固定布局企业级卓越人才培养（信息类专业集群）05 05 任务实施任务实施输入标题输入标题第一步：头部制作，把新浪导航页标题和图片在一行现实，调整图片的大小，设置一个下边框，带边框阴影。第二步：主体热点网站链接的制作，采用无序列表和float属性来实现。第三步：主体分类导航链接的制作，取消无序列表默认的无序符号，用float属性设置导航栏左浮动，设置无序列表中文字的大小，颜色和边框第四步：底部版权信息制作，版权信息内容为Copyright 2016 ，该内容为一个段落，使用段落标签。点击输入说明文字点击输入说明文字

22、任务实施任务实施企业级卓越人才培养（信息类专业集群）06 06 任务总结任务总结任务技能任务技能任务实施任务实施任务拓展任务拓展任务描述任务描述 本项目通过对新闻网站导航网页和文本新闻网页设计的探析和练习，重点熟悉HTML5中常用的文本标签、CSS文本属性、字体属性、颜色值及颜色表示方法、CSS链接属性等，学会了网页元素的水平对齐、CSS导航栏的设计，学会了新闻网页和导航网页的设计方法。了解流式布局和弹性布局的优点和缺点，了解CSS框架的原理，为以后我们制作响应式网站打好基础 任务总结任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载： 企业级卓越人才培养（信息类专业集群）01

23、 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 01 学习目标学习目标 学习目标学习目标010203掌握HTML5图像标签的使用掌握CSS3页面背景图像的设置掌握CSS3新增边框属性学习目标 通过实现去哪儿旅游主界面，学习HTML5图像相 关 标 签 以 及CSS3图像相关属性，了解和掌握HTML5和CSS3图像标签在实战中的应用企业级卓越人才培养（信息类专业集群）02 02 学习路径学习路径 学习路径学习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任务描述 01 情境导入 02 功能描述03 基本框架 04 开发环境 任务描述任

24、务描述企业级卓越人才培养（信息类专业集群）情境导入情境导入在这个信息化的时代，人们现在更多的是利用图片来表达信息，那么在网页编辑时图片的美化和布局是非常重要的，我们需要在表达自己想要表达的信息的同时还要考虑界面的美观，能够让用户在了解信息的同时还要满足用户的视觉享受。本次任务主要是实现去哪儿旅游主界面设计。企业级卓越人才培养（信息类专业集群）功能描述功能描述头部包括去哪儿旅游网站的logo、文本搜索框等 01 02 03主体包括推荐旅游城市的图片介绍底部包括网站的超链接和站点的版权信息企业级卓越人才培养（信息类专业集群）基本框架基本框架企业级卓越人才培养（信息类专业集群）系统环境Windows

25、 7系统及以上系统软件环境服务器浏览器Sublime TextTomcat 7.0电脑端：火狐浏览器 谷 歌 浏 览器手机端：Webkit内核浏览器 Android手机内置 浏览器 开发环境开发环境企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能任务技能 网页中图片格式 HTML5图像标签 背景属性 盒子模型 CSS3边框属性 HTML5图像过渡和变形 任务技能任务技能企业级卓越人才培养（信息类专业集群）1在网页中添加图片时，图片的格式与代码中图片的格式必须一致，所以我们需要对图片的格式有一定的了解。在网页中主要使用以下几种图片格式：JPG、PNG、GIF、BMP、PCX、TI

26、FF。其中使用最广泛的图片格式为：JPG、PNG、GIF 网页中图片格式网页中图片格式格式企业级卓越人才培养（信息类专业集群）标签1标签2标签3是添加图片的标签，在HTML5中添加图片的基本格式为：。标签可以成对出现也可以写成，在网页编写中标签主要用于添加网站logo和添加网站信息介绍的图片 标签是 HTML 5 中的新标签。标签代表一段独立的流内容，主要包括图像、文字、代码等。该标签添加标题时需要标签，所有主流浏览器都支持 标签定义图像映射内部的区域通常使用标签，area 元素始终嵌套在 标签内部。该标签是新增标签，属性有rel、media、hreflang。其中rel是规定当前文档与目标

27、URL 之间的关系，media是规定目标 URL 是为何种媒介/设备优化的，hreflang是规定目标 URL 的语言 HTML5图像标签图像标签企业级卓越人才培养（信息类专业集群）1margin属性2把HTML页面中的元素看作是一个矩形的盒子叫做盒子模型。盒子模型所具备的四个属性为：内容、填充、边框、边界。CSS盒子模型就是在网页设计中经常用到的CSS技术所使用的一种思维模型。盒子模型的四个属性分别是：margin、border、padding、content在CSS中通过margin属性设置元素边框与相邻元素之间的距离。盒子模型盒子模型盒子模型概念border是为图像添加边框的属性，bor

28、der的属性值有三种，分别是：边框的粗细程度（2px）、边框的样式（solid）、边框的颜色（#000）padding是设置边框和内部元素之间的距离的属性43border属性padding属性属性描述margin-top上外边距margin-right右外边距magin-bottom下外边距margin-left左外边距margin上外边距 右外边距 下边距 左边距属性描述border-width用来设置边框粗细主要参考值有thin定义细边框，medium定义中等边框border-style 用来设置元素边框样式，主要参考值有none 定义无边框，solid 定义实线border-color用

29、来设置边框的颜色属性描述padding-top上内边距padding-right右内边距padding-bottom下内边距padding-left左内边距padding上内边距 右内边距 下内距 左内距企业级卓越人才培养（信息类专业集群）border-image属性1border-radius属性2box-shadow属性3border-image是使用图像作为标签的边框的属性。但是border-collapse属性不能跟border-image属性同时使用border-radius是实现圆角边框的属性box-shadow是给边框添加阴影效果的属性，box-shadow的属性值包括：阴影宽度

30、、阴影颜色等CSS3边框属性边框属性值描述border-image-source表示用在边框的图片的路径border-image-slice表示图片边框向内偏移border-image-width表示图片边框的宽度border-image-outset表示边框图像区域超出边框的量值描述length定义圆角的形状%以百分比定义圆角的形状值描述h-shadow必需填写。表示水平阴影的位置。允许负值v-shadow必需填写。表示垂直阴影的位置。允许负值blur可选。表示模糊距离spread可选。表示阴影的尺寸color可选。表示阴影的颜色。请参阅 CSS 颜色值inset可选。表示将外部阴影(out

31、set)改为内部阴影企业级卓越人才培养（信息类专业集群）CSS背景属性是CSS3中一个属性，通常用background来表示，主要是用来设置网页的背景，例如：背景颜色、背景图片等CSS背景属性background-color属性background-image属性background-repeat属性设置背景颜色通常使用background-color属性，该属性有三种表示方式：颜色名、RGB值、十六进制数。最常用的表示方式为十六进制数在网页添加背景图片通常使用background-image属性，在 H T M L 5 中 添 加 背 景 图 片 的 代 码 为：,而在CSS3中添加背景图片

32、为：bodybackground-image:url(图片名.jpg);设置图片平铺方向通常使用background-repeat属性，该属性必须在使用背景图片（background-image）属性的基础上使用，不可以单独使用 背景属性背景属性background-position属性背景定位通常使用background-position属性，该属性的值有三种方式background-position 属性的默认设置的值是top left。background-attachment属性定义背景图片随滚动轴的移动方式通常使用background-attachment属性，在没有对backgro

33、und-attachment属性进行设置之前，background-attachment的默认属性值为scroll企业级卓越人才培养（信息类专业集群）12transition是实现背景图像过渡的效果的属性，是HTML5增加属性transform是实现图形变形的属性HTML5图像过渡图像过渡和变形和变形transition属性transform属性值描述property表示设置过渡效果的 CSS 属性的名称transition-duration表示完成过渡效果需要多少秒或毫秒transition-timing-function表示速度效果的速度曲线transition-delay表示过渡效果何时

34、开始值描述none表示不进行转换matrix(n,n,n,n,n,n)表示 2D 转换，使用六个值的矩阵matrix3d(n,n,n,n,n,n,n,n,n,n,n,n,n,n,n,n)表示 3D 转换，使用 16 个值的 4x4 矩阵translate(x,y)表示 2D 转换translate3d(x,y,z)表示 3D 转换scale(x,y)表示 2D 缩放转换scale3d(x,y,z)表示转换，只是用 X 轴的值企业级卓越人才培养（信息类专业集群）05 05 任务实施任务实施第一步：头部样式制作分为三部分：网站logo、搜索框、搜索按钮，其中网站logo是使用的图片标签，搜索框和搜

35、索按钮是表单标签第三步：主体部分主要包括导航栏和景点推荐部分第四步：底部信息样式设置，版权信息内容为Copyright 2016 ，该内容为一个段落，使用段落标签 任务实施任务实施企业级卓越人才培养（信息类专业集群）06 06 任务总结任务总结任务技能任务技能任务实施任务实施任务拓展任务拓展任务描述任务描述 本项目通过去哪儿网旅游网站旅游目的地推荐网页的训练，熟悉了HTML5中的图像标签、CSS的背景设置、图像的设置以及CSS3.0中新增关于图片的便签的使用，学会在网页中合理地插入图像和应用图片设计景点推荐网页的方法 任务总结任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载：

36、 企业级卓越人才培养（信息类专业集群）01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 01 学习目标学习目标 学习目标学习目标010203掌握列表标签的属性和样式掌握表格的创建和属性掌握CSS3新增属性学习目标 通过实现衣世界旗舰店主界面，学习列表标签的使用和表格的创建等知识。企业级卓越人才培养（信息类专业集群）02 02 学习路径学习路径 学习路径学习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任务描述 01 情境导入 02 功能描述03 基本框架 04 开发环境 任务描述任务描述企业级卓越人才培养（信息类专业集群）情境导入

37、情境导入随着时代的发展，购物网站越来越多，已经成为我们生活不可或缺的一部分。而在编写购物网站的界面时，通常使用列表标签，我们在编写导航栏、图片排版、商品类型的排版中都需要用到列表标签。本次任务主要是实现衣世界旗舰店主界面设计。企业级卓越人才培养（信息类专业集群）功能描述功能描述头部包括衣世界的logo、商家信息等 01 02 03主体包括商品的图片、商品的介绍底部包括本站点的版权信息企业级卓越人才培养（信息类专业集群）基本框架基本框架企业级卓越人才培养（信息类专业集群）系统环境Windows 7系统及以上系统软件环境服务器浏览器Sublime TextTomcat 7.0电脑端：火狐浏览器 谷

38、 歌 浏 览器手机端：Webkit内核浏览器 Android手机内置 浏览器 开发环境开发环境企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能任务技能 列表的作用 HTML5文本列表标签 CSS列表标签属性 HTML5创建表格 CSS定位 任务技能任务技能企业级卓越人才培养（信息类专业集群）建设制造强国列表标签是HTML语言中不可或缺的标签，列表标签在网页布局时起到了关键的作用，在美化页面时，用CSS样式对列表进行修饰可以使页面的效果达到我们想要的效果 列表的作用列表的作用企业级卓越人才培养（信息类专业集群）无序列表1有序列表2定义列表3无序列表类似于Word中的项目符号，无序

39、列表项目排列没 有 顺 序，以 符 号 作 为 子 项 的 标 识，使 用 一 组标签，该标签中包含多组元素，其中每组均为一个列表有序列表用标签表示，必须成对出现，列表内容用标签表示，内容前面的符号一般有：字母、数字和罗马数字等定义列表由自定义列表和自定义列表项组成，自定义列表以标签（definition lists）开始，每个自定义列表项以（definition title）开始，每个自定义列表项的定义以（definition description）开始HTML5文本列表文本列表企业级卓越人才培养（信息类专业集群）list-style-image1list-style-position2l

40、ist-style-type3list-style-image是定义列表内容前显示的图片的属性，将图像设置为列表项标志list-style-position是定义列表项的位置的属性，其属性值为：outside、insidelist-style-type为列表显示类型，有9种常见属性值。CSS列表标签属性列表标签属性值描述disc默认值。实心圆circle空心圆square实心方块decimal阿拉伯数字lower-roman小写罗马数字企业级卓越人才培养（信息类专业集群）表格的基本结构1定义表格的表头单元格2合并单元格3在编写页面时，表格标签是非常重要的标签，在美化界面是经常用表格标签来对文字

41、和图片进行排版。在HTML中用标签表示表格，表格标签必须成对出现，是表格的行标签，是表格的单元格标签，表示表格的一行有多少个单元格和每个单元格的内容表格中常见的表头单元格分为垂直和水平两种。在HTML5中合并单元格的两种方式为：上下合并单元格、左右合并单元格。合并单元格的属性值为colspan、rowpan HTML5创建表格创建表格企业级卓越人才培养（信息类专业集群）12 relative属性为相对定位；脱离文档流的布局，但还在文档流原先的位置遗留空白区域。定位的起始位置为此元素原先在文档流的位置。absolute属性用于绝对定位；脱离文档流的布局，遗留下来的空间由后面的元素填充。定位的起始

42、位置为最近的父元素(postion不为static)，否则为body文档本身。CSS定位定位relative属性absolute属性企业级卓越人才培养（信息类专业集群）05 05 任务实施任务实施输入标题输入标题输入标题第一步：衣世界旗舰店主界面的头部包括旗舰店的logo和店铺标题两部分，其中店铺的logo是作为背景图片添加到界面中第二步：界面的主体包括：商品推荐标题、商品图片和介绍第三步：添加网站信息点击输入说明文字点击输入说明文字点击输入说明文字 任务实施任务实施企业级卓越人才培养（信息类专业集群）06 06 任务总结任务总结任务技能任务技能任务实施任务实施任务拓展任务拓展任务描述任务描述

43、 通过本项目的学习，掌握HTML5列表标签、CSS列表属性、表格属性和定位属性等，学会在网页中合理地使用列表、表格和CSS定位属性展示相关信息，学会了应用列表、表格以及CSS定位设计商品信息展示网页的方法。任务总结任务总结企业级卓越人才培养（信息类专业集群）谢谢观赏PPT模板下载： 企业级卓越人才培养（信息类专业集群）01 学习目标 02 学习路径 03 任务描述 04 任务技能 05 任务实施 06 任务总结01 01 学习目标学习目标 学习目标学习目标010203了解表单的概念了解表单元素的类型和属性掌握CSS3设置表单的外观学习目标 通 过 实 现 携程旅游用户注册界面，学习表单的类型及

44、相关属性，以 及 使 用CSS3改变表单外观的技能企业级卓越人才培养（信息类专业集群）02 02 学习路径学习路径 学习路径学习路径企业级卓越人才培养（信息类专业集群）03 03 任务描述任务描述 01 情境导入 02 功能描述03 基本框架 04 开发环境 任务描述任务描述企业级卓越人才培养（信息类专业集群）情境导入情境导入随着网络的发展浏览网站已经成为人们生活中必不可少的一部分，然而当我们进入一个新的网站的时候通常需要先注册一个账号然后再登录账号。我们所见到的登录、注册页面通常是使用HTML中表单部分的知识来编写出来的，本次任务主要是实现携程旅游用户注册界面设计。企业级卓越人才培养（信息类

45、专业集群）功能描述功能描述头 部 包 括 携 程 旅 游 的logo 01 02 03主体包括用户名、手机号等底部包括网站信息企业级卓越人才培养（信息类专业集群）基本框架基本框架企业级卓越人才培养（信息类专业集群）系统环境Windows 7系统及以上系统软件环境服务器浏览器Sublime TextTomcat 7.0电脑端：火狐浏览器 谷 歌 浏 览器手机端：Webkit内核浏览器 Android手机内置 浏览器 开发环境开发环境企业级卓越人才培养（信息类专业集群）04 04 任务技能任务技能任务技能 表单的概述 表单基本元素的使用 HTML5新增input属性 任务技能任务技能企业级卓越人才

46、培养（信息类专业集群）1表单的语法和属性2表单中的按钮标签主要是实现用户信息储存的功能，当用户点击按钮之后用户的信息会储存到服务器中，然后由服务器将用户信息上传到数据库中或者将相关信息返回到主页面中表单的标签为标签，表单的五个常用属性分别为：name、method、action、enctype、t a r g e t。代 码 的 基 本 格 式 为：表单的概述表单的概述表单的介绍企业级卓越人才培养（信息类专业集群）文本输入框1密码输入框2文本域3标签是文本输入框的标签，文本输入框允许用户输入和编辑文本密码输入框是一种特殊的文本输入框，主要用于输入保密信息，在浏览器中显示为黑点或者其他符号，增加

47、了文本输入框的安全性标签是文本域的标签，设置文本域的大小有两种方式：H T M L 格 式：。CSS格式：textareawidth:50px;height:30px;表单基本元素表单基本元素属性值含义id标示一个文本框name文本框名value文本框的初始值size文本框的长度maxlength在单行文本框中能够输入最大的字符数企业级卓越人才培养（信息类专业集群）单选按钮4复选框5下拉选择框6是单选按钮的HTML代码，单选按钮通常在需要用户在两个或多个选项中选择一个时使用是复选框的HTML代码，复选框通常在需要用户在两个或多个选项中选择一个或多个时使用下拉列表框包括两个控件：列表控件、选项控

48、件，HTML标签分别为：、表单基本元素表单基本元素属性值含义name单选按钮组的名称，同一组按钮有相同名称value单选按钮进行数据传递时的选项值checked默认选择项属性值含义name复选框组的名称，同一组按钮都必须用同一个名称value复选框进行数据传递时的选项值checked默认选择项企业级卓越人才培养（信息类专业集群）7提交按钮和重置按钮8在 H T M L 中 普 通 按 钮 一 般 用 代 码：表示在 H T M L 中 提 交 按 钮 一 般 用 代 码 表示，重置按钮一般用代码表示，提交按钮的功能是提交用户信息到服务器中，重置按钮的功能是清空用户所输入的信息普通按钮 表单基本

49、元素表单基本元素属性值事件name普通按钮的名称value按钮上显示的文字onmousedown用户按下鼠标链时触发的事件onmouseup鼠标链抬起时触发的事件onclick点击按钮事件（包括鼠标链按下和抬起两个动作）企业级卓越人才培养（信息类专业集群）URL1E-mail2number3U R L 属 性 的 H T M L 代 码 为，添加URL属性的主要作用是用户在输入信息时，输入的内容必须是一个URL地址才可以提交成功，否则无法提交Email属性的H TM L代 码 为。Email属性的主要作用是用户输入邮箱时，判断所输入的邮箱是否符合邮箱的格式number属性的HTML代码为：。用

50、户可以直接输入数字或者通过单击微调框中的向上或向下按钮选择数字 HTML5新增新增input企业级卓越人才培养（信息类专业集群）range4date5placeholder6range属性的HTML代码为，用户可以使用max、min和step属性控制控件的范围，其中min和max分别为控制控件的最小值和最大值，step为每单击一次跳转的步数在HTML5中日期和时间的属性包括：date、datetime、datetime-local、month、week和timeplaceholder属性描述输入域所期待的值。以下标签中可以使用placeholder属性：text、search、url、tele