JavaWeb-01
JavaWeb-HTML入门
一、HTML的概述
a.html是什么 ：
hypertext markup language 超文本标记语言
超文本：音频，视频，图片称为超文本。
标记 ：<英文单词或者字母>称为标记. 一个HTML页面都是由各种标记组成。
b.作用：编写HTML页面。
c.HTML语言不是一个编程语言(有编译过程)，而是一个标记语言(没有编译过程).HTML页面直接由浏览器解析执行。
二、HTML的历史
Web标准：
不是某一个标准，而是一系列标准的集合。网页主要有三部分组成：结构（Structure）、表现（Presentation）和行为（behavior）。对应的标准也分三方面：结构化标准语言主要包括XHTML和XML，表现标准语言主要包括CSS，行为标准主要包括对象模型（如W3C DOM）、ECMAScript等。这些标准大部分由万维网联盟（外语缩写：W3C）起草和发布，也有一些是其他标准组织制定的标准，比如ECMA的ECMAScript标准。
三、HTML的网络术语
- 网页 ：由各种标记组成的一个页面就叫网页 .
- 主页(首页) : 一个网站的起始页面或者导航页面 .
- 标记:
<p>称为开始标记 </p>称为结束标记. 也叫标签.每个标签都规定好了特殊的含义。 - 元素：
<p>内容</p> 称为元素. - 属性： 给每一个标签所做的辅助信息。
- xhtml： 符合XML语法标准的HTML。
- dhtml：dynamic,动态的。javascript + css + html 合起来的页面就是一个dhtml
- http：协议标准。用来规定客户端浏览器和服务端交互时数据的一个格式。SMTP 邮件传输协议,ftp:文件传输协议.
四、HTML的编辑工具
- notepad 记事本
- editplus : 语法高亮显示
技巧： 根据颜色判断单词是否出错。 （不是100%） - ultraedit : 根据颜色判断单词是否出错,可以显示2进制数据.
- dw(dreamweaver,专业工具) 代码提示.
五、HTML的规范
- HTML是一个弱势语言
- html 不区分大小写
- html页面的后缀名是html或者htm(有一些系统不支持后缀名长度超过3个字符，比如dos系统)
- html 的结构
1)声明部分。主要作用是用来告诉浏览器这个页面使用的是那个标准。<!doctype html>是HTML5标准。 2)head部分： 不会显示在页面上。作用是告诉浏览器一些页面的额外信息。 3)body部分：我们缩写的代码必须放在此标签內。
六、HTML的各种标签
明确：每个标签都有私有属性。也都有公有属性。html中表示长度的单位都是像素。HTML只有一种单位就是像素。
<body>:
bgcolor: 背景颜色
background:背景图片
text: 文本颜色
<!doctype html> <!--声明部分:主要作用是用来告诉浏览器这个页面使用的是那个标准-->
<html lang="en">
<head><!--head部分:不会显示在页面上。作用是告诉浏览器一些页面的额外信息。-->
<meta charset="UTF-8">
<meta name="Generator" content="EditPlus?">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<title>Demo01</title>
</head>
<body bgcolor = "red" background = "F:\\图片\\90f58663jw1dzgv2fhwrnj.jpg" text = "blue"><!--body部分:我们缩写的代码必须放在此标签內-->
你好
</body>
</html>
- 1、排版标签
所有的浏览器默认情况下都会忽略空格和空行 <p>：p代表一个段落 属性： align:对齐方式. 取值：left,right,center <br>代表是换行。 <hr>: color: 线的颜色 size : 线的粗细 width: 线的长短 两种写法： 1) 绝对值eg:500 2) 相对值： 50% noshade: 不要阴影 align: 对齐方式 取值：left,right,center <center>: 内容居中 <pre>: 预定义格式标签 .告诉浏览器不要忽略空格和空行 <div>: 块级标签 必须单独占据一行 属性： align : <span>: 块级标签 不换行字体标记Demo
<html> <head> <title>排版标签</title> </head> <body> <!--<p>：p代表一个段落 属性： align:对齐方式. 取值： left,right,center--> <p align = "left">你好0</p>你好1 <p align = "right">你好2</p> <p align = "center">你好3</p> 你好4<br>你好5 <!--<hr>: color: 线的颜色 size : 线的粗细 width: 线的长短 两种写法： 1) 绝对值eg:500 2) 相对值： 50% noshade: 不要阴影 align: 对齐方式 取值： left,right,center --> <hr color = "red" size ="20" width = "75%" noshade > <hr width = "50%" align = "left"> <hr width = "50%" align = "right"> <hr width = "50%" align = "center"> <!--<center>: 内容居中--> <center> HELLO WORLD </center> 清平乐 年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣清泪！ 今年海角天涯，萧萧两鬓生华。 看取晚来风势，故应难看梅花。 <hr> <!--<pre>: 预定义格式标签 .告诉浏览器不要忽略 空格和空行--> <pre> 清平乐 年年雪里，常插梅花醉，挼尽梅花无好意，赢得满衣清泪！ 今年海角天涯，萧萧两鬓生华。 看取晚来风势，故应难看梅花。 </pre> <!--<div>: 块级标签 必须单独占据一行 属性： align :--> <div align = "center"> <p>哈哈</p> 你好 </div> <!--<span>: 块级标签 不换行字体标记 --> <span> 你好 </span > <span> 你好 </span > </body> </html>
- 2、字体标签
<h1>: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>: 中划线(删除线) <sup>: 上标 <sub>: 下标.
Demo
<html lang="en">
<head>
<title>字体标签</title>
</head>
<body>
<h1>你好
<h2>你好
<h3>你好
<h4>你好<br>
<font color = "red" face = "幼圆" size = "30">你好</font><br>
<font color = "#ooffcc" >HELLO WORLD</font><br>
<font color = "new RGB(124,23,122)" size = "20">HELLO HTML!</font><br>
<font size = "30" color = "blue " >< > & " '©™ 组 </font></br>
<b>加粗b</b><br>
<strong >加粗strong</strong ><br>
<i>斜体i</i><br>
<em>斜体em</em><br>
<u>下划线u</u><br>
<s>中划线s</s><br>
<sup>上标sup</sup><br>
<sub>下标sub</sub><br>
</body>
</html>
- 3、图像标记
<img>: 代表是一副图片 属性： src : 图片的路径 两种写法： a) : 相对路径 路径是相对页面所在的路径 两个标记.和.. ,分表代表当前目录和父路径 b) ：绝对路径 1) : 以盘符开始的路径eg: C:\Documents and Settings\Administrator\桌面\day01_html\上课示例/images/1.jpg 2) : 网络路径eg: http://www.baidu.com/images width: 宽度 height：高度 Alt：当图片显示不出来的时候代替图片显示的内容 title： 提示性文本 border: 边框 热点： 就是特定的位置添加超链。 <img src = "F:\\图片\\156_249375_3168d2272b8b390.jpg" width = "200" height = "200" title = "凯尔特人" border = 5 usemap = "#Map"> <map name="Map" id="Map"> <area shape="circle" coords="122,81,38" href="F:\\itheima\\day01\\博客素材\\我的文档\\demo_6.1.html" /> </map> </img><br>
Demo
<html>
<head>
<title>图像标记</title>
</head>
<body>
<img src = "F:\\图片\\156_249375_3168d2272b8b390.jpg" width = "200" height = "200" title = "凯尔特人" border = 5></img><br>
<img src = "http://img0.bdstatic.com/img/image/9yaoxiaohua.jpg"></img><br>
<!--图片显示不出来的时候代替图片显示的内容-->
<img src="http://blog.163.com/faith_yee/blog/wdadasda.jpg" alt = "这是一个无效链接"></img><br>
<!--热点-->
<img src = "F:\\图片\\156_249375_3168d2272b8b390.jpg" width = "200" height = "200" title = "凯尔特人" border = 5 usemap = "#Map">
<map name="Map" id="Map">
<area shape="circle" coords="122,81,38" href="F:\\itheima\\day01\\博客素材\\我的文档\\demo_6.1.html" />
</map>
</img><br>
</body>
</html>
- 4、清单标记
列表标签：3种 a.无序列表<ul> 属性：type : 值： disc(默认，实心原点),square(实心方点),circle(空心圆) b.有序列表<OL> 属性: type:取值：1(阿拉伯数字，默认),a,A,i,I start: 从几开始 c.定义列表<dl> <dt>: 列表项的标题 <dd>: 列表项
Demo
<html lang="en">
<head>
<title>清单标记</title>
</head>
<body>
<UL type = "disc">
<li>心情：差
<li>心情：好
<li>心情：良好
</UL><hr>
<UL type = "square">
<li>心情：差
<li>心情：好
<li>心情：良好
</UL><hr>
<UL type = "circle">
<li>心情：差
<li>心情：好
<li>心情：良好
</UL><hr>
<ol type = "i">
<li>心情：差
<li>心情：好
<li>心情：良好
</ol><hr>
<ol type = "I">
<li>心情：差
<li>心情：好
<li>心情：良好
</ol><hr>
<ol type = "1">
<li>心情：差
<li>心情：好
<li>心情：良好
</ol><hr>
<dl>
<dt>How to use Definition List
<dd>First, you should not place paragraph tag right after or before a list structure or between the items of a list. In cerntain contexts, use of extra paragraph tags should always be avoided, when you realize this concept, it is quit easy to write a HTML.
<dt>Other things to know
<dd>We usually put only ONE Definition tag following the Definition Term tag, more than one DD tag is not recommanded. Besides, unlike Definition List is a nonempty tag, both Definition Term and Definition Description are empty tags.
</dl>
</body>
</html>
- 5、超链接
3种超链接:
1. 连接到其他页面 <a href="http://www.baidu.com/">www.baidu.com</a>
2. 锚: 指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字<a name = "A">锚标记</a> <a href="http://blog.163.com/faith_yee/blog/#A">回到锚</a>
3. 连接到邮件: <a href = "mailto:[email protected]">进入我的邮箱</a>
属性：target: 告诉浏览器怎么显示目标页面,HTML中已定义4个值:
_self :在同一个浏览器中显示
_blank: 打开新的浏览器显示
_parent: 在父窗口中显示
_top: 在顶级窗口中显示
<a href = "thunder= asdasdasdasda">唐山大地震枪版</a>：该例子是弹出迅雷的下载链接板块，因为安装了迅雷之后，迅雷软件自动会在计算机上注册以上属性值。
4、图片超链接：
<a href=‘http://blog.163.com/faith_yee/blog/XXXX.com"><img src="http://blog.163.com/faith_yee/blog/xXXXXX"></a> 这样可以把图片添加超链接
Demo
<html lang="en">
<head>
<title>超链接</title>
</head>
<body>
<!--3. 连接到邮件-->
<a href = "mailto:[email protected]">进入我的邮箱</a><br>
<!--2. 锚: 指给超链接起一个名字，作用是连接到本页面或者其他页面的特定位置。使用name属性给超链起名字-->
<a name = "A">回到最顶的标记</a><br>
<img src = "F:\\图片\\9eaf69ad205690f0d719d4e2dbb3426e.jpg"></img><br>
<a href="http://blog.163.com/faith_yee/blog/#A">回到最顶</a><br>
<!--1. 连接到其他页面-->
<a href = "http:\\www.baidu.com"target = "_self">goto baidu target = "_self"</a><br>
<a href = "http:\\www.baidu.com" target = "_blank">goto baidu target = "_blank"</a><br>
<a href = "http:\\www.baidu.com" target = "_parent">goto baidu target = "_parent"</a><br>
<a href = "http:\\www.baidu.com" target = "_top">goto baidu target = "_top"</a><br>
</body>
</html>
- 6、表格标记
<table>: 表格 属性： 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>: 相当于<td align = "center"> + <b>, 居中加粗 属性同<td> <caption>: 表格的标题 属性：align: 取值：left,center,right,top,bottom <thead>、<tbody>、<tfoot>，写与不写的区别： 1. 当表格非常大的时候，如果不写，则必须等表格的内容全部下载完成才能显示。但是用tbody标签的话，那么边下载边显示。 2. 如果不写thead,tbody,tfoot那么浏览器解析表格内容的时候是从上到下解析。如果写了，那么顺序任意，浏览器解析的时候还是按照thead,tbody,tfoot的顺序显示内容
Demo
<html lang="en">
<head>
<title>表格标记</title>
</head>
<body>
<!--table1-->
<tfoot>
<table border = "1" width = "60%" height = "30%" align = "right" cellpadding = "10" cellspacing = "10" bgcolor = "red" dir = "rtl">
<tr bgcolor = "yellow" dir = "ltr" >
<td bgcolor = "pink">嗯呢</td>
<td align = "right">嗯呢2</td>
<td >嗯呢3</td>
</tr>
<tr>
<td>嗯啊</td>
<td valign = "top">嗯啊2</td>
<td>嗯啊3</td>
</tr>
<tr>
<td bgcolor = "green">嗯恩</td>
<td>嗯恩2</td>
<td height = "20">嗯恩3</td>
</tr>
</table>
</tfoot>
<!--table2-->
<thead>
<table border = "6" width = "200" height = "200" align = "left" background = "F:\\图片\\1.jpeg">
<tr bgcolor = "pink">
<td>嗯呢</td>
<td valign = "top">嗯呢2</td>
<td>嗯呢3</td>
</tr>
<tr bgcolor = "yellow">
<td>嗯啊</td>
<td valign = "middle">嗯啊2</td>
<td>嗯啊3</td>
</tr>
<tr bgcolor = "blue">
<td>嗯恩</td>
<td valign = "down">嗯恩2</td>
<td>嗯恩3</td>
</tr>
</table>
</thead>
<!--table3-->
<!--单元格的合并-->
<tbody>
<table border = "6" width = "200" height = "200" bordercolorlight = "red" bordercolordark = "blue" cellspacing = "20" >
<caption align = "bottom">这是一个表格的实例</caption>
<tr>
<td colspan = "2">a</td>
<td rowspan = "2">c</td>
</tr>
<tr>
<td>d</td>
<th>e</th><!--相当于相当于<td> + <b>-->
</tr>
</table>
</tbody>
</body>
</html>
- 7、框架标记及iframe标签
框架页面上不允许有body标签
<frameset>: 框架的集合
rows: 纵向分部框架.
cols: 横向分部框架.
写法有两种: 1) 绝对值 "200,*" ,*代表剩余的
2) 相对值 "30%,*"
<frame>: 框架. 一个框架显示一个页面
scrolling: 是否需要滚动条。默认是true
noresize : 固定框架大小
bordercolor: 给框架边框起一个颜色
name : 给框架起一个名字
<iframe>:内嵌框架： 嵌入在一个页面上的框架.(仅仅IE支持)
属性： width: 宽度
height： 高度
scrolling : 是否需要滚动条
Demo
<html lang="en">
<head>
<title>框架标记</title>
</head>
<frameset rows = "200,*" bordercolor = "red">
<frame src = "F:\itheima\day01\共享\day01_htm\上课示例\demo01_排版标签.html" noresize name = "up" bordercolor = "blue">
</frame>
<frame src = "F:\itheima\day01\共享\day01_htm\上课示例\demo02_字体标签.html" name = "down" scrolling ="false">
</frame>
</frameset>
</html>
Demo
<html lang="en">
<head>
<title>内嵌标签</title>
</head>
<body>
<a href ="F:\itheima\day01\博客素材\我的文档\demo_6.1.html" target = "frame">demo_6.1</a><br>
<a href ="F:\itheima\day01\博客素材\我的文档\demo_6.2.html" target = "frame">demo_6.2</a><br>
<a href ="F:\itheima\day01\博客素材\我的文档\demo_6.3.html" target = "frame">demo_6.3</a><br>
<iframe src = "F:\itheima\day01\博客素材\我的文档\demo_6.4.html" width = "500" height ="300" scrolling = "true" name ="frame"></iframe>
</body>
</html>
- 8、表单标签
<FORM>： 称为表单标记，用以宣告此为表单模式，属于一个容器标记，表示其它表单标记需要在它的包围中才有效，<INPUT>便是其中的一个 属性： action：便是用以指明该 CGI 程式的位置，这样此表单所填的资料才能正确传给 CGI 作处理。若馈下没有 CGI 以进行测试，可设定此参数为ACTION="mailto:[email protected]" 那样该表单所填的资料将会寄至 此电邮地址（红色部分）。 method：传送资料给 CGI 的的方式，可选值为 POST, GET。你只需记住POST容许传送大量资料，但 GET则只接受低于 1K 的资 料，所以你若看过别人的表单原始码的话，你会发现申请表单用的是POST 而搜找器用的是 GET。 <input>: 由于其第一个参数 type 己有很多的选择，而不同的选择表示出不同的输入方式，且其它参数亦因此而异，故以下将独立介绍不同输入方式及其它参数设定。 type：可选值为Text,Radio,Checkbox,Password, Submit/Reset, Image, File, Hidden, Button。 *输入方式1：Text（单行文字盒） name:此一单行文字盒名称，这是最重要的一个，方便 CGI 辨认由表单传来的资料 value:此一单行文字盒内定值。 align:可选值：top, middle, bottom, left, right, texttop, baseline, absmiddle. 没太大有处。 size:此一单行文字盒显示的长度 maxlength:此一单行文字盒可输入字元的上限，为方便编排资料或避免错输入等，宜设定上 限，例如输入电话或 ICQ UIN 的可设为 8，年龄为 2 等。 *输入方式2：Radio（单一选择） type ="Radio" name： value：内定值 align： checked：设该 Radio 为内定被选。同 name 的各个 Radio 中只能有一个使用，或全不使用这 参数。 *输入方式3：Checkbox(确认盒) type = "Checkbox" name: Value： align： checked：设该 Checkbox 为内定被选。每个 Checkbox 都是独立的，所以每一个都可使用这 参数，不像 Radio。 *输入方式4：password （密码输方盒） 例如：<input type="Password" name="pw" value="999" align="MIDDLE" size="5" maxlength="9"> *输入方式5：submit（传送键）及Reset（清除键）这是表单上重要的两个按键，两者所附带的参数相同，但用处不大。 例如：<input type="Submit" name="other_funtion" value="确定" align="MIDDLE"> <input type="Reset" value="清除" align="MIDDLE"> submit传送键的关键用法，当点击submit时，页面上的例如text单行文字盒里的name和value属性的对应值会被提交到另一个网站里，即在text中按name = value 的方式传送。而如何设定目的地呢？就是在<form action = "http://www.XXXXX.com">设置 在<form>中的属性有一项为method ,其可以取值post或get，当网页信息通过submit传送键传送到form所指定的地址时，如果指定了method是get，则在浏览器的地址栏里会显示出form里所提交的信息，而post则不会。（重要） *输入方式6：Image（图片按键） 这通常用以取代 Submit 及 Reset 两个按键，因为由程式产生的按键并不漂亮，这 Image 参 数便容许你采用自已制造的按键。 例如：<input type="Image" name="submit" align="BOTTOM" src="http://blog.163.com/faith_yee/blog/ex_icon.gif"> *输入方式7：File 通常用以传输文件。 例如：<input type="File" name="upload" align="BOTTOM" size="20" maxlength="100" accept="text/html"> *输入方式8：Hidden 例如：<input type="Hidden" name="ID" value="6618"> *输入方式9：Button 例如：<input type="Button" name="useless" value="Back"> Value = "Back" ：按键显示名称 <select>: 是卷动选单标记，每一选项皆由 <OPTION> 所标示，把它当作围堵标记或空标 记使用都可以。 属性： name: size:这卷动选单的列数，即其高度，请自行修改。 multiple:令这卷动选单容许多重选择。 <option>: value: selected:设该选项为内定被选。一个单选卷动选单只能有一项或零可内定被选。 <textarea>: 表单文字区块标记 name: cols:这文字区块的宽度，请自行修改。 rows:这文字区块的列数，即其高度，请自行修改。 wrap:设定其折行问题，可选值为： off, physical, virtual。off 表示不使用此属性，physical 时则会强迫浏览器在送资料到 CGI（Web 伺服器端）必须将实№文字中的换行一 并送出，设为 virtual 时则送出连续成串的字（除非使用者按了键盘的 RETURN / ENTER）。
Demo
<html lang="en">
<head>
<title>表单标签</title>
</head>
<body>
<fieldset>
<legend>部分1</legend>
<form action = "mailto:[email protected]" method = "post">
<!--*输入方式1：Text（单行文字盒）-->
Text单行文字盒：<input type = "text" name ="text" value = "内定值" align = "left" size ="20" maxlength ="10"><br>
<!--*输入方式2：Radio（单一选择）-->
Radio单一选择： 值1<input type = "Radio" name = "Radio" value = "1" align ="left " >
值2<input type = "Radio" name = "Radio" value = "2" align ="left " checked><br>
<!--*输入方式3：Checkbox(确认盒)-->
Checked确认盒：篮球<input type ="Checkbox" name = "checkbox" value = "1" align = "left" >足球<input type ="Checkbox" name = "checkbox" value = "2" align = "left" >羽毛球<input type ="Checkbox" name = "checkbox" value = "3" align = "left" checked><br>
</fieldset>
<fieldset>
<legend>部分2</legend>
<!--*输入方式4：password （密码输方盒）-->
password密码输方盒：<input type = "password" name = "pw" value = "999" align ="left" size "20" maxlength ="15"><br>
<!--*输入方式5：submit（传送键）及Reset（清除键）-->
submit传送键：<input type = "submit" name = "yes" value = "确定" align = "left"><br>
reset清除键：<input type = "reset" name = "reset" value ="更新" align = "left"><br>
</fieldset>
<fieldset>
<legend>部分3</legend>
<!--*输入方式6：Image（图片按键）-->
Image图片按键：<input type = "image" name = "image submit" align = "left " src = "F:\day01\共享\day01_htm\资料\当当网上书城\images\shopping_balance.gif"><br>
<!--*输入方式7：File-->
File：<input type ="File" name = "upload" align = "left " size ="10" maxlength = "100" accept = "F:\day01\博客素材\我的文档"><br>
<!--*输入方式8：Hidden-->
Hidden：<input type ="hidden" name = "秘密" value = "11196649"><br>
<!--*输入方式9：Button-->
Button：<input type = "button" name = "button" value = "按钮" align = "left" >
<hr>
选项：<select name = "选项" >
<option>a
<option>b
<option selected>c
<option>d
</select><br>
表单文件区块标记：<textarea name = "表单文件区块标记" cols = "5" rows = "5"></textarea>
</fieldset>
</form>
</body>
</html>
14.png
- 9、多媒体标记
<bgsound>: 背景音乐 必须写在<head>标签中 属性： src:路径 autostart:true/false loop:infinite重复多次或输入次数 <embed>: 播放多媒体文件. 属性： src: artostart: loop: hidden: Width、High、Volume、align <marquee>: 移动 属性：direction 移动目标方向 left,right ,up,down ,up，down移动距离是固定的200px behavior: 行为方式 取值：slide,alternate,scroll scrollamount : 移动速度 loop: 循环多少圈。负值表示无限循环 scrolldelay: 移动一次休息多长时间。单位是毫秒
Demo
<html lang="en">
<head>
<bgsound src = "F:\day01\博客素材\Beyond - 喜欢你.mp3"></bgsound>
<title>多媒体标记</title>
</head>
<body>
播放多媒体文件：<embed src = "F:\篮球\本赛季至今10大助攻.avi" height ="300" width ="300"></embed>
<marquee behavior = "slide" loop = "1">测试成功</marquee>
<marquee behavior = "alternate" scrollamount = "20">测试成功</marquee>
<marquee behavior = "scroll" scrolldelay = "100">测试成功</marquee>
</body>
</html>
15.png
- 10、头标记
<!--页面刷新标签--> <meta http-equiv = "refresh" content = "2;url=F:\黑马\day01\博客素材\我的文档\demo_6.1.html"> 页面会自动更新，更新细节会根据content里的来操作 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="Generator" content="EditPlus?"> <meta name="Author" content=""> <meta name="Keywords" content=""> <meta name="Description" content=""> <!--页面刷新标签--> <meta http-equiv = "refresh" content = "2;url=F:\heima\day01\博客素材\我的文档\demo_6.1.html"> <title>头标记</title> </head> <body bgcolor = "" background = "" text = "" link = "red" alink = "green" vlink = "yellow" leftmargin = "0" topmargin = "0"> 大家好啊<br> <a href="http://blog.163.com/faith_yee/blog/">大家好啊</a> </body> </html>
2秒后
七、练习
1、
<html lang="en">
<head>
<meta charset="UTF-8">
<title>我的易趣网</title>
</head>
<body>
<p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\header.jpg" align = "middle"></p>
<p>首页 > 中国馆 > 女装/女士精品 > 所有商品 </p>
<p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\list_header.jpg"></p>
<hr>
<p><font size ="10" face = "幼圆"><b>热点推荐</b></font></p>
<dl>
<dt><p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\photo_01.jpg"></p>
</dt>
<dd>一口价：35.00<br>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤
</dd>
</dl><hr>
<dl>
<dt><p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\photo_02.jpg"></p>
</dt>
<dd>一口价：35.00<br>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤
</dd>
</dl><hr>
<dl>
<dt><p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\photo_03.jpg"></p>
</dt>
<dd>一口价：35.00<br>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤
</dd>
</dl><hr>
<dl>
<dt><p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\photo_04.jpg"></p>
</dt>
<dd>一口价：35.00<br>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤
</dd>
</dl><hr>
<dl>
<dt><p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\photo_05.jpg"></p>
</dt>
<dd>一口价：35.00<br>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤
</dd>
</dl><hr>
<dl>
<dt><p><img src = "F:\heima\day01\共享\day01_htm\演示事例\4-3易趣商品列表\images\photo_06.jpg"></p>
</dt>
<dd>一口价：35.00<br>全国包邮！韩版修身长袖T恤 打底衫 纯棉圆领T恤
</dd>
</dl><hr>
<p>Copyright © 2010 易趣版权所有</p>
</body>
</html>
2、
<html lang="en">
<head>
<title>购物简易计算器</title>
</head>
<body width = "200" height = "200">
<center>
<div>
<p><h2 ><font color = "red" ><img src = "F:\heima\day01\共享\day01_htm\练习题\上机练习题目\images02\shop.gif" align = "middle"> 购物简易计算器</img></font></h2></P>
<form>
<p>第一个数 <input type = "text" size= "25"></p>
<p>第二个数 <input type = "text" size= "25"></p>
<p>
<input type ="button" name = "+" value = " + ">
<input type ="button" name = "-" value = " - ">
<input type ="button" name = "*" value = " * ">
<input type ="button" name = "/" value = " / ">
</p>
<p>计算结果 <input type = "text" size= "25"></p>
</form>
</div>
</center>
</body>
</html>
3、
<html lang="en">
<head>
<title>计算器框架</title>
</head>
<body bgcolor = "#00ccff">
<center>
<h2><font face = "幼圆" color = "#66ff99"><b>计算器框架</font></h2><hr>
<div>
<table bordercolor = "#ffffff" bordercolorlight = "#ffffff" bordercolordark ="#ffffff" border = "1" width = "250" height = "200" cellpadding = "0" cellspacing = "5">
<form>
<tr >
<td colspan = "4" align = "middle"><input type = "text" size = "33" value = "0" dir = "rtl" ></td>
</tr>
<tr>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 7 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 8 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 9 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " + "></td>
</tr>
<tr>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 4 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 5 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 6 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " - "></td>
</tr>
<tr>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 1 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 2 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 3 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " * "></td>
</tr>
<tr>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " 0 "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " C "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " / "></td>
<td align = "middle" width = "35" height ="30"><input type = "button" value = " = "></td>
</tr>
</form>
</table>
</div >
<center>
</body>
</html>
时间： 2024-11-09 09:24:12