1、关于语义。
什么是语义元素?
一个语义元素能够清楚的描述其意义给浏览器和开发者;(语义元素=有意义的元素)
无语义<div> 和 <span> 无需考虑内容;
语义元素<form>、<p>、<img> 清楚的定义了它的内容;使html结构清晰
=============================================================================
HTML5中新的语义元素: <header>元素描述了文档的头部区域 <div class="header"> </div> <header> </header> <nav> 标签定义导航链接的部分 <div> <a href="">123</a> </div> <nav> <a href="">1213</a> <a href="">1213</a> <a href="">1213</a> <a href="">1213</a> </nav> <section> 标签定义文档中的节比如章节、页眉、页脚或文档中的其他部分 <article> 标签定义独立的内容 <aside> 标签定义页面主区域内容之外的内容（比如侧边栏） <footer> 元素描述了文档的底部区域 注：为了让这些块及元素在所有版本的浏览器中生效，你需要在样式表文件中设置一下属性 display:block
2、关于性能
为了加快页面的显示和运行速度，就需要在页面上最小化重绘（repaint）和回流（reflow）。
repaint：如果只是改变某个元素的背景色、文 字颜色、边框颜色等等不影响它周围或内部布局的属性，将只会引起浏览器 repaint（重绘）。repaint 的速度明显快于 reflow
下面情况会导致reflow发生改变窗口大小、改变文字大小、内容的改变，如用户在输入框中敲字、元素的显示隐藏等，reflow几乎是无法避免的。
但是可以减少回流，表现有：尽量通过class来设计元素样式，切忌用style
var bstyle = document.body.style; // cache
bstyle.padding = "20px"; // reflow, repaint
bstyle.border = "10px solid red"; // 再一次的 reflow 和 repaint
对上面代码优化：
.b-class{
padding:20px;
color:blue;
border:10px solid red;
......
}
$div.addClass("b-class");
避免table布局：tables中某个元素一旦触发reflow就会导致table里所有的其它元素reflow..
........
3、前端工程化
具体到前端工程化，面临的问题是如何提高编码->测试->维护阶段的生产效率。
开发中 我们要考虑：提高开发生产效率（可以制定开发规范，组件化开发等），降低维护难度。
web标准不是具体的一个标准。
大致可以分为三类，
结构化标准语言(XML和XHTML)，表现标准语言(CSS)，行为标准(DOM、javascript)。
Web标准之可访问性、可用性、可维护性
1)可用性：
产品是否容易上手，用户能否完成任务，效率如何，以及这过程中用户的主观感受可好，是从用户的角度来看产品的质量。
可用性好意味着产品质量高，是企业的核心竞争力。
2)可维护性：
一般包含两个层次，
一是当系统出现问题时，快速定位并解决问题的成本，成本低则可维护性好。
二是代码是否容易被人理解，是否容易修改和增强功能。构建可维护性好的代码，对企业的长期发展非常重要。
3)可访问性：
HTML只是文本，不同用户获取的方式可能不同。
例如，视力正常的人可以直接查看内容。
而视力受损的人可能就需要屏幕阅读器。而屏幕阅读器有时会将周围HTML元素的类型读出来，让用户了解上下文；
而且屏幕阅读器会重点识别标题，并朗读出来来让用户确定感兴趣内容。
「从这里也能看出来，好的语义产生的影响」
跨终端web适配方式：
之响应式设计：统一提供多终端的兼容性设计方式，一套模板，一套方案，一套js类库，代表是bootstrap和rem设计方案。
面包总会有的，我们要做一个善良的、正能量的、可爱的人儿～～