前端学习之HTML第一周

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

---

前言

老板让我们写周记工作报告。想着读到硕士研究生了不能前端都不会，那就写一下我的前端学习之路，让这篇成为第一份报告吧。

一、How to learn

主要是在B站看视频学习结合自己打代码实践强化。B站学习链接

二、准备工作

2.1 工具的使用

前端IDE有很多如vscode、webstorm、sublime之类。我这里选择了比较轻量，且插件丰富的vscode。

2.2 插件的安装

vscode本质只是个文本编辑器，若想要成为得心应手的工具，必须安装插件，这里以前端为例，我选择了auto rename tag、js-css-html formatter、open in browser、css peek这几个

三、学习内容

3.1 常规标签的了解

了解了HTML的架构和常规标签。HTML通常分为头部和身体。标签通常成对出现，如body,table标签，也有少数单独的标签如br标签。

3.2 超链接的使用

HTML 使用超级链接与网络上的另一个文档相连。
几乎可以在所有的网页中找到链接。点击链接可以从一张页面跳转到另一张页面。

超链接可以是一个字，一个词，或者一组词，也可以是一幅图像，您可以点击这些内容来跳转到新的文档或者当前文档中的某个部分。

当您把鼠标指针移动到网页中的某个链接上时，箭头会变为一只小手。

我们通过使用 a 标签在 HTML 中创建链接。

有两种使用 a 标签的方式：

通过使用 href 属性 - 创建指向另一个文档的链接
通过使用 name 属性 - 创建文档内的书签
如<a href="http://www.baidu.com/">Visit baidu</a>
注意这里一定要加http

3.3 图像标签的使用

通过使用 HTML，可以在文档中显示图像。

图像标签（）和源属性（Src）
在 HTML 中，图像由 img标签定义。

img 是空标签，意思是说，它只包含属性，并且没有闭合标签。

要在页面上显示图像，你需要使用源属性（src）。src 指 “source”。源属性的值是图像的 URL 地址。

定义图像的语法是：<img src="url" />这里的url是地址。要注意绝对路径和相对路径的区分，一般使用相对路径。

3.4 标题段落的使用

HTML 标题
标题（Heading）是通过 h1-h6 等标签进行定义的。

h1 定义最大的标题。h6 定义最小的标题。

实例：

<h1>This is a heading</h1>
<h2>This is a heading</h2>
<h3>This is a heading</h3>

HTML 段落
段落是通过 p 标签定义的。

实例

<p>This is a paragraph</p>
<p>This is another paragraph</p>

四、实践成果展示