这是我参与「第四届青训营」笔记创作活动的的第1天。

什么是前端

前端工程就是使用Web技术栈解决多端图形界面交互的工程设计。

我们常说的“前端三件套”指的是HTML,CSS和JavaScript。其中，HTML用于设计页面中的内容和结构；CSS用于设计页面的样式，例如颜色、大小等信息；JavaScript则是用于定义页面的行为，比方说对于用户的不同操作，需要给出怎样的页面响应。

值得一提的是，TypeScript正在逐渐取代JavaScript的地位。
TypeScript在继承了js所有编程类型的同时，也被赋予了强大的类型系统以及系统级设计能力

最终呢，浏览器通过http协议与服务器建立联系，获取通信，即可实现一个简单的前端工程实现。

HTML学习

HTML(Hyper Text Markup Language)，译为超文本标记语言，是一门专门用于网页开发的语言，学习的核心在于熟悉并运用各项HTML标签并能够对网页中涉及的文本、图片、音频等内容进行布局。

下面，是我们在开发过程中会遇到的一些常见的基本标签类型。

快速生成一个HTML模板

在最新版本的VSCode中，新建html文件后，输入html:5和回车，可以快速生成一个html模板。所以不需要记住这个东西呢，以后用的多了，自然就熟悉了。

ps: 旧版的VSCode软件这一步输入！和回车就好啦~

接下来就可以在body标签中添加需要的页面内容啦

和大家一起熟悉几个常用标签吧~~~

标题和段落标签

    <h1>1级标题</h1>
    <h2>2级标题</h2>
    <h3>3级标题</h3>
    <h4>4级标题</h4>
    <h5>5级标题</h5>
    <h6>6级标题</h6>
    <p>这是一个文本段落</p>
    <p>下面将会另起一行<br>这是新的一行</p>

h1~h6分别是html中的六级标题标签，p是段落标签。此外html在文本内容中单纯用回车和空格是没有办法达到换行和间隔的效果的。需要添加额外的标签——< br >就是一种换行符，属于单标签。

文本格式化标签

标签	作用	用例	效果
strong	加粗	`<strong>文本加粗</strong>`	文本加粗
em	倾斜	`<em>文本倾斜</em>`	文本倾斜
del	删除线	`<del>添加删除线</del>`	~~添加删除线~~
ins	下划线	`<ins>添加下划线</ins>`	添加下划线

01-前端与HTML | 青训营笔记