您的位置：首页 > Web前端 > HTML

HTML标签初识

2013-05-22 16:58 239 查看

我们都知道HTML5的元素相比XHTML元素有一定的变化，有很多新增的元素，改变的元素，删除的元素，下面是我刚刚学习的HTML5的语义元素，都集成在下面的代码中，废话不说，下面直接观看HTML5的源码。

<!DOCTYPE html>      <!--设置文档类型-->
<html lang="ZH">     <!-- 设置该页面语言格式 -->
<head>
<meta charset="utf-8">    <!-- 设置编码格式 -->
<!-- saved from url=(0014)about:internet -->
<title>THE HTML5 复习</title>
<link rel="stylesheet" href="style.css">  <!-- 添加样式 -->
<script type="text/javascript" src="scripts.js"></script>  <!-- 添加JAVASCRIPT -->
</head>
<body>
<article>        <!-- 定义外部的内容 ,外部内容可以是来自一个外部的新闻提供者的一篇文章或者是blog-->
<header>       <!-- 页面的头部元素标签,定义文档的页眉-->
<hgroup>  <!-- 对网页或区段（section）的标题进行组合 -->
<h1>主标题</h1>
<h2>副标题</h2>
<p class="By">By me.</p>
</hgroup>
<nav>      <!-- 标签定义导航链接 -->
<ul>
<li>导航1</li>
<li>导航2</li>
</ul>
</nav>
</header>
<aside>        <!-- 标签定义 article 以外的内容也可以使用该标签添加广告、文章相关方面链接 -->
 <a href="www.oracle.com"></a><br>
JAVA是一种平台，也是一种程序设计语言，如何学好程序设计不仅仅适用于JAVA，对C 等其他程序设计语言也一样管用。
                   </aside>
<div id="content">
<figure class="FloatFigure">        <!-- figure标签用于对元素进行组合,一般用于添加插图 -->
<img src="1.png" alt="小鱼出水">
<figcaption>这条小鱼多么可爱，你喜欢吗？</figcaption>       <!-- <figcaption> 标签定义figur
e元素的标题 -->
</figure>

</div>
<footer>          <!-- 页面的底部元素 -->

</footer>
</article>
</body>
</html>

语义元素小节：

<article>表示一篇任何形式的文章，即类似新闻报道或博客文章的内容区块。
<header>表示页面的头部，通常表示为网页的页眉或增强性的标题，可包含主副标题及其他信息。
<footer>表示页面底部的页脚。通常是很小的一块内容，包括小字号的版权信息、简单的链接等。
<hgroup>存放标题，主要是叫主副标题联系在一起。
<nav>用于包装一组链接，通常只用于重要的一组的链接。
<section>表示文档中的区块，但区块内容必须包含一个标题。
<figure>表示一副插图
<figcaption>表示插图的标题
details和summary组合可表示折叠内容，但浏览器支持很少。
下面介绍HTML5的新的文本级语义元素：<time>、<output>、<mark>。

<time>元素用来标注日期和时间，此时它有两个功能，首先表示日期和时间位于哪个位置，其次它以任何软件都能理解的方式提供日期和时间。

today is <time datetime="2013-5-23">5月23日</time>

Time is<time datetime="10:30-11:00">上午10:30</time>

2.<output>元素标记JavaScript返回值。

<output id="result"></output>

3.<mark>与元素用来标注一段文本。通常浏览器会给mark的文本添加黄色背景。

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航