HTML5网页前端设计-自学

sml-myself

已于 2024-08-01 02:02:22 修改

阅读量311

点赞数 11

分类专栏：网页前端设计文章标签： html5 前端

于 2024-07-31 23:59:48 首次发布

本文链接：https://blog.csdn.net/2301_81263854/article/details/140800528

版权

网页前端设计专栏收录该内容

1 篇文章 0 订阅

订阅专栏

HTML5基础

引言

HTML5指的是HTML语言的第五次修改版，也是目前HTML语言的最新版。

一、HTML5基本结构

HTML5文档的基本结构如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>网页标题</title>
</head>
<body>
    主体内容
</body>
</html>

HTML5元素的内容一般以起始标签<元素名>开始，以结束标签</元素名> 终止。

将文本内容保存为.html的文件，可以直接在浏览器打开并查看结果。

eg：第一个HTML5页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>第一个页面</title>
</head>
<body>
    你好,HTML5!
</body>
</html>

1.1 文档类型声明<!DOCTYPE>

DOCTYPE是Document Type的简写，含义为文档类型。

THML5文档基于结构中第一行<!DOCTYPE html>就是HTML5的DOCTYPE声明。

<!DOCTYPE html>标签定义文档该基于HTML5标准在网页中呈现。

1.2 根标签<html>

<html>是HTML5文档的根元素，除顶部<!DOCTYPE html>文档类型声明以外，所有的HTML5文档都是以<html>标签开始的，以</html>标签结束的。在<html>和</html>标签内包含了两个重要的元素标签：<head>首部标签和<body>主体标签，分别用于标记文档的首部和主体部分。

1.3 首部标签<head>

HTML5文档的首部使用<head>标签开始，以</head>标签结束。<head>标签中的内容不会显示在网页的页面中。<head>标签中可包括<title>和<meta>等标签，用于声明页面标题、字符集和关键词等。

1. 网页标题标签<title>

HTML5文档使用<title>和</title>标签标记网页标题，该标题会显示在浏览器窗口的标题栏中，若省略<title>标签，则网页标题会显示为“无标题文档”。建议在网页代码中保留该标签，因为<title>标签还能用于当网页被添加到收藏夹时显示标题，以及作为页面标题显示在搜索引擎结果中。

2. 基础地址标签<base>

<base>标签用于为页面上所有的链接设置默认URL地址或目标target。当HTML5文档中使用了相对路径时，浏览器会用<base>标签指定的URL进行补全。

3. 元数据标签<meta>

1）字符集声明

Charset是Character Set的简写，含义为字符集设置。浏览器统一默认的字符集是IOS-8859-1西文字符集，如果要使用其他字符集，那么浏览器需知到何种字符集才能正确地显示HTML页面。HTML5文档使用<meta>标签进行字符集声明。

使用<meta>标签声明字符集（UTF-8）声明，写法如下：

<meta charset="utf-8">

2)关键字声明

使用<meta>标签定义网页关键词（keywords），用法如下：

<meta name="keywords"content="HTML5,CSS3,jQuery"/>

3）页面描述声明

使用<meta>标签定义页面描述（description），用法如下：

<meta name="description"content="This is a tutorial about HTML5,CSS3,jQuery"/>

搜索引擎会根据<meta>标签中的name和content属性来索引网页。

4. 样式标签<style>

样式标签<style>可用于定义文档中指定区域的字体风格、背景颜色、对齐方式等各类样式信息。

eg：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo</title>
    <style>
        p{color:red}
    </style>
</head>
<body>
    <p>这是一个段落。</p>
</body>
</html>

这段代码可以将HTML5文档中所有未指定字体颜色的段落显示为红色。

5. 链接标签<link>

eg：

<head>
<link rel="stylesheet"href="my.css"/>
</hrad>

这表示将CSS样式文件my.css指定的样式效果应用于当前网页中。如果需要同时运用多个外部样式表文件，则需要为每一个CSS样式文件单独使用一次<link>标签。

6. 脚本标签<script>

eg：

<head>
<script src="test.js"></script>
</hrad>

和引用外部CSS文件类似，如果需要同时引用多个JavaScript文件，则需要为每一个JavaScript文件单独使用一次<script>标签。

1.4 主体标签<body>

HTML5文档的主体部分以<body>标签开始，以</body>标签结束。<body>标签中的内容将全部显示在网页的页面中。<body>标签中可直接添加文本内容，也可以继续嵌套其他元素标签，形成多样化的效果。

1.5 HTML5文档注释

注释是文档中的说明文字，不会被浏览器执行。

注释格式：

支持单行和多行注释。

将中间的“...”替换为注释文字内容即可。

1.6 HTML5文档规范

1. 文件类型

HTML5支持的常用文件后缀名为.html。

2. 元素标签格式

元素标签一般情况下是成对出现的,首尾标签的元素名称保持一致,并且尾标签中需要加上斜杠符号。

万维网联盟(W3C)明确规定了在新版本HTML5中必须使用小写格式,包括元素标签本身和其中可能出现的属性均需要遵守此规范。

在HTML5中,也有部分标签是独立使用的,没有首尾标签成对出现。例如,换行标签<br >和水平线标签<hr>等。由于此类标签单个就已经可以表达足够明确的含义,并且不包含其他文本内容需要放置在其首尾标签之间,因此结束标签没有存在的必要性。

目前这种无结束标签的元素标签有不同的写法存在,例如,水平线标签可以写成<hr>或<hr/>。但在XML规范中,所有的标签都必须有结束标签,因此必须加上斜杠符号表示完结。虽然目前这两种写法均能被浏览器正确显示,但是从长远来看,加上结束标志即斜杠符号的写法更为标准。

3. 字符实体的使用

在HTML5文档中存在一些特殊字符无法直接使用。连续空格也无法正确显示,会被浏览器缩减为单个空格。存在此类情况的一系列特殊字符在 HTML5 中称为字符实体。

字符实体可借助其对应的字符名称或数字代码进行输出,其格式如下:

&实体名称;

&#实体数字;

实体名称和实体数字的写法都是以 &符号开头,以;符号结尾,其中实体数字前面还加有#符号以示区分。

常用的字符实体及其对实体名称的出现是为了方便记忆,但是部分实体名称不能完全被所有浏览器支持。例如单引号的实体名称 &apos，在 IE浏览器中不被支持,在这种情况下可以使用实体数字代替。

4. 图像文件

网页文件常见的图像格式有 JPEG 格式、GIF 格式和 PNG 格式。

1)JPEG 格式

JPEG 格式指的是联合图像专家组格式,是第一个国际图像压缩标准。该格式的图像文件后缀名是.jpg 或.JPG 两种形式。

JPEG 格式图像文件有以下特点:

支持高级压缩。JPEG 格式图像文件可以进行高级压缩,例如用于摄影或写实作品。

弹性压缩比。JPEG格式图像文件在被压缩时允许使用不同的压缩比,但是随着压缩比增大，画面品质会下降。优势是可以将 JPEG格式图像文件压缩到很小的存储空间。

广泛支持互联网标准。JPEG格式图像文件广泛应用于互联网与数码相机领域,具有较好的重建质量。

2)GIF 格式

GIF 格式指的是图像交换格式,该格式的图像文件后缀名是.gif 或.GIF 两种形式。

GIF 格式图像文件有以下特点:

无损性。GIF格式的图像采用了一种特殊的压缩技术,能明显缩小图像文件的大小,并且不会丢失原图像中的任何数据。这种技术既方便了在网络上快速传输,又能保证图像不失真。

256 种颜色。GIF格式采用了8位的像素值来映射颜色表,最多可以有 28 即 256 种颜色。由于8位颜色深度的限制,GIF格式不适合用于显示色彩丰富效果逼真的照片,更加适用于显示组织 logo、小图标或布局边框等。

隔行扫描。GIF 格式支持隔行扫描,该技术将 GIF 编码的图片像素数据每隔4行交错扫描一次,而不是从顶部到底部逐行扫描,因此用户只需要下载完整版图像四分之一的时间就能看到完整图像轮廓。隔行扫描技术能够令图片在浏览器中加快显示速度。

动画效果。GIF格式的图片可以由若干帧图片组合成为动态效果。合理运用GIFe动态图片能为网页增添吸引力,但过多的动态图可能会影响页面下载时间,因此需要谨慎使用。

3)PNG 格式

PNG 格式指的是图像交换格式,该格式的图像文件后缀名是.png 或.PNG 两种形式。

PNG 格式图像文件有以下特点:

文件体积小。PNG格式图像文件压缩比高,因此文件体积比 BMP和JPG 格式图像文件都小。在受到带宽限制的情况下,仍能不影响图像质量。

支持透明显示。PNG格式图像文件支持背景透明效果,图片的边缘平滑不会产生锯齿效果。

色彩索引模式。PNG格式8位颜色编号代替RGB数据来记录色彩信息,整个图像的数据传播量相对其他格式图像文件来说更加精简。

1.7 HTML4.01转换为HTML5

基于 HTML4.01开发的网页可以分成三个步骤转换为 HTML5 网页,示例代码如下：

<!DOCTYPE htmI PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtm11/DTD/xhtml1 - transitional. dtd">
<html>
    <head>
        <title>HIML4.01 网页转换 HTML5 </title>
        <meta http-equiv="Content-Type" content = "text/html; charset = utf-8">
        <script type="text/javascript" src="test,js"></script>
        <link type="text/css" rel="stylesheet" href="test.css">
    </head >
    <body>
        再见,HTML4.01!
        你好,HTML5!
    </body>
</html>

步骤一,化简DOCTYPE声明方式。

步骤二,化简 charset字符集描述方式。

步骤三(可选，取决于需要转换的文件是否包含该内容),若存在外部CSS文件或JS文件的引用,可以直接省略其中的type描述。

修改后的代码如下:

<!DOCTYPE html>	
<html>	
	<head>	
	    <title> HTML4.01网页转换HTML5</title>	
 	    <meta charset ="utf-8">	
        <script src = "test. js"></script>	
        <link rel = "stylesheet" href = "test.css">	
    </head>
    <body>
        再见,HTML4.01!	
        你好,HTML5!	
    </body>	
</html>

二、HTML5保留的常用标签

2.1 基础标签

1.段落标签<p>

段落标签<p>和</p>用于形成一个新的段落，段落与段落之间默认为空一行进行分割。

eg：段落标签<p>的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>段落标签的简单应用</title>
</head>
<body>
    <p>这是一个段落。</p>
    <p>这是另一个段落。</p>
</body>
</html>

2. 标题标签<h1>~<h6>

HTML5使用<hn>和</hn>来标记文本中的标题，其中n需要替换为数字，从1~6共有6级。<h1>标签所标记的字体最大，标签使用的数字越大则字体越小，直至<h6>标签所标记的字体最小。

标题标签的默认状态为左对齐显示的黑体字。

eg：标题标签<h1>~<h6>的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>标题标签<h1>~<h6>的简单应用</title>
</head>
<body>
    <h1>h1的标签效果</h1>
    <h2>h2的标签效果</h2>
    <h3>h3的标签效果</h3>
    <h4>h4的标签效果</h4>
    <h5>h5的标签效果</h5>
    <h6>h6的标签效果</h6>
</body>
</html>

3. 水平线标签<hr>

水平线标签<hr>用于在网页上画一条水平线，从而在视觉上将分文分段。

<hr>标签没有结束标签，可以单独使用，默认情况下是一条宽度为1像素的黑色水平线。

eg：水平线标签<hr>的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>水平线标签的简单应用</title>
</head>
<body>
    <!--标题-->
    <h3>独坐敬亭山</h3>
    <!--水平线效果-->
    <hr>
    <p>
        《独坐敬亭山》是唐代伟大诗人李白创作的一首五绝,是诗人表现自己精神世界的佳作。此诗表面是写独游敬亭山的情趣,而其深含之意则是诗人生命历程中旷世的孤独感。诗人以奇特的想象力和巧妙的构思,赋予山水景物以生命,将敬亭山拟人化,写得十分生动。
    </p>
</body>
</html>

4. 换行标签<br>

换行标签<br>用于当前位置产生一个换行，相当于一次回车键所产生的效果。该标签单独使用，无结束标签。建议使用该标签代替回车键，因为回车键所产生的多个连续换行会被浏览器自动忽略。

<br>标签每次只能换一行，如需多次换行，必须写多个<br>标签。

eg：换行标签<br>的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>换行标签的简单应用</title>
</head>
<body>
    <!--使用<br>标签的换行效果-->
    <p>
        众鸟高飞尽，
        <br>
        孤云独去闲。
        <br>
        相看两不厌，
        <br>
        只有敬亭山。
    <hr>
    </p>
    <!--没有使用<br>标签的换行效果-->
    <p>
        众鸟高飞尽，
        孤云独去闲。
        相看两不厌，
        只有敬亭山。
    </p>
</body>
</html>

2.2 文本格式标签

1. 斜体字标签<i>

斜体字标签<i>用于将其首尾标签之间的文本内容显示为斜体字型效果。

eg：斜体字标签<i>的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>斜体字标签<i>的简单应用</title>
</head>
<body>
    <h3>斜体字标签的用法</h3>
    <hr>
    我是非斜体字
    <br>
    <i>我是斜体字</i>
</body>
</html>

2. 粗体字标签<b>和<strong>

粗体字标签<b>和<strong>均可以将其首尾标签之间的文本内容显示为粗体字型效果。区别在于使用<strong>标签的文本内容被认为是重要的内容。

eg：粗体字标签<b><strong>的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>粗体字标签的简单应用</title>
</head>
<body>
    <h3>粗体字标签的用法</h3>
    <hr>
    我是非粗体字
    <br/>
    <br/>
    <b>我是粗体字(使用了标签b)</b>
    <br/>
    <br/>
    <strong>我也是粗体字(使用了标签strong)</strong>
</body>
</html>

3. 上标标签<sup> 和下标标签<sub>

标签<sup>和</sup>标记的文本内容显示将显示为上标的样式。

标签<sub>和</sub>标记的文本内容显示将显示为下标的样式。

eg：上标标签<sup> 和下标标签<sub>的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>上标与下标标签的简单应用</title>
</head>
<body>
    <h3>上标标签与下标标签的简单应用</h3>
    <hr/>
        上标标签的用法:2<sup>10</sup>=1024
        <br/>
        <br/>
        下标标签的用法:二氧化碳的缩写为co<sub>2</sub>
</body>
</html>

4. 修订标签<del>和<ins>

删除线标签<del>可将其首尾标签之间的文字上显示一条水平贯穿线，该标签一般用与定义被删除的文本内容。

下划线标签<ins>用于将其首尾标签之间的文字加上下划线效果。由于<ins>标签的下划线效果容易和网页上的超链接效果混淆，往往需要和<del>标签配合使用。

eg：修订标签<del>和<ins>的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修订标签的简单应用</title>
</head>
<body>
    <h3>修订标签的用法</h3>
    <hr/>
        删除线标签的用法:<del>错误用法</del>
        <br/>
        <br/>
        下划线标签的用法:<ins>正确内容</ins>
        <br/>
        <br/>
        修订标签配合使用:圆周率π=<del>3.9</del><ins>3.1415926</ins>
        <hr/>
</body>
</html>

5. 预格式化标签<pre>

预格式化标签<pre>和</pre>可以将所标记的文本内容在显示时保留换行与空格的排版效果。

在没有使用该标签的普通情况下，浏览器将把多次回车键形成的换行默认为一次换行，并且把多次空格键形成的连续空格默认为单个空格，在段落开头的连续空格甚至会被忽略。

当需要多次使用<br>和“ ”符号分别进行换行和空格时，可以考虑使用此标签提高效率。

eg：预格式化标签<pre>的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>预格式化标签的简单应用</title>
</head>
<body>
    <h3>预格式化标签的用法</h3>
        <hr/>
        <pre>
            望天门山
        [唐] 李白

        天门将断楚江开，
        碧水东流至此回。
        两岸青山相对出，
        孤帆一片日边来。
        </pre>
</body>
</html>

2.3 列表标签

1. 有序列表标签<ol>

有序列表标签<ol>和</ol>用于定义带有编号的有序列表，需要和列表项目标签<li>配合使用。

列表项目标签<li>需标记在每个表项的开头，默认为缩进显示效果。

有序列表的基本格式如下：

<ol>
    <li>第一项
    <li>第二项
    <li>第三项
    ...
</ol>

有序列表标签<ol>默认的起始数值为1，可使用start属性重新定义编号起始值，格式为：

其中n需要替换成指定的编号数值。

有序列表标签<ol>默认的编号样式为标准的阿拉伯数字（1,2,3，...），如需要使用其他编号样式，可使用type属性进行声明，格式为：

<ol type="类型值">

type属性值和样式编号的对应关系如下所示：

eg：需要使用小写的英文字母，则写成：

<ol type="a">

eg:有序列表标签的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>有序列表标签的应用</title>
</head>
<body>
    <h3>有序列表标签的基本应用</h3>
    <ol>
        <li>第一条
        <li>第二条
        <li>第三条
    </ol>
    <hr>
    <h3>有序列表标签的type属性设置</h3>
    <ol type="I">
        <li>第一条
        <li>第二条
        <li>第三条
    </ol>
    <hr>
    <h3>有序列表标签的start属性设置</h3>
    <ol start="7">
        <li>第一条
        <li>第二条
        <li>第三条
    </ol>
</body>
</html>

2. 无序列表标签<ul>

无序列表标签<ul>和</ul>用于定义不带编号的无序列表。

该标签也需要和列表项目标签<li>配合使用。列表项目标签<li>需标记在每个表项的开头，默认为缩进显示效果。

无序列表的基本格式如下：

<ul>
    <li>第一项
    <li>第二项
    <li>第三项
    ...
</ul>

无序列表标签<ul>默认的编号样式为实心圆形，嵌套在其他列表中的二级列表编号样式默认为空心圆心。

如需自定义样式编号，可使用type属性进行声明，格式如下：

<ul type="类型值">

type属性值与样式编号的对应关系如下所示：

eg：需要使用方形编号标志：

<ul type="square">

eg:无序列表标签的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>无序列表标签的应用</title>
</head>
<body>
    <h3>无序列表标签的基本应用</h3>
    <ul>
        <li>第一条
        <li>第二条
        <li>第三条
    </ul>
    <hr>
    <h3>无序列表标签的type属性设置</h3>
    <ul type="square">
        <li>第一条
        <li>第二条
        <li>第三条
        </ul>
    <hr>
    <h3>无序列表标签嵌套显示效果</h3>
    <ul>
        <li>第一条
        <li>第二条
            <ul>
                <li>第一条
                <li>第二条
                <li>第三条
            </ul>
        <li>第三条
        <li>第四条
    </ul>
</body>
</html>

3. 定义列表标签<dl>

定义列表标签<dl>和</dl>是用于进行词条定义的特殊列表，每条表项需要结合词条标签<dt>和定义标签<dd>一起使用。词条标签<dt>需要标记在每个词条的开头。定义标签<dd>则需要标记在每个定义部分的开头，默认为全文缩进显示。

定义列表的基本格式如下:

<dl>
    <dt>第一个词条
        <dd>第一个词条定义
    <dt>第二个词条
        <dd>第二个词条定义
    ...
</dl>

eg:定义列表标签的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>定义列表标签的应用</title>
</head>
<body>
    <h3>Oxford Dictionary</h3>
    <hr/>
    <dl>
        <dt>HIML</dt>
        <dd>Hypertext Markup Language, a standardized system for tagging text filesto achieve font, colour, graphic, and hyperlink effects on World WidWeb pages :'an HTML file'.</dd>
        <dt>World Wide Web</dt>
        <dd>An information system on the Internet which allows documents to bconnected to other documents by hypertext links, enabling the usersearch for information by moving from one document to another.</dd>
        <dt>Browser</dt>
        <dd>A computer program with a graphical user interface forlisplaying HTML files, used to navigate the world wide Web:a web browser'.</dd>
    </dl>
</body>
</html>

2.4 图像标签

图像标签<img>用于在网页中嵌入图片，该标签无须结束标签，可单独使用。
<img>标签有两个常用属性：src属性和alt属性。src属性用于指明图像的存储路径，通常是URL形式。alt属性用于无法找到图像时显示替代文本，该属性可省略不写。
标签图像基本格式如下:

<img src="图像文件URL"/>

其中“图像文件URL”替换为图片存储的路径。

eg：图像标签<img>的应用

在.html同级文件夹中创建一个名为logo.png的图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>图像标签的应用</title>
</head>
<body>
    <h3>图像标签的应用</h3>
    <hr/>
    <!--使用图像标签<img>的效果-->
    <img src="logo.png" alt="百度logo" width="300" heigt="250"/>
</body>
</html>

2.5 超链接（锚链接）标签

超链接标签<a>用于在网页中标记文本或图像从而形成超链接，用户单击后将跳转到另一个指定的页面，从而实现测览空间的跨越。
超链接可以用于指向其他任何位置。默认状态下，未被访问的链接文本显示为带有下划线的蓝色字体，鼠标悬浮在上面会变成手形，单击访问后链接文本会变成带有下划线的紫色字体。

超链接标签有两个属性：

href：目标内容的URL地址。
target：目标内容的打开方式，其属性值如下表所示。

1. 外部链接

其基本格式如下：

<a href="URL地址">链接文本或者图片</a>

外部链接可包含文本内容或者图片内容。

文本示例：
<a href="www.baidu.com>百度</a>
图片示例：
<a href="www.baidu.com"><img src="logo.png"/></a>

eg：外部超连接的应用

在.html同级文件夹中创建一个名为logo.png的图片。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>外部超连接的应用</title>
</head>
<body>
    <h3>外部超连接的应用</h3>
    <hr/>
    <!---使用超链接<a>的文字效果-->
        文字超链接效果:<a href="http://www.baidu.com">百度</a>
    <br/>
    <br/>
    <!--使用超链接<a>的图片效果-->
        图片超链接效果:<a href="http://baidu.com"><img src="logo.png" width="150" height="70"/></a>
</body>      
</html>

2. 内部链接

超链接标签也可以通过单击跳转到同一页面的指定区域，其语法格式如下：

<a href="#指定区域">链接文本或图像</a>

这里的“指定区域名”可以自定义，但是同时目标区域也必须标记出对应的名称，其格式如下：

<a href="区域名">目标内容</a>

eg：内部超链接的应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>内部超链接的应用</title>
</head>
<body>
    <h3>内部超链接的应用</h3>
    <hr/>
    <p>
        <h3 >目录</h3 >
        <ul>
            <li><a href="#ch01">第一章</a>
            <li><a href="#ch02">第二章</a>
            <li><a href="#ch03">第三章</a>
            <li><a href="#ch04">第四章</a>
            <li><a href="#ch05">第五章</a>
        </ul>
    </p>
    <hr/>
    <h3><a name="ch01">第一章</a></h3>
    <p>HTML5概述</p>
    <h3 ><a name="ch02">第二章</a></h3>
    <p>HTML5基础</p>
    <h3><a name="ch03">第三章</a></h3>
    <p>css基础</p>
    <h3><a name="ch04">第四章</a></h3>
    <p>Javascript基础</p>
    <h3><a name="ch05">第五章</a></h3>
    <p>HIML5表单</p>
</body>      
</html>

2.6 表格标签

表格标签由<table>和</table>定义，每个表格中包含若干行（由单元行标签<tr>和</tr>表示），每一行又被分为若干单元格（由单元格标签<td>和</td>表示）。

1. 表格标签<table>

表格标签<table >和</table>用于中定义一个完整的表格。

2. 表格标签<tr>

表格行标签<tr >和</tr >用于定义表格中的一行。

3. 表格标签<td>

单元格标签<td>和</td >用于定义表格行中的一个数据单元格。数据单元格中可以包含表单、文本、水平线、图片、列表、段落甚至新的表格等内容。默认状态下，单元格的内容为左对齐。

4. 表格标签<th>

表头标签<th>和</th>用于定义表格的第一行表头，默认为粗体字，居中对齐。

5. 表格标签<caption>

表格标題标签<caption>和</caption>可用于为表格添加标题，该标题默认为居中对齐并显示在表格的顶部。

eg：表格标签的综合应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格标签的综合应用</title>
</head>
<body>
    <h3>表格标签的综合应用</h3>
<hr/>
    <table border="1">
        <caption>
            成绩一览表
        </caption >
        <tr>
            <th>姓名</th>
            <th>语文</th>
            <th>数学</th>
        </tr>
        <tr>
            <td >张三</td>
            <td>90</td>
            <td>100</td>
        </tr>
        <tr>
            <td >李四</td>
            <td>80</td>
            <td>89</td>
        </tr>
        <tr>
            <td>王五</td>
            <td>78</td>
            <td>60</td>
        </tr>
    </table>
</body>      
</html>

2.7 框架标签

框架标签用于在网页的框架内定义子窗口。在HTML5中原有的框架只保留了内联框架标签<frameset >。

该标签在HTML5中仅支持src属性，用于指定框架内部的网页来源。

<iframe src="new.html"></iframe>

eg：框架标签的简单应用

2.8 容器标签

1. <div>标签

标签<div>可将网页页面分割成不同的独立部分，通常用于定义文档中的区城或节。该标签是一个块级元素，浏览器会自动在<div>和</div>所标记的区域前后自动放置一个换行符。每个标签可有一个独立的id号。

同样属于块级元素的还有段落标签<p>、表格标签<table>、标题标签<h1>~<h6>等。

eg：<div>标签的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>div标签的简单应用</title>
</head>
<body>
    <h3> div 标签的简单应用</h3>
    </hr>
       <h4>这是第1段的标题(没有使用div标签)</h4>
       <p>这是第1段的内容(没有使用div标签)</p>
    </hr>
    <div>
        <h4>这是第2段的标题(使用了无样式要求的div标签)</h4>
        <p>这是第2段的内容(使用了无样式要求的div标签)</p>
    </div>
</hr>
    <div style="color:blue;background-color: yellow;">
        <h4>这是第3段的标题(使用了指定样式要求的div标签)</h4>
        <p>这是第3段的内容(使用了指定样式要求的div标签)</p>
    </div>
</body>
       
</html>

2. <span>标签

标签<span>通常作为文本的容器，它没有特定的含义和样式，只有与CSS同时使用才可以为指定文本设置样式属性。该标签是一个内联元素，与块级元素相反，内联元素不会自动在前后放置换行符，因此内联元素会默认在同一行显示。

eg：<span>标签的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>span标签的简单应用</title>
</head>
<body>
    <h3> span 标签的简单应用</h3>
    </hr>
        <p>本段落使用了<span>span标签</span>,但是未设置任何样式.</p>
        <p>本段落使用了<span style="color:red">span标签</span>,并设置了样式.</p>
</body>
</html>

三、HTML5新增的常用标签

3.1 HTML5新增文档结构标签

在HTM5版本之前通常直接使用<div>标签进行网页整体布局,常见布局包括页眉页脚、导航菜单和正文部分。为了区分文档结构中不同的<div>内容,一般会为其配上不同的id名称。例如:

<div id = "header">这是网页的页眉部分</div>
<div id= "content">这是网页的正文部分</div>
<div id= "footer">这是网页的页脚部分</div>

由于id名称是自定义的,如果HTML文档作者没有提供明确含义的id名称,也会导致含义不明确。
因此,HTML5为了代码能够更好地语义化,新增了一系列专用文档结构标签代替原先用<div>加上id名称的做法。新增文档结构标签如下表所示：

1. 页眉标签<header>

页眉标签<header >和</header >用于定义网页文档或节的页眉，通常为网站名称。

2. 导航标签<nav>

导航标签<nav>和</nav>用于定义网页文档的导航菜单，可通过超链接跳转到其他页其中nav 来源于 navigation(导航)的简写。

3. 节标签<section>

节标签<section>和</section>用于定义独立的专题区域,里面可包含一篇或多篇文章。

4. 文章标签<article>

文章标签<article>和</article>用于定义独立的文章区域，里面根据文章内容的长短也可以包含一个或多个段落元素<p>。

5. 侧栏标签<aside>

侧栏标签<aside>和</aside>用于定义正文两侧的相关内容，常用作文章的侧栏。

6. 页脚标签<footer>

页脚标签<footer >和</footer>用于定义整个网页文档或节的页脚，通常包含文档的作者、版权、联系方式等信息。

eg：HTML5新增文档结构标签的综合应用

事实上，文档结构标签只会使得文档结构更加清晰，从浏览器运行结果来看并没有起到页面美化作用，真正的页面布局效果需要采用CSS技术进行辅助。

3.2 HTML5新增格式标签

1. 记号标签<mark>

记号标签<mark>用于突出显示指定区域的文本内容，通常在指定的文本前后分别加上<mark>和</mark>标签标记，可以为文字添加黄色底色。

eg：记号标签<mark>的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>记号标签<mark>的简单应用</title>
</head>
<body>
    <h3>记号标签 mark 的简单应用</h3>
    </hr>
        <p>这是一段<mark>文字</mark>内容</p>
</body>
</html>

2. 进度标签<progress>

进度标签<progress>用于显示任务的进度状态，可配合JavaScript使用以显示任务进度的动态进行效果。
该标签可以加上属性value和max分别用于定义任务进度的当前值和最大值。例如,表示目前任务进度已经进行了80%的代码：

<progress value="80"max="100"></progress>

eg:进度标签<progress>的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>进度标签<progress>的简单应用</title>
</head>
<body>
    <h3>进度标签 progress 的简单应用</h3>
    </hr>
        文件正在下载中:
        <progress value="35" max="100"></progress>
</body>
</html>

3. 度量标签<meter>

度量标签<meter>用于显示标量测量结果，通常用于显示磁盘使用量、投票数据统计等。该标签通常应用于已知范围内的恒定数值标记，不用于任务进度指示。需要注意的是，目前IE尚未对该标签进行支持。
度量标签<meter >有一系列属性用于辅助显示效果。属性说明表如下：

eg：度量标签<meter>的简单应用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>度量标签<meter>的简单应用</title>
</head>
<body>
    <h3>度量标签 meter 的简单应用</h3>
    </hr>
    <h4>驱动器磁盘空间状态</h4>
    <p>C盘空间剩余大小:<meter min="0" max="1000" value="300" low="400" high="800" optinum="1000"></meter>300/1000GB</p>
    <p>D盘空间剩余大小::<meter min="0" max="1000" value="600" low="400" high="800" optinum="1000"></meter>600/1000GB</p>
    <p>E盘空间剩余大小::<meter min="0" max="1000" value="900" low="400" high="800" optinum="1000"></meter>900/1000GB</p>
</body>
</html>