一 HTML常用元素
1.HTML5的基本元素
基本元素有如下几个：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>基本标签</title>
</head>
<body>
<!--用标题一到标题六来输出文本-->
<h1>疯狂java讲义</h1>
<h2>疯狂android讲义</h2>
<h3>轻量级java EE 企业应用实战</h3>
<h4>疯狂java讲义</h4>
<h5>疯狂android讲义</h5>
<h6>轻量级java EE 企业应用实战</h6>
<!--输出一条水平线-->
<hr />
<!--使用span定义三节-->
<span >Tomcat</span><span >Tetty</span><span >Resin</span>
<br /><!--换行-->
<!--使用diV定义三节-->
<div >Tomcat</div><div >Jetty</div><div >Resin</div>
<!--使用三个p定义三个段落-->
<p>Tomcat</p><p>Jetty</p><p>Resin</p>
</body>
</html>
由上面的结果可以看出，<span…/>、<div…/>和<p…/>三个标签的效果类似，可以作为其他内容的容器
差别在于<span…/>标签是行级元素，<div…/>和<p…/>是块级元素。在默认的情况下，块级元素会换行，行级元素不会导致换行。
网页上的效果如下：
)
2.HTML5的文本格式化元素
文本格式化元素如下：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" " content="text/html; charset=utf-8 " />
<title>文本格式化标签</title>
</head>
<body>
<span><b>加粗文本</b></span><br />
<span><i>斜体文本</i></span><br />
<span><b><i>粗斜体文本</i></b></span><br />
<span><em>被强调的文本</em></span><br />
<big><span>大号字体文本</span></big><br 1>
<p><strong>加粗文本</strong </p>
<small> <span>小号字体文本</span></sma11><br />
<div>普通文本<sup>上标文本</sup></div>
<span>普通文本<strong><sub>下标加粗文本</ sub></strong></span><br />
<!--指定文本从左向右(正常情况)排列-->
<bdo dir= "ltr">从左向右排列的文本</bdo><br />
<!--指定文本从右向左排列-->
<bdo dir="rtl">从右向左排列的文本</bdo><br />
</body>
</html>
以上这些文本格式化元素都是经常使用的元素，各种标签都是可以其那套使用的，建议多去试一试。
网页效果如下：
3.HTML5的语义相关化元素
语义相关元素如下：
< abbr >:用来表示一个缩写。
< address>:用于表示地址，浏览器通常用斜体字显示地址。
< blockquote>:用于定义一段长的引用文本、浏览器会使用锁紧的方式显示这段文字。同时可以定义cite属性，cite属性指定该引用文本所应用额网址URL。
< q>:用于定义一段短的引用文本。浏览器会为这段引用文本添加引号。
< code> :引用一段代码。
< del>:定义文档中被删除的文字。
< ins>:定义文档中插入的文字。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--使用q表示一段短的引用文本-->
<p>疯狂Java的精神是<q cite="http://ww . fkjava. org">疯狂源自梦想，技术成就辉煌</q>
这也是所有疯狂Java程序员的精神。</p>
<div>
<!--使用blockquote表示-段长的引用文本-->
<blockquote>
锦瑟无端五十弦，一弦一柱思华年。 <br>
庄生晓梦迷蝴蝶，望帝春心托杜鹏。<br>
沧海月明珠有泪，蓝田日暖玉生烟。<br>
此情可待成追忆，只是当时已悯然。</blockquote>
是唐朝诗人李商隐的代表作，诗中隐藏着一种淡淡的忧伤， 让人无法言说，但又无以谴怀。</div>
<p>
<cite>《芙蓉镇》</cite>. <cite> (蓝风筝》</cite>是国内导演拍摄的最有思考深度的两部电影。</p>
<p>
下面代码定义了一个Java类: <br>
<code>
public class Cat<br>
{<br>
private int name = "garfield" ;<br>
}<br>
</code>
</p>
<!-- pre元素包含的内容是“预格式化”文本-->
<pre>
public class Cat
{
private int name = "garfield";
}
</pre>
<p>
<!--使用abbr定义缩写-->
疯狂Java教育中心的缩写是<abbr title="疯狂 Java教育">fkjava</abbr>。
<!--使用address定义地址-->
疯狂软件地址是<address>广州市天河区车陂大岗路4号沣宏大厦3006-3011</address>
<!--使用dfn定义专业术语-->
<dfn>HTML</dfn>是种广为人知的标记语言。
</p>
可通过输入如下命令: <br/>
<kbd>list -1</kbd><br/>
在Linux的Shell窗口查看当前目录下所有文件、目录的详细信息。</p>
如果您在阅读疯狂Java体系图书时，遇到有任何无法理解的技术问题，<br/>
请登录www . fkjava. org发帖提问，可按如下示例内容发帖: <br/>
<!--使用samp定义示范文本内容-->
<samp>
我在阅读xx图书的第X章、第x节时，遇到一个X0xx问题，<br/>
错误提示信息是: x00K.
</samp>
</p>
<!--使用var定义变量-->
<var>i</var>、<var>j</var>、 <var>k</var>通常用于作为循环计数器变量。
<!--使用del和ins表示修订-->
<p>Android是一个<del>开发</de1><ins>开放</ins>式的手机、平板电脑操作系统</p>
</body>
</html>
网页效果如下：
4.HTML5的超链接和锚点
超链接和锚点相关元素如下：
href:指定超链接所关联的另一个资源。
target:指定使用框架集中的哪个框架来装载另一个资源。该属性的属性值可以是-self、_blank、_top、_panrent四个值，分贝代表使用自身、新窗口、顶层框架、父框架来装载新资源。
media:指定目标URL所引用的媒体类型。默认值为all。只有当指定了href属性时该属性才有效
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!--在本窗口中打开另一个资源-->
<a href="http://www,crazyit.org"><b>疯狂java联盟</b></a><br />
<!--在新窗口中打开另一个资源-->
<a href="http://www,crazyit.org"><em>疯狂java联盟</em></a><br />
<!--为图像增加超链接-->
<a href="http://www,crazyit.org"><img src="img/HBuilder.png" alt="疯狂java联盟"></a><br />
<!--基于相对路径指定另一个资源-->
<a href="基本标签.html">文本格式化标签</a>
</body>
</html>
页面运行效果如下：
页面的跳转大家可以自己去尝试，当然还有一些URL流行的scheme和对应资源如下：
对应的测试代码如下:
<a href="news:yeeku.html">html newsgroup</a><br><!--该链接将产生一个访问新闻组资源的超链接-->
<a href="ftp://www.crazyit.org/tomcat.rar">下载Tomcat</a><br><!--这个链接将会产生一个指向FTP资源的链接-->
<a href="mailto:kongyeeku@163.com">写信给我</a><!--用于产生一个邮件链接，单击该链接将会开始发送电子邮件-->
以上是一部分的HTML常用元素，有关列表、图像、表格、框架、新增属性相关元素见续集
1716
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
