这是我参与「第五届青训营 」伴学笔记创作活动的第 1 天
重点内容
- 前端技术
- html标签
- 语义化
前端技术
如今的前端发展的很快，基本上每年都会有颠覆性的框架或者工具出现。尽管如此，国内生态仍然不尽人意。许多国内公司开源的框架仅仅是为了kpi等因素，部分框架远远不如社区开源的框架。这也导致了许多使用者对国内开源框架的不信任。这极大的阻碍了国内生态的发展。
当然，话说回来，前端的技术发展极快。前端适用于人机交互，特别注重的是用户体验。原本，前端仅用于Web。但随着各种技术的发展，前端已经可以应用于各种平台，安卓端，苹果端，小程序。前端也可以用来做更多应用，WebGl、WebRTC等使前端可以完成更多任务，到达更多领域。前端的边界在不断往外拓展。
前端需要考虑的因素也有很多，例如美观、安全、功能、兼容、性能、无障碍、体验等。
html标签
html有很多的标签，常用的有一些排版标签、输入标签、表格标签、多媒体标签等。在我们的学习过程中，大部分标签可以先做一些了解，等需要使用的时候再着重学习。
排版标签
这里仅作一些简单的介绍。
<h1>我是大标题</h1>
<h2>我是二级标题</h2>
<blockquote>
我是被引用的一大段文字。叭叭叭叭叭叭~~
</blockquote>
<cite>我是被引用的名字（或章节）</cite>
<code>//我是一段代码</code>
输入标签
<label><input type="radio" name="sport" />单选-1</label>
<label><input type="radio" name="sport" />单选-2</label>
语义化问题
HTML的元素、属性、属性值都含有某些含义。
但实际上，很多前端开发人员在使用标签的时候，往往缺少使用这些语义化的标签，经常使用<div>等无意义标签。这样做的后果是使得网页的无障碍功能很差，这对障碍人群会造成很大困扰。当然，这不仅仅是障碍人群，会对我们自己也会有一定影响。按照规范去写，会对正常人群也会有很大的提升体验。同时，这种情况也会使得SEO很差，即搜索引擎不喜欢你的网页。当然，更多的情况是维护人员维护代码也会因此消耗极大成本。为了缓解这种情况，html5也增加了很多语义化标签。
原则
- 传达内容而不是样式
- 语义化
实践练习
页面划分
一个网页常见的页面划分是header、main、footer、aside。header里面一般有nav。main里面分了很多section，每个section都是一个区块。aside一般用于导航。footer一般用于
实践练习
<header><nav></nav></header>
<main>
<section id="articles"></section>
</main>
<aside></aside>
<footer></footer>
课后总结
HTML虽然简单，但往往很多开发者并不注重一些原则。
