html网页布局模板.docx

1、html网页布局模板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:文件传输协议.四、HTML的编辑工具（了解） *.notepad 记事本 *.editplus : 语法高亮显示 技巧： 根据颜色判断单词是否出错。 （不是100%） *.ultraedit : 根据颜

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

4、ml中表示长度的单位都是像素。HTML只有一种单位就是像素。 body: bgcolor: 背景颜色 background:背景图片 text: 文本颜色 1.排版标签 所有的浏览器默认情况下都会忽略空格和空行 P：p代表一个段落 属性： align:对齐方式. 取值：left,right,center 代表是换行。 hr: color: 线的颜色 size : 线的粗细 width: 线的长短 两种写法： 1) 绝对值 eg: 500 2) 相对值： 50% noshade: 不要阴影 align: 对齐方式 取值： left,right,center center: 内容居中 pre: 预

5、定义格式标签 .告诉浏览器不要忽略空格和空行 div: 块级标签 必须单独占据一行 属性： align : span: 块级标签 不换行字体标记 2 字体标签 h1.h6:定义字体大小 属性： align :居中 font: color:字体颜色 颜色的写法有3种： 1)英文单词: red 2)十六进制：#00ffcc 3)RGB(三原色) : new RGB(124,156,23) size:字体大小 face：字体类型 特殊字符： <小于 >大于 & &符号 " 双引号'单引号 © 版权 ™商标  空格 扩展：

6、464; b: 加粗 strong: 加粗 i:斜体 em: 斜体 u: 下划线 s: 中划线(删除线) sup: 上标 sub: 下标. 3.图像标记 img: 代表是一副图片 属性： src : 图片的路径 两种写法：a) : 相对路径 路径是相对页面所在的路径 两个标记.和. ,分表代表当前目录和父路径 b) ：绝对路径 1) : 以盘符开始的路径 eg: C:Documents and SettingsAdministrator桌面day01_html上课示例/images/1.jpg 2) : 网络路径 eg: width: 宽度 height：高度 Alt：当图片显示不出来的时候代

7、替图片显示的内容 title： 提示性文本 border: 边框 热点： 就是特定的位置添加超链。 4.清单标记 列表标签：3种 a.无序列表ul 属性：type : 值： disc(默认，实心原点),square(实心方点),circle(空心圆) b.有序列表(OL) 属性: type:取值：1(阿拉伯数字，默认),a,A,i,I start: 从几开始 c.定义列表(dl) dt: 列表项的标题 dd: 列表项5.超链接 3种超链接: 1. 连接到其他页面 2. 锚: 指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字 3. 连接到邮件: 进入我

8、的邮箱 属性：target: 告诉浏览器怎么显示目标页面 HTML中已定义4个值： _self :在同一个浏览器中显示 _blank: 打开新的浏览器显示 _parent: 在父窗口中显示 _top: 在顶级窗口中显示6.表格标记 table: 表格 属性：border:边框 width:宽度 height：高度 align:表格的对齐方式 cellpadding:单元格内容到边的距离 cellspacing:单元格和单元格之间的距离 bgcolor:背景颜色 background:背景图片 bordercolorlight:表格的上，左边框，以及单元格的右，下边框的颜色 bordercolo

9、rdark: 表格的右，下边框，以及单元格上，左的边框的颜色 dir:单元格内容的排列方式 取值：ltr 从左到右， rtl:从右到左 tr: 行 属性：dir: bgcolor: td: 单元格 属性： align: 内容的横向对齐方式 valign: 内容的纵向对齐方式 top,middle,bottom width: 绝对值或者相对值(%) height:单元格的高度 单元格的合并： 单元格的属性： colspan: 横向合并 rowspan: 纵向合并 th: 相当于 + 属性同 caption: 表格的标题 属性：align: 取值：left,center,right,top,bot

10、tom thead tbody tfoot 写与不写的区别： 1. 当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。 2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容7.框架标记及 框架页面上不允许有body标签 frameset: 框架的集合 rows: 纵向分部框架. cols: 横向分部框架. 写法有两种: 1) 绝对值 200,* ,*代表剩余的 2) 相对值 30%,* frame:

11、 框架. 一个框架显示一个页面 scrolling: 是否需要滚动条。默认是true noresize : 固定框架大小 bordercolor: 给框架边框起一个颜色 name : 给框架起一个名字 内嵌框架： 嵌入在一个页面上的框架.(仅仅IE支持) iframe: 属性： width: 宽度 height： 高度 scrolling : 是否需要滚动条8.表单标记及语义化9.多媒体标记 bgsound: 背景音乐 embed: 播放多媒体文件. marquee: 移动 属性：direction 移动目标方向 left,right ,up,down ,up，down移动距离是固定的200p

12、x behavior: 行为方式 取值：slide,alternate,scroll scrollamount : 移动速度 loop: 循环多少圈。负值表示无限循环 scrolldelay: 移动一次休息多长时间。单位是毫秒10.头标记css笔记一、CSS 概述(了解) *.CSS ： Cascading Style Sheet 层叠样式表 *.CSS 作用就是给HTML页面标签添加各种样式 *.为什么用CSS HTML的缺陷： 1. 不能够适应多种设备 2. 要求浏览器必须智能化足够庞大 3. 数据和显示没有分开 4. 功能不够强大 CSS 优点： 1.使数据和显示分开 2.降低网络流量

13、3.使整个网站视觉效果一致 4.使开发效率提高了二、CSS语法 pcolor：red; 选择器属性名：属性值 ; 选择器后一定是大括号.属性名后必须用冒号隔开.属性值后用分号 属性名和冒号之间最好不要有空格。三、CSS和HTML的结合方式 CSS代码理论上位置是任意的，但通常写在style标签里 CSS和HTML的结合方式有3种： a. 行级样式表:采用style属性,范围只针对此标签适用 大家好 b. 内嵌样式表:采用标签完成。范围针对此页面 c. 外部样式表: 采用建立样式表文件。针对多个页面. 引入样式表文件的方式: 1):采用标签 eg: 2):采用import，必须写在标签中，并且必

14、须是第一句 eg: import url(a.css) ; 两种引入方式的区别： 外部样式表中不能写标签,但是可以写import语句四、CSS选择器 选择器分为两大类: 1.基本选择器 a.标签选择器:指的就是选择器的名字代表html页面上的标签 p color:red ; border:1px dashed green; b.类选择器：规定用圆点.来定义 优点：灵活 eg: .onebackground-color:#ff0099; c. ID选择器：规定用#来定义 eg: #onecursor:hand; 区别：标签选择器针对的是页面上的一类标签. 类选择器可以供多种标签使用. ID选择器

15、是值供特定的标签(一个). ID是此标签在此页面上的唯一标识。 d:通用选择器： 用*定义,代表页面上的所有标签。 * font-size:30px; margin-left:0px; margin-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) :静态伪类：规定是用:来定义.只有两个.只能用于超链接.

16、:link表示超链接点击之前的颜色 :visited表示链接点击之后的颜色 eg:a:linkcolor:red ; a:visitedcolor:yellow; 注意： a:link定义的样式针对所有的写了href属性的超链接(不包括锚) a定义的样式针对所有的超链接(包括锚) 2) :动态伪类 : 针对所有的标签都适用 :hover : 是移动到某个标签上的时候 :focus : 是某个标签获得焦点的时候 :active : 点击某个标签没有放松鼠标时 eg: label:hovercolor:#00ff00; input:focus background-color:#ff9999; b

17、order:1px solid red; a:active color:blue; 五、CSS各种选择器的冲突(掌握) CSS样式的冲突: 1.ID选择器 类选择器 标签选择器 2.行级样式表 内嵌样式表 外部样式表 外部样式表的ID选择器 内嵌样式表的标签选择器 原则： 就近原则六、CSS的各种属性(掌握) ? CSS中尺度单位的介绍 CSS的单位: a. 绝对单位 1in=2.54cm=25.4mm=72pt=6pc , pt是点或者磅，pc是派卡 b. 相对单位：px, em(印刷单位相当于12个点), %(相对周围的文字) *字体设置 p font-size:50px; /*字体大小*

18、/ font-style:italic ; /*斜体*/ font-weight:bold; /*粗体*/ font-family:幼圆; /*字体类型*/ font-variant:small-caps; /*小写变大写*/ *文本设置 p letter-spacing:0.5cm ; /*字母间距*/ word-spacing:1cm; /*单词间距*/ text-align:center; /*在所包含容器的中间*/ text-decoration:overline; /*字体修饰 underline下划线 line-through中划线 overline上划线*/ text-trans

19、form:lowercase; /*单词字体大小写*/ color:red ; *背景设置 body background-color:#ff99ff ; /*背景颜色*/ background-image:url(images/2.gif) ; /*背景图片*/ background-repeat: no-repeat; /*no-repeat不要平铺，repeat-x,横向平铺，repeat-y 纵向平铺*/ background-position:center right; /*背景位置*/ background-attachment: scroll ; /*背景的移动 ,fixed跟着

20、滚动条一起移动，scroll 不动*/ *列表设置 ul li list-style:none; /*列表前样式*/ list-style-image:url(images/2.gif) ; /*列表项前图片*/ margin-left:80px; *盒子模型(border margin padding) padding:是内容到边的距离 border: 是边的粗细 margin:是控件到控件的距离 *定位设置(position,float,clear,z-index) #d position: absolute; /* 1.绝对定位: 定义横纵坐标 .脱离了本身的顺序流 2.相对定位: 相对

21、的是自己在顺序流中原来的位置 */ left:100px; /*横坐标*/ top:100px; /*纵坐标*/ border:1px solid red ; width:100px; height:100px; background-color:#ff66ff; #d1 position: relative; /*相对位置*/ left:100px; top:100px; border:1px solid green ; width:100px; height:100px; background-color:#339900; span position: relative; left:20p

22、x; top:20px; z-index:值任意，值越大离我们越近 float : 浮动 overflow: 超出范围怎么办鼠标样式设置(cursor)七、滤镜(了解)css滤镜的兼容性、实现滤镜效果只是IE内核才支持。不过咱们平时还是可以用用透明滤镜的。之前看到美工组组长的期末网站作品，一直很好奇那些透明效果是怎么做出来的，现在算是有点头绪了。为什么火狐谷歌chrome等浏览器不支持一些css滤镜在IE下使用的滤镜，可以实现很多不错的特效，但是在chrome和火狐opera等浏览器里这些就全都失效了，这是为什么呢？找了一下原来是因为滤镜只是属于IE浏览器开发下的功能，不支持IE内核的浏览器也

23、就都不支持这些滤镜。 不过一般都支持透明滤镜，只是写法不一样，如下：要设置一下透明度为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

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

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

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