html基础知识.ppt

单击此处编辑母版标题样式,单击此处编辑母版文本样式,第二级,第三级,第四级,第五级,*,Html,、,CSS,基础知识及应用,第一章：,Html,基础和网页构成,第,1,节：,Dreamweave,软件,第,2,节：,HTML,基础知识,第,3,节：网页构成基础,第二章：,CSS,盒模型基础介绍,第,1,节,:CSS,盒模型概念,第,2,节：盒模型的组成与特点,第,3,节：盒模型,3D,效果示例,操作：利用,Dreamweave,软件制作网页,第三章：,DIV+CSS,基础,第,1,节：网页效果与源代码,第,2,节：网页模型基础,第,3,节：网页的输出过程,操作：制作输出二栏式网页,目 录,第一章：,Html,基础和网页构成,第一章：,Html,基础和网页构成,第,1,节：,Dreamweave,软件,第,2,节：,Html,基础知识,第,3,节：网页构成基础,第一章：,Html,基础和网页构成,第,1,节：,Dreamweave,软件,使用,Dreamweave,软件：,建立站点,建立,Html,文档,建立,CSS,代码模式、设计模式、拆分模式,”F12”,预览,第,1,节：,Dreamweave,软件,第一章：,Html,基础和网页构成,第,2,节：,HTML,基础知识,HTML,简介：,Hypertext Markup Language,，超文本标记语言,描述性标记语言，用于描述超文本中内容的显示方式,基本的语法：,内容,元素可以设置,参数,和,值,，如,浏览器接收服务器,HTML,文件,-,浏览器解释标记，表达对应的功能,第,2,节：,Html,基础知识,无标题文档,第,2,节：,Html,基础知识,文档类型声明（规范和解释）,Html,元素及,XML,命名,head,元素，放置关于本文件的信息,title,元素，网页标题,body,元素，网页主体内容,meta,元素，网页相关属性,操作：新建,HTML,文档,内敛元素,inline,（和其他元素在一行显示）,a,、,b,、,strong,、,em,、,i,、,font,、,img,、,span,第,2,节：,Html,基础知识,HTML,元素：,块级元素,block,（总是另起一行开始）,结构块级元素,终端块级元素,多目标块级元素,CSS,盒模型概念,照片,宽度：,100,厘米,;,高度：,80,厘米,;,内距：,10,厘米,;,底色：白色,;,外框：,2,厘米 黑色 实线,;,一组照片,上空距：,20,厘米,;,右空距：,20,厘米,;,下空距：,20,厘米,;,左空距：,20,厘米,;,.pic,width:100cm;,height:80cm;,padding:10cm;,background:#ffffff;,border:2cm,#00000,solid;,.pic,margin-top:20cm;,margin-right:20cm;,margin-bottom:20cm;,margin-left:20cm;,第,2,节：盒模型的组成与特点,bottom,left,top,right,content,border,margin,padding,background-image,background-color,width,height,第,3,节：盒模型,3D,效果示例,bottom,left,top,right,content,border,margin,padding,background-image,background-color,内容区域原始点,坐标原始点,绝对定位,第,4,节：,CSS,基本概念,CSS,就是,Cascading Style Sheets,，中文翻译为“层叠样式表”，简称样式表。,层叠性就是继承性，样式表的继承规则是外部的元素样式会保留下来继承给这个元素所包含的其他元素。事实上，所有在元素中嵌套的元素都会继承外层元素指定的属性值，有时会把很多层嵌套的样式叠加在一起。,例如在,DIV,标记中嵌套,P,标记：,颜色,第,4,节：,CSS,基本概念,div,width:300px;,height:100px;,border:1px#ff0000 dotted;,background:#00ff00 url(bg.jpg)left top no-repeat;,CSS,定义格式：,选择符,属性,:,值,;,.pic width:100px;,第,4,节：,CSS,基本概念,选择符类型：,标记选择符：,HTML,元素名,例：,body background:#ffffff;,类选择符：,.,自定义命名,例：,.pic border:0px;,ID,选择符：,#,自定义命名,例：,#header margin:0px auto;,重复使用,一个页面使用一次,第,4,节：,CSS,基本概念,CSS,属性查询,第,4,节：,CSS,基本概念,选择符类型：,通配选择符,语法：*,属性,:,值,;,说明：选定文档目录树,(DOM),中的所有类型的单一对象。,示例：,*.div text-decoration:none;,选择符分组,语法：,E1,E2,E3,属性,:,值,;,说明：将同样的定义应用于多个选择符，以逗号分隔的方式并为组。,示例：,.td1,div a,body font-size:14px;,包含选择符,语法：,E1 E2 E3 ,属性,:,值,;,说明：选择所有被,E1,包含的,E2,。,示例：,.main div a font-size:14px;,第,4,节：,CSS,基本概念,类选择符,语法：,E.className,属性,:,值,;,说明：为对象的,class,属性,(,特性,),指定多于一个值,(className),，其方法是指定用空格隔开的一组样式表的类名。,例如：,。,示例：,div.note font-size:14px;/*,所有,class,属性值等于（包含）,note,的,div,对象字体尺寸为,14px*/,伪类及伪对象选择符,语法：,E:Pseudo-Classes,属性,:,值,;,E:Pseudo-Elements,属性,:,值,;,说明：特殊的类选择符。它的最大的用处就是可以对链接在不同状态下定义不同的样式效果。,示例：,a:link color:#F00;text-decoration:none/*,未访问的链接*,/,a:visited color:#0F0;text-decoration:none/*,已访问的链接*,/,a:hover color:#F0F;text-decoration:underline/*,鼠标在链接上*,/,a:active color:#00F;text-decoration:underline/*,激活链接*,/,第,4,节：,CSS,基本概念,HTML,中调用,CSS,方法：,行内式：,内嵌式：,链接式：,第,3,节：,CSS,基本概念,HTML,中调用,CSS,示例：,在线留言,行内式,内嵌式,链接式,第二章：,CSS,盒模型基础,第三章：,DIV+CSS,基础,第,1,节：网页效果与源代码,第,2,节：网页模型基础,第,3,节：网页的输出过程,第,1,节：网页效果与源代码,在线留言,联系我们,网站导航,|,加入收藏,|,设为首页,|,网页布局模型：,Flow Model（,流动模型）,Float Model（,浮动模型）,Layer Model（,层模型）,第,2,节：网页模型基础,流动模型（,Flow Model）,是,HTML,中默认的网页布局模式，在一般状态下，网页中元素的布局都是以流动模型为默认的显示方式。,一般状态，是指任何元素在没有定义拖出文档流定位方式属性（,position:absolute;,或,position:fixed;）、,没有定义浮动于左右的属性（,float:left;,或,float:right;）,时，这些元素都将具有流动模型的布局模式。,Flow Model（,流动模型）,第,2,节：,Flow Model,（流动模型）,第,2,节：,Flow Model,（流动模型）,浮动模型（,Float Model,）是完全不同于流动模型的另一种布局模型，它遵循浮动规则，但是仍然受流动模型带来的潜在影响。,任何元素在默认状态下是不浮动的，但都可以通过,CSS,定义为浮动于左右的属性（,float:left;,或,float:right;,）时定义为浮动。浮动模型汲取了流动模型和层模型的优点，以尽可能实现网页的自适应能力,。,Float Model（,浮动模型）,第,2,节：,Float Model,（浮动模型）,第,2,节：,Float Model,（浮动模型）,一个元素浮动至某一侧并停下的表现方式，,CSS,中使用,float,（浮动）属性来实现元素浮动的效果。浮动元素可以被移动至当前行的左侧或右侧，,float,的属性及其值为：,float:,left,;,元素依据文本流位于对象的左边。,float:,right,;,元素依据文本流位于对象的右边。,float:,none,;,元素不浮动。,在父容器元素上使用,overflow:hidden;height:100%;,，告诉浏览器伸展容器以包含里面的浮动元素，让父容器自动伸展来包含浮动元素。,#line,#header,#nav,#indexNav,#content,#banner,#footer,.main,第,2,节：,Flow Model,（流动模型）,层模型（,Layer Model,）是在网页布局中引入图像软件中层的概念，以,position,用于精确定位网页中的元素。这种网页布局模式的初衷是摆脱,HTML,默认的流动模型所带来的弊端，以层的方式对网页元素进行精确定位与层叠，从而增强网页表现的丰富性。,position,语法：,position:static|absolute|fixed|relative,值：,static,:,默认值。无特殊定位，对象遵循,HTML,定位规则，不能通过,z-index,进行层次分级。,absolute,:,将对象从文档流中拖出，使用,top,bottom,left,right,等属性相对于其最接近的一个最有定位设置的父对象进行绝对定位。如果不存在这样的父对象，或当父级,position,为,static,时，,absolute,元素将以,body,坐标原点进行定位。而其层叠通过,z-index,属性定义。,fixed,:,固定定位，这里他所固定的对像是可视窗口而并非是,body,或是父级元素。可通过,z-index,进行层次分级。,relative,:,不脱离文档流，对象不可层叠，参考自身静态位置通过,top,bottom,left,right,定位在正常文档流中偏移位置，并且可以通过,z-index,进行层次分级。,Layer Model（,层模型）,第,2,节：,Layer Model,（层模型）,第,3,节：网页的输出过程,应用原理,+,规范代码,+,多浏览器测试,+,细心耐心,谢 谢,