网页制作html css js.ppt

目录• 1.HTML/CSS/JavaScript先睹为快• 2.HTML• 3.CSS• 4.JavaScript1.1 HTML代码• • • 未使用css，JavaScript的html网页 • • • •未使用css，JavaScript的html网页 • •这是一个未使用css，JavaScript的html网页 • ••使用记事本即可编写HTML代码，扩展名是html或htm •使用浏览器就可以查看其效果1.2 CSS代码• • • 使用了css的html网页 • • h2{ font-size:50} • p{font-size:20;font-style:italic} • • • • •使用了css的html网页 • •这是一个使用了css的html网页 • •1.3 JavaScript代码• • • 使用了css和JavaScript的html网页 • • h2{ font-size:50} p{font-size:20;font-style:italic} • • • alert(“这是JavaScript起的作用“); • • • • •使用了css和JavaScript的html网页 • •这是一个使用了css和JavaScript的html网页 • •1.4 HTML、CSS、JavaScript的角色• HTML：超文本标记语言。

是网页设计的主要语言无论 网页是否包括动画、多媒体、图形等各种复杂的元素，其 基本架构都是HTML.• CSS：层叠样式表是目前唯一的网页排版样式标准，弥 补了HTML在网页格式化方面的不足，帮助用户对页面的 布局加以更多的控制• JavaScript用于开发Internet客户端应用程序，实现了一种 实时、动态、交互的页面功能它的出现使静态的HTML 页面逐渐本客户端可做出响应的动态页面所取代• 可以在HTML语言中直接编写CSS和JavaScript代码，也 可以独立编写扩展名分别是.css和.js2 HTML• 1:HTML简介 • 2:基本标记• 3:列表list • 4:表格table • 5:表单form• 6:框架frame • 7:层div2.1.1 HTML概念• HTMLØHyper Text Markup Language 超文本标识语言 Ø是一种用来制作超文本文档的简单标记语言Ø用HTML编写的超文本文档称为HTML文档 ØHTML文档：*.htm或*.html Ø文件名区分大小写Ø浏览HTML文件的工具:浏览器 Ø例：Netscape Navigator ,Microsoft IE,Mazilla FireFox2.1.2 HTML2.1.2 HTML文档的编写方法文档的编写方法• 手工直接编写 Ø记事本等，存成.htm .html格式，要求用户必须掌握 HTML• 使用可视化HTML编 辑 器 ØFrontpage、Dreamweaver等,容易产生废码2.1.3 HTML 2.1.3 HTML 文档结构文档结构my first page This is my first homepage!这是我的第一张网页！2.1.3 HTML 2.1.3 HTML 文档结构文档结构•标记(签)是HTML语言的基本部分，比如、、 、、。

大多数标记总是成对出现，每一对标记一般都有一个 开始的标记并且结束的标记总是在开始的标记前加一个斜杠•属性：HTML标记有自己的相关属性，每一个属性还可以由我们网页 编制者赋一定的值Ø my first homepage Ø •注意： Ø 标记不区分大小写例都可以 Ø 标记中不要有空格，否则浏览器无法识别例错误 Ø 任何空格和回车在代码中无效插入空格和回车分别用 和 Ø 属性的值可以用双引号引起来，也可以不引，最好引起来 Ø 各属性之间无先后次序，属性也可省略（即取默认值）2.1.3 HTML 2.1.3 HTML 文档结构文档结构- -head(titlehead(title) )• 标记出现在文档的开头部分与之间的内容不会在浏览器的文档窗口显示，但是其间的元素有特殊重要的意义 1:标记定义HTML文档的标题与之间的内容将显示在浏览器窗口的标题 栏2.1.3 HTML 2.1.3 HTML 文档结构文档结构- -head(metahead(meta) )2:标记 标记定义网页的一些相关信息，例文件的关键字，作 者，网页过期时间等，这些信息不会在浏览器的文档窗口显 示Ø 用来标记搜索引擎在搜索你的页面时所取出的关键词。

Ø 用来标记文档的作者 Ø 用来标记你的页面的解码方式 Ø 用来自动刷新网页2.1.3 HTML 2.1.3 HTML 文档结构文档结构-( -(head)metahead)meta•编写一个网页，要求3秒钟后自动跳转到北软教育首页• • • my first page • • • • 三秒钟后本网页将自动跳转到北软教育首页• •2.1.3 HTML 2.1.3 HTML 文档结构文档结构-body-body• 表明是HTML文档内容主体部分在 与之间，通常都会有很多其它标 记；这些标记和标记属性构成HTML文档的主体部 分• 自身属性主要有： Ø 1)bgcolor bgcolor属性标志HTML文档的背景颜色如：bgcolor=“#CCFFCC“ Ø 2)background background属性标志HTML文档的背景图片可以使用的图片格式为 gif,jpg 如：background=“images/bg.gif“ Ø 3)text text属性标志HTML文档的正文文字颜色如：text=“#FF6666”。

text定义的颜色将应用于整篇文档2.1.3 HTML 2.1.3 HTML 文档结构文档结构-body-body颜色颜色名和RGB值 黑色Black=”#000000” 银色Silver=”#c0c0c0”Silver=”#c0c0c0” 红色Red=”#ff0000”Red=”#ff0000” 蓝色Blue=”#0000ff”Blue=”#0000ff” 白色White=”#White=”#ffffffffffff” ” 黄色Yellow=”ffff00”Yellow=”ffff00” 绿色Green=”#00ff00”Green=”#00ff00” 海蓝色Aqua=”#00ffff”Aqua=”#00ffff”2.2.2 基本 HTML 标记• 1.标题标记 • 2.文字标记 • 3.段落级标记 • 4.字符级标记 • 5.水平标尺标记 • 6.HTML注释 • 6.超级链接 • 7.图像标记 • 8.移动的文字2.2.2.1 标题标记• 可显示六种大小的标题，即到， 为最大，为最小 HTML 简介 HTML 简介HTML 简介HTML 简介HTML 简介HTML 简介HTML 简介2.2.2 2.2.2 文字标记文字标记• 文字属性标记Ø1.文字颜色 • . • #=RRGGBB 16 进制数码 Ø2.文字字体 • . #=客户端可获得的字体 Ø3.文字大小 • . • #=1, 2, 3, 4, 5, 6, 7等2.2.2.3.段落级标记• 段落标记(paragraph) • 换行符标记 • 预格式化标记：• HTML的段落与段落之间有一定的空隔。

• 如果不希望出现空隔而只想换行的话，就要用到另一个元 素，即元素 • 利用标记对网页中文字段落进行预格式化，在输入 过程中，按键盘上的回车键，就可以生成一个段落即浏 览器会以文本输入格式显示• 用三种标记分别实现登鹳雀楼的显示2.2.2.4 字符级标记• 常用字符级标记倾斜文本粗体文本下划线文本删除线文本强调文本居中显示文本• 空格标记2.2.2.5 水平线标记• 水平线：设定线宽：设定线长：设定对齐方式 #=left, right ：设定线的颜色• 2.2.2.6 HTML注释• HTML文档可以插入注释不但便于对程序排错， 也使其他人更易读懂自己的代码 • HTML注释的格式为：源码依然存在，不会被浏览器所解释 • 注释语句的特点是仅用于程序中某一句或一段语 句的作用说明，浏览器在执行过程中将忽略掉注 释语句的内容，对其视而不见 2.2.2.7 超级链接超级链接是用锚元素定义的 • 在元素下，有元素属性href,href的属性值为 一个URL地址 Ø如：指向 学院的超级链接 Ø如：普通超级链接 Ø如：普通超级链接 • 开一个新的(浏览器)窗口 (Target Window) . 2.2.2.7 超级链接超级链接的路径 • 绝对路径：指文件的完整路径，包括协议，主机地址等， 一般用于网站的外部链接。

Ø Ø http://127.0.0.1:8080/digitalhome/a.jpg• 相对路径：指相对于当前文件的路径，它包含了从当前文 件指向目的文件的路径，一般用于网站的内部链接相对位置如何输入 同一目录输入要链接的文档名链接上一目录先输入/，再输入目录名链接下一目录先输入目录名，后加/2.2.2.8 图像标记• Ø 的基本属性是src属性，src的属性值为所引用的图片的URL地址 Ø src属性是必须的src的URL可以是绝对地址，也可以是相对地址 Ø Ø width指定宽度，height指定高度它们的属性值可以是象素，也可以是% •定义图片替代文本的方法是： Ø Ø 替代文本有两个作用： • 提示：若图片下载成功，把鼠标放在图片上，会出现提示文本 • 替代：若图片下载不成功，在图片位置出现替代文本•图片的对齐方式 Ø Ø #=left,right,top,middle,bottom2.2.2.8 图像标记• HTML 文档中的图片•GIF（Graphics Interchange Format ）图像 (.GIF) Ø 支持无损压缩 Ø 只支持256色•JPEG（Joint Photographic Experts Group）图像 (.JPG) Ø 有损压缩 ，但这个损失是剔除一些视觉上不易察觉的部分。

Ø 通常用来保存超过256色的图片文件•PNG（Portable Network Graphics ） Ø 新兴的网络图片格式，结合了gif和jpeg的优点 Ø 可以将图片文件以最小的方式压缩而不造成图片失真 Ø 支持48bit的色彩2.2.2.8 图像标记• 图像的超级链接 Ø图像的超级链接是指整个图像的超级链接，当点击图 像的任何部分时，都会打开这个超级链接定义默认 超级链接的方法是： Ø• 图像的热区链接 Ø热区就是在图片中特意划分出一个热点区域当点击 图象的热区时，才会打开这个超级链接 Ø需要使用map标记指定热区2.2.2.9 移动的文字• 基本语法. • 文字移动属性 (1)方向 ：direction=# Ø #=left, right,up,down (2)方式： behavior=# Ø #=scroll(循环), slide(只走一次), alternate(来回走) (3)循环: loop=# Ø #=次数；若未指定则循环不止(infinite) (4)速度: scrollamount=# (5)延时: scrolldelay=#2.3.1 无序列表• 无序列表由和元素定义的:sports food drink friends • 无序列表的默认符号是圆点。

元素有type属性，通过定义不同的type属性可以改变 列表的项目符号目前，type属性的属性。