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

前端

什么是前端工程师？

前端工程师就是使用 web 技术栈解决多端下的图形界面交互的工程师。

web技术栈包括哪些呢？

HTML、CSS、JavaScript以及HTTP构成了前端最基础的技术栈。

前端工程师只要懂得前端的技术就可以了吗？

不是的，在技术之外还要关注一些其他方面，当然技术才是前端工程师的灵魂，但是由于前端工程师是来解决多端图形界面交互的，所以为了得到最终受用户认可的产品，必须还要关注以下几点。

功能：功能要满足用户的需求，这也是核心。
美观：界面好看了，用户才会更加满意。
无障碍：比如部分产品的开发需要考虑到色盲症的用户可不可以使用。
安全：随着Web技术的不断演进，随之而来的web安全问题也越来越多，比如十大web安全漏洞。漏洞的产生势必会给公司和用户造成损失，所以在开发过程中，网页安全不容忽视。
性能：网页加载的够不够快，网页中的动画是否流畅。这些关乎用户的使用体验，也至关重要。
兼容性：我们在做网页时常常需要考虑兼容性，比如说浏览器之间的兼容（Chrome、firefox、safari）、不同设备之间的兼容（手机端、PC端、平板端），这些兼容性也至关重要，如果在PC端显示的很好，到了手机端，界面的布局就变的一塌糊涂，那么对于手机端的用户是极其不友好的，所以制作网页的时候要考虑兼容性。

前端工程师就是写写网页吗？

随着新的技术的不断的发展，我们前端这个概念其实也远远超出了就是我们传统意义上的这种页面这样的一个范畴，它其实可以拓展到很多的一些方面。比如说我们可以使用 node.js 在服务器端去开发一些服务器端的应用。我们也可以使用 electron 或者 React Native 去开发客户端的一些应用，我们也可以使用 web RTC 进行 P2P 的多人的视频会议，然后我们也可以使用 web GL 去做一些比较流畅的 3D 的效果游戏，我们用 webAssembly 可以把那个 C ++、Java或者 Rust 写的代码转换为浏览器可以运行的机器码。总之，前端是互联网里边发展比较快的一个领域，我们的技术不断地在更新，我们作为前端工程师，其实应该不断持续地学习才能跟上技术的一个发展。大家加油啊！

HTML

什么是HTML？

HTML的英文全拼为HyperText Markup Language，中文的意思就是超文本标记语言。何为超文本？它就是超越纯文字的一个概念，它不仅可以包含文字，也可以包含图片、标题、表格这些更丰富的格式。那 HTML 怎么去表示这些更丰富的内容呢，它使用的一种语言就是叫 Markup language 标记语言，就是用标签来表示各种各样的一些元素。比如说一级标题，我就用 h1 这样的一个标签去表示。 W3C 标准中标签一般都是成对的出现，就是我们用尖括号括起来的h1表示一个开始标签，然后用斜杠 h1 这样表示一个结束标签（例<h1></h1>），我们可以在标签中放一些文字内容，或者嵌套其他标签，而有一些标签在内部是不可以放置内容或嵌套其他标签的，比如<img \>标签，所以我们就可以把那个结束标签就是<\img> 给省略掉，那我们只需要在开始标签这里边最后写一个斜杠就表示结束标签了。这是那个结束标签的一个省略。
在标签里面我们又可以放置属性, 例如img标签中需要指定图片的位置（路径），这个值就需要放到src属性中（例：<img src="D:/images/a.png" \>）。

HTML中常见的标签

标题标签：h1-h6
链接标签：<a href='链接地址' target='_blank'><\a>
输入标签：
段落标签：<p>这是一个段落</p>
图片标签：<img src='图片地址' \>
标签还有很多，以上是特别常用的。这个链接里面有很多标签详解。www.w3school.com.cn/tags/tag_co…

标准HTML文档格式

<html>
  <head>
    <meta charset="UTF-8">
    <title>页面标题</title>
  </head>
  <body>
    <h1>一级标题</h1>
    <p>段落内容</p>
  </body>
</html>

浏览器如何识别我们的代码结构

浏览通过对HTML文件进行解析生成一个DOM文件，以上面这个代码为例，生成类似如下DOM结构，然后再将内容渲染到我们的页面上。

HTML语法

标签和属性不区分大小写，推荐小写

空标签可以不闭合，比如 input、meta

```
属性值推荐用双引号包裹
```

某些属性值可以省略，比如 required、readonly

最后总结

先说个注意事项，就是老师上课提到的，我们写代码时，要传达的是内容，而不是样式，就是说大部分内容都可以用div来实现，比如p标签、h标签等，但是为了后期维护，以及方便阅读代码，最好是见标签知意，看到h1就知道是一级标题，看到p就知道是一个段落。
这是对老师上课的内容的一个总结笔记，通过写笔记，确实收获不少，不但可以回顾知识，形成体系，还可以在整理笔记的过程中，发现自己不明白的地方，查找资料，帮助自己得到更多的知识，形成更加完善的知识体系。
当然整理笔记的过程，有时也会很枯燥，最后的结果总是好的，希望以后可以坚持下去吧。

前端与HTML | 青训营笔记

前端