- HTML 是英文 Hyper Text Markup Language（超文本标记语言）的缩写。
大部分 HTML 元素都有一个开始标记和一个结束标记。
开始标记像这样：
<h1>
结束标记像这样：
</h1> - h1元素通常被用作主标题，h2元素通常被用作副标题，还有h3、h4、h5、h6元素，它们分别用作不同级别的标题。
<h1>Hello World</h1>
<h2>CatPhotoApp</h2>
- 用 p 元素代表段落
p是paragraph的缩写，通常被用来创建一个段落，就和你写作文一样。
你可以像这样创建一个段落：
<p>I'm a p tag!</p> - 用占位符文本填充空白
Web 开发者通常用lorem ipsum text来做占位符，占位符就是占着位置的一些文字，没有实际意义。
为什么叫lorem ipsum text呢?是因为lorem ipsum是古罗马西塞罗谚语的前两个单词。 - 去除 HTML 的注释
注释的作用是给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。
注释也可以用来在不删除代码的前提下，让代码不起作用。
在HTML中，注释开始的标记是
<!--
结束标记是-->。
-
HTML5 元素介绍
HTML5 引入了很多更具描述性的 HTML 元素，例如：header、footer、nav、video、article、section等等。
这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。
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="作者站在沙滩上竖起两个大拇指">
- 用锚点实现网页间的跳转
你可以用a锚点（Anchor，简写 a）来实现网页间的跳转。
锚点需要一个href属性指向目的地，它还需要有锚点文本，例如：
<a href="https://freecodecamp.one">传送至 freecodecamp.one</a>
然后你的浏览器会显示一个可以点击的文本，点击该文本就会跳转到https://freecodecamp.one。
<a href="https://freecodecamp.one">传送至 cat photos</a>
- 用锚点实现网页内部跳转
锚点同样也可以用来在网页内不同区域的跳转。
设置锚点的href属性值为井号#加上想跳转区域对应的id属性值，这样就可以创建一个内部跳转。id是用来描述网页元素的一个属性，它的值在整个页面中唯一。
下面是用来创建内部锚点的例子：
<a href="#contacts-header">Contacts</a>
...
<h2 id="contacts-header">Contacts</h2>
当用户点击了Contacts链接，页面就会跳转到网页的Contacts区域。
- 将锚点嵌套在段落中
你可以在其他文本元素内嵌套链接。
> <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>
例子的最后输出将会是这样：
Here's a link to freecodecamp.one(http://freecodecamp.one/) for you to follow.
网友评论