这是我参与「第五届青训营」伴学笔记创作活动的第 1 天
什么是前端工程师？
用老师的一句话总结就是：前端工程师是使用web技术栈解决多端图形用户页面交互问题的工程师。
什么是前端?
-
前端有3个特点:
-
解决了GUI人机交互问题
-
是跨终端的
-
使用web技术栈进行开发
-
前端技术栈主要是与服务器端相对应的js, css, html等技术
- 前端应该关注的方面： 功能、美观、体验、性能、兼容性、安全性以及无障碍等
- 现在前端的边界正在逐渐扩大,已经远远超出了页面这个简单的范畴 我们可以借助node.js进行服务端开发; 可以使用electron以及React Native去开发客户端的应用; 可以使用webRTC实现在线的传输，实现线上多人会议等; 可以使用webGL开发一些流畅的3D的游戏; 还可以使用wasm提高网页性能开发环境，使一些C++等的一些代码成为可以在浏览器中编辑的代码。
- 前端的开发环境：浏览器+编辑器即可上手
什么是HTML？
它的全称是HyperText Markup Language的首字母缩写，表示超文本的标记语言
-
<h1>文章标题</h1>即可表示一个标签 -
如果在标签上设置一些属性，例如
<ing src="photo.jpg"/>表示一个图片 -
<!doctype html>表示当前的HTML文件是一个什么样的HTML版本，浏览器会根据它来决定使用某种渲染模式，若个不写，浏览器会以一种老旧怪异的模式渲染，会造成页面的效果和实际想要的不太符合。
-
<html>是文档的根标签，其它的标签要写在其中。 -
<head>一般表示页面的源数据，不进行呈现的，例如标题，编码等。 -
<body>是要呈现给用户的内容，例如文字，图片等。
DOM树
把HTML代码转化成一个DOM树，形成一个树形的结构，每个节点称为一个DOM节点。
HTML语法
- 标签和属性不区分大小写，通常推荐小写
- 空标签可以不闭合，比如input、meta
- 属性值推荐用双引号包裹
- 某些属性值可以忽略，比如 required、readonly
语义化
-
HTNL中的元素、属性及属性值都拥有某些含义
-
开发者应该遵循语义来编写HTML
-
有序列表用ol；无序列表用ul
-
lang属性表示内容所使用的语言
HTML从1.0到5.0新增删除了很多标签。其实改动主要是因为HTML表述页面的内容和结构，为了清晰的表达出来，我们要对标签进行取舍选择，因此HTML在不断的更新换代。
为什么必须要强调语义化？
要考虑谁在使用我们写的HTML?
-
开发者 - 修改、维护页面
-
浏览器 - 展示页面
-
搜索引擎 - 提取关键字、排序
-
屏幕阅读器 - 给盲人读页面内容
语义化的好处
注意！HTML本质是传达内容，而不是传达样式
那么如何做到语义化呢？
首先应该了解标签和属性的含义，其次要了解标签适合表示的内容，仔细地选择标签，最后没办法控制生成的标签是什么样子，可以用一些插件作为辅助，但是不要可视化的去生成。
