第二讲 HTML 和 XHTML 基础知识

第二讲 HTML和XHTML基础知识

HTML和XHTML • HTML（超文本标识语言) • 浏览器所看到的网页，主要是由HTML语言写成的，通过各种标记，将影像、声音、图片、文字等连接显示出来。 • 一个HTML文件事实上是一个具有一些特殊代码的文本文件，它告诉浏览器如何表示此文件。通常，静态网页文件以*.html或*.htm为后缀名。 • －网页制作中,有些功能内容在DW设计视图可能无法完成，需要编辑代码。动态网页制作

HTML和XHTML • XHTML • 作业内容： • 1.什么是HTML、XML和XHTML？ • 2.HTML和XHTML的典型区别是什么？ • DW8、DW CS3默认使用的是那种？ • 3.分别用HTML和XHTML实现下面内容： • 运动会 • 1.田赛 • ○ 铅球 • ○ 跳远 • 2.径赛 • ○ 100米 • ○ 3000米动态网页制作

2.1 HTML语言的结构 • 标识 • 1.单标识：只需要单独使用即能完整表达意思 • 语法： <标识> • 例子：<br> • 2.双标识 • 语法： <标识>内容</标识> • 3.标识属性 • <标识名字属性1=“属性值1”属性2=“属性值2”…> • 例子：<标识属性1＝a 属性2＝“b”>内容</标识> • HTML中属性值可以加上双引号也可以不加双引号动态网页制作

2.1 HTML语言的结构 • 双向标识：<标识名>…</标识名> • 简单的HTML网页结构： • <html> • <head> • <title>网页标题</title> • </head> • <body> • 网页内容… • </body> • </html> 注意问题： 1.一般标识是双向，注意配对原则；但是有些标识是单向。 2.Html元素不区分大小写动态网页制作

2.2 HTML文件头元素 • 1.标题<title>…</title> • 2.控制<meta>：适当了解即可 • 作用：在服务器和客户之间传达隐含信息；让浏览 • 器正确显示不同格式的多媒体文件；定义网 • 页语言（字符集）；定义网页关键字；将站 • 点自动跳转到另一页；让访问者忽视缓冲页 • 面等 • 3.层叠样式表CSS：暂时不做要求，但要会“调用” • 4.有些特效代码如javascript、vbscript一般也会放在头部动态网页制作

2.3 添加各种网页元素 • 1.在页面中加入文字:在body标识中 • ①<body>文字</body> • ②<br>行中断标识，浏览器遇到这个标记时候， • 会把标识后面的内容另起一行显示。 • ③<font size= color= face=>…</font> • 不过font的这种表述已经少用 • ④两种内容居中的方式： • <center>…</center> • <div align=“center”>…</div> 动态网页制作

2.3 添加各种网页元素 • ⑤<p>…</p>注意从效果看跟br的区别 • ⑥<pre>…</pre> • ⑦空格标识符－“ ”： • 连续的空格只认作一个空格，可适当使用空格标识符进行组合，一个代表一个空格，注意下面的写法： • “ ” • “ ” • ⑧：注释标记动态网页制作

2.3 添加各种网页元素 • 2. 设置页面的背景颜色和背景图片: • <body bgcolor=“red”> • <body background=“image/1.jpg”> • 3. 在页面中插入图片：在body标识中 • 使用<img>标识，例如 • <imgsrc=“image/1.jpg”alt=“说明”width=“150” • Height=“150”aligh=“left/right/center”> 动态网页制作

2.3 添加各种网页元素 • 4. 设置文字和图片链接 • <a href=链接目标路径 target=？>…</a> • ①<a href=a.htm>文字</a> • <a href=a.htm target=_blank>文字</a> • ②<a href=a.htm target=_blank><img …></a> • 添加了超链接的图片周围会出现一个蓝色边框， • 这是没设置border属性的缘故动态网页制作

2.3 添加各种网页元素 • ③锚记 • 定义：<a name=“xxx” ></a> • 跳转：<a href=“#xxx”>……</a> • ④电子邮件链接 • <a href=“mailto：邮箱地址”>…</a> 动态网页制作

2.3 添加各种网页元素 • 5.给网页添加声音 • <embedsrc=“sound.mid” autostart=true • Loop=true hidden=true width=100 height=100> • 思考练习： • 添加视频格式是否跟添加声音一样？ • 通用的视频播放器或者某一播放器（realplayer或者mediaplayer）的代码是怎样的？ • Flash的标记使用什么？动态网页制作

2.3 添加各种网页元素 • 6.表格的使用 • <table border=1 aligh=center width=600> • <tr aligh=left height=50> • <td width=60> …</td> • <td> … </td> • </tr> • <tr> • <td> …</td> • </tr> • </table> 1.配对：有多少个table，就有多少个<table></table>;有多少行就有多少个<tr></tr>;一个<td></td>是一列 2.先有行tr才有列td 动态网页制作

2.4 表单 • 1.表单form • 把所需要的用到的数据和表单元素放在一个表单里 • 面,一个页面的表单看情况而定,表单的数量一般可 • 以简单使用一个就可以. • <formname=“xxx”method=“post” • action=“xxx.asp”target=“_self”> • …… • </form> 动态网页制作

2.4 表单 • 2.输入域input • 注意name和value属性 • ① 单行文本域 • <input type=“text” name=“xxx” value=“xxx1”> • ② 滚动文本框 • <textareaname=“xxx” value=“xxx1”></textarea> • 就是text的多行情况，multiple 动态网页制作

2.4 表单 • ③ 复选框 • <input type=“checkbox” name=“xxx” • value=“xxx1” [check]> • ④ 单选框 • <input type=“radio” name=“xxx” • value=“xxx1” [check]> • 单选和复选，如果同一组，name属性如何设置？动态网页制作

2.4 表单 • ⑤ 按钮 • <input type=“submit/reset” name=“xxx” • value=“xxx1”> • <input type=“button” name=“xxx” • value=“xxx1”> • 普通按钮跟提交、重设有何区别？ • ⑥ 隐含域：作用？ • <input type=“hidden” name=“xxx” • value=“xxx1”> 动态网页制作

2.4 表单 • ⑦ 文件选择域 • <input type=“file” name=“xxx”> • 用于文件上传功能 • ⑧ 图片按钮 • Submit的另一种表现形式，例如 • <input type=“image” src=“a.gif” name=“name”> • 有何特别之处？动态网页制作

2.4 表单 • 3.Select类对象（下拉菜单） • <select size=“x” name=“xxx” [multiple]> • <option value=“…”>….</option> • </select> • 注意：size参数对菜单外观的影响； • multiple参数允许多选。 • －－》①②③的差别动态网页制作

2.4 表单 • ① • <select name="selectone"size=1> • <option value="first">first</option> • <option value="second">second</option> • <option value="third">third</option> • </select> 动态网页制作

2.4 表单 • ② • <select name="selectone"size=3> • <option value="first">first</option> • <option value="second">second</option> • <option value="third">third</option> • </select> 动态网页制作

2.4 表单 • ③ • <select name="selectwhat"size=3 multiple> • <option value="first">first</option> • <option value="second">second</option> • <option value="third">third</option> • </select> 动态网页制作

Thank You !

第二讲 HTML 和 XHTML 基础知识