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”