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

  1. 云栖社区>
  2. 博客>
  3. 正文

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

技术小美 2017-11-23 19:00:00 浏览984
展开阅读全文
• 本季内容提要 
–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]
image
– 有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
–实例演示
image
image
image
image
• HTML元素和属性 
• 最基本的HTML元素和属性格式如下所示: 
image
image
image
image
• Style 和class 属性 
• Style和class 属性用来指定文本样式 
–style:直接使用样式 
–class:引用CSS样式表
image
•超级链接 
• 元素<a ...> 用来指定从当前页面跳转到其他页面的一个链接 
• 格式如下: 
–<a href="URL"> HYPERTEXT </a> 
• 示例
image
image
image
image
image
image
image
• 跳转到父文件夹“../”
image
image
image
image 
• 发送Email链接
image
image
image
image
image 
• 链接多媒体
image
• 跳转到同页面的其他部分的链接
image
image
image 
• 图片 
• 在网页中引用图片的格式如下: 
–<img src="WEBADDRESS" alt=TEXT height=NUM /> 
• 示例
image
• 标题 
• 标题有6个级别从h1到h6,他们的格式如下: 
–<h1> CONTENT </h1> 
• 示例
image
image
image
• 给文本分组 
• 跨区 
–<span> CONTENT </span>
image
image
image 
• 换行 
–<br/> 
• 水平线 
–<hr/>
image
image   
• 段落 
– <p>CONTENT</p> 
•层 
–<div>CONTENT</div>
image
image
•格式化文本 
• 一般用来显示程序代码,保留Tag和空格 
–格式如下: 
<pre> 
Pre 
Formatted 
Content 
</pre> 
• 示例
image
image
image
image
image
• 列表 
• HTML提供了多种不同的列表类型,这里只讲述两种类型: 
–Ul(unnumbered lists) 
» 没有数字顺序的 
–Ol(ordered lists) 
» 有数字顺序的 
• 示例
image
image
image
image
image
• 表 
• <table> 
–表元素 
• <tr> 
–行元素 
• <td> 
–列元素 
• <th> 
–<列标题>
image
image
image
image
上图说明了表格的几个属性,其中黑色部分就是巢(cell),白色的区域是巢补白(表格填充),灰色的区域是巢空间(表格间距)。
• 在表中的rowspan 和colspan 
• rowspan 
–一列跨多行 
• colspan 
–一行跨多列 
–示例
image
image
image
image
image
• 注释 
• 注释格式 
–<!-- comment --> 
• 示例
image
 image
image
image
################Michael分割线####################







本文转自redking51CTO博客,原文链接:http://blog.51cto.com/redking/147984,如需转载请自行联系原作者

网友评论

登录后评论
0/500
评论
技术小美
+ 关注