html网页布局模板

精品文档 1欢迎下载 1 1 htmlhtml 笔记笔记 一 HTML 的概述 了解 a html 是什么 hypertext markup language 超文本标记语言 超文本 音频 视频 图片称为超文本 标记 称为标记 一个 HTML 页面都是由各种 标记组成 b 作用 编写 HTML 页面 c HTML 语言不是一个编程语言 有编译过程 而是一个标记语言 没有编译过 程 HTML 页面直接由浏览器解析执行 二 HTML 的历史 了解 三 HTML 的网络术语 明白 网页 由各种标记组成的一个页面就叫网页 主页 首页 一个网站的起始页面或者导航页面 标记 称为开始标记 称为结束标记 也叫标签 每个标签都规定好了特 殊的含义 元素 内容 称为元素 属性 给每一个标签所做的辅助信息 xhtml 符合 XML 语法标准的 HTML dhtml dynamic 动态的 javascript css html 合起来的页面就是一个 dhtml http 协议标准 用来规定客户端浏览器和服务端交互时数据的一个格式 SMTP 邮件传输协议 ftp 文件传输协议 四 HTML 的编辑工具 了解 notepad 记事本 editplus 语法高亮显示 精品文档 2欢迎下载 技巧 根据颜色判断单词是否出错 不是 100 ultraedit 根据颜色判断单词是否出错 可以显示 2 进制数据 dw dreamweaver 专业工具 代码提示 五 HTML 的规范 知道 HTML 是一个弱势语言 html 不区分大小写 html 页面的后缀名是 html 或者 htm 有一些系统不支持后缀名长度超过 3 个 字符 比如 dos 系统 html 的结构 1 声明部分 主要作用是用来告诉浏览器这个页面使用的是那个标准 是 HTML5 标准 2 head 部分 不会显示在页面上 作用是告诉浏览器一些页面的额外 信息 3 body 部分 我们缩写的代码必须放在此标签內 六 HTML 的各种标签 掌握 明确 每个标签都有私有属性 也都有公有属性 html 中表示长度的单位都是像素 HTML 只有一种单位就是像素 body bgcolor 背景颜色 background 背景图片 text 文本颜色 1 排版标签 所有的浏览器默认情况下都会忽略空格和空行 P p 代表一个段落 属性 align 对齐方式 取值 left right center 代表是换行 hr 精品文档 3欢迎下载 color 线的颜色 size 线的粗细 width 线的长短 两种写法 1 绝对值 eg 500 2 相对值 50 noshade 不要阴影 align 对齐方式 取值 left right center center 内容居中 pre 预定义格式标签 告诉浏览器不要忽略空格和空行 div 块级标签 必须单独占据一行 属性 align span 块级标签 不换行字体标记 2 字体标签 h1 h6 定义字体大小 属性 align 居中 font color 字体颜色 颜色的写法有 3 种 1 英文单词 red 2 十六进制 00ffcc 3 RGB 三原色 new RGB 124 156 23 size 字体大小 face 字体类型 特殊字符 小于 大于 双引号单 引号 版权 商标 空格 扩展 b 加粗 精品文档 4欢迎下载 strong 加粗 i 斜体 em 斜体 u 下划线 s 中划线 删除线 sup 上标 sub 下标 3 图像标记 img 代表是一副图片 属性 src 图片的路径 两种写法 a 相对路径 路径是相对页面所在的路 径 两个标记 和 分表代表当前目录和父路径 b 绝对路径 1 以 盘符开始的路径 eg C Documents and Settings Administrator 桌面 day01 html 上课示例 images 1 jpg 2 网络路径 eg width 宽度 height 高度 Alt 当图片显示不出来的时候代替图片显示的内容 title 提示性文本 border 边框 热点 就是特定的位置添加超链 精品文档 5欢迎下载 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 连接到邮件 进入 我的邮箱 属性 target 告诉浏览器怎么显示目标页面 HTML 中已定义 4 个值 self 在同一 个浏览器中显示 blank 打开新的浏览器显示 parent 在父窗口中显示 top 在 顶级窗口中显示 6 表格标记 table 表格 精品文档 6欢迎下载 属性 border 边框 width 宽度 height 高度 align 表格的对齐方式 cellpadding 单元格内容到边的距离 cellspacing 单元格和单元格之间的距离 bgcolor 背景颜色 background 背景图片 bordercolorlight 表格的上 左边框 以及单元格的右 下边框的颜色 bordercolordark 表格的右 下边框 以及单元格上 左的边框的颜色 dir 单元格内容的排列方式 取值 ltr 从左到右 rtl 从 右到左 tr 行 属性 dir bgcolor td 单元格 属性 align 内容的横向对齐方式 valign 内容的纵向对齐方式 top middle bottom width 绝对值或者相对值 height 单元格的高度 单元格的合并 单元格的属性 colspan 横向合并 rowspan 纵向合并 th 相当于 属性同 caption 表格的标题 精品文档 7欢迎下载 属性 align 取值 left center right top bottom thead tbody tfoot 写与不写的区别 1 当表格非常大的时候 如果不写 则必须等表格的内容 全部下载完成才能显示 但是用 tbody 标签的话 那么边下载边显示 2 如果不写 thead tbody tfoot 那么浏览器解析表格内容的时 候是从上到下解析 如果写了 那么顺序任意 浏览器解析的时候还是按照 thead tbody tfoot 的顺序显示内容 7 框架标记及 框架页面上不允许有 body 标签 frameset 框架的集合 rows 纵向分部框架 cols 横向分部框架 写法有两种 1 绝对值 200 代表剩余的 2 相对值 30 frame 框架 一个框架显示一个页面 scrolling 是否需要滚动条 默认是 true noresize 固定框架大小 bordercolor 给框架边框起一个颜色 name 给框架起一个名字 内嵌框架 嵌入在一个页面上的框架 仅仅 IE 支持 iframe 属性 width 宽度 height 高度 scrolling 是否需要滚动条 8 表单标记及语义化 9 多媒体标记 精品文档 8欢迎下载 bgsound 背景音乐 embed 播放多媒体文件 marquee 移动 属性 direction 移动目标方向 left right up down up down 移动距离是固定的 200px behavior 行为方式 取值 slide alternate scroll scrollamount 移动速度 loop 循环多少圈 负值表示无限循环 scrolldelay 移动一次休息多长时间 单位是毫秒 10 头标记 csscss 笔记笔记 一 CSS 概述 了解 CSS Cascading Style Sheet 层叠样式表 CSS 作用就是给 HTML 页面标签添加各种样式 为什么用 CSS HTML 的缺陷 1 不能够适应多种设备 2 要求浏览器必须智能化足够庞大 3 数据和显示没有分开 4 功能不够强大 CSS 优点 1 使数据和显示分开 2 降低网络流量 3 使整个网站视觉效果一致 4 使开发效率提高了 二 CSS 语法 p color red 选择器 属性名 属性值 精品文档 9欢迎下载 选择器后一定是大括号 属性名后必须用冒号隔开 属性值后用分号 属性名和冒号之间最好不要有空格 三 CSS 和 HTML 的结合方式 CSS 代码理论上位置是任意的 但通常写在 style 标签里 CSS 和 HTML 的结合方式有 3 种 a 行级样式表 采用 style 属性 范围只针对此标签适用 大家好 b 内嵌样式表 采用标签完成 范围针对此页面 c 外部样式表 采用建立样式表文件 针对多个页面 引入样式表文件的方式 1 采用标签 eg 2 采用 import 必须写在标签中 并且必须是 第一句 eg import url a css 两种引入方式的区别 外部样式表中不能写标签 但是可 以写 import 语句 四 CSS 选择器 选择器分为两大类 1 基本选择器 a 标签选择器 指的就是选择器的名字代表 html 页面上的标签 p color red border 1px dashed green 精品文档 10欢迎下载 b 类选择器 规定用圆点 来定义 优点 灵活 eg one background color ff0099 c ID 选择器 规定用 来定义 eg one cursor hand 区别 标签选择器针对的是页面上的一类标签 类选择器可以供多种标签使用 ID 选择器是值供特定的标签 一个 ID 是此标签在此页 面上的唯一标识 d 通用选择器 用 定义 代表页面上的所有标签 font size 30px margin left 0px margin top 0px 2 扩展选择器 a 组合选择器 采用逗号隔开 eg p h1 h2 one two color red b 关联选择器 后代选择器 采用空格隔开 eg h4 span i color red 表示 h4 标签中的 span 标签中的 i 标签的样式 h4 和 span 和 i 标签不一定是紧挨着的 c 伪类选择器 1 静态伪类 规定是用 来定义 只有两个 只能用于超链接 link 表示超链接点击之前的颜色 精品文档 11欢迎下载 visited 表示链接点击之后的颜色 eg a link color red a visited color yellow 注意 a link 定义的样式针对所有的写了 href 属性 的超链接 不包括锚 a 定义的样式针对所有的超链接 包括锚 2 动态伪类 针对所有的标签都适用 hover 是移动到某个标签上的时候 focus 是某个标签获得焦点的时候 active 点击某个标签没有放松鼠标时 eg label hover color 00ff00 input focus background color ff9999 border 1px solid red a active color blue 五 CSS 各种选择器的冲突 掌握 CSS 样式的冲突 1 ID 选择器 类选择器 标签选择器 2 行级样式表 内嵌样式表 外部样式表 外部样式表的 ID 选择器 内嵌样式表的标签选择器 原则 就近原则 精品文档 12欢迎下载 六 CSS 的各种属性 掌握 CSS 中尺度单位的介绍 CSS 的单位 a 绝对单位 1in 2 54cm 25 4mm 72pt 6pc pt 是点或者磅 pc 是派 卡 b 相对单位 px em 印刷单位相当于 12 个点 相对周围的文字 字体设置 p font size 50px 字体大小 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 transform lowercase 单词字体大小写 color red 背景设置 body background color ff99ff 背景颜色 精品文档 13欢迎下载 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 不动 列表设置 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 相对定位 相对的是自己在顺序流中 原来的位置 left 100px 横坐标 精品文档 14欢迎下载 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 20px top 20px z index 值任意 值越大离我们越近 float 浮动 overflow 超出范围怎么办 鼠标样式设置 cursor 七 滤镜 了解 css 滤镜的兼容性 实现 精品文档 15欢迎下载 滤镜效果只是 IE 内核才支持 不过咱们平时还是可以用用透明滤镜的 之前看到美工 组组长的期末网站作品 一直很好奇那些透明效果是怎么做出来的 现在算是有点头 绪了 为什么火狐谷歌 chrome 等浏览器不支持一些 css 滤镜 在 IE 下使用的滤镜 可以实现很多不错的特效 但是在 chrome 和火狐 opera 等 浏览器里这些就全都失效了 这是为什么呢 找了一下原来是因为滤镜只是属于 IE 浏 览器开发下的功能 不支持 IE 内核的浏览器也就都不支持这些滤镜 不过一般都支 持透明滤镜 只是写法不一样 如下 要设置一下透明度为 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 hasLayout filter alpha opacity 60 IE 8 为 IE 下写法 opacity 0 6 为火 狐等浏览器下写法 所以要都支持这个滤镜 就得两个都写上 搞的这麻烦 看得出 W3C 标准规范化可以实现的好处了 CSS 滤镜详解 大多数只支持 IE CSS 样式表是一种为超文本标签语言提供增强补充服务的技术 可对每一个 html 的标签做精雕细刻的修饰 只用 html 制作的网页 对页面内各部分的修饰能力有限且 语句烦锁 样式表正是弥补这一缺陷的有力技术 它语句文法简单 只要在源码中插 入 style 语句就可轻易实现页面内任意文本颜色 背景 边框 行距 字距的添删和 修饰等功能 使网页更加生动活泼 从而获得满意的效果 当然 样式表的强大还依 靠的就是它的滤镜功能 因为有了滤镜 大家就可以轻易地创造出 专业 的艺术效 果 为了能帮助大家高效使用好样式表滤镜 笔者将对样式表滤镜各方面的内容进行 详细介绍 精品文档 16欢迎下载 一 什么是样式表滤镜 说到滤镜 其实它并不是对图像进行了什么处理 而是在浏览器中对使用了该属 性的对象进行一定的修饰 样式表滤镜实际上是样式表一个新的扩展部分 使用这种 技术简单的语法就可以把可视化的滤镜和转换效果添加到一个标准的 html 元素上 例 如图片 文本 以及其他一些对象 为页面添加一些丰富的变化 如果大家有一些脚 本语言的基础 能够把滤镜效果与类似 javascript 的脚本代码做一些结合 就可以拥 有一个在样式表滤镜与脚本共同作用下建立的强大的动态交互文档工具 现在能使用 的滤镜有 13 个之多 不过要欣赏到这些滤镜的特效 必须要求用户的浏览器必须在 IE4 0 NC6 0 之上 因为只有这些版本的浏览器才能支持样式表滤镜效果 二 常用的样式表滤镜 随着样式表技术的不断成熟 其滤镜功能和种类也在不断增多 如果用户能够熟 练地混合使用它们 将可以产生意想不到的效果 在操作上 用户只需要了解具体滤 镜的实际效果后 就能根据实际进行微调了 为了使大家能有针对性地使用滤镜 下 面就把一些常用滤镜的功能和参数详细介绍如下 1 滤镜 作用 该滤镜可以实现各种溶入效果 如果大家将该滤镜与网页脚本语言结合起来 对滤镜的参数进行处理的话 就能很轻易地做出淡入淡出的效果来 语法 FILTER ALPHA opacity opacity finishopacity finishopacity style style startx startx starty starty finishx finishx finishy finishy 参数 Opacity 参数代表图象的起始透明度 其默认的数值是从 0 到 100 0 代表完全 透明 100 代表完全不透明 FinishOpacity 是一个可选参数 如果想要设置渐变的透 明效果 就可以使用他们来指定结束时的透明度 作用范围也是 0 到 100 Style 表示 透明区域的形状特征 其中 0 代表统一形状 1 代表线形 2 代表放射状 3 代表矩形 startx 表示渐变透明效果开始处的 X 坐标 starty 代表渐变透明效 果开始处的 Y 坐标 finishx 代表渐变透明效果结束处的 X 坐标 finishy 代表渐变透 明效果结束处的 Y 坐标 精品文档 17欢迎下载 2 模糊滤镜 作用 该滤镜主要是让图象产生一种模糊效果 语法 filter blur add add direction direction strength strength 参数 该滤镜主要包括三个参数 其中 add 是用来指定图象是否被改变成印象派的模 糊效果 模糊效果是按顺时针的方向进行的 它的数值应该是 ture 或 false direction 参数是用来设置模糊的方向的 其中 0 度代表垂直向上 每 45 度为 一个单位 默认值是向左的 270 度 strength 参数代表有多少像素的宽度将受到模糊 影响 缺省的参数值是 5 个像素 而且该参数值只能使用整数来指定 3 斜影滤镜 作用 该滤镜主要是为对象建立轮廓的影子效果的 它可以在指定的方向建立物体的 投影 语法 filter shadow color color direction direction 参数 斜影滤镜只有两个参数 其中 color 代表投影的底色 该数值是用英文字母来 代替的 例如投影底色是红色的话 就应该设置 color red direction 参数是用来设 置投影方向的 如果该数值是 0 的话 就代表垂直投影 此外该数值每 45 度为一个单 位 它的默认值是向左的 270 度 4 发光滤镜 作用 该滤镜可以给图象或者文字产生一种发光效果 语法 filter glow color color strength strength 精品文档 18欢迎下载 参数 该滤镜的 color 参数与阴影滤镜的 color 参数功能几乎是一样的 不过这里的 color 参数是用来设置发光颜色的 strength 参数是用来指定发光强度的 其值为 1 到 255 之间的任何整数 5 灯光滤镜 作用 灯光滤镜是模拟光源来投射文字或者图象 使图象和文字能产生一定的投射效 果 语法 filter light 参数 一旦为对象定义了 light 滤镜属性后 大家就可以调用它的 方法 Method 来设置或者改变属性 该滤镜可用的方法有 AddAmbient 方法是用来加入包围光源的 AddCone 方法是用来加入锥形光源的 MoveLight 方法是用来移动光源的 Changstrength 方法是用来改变光源强度的 Changcolor 方法是用来改变光的颜色的 Clear 方法是用来清除所有光源的 6 遮罩滤镜 作用 该滤镜可以为对象建立一个覆盖于表面的膜 其效果就象戴着有色眼镜看物体 一样 语法 filter mask color color 参数 该滤镜的 color 参数表示覆盖对象表面的颜色 例如如