HTML5+jquery Mobile移动应用开发②

最新推荐文章于 2021-06-04 05:10:24 发布

meconism

最新推荐文章于 2021-06-04 05:10:24 发布

阅读量280

点赞数

文章标签： html5 jquery windows mobile

原文链接：https://e.dangdang.com/products/1900974377.html

版权

本文详细介绍了HTML5中的语义化标签，包括header、footer、nav、article、section、aside的使用方法和意义，强调了语义化标签在页面结构清晰、团队维护和SEO优化等方面的重要性。

摘要由CSDN通过智能技术生成

2.1 什么是语义化标签

在HTML5推出之前，开发者通常使用div来表示页面中的各个部分，但是这些div没有什么实际意义（包括使用CSS样式的id和class等内容）。这些标签知识开发者提供给浏览器的指令，，用于定义一个网页的某些部分。
以前在进行HTML开发时都会罗列一系列的div标签，导致HTML代码五结构性、语义混乱。其实，HTML代码是非常重要的，不仅代表页面的结构，还要让后面的人能够通过HTML代码对页面的基本结构一目了然，以便后期的开发和维护。以前开发者只能使用一系列的div进行HTML结构的编写，虽然指定了CSS中的id和class，但是命名不一定是规范的，其他开发人员也可以看不懂之前的HTML结构。
从HTML5开始，出现了语义化标签。在语义化标签中定义了丰富的类似div但是个有含义的标签，用来帮助开发者更清楚的构建HTML结构。
HTML5帮开发者指定了每一个语义化标签应该使用的位置、内部结构等。这些并不是HTML语义化标签的主要优势，下面简单说明HTML5语义化标签到底可以为开发者带来什么好处。

1.使页面渲染更有意义

语义化标签为设备提供了所需的相关信息，无须开发人员考虑所有可能的显示情况。无论哪种方式，一旦开发人员将文本标记为标题，就可以确信读取设备将根据自身的条件来显示合适的页面。

2.便于团队后期维护

如果为标签提供CSS中的id和class，很可能会出现不规范的情况。当开发者使用语义化标签后，由于语义化标签是规范的，因此方便了后期维护。

3.使HTML结构更加清晰

使用HTML语义化标签可以让页面的结构更加清晰，按照规范定义的页面，便于大家快速了解每一个结构的功能和作用。

4.为搜索提供帮助

SEO优化等语义化标签可以给搜索引擎一个更清晰、更好的搜索信号，让页面更容易被搜索到。
当然，有了语义化标签，并不代表不需要div，div仍然是很重要的。此外，语义化标签基本不会为开发者的页面添加样式，还需要使用CSS代码对样式进行控制。因此，要明确HTML5语义化标签的目的，既让页面的结构更加清晰、更加便于阅读和解析。
下面我们逐一介绍HTML5为开发者提供的语义化标签。

2.2 header标签

header标签主要用来定义页面的页眉，如标签等。如果开发者想为自己的页面添加一个导航栏，就可以使用header标签。
【示例】使用header标签的代码如下:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
      <style type="text/css">
      </style>
</head>
<body>
	<header>
		<hgroup>
			<h1>网站标题</h1>
			<h1>网站副标题</h1>
		</hgroup>
	</header>
</body>
</html>

使用div的HTML结构如下：

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
      <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1" />
      <style type="text/css">
      </style>
</head>
<body>
	<div class="header">
		<div class="top">
			<ul>
				<li>导航</li>
				<li>导航</li>
				<li>导航</li>
			</ul>
		</div>
		<div class="nav">
			<input type="search" placeholder="输入内容"/>
		</div>
	</</