基础 HTML 和 HTML5

HTML 元素

大部分 HTML 元素都有一个开始标签和一个结束标签。
开始标签像这样：

<h1>

结束标签像这样：

</h1>

开始标签和结束标签的唯一区别就是结束标签多了一个斜杠。

h2 元素代表副标题

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

p 元素代表段落

p 元素是网站上段落文本的首选元素。
p 是“paragraph（段落）”的缩写。
你可以像这样创建一个段落：

1	<p>I'm a p tag!</p>

用占位符文本填充空白

Web 开发者通常用 lorem ipsum text 来做占位符。 lorem ipsum text 是从古罗马西塞罗的一段著名经文中随机抽取的。
Lorem ipsum text 自 16 世纪以来就在排版中被用作占位符，这一习惯也在 Web 开发中得以延续。

去除 HTML 的注释

注释的作用是给代码添加一些说明，方便团队合作或日后自己查看，但又不影响代码本身。
注释的另一个用途就是在不删除代码的前提下，让代码不起作用。
在 HTML 中，注释的开始标签是 。

给 HTML 添加注释

记住：注释的开始标记是 。

HTML5 元素介绍

HTML5 引入了很多更具描述性的 HTML 元素，包括 main、header、footer、nav、video、article、section 等等。
这些元素让 HTML 更易读，同时有助于搜索引擎优化和无障碍访问。main 元素让搜索引擎和开发者能很快地找到网页的主要内容。

举个例子，下面的main元素嵌套了两个子元素：

<main> 
  <h1>Hello World</h1>
  <p>Hello Paragraph</p>
</main>

给网站添加图片

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

例如：

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

注意：img 元素是没有结束标签的。
所有的 img 元素必须有alt属性。alt的属性值有两个作用，第一个作用是让屏幕阅读器可以知晓图片的内容，这会对网页的可访问性有很大提升；另一个作用是当图片无法加载时，页面需要显示的替代文本。
注意：如果图片是纯装饰性的，把alt的属性值设置为空是最佳实践。

理想情况下，alt属性不应该包含特殊字符，除非有特殊需要。

用 a 实现网页间的跳转

你可以用 a（Anchor，简写为 a 来实现网页间的跳转。
a需要一个 href 属性指向跳转的目的地。同时，它还应有内容。
例如：

1	<a href="https://www.freecodecamp.org">this links to freecodecamp.org</a>

浏览器将显示文本 this links to freecodecamp.org，这是一个可点击的链接。你可以通过这个链接访问https://www.freecodecamp.org。

用 a 实现网页内部跳转

a（anchor元素也可以用于创建内部链接，跳转到网页内的各个不同部分。
要创建内部链接，你需要将链接的href属性值设置为一个哈希符号#加上你想内部链接到的元素id，通常是在网页下方的元素。然后你需要将相同的id属性添加到你链接到的元素中。id是描述网页元素的一个属性，它的值在整个页面中唯一。
当用户点击了 Contacts 链接，页面就会跳转到网页的 Contacts 区域。

1
2
3

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

当用户点击 Contacts 链接时，他们将被带到带有 Contacts 标题元素的网页部分。

FreeCodeCamp学习笔记(一)