提示:文章写完后,目录可以自动生成,如何生成可参考右边的帮助文档
文章目录
前言
老板让我们写周记工作报告。想着读到硕士研究生了不能前端都不会,那就写一下我的前端学习之路,让这篇成为第一份报告吧。
一、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>
四、实践成果展示