网站的前端设计，也称为UI(User Interface)设计，是指使用HTML、CSS等静态网页技术，结合ASP.NET AJAX、Javascript和jQuery等客户端脚本，来实现网站界面设计的技术。好的前端设计不仅使软件变得有个性、有品位，还能使软件的操作变得舒适、简单、自由、充分体现软件的定位和特点。本文着重介绍HTML5标记语言。
HTML的发展历史，有兴趣的自行在网上搜索。
HTML5的基本结构
HTML文件中的标记符必须用“<”和“>”括起来，一般情况下标记符都以“<标记>”开始，以“</标记>”结束。下面给出一段代码，来说明HTML5文件的基本格式：
<!DOCTYPE html>
<html>
<head>
<meta charsct = "utf-8" />
<title>网页的标题</title>
</head>
<body>
<header id = "page_header">这里是页面顶部信息文本</header>
<nav id = "page_nav">这里是页面导航栏部分</nav>
<section>
<article>
<h1>文章的标题</h1>
<p>文章的正文本1
<p>文章的正文本2
</article>
</section>
<aside>这里是页面的侧边栏区域</aside>
<footer id = "page_footer">这里是页面的底部区域</footer>
</body>
</html>
上述代码的第一行“”是文档的类型，用来标识文档的版本为HTML5。将上述代码保存在文本文件中，并以.html扩展名保存，用chrome浏览器打开，会得到如图1的显示结果。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
</head>
<body>
</body>
</html>
如果，运行上述代码，会出现一个空白网页。所有的页面内容，一般写在<body></body>标记内，下面介绍一些常用的html5标记，直接上代码，然后再逐个分析：
<body>
<div>
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<ul>
<li>列表项1</li>
<li>列表项2
<ul>
<li>列表项2-1</li>
<li>列表项2-2</li>
</ul>
</li>
</ul>
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
<dl>
<dt>列表项标题1</dt>
<dd>描述1</dd>
<dt>列表项标题2</dt>
<dd>描述2</dd>
<dt>列表项标题3</dt>
<dd>描述3</dd>
</dl>
<table>
<tr>
<td>第1行第1格</td>
<td>第1行第2格</td>
</tr>
<tr>
<td>第2行第1格</td>
<td>第2行第2格</td>
</tr>
</table>
<img src = "image/hello.jpg" alt = "HELLO">
<br />
<audio src = "audio/dog.wav" controls="controls">Your browser does not support the audio element.
</audio>
<br />
<video src = "video/foot.mp4" controls width="720">Your browser does not support the video element.
</video>
</div>
</body>
上述代码写在<body>标记内，直接运行一下(快捷键ctrl+F5)。得到如图3的运行结果。
超链接标记，实例中的代码为：
<a href="http://www.baidu.com" target="_blank">百度一下</a>
<a>标记为超链接标记，通过超链接可以将组成网站的众多网页关联起来，用户单击设置了超链接的元素(文字、图片或控件等)时可以挑战到指定的其他页面。target="_blank"表示的是在新的窗口中打开目标。另外还有两种方式："_self"表示目标显示在当前窗口中，"_parent"表示目标直接显示在父框架窗口中。同学们，可以自行修改代码后，分析下异同。
无序列标记，实例中的代码为：
<ul>
<li>列表项1</li>
<li>列表项2
<ul>
<li>列表项2-1</li>
<li>列表项2-2</li>
</ul>
</li>
</ul>
无序列标记，表示与顺序无关的标记。与之相对应的是有序列标记，实例中的代码如下：
<ol>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
</ol>
从图3的显示效果中，可以知道，有序列标记会对列表项前面增加顺序的编号。
自定义列表标记，实例中的代码为：
<dl>
<dt>列表项标题1</dt>
<dd>描述1</dd>
<dt>列表项标题2</dt>
<dd>描述2</dd>
<dt>列表项标题3</dt>
<dd>描述3</dd>
</dl>
自定义标记用来表示带有说明信息的列表。
表格标记，实例中的代码如下：
<table>
<tr>
<td>第1行第1格</td>
<td>第1行第2格</td>
</tr>
<tr>
<td>第2行第1格</td>
<td>第2行第2格</td>
</tr>
</table>
表格标记用于在页面中以表格形式组织文本，也可以使用表格进行页面布局。实例代码中表示了一个2行2列的表格。
图像标记，实例中的代码为：
<img src = "image/hello.jpg" alt = "HELLO">
图像标记用于在网页中显示一副图像，该标记常用的属性有src和alt，scr用于指明要显示的图像的存放位置。alt用于表示当图像加载失败时显示的替代文字。
注意，在代码在中有一行<br />，表示的是换行。
音频标记，实例中的代码为：
<audio src = "audio/dog.wav" controls="controls">Your browser does not support the audio element.
</audio>
音频标记是HTML5新增标记，用于为网页提供播放指定音频文件的功能。支持的格式有mp3、wav和Ogg Vorbis共3中。代码中scr属性用于指明要播放的音频存放位置。controls用于指明在网页中显示一个音频播放器控件。<audio></audio>中间的文字，用于显示加载音频播放器失败时的替代文字。
视频标记，实例中的代码为:
<video src = "video/foot.mp4" controls width="720">Your browser does not support the video element.
</video>
视频标记也是HTML5的新增标记，用于在网页中播放视频，视频标记的src用于指明要播放的视频的存放位置，controls用于指明需要在网页中显示视频播放器控件，另外还可以设置width(宽)和height(高)属性。HTML5视频播放器只支持MP4、Ogg和WebM3种格式。
最后，需要说明的是，上述的资源文件(图片、音频、视频)的打开文件需要保存在指定的路径下，如果按照实例中的代码写的网页，需要将文件保存在工程路径下，具体路径实例如图4所示。
最后，这里是一个资源文件的下载链接。请点击。
823
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
