专业铸造品质 知识成就未来-硅谷动力网络学院

Slides:



Advertisements
Similar presentations
第5章 表格的设计与 制作. 内容提要 表格的创建、编辑 表格的属性设置 特效表格的制作 布局表格的基本操作 表格和布局表格的应用.
Advertisements

Web 开发基础 第二章 表格与页面布局. 回顾 Internet 和 万维网 网页的工作原理 网页的基本结构 标记及其属性 段落标记,图片标记,超级链接标记 相对路径,绝对路径,物理路径.
HyperText Markup Language
第六章 网页设计与制作基础.
ASP.NET 網頁製作教本 -- 從基本語法學起
项目2 字符格式和段落编排 2017年3月7日6时54分.
HTML第一课 李 伟 HTML开发语言基础.
第5章 HTML 標籤介紹.
佛山科学技术学院 第7章 HTML Internet及多媒体应用.
第8讲 HTML与PHP基础 静态网页 vs. 动态网页.
网页制作 第一讲
HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。
第7章 表 格 清华大学出版社.
教学内容 1、演示并讲解用表格布局制作的网页 2、用表格制作网页.
DREAMWEVAER MX 2004入门 楼斌 BBS ID:lou 生命科学学院
网页 设计与制作.
2 HTML5與CSS3 2-1 HTML5的頁面結構 2-2 HTML5的文字編排標籤 2-3 HTML5的圖片與超連結標籤
第3章 HTML语言 3.1 HTML文档的基本结构 3.2 文字排版 3.3 图片排版 3.4 超级链接 3.5 表格 3.6 框架窗口
模块1 网页设计基础 实训1 体验HTML文档 1.1 网页基础知识 1.2 网站配色方案 1.3 网站设计常用软件
使用HTML製作個人網頁 柴惠敏 台灣大學 物理治療學系.
专业铸造品质 知识成就未来-硅谷动力网络学院
第二部分 HTML语言控制 本次课的主要内容: 1、认识网页文件的结构 2、HEAD、TITLE、BODY等基本标记符的使用
HTML 語法教學 授課:彭穎聰 老師.
第6章 网页图像处理 通过本章学习,应该掌握以下内容: 能够选择合适的网页颜色 了解网页图像的基本格式 掌握使用网页图像的要点
SSD1: Introduction to Information Systems
HTML簡介、文字的變化、超連結的使用 主講:朱漢琳.
CT212 (02/03)-Network Programming and design
武汉纺织大学传媒学院 cm.wtu.edu.cn
網際網路的應用服務 – Web 概念與網頁語言
第二章 網際網路網頁的設計.
HTML.
ASP动态网页设计实用教程 主讲教师: 开课单位:.
  本章共分21个实例,主要内容包括HTML 创建与测试、html的文档结构、常用标记的使 用、表格和层的使用技灵活掌握等内容。
第3章 超文本标记语言(HTML) 3.1 基本结构标记 3.2 文本格式标记 3.3 超链接标记<A></A>
UI 软件 设计 网页基本元素设计(二).
建國技術學院資訊管理學系 饒瑞佶 2004/7/5 彰化縣政府補助辦理網頁設計資料庫應用班 建國技術學院資訊管理學系 饒瑞佶 2004/7/5.
Google 自訂搜尋 淡江大學資訊中心 專案發展組 朱家璁 2009/10/6.
网页设计 上海建桥学院信息技术系 矫桂娥
教師: 陳明瑤 電郵: 網際網路應用-網頁設計3 教師: 陳明瑤 電郵:
Ch01 HTML 5 資料格式 網頁程式設計.
計算機概論 請老師填入姓名主講 課本:數位傳真2012 博碩文化出版發行.
HTML網頁設計 Chapter 建置網站的流程 16-2 從事網頁設計相關的程式語言 16-3 認識HTML語法
HTML 钟晖云 QQ:
Ch.13 HTML網頁實作.
第2章 超文本标记语言HTML.
8 网页制作基础知识 赵国庆 博士 北京师范大学教育技术学院
W3C标准网页制作 主讲教师:张 涛.
授课教师:姬广永 QQ: TEL: 学习交流网站:
网 站 设 计 与 建 设 Website design and developments
HTML – 文字格式 資訊教育.
十二年國民基本教育中等學校教師教學專業能力研習五堂課
HTML & CSS.
主讲:陶建平 华中科技大学网络与计算中心
网页设计与制作 网页基本标签(三) 北京农业职业学院刘丽霞.
The Department of Education Technology
网页制作基础 CNIC 王桦.
Web应用开发.
W3C标准网页制作 主讲教师:张 涛.
网页设计与制作教程第5版 机械工业出版社同名教材 配套电子教案.
表格页面 表格标签 1、标题标签<Caption>用于定义表格的标题。 align属性:控制标题位置。 取值为:
计算机网络与网页制作 Chapter 07:Dreamweaver CS5入门
项目二:HTML语言基础.
HTML大探索.
段磊 王慧锋 TEL: 数据库系统原理课程设计 实验环节4 段磊 王慧锋 TEL:
第6章 PHP的数据采集.
第6章 框架实现多窗口网页.
第2章 块级标签 经济管理学院.
表单页面 表单是用户利用浏览器对Web站点网络数据库进行查询的一种界面,用户利用表单可以输入信息或选择选项等,然后将这些信息提交给服务器进行处理。通过表单,既可以将浏览器的信息发送到Internet服务器上,同时表单也可以使用户与站点的浏览者交互或从浏览者那里收集信息。它是网页的设计者和使用者相互交流的工具。表单对象包括文本域(单行、多行、密码)、列表、菜单、复选框、单选框、按钮等。
HTML5.
教师:李金双 网页制作 教师:李金双
Presentation transcript:

专业铸造品质 知识成就未来-硅谷动力网络学院 HTML第一讲 主讲:吴涛 硅谷动力网络学院 作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系hzhang@mail.enet.com.cn

HTML概念 HTML(Hyper Text Markup Language 超文本标识语言) 是一种用来制作超文本文档的简单标记语言。

HTML文档的编写方法 手工直接编写 记事本等,存成.htm .html格式 使用可视化HTML编 辑 器 Frontpage、Dreamweaver等 由Web 服务器( 或称HTTP 服务器) 一 方实时动态地生成。

网页文件命名 *.htm或*.html 无空格 无特殊符号(例如&符号),只可以有下划线“_”,只可以为英文、数字 区分大小写 首页文件名默认为:index.htm 或 index.html

HTML 文件结构 <html>...</html> <head>...</head> <body>...</body> 元素:是HTML语言的基本部分。元素总是成对出现,每一对元素一般都有一个开始的标记(如<body>),也有一个结束的标记(如</body>)。元素的标记要用一对尖括号括起来,并且结束的标记总是在开始的标记前加一个斜杠。

HTML 文件结构 (Document Structures) <HEAD> <title></title> <meta> </HEAD> <BODY> HTML 文件的正文 </BODY> </HTML>

第一张网页(01.htm) <html> <head> <title>my first page</title> </head> <body> This is my first homepage! </body> </html>

基本组成部分—— HTML元素属性 HTML元素可以有自己的相关属性,每一个属性还可以由我们网页编制者赋一定的值。元素属性出现在元素的< >内,并且和元素名之间有一个空格分隔;属性值用“”引起来。

第二张网页(02.htm) <html> <head> <title>my first page</title> </head> <body> <p align="center">This is my first homepage!</p> </body> </html>

HTML基本结构的 有关元素和元素属性 HEAD元素——1 <head>元素出现在文档的开头部分。<head>与</head>之间的内容不会在浏览器的文档窗口显示,但是其间的元素有特殊重要的意义。 <title> <title>元素定义HTML文档的标题。<title>与</title>之间的内容将显示在浏览器窗口的标题栏。

HTML基本结构的 有关元素和元素属性 HEAD元素——2 <meta>元素 <meta name="keywords" content="study,computer"> 用来标记搜索引擎在搜索你的页面时所取出的关键词。

HTML基本结构的 有关元素和元素属性 HEAD元素——3 <meta>元素 <meta name="author" content=“wutao"> 用来标记文档的作者。

HTML基本结构的 有关元素和元素属性 HEAD元素——4 <meta>元素 <meta http-equiv=“Content-Type” content=“text/html; charset=gb2312”> 用来标记你的页面的解码方式。

HTML基本结构的 有关元素和元素属性 HEAD元素——5 <meta>元素 <meta http-equiv=“refresh” content=“5;URL=http://www.enet.com.cn/eschool”> 用来自动刷新网页

练习(03.htm) 编写一个网页,要求3秒钟后自动跳转到硅谷动力学院的网站。 <html> <head> <title>my first page</title> <meta http-equiv=“refresh” content=“3;URL=http://www.enet.com.cn/eschool”> </head> <body> <p align=“center”>三秒钟后本网页将自动跳转到硅谷动力网络学院首页</p> </body> </html>

<body>元素及元素属性——1 <body>元素表明是HTML文档的主体部分。在<body>与</body>之间,通常都会有很多其它元素;这些元素和元素属性构成HTML文档的主体部分。

<body>元素及元素属性——2 (1)bgcolor bgcolor属性标志HTML文档的背景颜色。如:bgcolor="#CCFFCC"。 例:04.htm

HTML对颜色的控制 HTML对颜色的控制也有自己的语法。HTML使用16进制的RGB颜色值对颜色进行控制。 16 进制的数码有: 0,1,2,3,4,5,6,7,8,9,a,b,c,d,e,f.

常见颜色的代码 颜色 颜色名和RGB值 黑色 Black=”#000000” 银色 Silver=”#c0c0c0” 红色 Red=”#ff0000” 蓝色 Blue=”#0000ff” 白色 White=”#ffffff” 黄色 Yellow=”ffff00” 绿色 Green=”#00ff00” 海蓝色 Aqua=”#00ffff”

<body>元素及元素属性——3 (2)background background属性标志HTML文档的背景图片。如:background=“images/bg.gif"。 可以使用的图片格式为GIF,JPG 例:05.htm、06.htm

<body>元素及元素属性——4 (3)bgproperties=fixed bgproperties=fixed使背景图片成水印效果,即图片不随着滚动条的滚动而滚动。 例:07.htm和08.htm对比

<body>元素及元素属性——5 (4)text text属性标志HTML文档的正文文字颜色。如:text=“#FF6666”。Text元素定义的颜色将应用于整篇文档。 例:09.htm

<body>元素及元素属性——6 (5)超级链接颜色 link、vlink、alink分别控制普通超级链接、访问过的超级链接、当前活动超级链接颜色。 例:10.htm

<body>元素及元素属性——7 (6) leftmargin和topmargin 设置网页主体内容距离网页顶端和左端的距离如:leftmargin="20" topmargin="30“ 例:11.htm

专业铸造品质 知识成就未来-硅谷动力网络学院 HTML第二讲 主讲:吴涛 硅谷动力网络学院 作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系hzhang@mail.enet.com.cn

文字标签属性——1 文字属性标记 1.文字颜色 例:01.htm 指定颜色 <font color=#> ... </font> #=RRGGBB 16 进制数码 例:01.htm

文字标签属性——2 文字属性标记 2.文字字体 02.htm <font face=“#, #, ..., #”> ... </font> #=客户端可获得的字体 02.htm

文字标签属性——3 文字属性标记 3.文字大小 例:03.htm <font size=#> ... </font> #=1, 2, 3, 4, 5, 6, 7 or +#, -# 例:03.htm

文字标签属性——4 文字属性标记 4.文字标题 例:04.htm <h#> ... </h#> #=1, 2, 3, 4, 5, 6 例:04.htm

文字布局 行的控制 段(Paragraph) (可以看作是空行) <p> 空白占位符  例:05.htm

文字布局 行的控制 HTML的段落与段落之间有一定的空隔。如果不希望出现空隔而只想换行的话,就要用到另一个元素,即<br>元素。<br>元素可以使所在的位置出现换行。这种换行和浏览器的自动换行的效果类似。<br>元素不是成对出现的。 例:06.htm 不换行<nobr> 07.htm

HTML文字与段落格式控制 <body>…… <i>倾斜文本</i> <b>粗体文本</b> <u>下划线文本</u> <s>删除线文本</s> ……</body> 例:08.htm、09.htm、10.htm、11.htm(综合练习)

基本组成部分—HTML注释 HTML文档可以插入注释。注释内容不会在浏览器窗口显示

文字的对齐 <hn align=#>...</hn> (n=1,2,3,4,5,6) <p align=#>...</p> (#=left, center, right) 例:13.htm

文字的分区显示 <div align=#> ... </div> (#=left, center, right) 例:14.htm

3.HTML段落与分行控制 居中--- <center>元素 <center>元素是一个独立的使所标记的字符居中的元素。它的作用与使用<p>元素里的align=“center”类似 例如:<center>居中段落</center> 15.htm

3.HTML段落与分行控制 标尺线 <hr size = #>:设定线宽 <hr width=#>:设定线长 <hr align=#>:设定对齐方式 #=left, right <hr color=#> :设定线的颜色 例:16.htm

3. HTML的段落与分行控制 无序列表元素—1 列表在HTML的文档里有重要的地位,HTML规定了多种列表元素。列表所起的主要作用是使特定的文本有序化。

3. HTML的段落与分行控制 无序列表元素—2 无序列表是由<ul>和<li>元素定义的: <ul> <li>sports</li> <li> food </li> <li> drink </li> <li> friends </li> </ul> 例:17.htm

3. HTML的段落与分行控制 无序列表元素—3 无序列表的默认符号是圆点。 <ul>元素有type属性,通过定义不同的type属性可以改变列表的项目符号。目前,type属性的属性值有: disc(圆)、circle(圆圈)、square(方块) 例:18.htm

3. HTML的段落与分行控制 有序列表元素—1 有序列表由<ol>和<li>定义: <ol> <li>sports</li> <li> drink</li> <li> friends</li> </ol> 例:17.htm

3. HTML的段落与分行控制 有序列表元素—2 <ol>元素也有自己的type属性,type属性的属性值有1、A、a、I、i等。例如,我们以A、B、C……作为列表的编号 例: 19.htm <ol>元素还可以定义列表的起始编号,如我们希望列表的第一个编号为5,而不是1,则需要定义<ol>元素的start属性 例:20.htm

4.超级链接—普通超级链接1 超级链接是整个WWW应用的核心和基础。如果没有超级链接的概念,那么,我们现在所有的WWW的应用将不复存在。所以,对超级链接的掌握具有特殊重要的意义。

4.超级链接—普通超级链接2 超级链接是用锚元素<a>定义的 在<a>元素下,有元素属性href,href的属性值为一个URL地址 如:<a href=“http://www.enet.com.cn/eschool”>指向学院的超级链接</a> 如:<a href=“29.htm">普通超级链接</a> 例:21.htm

4.超级链接—E-mail超级链接 超级链接可以指向E-mail地址 如:<a href=“mailto:hzhang@mail.enet.com.cn">指向E-mail地址的超级链接</a> 例:22.htm

4.超级链接—新开链接窗口 开一个新的(浏览器)窗口 (Target Window) <a href="URL" target=“_blank"> ... </a> 例:26.htm

4.超级链接—去除下划线 去掉超级连接的下划线:style=“text-decoration: none” 例:25.htm

4.超级链接——其他超级链接 WWW应用仅仅是Internet应用的一种,Internet还有其他很多应用,如:Ftp等。实际上mailto也属于非WWW应用。我们可以类似的创建指向Ftp等的超级链接; 指向其他Internet应用的超级链接不是我们掌握的重点。

4.超级链接——锚点(书签) 1 <a name="aa"> <a href="#aa">指向本页面锚点aa的超级链接</a> 例:23.htm <a href=“23.htm#top”>指向23页面的锚点top的超级链接</a> 例:24.htm

练习:手写代码实现 链接(新开窗口与Email)、背景、文字颜色、字体、换行、页面标题。 练习:27.htm

HTML对图片的控制--1 基本语法: <img src=“图片名称”> 引用图片必须用<img>元素标志。<img>元素下的基本元素属性是src属性,src的属性值为所引用的图片的URL地址。 src属性是必须的。Src的URL可以是绝对地址,也可以是相对地址 例:28.htm

HTML对图片的控制--2 所谓图片的替代文本,指图片不能显示时在图片所在位置显示的一段文本或当鼠标移到图片上时也会显示替代文本。 定义图片替代文本的方法是: <img src=“图片名称” alt=“这是一张图片”> 例:28.htm

HTML对图片的控制--3 图片的显示大小 我们可以指定一幅图片在浏览器窗口里的显示大小。 定义图片的显示大小的方法是: <img src="sample.jpg" width=100 height=100 > width指定图片的宽度,height指定高度。它们的属性值可以是象素,也可以是%。 例:29.htm

HTML对图片的控制--4 图片的边框 我们可以为一幅图片加一个边框以突出显示: <img src="sample.jpg" border= " 2 " > border的属性值为象素数 例:30.htm

HTML对图片的控制--5 图片的对齐方式 图片可以相对于页面或单元格有一个对齐方式。 定义水平对齐方式的方法是: <img src=“sample.jpg” align=“left” > <img rc=“sample.jpg” align=“right”> 例:31.htm

HTML对图片的控制--6 图片的对齐方式 定义图片的垂直对齐方式: <img src="sample.jpg" align="top" > <img src="sample.jpg" align="middle"> <img src="sample.jpg" align="bottom" > 对于图片的对齐方式不仅是以上几种,但是以上的几种是最常用的。 例:32.htm

HTML对图片的控制--7 定义图片与左、右的文本之间的间距 图片在显示时,与左右的文本之间可以有一定的间距 <img src="sample.jpg" hspace=5 vspace=5 > Hspace(horizontal)定义水平间距; Vspace(vertical)定义垂直间距。单位都是象素数. 例:33.htm

HTML对图片的控制--8 图象的超级链接 图象的超级链接是指整个图象的超级链接,当点击图象的任何部分时,都会打开这个超级链接。定义默认超级链接的方法是: <a href=“http://www.enet.com.cn/eschool”><img src="sample.jpg" ></a> 所以,所谓超级链接实际上就是用<a>元素标志一个图象的引用; 例:34.htm

HTML对图片的控制--9 图象映射 所谓图象映射是指一个图片上的不同位置被指定了不同的超级链接;点击图片的不同位置会打开不同的超级链接目标。这与前面的默认超级链把整个图片作为超级链接的元素是很不一样的。

HTML对图片的控制--10 图象映射(只要求理解标记含义) 图象映射由<map>定义。<map>有一个基本属性是name。Name给图象映射命名,这个命名将会被<img>元素用usemap属性引用。所以,图象上的图象映射实际上是对<map>定义的映射的一个引用。 <map>在定义图象映射时,可以定义三种形状的映射: circle(圆形)、rect(矩形rectangle)、poly(多边形)

HTML对图片的控制--11 图象映射实例(35.htm) <img src="bear.jpg" usemap="#Map" > <map name=“Map"> <area shape="rect" coords="46,29,253,164" href="#" > <area shape="circle" coords="76,510,59" href="#" > <area shape="poly" coords="219,482,253,448,310,462,297,527,220,523" href="#" > </map>

专业铸造品质 知识成就未来-硅谷动力网络学院 HTML第三讲 主讲:吴涛 硅谷动力网络学院 作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系hzhang@mail.enet.com.cn

一月 二月 三月 1200 1000 1500 表格(用<Table>来表示,表格可以有背景颜色、背景图片) 表头(用<TH>来表示,表头是特殊的单元格,其中的文字加进去之后默认是居中并且加粗) 表格边框 一月 二月 三月 1200 1000 1500 单元格(用<TD>来表示,每个单元格可以有背景颜色和背景图片) 每一行可以用<TR>来表示,单元格放在行中,每行可以有很多的单元格。

表格(TABLE)标记--1 <table> 元素:定义一个表格。每一个表格只有一对<table>和</table>,一张页面中可以有多个表格。 <tr>元素:定义表格的行,一个表格可以有多行,所以<tr>对于一个表格来说不是唯一的。 <td>元素:定义表格的一个单元格。每行可以有不同数量的单元格,在<td>和</td>之间是单元格的具体内容。 需要注意的是:上述的三个元素必须、而且只能够配对使用。缺少任何一个元素,都无法定义出一个表格。

表格(TABLE)标记--2 表格的基本结构 <table>定义表格 <tr> <th>定义表头</th> </tr> <tr>定义表行 <td>…</td>定义单元格 </table> 例:02.htm

表格(TABLE)标记--3 表格的属性 –1 width属性:指定表格或某一个表格单元格的宽度。单位可以是%或者象素。 height属性:指定表格或某一个表格单元格的高度。单位可以是%或者象素。 border属性:表格边线粗细 例03.htm、04.htm、05.htm

表格(TABLE)标记--2 表格的属性 –1 4、bgcolor属性:指定表格或某一个单元格的背景颜色。 5、background属性:指定表格或某一个单元格的背景图片。其属性值为一个URL地址。 例:07.htm

表格(TABLE)标记--3 表格的属性 –2 6、bordercolor属性:指定表格或某一个单元格的边框颜色。 例:08.htm 7、Bordercolorlight属性:亮边框的颜色 8、Bordercolordark属性:暗边框的颜色 例:09.htm

表格(TABLE)标记--3 表格的属性 –2 9、align属性:指定表格或某一个单元格里的内容(文本、图片等)的对齐方式。 例:10.htm

表格(TABLE)标记--3 表格的属性 –2 10、cellspacing属性:单元格间距。 例:11.htm 11、cellpadding属性:单元格边距。 例:12.htm

表格(TABLE)标记--4 单元格属性 1、valign属性:指定某一个单元格里的内容(文本、图片等)的垂直对齐方式。垂直对齐方式的属性值包括: top:顶端对齐; middle:居中对齐; bottom:底端对齐; Baseline:相对于基线对齐; 例:13.htm

表格(TABLE)标记--5 单元格属性 2、Colspan:属性值表示当前单元格跨越几列 例:14.htm 3、Rowspan:属性值表示当前单元格跨越几行 例:16.htm

表格(TABLE)标记--6 行属性 1、valign属性:指定某一个单元格里的内容(文本、图片等)的垂直对齐方式。垂直对齐方式的属性值包 top:顶端对齐; middle:居中对齐; bottom:底端对齐。 Baseline:相对于基线对齐。

表格(TABLE)标记--7 行属性 2、align属性:指定表格或某一个单元格里的内容(文本、图片等)的对齐方式 3、height属性:指定表格或某一个表格单元格的高度。单位可以是%或者象素

表格进阶 表格的嵌套 在<td> </td>之间插入表格,实现表格嵌套 例:17.htm 表格的作用一般只是控制文本和图像的显示,而不显示表格的边框 例:18.htm

综合案例 表格的综合使用 例:19.htm

表单(FORM)标记 HTML表单是HTML页面与浏览器端实现交互的重要手段。利用表单可以收集客户端提交的有关信息。 在HTML里,我们可以定义表单,并且使表单与CGI或ASP等服务器端的表单处理程序配合。我们在网页设计课程中不会涉及程序编制。

表单(FORM)标记 表单是网页上的一个特定区域。这个区域是由一对<form>元素定义的。 <form>元素 action属性:用来定义表单处理程序(一个ASP、CGI等程序)的位置(相对地址或绝对地址)。 Method定义表单结果从浏览器传送到服务器的方法,一般有两种方法:get、post。

表单(FORM)标记 表单的基本语法: <form action="url" method=* type=text/plain> ... <input type=submit> <input type=reset> </form> * =GET有数据量限制,POST无以上限制,以文件形式传输 例:22.htm

表单(FORM)标记 <input name=? type=* value=** size=*** maxlength=??> 文本框 <input name=? type=* value=** size=*** maxlength=??> ?  文本框的名字 *  text,password **  默认值 *** 长度 ??  最大输入字符数 例20.htm

表单(FORM)标记 3.文本域 <textarea name=* rows=** cols=**> ... </textarea> 例:20.htm

表单(FORM)标记 按钮 包括普通按钮、重置按钮和提交按钮 <input type="submit" value="提交" name=“B1"> <input type="reset" value="全部重写" name=“B2"> 例:21.htm

表单(FORM)标记 5.复选框(Checkbox) 在一个表单里的所有多选框可以有一个或多个被选中。 <input type=checkbox> <input type=checkbox checked> <input type=checkbox value=**> 例25.htm

表单(FORM)标记 6.单选框(RadioButton) 一个表单里的所有变量名相同的单选框只能够有一个被选中。 <input type=radio name=sex value=**> <input type=radio name=sex value=** checked> 各个选项的name必须一样才能达到预期效果 例:26.htm 注意262.htm的写法是错误的

表单(FORM)标记 7.下拉列表 基本语法 <select name=*> <option selected>说明</option> <option value=**>说明2 </option> </select> 例:28.htm

表单(FORM)标记 7.下拉列表 (2)列表框的长度 <select size=**> (3)允许多选 <select size=** multiple> 例:29.htm、30.htm

表单(FORM)标记 8.图象域 <input type=image src=url> 例:image.htm

表单(FORM)标记 综合练习(*) 实现留言簿 要求:背景、文字颜色、字体、换行、页面标题、表单文本框、文本域、单选框、复选框、下拉列表、图象域、提交与取消按钮,内容以mail形式提交。

专业铸造品质 知识成就未来-硅谷动力网络学院 HTML第四讲 主讲:吴涛 硅谷动力网络学院 作者仅授权硅谷动力网络学院发表该系列教程,版权归作者本人与网络学院拥有.任何个人与网站转载请联系hzhang@mail.enet.com.cn

网页中的框架 制作框架页面的步骤: 1.编写所有子框架页面 2.编写主框架页面 3.在主框架页面中设定子框架名称 4.如果框架页面之间存在链接,在子框架中设定链接。 注意:框架页面是不含<body>标签的

网页中的框架 基本语法 <frameset> <frame src="url"> <noframes> <body> 您的浏览器不支持框架,请考虑升级您的浏览器! </body> </noframes> </frameset>

网页中的框架 定义框架的基本语法 框架由一对<frameset>定义 <frameset>有两个属性:rows和cols Rows定义上下分割的框架的大小; cols定义左右分割的框架的大小; 在定义大小时,rows和cols可以使用相对大小或以百分比为单位。

网页中的框架 各窗口的尺寸设置 <frameset rows=#>横排多个窗口 <frame src="A.html"> <frame src="B.html"> <frame src="C.html"> </frameset> 排列方式: A B C 例:02.htm

网页中的框架 各窗口的尺寸设置 <frameset cols=#>纵向排列多个窗口 <frame src="A.html"> <frame src="B.html"> <frame src="C.html"> </frameset> 排列方式:A B C 例:01.htm

网页中的框架 COLS & ROWS:纵横排列多个窗口 <frameset cols=137,*> <frame src="A.htm"> <frameset rows=82,*> <frame src="B.htm"> <frame src="C.htm"> </frameset> 排列方式: B A C 例:14.htm

网页中的框架 框架边框的颜色 bordercolor="ff0000“ 例:03.htm 各窗口边框的设置 frameborder=# #=yes, no / 1, 0 例:04.htm 框架边框的宽度 framespacing="10"

网页中的框架 <frame>的属性 name:定义该框架的名字。这个名字可以被一些网页元素引用,如被<a>元素引用。 <a href=url target=“framename”> 例:06.htm、07.htm Src:在本框架里显示网页的URL。 Target:目标框架,引用的是目标框架的名字。

网页中的框架 在当前框架中打开超链接页面 默认就是在当前框架页中打开,也可以采用Target=“_self” 在指定框架中打开超级链接页面 Target=“name” 新开窗口打开链接页面 Target=“_blank” 跳出整个框架集 Target=“_parent”

网页中的框架 <frame>的属性 Scrolling:是否显示滚动条。yes, no, auto 例:08.htm、09.htm Noresize:框架在浏览器里不可以被调整大小。 例:10.htm、11.htm

网页中的框架 内含窗口 <iframe src=# name=##> ... </iframe> #=初始页面的 URL ##=框架名称(Frame Name) 例:15.htm

会移动的文字 基本语法 <marquee> ... </marquee> 例:16.htm 文字移动属性 (1)方向 :direction=# #=left, right,up,down 例:17.htm

会移动的文字 2、文字移动属性 (2)方式: behavior=# #=scroll(循环), slide(只走一次), alternate(来回走) 例:18.htm (3)循环: loop=# #=次数;若未指定则循环不止(infinite) 例:19.htm

会移动的文字 2、文字移动属性 (4)速度: scrollamount=# (5)延时: scrolldelay=# 例:20.htm

会移动的文字 3、其他属性 (1)底色: bgcolor=# (2)面积: height=# width=# #=RRGGBB 16 进制颜色代码 例:22.htm (2)面积: height=# width=# 例: 23.htm (3)空白:hspace=# vspace=# 例: 24.htm

多媒体页面 用<EMBED>嵌入多媒体对象 基本语法 <embed src=#> #=URL 注: 对于不同的plugin,其embed属性也不同。 例: 25.htm(Flash动画) 例: 26.htm(rmi音乐文件) 例: 27.htm(avi动画) 例: 28.htm(mpeg影像文件)

多媒体页面(*) 嵌入背景音乐 <bgsound src=#> #=WAV 文件的 URL <bgsound loop=#> #=循环数 例29.htm(WAV背景音乐)

多媒体页面(*) 特殊标记元素Object <OBJECT>元素用来包含图像、动态图像、Java小程序。 <OBJECT>元素用以替换更具体的<IMG>和<APPLET>元素,以及<EMBED>和<BGSOUND>元素。 例 30.htm