HTML基础

1. HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。
   大部分 HTML 元素都有一个开始标记和一个结束标记。
   开始标记像这样：
   

   
   结束标记像这样：
   

2. h1元素通常被用作主标题，h2元素通常被用作副标题，还有h3、h4、h5、h6元素，它们分别用作不同级别的标题。

Hello World
CatPhotoApp

3. 用 p 元素代表段落
   p是paragraph的缩写，通常被用来创建一个段落，就和你写作文一样。
   你可以像这样创建一个段落：
   

   I'm a p tag!

4. 用占位符文本填充空白
   Web 开发者通常用lorem ipsum text来做占位符，占位符就是占着位置的一些文字，没有实际意义。
   为什么叫lorem ipsum text呢?是因为lorem ipsum是古罗马西塞罗谚语的前两个单词。
5. 去除 HTML 的注释
   注释的作用是给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。
   注释也可以用来在不删除代码的前提下，让代码不起作用。
   在HTML中，注释开始的标记是

。
 
 
 
  
HTML5 元素介绍
 HTML5 引入了很多更具描述性的 HTML 元素，例如：header、footer、nav、video、article、section等等。
 这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。
 main元素让搜索引擎和开发者瞬间就能找到网页的主要内容。
 
  
给网站添加图片
 用img元素来为你的网站添加图片，其中src属性指向一个图片的地址。
 例如：
 
 
 
 

 
 
注意：img元素是没有结束标记的。
 所有的img元素必须有alt属性，alt属性的文本是当图片无法加载时显示的替代文本，这对于通过屏幕阅读器来浏览网页的用户非常重要。
 注意：如果图片是纯装饰性的，用一个空的alt是最佳实践。
 理想情况下，alt属性不应该包含特殊字符，除非需要。
 
 
让我们给上面例子的img添加alt属性。
 
 

 
 
 
  
用锚点实现网页间的跳转
 你可以用a锚点（Anchor，简写 a）来实现网页间的跳转。
 锚点需要一个href属性指向目的地，它还需要有锚点文本，例如：
 
 
 
 
传送至 freecodecamp.one
 
 
然后你的浏览器会显示一个可以点击的文本，点击该文本就会跳转到https://freecodecamp.one。
 
 
传送至 cat photos
 
 
 
  
用锚点实现网页内部跳转
 锚点同样也可以用来在网页内不同区域的跳转。
 设置锚点的href属性值为井号#加上想跳转区域对应的id属性值，这样就可以创建一个内部跳转。id是用来描述网页元素的一个属性，它的值在整个页面中唯一。
 下面是用来创建内部锚点的例子：
 
 
 
 
Contacts
...
Contacts
 
 
当用户点击了Contacts链接，页面就会跳转到网页的Contacts区域。
 
 
 
  
将锚点嵌套在段落中
 你可以在其他文本元素内嵌套链接。
 
 
 
 
> 

> Here's a  link to freecodecamp.one for you to follow.
> 
 
 
让我们来分解这个例子：
 通常，文本是被包裹在p段落内：
 
 Here's a ... for you to follow. 
 接下来是anchor锚点（需要结束标记 ）:
  ... 
 target是锚点的一个属性，它指定了会以什么方式来打开链接，属性值 "_blank"的意思是链接会在新元素页打开。
 href是锚点的另一个属性：它指定了链接的 URL 地址：
  ... 
 锚点元素内的文本："link to freecodecamp.one"，会显示为一个可以点击的链接：
 link to freecodecamp.one
 例子的最后输出将会是这样：
 Here's a link to freecodecamp.one(http://freecodecamp.one/) for you to follow.