1.1 HTML 基础

向 HTML 元素问好

HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。首先，使用 HTML 来制作一个简单的网页，可以直接在网页内置的代码编辑器中编辑代码。

大部分 HTML 元素都有一个开始标记和一个结束标记。

开始标记像这样：< h1 >

结束标记像这样：< /h1 >

开始标记和结束标记的唯一区别就是结束标记多了一个 / 。

<h1>Hello</h1>

<br> <!--换行符-->

用 h2 元素代表副标题

引入h2元素
这些元素用来告诉浏览器，网站的结构是什么样子。h1元素通常被用作主标题，h2元素通常被用作副标题，还有h3、h4、h5、h6元素，它们分别用作不同级别的标题。

<h1>Hello World</h1>
<h2>Hello World</h2>

用 p 元素代表段落

p是paragraph的缩写，通常被用来创建一个段落，就和你写作文一样。

<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
<p>Hello Paragraph</p>

用占位符文本填充空白

Web 开发者通常用lorem ipsum text来做占位符，占位符就是占着位置的一些文字，没有实际意义。

为什么叫lorem ipsum text呢?是因为lorem ipsum是古罗马西塞罗谚语的前两个单词。

从公元16世纪开始lorem ipsum text就被当做占位符了，这种传统延续到了互联网时代。

<h1>Hello World</h1>

<h2>CatPhotoApp</h2>

<p>Monkey code lorem ipsum text </p>

去除 HTML 的注释

注释的作用是给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。

注释也可以用来在不删除代码的前提下，让代码不起作用。

在 HTML 中，注释的开始标记是  <!--，结束标记是-->

给 HTML 添加注释

记住：注释的开始标记是<!--，结束标记是-->。

删除 HTML 元素

手机的屏幕空间是有限的。

让我们删除不必要的元素，开始设计我们的CatPhotoApp

HTML5 元素介绍

HTML5 引入了很多更具描述性的 HTML 元素，例如：header、footer、nav、video、article、section等等。

这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。

main元素让搜索引擎和开发者瞬间就能找到网页的主要内容。

提示：在后面的应用无障碍课程中我们会接触到更多新的 HTML5 元素，以及明白它们的用处。

<h2>猫咪</h2>

<main>
<p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>

<p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
</main>

给网站添加图片

用img元素来为你的网站添加图片，其中src属性指向一个图片的地址

例如：

<img src="https://www.your-image-source.com/your-image.jpg">

注意：img元素是没有结束标记的。

所有的img元素必须有alt属性，alt属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。

注意：如果图片是纯装饰性的，用一个空的alt是最佳实践。
理想情况下，alt属性不应该包含特殊字符，除非需要。

让我们给上面例子的img添加alt属性。

<img src="https://www.your-image-source.com/your-image.jpg" alt="作者站在沙滩上竖起两个大拇指">

<img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="smallCat">
<h2>CatPhotoApp</h2>
<main>
  
  
  <p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
  <p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
</main>

用锚点实现网页间的跳转

你可以用a锚点（Anchor，简写 a）来实现网页间的跳转。

锚点需要一个href属性指向目的地，它还需要有锚点文本，

例如：

<a href="https://freecodecamp.one">传送至 freecodecamp.one</a>

然后你的浏览器会显示一个可以点击的文本，点击该文本就会跳转到

https://freecodecamp.one

<h2>CatPhotoApp</h2>
<main>
  
  
  
  <img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫">



  <p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
  <p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>

    <a href="http://freecatphotoapp.com ">  cat photos</a>
</main>

用锚点实现网页内部跳转

锚点同样也可以用来在网页内不同区域的跳转。

设置锚点的href属性值为井号#加上想跳转区域对应的id属性值，这样就可以创建一个内部跳转。id是用来描述网页元素的一个属性，它的值在整个页面中唯一。

下面是用来创建内部锚点的例子：

<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>

当用户点击了Contacts链接，页面就会跳转到网页的Contacts区域

页面中应该只有一个锚点。
页面中应该只有一个footer元素。
锚点的href属性应为 “#footer”。
锚点不应该有target属性。
锚点的文本应为Jump to Bottom。
footer元素的id属性应为 “footer”。

<h2>CatPhotoApp</h2>
<main>
  
  <a href="#footer"> Jump to Bottom</a>
  
  <img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫">
  
  <p>在大家心目中，猫是慵懒和可爱的化身，。</p>
  <p>养猫有的时候，就是介于爱与恨之间，。</p>
  
</main>
  
<footer id="footer">Copyright cat photo App</footer>

将锚点嵌套在段落中

你可以在其他文本元素内嵌套链接。

<p>
Here's a <a target="_blank" href="http://freecodecamp.one"> link to freecodecamp.one</a> for you to follow.
</p>

让我们来分解这个例子：

通常，文本是被包裹在p段落内：
<p> Here's a ... for you to follow. </p>

接下来是anchor锚点<a>（需要结束标记 </a>）:
<a> ... </a>

target是锚点的一个属性，它指定了会以什么方式来打开链接，属性值 "_blank" 的意思是链接会在新元素页打开。

href是锚点的另一个属性：它指定了链接的 URL 地址：
<a href="http://freecodecamp.one"> ... </a>

锚点元素内的文本："link to freecodecamp.one"，会显示为一个可以点击的链接：
<a href=" ... ">link to freecodecamp.one</a>

现在用一个新的段落来包裹现存的锚点（必须放在main元素之后才行)。新段落的文本为：View more cat photos，其中 “cat photos” 是一个链接，其他是纯文本。

你需要一个指向 “http://freecatphotoapp.com” 的锚点。
锚点的文本应为：cat photos。
在锚点的外部创建一个新段落，这样页面就有3个段落了。
锚点应嵌套在新段落内。
段落应该包含文本 View more （记得 more 后面有一个空格）。
锚点不应该包含文本 View more 。
确保每个段落有结束标记。
确保每个段落有结束标记。

<h2>CatPhotoApp</h2>
<main>
  
  <a href="http://freecatphotoapp.com" target="_blank">猫图</a>
  
  <img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫">
  
  <p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
  <p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>

<p>
View more <a target="_blank" href="http://freecatphotoapp.com"> cat photos </a>
</p>
<!--target是锚点的一个属性，它指定了会以什么方式来打开链接，属性值 "_blank" 的意思是链接会在新元素页打开-->
</main>

用 # 号来创建固定链接

有时你想为网站添加一个锚点，但如果你还不确定要将它链接到哪儿，这时可以使用固定链接。

在后面的课程中我们会学到：如何轻松通过JavaScript更改链接指向的地址。

href属性的当前值是指向 “http://freecatphotoapp.com”，将href属性的值替换为#，也称为井号，就可以创建固定链接。
例如: href="#"

<h2>CatPhotoApp</h2>
<main>
  <p>点击这里可以获取更多<a href="#" target="_blank">猫图</a>。</p>
  
  <img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫">
  
  <p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
  <p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
</main>

给图片添加链接

你可以通过把元素嵌套进锚点里使其变成一个链接。

把你的图片嵌套进锚点。举例如下：

<a href="#"><img src="http://cdn.chenzhicheng.com/running-cats.jpg" alt="三只萌萌的小猫"></a>

把锚点的href属性设置为#，就可以创建固定链接。

把现存的图片嵌套进锚点中。
当鼠标悬停在图片上时，鼠标的光标如果从箭头指针变成手形指针，那么此时图片就是一个链接了。

<h2>CatPhotoApp</h2>
<main>
  
  <a href="#"> <img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
  <p>养猫有的时候，就是介于爱与恨之间，当你钦羡别人萌宠这么可爱的时候，你一定没有想过，猫咪会到处掉毛，甚至会屯老鼠，啃鞋子，用爪子爬门，你不理它，它就挠你，你要对它发脾气，它会比你更来劲。所以，猫咪慎入，没有一定的准备，切勿随便去侍养动物。它们一旦认定你了，你就是它们的主人，如果你抛弃它们，它们必定心中重创。</p>
</main>

创建一个无序列表

HTML 有一个特定的元素用于创建无序列表unordered lists（缩写 ul）。

无序列表以<ul>开始，中间包含一个或多个<li>元素，最后以</ul>结尾。

例如: 
<ul>
  <li>牛奶</li>
  <li>奶酪</li>
</ul>

将会创建一个包含牛奶和奶酪的无序列表

删除页面底部的两个p元素，然后在底部创建一个无序列表，其中包含猫咪最喜欢的三件东西。

<h2>CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
<ul>
  <li>猫主人</li>
  <li>小鱼</li>
  <li>胡须</li>
</ul>
</main>

创建一个有序列表

HTML 有一个特定的元素用于创建有序列表ordered lists（缩写 ol）。

有序列表以<ol>开始，中间包含一个或多个<li>元素，最后以</ol>结尾。

例如:

    <ol>
      <li>加菲猫</li>
      <li>哆啦A梦</li>
    </ol>

将会创建一个包含加菲猫和哆啦A梦的有序列表。

创建一个有序列表，内容是猫咪最讨厌的三件东西。

<h2>CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
   <ol>
    <li>咖啡</li>
    <li>辣条</li>
    <li>电脑</li>
  </ol> 
</main>

创建一个输入框

现在让我们来创建一个form表单。

input输入框可以让你轻松获得用户的输入。

你可以像这样创建一个文本输入框：

<input type="text">

注意：input输入框是没有结束标记的。

在列表下面创建一个type属性为text的input输入框。

<h2>CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
    <input type="text">
  </ol>
  
  
</main>

给输入框添加占位符文本

Placeholder占位符是用户在input输入框中输入任何东西前的预定义文本。

你可以像这样创建一个占位符：

<input type="text" placeholder="this is placeholder text">

把input输入框的placeholder占位符文本设置为 “猫咪图片地址”。

<h2>CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  <input type="text" placeholder="猫咪图片地址">
</main>

创建一个表单

通过给form表单添加一个action属性，你可以使用纯 HTML 来构建向服务器提交数据的 Web 表单。

例如:

<form action="/url-where-you-want-to-submit-form-data"></form>

在input输入框外层创建一个form表单，然后设置表单的action属性为"/submit-cat-photo"。

<h2>CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  <form action="/submit-cat-photo">
  <input type="text" placeholder="猫咪图片地址">
  </form>
</main>

给表单添加提交按钮

让我们来给表单添加一个submit提交按钮，当点击提交按钮时，表单中的数据将会被发送到action属性指定的地址上。

例如：

<button type="submit">this button submits the form</button>

在表单的底部创建一个button按钮，按钮的type属性值为submit，文本为提交。

<h2>CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  <form action="/submit-cat-photo">
    <input type="text" placeholder="猫咪图片地址">
    <button type="submit">提交</button>
  </form>
</main>

给表单添加一个必填字段

当你设计表单时，你可以指定某些字段为必填项(required)，只有当用户填写了该字段后，才可以提交表单。

如果你想把文本输入框设置为必填项，在input元素中加上required属性就可以了，例如：

<input type="text" required>

确保input元素中有required属性，否则无法提交表单。
试试输入框不填写任何文本，直接点击Submit按钮提交表单，看看浏览器是如何提示的。

<h2>CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  <form action="/submit-cat-photo">
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>
  </form>
</main>

创建一组单选按钮

radio buttons（单选按钮）就好比单项选择题，正确答案只有一个。

单选按钮只是input输入框的一种类型。

每一个单选按钮都应该嵌套在它自己的label（标签）元素中。

所有关联的单选按钮应该拥有相同的name属性。

下面是一个单选按钮的例子：

<label>
  <input type="radio" name="indoor-outdoor">Indoor
</label>

最佳实践是在label元素上设置for属性，让其值与单选按钮的id属性值相等，这样就在label元素和它的子元素单选按钮之间创建了一种链接关系。例如：

<label for="indoor">
  <input id="indoor" type="radio" name="indoor-outdoor">Indoor
</label>

<h2>CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  <form action="/submit-cat-photo">
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>

    <label for="indoor">
      <input id="indoor" type="radio" name="indoor-outdoor">Indoor
    </label>
    <label for="outdoor">
      <input id="outdoor" type="radio" name="indoor-outdoor">Outdoor
    </label>
  </form>
</main>

创建一组复选框

checkboxes（复选框）就好比多项选择题，正确答案有多个。

复选框是input输入框的另一种类型。

每一个复选框都应该嵌套在它自己的label（标签）元素中。

所有关联的复选框应该拥有相同的name属性。

最佳实践是在label元素上设置for属性，让其值与复选框的id属性值相等，这样就在label元素和它的子元素复选框之间创建了一种链接关系。例如：

下面是一个复选框的例子：

<label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>

给表单添加三个复选框，每个复选框都被嵌套进label元素中，并且它的name属性均为personality

<h2>CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  <form action="/submit-cat-photo">
    <label for="indoor"><input id="indoor" type="radio" name="indoor-outdoor">室内</label>
    <label for="outdoor"><input id="outdoor" type="radio" name="indoor-outdoor">室外</label><br>
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>

  <label for="loving"><input id="loving" type="checkbox" name="personality"> Loving</label>

  <label for="eat"><input id="eat" type="checkbox" name="personality"> eat</label>

  <label for="play"><input id="play" type="checkbox" name="personality"> play</label>
</form>
</main>

给单选按钮和复选框添加默认选中项

通过添加checked属性，你可以设置某个单选按钮或多选按钮被默认选中。

为此，只需给input元素添加 “checked” 属性。 例如:

<input type="radio" name="test-name" checked>

把第一个radio button和第一个checkbox都设置为默认选中。

<h2>CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor" checked>室内</label>
    <label><input type="radio" name="indoor-outdoor">室外</label><br>
    <label><input type="checkbox" name="personality" checked>忠诚</label>
    <label><input type="checkbox" name="personality">懒惰</label>
    <label><input type="checkbox" name="personality">积极</label><br>
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>
  </form>
</main>

元素嵌套

div元素，也叫division（层）元素，是一个盛装其他元素的通用容器。

它也是 HTML 中出现频率最高的元素。

和其他普通元素一样，你可以用<div>来标记一个div元素的开始，用</div>来标记一个div元素的结束。

把无序列表、有序列表和段落都嵌套进同一个div元素。

提示：试着在第一个<p>之前插入div开始标记，在</ol>之后插入div结束标记，这样，所有的列表都位于div之内.

<h2>CatPhotoApp</h2>
<main>
  
  <a href="#"><img src="http://cdn.chenzhicheng.com/relaxing-cat.jpg" alt="一只仰卧着的萌猫"></a>
  <div>
  <p>猫咪最喜欢的三件东西：</p>
  <ul>
    <li>猫薄荷</li>
    <li>激光笔</li>
    <li>千层饼</li>
  </ul>
  <p>猫咪最讨厌的三件东西：</p>
  <ol>
    <li>跳蚤</li>
    <li>打雷</li>
    <li>同类</li>
  </ol>
  </div>
  <form action="/submit-cat-photo">
    <label><input type="radio" name="indoor-outdoor">室内</label>
    <label><input type="radio" name="indoor-outdoor">室外</label><br>
    <label><input type="checkbox" name="personality">忠诚</label>
    <label><input type="checkbox" name="personality">懒惰</label>
    <label><input type="checkbox" name="personality">积极</label><br>
    <input type="text" placeholder="猫咪图片地址" required>
    <button type="submit">提交</button>
  </form>
</main>

声明 HTML 文档的文档类型

到目前为止，我们学习了一些特定的 HTML 标签，还有一些标签是用来组成网页的总体结构，并且它们在每个 HTML 文档中都能看到。

在文档的顶部，你需要告诉浏览器你的网页用的 HTML 哪个版本。 HTML 是一个不停进化的语言，大部分浏览器都支持 HTML 的最新标准，也就是 HTML5。但是一些陈旧的网页可能使用的是 HTML 的旧版本。

你可以通过<!DOCTYPE ...>来告诉浏览器你使用的是 HTML 的哪个版本，"..." 部分就是版本的数字信息。<!DOCTYPE html>对应的就是 HTML5。

!和大写的DOCTYPE是很重要的，特别是对于老的浏览器。但html大写小写都可以。

接下来，所有的 HTML 代码都必须位于html标签中。其中<html>位于<!DOCTYPE html>的后面，</html>位于网页的结尾。

这是网页结构一个例子：

<!DOCTYPE html>
<html>
  <!-- Your HTML code goes here -->
</html>

在代码编辑器的顶部添加一个DOCTYPE（文档类型）为 HTML5 的声明，然后添加一个html元素，再添加一个h1元素，标题的文本可以随意填。

<!DOCTYPE html>
<html>
  <h1>hello web</h1>
</html>

定义 HTML 文档的标题和正文

html的结构主要分为两大部分：head、body。关于网页的描述都应该放入head标签，网页的内容都应该放入body标签。

比如link、meta、title和style都应该放入head标签。

这是网页布局的一个例子：

    <!DOCTYPE html>
    <html>
      <head>
        <!-- metadata elements -->
      </head>
      <body>
        <!-- page contents -->
      </body>
    </html>

给网页添加head和body，head元素应该包含title，body元素应该包含h1和p。

<!DOCTYPE html>
<html>
    <head>
  <title>世上最萌的猫咪</title>
    </head>
    <body>
  <h1>世上最萌的猫咪</h1>
  <p>在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。 在大家心目中，猫是慵懒和可爱的化身，它可以睡饱了再起来吃饭，可以逗趣小耗子，可以卖得了萌，使得了坏，这样百变的小怪兽就集结在一只宠物上，怎能不惹人怜爱。</p>
  </body>
</html>