前端工程师是使用web技术栈解决GUI人机交互问题。
Html负责内容、css负责样式、JavaScript负责行为；Html、css。Javascript、http协议构成前端最基础的技术栈。
前端应解决图形界面下人机交互的问题，应注重美观、功能、无障碍、安全、性能、兼容性问题，前端对于用户体验来说是非常重要的。
其中src为属性名，引号内为属性值
head标签放一些页面需要的信息，又不用直接呈现给用户的，如页面标题、编码；浏览器拿到html后会把它解析为一个dom树。
html语法需注意：标签和属性不区分大小写；空标签可以不闭合，如input、meta；属性值推荐用双引号包裹；某些属性值可以省略，如required、readonly。
ol标签表示有序列表li标签表示有序列表项；ul表示无序列表li表示项dl表示定义列表，dt表示标题、dd表示值。
Strong、em均为强调标签，strong强调紧急，em更多的是在预期上的强调。
html语义化：html中的元素、属性及属性值都拥有某些含义，开发者应遵循语义来编写html。
语义化好处：代码可读性、可维护性、搜索引擎优化、提升无障碍性。
语义化与非语义化对比：
我们可以假设有一个简单的网页，包括一个页头、一个导航栏、一个主要内容区域和一个页脚。如果我们使用非语义化标签，那么我们可能会这样写：
< div class="header" > 页头 </ div >
< div class="nav" > 导航栏 </ div >
< div class="main" > 主要内容 </ div >
< div class="footer" > 页脚 </ div > 上面的代码虽然能够实现页面布局，但是缺乏语义信息，可读性差一些。如果我们使用HTML5的语义化标签，那么我们可以这样写：
< header > 页头 </ header >
< nav > 导航栏 </ nav >
< main > 主要内容 </ main >
< footer > 页脚 </ footer >
我们还可以举一个相对复杂一些的例子，比如，对于一个网站的首页，通常可以这样进行布局：
< body >
< header >
< nav >
……
</ nav >
</ header >
< aside >
< nav >
……
</ nav >
</ aside >
< section > …… </ section >
< section > …… </ section >
< section > …… </ section >
< footer >
< address > …… </ address >
</ footer >
</ body >
而网站的具体的文章内容展示页面，则可以这样：
< body >
< header > …… </ header >
< article >
< header > …… </ header >
< section > …… </ section >
< section > …… </ section >
< section > …… </ section >
< footer > …… </ footer >
</ article >
< footer >
< address ></ address >
</ footer >
</ body >
可以看到，在使用了语义化标签之后，仅仅观看HTML标签，我们就能大致想象出网页的具体样子。
