WEB HTML5 DAY01
1 创建 HTML 文档片段
1.1 问题
创建一个HTML 文档，并使用 HTML 代码编写内容，实现如图－1所示的效果：
图－1
其中，当鼠标移入段落行“标准属性“上时，会出现图－1中所示的提示信息。
1.2 方案
图－1中，第一个段落中，有粗体文本、斜体文本以及粗体加斜体的文本，因此，需要使用元素嵌套来实现。此时，需要注意元素的嵌套顺序。
图中的第二个段落，其文本居中显示，因此需要为段落元素添加 align 属性来修饰元素，并设置该属性的值为 center。
上述代码中，<p> 元素拥有 align 属性，且该属性的值为 center，实现段落中的文本居中显示的效果。
如果需要为元素添加提示信息，可以为元素定义 title 属性。
1.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
首先创建一个纯文本文件，并修改名称为 Day01_demo01.html；
步骤二：创建段落
使用文本编辑工具，打开上一步中所创建的文件。
在此文件中，添加 <p> 元素，创建段落，并在<p>元素中嵌套 <b>和<i>元素，实现图－1中第一个段落的文本效果。代码如下所示：
<!--元素以及元素嵌套--> <p>段落中的<b>粗体文本</b>，<i>斜体文本</i>，以及<b><i>粗体及斜体文本</i></b></p>
步骤三：设置属性
继续添加段落，并使用 align 属性设置文本居中对齐，使用 title 属性设置提示文本。代码如下所示：
<!--元素以及元素嵌套--> <p>段落中的<b>粗体文本</b>，<i>斜体文本</i>，以及<b><i>粗体及斜体文本</i></b></p> #cold_bold<!--元素的属性和值--> #cold_bold<p align="center">居中对齐的文本</p> #cold_bold<!--标准属性--> #cold_bold<p title="段落的提示">标准属性</p> #cold_bold<b title="文本的提示">加粗文本</b>
1.4 完整代码
本案例的完整代码如下所示：
<!--元素以及元素嵌套--> <p>段落中的<b>粗体文本</b>，<i>斜体文本</i>，以及<b><i>粗体及斜体文本</i></b></p> <!--元素的属性和值--> <p align="center">居中对齐的文本</p> <!--标准属性--> <p title="段落的提示">标准属性</p> <b title="文本的提示">加粗文本</b>
2 创建 HTML 文档并设置头元素
2.1 问题
创建一个标准格式的HTML 文档，实现如图－2所示的效果：
图－2
另外，需要为页面设置编码格式为 utf-8，并设置关键字为html、css和js。
2.2 方案
使用HTML编写网页文档时，首先需要在文档的开始添加文档类型声明。
目前，建议使用 HTML5 的类型声明，其声明为：
<!DOCTYPE HTML>
除了文档类型信息，剩下的就是整个页面的内容。HTML 文档的整个页面需要包含在开始标记 <html> 和结束标记 </html> 之间。在 <html> 元素中，包含两个主要的部分，文件头部分（<head>元素）和主体部分（<body>元素）。代码如下所示：
<html> <head> </head> <body> </body> </html>
<head> 元素用于为页面定义全局信息，作为所有其他头元素的容器，紧跟在起始标签 <html> 之后。在 <head> 元素中，可以包含 <title> 元素，用于添加页面标题；还可以包含<meta> 元素，用于定义网页的基本信息，比如编码格式，搜索关键字等。
2.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
首先创建一个纯文本文件，并修改名称为 Day01_demo02.html；
步骤二：创建 html 文档的结构
使用文本编辑工具，打开上一步中所创建的文件。
在此文件中，添加 HTML 代码，以创建一个标准结构的 HTML 文档，代码如下所示：
<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>
步骤三：设置头部内容
为 <head> 元素添加内容，为创建的 HTML 文档添加文档标题，并设置文档的编码格式以及关键字。代码如下所示：
<!DOCTYPE HTML> <html> <head> #cold_bold<title>第一个 HTML 文档</title> #cold_bold<meta http-equiv="content-type" content="text/html;charset=utf-8" /> #cold_bold<meta name="keywords" content="HTML,CSS,JS" /> </head> <body> </body> </html>
步骤四：添加页面主体内容
为 <body> 元素添加内容，添加 <p> 元素创建段落，并使用 title 属性设置提示信息。代码如下所示：
<!DOCTYPE HTML> <html> <head> <title>第一个 HTML 文档</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content="HTML,CSS,JS" /> </head> <body> #cold_bold <p title="标准结构的HTML文档">我的第一个文档</p> </body> </html>
2.4 完整代码
本案例的完整代码如下所示：
<!DOCTYPE HTML> <html> <head> <title>第一个 HTML 文档</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content="HTML,CSS,JS" /> </head> <body> <p title="标准结构的HTML文档">我的第一个文档</p> </body> </html>
3 使用文本标记为 HTML 页面添加内容
3.1 问题
创建 HTML 文档，实现如图－3所示的页面效果：
图－3
3.2 方案
图－3所示的页面中，文本“HTML5 <Day01>”为一级标题，使用 <h1> 元素创建，并设置 align 属性实现文本居中。其中，特殊字符部分（如 < 和 >）需要使用字符实体来替代，而红色文本需要使用 <span> 元素标识出来，并添加样式。代码如下：
<h1 align="center">
HTML5 <span style="color:Red;"><Day01></span>
</h1>
文本“1 HTML 文档片段”为二级标题，使用 <h2> 元素创建；文本“1.1 问题”、 “1.2 方案”和“1.3 实现”为三级标题，使用 <h3> 元素创建。其中，一个空格的文本，可以直接使用空格，或者使用字符实体 。代码如下所示：
<h2>1 HTML 文档片段</h2> <h3>1.1 问题</h3>
其他文本使用段落元素 <p> 创建。
页面上最后的代码显示部分，可以使用 <pre> 元素创建，这样可以保持文本在编辑时的样式，实现代码的排版。
3.3 步骤
实现此案例需要按照如下步骤进行。
步骤一：创建文件
首先创建一个纯文本文件，并修改名称为 Day01_doc.html；
步骤二：创建 html 文档的结构
使用文本编辑工具，打开上一步中所创建的文件。
在此文件中，添加 HTML 代码，以创建一个标准结构的 HTML 文档，代码如下所示：
<!DOCTYPE HTML> <html> <head> </head> <body> </body> </html>
步骤三：设置头部内容
为 <head> 元素添加内容，为创建的 HTML 文档添加文档标题，并设置文档的编码格式以及关键字。代码如下所示：
<!DOCTYPE HTML> <html> <head> #cold_bold<title>第二个 HTML 文档</title> #cold_bold<meta http-equiv="content-type" content="text/html;charset=utf-8" /> #cold_bold<meta name="keywords" content="HTML,CSS,JS" /> </head> <body> </body> </html>
步骤四：创建第一行文本
在 <body> 元素中，使用<h1> 元素创建第一行文本。代码如下所示：
<!DOCTYPE HTML> <html> <head> <title>第二个 HTML 文档</title> <meta http-equiv="content-type" content="text/html;charset=utf-8" /> <meta name="keywords" content="HTML,CSS,JS" /> </head> <body> #cold_bold<h1 align="center"> #cold_bold HTML5 <span style="color:Red;"><Day01></span> #cold_bold</h1> </body> </html>
步骤五：创建其他行文本
使用 <hr> 元素在页面上添加分隔线，并继续使用 <h2>、<h3> 和 <p> 元素创建其他行文本，代码如下所示：
<!DOCTYPE HTML>
<html>
<head>
<title>第二个 HTML 文档</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="HTML,CSS,JS" />
</head>
<body>
<h1 align="center">
HTML5 <span style="color:Red;"><Day01></span>
</h1>
#cold_bold<hr />
#cold_bold<h2>1 HTML 文档片段</h2>
#cold_bold<h3>1.1 问题</h3>
#cold_bold<p>创建如图－1所示的 HTML 页面：</p>
#cold_bold<h3>1.2 方案</h3>
#cold_bold<p>使用 HTML 标记来完成该页面效果。</p>
#cold_bold<h3>1.3 实现</h3>
#cold_bold<p>建立一个文本文件，并修改文件名称为 first.html ，然后使用文本编辑器打开该文件，并为该文件添加代码，以创建标准格式的 HTML 文档。</p>
#cold_bold<p>然后，在 body 元素中添加代码，以创建居中显示的段落文本。代码如下所示：</p>
</body>
</html>
步骤六：使用 <pre> 元素创建代码排版部分
使用 <pre> 元素创建代码排版部分，并注意特殊字符的处理。代码如下所示：
<!DOCTYPE HTML>
<html>
<head>
<title>第二个 HTML 文档</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="HTML,CSS,JS" />
</head>
<body>
<h1 align="center">
HTML5 <span style="color:Red;"><Day01></span>
</h1>
<hr />
<h2>1 HTML 文档片段</h2>
<h3>1.1 问题</h3>
<p>创建如图－1所示的 HTML 页面：</p>
<h3>1.2 方案</h3>
<p>使用 HTML 标记来完成该页面效果。</p>
<h3>1.3 实现</h3>
<p>建立一个文本文件，并修改文件名称为 first.html ，然后使用文本编辑器打开该文件，并为该文件添加代码，以创建标准格式的 HTML 文档。</p>
<p>然后，在 body 元素中添加代码，以创建居中显示的段落文本。代码如下所示：</p>
#cold_bold<pre>
#cold_bold<p align="center" title="段落">
#cold_bold 居中显示的段落。
#cold_bold</p>
#cold_bold</pre>
</body>
</html>
3.4 完整代码
本案例的完整代码如下所示：
<!DOCTYPE HTML>
<html>
<head>
<title>第二个 HTML 文档</title>
<meta http-equiv="content-type" content="text/html;charset=utf-8" />
<meta name="keywords" content="HTML,CSS,JS" />
</head>
<body>
<h1 align="center">
HTML5 <span style="color:Red;"><Day01></span>
</h1>
<hr />
<h2>1 HTML 文档片段</h2>
<h3>1.1 问题</h3>
<p>创建如图－1所示的 HTML 页面：</p>
<h3>1.2 方案</h3>
<p>使用 HTML 标记来完成该页面效果。</p>
<h3>1.3 实现</h3>
<p>建立一个文本文件，并修改文件名称为 first.html ，然后使用文本编辑器打开该文件，并为该文件添加代码，以创建标准格式的 HTML 文档。</p>
<p>然后，在 body 元素中添加代码，以创建居中显示的段落文本。代码如下所示：</p>
<pre>
<p align="center" title="段落">
居中显示的段落。
</p>
</pre>
</body>
</html>