码迷,mamicode.com
首页 > Web开发 > 详细

Codecademy - Learn HTML

时间:2019-12-22 14:55:34      阅读:137      评论:0      收藏:0      [点我收藏+]

标签:文档   列表项   括号   idt   意思   str   roman   doc   course   

整合Codecademy上学习HTML的任务以及答案:

 

1.初识HTML:hypertext markup language 怎么理解?

2.HTML的语言规范是什么?

技术图片

3.文档开头的

<!DOCTYPE html>

<html>

</html>

是干什么的?

4.<div><h1><p>都代表什么意思?为什么需要<div>?

5.什么叫标签的属性?我们最常用的属性是什么?


小练习:大家可以把这段代码复制粘贴到一个新的文件里,然后根据任务来做,任务在代码下面

<body>
  <h1>The Brown Bear</h1>
  <div id="introduction">
    <h2>About Brown Bears</h2>
    <h3>Species</h3>
    <h3>Features</h3>
    <p>“Brown bears are not always completely brown. Some can be reddish or yellowish. They have very large, curved claws and huge paws. Male brown bears are often 30% larger than female brown bears. They can range from 5 feet to 9 feet from head to toe.”</p>
  </div>
  <div id="habitat">
    <h2>Habitat</h2>
    <h3>Countries with Large Brown Bear Populations</h3>
    <h3>Countries with Small Brown Bear Populations</h3>
    <p>
      “Some countries with smaller brown bear populations include Armenia, Belarus, Bulgaria, China, Finland, France, Greece, India, Japan, Nepal, Poland, Romania, Slovenia, Turkmenistan, and Uzbekistan.”</p>
  </div>
  <div id= "media">
    <h2>Media</h2>
  </div>
</body>

 

任务:记得在每一步做完后刷新界面看看效果

1.在About Brown Bear标签下面添加一段话,使用<p>标签

“The brown bear (Ursus arctos) is native to parts of northern Eurasia and North America. Its conservation status is currently Least Concern. There are many subspecies within the brown bear species, including the Atlas bear and the Himalayan brown bear.”

2.插入上面的话后给括号内的Ursus arctos使用<em>强调标签,给第二句话结尾的Least Concern使用<strong>加粗标签

3.在刚加上加粗标签的Least Concern后面加两个换行符<br>

4.在<h3>Species</h3>下面加入一个无序列表(<ul>)

5.在无需列表中加入四个列表项:(使用<li>)

Arctos

Collarus

Horribilis

Nelsoni (extinct)

6.在<h3>Countries with Large Brown Bears Populations</h3>下面加入一个有序列表(<ol>):

7.在有序列表中加入四个列表项:(使用<li>)

Russia

United States

Canada
8.找到media标签,为其中的图片添加链接:

https://s3.amazonaws.com/codecademy-content/courses/web-101/web101-image_brownbear.jpg

9.给这张图片添加合适的alt属性进行说明

10.在图片标签下增加一个视频,使用<video>,添加链接:

https://s3.amazonaws.com/codecademy-content/courses/freelance-1/unit-1/lesson-2/htmlcss1-vid_brown-bear.mp4

11.设置宽320,高240,且可被操控

12.在video标签内输入“不支持的视频格式”,防止视频未正确展示

 


 

 

Codecademy - Learn HTML

标签:文档   列表项   括号   idt   意思   str   roman   doc   course   

原文地址:https://www.cnblogs.com/exigeslover/p/12079468.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!