初识HTML：简单的Hello World网页制作

绝地灬酷狼 2021-05-16 20:37 559阅读 0赞

### HTML——基础 ###

*  前言
 *   *  任务描述
     *  相关知识
     *   *  HTML基本概念
         *  基本的HTML结构
         *  HTML的标签
         *  HTML的元素
         *  HTML的属性
     *  编程要求
     *  测试说明

# 前言 #

*  HTML(Hypertext Markup Language，超文本标记语言)是一种用于创建Web页面和Web应用的标准化标记语言。
 *  在CSS(Cascading StyleSheets，级联样式表单)和JavaScript的帮助下，HTML已经成功构建了一整套面向Web的开发与应用平台。
 *  自1995年HTML2.0面世，HTML陆续推出了得到广泛应用的HTML3.2和HTML4.0标准，2014年HTML5标准的面世使其在多媒体和移动性方面得到了全面提升，使HTML迎来了新的爆发式发展。

## 任务描述 ##

*  本关的任务是编写一个简单的HTML页面，这个网页包含一个标题和一个段落。显示效果如下：  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]

## 相关知识 ##

*  为了完成你的第一个网页的制作，请大家认真阅读以下内容：

### HTML基本概念 ###

`HTML是一种标准化的标记语⾔，由一套标记标签(markup tag)组成。`Web前端开发人员的一项主要工作就是`利用HTML标签来编写⽹页`，将文本、超链接、图片、语音、视频等各种内容整合起来，实现绚丽多姿的网页。

*下面是大家需要记住的关于HTML的一些基本描述：*

*  HTML标记标签，通常简称HTML标签；
 *  HTML文档，通常简称HTML页面、网页等；
 *  HTML5能够较好的兼容HTML之前版本，但也废弃了一些旧的HTML特性。

### 基本的HTML结构 ###

这是一个最基本HTML页面：

<!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <title>Hello World</title>
        </head>
        <body bgcolor="yellow">
            <h1 align="center">这是一个一级标题</h1>
            <p>这是第1个段落。</p>
            <p>这是第2个段落。</p>
        </body>
    </html>

显示效果如下：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]  
其中：

*  `<html>`、`</html>`，`<body>`，`</body>`，`<h1>`，`<p>`等都是HTML标签；
 *  `<h1>`这是一个一级标题`</h1>`，`<p>`这是第1个段落。`</p>` 等都是HTML元素；
 *  `bgcolor="yellow"`、`align="center"`都是HTML元素的属性。

那么HTML标记和HTML元素，到底有何区别呢？HTML元素的属性又是什么呢？

### HTML的标签 ###

**HTML标签由一对尖括号、标签名，以及反斜杠组成，包括开始标签和结束标签两类：**

*  开始标签的格式：`<标签名>`。
 *  结束标签的格式：`</标签名>`。

因此，

`<html>`，`<head>`，`<p>`等都是开始标签；

`</html>`，`</head>`，`</p>`等都是结束标签。

### HTML的元素 ###

*  HTML元素是由HTML开始标签、元素内容、HTML结束标签，以及各种HTML属性组成的嵌套式HTML内容单元。

*典型的HTML元素的格式：*

<标签名> 元素内容 </标签名>

因此，

*  一个HTML文档，即`<html>...</html>`就是一个最大的HTML元素；
 *  `<head>...</head>`，`<p>...</p>`也都是HTML元素（其中…表示两个标记之间的所有内容）。

### HTML的属性 ###

属性提供了有关HTML元素的更多的信息。  
HTML属性位于开始标签，其基本的结构如下：

<标签名 属性名="属性值"> 元素内容 </标签名>

*下面是关于属性的一些要点：*

*  属性在开始标签中规定；
 *  属性是以名称/值对的形式出现，比如：`name="value"`；
 *  一个标签可以包含多个属性；
 *  HTML属性不会展现到网页上。

本例中，bgcolor属性代表主体(body)部分的颜色；align属性代表对齐方向，其值有：

<table> 
 <thead> 
  <tr> 
   <th>align属性值</th> 
   <th>含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>center</td> 
   <td>居中对齐</td> 
  </tr> 
  <tr> 
   <td>right</td> 
   <td>右对齐</td> 
  </tr> 
  <tr> 
   <td>left</td> 
   <td>左对齐</td> 
  </tr> 
 </tbody> 
</table>

提示：

*  属性使用小写英文字母更加符合规范；
 *  属性值可以用双引号或单引号包含，例如：
 *  title=’ 他说"你好" ’  
    **这种情况，属性值如果包含双引号，那么最外层就用单引号。**

我们还会用到一些常用的属性，如下表所示：

<table> 
 <thead> 
  <tr> 
   <th>属性</th> 
   <th>值 /含义</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>class</td> 
   <td>自定义的元素类名 / 元素的类名</td> 
  </tr> 
  <tr> 
   <td>id</td> 
   <td>自定义的元素id名 / 元素的唯一的id</td> 
  </tr> 
  <tr> 
   <td>style</td> 
   <td>元素内联样式 / 元素的样式</td> 
  </tr> 
  <tr> 
   <td>title</td> 
   <td>额外信息内容 / 元素的额外信息</td> 
  </tr> 
 </tbody> 
</table>

在之后的任务中，我就会学习到以上属性。

## 编程要求 ##

请在右侧的编辑器中的Begin - End区域内直接编辑修改HTML页面，具体要求是：

*  在`<h1></h1>`标签之间输入`”Hello World”`；
 *  在`<p></p>`标签之间输入`”动手改变世界”`；
 *  在`<h1>`和`<p>`元素的开始标签中输入`align="center"`；
 *  再在`<body>`开始标签中输入`bgcolor="F6F3D6"`，将背景设置为浅黄色。

## 测试说明 ##

补充完代码后，点击测评，平台会对你编写的代码进行测试，当你的结果与预期输出一致时，即为通过；

*  为了不让生活留下遗憾和后悔，我们应该尽可能地抓住一切改变生活的机会。

**代码文件：**

<!DOCTYPE html>
    <html>
      <head>
        <meta charset="utf-8">
        <title>Hello world</title>
      </head>  
        
    
      <body bgcolor="F6F3D6">
        
        <h1 align="center">Hello World</h1>
        <p align="center">动手改变世界</p>
      </body>
        
    
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70]: /images/20210516/2f6d8d4d23514789baf0b25078aa0aec.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQ1ODIzMTE4_size_16_color_FFFFFF_t_70 1]: /images/20210516/31cae2a0dc894450a3e0e6e940c11992.png