Educoder/头歌JAVA——HTML:基本标签

第1关:创建第一个 HTML 标签

Educoder/头歌JAVA——HTML:基本标签_第1张图片

相关知识

welcome

上面这行代码它表示一个HTML元素

大多数 HTML 元素都是由开始标签结束标签组成的,通常成对出现 。

开始标签:用尖括号<>包裹关键词,像

这样。 结束标签:用包裹和开始标签一样的关键词,像

这样。

可以发现: 结束标签就比开始标签多了一个斜杠/




    


    

Hello

welcome to Educoder

 第2关:创建

-

标签



    


    

创建不同字体大小的标题

创建不同字体大小的标题

创建不同字体大小的标题

创建不同字体大小的标题

创建不同字体大小的标题
创建不同字体大小的标题

第3关:创建 p 标签

相关知识

p元素通常用来表示一个段落。

你可以这样创建一个p标签,

p标签表示一个段落。




    


    
    
        

我是一个段落

第4关:创建 a 标签

任务描述

本关任务:创建一个a标签, 跳转的地址是https://www.educoder.net,文本内容是Educoder平台

相关知识

a标签通常用来定义一个链接。href属性的值就是链接的地址。

你可以这样创建一个a标签,百度。当你点击这个链接时,它就会跳转到百度首页。

编程要求

请仔细阅读右侧代码,结合相关知识,在 Begin-End 区域内进行代码补充,完成第一个a标签, 跳转的地址是https://www.educoder.net,文本内容是Educoder平台的创建任务。




    


    

    Educoder平台

    

第5关:创建 img 标签

相关知识

img标签通常用来表示一个图片。src属性的值就是图片的地址,alt属性的值是当图片没有展现出来时提示的文字 。

你可以这样创建一个img标签,

这样图片就显示出来了。效果如下所示:

Educoder/头歌JAVA——HTML:基本标签_第2张图片

当图片没有展示出来时,或者图片地址是错的,就会显示提示文字。效果如下所示:

Educoder/头歌JAVA——HTML:基本标签_第3张图片

注意:img标签是以/>结尾的, 不是 结尾的。

编程要求

请仔细阅读右侧代码,结合相关知识,在 Begin-End 区域内进行代码补充,完成第一个标签img标签, 图片的地址是https://www.educoder.net/attachments/download/207801,提示文字是小狗走路的创建任务。




    


    

    小狗走路

    


 第6关:创建 div 标签

相关知识

div标签可以把文档分割为独立的、不同的部分。它没有实际的意义,仅仅表示创建了一个块级元素。

你可以这样创建一个div标签,

创建div标签

可以发现:它和

-

标签的创建是一样的,只不过它没有实际的意义。

Educoder/头歌JAVA——HTML:基本标签_第4张图片




    


    

我是h2标签

我是p标签

我是div标签

 第7关:添加注释

相关知识

什么是注释? 为什么要添加注释呢?

注释是解释性文本,在运行程序时,会被程序跳过,不做处理。

注释有两个作用:

  • 可以给代码添加文字说明,便于代码阅读和日后维护;
  • 对于暂时不用但又不能删除的代码,可以添加注释保存下来;

如何添加注释呢?

表示注释的结束,这样就可以添加提示说明和注释元素了。

你可以这样注释p标签和添加文字说明。

Educoder/头歌JAVA——HTML:基本标签_第5张图片

你可能感兴趣的:(html,前端,css)