回到Hello World!
回到Hello World!
html文件的组成
标记
我们回看目前为止的页面代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
你一定可以注意到非常奇特的<body> .... </body>的写法，这在HTML里被称为标记/标签（tag），有时候也会称为元素（element），有时候我也会直接称之为块。
显然标记需要一个开始标记，也就是<body>，当然也需要一个结束标记，就是</body>。这就像左括号和右括号的关系。开始和结束之间的部分成为标记的内容。
开始标记、标记内容和结束标记共同构成了一个完整的标记。也就是说这里的body标记应当是：
<body>
<h1>Hello World!</h1>
</body>
这一个完整的块。
显然标记是可以嵌套的，h1标记就嵌套在body标记内，如果排除一开始的<!DOCTYPE html>，那么整个html文件可以被视为一个html标记。嵌套关系如下图： 
或者用树状结构来表示：
我们可以看到html里包含了两个标记，head和body，更进一步你会发现：
- 这是模板自动帮我们生成的
- 如果你分析（记得吗？用哪个键？）网上的各种页面，你会发现都是这样布局的。
一般来说head块用来对页面进行一些配置，换句话说，这个块是给浏览器而不是给人看的。这里的块通常不出现在页面中。
改一改
把title的内容改一改试试
哪里发生了变化？这个内容算页面里吗？
body标记里的内容才是给观众看的，就像我们这里放置的h1标记。
这些标记就像你手里的乐高玩具一样，通过他们你可以拼接出非常酷炫的页面——你一定这么想，并且迫不及待地想知道有哪些标记可以用。
但实际上并非如此，或者说并不完全如此。本节课我们先介绍几个非常常用的标记
常见的标记
这里的标记，请动手尝试，记住计算机是一门实践性学科。
h1~h6 标记
h 是header的缩写，也就是标题。1~6分别是对应的标题号，1号最大，6号最小。 标题一般显示为黑色，黑体，并且加粗。
p 标记
用来对内容分段，段和段之间会有明显的间隔。
img 标记
用来贴图，例如：
<img src="1.jpg">
把1.jpg文件放入index.html的同一个目录，就可以看到图片被显示到页面中。
注意html——准确的说是浏览器支持绝大多数常见的图片格式，不必你做额外的处理。
a 标记
a标记一般用来放置超链接，例如你要外链到百度，你应该这样写：
<a href="https://www.baidu.com/">点击跳转百度</a>
注意区分跳转的链接和页面显示的内容。
超链接也可以跳转到本地的页面，此时不需要（或者说，不推荐）给出完整的http://xxxxx路径，只给出本地页面名即可。
在index.html同级目录创建1.html，并修改其内容以作区分。
试试一下的超链接：
<a href="1.html">跳转到本地</a>
属性
你应该注意到了img和a标记与h1和p标记有很大的不同。他们的开始标记都有一些额外的内容。
比如img里，多了src="1.jpg"，a里多了href="..."。
这里src和a称为标记的属性。所谓属性，就是用来给出标记的额外信息的，我们用=给出属性对应的值。
例如src="1.jpg"表示img标记对应的src属性的值是1.jpg。
而href="https://www.baidu.com/"表示这个链接要跳转的是https://www.baidu.com/这个地址。
思考一下
怎么做出点击图片跳转的效果？
更进一步
你知道img和a还有什么其他的属性吗？自己找找看。
再再思考
大小写影响属性生效吗？ 标签名呢？
无内容标记
从上面的代码和标记的介绍里，我们可以看到有一些标记是没有结束标记的。比如：
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
再比如：img标记，也是没有结束标记的。
这是因为这些标记都不含标记内容，也就是说你可以把img标记看成<img src="1.jpg"></img>。
对这类标记都可以去掉结束标记，只写开始标记就行。
你知道吗？
<br>这个空标记是干什么的？