HTML5 网页设计基础

学习目标：

1. 掌握文本控制标签的用法

2. 掌握图像标签的用法

3. 掌握列表标签的用法

4. 掌握超链接标签的用法

5. 熟悉结构标签的用法

6. 熟悉页面交互标签的用法

7. 熟悉全局属性的用法

HTML5是什么？

HyperText Markup Language 超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等。

HTML5标签和属性

HTML5即包含旧版本HTML的大部分标签和属性，也包含一些新的标签和属性。标签的应用使网页结构更加清晰明确，属性的应用使标签的功能更加强大。掌握标签和属性的用法是熟练使用HTML5制作的基础。

2.1文本控制标签

无论网页如何丰富，文字通常都是网页中最基本的元素之一。为了使文字排版整齐，结构清晰，HTML5提供了一系列文本控制标签。例如，页面格式化标签，文本格式化标签等。

2.1.1 页面格式化标签

结构清晰的文章通常通过标签，段落，分割线等对内容进行排列，网页也不例外。为了使网页中的文字有条理地显示，HTML5提供了相应的页面格式化标签，例如标题标签，段落标签，水平线标签，换行标签。

1.标题标签

标题标签用于见文本设置为标题，HTML5提供了6个等级的标题标签，即 <hl>, <h2> , <h3> , <h4> , <h5> , <h6> .从 <h1> 到 <h6>,标题标签的重要性程度依次递减。标题标签的基本语法格式如下：

< hn>标题文本 </hn>

n的取值范围 1~6，代表1~6级标题；

align为可选属性，用于指定标题的对齐方式。 align属性的取值如下：

left : 用于设置标题文字左对齐（默认属性值）

center ：用于设置标题文字居中对齐

right ：用于设置标题文字右对齐

基本语法如下：

注意：

1. 一个页面最好只使用一个<h1>标签，该标签通常用在网站的Logo部分

2.由于标题标签拥有特殊的语义，切勿为了设置文字加粗或更改文字的大小而使用标题标签。

3.在HTML5中，一般不建议使用标题标签的 align 属性设置对齐方式，可使用css样式代码设置。

2.段落标签

要想使网页中的文字有条理地显示，还可以使用段落标签，它可以将整个网页的文字分为若干个段落。在网页中，可以使用 <p> 标签来定义段落。 <p> 标签是HTML5中常用的标签，默认情况下，一个段落的文字会根据浏览器窗口的大小自动换行。

<p>标签的基本语法格式如下：

<p align="对齐方式"> 段落文本 </p>

align为<p>标签的可选属性，用于设置段落文本的对齐方式。

提示： <br> 表示换行

3.水平线标签

在网页中，水平线用于将段落与段落隔开，使网页内容结构清晰，层次分明。水平线可通过<hr />标签来定义。

<hr />标签基本语法格式如下:

<hr 属性="属性值" / >

<hr />是单标签，在网页中输入“<hr />” ,就可以添加一条默认样式的水平线。通过设置属性和属性值，可以更改水平线的样式。

<hr />标签的常用属性介绍
属性名	作用	属性值
align	用于设置水平线的对齐方式

<hr />标签的常用属性介绍
属性名	作用	属性值
align	用于设置水平线的对齐方式	可选值包括 left，right，center（默认值）
size	用于设置水平线的粗细	以像素（px）为单位，默认为2px
color	用于设置水平线的颜色	可为颜色的英文名称，十六进制颜色值，rgb（r，g，b）
width	用于设置水平线的宽度	可以是确定的像素值，也可以是浏览器窗口的百分比（默认值为100%）

注意：在实际工作中，不建议使用<hr/>的外观属性设置水平线的样式，最好通过css样式代码来设置。

4. 换行标签

在Word中，按“Enter”键可以将一段文字换行，但在网页中，如果想将某段文本强制换行显示，就需要使用换行标签 <br/>.

2.1.2 文本格式化标签

文本格式化标签用于为文字设置粗体，斜体或下划线等特殊的文本效果常用的文本格式化标签及文本显示效果

常用的文本格式化标签及文本显示效果
文本格式化标签	文本显示效果
<b>标签和<strong>标签	文本加粗显示
<u>标签和<ins>标签	文本以添加下划线的样式显示
<i>标签和<em>标签	文本斜体显示
<s>标签和<del>标签	文本以添加删除线的样式显示
<cite>标签	文本斜体显示，该标签常用于标注引用的参考文献
<time>标签	文本正常显示，该标签常用于标注时间和日期
<mark>标签	文本以添加底色的样式显示

上图中的文本格式化标签均为双标签

1.<b>标签和<strong>标签

<b>标签和<strong>标签均用于设置文本加粗显示，两者的区别在于：<b>标签是物理标签(物理标签只用于设置显示样式），<strong>标签是逻辑标签（逻辑标签不仅用于设置显示标签，还用于将标签语义化，起强调作用）。推荐使用<strong>标签。

2.<u>标签和<ins>标签

<u>标签和<ins>标签军用于设置文本以添加下划线的样式显示。<u>标签是物理标签，只用于设置下划线的显示样式。<ins>标签是逻辑标签，除了用于设置下划线的显示标签外，还用于将标签语义化。推荐用<ins>标签

3.<i>标签和<em>标签

<i>标签和<em>标签均用于设置文本斜体显示，<i>标签是物理标签，<em>标签是逻辑标签，推荐使用<em>标签。

4.<s>标签和<del>标签

<s>标签和<del>标签均用于设置文本以添加删除线的样式显示。<s>标签是物理标签，<del>标签是逻辑标签。推荐用<del>标签

5.<cite>标签

<cite>标签是一个逻辑标签，文本以斜体显示，其中的文本是对某个参考文献的引用。与<i>标签，<em>标签中的文本的显示样式相同，区别在于 <cite>标签着重强调引用的内容。

6.<time>标签

<time>标签是一个逻辑标签，用于标注时间和日期。不会在浏览器中呈现任何特殊效果，但是能够以机器可读的方式进行编码。

<time<标签有两个属性：

6.1 datetime ：

用于定义时间或日期，其值必须为一个有效的时间或日期，例如 14:00 ，2015-09-01 等。由机器解读，不会显示在页面中。

6.2 pubdate ：

用于设置文档的发布日期和时间，取值为pubdate ，可省略。

7.<mark>标签

<mark>标签是一个逻辑标签，用于高连显示文本，以引起阅读者的注意。

2.1.3文本样式标签

文本样式标签用于设置文字效果。例如：字体，字号，文字颜色。

语法： <font 属性=“属性值”> 文本内容</ font>

<font>标签用于设置文本样式，其常用的属性有3个：

属性名	作用
face	设置字体，例如黑体，宋体等
size	设置字号，取1~7的整数值，无须添加单位
color	设置文字颜色

<font face="微软雅黑" size="3" color="fuchsia">你好陌生人 </font>

2.1.4特殊字符

2.2 图像标签

2.2.1 常用图像格式

1.GIF格式

特点：支持动画，是一种无损压缩的图像格式。支持透明图像效果，适合在网页中使用。只能处理256种颜色，常用于Logo，小图标和其他色彩相对单一的图像

2.PNG格式

特点：图像体积小，支持AIpha透明（半透明，全透明）图像效果。不支持动画，只支持256种颜色。

3.JPEG格式

特点：有损压缩的图片格式，每次修改都会导致数据丢失，是专门为照片设计的图像格式。

2.2.2 图像标签及属性

语法： <img src="图像URL" />

2.2.3 绝对路径和相对路径

在计算机查找文件时，需要明确该网页文件所在的位置，文件所在的位置称为路径。

1. 绝对路径

绝对路径就是网页中的文件或文件夹在盘符（C盘，D盘等）中的真正路径。

2. 相对路径

相对路径就是相当于当前文件的路径，没有盘符。以HTML网页文件为起点，通过层级关系描述目标图像的位置。

设置相对路径的方法有三种：

2.1 图像和HTML网页文件位于同一文件夹：设置相对路径时，只需输入图像的名称即可。例如：<img src=" logo.gif " />

2.2 图像位于HTML网页文件的下一级文件夹：设置相对路径时，输入文件夹名和图像名两者用“/”

隔开。例如：< img src=" img / img01/logo.gif / >

2.3 图像位于HTML网页文件的上一个文件夹：设置相对路径时，在图像名之前添加“ ../ ” ; 如果位于上两级文件夹，则需要使用 “ ../ ../ ” 。例如：< img src=" ../logo.gif '' />

注意：在网页中不推荐使用绝对路径，因为网页制作完成后会上传到服务器上，路径存储根目录会发生改变，使用绝对路径可能会导致路径存储根目录不存在。

2.3列表标签

一个网站由许多个网页组成，每个网页中都有相应的信息。将这些信息以列表的方式呈现。HTML5中提供了三种列表，分别为无序列表，有序列表，定义列表

2.3.1无序列表

语法：

2.3.2有序列表

特点：各个列表项按照一定的顺序排列

语法：

2.3.3定义列表

特点：对名词进行解释和描述。无任何列表项目符号。

语法：

注意：

1. <dl> , <dt> , <dd>这3个标签之间不允许出现其他标签。

2. <di> 标签必须与<dt>标签相邻。

2.3.4 列表嵌套

代码：

2.4 超链接标签

想从首页跳转到其他页面，需要在首页的相应位置添加超链接。

2.4.1创建超链接

使用 <a>标签创建

语法： <a href="跳转目标" target=“目标窗口的弹出方式”>文本或图像 </a>

<a>标签用于定义超链接，href属性和target属性为常用属性。

* href：用于指定链接页面的URL，当为<a>标签设置href属性时，<a>标签就具有了链接的功能。

* target：用于指定链接页面的打开方式，其取值包括_self 和 _blank 两个，其中 _self 为默认值，表示在原窗口打开链接页面，_blank 表示在新窗口打开链接页面

注意：

1.不确定链接目标时，通常将<a>标签的 href 属性值设置为 “#” 即 href= “#” ，表示该链接为一个空链接。

2.在网页中不仅可以创建文本超链接，而且可以为网页元素(如图像，音频，视频等）创建超链接。

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>列表嵌套</title>
   </head>
   <body>


   
   <a href="https://www.hao123.com/">点击跳转至360浏览器页面</a>
   <br/>
   
   <a href="../图像标签学习/图像标签学习.html" target="_blank">点击跳转图像标签学习页面</a>
   <br/>
   
   <a href="https://www.baidu.com/" target="_self" title="跳转至百度">
   </a>

   </body>
</html>

图示：

2.4.2 锚点链接

如果网页内容过多，页面过长，那么浏览页面还是就需要不断地拖动滚动条，这不方便。为了提高效率，HTML5提供了一种特殊的链接——锚点链接，通过锚点链接能够快速定位到目标内容。

创建锚点链接分为两步

（1）创建锚点链接对象：

<a href=" #id "> 链接文本 < /a >

(2) 创建锚点跳转目标：

<标签 id=“ id ” > 显示内容 </标签>

代码 1：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>锚点链接</title>
   </head>
   <body>
<ul>

    <li><a href="#one">1.字母A</a></li>
    <li><a href="#two">2.字母B</a></li>
    <li><a href="#three">3.字母C</a></li>

</ul>
<h2 id="one">1.字母A</h2>
<p>AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</p>

<h2 id="tow">2.字母B</h2>BBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBBB</p>

<h2 id="three">3.字母C</h2>
   <p>CCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCCC</p>

   </body>
</html>

图示：

代码2

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>文本链接</title>
</head>
<body>
<a href="http://www.baidu.com">百度</a>
<a href="http://www.sina.com.cn">新浪</a>
<a href="http://www.163.com">网易</a>
</body>
</html>

2.5 结构标签

结构标签是HTML5中新增的标签，用于丰富页面的功能结构。有<header>标签，<nav>标签，<footer>标签，<article>标签等

2.5.1<header>标签

<header>标签是一种具有引导作用的结构标签，包含所有位于页面头部的内容。可用来放置整个页面或页面的某个内容块的标题。

代码：

<body>

<header>

<h1>网页标题</h1>

</header>

<article>

<header>

<h1>文章标题</h1>

</header>

<p>文章正文部分</p>

</article>

</body>

图示：

2.5.2 <nav> 标签

<nav> 标签是HTML5中新增的标签，用于定义导航链接。

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title>锚点链接</title>
   </head>
   <body>
<nav>
   <ul>
       <li><a href="#">首页</a></li>
       <li><a href="#">公司概况</a></li>
       <li><a href="#">产品展示</a></li>
       <li><a href="#">联系我们</a></li>
   </ul>
</nav>
   </body>
</html>

2..5.3 <footer>标签

用于定义一个页面或某个页面中某部分的底部内容。

<footer>

页面或页面中某部分的底部内容

<footer>

2.5.4 <article>标签

用于定义文件，页面或应用程序中与上下文不相关的独立部分。例如：日记，新闻等

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title> </title>
   </head>
   <bodv>
<article>
   <header>
       <h1>秋天的味道</h1>
       <p> 你想知道秋天的味道吗？</p>

   </header>

</article>


   </body>
</html>

图示：

2.5.5 <section>标签

用于定义一段专题内容，一般有自己的标题。

注意：

section 不是一个专用来做容器的标签，如果仅仅是用于设置样式或脚本处理，专用的是 div
section 里应该有标题（h1~6），但文章中推荐用 article 来代替
一条简单的准则是，只有元素内容会被列在文档大纲中时，才适合用section元素。
section的作用是对页面上的内容进行分块，如各个有标题的版块、功能区或对文章进行分段，不要与有自己完整、独立内容的article混淆。

使用<section>

<section>可以相互嵌套，在页面中定义了一个特殊的顶级区块，于是可以从<h1>开始列提纲而不用担心会破坏网页的纲要。尽管没找到明确说明，但我个人认为在每一层<section>里还是仅使用一个<h1>为佳。

以Wordpress主题为例，我认为与#sidebar相对的#content部分，使用<section>包裹一堆<article>作为页面的主要内容并不太合适。而使用<section>用在整体布局是明显错误的了。而适合使用<section>标签的地方有：

文章的评论列表，有着整齐的结构；
文章内容的目录，有着文章内部结构纲要；
侧栏widget，在WebDesignWall中我看到了这样的设计，因为widget内容大都是评论列表、文章列表，有着清晰的结构且是独立完整的一部分；
包裹文章中各个章节的段落，但要在编辑器完成，目前来看并不易用。

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title> </title>
   </head>
   <body>
<article>
    <header>
        <h2>小张的个人介绍</h2>
    </header>
    <p>小张是个好学生</p>
    <section>
        <h2>评论</h2>
        <article>
            <h3>评论者：</h3>
            <p>小张爱打球</p>
        </article>
        <article>
            <h3>评论者：</h3>
            <p>小张爱学习</p>
        </article>
    </section>
</article>
   </body>
</html>

图示：

2.5.6 <aside>标签

用于定义当前页面或者页面中主要内容的附属信息部分可以包含与当前页面或页面中主要内容相关的引用，侧边栏，广告，导航条等有别于主要内容的部分。

*<aside>标签包含在<article>标签内，用于定义主要内容的附属信息部分。

*<aside>标签在<article>标签之外使用，用于定义页面或网站的附属信息部分。

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title> </title>
   </head>
   <body>

<article>
   <header>
       <h1>标题</h1>
   </header>
   <section>文章主要内容</section>
   <aside>文章的其他相关信息</aside>
</article>
<aside>侧边栏</aside>
   </body>
</html>

图示

2.5.7 <figure>标签和<figcaption>标签

<figure>标签用于定于独立的网页内容，例如图片，表格，照片，代码等。<figure>标签中的内容应该与网页中的内容相关，但删除<figure>中的内容不对对文档流产生影响。<figcaption>标签嵌套在<figure>标签中，用于为<figure>标签添加标题。一个<figure>标签中只允许使用一个<figcaption>标签，且<figcaption>标签应该放在<figure>标签的第1个或最后一个子标签的位置。

区别：

<figure>

<img src="image.png" alt="">

<p>caption and descriptions</p>

</figure>

<figure>

<img src="image.png" alt="">

<figcaption>caption and descriptions</figcaption>

</figure>

2.5.8 <hgroup>标签

用于将多个标题（主标题，副标题或子标题）组成一个标题组。通常与<h1>~<h6>标题标签组合使用。

注意：如果只有一个标题标签，则不建议使用<hgroup>标签

2.6 页面交互标签

使用页面交互标签可以给用户带来良好的体验，丰富网页内容的展现形式。

2.6.1 <details>标签和<summary>标签

使用<details>标签可以在网页中实现让一段文字或标题包含隐藏的信息。在使用<details>标签时，可以嵌入<summary>标签。<summary>标签可以作为<details>标签的第一个子标签，用于为<details>标签定义标题。单击由<summary>标签定义的标题，会显示或隐藏<details>标签中的非标题内容。

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title> </title>
   </head>
   <body>
       <details>
<summary>显示</summary>
<ul>
    <li>列表1</li>
<li>列表2</li>
</ul>
</details>
   </body>
</html>

图示：

2.6.2 <progress>标签

<progress>标签用来定义进度条，可以配合JavaScript代码来实现进度条动画效果。

语法： <progress> 属性=“ 属性值 ” > </progress>

<progress>标签的属性有两个：

value ：已经完成的进度条，其值为数字。

max ：全部完成的进度条，其值为数字。

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title> </title>
   </head>
   <body>
<h1>我的工作进度</h1>
<p><progress value="52" max="100"></progress></p>
   </body>
</html>

图示：

2.6.3 <meter>标签

用来定义给定范围内的数据，例如磁盘用量，考试及格率等。显示效果类似与进度条，但不能用来定义进度条。

语法 <meter> 属性 = “ 属性值 ” > < /meter>

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8" />
       <title> </title>
   </head>
   <body>
<h1>学生的成绩列表</h1>
<p>
   小红：<meter value="65" min="0" max="100" low="60" high="80" title="65分" optimum="100">65</meter><br />
   小白：<meter value="80" min="0" max="100" low="60" high="80" title="80分" optimum="100">80</meter>
</p>
   </body>
</html>

图示：

2.7 全局属性

在HTML5中，全局属性时指任何HTML5标签都可以使用的属性。有 draggable，hidden, contenteditable 等。

2.7.1 draggable属性

用来设置页面元素是否可以拖动。该属性有两个值—— true 和 false 。

当draggable属性的值为 true时，表示元素选中之后可以进行拖动操作。

当draggable属性的值为 false时，表示元素选中之后不可以进行拖动操作。

draggable属性的默认值为false。

2.7.2 hidden属性

用来隐藏页面元素，其值为hidden，在HTML5之中可以直接省略该值。

2.7.3 contenteditable属性

用于指定网页内容是否可以编辑。

HTML5 网页设计 基础