HTML-CSS讲义.doc

HTML/CSS课程HTML介绍：超文本标记语言（第一版）在1993年6月作为互联网工程工作小组（IETF）工作草案发布（并非标准）：HTML 2.01995年11月作为RFC 1866发布，在RFC 2854于2000年6月发布之后被宣布已经过时HTML 3.21997年1月14日，W3C推荐标准HTML 4.01997年12月18日，W3C推荐标准HTML 4.01（微小改进）1999年12月24日，W3C推荐标准HTML 5的第一份正式草案已于2008年1月22日公布，仍继续完善ISO/IEC 15445:2000（“ISO HTML”）2000年5月15日发布，基于严格的HTML 4.01语法，是国际标准化组织和国际电工委员会的标准。关于HTM，实际上HTM与HTML没有本质意义的区别，只是为了满足DOS仅能识别8+3的文件名而已，因为一些老的系统(win32)不能识别四位文件名，所以某些网页服务器要求index.html最后一个l不能省略。MSIE能自动识别和打开这些文件，但编写网页地址的时候必须是完全对应的，也就是说index.htm和index.html是两个不同的文件，对应着不同的地址。值得一提的是UNIX系统中对大小写敏感，不吻合的话就可能报没有文件或者找不到文件。 关于shtml，shtml是一种基于SSI技术的文件，也就是Server Side Include-SSI 服务器端包含指令，一些Web Server如果有SSI功能的话就会对shtml文件特殊招待，服务器会先扫一次shtml文件看没有特殊的SSI指令存在，如果有的话就按Web Server设定规则解释SSI指令，解释完后跟一般html一起调去客户端。HTML的组成：1：文档声明 文档声明很重要，直接影响浏览器的渲染效果。不属于html文档的一部分，不用闭合。2：head区域 网页的标题 meta - head里面的meta 代表 元信息,用来说明网页自身的信息,一般是给浏览器,搜索引擎看的比如: -告诉浏览器,这是一篇utf-8编码的文档-这是告诉搜索引擎本页面的主要内容-这是告诉搜索引擎,本页面体现的关键字3: body区域Body区域放各种标签和内容 而内容不能够直接写在body里面。注意点：1) 在网页源码里写的换行,在网页效果上不会体现出来2) html标记:分为双标签和单标签例: 加粗效果,文字会变粗接下来会换行3) 共同点: 无论是单双标签,都要求 闭合单标签也要自身闭合 4) 标签可以嵌套,但是, 不能相互嵌套例如: 一岁一枯荣. 不合法5) Div块状元素的一个重要特点: 无论宽度如何,在浏览上的显示效果都是-独占一行过渡期：html-html4-xhtml1.0-xhtml1.1-xhtml2(不被看好)-html5xhtml 是html 的升级严格版 xthml标签必须闭合doctype 有3种模式Strict、Transitional 以及 Frameset。XHTML 1.0 规定了三种 XML 文档类型：Strict、Transitional 以及 Frameset。XHTML 之Strict DTDStrict严格的为了开发规范 不严格的会使浏览器解析不一样 会出问题Transitional 为了方便过度 怕一下子不适应太严格的如果您需要干净的标记，免于表现层的混乱，请使用此类型。请与层叠样式表（CSS）配合使用：XHTML 之Transitional DTDTransitional DTD 可包含 W3C 所期望移入样式表的呈现属性和元素。如果使用了不支持层叠样式表（CSS）的浏览器以至于您不得不使用 XHTML 的呈现特性时，请使用此类型：XHTML之 Frameset DTD当您希望使用框架时，请使用此 DTD！HTML属性详解：CSS控制高宽和设置背景CSS的引入方式：1、外部链接一个CSS文件，我们在HTML头部分标明：2、头部直接写入CSS: divmargin:0;padding:0;border:1px solid red;3、外接多个CSS文件时： import url(my.css); 4、直接在html标签里写入对这个标签的CSS控制，如：测试信息浮动布局/浮动的清除：在使用CSS的时候除了可以通过控制样式还可以设置什么？常见错误：编码与charset 不一致 则会导致乱码如果id取名字用 数字命名 则会导致css文件无效如果不声明DOCTYPE 低版本IE 显示效果不一样盒模型:盒子模型属性：宽:Width高:height边框: border内边距:padding外边距:margin浏览器对于div,p,li标签等元素，可能会对他们设置一个默认的margin值，border，padding值，而且不同的浏览器之间设的默认可能不同。盒模型border学习Border: 三要素，不可缺少。边框样式， 边框宽度， 边框颜色分别指定：Border-styleBorder-widthBorder-color例：border-style:solid; border-width:10px; border-color:blue;一个盒子要占据多少空间？水平:左外边距+左边框+左内边距+内容宽度+右内边距+右边框+右外边距竖直:上外边距+上边框+上内边距+高度+下内边距+下边框+下外边距盒子模型margin学习Margin: 10px; 是设置4个方向上的margin值,都为10px;Margin:10px 20px 30px 40px ,则分别是设置 上,右,下左,方向上的margin值如果margin值只设置了2个,或3个,则按上,右,下,左的方向顺序来分配,没有被分配到值的边, 以对边的margin为准也可以用margin-top/right/bottom/left 来分别设置4个方向的值如何用margin来居中可以通过设置margin: 0 auto; 即,左右的外边距为自动,即可使左右居中注意: css只支持用auto来进行左右居中,竖直方向用auto无效.Margin 外边距有重叠效果就是在竖直方向,当两个元素的外边距连在一块时,两者的距离并不是两者margin之和,而是取最大margin为准对于漂浮(float)的元素,外边距不存在重叠效果,也就是说:上下边距为两者的margin之和内边距padding的探讨:1:4个方向上的padding定义和margin一样.2:padding是透明的, 也就是说, padding区域的颜色是盒子的背景色.或者说:盒子的背景色铺到 盒子的内边框处边框的写法:边框border 和margin,padding不一样,因为margin,padding仅仅需要一个数字的值就能表示.但是边框不仅需要指明像素宽度,还需要指明形状和颜色边框的指定方式: border: 形状 宽度 颜色,例: border: solid 20px red;不能像margin padding那样,把2,3,4个边框的值连着写.即: border: solid 20px red solid 30px green, -这样是不对的.所以如果要想指定4个边框为不同的效果,可以用:Border-top/right/bottom/left 来分别指定CSS初始化：Css初始化，就是把所有的标签，margin,border,padding设为0，大家都在同一个起跑线上。Css 选择器的概念器:Css要控制页面元素的显示形式，必须通过一定的方法，指定到该元素。比如，1 id选择器， 就是，给页面上的元素起一个不重复的id,然后css, 通过 #id ，就能控制该元素。这个概念称为css选择器。2 类选择器:用法: 页面里有来声明类Css里, 用点+类名来选择这一类的元素3 标签选择器:因为html有很多种标签,如h1,p,div ,img,这样标签在页面里构成很多元素.css可以通过标签名来选定页面内标签对应的元素.比如:P, 会对页面里所有的P标签生效Div,img ,则会对页面里所有的div,img生效.4 派生选择器通过元素的上下级关系来进行选择,(像地区由大到小的选择一样)比如:#header img#header ul 5 伪类选择器:伪类选择器,选择不是某一种元素,而是某种元素的某种状态对于链接,我们可以针对的4种状态来设置显示效果. 链接没被点击过 :link 链接被点击过 : visited 鼠标放在链接上 :hover 鼠标点击的瞬间 :active顺序: l v, h, a内联元素：内联元素:内联元素,又叫行内元素,w3c组织则称之为行内框,网友的经典比喻-行内元素就是橡皮筋.内联元素,只对每一行的文字起作用,或者说: 内联的作用范围,不能跳出行的区域.块状元素与内联元素的区别独占一行能设宽高竖直方向的margin,padding块状元素是是有,可以设置内联元素否否没有,也不可以设置相比于块状的盒子模型,如何方便的理解内联元素?答:可以把内联元素当成有弹性的橡皮筋来看.内联元素又被称为行内元素.内联元素与块状并不是完全无关的东西,可以相互转换.可以通过元素的 display 属性来设置.Display:block; 强制声明某元素为块状元素Display:inline; 强制声明为内联元素.Display:none; 压根不显示., 设置之后,该元素和该元素的子元素不再显示,等同于这段代码被删除的效果,在页面内一点空间都不占.Ul无序列表,ol有序列表：有序列表与无序列表 (都是块状元素)这是列表项这是有序列表项通过css能控制列表的3个属性:List-style-type : 列表项的显示标志List-style-image: 用于替换显示标志的图片.List-style-postion:inside/outside ,显示标志与列表内容的位置关系注意:虽然列表有3种属性,可以方便设置,但是,我们实际使用中,往往把list-style-type 设为 none;原因是:不同浏览器对于列表的渲染差别很大,因此要通过css初始化,强制他们保持一致.文本控制：段落缩进:text-indent 作用:控制一段首行的缩进距离. 例: css选择器text-indent:20px;水平对齐:text-align 作用:控制文字在水平方向上的对齐方式 例: css选择器text-aligh:left; /可选值 left,right,center, 默认是left;文本装饰:text-decoration 作用:给文字加一些修饰线的效果. 例:css选择器text-decoration:underline; / none,underline,overline,line-through,blink 字母间距:letter-spacing 作用:控制单个字符之间的距离 例:css选择器letter-spacing:20px;词间距:word-spacing (对中文无效); 作用:控制单词与单词之间的距离 例: css选择器word-spacing:20px;大小写转换:text-transform 作用:按一定规则转换字母的大小写 例: css选择器text-transform:uppercase; / uppercase, lowercase,capitalize;Capitalize: 是把首字母大写,其他字母不受影响.字体控制：Font-style : 显示风格作用:控制文字的是否斜体显示或正常显示.例: css选择器font-style:italic; /normal,obliqueFont-weight: 字体粗细作用: 控制文字的粗细程度例:css选择器font-weight:bold; /normal/boldFont-size: 字体大小作用:控制字体的大小例:css选择器font-size:30px; /则每个字符以30像素的大小显示.Line-height: 行高作用:设置每行文字所占的高度,(特点:在一行内,文字总是相对于行居中显示,所以可以利用这个特性让文字相对于容器居中)例: css选择器line-height:30px;/ 则每一行占据30个像素高.Font-family: 设置字体作用:设置显示文字所用的字体.字的颜色如何控制:Color: red / #EEE;表格学习基本语法:(以3行2列为例)      CSS属性控制:对于table:Border-collapse: 边框是否融合.可选值: separate(表格与表格相互独立的边框,默认值)Collapse,(表格之间的边框共用).Border-spacing: 边框间距用法: border-spaing: xpx ypx (给两个像素值,分别代表单元格在x,y轴的距离)Empty-cells: 空表格是否显示.可选值: hide, show ,默认是hide注意: 如果border-collapse值为 collapse时, border-spacing,和empty-cells 自动失效.想让空表格显示的处理方式:1:在空单元格里加一个空白符 2:让表格边框融合 collapse表格的适用范围:显示格式化数据不适用于页面布局表单:收集页面的信息,送到服务器.表单总结:1:任何的类型的表单项,必有2个最本质的东西:Namevalue, 即 :变量名变量值2: 表单的action ,methodAction 代表 表单要提交到的地址.Method 代表,表单提交的方法(即,表单数据如何发送.)3:method的两种方法比较Get与post,Get提交,表单