Java EE WEB工程师培训—JDBC+Servlet+JSP整合开发之32. HTML简介

• 本季内容提要
–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]

– 有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

–实例演示

• HTML元素和属性
• 最基本的HTML元素和属性格式如下所示：

• Style 和class 属性
• Style和class 属性用来指定文本样式
–style：直接使用样式
–class：引用CSS样式表

•超级链接
• 元素<a ...> 用来指定从当前页面跳转到其他页面的一个链接
• 格式如下：
–<a href="URL"> HYPERTEXT </a>
• 示例

• 跳转到父文件夹“../”

• 发送Email链接

• 链接多媒体

• 跳转到同页面的其他部分的链接

 

• 图片
• 在网页中引用图片的格式如下：
–<img src="WEBADDRESS" alt=TEXT height=NUM />
• 示例

• 标题
• 标题有6个级别从h1到h6，他们的格式如下：
–<h1> CONTENT </h1>
• 示例

• 给文本分组
• 跨区
–<span> CONTENT </span>

• 换行
–<br/>
• 水平线
–<hr/>

  
• 段落
– <p>CONTENT</p>
•层
–<div>CONTENT</div>

•格式化文本
• 一般用来显示程序代码，保留Tag和空格
–格式如下：
<pre>
Pre
Formatted
Content
</pre>
• 示例

• 列表
• HTML提供了多种不同的列表类型，这里只讲述两种类型：
–Ul（unnumbered lists）
» 没有数字顺序的
–Ol（ordered lists）
» 有数字顺序的
• 示例

• 表
• <table>
–表元素
• <tr>
–行元素
• <td>
–列元素
• <th>
–<列标题>

上图说明了表格的几个属性,其中黑色部分就是巢(cell)，白色的区域是巢补白(表格填充)，灰色的区域是巢空间(表格间距)。

• 在表中的rowspan 和colspan
• rowspan
–一列跨多行
• colspan
–一行跨多列
–示例

• 注释
• 注释格式
–<!-- comment -->
• 示例

 

################Michael分割线####################