《html网页布局模板》由会员分享，可在线阅读，更多相关《html网页布局模板（23页珍藏版）》请在金锄头文库上搜索。
1、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 : 根据颜色判断单词是否出错,可以显示2进
3、制数据.*.dw(dreamweaver,专业工具) 代码提示.五、HTML的规范(知道) *.HTML是一个弱势语言*.html 不区分大小写*.html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)*.html 的结构1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。是HTML5标准。2)head部分： 不会显示在页面上。作用是告诉浏览器一些页面的额外信息。3)body部分：我们缩写的代码必须放在此标签內。六、HTML的各种标签(掌握) 明确：每个标签都有私有属性。也都有公有属性。 html中表示长度的单位都是像素。HTML只有一种
4、单位就是像素。 body: bgcolor: 背景颜色background:背景图片text: 文本颜色1.排版标签 所有的浏览器默认情况下都会忽略空格和空行P：p代表一个段落属性： align:对齐方式. 取值：left,right,center代表是换行。hr:color: 线的颜色size : 线的粗细width: 线的长短 两种写法： 1) 绝对值 eg: 500 2) 相对值： 50%noshade: 不要阴影align: 对齐方式 取值： left,right,centercenter: 内容居中pre: 预定义格式标签 .告诉浏览器不要忽略空格和空行div: 块级标签 必须单独占
5、据一行 属性： align :span: 块级标签 不换行字体标记 2 字体标签h1.h6:定义字体大小属性： align :居中font:color:字体颜色颜色的写法有3种： 1)英文单词: red 2)十六进制：#00ffcc 3)RGB(三原色) : new RGB(124,156,23)size:字体大小face：字体类型特殊字符： <小于 >大于 & &符号 " 双引号'单引号 © 版权 ™商标 空格 扩展：绐 b: 加粗strong: 加粗i:斜体em: 斜体u: 下划线s: 中划线(删除线)
6、sup: 上标sub: 下标. 3.图像标记img: 代表是一副图片 属性： src : 图片的路径 两种写法：a) : 相对路径 路径是相对页面所在的路径 两个标记.和. ,分表代表当前目录和父路径 b) ：绝对路径 1) : 以盘符开始的路径 eg: C:Documents and SettingsAdministrator桌面day01_html上课示例/images/1.jpg2) : 网络路径eg: http:/ width: 宽度 height：高度 Alt：当图片显示不出来的时候代替图片显示的内容 title： 提示性文本 border: 边框热点： 就是特定的位置添加超链。 4
7、.清单标记列表标签：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 :在同一个浏览器中显示 _b
8、lank: 打开新的浏览器显示 _parent: 在父窗口中显示 _top: 在顶级窗口中显示6.表格标记 table: 表格 属性：border:边框width:宽度height：高度align:表格的对齐方式cellpadding:单元格内容到边的距离cellspacing:单元格和单元格之间的距离bgcolor:背景颜色background:背景图片bordercolorlight:表格的上，左边框，以及单元格的右，下边框的颜色bordercolordark: 表格的右，下边框，以及单元格上，左的边框的颜色dir:单元格内容的排列方式 取值：ltr 从左到右， rtl:从右到左tr: 行
9、 属性：dir:bgcolor:td: 单元格 属性： align: 内容的横向对齐方式 valign: 内容的纵向对齐方式 top,middle,bottom width: 绝对值或者相对值(%) height:单元格的高度单元格的合并： 单元格的属性： colspan: 横向合并 rowspan: 纵向合并 th: 相当于 + 属性同caption: 表格的标题 属性：align: 取值：left,center,right,top,bottomtheadtbodytfoot 写与不写的区别： 1. 当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的
10、话，那么边下载边显示。2.如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容7.框架标记及 框架页面上不允许有body标签frameset: 框架的集合rows: 纵向分部框架. cols: 横向分部框架. 写法有两种: 1) 绝对值 200,* ,*代表剩余的 2) 相对值 30%,*frame: 框架. 一个框架显示一个页面scrolling: 是否需要滚动条。默认是truenoresize : 固定框架大小bordercolor: 给框架边框起一个颜色nam
11、e : 给框架起一个名字内嵌框架： 嵌入在一个页面上的框架.(仅仅IE支持)iframe:属性： width: 宽度 height： 高度 scrolling : 是否需要滚动条8.表单标记及语义化9.多媒体标记bgsound: 背景音乐 embed: 播放多媒体文件.marquee: 移动属性：direction 移动目标方向 left,right ,up,down ,up，down移动距离是固定的200px behavior: 行为方式 取值：slide,alternate,scroll scrollamount : 移动速度 loop: 循环多少圈。负值表示无限循环 scrolldelay: 移动一次休息多长时间。单位是毫秒10.头标记css笔记一、CSS 概述(了解)*.CSS ： Cascading Style Sheet 层叠样式表*.CSS 作用就是给HTML页面标签添加各种样式*.为什么用CSSHTML的缺陷： 1. 不能够适应多种设备 2. 要求浏览器必须智能化足够庞大 3. 数据和显示没有分开 4. 功能不够强大 CSS 优点：1.使数据和显示分开2.降低网络流量3.使整个网站视觉效果一致4.使开发效率提高了二、CSS语法p
