html网页布局模板Word版

1、传播优秀Word版文档 ，希望对您有帮助，可双击去除！1 html笔记一、HTML的概述（了解）a.html是什么 ： hypertext markup language 超文本标记语言 超文本：音频，视频，图片称为超文本。. 标记 ：称为标记. 一个HTML页面都是由各种标记组成。 b.作用：编写HTML页面。c.HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程). HTML页面直接由浏览器解析执行。 二、HTML的历史（了解）三、HTML的网络术语（明白） * 网页 ：由各种标记组成的一个页面就叫网页 . * 主页(首页) : 一个网站的起始页面或者导航页面 .

2、* 标记:称为开始标记 称为结束标记. 也叫标签.每个标签都规定好了特殊的含义。 * 元素：内容 称为元素. * 属性： 给每一个标签所做的辅助信息。 * xhtml： 符合XML语法标准的HTML。 * dhtml：dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml * http：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议,ftp:文件传输协议.传播优秀Word版文档 ，希望对您有帮助，可双击去除！四、HTML的编辑工具（了解）*.notepad 记事本*.editplus : 语法高亮显示技巧： 根

3、据颜色判断单词是否出错。 （不是100%）*.ultraedit : 根据颜色判断单词是否出错,可以显示2进制数据.*.dw(dreamweaver,专业工具) 代码提示.五、HTML的规范(知道) *.HTML是一个弱势语言*.html 不区分大小写*.html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)*.html 的结构1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。是HTML5标准。2)head部分： 不会显示在页面上。作用是告诉浏览器一些页面的额外信息。3)body部分：我们缩写的代码必须放在此标签內。六、HTML的各种标

4、签(掌握) 明确：每个标签都有私有属性。也都有公有属性。 html中表示长度的单位都是像素。HTML只有一种单位就是像素。 body: bgcolor: 背景颜色background:背景图片传播优秀Word版文档 ，希望对您有帮助，可双击去除！text: 文本颜色1.排版标签 所有的浏览器默认情况下都会忽略空格和空行P：p代表一个段落属性： align:对齐方式. 取值：left,right,center代表是换行。hr:color: 线的颜色size : 线的粗细width: 线的长短 两种写法： 1) 绝对值 eg: 500 2) 相对值： 50%noshade: 不要阴影align:

5、对齐方式 取值： left,right,centercenter: 内容居中pre: 预定义格式标签 .告诉浏览器不要忽略空格和空行div: 块级标签 必须单独占据一行 属性： align :span: 块级标签 不换行字体标记 2 字体标签h1.h6:定义字体大小属性： align :居中font:传播优秀Word版文档 ，希望对您有帮助，可双击去除！color:字体颜色颜色的写法有3种： 1)英文单词: red 2)十六进制：#00ffcc 3)RGB(三原色) : new RGB(124,156,23)size:字体大小face：字体类型特殊字符： <小于 >大于 &

6、 &符号 " 双引号'单引号 © 版权 ™商标  空格 扩展： b: 加粗strong: 加粗i:斜体em: 斜体u: 下划线s: 中划线(删除线)sup: 上标sub: 下标. 3.图像标记img: 代表是一副图片 属性： src : 图片的路径 两种写法：a) : 相对路径 路径是相对页面所在的路径 两个标记.和. ,分表代表当前目录和父路径 b) ：绝对路径传播优秀Word版文档 ，希望对您有帮助，可双击去除！ 1) : 以盘符开始的路径 eg: C:Documents and SettingsAdministrator桌面day01_

7、html上课示例/images/1.jpg2) : 网络路径eg: /images width: 宽度 height：高度 Alt：当图片显示不出来的时候代替图片显示的内容 title： 提示性文本 border: 边框热点： 就是特定的位置添加超链。 4.清单标记列表标签：3种a.无序列表ul属性：type : 值： disc(默认，实心原点),square(实心方点),circle(空心圆)b.有序列表(OL)属性: type:取值：1(阿拉伯数字，默认),a,A,i,I start: 从几开始传播优秀Word版文档 ，希望对您有帮助，可双击去除！c.

8、定义列表(dl) dt: 列表项的标题 dd: 列表项5.超链接3种超链接:1. 连接到其他页面2. 锚: 指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字3. 连接到邮件: 进入我的邮箱属性：target: 告诉浏览器怎么显示目标页面 HTML中已定义4个值： _self :在同一个浏览器中显示 _blank: 打开新的浏览器显示 _parent: 在父窗口中显示 _top: 在顶级窗口中显示6.表格标记 table: 表格 属性：border:边框width:宽度height：高度align:表格的对齐方式cellpadding:单元格内容到边的

9、距离传播优秀Word版文档 ，希望对您有帮助，可双击去除！cellspacing:单元格和单元格之间的距离bgcolor:背景颜色background:背景图片bordercolorlight:表格的上，左边框，以及单元格的右，下边框的颜色bordercolordark: 表格的右，下边框，以及单元格上，左的边框的颜色dir:单元格内容的排列方式 取值：ltr 从左到右， rtl:从右到左tr: 行 属性：dir:bgcolor:td: 单元格 属性： align: 内容的横向对齐方式 valign: 内容的纵向对齐方式 top,middle,bottom width: 绝对值或者相对值(%)

10、 height:单元格的高度单元格的合并： 单元格的属性： colspan: 横向合并 rowspan: 纵向合并 th: 相当于 + 属性同caption: 表格的标题传播优秀Word版文档 ，希望对您有帮助，可双击去除！ 属性：align: 取值：left,center,right,top,bottomtheadtbodytfoot 写与不写的区别： 1. 当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解

11、析的时候还是按照thead,tbody,tfoot的顺序显示内容7.框架标记及 框架页面上不允许有body标签frameset: 框架的集合rows: 纵向分部框架. cols: 横向分部框架. 写法有两种: 1) 绝对值 200,* ,*代表剩余的 2) 相对值 30%,*frame: 框架. 一个框架显示一个页面scrolling: 是否需要滚动条。默认是truenoresize : 固定框架大小bordercolor: 给框架边框起一个颜色name : 给框架起一个名字内嵌框架： 嵌入在一个页面上的框架.(仅仅IE支持)iframe:属性： width: 宽度 height： 高度传播优

12、秀Word版文档 ，希望对您有帮助，可双击去除！ scrolling : 是否需要滚动条8.表单标记及语义化9.多媒体标记bgsound: 背景音乐 embed: 播放多媒体文件.marquee: 移动属性：direction 移动目标方向 left,right ,up,down ,up，down移动距离是固定的200px behavior: 行为方式 取值：slide,alternate,scroll scrollamount : 移动速度 loop: 循环多少圈。负值表示无限循环 scrolldelay: 移动一次休息多长时间。单位是毫秒10.头标记css笔记一、CSS 概述(了解)*.C

13、SS ： Cascading Style Sheet 层叠样式表*.CSS 作用就是给HTML页面标签添加各种样式*.为什么用CSSHTML的缺陷： 1. 不能够适应多种设备 2. 要求浏览器必须智能化足够庞大 3. 数据和显示没有分开 4. 功能不够强大 CSS 优点：传播优秀Word版文档 ，希望对您有帮助，可双击去除！1.使数据和显示分开2.降低网络流量3.使整个网站视觉效果一致4.使开发效率提高了二、CSS语法pcolor：red; 选择器属性名：属性值 ; 选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号 属性名和冒号之间最好不要有空格。三、CSS和HTML的结合方式CS

14、S代码理论上位置是任意的，但通常写在style标签里CSS和HTML的结合方式有3种：a. 行级样式表:采用style属性,范围只针对此标签适用大家好b. 内嵌样式表:采用标签完成。范围针对此页面c. 外部样式表: 采用建立样式表文件。针对多个页面.引入样式表文件的方式:1):采用标签eg:2):采用import，必须写在标签中，并且必须是第一句eg: import url(a.css) ;传播优秀Word版文档 ，希望对您有帮助，可双击去除！两种引入方式的区别：外部样式表中不能写标签,但是可以写import语句四、CSS选择器选择器分为两大类:1.基本选择器 a.标签选择器:指的就是选择器的

15、名字代表html页面上的标签pcolor:red ;border:1px dashed green;b.类选择器：规定用圆点.来定义优点：灵活eg: .onebackground-color:#ff0099; c. ID选择器：规定用#来定义eg: #onecursor:hand; 区别：标签选择器针对的是页面上的一类标签.类选择器可以供多种标签使用.ID选择器是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。d:通用选择器： 用*定义,代表页面上的所有标签。*font-size:30px;传播优秀Word版文档 ，希望对您有帮助，可双击去除！margin-left:0px;mar

16、gin-top:0px;2.扩展选择器 a. 组合选择器:采用逗号隔开eg: p,h1,h2,.one,#twocolor:red ; b. 关联选择器(后代选择器): 采用空格隔开eg: h4 span icolor:red ; 表示h4标签中的span标签中的i标签的样式h4和span和i标签不一定是紧挨着的。 c. 伪类选择器 1) :静态伪类：规定是用:来定义.只有两个.只能用于超链接. :link表示超链接点击之前的颜色 :visited表示链接点击之后的颜色 eg:a:linkcolor:red ; a:visitedcolor:yellow;注意： a:link定义的样式针对所有

17、的写了href属性的超链接(不包括锚) a定义的样式针对所有的超链接(包括锚) 2) :动态伪类 : 针对所有的标签都适用:hover : 是移动到某个标签上的时候:focus : 是某个标签获得焦点的时候:active : 点击某个标签没有放松鼠标时eg: label:hovercolor:#00ff00; 传播优秀Word版文档 ，希望对您有帮助，可双击去除！input:focusbackground-color:#ff9999;border:1px solid red;a:activecolor:blue;五、CSS各种选择器的冲突(掌握)CSS样式的冲突:1.ID选择器 类选择器 标签

18、选择器2.行级样式表 内嵌样式表 外部样式表外部样式表的ID选择器 内嵌样式表的标签选择器原则： 就近原则六、CSS的各种属性(掌握)? CSS中尺度单位的介绍 CSS的单位:a. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc , pt是点或者磅，pc是派卡b. 相对单位：px, em(印刷单位相当于12个点), %(相对周围的文字)*字体设置 pfont-size:50px; /*字体大小*/font-style:italic ; /*斜体*/传播优秀Word版文档 ，希望对您有帮助，可双击去除！font-weight:bold; /*粗体*/font-family:幼圆;

19、 /*字体类型*/font-variant:small-caps; /*小写变大写*/*文本设置 pletter-spacing:0.5cm ; /*字母间距*/word-spacing:1cm; /*单词间距*/text-align:center; /*在所包含容器的中间*/text-decoration:overline; /*字体修饰 underline下划线 line-through中划线 overline上划线*/text-transform:lowercase; /*单词字体大小写*/color:red ;*背景设置bodybackground-color:#ff99ff ; /*

20、背景颜色*/background-image:url(images/2.gif) ; /*背景图片*/background-repeat: no-repeat; /*no-repeat不要平铺，repeat-x,横向平铺，repeat-y 纵向平铺*/background-position:center right; /*背景位置*/background-attachment: scroll ; /*背景的移动 ,fixed跟着滚动条一起移动，scroll 不动*/*列表设置传播优秀Word版文档 ，希望对您有帮助，可双击去除！ul lilist-style:none; /*列表前样式*/li

21、st-style-image:url(images/2.gif) ; /*列表项前图片*/margin-left:80px; *盒子模型(border margin padding) padding:是内容到边的距离 border: 是边的粗细 margin:是控件到控件的距离 *定位设置(position,float,clear,z-index)#dposition: absolute; /* 1.绝对定位: 定义横纵坐标 .脱离了本身的顺序流 2.相对定位: 相对的是自己在顺序流中原来的位置 */left:100px; /*横坐标*/top:100px; /*纵坐标*/border:1px

22、 solid red ; width:100px;height:100px;background-color:#ff66ff; 传播优秀Word版文档 ，希望对您有帮助，可双击去除！#d1position: relative; /*相对位置*/left:100px;top:100px;border:1px solid green ;width:100px;height:100px;background-color:#339900; spanposition: relative;left:20px;top:20px; z-index:值任意，值越大离我们越近 float : 浮动 overflo

23、w: 超出范围怎么办鼠标样式设置(cursor)七、滤镜(了解)css滤镜的兼容性、实现滤镜效果只是IE内核才支持。不过咱们平时还是可以用用透明滤镜的。之前看到美工组组长的期末网站作品，一直很好奇那些透明效果是怎么做出来的，现在算是有点头绪了。为什么火狐谷歌chrome等浏览器不支持一些css滤镜传播优秀Word版文档 ，希望对您有帮助，可双击去除！在IE下使用的滤镜，可以实现很多不错的特效，但是在chrome和火狐opera等浏览器里这些就全都失效了，这是为什么呢？找了一下原来是因为滤镜只是属于IE浏览器开发下的功能，不支持IE内核的浏览器也就都不支持这些滤镜。 不过一般都支持透明滤镜，只是

24、写法不一样，如下：要设置一下透明度为60%的DIV就应该这样写了：（加到CSS里面就好）div.transp /* make the div translucent */ opacity: 0.6; /* Firefox, Safari(WebKit), Opera,chrome/ filter: alpha(opacity=60); /* IE 8 */ filter: alpha(opacity=60); /* IE 4-7 */ zoom: 1; /* needed in IE up to version 7, or set width or height to trigger hasL

25、ayout */ filter: alpha(opacity=60); /* IE 8 */ 为IE下写法，opacity: 0.6; 为火狐等浏览器下写法，所以要都支持这个滤镜，就得两个都写上（搞的这麻烦，看得出W3C标准规范化可以实现的好处了）CSS 滤镜详解(大多数只支持IE)CSS样式表是一种为超文本标签语言提供增强补充服务的技术，可对每一个html的标签做精雕细刻的修饰。只用html制作的网页，对页面内各部分的修饰能力有限且语句烦锁，样式表正是弥补这一缺陷的有力技术，它语句文法简单，只要在源码中插入style语句就可轻易实现页面内任意文本颜色、背景、边框、行距、字距的添删和修饰等功能

26、，使网页更加生动活泼，从而获得满意的效果。当然，样式表的强大还依靠的就是它的滤镜功能。因为有了滤镜，大家就可以轻易地创造出“专业”的艺术效果。为了能帮助大家高效使用好样式表滤镜，笔者将对样式表滤镜各方面的内容进行详细介绍。一、什么是样式表滤镜 传播优秀Word版文档 ，希望对您有帮助，可双击去除！说到滤镜，其实它并不是对图像进行了什么处理，而是在浏览器中对使用了该属性的对象进行一定的修饰。样式表滤镜实际上是样式表一个新的扩展部分，使用这种技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的html元素上，例如图片、文本、以及其他一些对象，为页面添加一些丰富的变化。如果大家有一些脚本语言

27、的基础，能够把滤镜效果与类似javascript的脚本代码做一些结合，就可以拥有一个在样式表滤镜与脚本共同作用下建立的强大的动态交互文档工具。现在能使用的滤镜有13个之多，不过要欣赏到这些滤镜的特效，必须要求用户的浏览器必须在IE4.0/NC6.0之上，因为只有这些版本的浏览器才能支持样式表滤镜效果。 二、常用的样式表滤镜 随着样式表技术的不断成熟，其滤镜功能和种类也在不断增多。如果用户能够熟练地混合使用它们，将可以产生意想不到的效果。在操作上，用户只需要了解具体滤镜的实际效果后，就能根据实际进行微调了。为了使大家能有针对性地使用滤镜，下面就把一些常用滤镜的功能和参数详细介绍如下： 1、滤镜

28、作用：该滤镜可以实现各种溶入效果，如果大家将该滤镜与网页脚本语言结合起来，对滤镜的参数进行处理的话，就能很轻易地做出淡入淡出的效果来。 语法：FILTER：ALPHA(opacity=opacity，finishopacity=finishopacity，style=style，startx=startx，starty=starty，finishx=finishx，finishy=finishy) 参数：Opacity参数代表图象的起始透明度，其默认的数值是从0到100，0代表完全透明，100代表完全不透明；FinishOpacity是一个可选参数，如果想要设置渐变的透明效果，就可以使用他们来

29、指定结束时的透明度，作用范围也是0到100；Style表示透明区域的形状特征，其中“0”代表统一形状，“1”代表线形。“2”代表放射状，“3”代表矩形；startx表示渐变透明效果开始处的X坐标，starty代表渐变透明效果开始处的Y坐标，finishx代表渐变透明效果结束处的X坐标，finishy代表渐变透明效果结束处的Y坐标。 传播优秀Word版文档 ，希望对您有帮助，可双击去除！2、模糊滤镜 作用：该滤镜主要是让图象产生一种模糊效果。 语法：filter:blur(add=add，direction=direction，strength=strength) 参数：该滤镜主要包括三个参数，

30、其中add是用来指定图象是否被改变成印象派的模糊效果，模糊效果是按顺时针的方向进行的，它的数值应该是ture或false；direction参数是用来设置模糊的方向的，其中0度代表垂直向上，每45度为一个单位，默认值是向左的270度；strength 参数代表有多少像素的宽度将受到模糊影响，缺省的参数值是5个像素，而且该参数值只能使用整数来指定。 3、斜影滤镜 作用：该滤镜主要是为对象建立轮廓的影子效果的，它可以在指定的方向建立物体的投影； 语法：filter:shadow(color=color,direction=direction)参数：斜影滤镜只有两个参数，其中color代表投影的底色

31、，该数值是用英文字母来代替的，例如投影底色是红色的话，就应该设置color=red;direction参数是用来设置投影方向的，如果该数值是0的话，就代表垂直投影，此外该数值每45度为一个单位，它的默认值是向左的270度。 4、发光滤镜 传播优秀Word版文档 ，希望对您有帮助，可双击去除！作用：该滤镜可以给图象或者文字产生一种发光效果； 语法：filter:glow(color=color,strength=strength) 参数：该滤镜的color参数与阴影滤镜的color参数功能几乎是一样的，不过这里的color参数是用来设置发光颜色的;strength参数是用来指定发光强度的，其值为1到255之间的任何整数。 5、灯光滤镜作用：灯光滤镜是模拟光源来投射文字或者图象，使图象和文字能产生一定的投射效果； 语法：filter:light 参数：一旦为对象定义了“light滤镜属性后，大家就可以调用它的“方法(Method)来设置或者改变属性，该滤镜可用的方法有：AddAmbient方法是用来加入包围光源的，AddCone方法是用来加入锥形光源的，MoveLight方法是用来移动光源的，Changstrength方法是用来改变光源强度的，Changcolor方法是用来改变光的颜色的，Clear方法是用来清除所有光源的。 6、遮罩滤镜作用：该滤镜可以为对象建立一个覆盖于表面