项目三： 使用HTML制作网页 掌握HTML常用标签及其属性； 掌握使用HTML制作简单网页的方法。 任务1： HTML5简介 HTML5是最新的HTML标准，它是专门为承载丰富的Web内容而设计的，并且无须额外插件。本任务主要从HTML5概述、优势、特性进行讲解，让读者对HTML5有个初步了解。 1. HTML5概述 HTML5是HTML的最新修订版本。1999年HTML4就停止开发了，直到2008年1月22日HTML5才公布了第一份正式草案。2010年，HTML5开始用于解决实际问题，各大浏览器厂商开始升级自己的产品以支持HTML5的新功能。2014年10月由万维网联盟（W3C）完成标准制定。 对于用户和网站开发者而言，HTML5的问世意义非凡。HTML5实际上指的是包括HTML、CSS样式和JavaScript脚本在内的一整套技术的组合，HTML5能够轻松实现许多的网络应用需求，减少浏览器对插件的依赖，并提供更多能有效增强网络应用的标准集。 2. HTML5的优势 HTML5并不是一种革命性的升级，而是一种规范向习惯的妥协，因此HTML5并不会带给开发者过多的冲击，从HTML4到HTML5的过渡会非常轻松。HTML5的优势主要体现在以下几个方面。 跨平台。目前HTML5技术已日趋成熟，HTML5可以运行在PC端、iOS或Android移动端，只要有一个支持HTML5的浏览器即可运行，例如Firefox（火狐浏览器）、IE 9及其更高版本、Chrome（谷歌浏览器）、Safari、Opera等，国内的傲游浏览器（Maxthon）以及基于IE或Chromium（Chrome的工程版或实验版）的360浏览器、搜狗浏览器、QQ浏览器、猎豹浏览器等。 兼容性。HTML5有很强的向下兼容能力。只要浏览器支持HTML5就能实现各种效果，开发人员不需要再写浏览器判断之类的代码。 3. HTML5的特性 HTML5具有以下特性。 1) 语义特性 HTML5赋予网页更好的意义和结构，能够更恰当地描述网页内容。 2) 增强型表单 HTML5拥有多个新的表单input输入类型。这些新特性提供了更好的输入控制和验证。 3) 视频和音频支持 HTML5提供了播放音频和视频文件的标准，即使用<audio>和<video>标签。 4） 本地存储 HTML5的本地存储功能提供两种方式： 一是keyvalue方式的Local Storage，在IE 8的版本之前，没有Local Storage的环境情况下，localstoragejs用cookie替代； 二是数据库方式的Web SQL Database，JavaScript库Persist JS则可从Gears、Local Storage、Web SQL Database、Global Storage、Flash、IE、cookie等多个存储方式逐一尝试，这样兼容性就能够最大限度地实现。 5) 图形特性 基于SVG、Canvas、WebGL及CSS3的3D功能，用户能在浏览器中体验到惊艳的视觉效果。 6) 地理定位 HTML5 Geolocation（地理定位）可用来定位用户的位置。 任务2： 使用HTML创建网页 本任务主要介绍HTML的基本结构和语法，了解HTML5的doctype类型声明，了解meta元信息标签的主要功能，了解新增的语义化标签。 HTML5的基本结构和语法； HTML5语义化标签。 1. 用HTML制作简单网页 步骤1： 单击“开始”→“所有程序”→“附件”→“记事本”，打开系统自带的“记事本”。 图31在记事本中编辑网页 步骤2： 在此文档中输入如图31所示代码。 步骤3： 输入完成后，选择菜单“文件”→“另存为”，弹出“另存为”对话框，在“文件名”中输入文件名称“firsthtml5.html”，在“保存类型”下拉列表框中选择“所有文件”，在“编码”下拉列表框中选择UTF8，如图32所示，单击“保存”按钮完成设置。 图32保存网页文件 步骤4： 双击firsthtml5.html文件，在浏览器中看到页面效果如图33所示。 图33在浏览器中显示HTML文档效果 2. HTML的语法结构 HTML5的语法结构和HTML4的语法结构基本一致，文档的扩展名不变，仍为.htm或.html。要建立符合标准的网页，doctype声明是必不可少的关键组成部分，doctype是document type(文档类型)的简写，在网页设计中用来说明使用的HTML版本。doctype声明必须在HTML文档的第一行，位于<html>标签之前。<!doctype>声明不是HTML标签，它是指示Web浏览器当前页面是使用哪个HTML版本编写的。在HTML4中有三种<!doctype>声明，在HTML5中只有一种： <!doctype html> 也可以写成： <!DOCTYPE html> HTML文件的基本结构包括以下三部分。 1) <html>…</html> 该标签表示HTML文档的开始和结束。 2) <head>…</head> 该标签定义HTML文档的头部信息。头部元素有<title>、<script>、<style>、<link>、<meta>等。头标记head用于说明文档头部相关信息，一般包括标题信息、元信息、定义CSS样式和脚本代码等。 其中，<title>标记用来说明页面的标题，以<title>开始，以</title>结束，中间为标题内容。它可以帮助用户更好地识别页面。预览网页时，设置的标题在浏览器标题栏中显示，在Windows任务栏中显示的也是这个标题，页面的标题只有一个。 <meta>标签的主要功能是定义页面中的元信息，这些信息不会显示在浏览器中，而只是显示在源代码中。<meta>标签通过属性定义文件信息的名称、内容等，能够提供文档的关键字、作者及描述等多种信息。<meta>标签提供的常用属性及取值如表31所示。 表31<meta>标签提供的常用属性及取值 属性值描述 charsetgbk utf8中文字符集 针对Unicode的可变长度字符编码 namekeywords description网页关键词 网页描述 例如： <!doctype html> <html> <head> <meta charset="UTF-8"> <meta name="keywords" content="网站制作,网站建设,网络推广"> <meta name="description" content="某某网络科技公司致力于网站建设与定制，为企业提供建站、运营、推广一站式服务。"> <title>某某网络科技公司</title> </head> <body> <!--网页正文开始--> … <!--网页正文结束--> </body> </html> 3) <body>…</body> 该标签之间为网页的主体内容和其他用于控制内容显示的标签，如<h1>、<p>、<img>等。在body标签中的内容会在浏览器中显示出来。 4) <!注释的内容>页面注释标记 注释是在HTML中插入的描述性文本，用来解释该代码或提示其他信息。注释只出现在代码中，不显示在浏览器中，浏览器对注释代码不进行解释。在HTML源代码中适当地插入注释语句是一种非常好的习惯，对于设计者日后的代码维护工作很有好处。 3. HTML5语义化标签 1) 什么是HTML语义化标签 语义化标签旨在让标签有自己的含义，例如： <p>一行文字</p> <span>一行文字</span> 以上代码中p标签与span标签的区别是，p标签的含义是段落，而span标签则没有独特的含义，同样地，div标签也是没有独特含义的。 2) 语义化标签的优势 语义化标签可以改变网页布局，提升搜索引擎的友好度，降低使用CSS的难度，因此在书写页面结构时，应尽量使用有语义的HTML标签。下面列举了语义化标签的一些优势。 代码结构清晰，方便阅读，有利于团队合作开发。 方便其他设备（如屏幕阅读器、盲人阅读器、移动设备）解析，以语义的方式来渲染网页。 有利于搜索引擎优化（SEO）。 3) 常见的语义化标签 好的语义化的HTML能够体现页面的结构，在网页中经常见到以下语义化标签。 <title>： 页面主题。 <hn>： h1~h6，分级标题。 <ul>： 无序列表。 <ol>： 有序列表。 <li>： 列表项。 <p>： 段落。 <em>： 将其中的文本表示为强调的内容，表现为斜体。 <strong>： 将其中的文本定义为语气更强的强调内容，表现为加粗。 <img>： 图片。 <table>： 表格。 HTML5新增的语义化标签如表32所示。 表32HTML5新增的部分语义化标签 元素说明 header定义文档的头部区域(页眉) nav定义导航链接的部分 main页面主要内容，一个页面只能使用一次 section定义文档中的节 article定义页面独立的内容区域 aside定义页面的侧边栏内容 footer定义节或文档的页脚 audio定义音频内容 video定义视频内容 canvas定义图形 div定义文档中的分区或节（division/section） 下面对表32中的部分语义化标签作进一步说明。 1) header标签 header标签代表网页或section的页眉，该标签通常用来放置整个页面或页面中一个内容区块的标题，也可以包含节的目录部分、搜索框、nav或相关的logo。 该标签语法为： <header>网页或文章的标题信息</header> 例如： <header> <h1>欢迎光临正曼经贸</h1> </header> 一个页面中的header的个数没有限制，可以为每个内容块增加一个header标签。 2) nav标签 nav标签代表页面的导航链接区域，用于定义页面的主要导航部分。 该标签语法为： <nav>导航内容</nav> 例如： <nav> <ul> <li><ahref="#">公司首页</a></li> <li><ahref="#">产品展示</a></li> <li><ahref="#">联系我们</a></li> </ul> </nav> nav标签用于整个页面的主要导航部分，其他地方如侧边栏目录、面包屑导航、页内导航等尽量不要使用nav标签。 3) section标签 section标签代表文档中的“节”或“段”。“节”可以是指一个页面里的分组； “段”可以是指一篇文章里按照主题的分段。section的主要作用是对页面的内容进行分块或者对文章的内容进行分段。该标签通常用于带有标题和内容的区域，如文章的章节、页眉、页脚或文档中的其他部分。 该标签语法为： <section>文章内容</section> 例如： <section> <h1>正曼经贸</h1> <p>正曼经贸成立于…</p> </section> 4) article标签 article标签定义独立的内容，例如论坛的帖子、博客上的文章、一篇用户的评论等。它比section标签具有更明确的语义，代表一个独立的、完整的相关内容块，其目的是让开发者独立开发或重用。除了内容，它通常还会有标题部分，一般放在一个<header>标签中，有时还有自己的脚注。 该标签语法为： <article>文章内容</article> 例如： <article> <header> <h1>新闻标题</h1> </header> <p>新闻正文内容</p> <footer>新闻版底信息</footer> </article> div、section和article三者容易混淆，注意以下几点。 只有元素内容会被列在文档大纲中时，才适合用section元素。 section的作用是对页面上的内容进行分块(如各个有标题的版块、功能区)或对文章进行分段，不要与有自己完整、独立内容的article混淆。 section和article可以互相嵌套，也就是说它们没有上下级关系，section可以包含article，article也可以包含section。 section和div都可以对内容进行分块，但是section是进行有意义的分块，div是进行无意义的分块，例如用作设置样式的页面容器。 section内部必须有标题，标题也代表了section的意义所在。 article、nav、aside可以理解为特殊的section，所以如果可以用article、nav、aside就不要用section，没有实际意义的就用div。 举个例子： 一份报纸有很多个版块，有头版、国际时事版块、体育版块、娱乐版块、文学版块等，像这种有版块标题的、内容属于一类的版块就可以用section包起来。在各个版块下面又有很多文章、报道，每篇文章都有自己的文章标题、文章内容，这时候用article最好。如果一篇报道太长，分好多段，每段都有自己的小标题，这时候又可以用section把各个段包起来。 5) aside标签 aside标签有两种用途： 一是放在article标签内作为主要内容的附属信息部分，其中的内容一般是与当前文章有关的相关资料、名词解释等； 二是放在article标签之外作为页面或站点全局的附属信息部分，最典型的是侧边栏。 该标签语法为： <aside>附属信息内容</aside> 例如： <aside> <h1>名词解释</h1> <p>术语： 对术语的解释说明</p> </aside> 6) footer标签 footer标签代表网页或section的页脚，通常包括相关区块的脚注信息，如作者、相关文档链接及版权信息。 该标签语法为： <footer>页脚信息内容</footer> 例如： <footer> <ul> <li>版权信息</li> <li>联系方式</li> </ul> </footer> 下面利用表32中的部分语义化标签，建立一个简单的HTML页面。 步骤1： 单击“开始”→“所有程序”→“附件”→“记事本”，打开系统自带的“记事本”。 步骤2： 在此文档中输入如图34所示代码。代码文件的第6行的作用是引入外部样式表文件style1.css，将素材中的style1.css复制到当前网页文件夹下。 图34HTML5语义化标签 步骤3： 输入完成后，选择菜单“文件”→“另存为”，弹出“另存为”对话框，在“文件名”中输入文件名称“html5new.html”，在“保存类型”下拉列表框中选择“所有文件”，在“编码(E)”下拉列表框中选择UTF8，单击“保存”按钮完成设置。 步骤4： 双击html5new.html文件，在浏览器中看到页面效果如图35所示。 图35网页预览效果 语义化标签的综合应用 步骤1： 单击“开始”→“所有程序”→“附件”→“记事本”，打开系统自带的“记事本”。 步骤2： 在此文档中输入如图36所示代码。其中，代码文件的第6行的作用是引入外部样式表文件style2.css。 图36在记事本中编辑语义化标签 步骤3： 输入完成后，选择菜单“文件”→“另存为”，弹出“另存为”对话框，在“文件名”中输入文件名称为“structure.html”，在“保存类型”下拉列表框中选择“所有文件”，在“编码(E)”下拉列表框中选择UTF8，单击“保存”按钮完成设置，并将素材中的style2.css文件放入当前网页文件夹下。 步骤4： 双击structure.html文件，在浏览器中看到页面效果如图37所示。 图37在浏览器中预览语义化标签的效果 任务3： 使用文本控制标签制作网页 文字是网页中最基本的元素，是网页视觉传达最直接的方式，任何网页都不可缺少文字。本任务主要介绍文本格式化标签、分行与分段标签、列表标签等文本控制标签的使用。 HTML5的基础标签的使用； 文本控制标签在页面排版中的应用。 1. 文本格式化标签 在网页中，有时需要为文字设置加粗、倾斜或下画线效果，为此HTML准备了专门的文本格式化标签，使文字以特殊的方式显示。常用的文本格式化标签如表33所示。 表33常用的文本格式化标签 标签显 示 效 果 <b>…</b>和<strong>…</strong>文字以粗体显示（推荐使用strong） <i>…</i>和<em>…</em>文字以斜体显示（推荐使用em） <u>…</u>和<ins>…</ins>文字加下画线显示（推荐使用ins） <s>…</s>和<del>…</del>文字加删除线显示（推荐使用del） 例如： <p>挥泪大甩卖，原价<del>99</del>，现价<ins>9.9</ins>!</p> 2. 分行与分段标签 对于网页而言，视觉信息的传达至关重要。用户通过页面获取信息，虽然网络上信息呈现的方式多种多样，例如文字、图片、声音、视频等，但是依然有超过九成的信息是通过文字来传递的。 良好的文字排版能让阅读成为一件愉悦的事情。对于网页中的大段文字，通常采用分段、分行加空格等方式进行排版。 1) <h1>至<h6>标签 成对标签，该标签用于设置网页中的标题文字，被设置的文字将以黑体或粗体的方式显示在网页中。标题文字标签分为六级，其中，<h1>和</h1>之间的文字是第一级标题，最大最粗； <h6>和</h6>之间的文字是最后一级，最小最细。但其具体大小因浏览器的不同而不同。该标签本身具有换行的作用，标题总是从新的一行开始。 2) <p>…</p>标签 成对标签，将<p>标签置于段落起始处，</p>置于段落结尾，其作用是使标签后面的内容另起一段。 该标签语法为： <p>…</p> 3) <div>…</div>标签 成对标签，该标签可以把文档分割为独立的、不同的部分。它是一个块级元素，也就是说，浏览器通常会在div元素前后放置一个换行符。另外，该标签经常与CSS一起使用，用来布局网页。 4) <span>…</span>标签 成对标签，用于对文档中的行内元素进行组合。该标签没有固定的表现格式。当对它应用样式时，它才会产生视觉上的变化。如果不对它应用样式，那么<span>元素中的文本与其他文本不会有任何视觉上的差异。 该标签语法为： <span>内容</span> 例如： <span style="color:red;font-family: '宋体';font-size: 40px">这是正曼经贸的主页</span> 5) <br>标签 单一标签，其作用是让该标签之后的内容在下一行显示。 该标签语法为： 第一行<br>第二行 6) <hr>标签 单一标签，其作用是添加分隔线，且在页面中占据一行。<hr>标签的align、noshade、size、width属性在HTML5版本中已经不支持，需要修改样式请使用CSS（层叠样式表）。 7) <img>标签 单一标签，该标签从网页上链接图像。它有两个必要的属性： src属性和alt属性，分别规定显示图像的URL和规定图像的替代文本。 3. 列表标签 列表形式在网页设计中占据比较大的比例，它的特点是非常整齐地显示信息，便于用户理解。 1) 符号列表（无序列表） 该列表格式如下： <ul> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> … </ul> 在HTML页面中，合理地使用列表标签，可以起到提纲和格式排序的作用。默认情况下，在网页中创建的项目列表显示为实心小圆点的形式，可以通过ul或li的CSS属性liststyletype来设置其他列表形式。 2) 编号列表（有序列表） 该列表结构中的列表项是有先后顺序的列表形式，从上到下可以有不同的序列编号，例如1、2、3……或是a、b、c…… 该列表格式如下： <ol> <li>列表项一</li> <li>列表项二</li> <li>列表项三</li> … </ol> 3) 定义列表 定义列表形式特别，用法也特别，定义列表中每个标签都是成对出现的，它在网页布局中的应用也非常广泛。 该列表格式如下： <dl> <dt>…</dt> <dd>…</dd> </dl> 标签<dt>…</dt>定义标题，<dd>…</dd>定义内容。该列表格式适用于有主题与内容的两段文字，通常第一段以<dt>标签定义标题，第二段以<dd>标签定义内容。在HTML代码中，<dt>和<dd>标签都是块元素，在网页中占据一整行的空间，如果需要使<dt>与<dd>标签中的内容在一行中显示，就必须使用CSS样式进行控制。 4. HTML特殊字符 浏览网页时经常会看到一些包含特殊字符的文本，如版权信息、商标、数学公式等，如何在网页上显示这些特殊字符呢？ 由于“<”和“>”在HTML中已经作为标签的定界符，如果直接使用，将被浏览器解析为标签符号，出现错误。HTML为这些特殊字符准备了专门的代码，如表34所示。 表34常用特殊字符代码 特 殊 字 符HTML代码特 殊 字 符HTML代码 ""© <<® >>&& ××半角空格 ￥¥TM™ 文本控制标签的综合应用 步骤1： 单击“开始”→“所有程序”→“附件”→“记事本”，打开系统自带的“记事本”。 步骤2： 在此文档中输入如图38所示代码。 图38任务3的HTML代码 小技巧： 输入代码时，有很多是重复的，只要将一个列表项li的代码输入完成，复制粘贴两次，对另外两个li的文字部分进行修改即可。 步骤3： 输入完成后，选择菜单“文件”→“另存为”，弹出“另存为”对话框，在“文件名”中输入文件名称“basictype.html”，在“保存类型”下拉列表框中选择“所有文件”，在“编码(E)”下拉列表框中选择UTF8，单击“保存”按钮完成设置。 步骤4： 双击此文件，在浏览器中看到页面效果如图39所示。 图39任务3预览效果 请学生参照图310所示网页效果图，在记事本程序中输入HTML代码，完成页面的制作。 图310任务拓展网页预览效果 本项目主要对HTML5的基本情况、基本结构和语法进行介绍，让读者了解HTML5的doctype声明类型，元信息标签的主要功能，以及新增的常用元素，并且对常用标签的使用进行介绍，通过实例对常用基础标签进行练习。 1. 常用的结构化标签主要有哪些？分别用来定义什么？ 2. 简述<p>、<br>和<hr>标签在使用上的区别。 3. 元信息标签的常用属性及取值是什么？