传智播客韩顺平轻松搞定网页设计divcss.pptx

高级软件人才实作培训专家高级软件人才实作培训专家!北京传智播客教育 轻松搞定网页设计之轻松搞定网页设计之div+cssdiv+css讲师：韩顺平email:qq:2317702760高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平内容介绍内容介绍1.初识css2.块级元素和行内元素3.css核心内容3.1 标准流3.2 盒子模型3.3 浮动3.4 定位4.css综合案例4.1 盒子模型经典案例4.2 仿sohu首页面布局高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平学习目标学习目标掌握css的基本用法掌握css的四种选择器用法高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平初始初始css 使用使用css的必要性的必要性 请看一个问题请看一个问题案例HtmlPage1.htm这是一个栏目风格不同的页面,如果,我希望统一设置它们的样式该怎么办?高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平初始初始css 使用使用css的必要性的必要性 解决之道解决之道-css对案例HtmlPage1.htm，进行改造，使用css来统一设置所有栏目的样式。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平初始初始css 使用使用css的必要性的必要性 请再思考一个问题请再思考一个问题 汶川大地震时汶川大地震时,所有的网站的图片所有的网站的图片,都变成黑白的了都变成黑白的了,这个是怎么实这个是怎么实现的呢现的呢?案例案例HTMLPage2.htm这里用到了滤镜技术这里用到了滤镜技术.高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css的三种选择器的三种选择器 选择器选择器 选择器是css中非常重要的概念.css中有四种不同的选择器 类选择器，又叫class选择器 id选择器 html元素选择器 通配符选择器 简单的说,选择器就是在css中创建，而在网页页面(html,jsp,php,)中使用。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css的三种选择器的三种选择器 类选择器类选择器 .类选择器名类选择器名 属性名属性名:属性值属性值;我们在HtmlPage1.html就使用到了类选择器,这里再给大家举一个例子:HTMLPage.htm高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css的三种选择器的三种选择器 id选择器选择器 我们在我们在HTMLPage.htm中给大家演示中给大家演示id选择器的用法选择器的用法:如图如图:#id选择器名选择器名 属性名属性名:属性值属性值;高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css的三种选择器的三种选择器 html选择器选择器 我们在我们在HTMLPage.htm中给大家演示中给大家演示html选择器的用法选择器的用法:如图如图:如果我们希望网页中默认字体是如果我们希望网页中默认字体是橙色，我们应当怎么处理。橙色，我们应当怎么处理。html元素名称元素名称 属性名属性名:属性值属性值;再比如，我们希望所有的超链接 (1)默认样式是 黑色，24px,没有下划线 (2)当鼠标移动到超链接时，自动出现下划线 (3)点击后,超链接变成 红色。这又该怎么实现呢?test.html高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css的三种选择器的三种选择器 通配符选择器通配符选择器 如果希望所有的元素都符合某一种样式，可以使用通配符选择如果希望所有的元素都符合某一种样式，可以使用通配符选择器。器。*margin:0;padding:0 可以让所有可以让所有html元素的外边距和内边距都默认为元素的外边距和内边距都默认为0，有时特别有用。，有时特别有用。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css的三种选择器的三种选择器 选择器深入探讨选择器深入探讨 我前面讲的都非常简单我前面讲的都非常简单,实际上实际上css的选择器使用还有很多您需要注意的的选择器使用还有很多您需要注意的地方，如果不注意根本就不能驾驭地方，如果不注意根本就不能驾驭css父子选择器父子选择器请大家看一个图请大家看一个图:HTMLPage.htm如果希望特别强调如果希望特别强调非常非常两个字两个字,该该如何处理如何处理?方案方案:a.id选择器选择器b.class选择器选择器c.父子选择器父子选择器高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css的三种选择器的三种选择器 选择器深入探讨选择器深入探讨 父子选择器父子选择器类选择器和类选择器和id选择器都可以有父子选择器选择器都可以有父子选择器.*父子选择器可以扩展的.高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css的三种选择器的三种选择器 选择器深入探讨选择器深入探讨 一个元素可以同时有一个元素可以同时有id选择器和类选择器选择器和类选择器请看一个案例请看一个案例:要实现新闻要实现新闻1和其它的新闻和其它的新闻样式不样式不一样一样,这怎么实现这怎么实现?高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css的三种选择器的三种选择器 选择器深入探讨选择器深入探讨 一个元素可以同时有一个元素可以同时有id选择器和类选择器选择器和类选择器当当id选择器和类选择器发生冲突时选择器和类选择器发生冲突时,id选择器优先级选择器优先级高于高于类选择类选择器器.优先级优先级:id选择器选择器 类选择器类选择器比如比如:id选择器指定字体为红色选择器指定字体为红色,而类选择器指定字体和蓝色，则而类选择器指定字体和蓝色，则页面显示红色页面显示红色.高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css的三种选择器的三种选择器 选择器深入探讨选择器深入探讨 一个元素最多有一个一个元素最多有一个id选择器选择器,但是可以有多个类选择器但是可以有多个类选择器请看一个案例请看一个案例:要实现新闻要实现新闻3有下划线并是斜体该有下划线并是斜体该怎么实现怎么实现?方案方案:a.id选择器选择器b.类选择器类选择器当一个元素被多个类选择器修饰时，它们用空格隔开当一个元素被多个类选择器修饰时，它们用空格隔开.高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css的三种选择器的三种选择器 选择器深入探讨选择器深入探讨一个元素最多有一个一个元素最多有一个id选择器选择器,但是可以有多个类选择器，当类但是可以有多个类选择器，当类选择器发生冲突的时候，又以哪个为准呢选择器发生冲突的时候，又以哪个为准呢?我们用一个案例来说明我们用一个案例来说明.高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css的三种选择器的三种选择器 选择器深入探讨选择器深入探讨 当一个元素被当一个元素被id选择器选择器,类选择器类选择器,html选择器同时限定时，优先选择器同时限定时，优先级是级是:id选择器选择器类选择器类选择器html选择器选择器通配符选择器通配符选择器.高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css的三种选择器的三种选择器 选择器深入探讨选择器深入探讨 在在css文件中，如果有多个类文件中，如果有多个类/id选择器它们都有相同的部分，我选择器它们都有相同的部分，我们可以把相同的们可以把相同的css样式放在一起样式放在一起,见案例。见案例。案例:my.css/*招生广告*/.ad_stu width:136px;height:196px;background-color:#FC7E8C;margin:5px 0 0 5px;float:left;/*广告2*/.ad_2 background:#7CF574;height:196px;width:457px;float:left;margin:5px 0 0 6px;/*房地产广告*/.ad_house background:#7CF574;height:196px;width:152px;float:left;margin:5px 0 0 6px;案例:my.css/*招生广告*/.ad_stu width:136px;background-color:#FC7E8C;margin:5px 0 0 5px;/*广告2*/.ad_2 background:#7CF574;width:457px;margin:5px 0 0 6px;/*房地产广告*/.ad_house background:#7CF574;width:152px;margin:5px 0 0 6px;.ad_stu,.ad_2,.ad_househeight:196px;float:left;高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css的三种选择器的三种选择器 选择器选择器课堂小练习课堂小练习选择器练习选择器练习,请使用适当的请使用适当的css选择器，完成下面的页面选择器，完成下面的页面.练习练习2.网页所有的超链接网页所有的超链接,要求这样的格式要求这样的格式:(1)默认样式是默认样式是红色，红色，24px,华文新魏字体没有华文新魏字体没有下划线下划线(2)当鼠标移动到超链接时，当鼠标移动到超链接时，自动出现下划线自动出现下划线,字体大小变成字体大小变成40px,字体变成字体变成宋体宋体.green色色.(3)点击后点击后,超链接变成超链接变成灰色。灰色。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平块元素和行内元素块元素和行内元素块元素和行内元素块元素和行内元素-概念概念行内元素行内元素(inlineelement),又叫内联元素又叫内联元素:内联元素只能容纳文本或者其他内联元素内联元素只能容纳文本或者其他内联元素,常见内联元素常见内联元素块元素块元素(blockelement):块元素一般都从新行开块元素一般都从新行开,可以容纳文本可以容纳文本,其它内联元素和其它块元素，其它内联元素和其它块元素，即使内容不能占满一行，块元素也要把整行占满。常见块元素即使内容不能占满一行，块元素也要把整行占满。常见块元素举例说明举例说明:HTMLPage3.htm高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平块元素和行内元素块元素和行内元素 块元素和行内元素块元素和行内元素-区别区别行内元素只占内容的宽度行内元素只占内容的宽度,块元素内容不管内容多少要占全行。块元素内容不管内容多少要占全行。行内元素只能容纳文本和其它行内元素，块元素可以容纳文本，行内元素只能容纳文本和其它行内元素，块元素可以容纳文本，行内元素和块元素行内元素和块元素.(与浏览器类版本和类型有关与浏览器类版本和类型有关)一些一些css属性对行内元素不生效，比如属性对行内元素不生效，比如margin,left,right,width,height.建议建议尽可能使用块元素定位定位。(与浏览器类版本和类型有关与浏览器类版本和类型有关)高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平块元素和行内元素块元素和行内元素 块元素和行内元素块元素和行内元素-相互转换相互转换 请注意请注意:行内元素和块元素可以相互转换行内元素和块元素可以相互转换display:inline-转为行内元素转为行内元素(比如比如div)display:block-转为块元素转为块元素(比如比如a)案例案例HTMLPage3.htm高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css文件的相互引用文件的相互引用a.css b.css c.css 如果希望在a.css 中使用到b.css c.css 的选择器，可以通过import 指令来完成import url(“被引用的css文件”);如果希望在html 或者 php文件中引用 某个 xxx.css 也可以再 标签中import url(“某个css文件”);高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容流流 标准流标准流/非标准流非标准流 流流:在现实生活中就是流水在现实生活中就是流水,在网页设计中就是指元素在网页设计中就是指元素(标签标签)的排列的排列方式。方式。标准流标准流:元素在网页中就象流水，排在前面的元素元素在网页中就象流水，排在前面的元素(标签标签)内容前面内容前面出现，排后面的元素出现，排后面的元素(标签标签)内容后面出现。内容后面出现。案例案例Sfloat.htm非标准流非标准流:当某个元素当某个元素(标签标签)脱离了标准流脱离了标准流比如因为相对定位比如因为相对定位排列排列，我们统称为非标准流排列。关于非标准流，我们在定位小节，我们统称为非标准流排列。关于非标准流，我们在定位小节讲解。讲解。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容盒子模型盒子模型 盒子模型盒子模型-概念概念 要搞清盒子模型，就必须先明白下面几个概念要搞清盒子模型，就必须先明白下面几个概念:在网页设计中常听的属性名：内容在网页设计中常听的属性名：内容(content)、填充、填充(padding)、边框、边框(border)、边界、边界(margin)，CSS盒子模式都具备这些属性。盒子模式都具备这些属性。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容盒子模型盒子模型 盒子模型盒子模型-案例案例 我们看一个案例，帮助大家理解盒子模型我们看一个案例，帮助大家理解盒子模型:box1.htm考虑如何实现网页布局考虑如何实现网页布局高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容盒子模型盒子模型 盒子模型盒子模型-理解理解 我们可以把盒子模型转移到我们日常生活中的盒子我们可以把盒子模型转移到我们日常生活中的盒子(箱子箱子)上来理解，日常生活中所见的盒子也具有这些属性，所以叫上来理解，日常生活中所见的盒子也具有这些属性，所以叫它盒子模式。那么内容就是盒子里装的东西；而填充就是怕它盒子模式。那么内容就是盒子里装的东西；而填充就是怕盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震盒子里装的东西（贵重的）损坏而添加的泡沫或者其它抗震的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的的辅料；边框就是盒子本身了；至于边界则说明盒子摆放的时候的不能全部堆在一起，要留一定空隙保持通风，同时也时候的不能全部堆在一起，要留一定空隙保持通风，同时也为了方便取出嘛。为了方便取出嘛。与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子与现实生活中盒子不同的是，现实生活中的东西一般不能大于盒子,否否则盒子会被撑坏的，而则盒子会被撑坏的，而CSS盒子具有弹性，里面的东西大过盒子本身最多盒子具有弹性，里面的东西大过盒子本身最多把它撑大把它撑大,但它不会损坏的。但它不会损坏的。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容盒子模型盒子模型 盒子模型盒子模型-进一步理解进一步理解高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容盒子模型盒子模型 盒子模型盒子模型-课堂小练习课堂小练习请用请用css的盒子模型，完成上面的网页的盒子模型，完成上面的网页.高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容盒子模型盒子模型 盒子模型盒子模型-进一步理解进一步理解 盒子模型远没有我讲的这么简单，比如大家再看一个案例盒子模型远没有我讲的这么简单，比如大家再看一个案例:这种布局在很多大型网站上都有使用，我们可以把它看做是一个模这种布局在很多大型网站上都有使用，我们可以把它看做是一个模式来套用式来套用,它的各个边距都可调节它的各个边距都可调节,从而达到你想要的布局从而达到你想要的布局,非常实用。非常实用。但是要做成这种效果，需要用到但是要做成这种效果，需要用到css另外一个核心知识另外一个核心知识-浮动，所以我浮动，所以我们回头再做这个案例。们回头再做这个案例。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容浮动浮动 浮动浮动 浮动是浮动是css中很重要的概念，必须掌握。浮动涉及到左浮动、中很重要的概念，必须掌握。浮动涉及到左浮动、右浮动、右浮动、清除浮动清除浮动例子例子:请在页面中放置三个请在页面中放置三个div,背景是粉红，背景是粉红，宽度宽度150px,高高100px边框，边框1px,蓝色蓝色,实线。实线。myFloat.htm高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容浮动浮动 浮动浮动 如果我们要实现如下图形，就可以如果我们要实现如下图形，就可以使用右浮动使用右浮动,当把当把div1向右浮动向右浮动时时,它脱离它脱离标准流并且向右移动，直到它的右边缘碰到包含框的右边缘并且向右移动，直到它的右边缘碰到包含框的右边缘.高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容浮动浮动 浮动浮动 如果我们要实现如下图形，就可以如果我们要实现如下图形，就可以使用左浮动使用左浮动,如果把所有三个框如果把所有三个框都向左移动，那么框都向左移动，那么框1向左浮动直到碰到包含框，另外两个框向左向左浮动直到碰到包含框，另外两个框向左浮动直到碰到前一个浮动框。浮动直到碰到前一个浮动框。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容浮动浮动 浮动浮动 如果我们的如果我们的div框很多框很多,外面的框无法容纳水平排列的浮动外面的框无法容纳水平排列的浮动div元素元素，那么其它浮动块向下移动，那么其它浮动块向下移动，直到有直到有足够的空间足够的空间。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容浮动浮动 浮动浮动 如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮如果浮动元素的高度不同，那么当它们向下移动时可能被其它浮动元素动元素“卡住卡住”：高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容浮动浮动 浮动浮动你可以这么理解浮动你可以这么理解浮动:如果一个元素右如果一个元素右/左浮动则左浮动则:它本身会尽可能向右它本身会尽可能向右/左移动，直到碰到边框或者左移动，直到碰到边框或者别的浮动元素别的浮动元素,特别强调浮动对块元素和行内元素都特别强调浮动对块元素和行内元素都生效生效!元素向右元素向右/左浮动，就相当于让出自己的左左浮动，就相当于让出自己的左/右边右边,别别的元素就会在它的左的元素就会在它的左/右边排列。右边排列。这里我们在看一个案例这里我们在看一个案例【myFloat2.htm】，来帮助大家理解上面，来帮助大家理解上面的两句话。的两句话。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容浮动浮动 浮动浮动-清除浮动清除浮动 如果不希望别的元素在某个元素的左边或者右边，可以使用清除浮动的如果不希望别的元素在某个元素的左边或者右边，可以使用清除浮动的方法方法clear:right;clear:left;clear:both这里我们在看一个案例这里我们在看一个案例myFloat3.htm,来帮助大家理解上面的两句话。来帮助大家理解上面的两句话。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容浮动浮动 浮动浮动-清除浮动清除浮动 清除浮动是一个不太好理解的知识点，这个在后面的项目中我们再进一清除浮动是一个不太好理解的知识点，这个在后面的项目中我们再进一步讨论。步讨论。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容定位定位 定位定位-基本概念基本概念 CSS定位定位(Positioning)属性允许你对元素进行定位属性允许你对元素进行定位.position属性值：属性值：static(默认值默认值)：元素框正常生成。块级元素生成一个矩形框，作为元素框正常生成。块级元素生成一个矩形框，作为文档流文档流/标准流的一部分，行内元素则会创建一个或多个行框，置于其父标准流的一部分，行内元素则会创建一个或多个行框，置于其父元素中。元素中。relative：元素框偏移某个距离。元素仍保持其未定位前的形状，它元素框偏移某个距离。元素仍保持其未定位前的形状，它原本所占的空间仍保留原本所占的空间仍保留,从这一角度看，好像该元素仍然在文档流从这一角度看，好像该元素仍然在文档流/标准流标准流中一样。中一样。absolute：元素框从文档流完全删除，并相对于其包含块定位。包含元素框从文档流完全删除，并相对于其包含块定位。包含块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流块可能是文档中的另一个元素或者是初始包含块。元素原先在正常文档流中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个中所占的空间会关闭，就好像元素原来不存在一样。元素定位后生成一个块级框，而不论原来它在正常流中生成何种类型的框。块级框，而不论原来它在正常流中生成何种类型的框。fixed：元素框的表现类似于将元素框的表现类似于将position设置为设置为absolute，不过其包，不过其包含块是视窗本身。含块是视窗本身。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容定位定位 定位定位-relative 大家是不是有点大家是不是有点:我还是举例说明我还是举例说明:HTMLPage6.htm高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平css核心内容核心内容定位定位 定位定位-absolute 大家是不是有点大家是不是有点:再看一个例子再看一个例子:HTMLPage6.htm这里我们可以使用绝对定位这里我们可以使用绝对定位.高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平主讲 韩顺平css核心内容核心内容定位定位 定位定位-absolute 这里我们特别强调一点这里我们特别强调一点,absolute定位是对离自己最定位是对离自己最近的那个非标准流盒子而言近的那个非标准流盒子而言的。的。通过一个例子说明通过一个例子说明:HTMLPage6.htm轻松搞定网页设计轻松搞定网页设计(html+css+javasript)高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平主讲 韩顺平css核心内容核心内容定位定位 定位定位-static positioning默认值是默认值是static,对定位对定位left,right不生效。不生效。案例案例HTMLPage6.htm.轻松搞定网页设计轻松搞定网页设计(html+css+javasript)高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平主讲 韩顺平css综合案例综合案例 盒子模型经典案例盒子模型经典案例 在学习完在学习完css核心内容后，我们现在就可以完成一些较为综合大案例核心内容后，我们现在就可以完成一些较为综合大案例,案案例例HTMLPage4.htm这种布局在很多大型网站上都有使用，我们可以把它这种布局在很多大型网站上都有使用，我们可以把它看做是一个模式来套用看做是一个模式来套用,它的各个边距都可调节它的各个边距都可调节,从而达到你想要的布局从而达到你想要的布局,非非常实用。常实用。轻松搞定网页设计轻松搞定网页设计(html+css+javasript)高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平主讲 韩顺平css综合案例综合案例 仿仿sohu网站首页布局网站首页布局 再看一个综合案例再看一个综合案例HTMLPage5.htm,当你掌握后，就具备编写较为复杂当你掌握后，就具备编写较为复杂的页面的基本功。的页面的基本功。轻松搞定网页设计轻松搞定网页设计(html+css+javasript)高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平主讲 韩顺平今天就到这里，谢谢大家今天就到这里，谢谢大家高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平了解了解html的基本概念的基本概念理解理解html的运行基本原理的运行基本原理掌握掌握html的一些基本用法的一些基本用法能写出简单的网页能写出简单的网页学习目标学习目标高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 htmlhtml是什么是什么HTMLHTML（HyperText Mark-up LanguageHyperText Mark-up Language）即超文本）即超文本标记语言或超文本链接标示语言，是目前网络上应用标记语言或超文本链接标示语言，是目前网络上应用最为广泛的语言，也是构成网页文档的主要语言。最为广泛的语言，也是构成网页文档的主要语言。HTMLHTML文本是由文本是由HTMLHTML命令组成的描述性文本，命令组成的描述性文本，HTMLHTML命令命令可以说明文字、图形、动画、声音、表格、链接等。可以说明文字、图形、动画、声音、表格链接等。HTMLHTML的结构包括头部（的结构包括头部（HeadHead）、主体（）、主体（BodyBody）两大部）两大部分，其中头部描述浏览器所需的信息，而主体则包含分，其中头部描述浏览器所需的信息，而主体则包含所要说明的具体内容。所要说明的具体内容。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 htmlhtml可以做什么可以做什么HTMLHTML可以编写静态网页可以编写静态网页.该静态网页可以包括文字、图形、动画、声音、该静态网页可以包括文字、图形、动画、声音、表格、链接。从而构成一个个漂亮的网页。表格、链接。从而构成一个个漂亮的网页。给大家看几个漂亮的网页吧给大家看几个漂亮的网页吧!高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 htmlhtml发展历史发展历史1993标记语标记语言第一版言第一版1995html2.01996html3.2w3c推荐标准推荐标准1999html4.0.1w3c推荐标准推荐标准2000 xhtml1.0w3c推荐标准推荐标准2001xhtml1.1w3c推荐标准推荐标准2008html5蒂姆蒂姆伯纳斯一李伯纳斯一李万维网之父万维网之父html设计者设计者w3c创始人创始人 高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 w3cw3c的介绍的介绍W3C是英文是英文WorldWideWebConsortium的缩的缩写，中文意思是写，中文意思是W3C理事会或万维网联盟。理事会或万维网联盟。W3C于于1994年年10月在麻省理工学院计算机科学实验室成立月在麻省理工学院计算机科学实验室成立。创建者是万维网的发明者。创建者是万维网的发明者TimBerners-Lee。W3C组织是对网络标准制定的一个非赢利组织，像组织是对网络标准制定的一个非赢利组织，像HTML、XHTML、CSS、XML的标准就是由的标准就是由W3C来来定制。定制。W3C会员（大约会员（大约500名会员）包括生产技术产名会员）包括生产技术产品及服务的厂商、内容供应商、团体用户、研究实验品及服务的厂商、内容供应商、团体用户、研究实验室、标准制定机构和政府部门，一起协同工作，致力室、标准制定机构和政府部门，一起协同工作，致力在万维网发展方向上达成共识。在万维网发展方向上达成共识。蒂姆蒂姆伯纳斯一李伯纳斯一李 高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 htmlhtml和和xhtmlxhtml区别区别 html-xhtml-xmlhtml语言本身有一些缺陷语言本身有一些缺陷(比如内容和形式不能分离比如内容和形式不能分离,标记单一标记单一,数据不数据不能复用等能复用等),随着随着xml的兴起，的兴起，xml越来越受到国际认可，所以人们希望越来越受到国际认可，所以人们希望xml来弥补来弥补html的不足的不足,但是目前有成千上万的网页都是但是目前有成千上万的网页都是html编写的，所以完编写的，所以完全使用全使用xml来替代来替代html还为时过早还为时过早,于是于是w3c在在2000推出推出xhtml1.0，建立，建立XHTML的目的就是实现的目的就是实现HTML向向XML的过渡。的过渡。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 htmlhtml项目演示项目演示 高级邮箱高级邮箱 高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 htmlhtml项目演示项目演示 麦当劳导航麦当劳导航 高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 htmlhtml项目演示项目演示(可爱屋可爱屋)高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 htmlhtml项目演示项目演示(旅游岛旅游岛)高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 html项目演示项目演示(仿仿sohu首页面首页面)高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 htmlhtml运行原理运行原理本地运行本地运行 高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 htmlhtml运行原理运行原理远程访问运行远程访问运行 你的电脑你的电脑浏浏览览器器远程服务器远程服务器hello.html你可能产生的疑问你可能产生的疑问?ieie是怎样访问到是怎样访问到hello.html?(url)hello.html?(url)万维网是个什么东东万维网是个什么东东?可以使用apache来测试一下这个运行的效果!高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 万维网万维网(www)简略图简略图:wwwsohu子网子网高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 万维网万维网(www)-综合图综合图高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 html的开发工具的开发工具记事本记事本editplusvimfrontpagedwzendstudio其它的其它的ide高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 htmlhtml的基本结构的基本结构从下面从下面test.html我们可以看出我们可以看出html的基本结构的基本结构 这是我的第一个网页 这是我的第一个网页 你好！元素内容元素内容 htmlhtml的基本结构的基本结构高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 html的标记的标记/元素元素HTML标记是用来组成标记是用来组成HTML元素的元素的HTML标记用两个尖括号标记用两个尖括号”括起来括起来HTML标记一般是双标记，如标记一般是双标记，如和和前一个标记是起始标记前一个标记是起始标记,后一个标记为结束标记后一个标记为结束标记两个标记之间的文本是两个标记之间的文本是html元素的内容元素的内容某些标记称为某些标记称为“单标记单标记”,因为它只需单独使用就能完整地表达意思因为它只需单独使用就能完整地表达意思,如如html标记和标记和html元素可以看做是同一个概念，在我的课程中为统元素可以看做是同一个概念，在我的课程中为统一说法，就叫一说法，就叫html元素元素。html常用的元素参考常用的元素参考html语言教程语言教程(html版版)htmlhtml的标记的标记/元素介绍元素介绍高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 html的元素的属性的元素的属性 每个元素都有多个属性每个元素都有多个属性,每个属性有不同的属性值来修饰，从而达到每个属性有不同的属性值来修饰，从而达到不同的显示效果不同的显示效果.举例举例:htmlhtml元素的属性元素的属性段落标记段落标记字体标记字体标记size取值取值1到到7标题字体标题字体#=1，2，3，4，5，6字体加粗字体加粗高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 html的元素的属性的元素的属性关于每个元素，所包含的各个属性以及各个属性对应的属性值，请关于每个元素，所包含的各个属性以及各个属性对应的属性值，请各位同学参看：各位同学参看：htmlhtml语言教程语言教程(html(html版版)htmlhtml元素的属性元素的属性高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 HTML符号实体符号实体-介绍介绍在网页上显示一些特殊的符号在网页上显示一些特殊的符号,我们需要使用我们需要使用htmlhtml的符号实体的符号实体,有些有些人把它称为字符实体人把它称为字符实体,比如我们看一个小小的案例比如我们看一个小小的案例(html1_1.htmlhtml1_1.html)。为在网页上显示版权符号为在网页上显示版权符号,我们就需要使用我们就需要使用html的符号实体的符号实体©才能在网页上正确显示。才能在网页上正确显示。高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 HTML符号实体符号实体-一览表一览表 高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 html超链接超链接 a.htm代码：代码：老鼠爱大米老鼠爱大米齐秦北方的狼 b.htm代码：代码：我听见你的声音有种特别的感觉让我不断想不敢再忘记你我记得有一个人永远留在我心中返回返回 打开当前计算机系统中默认的电子邮件客户端软件，例如:OutLook Express html常用标记常用标记/元素元素-超链接超链接高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 html图像元素图像元素 html常用标记常用标记/元素元素-image高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 html表格表格html常用标记常用标记/元素元素-table高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 html表格表格-小练习小练习html常用标记常用标记/元素元素-table请用请用html编写如下网页编写如下网页高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 上机练习题上机练习题html常用标记常用标记/元素元素-table请用html编写如下网页高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 html列表列表-无序列表无序列表 的属性设定（常用）：例如：type=square 设定符号款式，其值有三种，如下，默认为 type=disc：type=disc 时的列项符号为实心圆点。type=circle 时的列项符号为空心圆。type=square 时的列项符号为空心正方形。html常用标记常用标记/元素元素-ul/li列表内容列表内容高级软件人才实作培训专家高级软件人才实作培训专家!主讲:韩顺平 html列表列表-有序列表有序列表称为顺序列表标记。称为顺序列表标记。则用以标示列表则用以标示列表项目。所谓顺序列表就是每一项有顺序，又称项目。所谓顺序列表就是每一项有顺序，又称编号列表。编号列表。的属性设定（常用）：的属性设定（常用）：例如：例如：type=i设定数目款式，其值有五种，请参考设定数目款式，其值有五种，请参考右表，内右表，内定为定为type=1。start=4设定开始数目，不论设定了哪一数目款式，其设定开始数目，不论设定了哪一数目款式，其值只能是值只能是1,2,3.等整数，默认为等整数，默认为start=1。i可以取以下值中的任意一个：可以取以下值中的任意一个：1阿拉伯数字阿拉伯数字1,2,3,.a小写字母小写字母a,b,c,.A大写字母大写字母A,B,C,.i小写罗马数字小写罗马数字i,ii,iii,.I大写罗马数字大写罗马数字I,II,III,.。html常用标记常用标记/元素元素-ol/li列表内容列表内容高级软件人才实作培训专家高级软件人才实作培训专家!主讲: