• 本季内容提要
–HTML简介
–简单HTML元素
–HTML元素和属性
–Style 和class属性
–超级链接
–图片
–标题
–给文本分组
–格式化文本
–列表
–表
–在表中的rowspan 和colspan
–注释
##################Michael分割线########################
• 简单HTML元素
–简单的HTML元素格式如下:
    • <TAGNAME>
    • .....
    • </TAGNAME>
–TAGNAME是标签名称,完整的HTML 4.01元素列表可到如下站点找到:
• [url]http://www.w3.org/TR/html4/index/elements.html[/url]
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet
– 有90个不同的标准标签名称,这里我们只讲述如下核心标签的用法
– TAGS ATTRIBUTES
– ================================
– html
– head
– title
– body
– a href=URL name=STRING
– img src=URL alt="TEXT" ;NUM" height="NUM"
– h1
– h2
– ...
– h6
– hr
– p
– div
– br
– span
– pre
– ol
– ul
– li
– table border="NUM" cellspacing=DISTANCE cellpadding=DISTANCE
– tr
– td
– th
–实例演示
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Java_02
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_03
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_WEB_04
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Java_05
• HTML元素和属性
• 最基本的HTML元素和属性格式如下所示:
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_06
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Java_07
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_WEB_08
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Java_09
• Style 和class 属性
• Style和class 属性用来指定文本样式
–style:直接使用样式
–class:引用CSS样式表
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_10
•超级链接
• 元素<a ...> 用来指定从当前页面跳转到其他页面的一个链接
• 格式如下:
–<a href="URL"> HYPERTEXT </a>
• 示例
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JSP_11
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Java_12
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_13
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_14
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JSP_15
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_16
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_17
• 跳转到父文件夹“../”
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_18
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_19
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_WEB_20
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_21
• 发送Email链接
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Java_22
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_WEB_23
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_24
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_25
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_WEB_26
• 链接多媒体
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_27
• 跳转到同页面的其他部分的链接
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_28
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_29
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_30 
• 图片
• 在网页中引用图片的格式如下:
–<img src="WEBADDRESS" alt=TEXT height=NUM />
• 示例
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_31
• 标题
• 标题有6个级别从h1到h6,他们的格式如下:
–<h1> CONTENT </h1>
• 示例
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_32
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_33
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JSP_34
• 给文本分组
• 跨区
–<span> CONTENT </span>
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JSP_35
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JSP_36
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_WEB_37
• 换行
–<br/>
• 水平线
–<hr/>
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_38
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_39  
• 段落
– <p>CONTENT</p>
•层
–<div>CONTENT</div>
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_40
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JSP_41
•格式化文本
• 一般用来显示程序代码,保留Tag和空格
–格式如下:
<pre>
Pre
Formatted
Content
</pre>
• 示例
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_42
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_WEB_43
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Java_44
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_45
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_46
• 列表
• HTML提供了多种不同的列表类型,这里只讲述两种类型:
–Ul(unnumbered lists)
» 没有数字顺序的
–Ol(ordered lists)
» 有数字顺序的
• 示例
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JSP_47
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JSP_48
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JSP_49
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Java_50
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JSP_51
• 表
• <table>
–表元素
• <tr>
–行元素
• <td>
–列元素
• <th>
–<列标题>
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_Servlet_52
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JSP_53
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_54
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_55
上图说明了表格的几个属性,其中黑色部分就是巢(cell),白色的区域是巢补白(表格填充),灰色的区域是巢空间(表格间距)。
• 在表中的rowspan 和colspan
• rowspan
–一列跨多行
• colspan
–一行跨多列
–示例
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_WEB_56
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JSP_57
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JSP_58
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JSP_59
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_WEB_60
• 注释
• 注释格式
–<!-- comment -->
• 示例
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_61
 Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_62
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_JDBC_63
Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介_WEB_64
################Michael分割线####################