今天是2022年第一天，站在2022年的开始回首整个2021年并没有发现自己有很大的进步。2022年一定要行动起来，丰富自己。
2022年给自己定几个目标：
- 重新学习前端之路
- 搭建一个自己的博客网站 ---每周发送一至两篇文章记录自己重新学习前端之路
- 培养自己一个爱好
- 减肥
- 带老婆出去旅游一趟
- 每月读一本书
重学之路从HTML开始
HTML简介
HTML的全称为超文本标记语言，是一种标记语言。它包括一系列标签．通过这些标签可以将网络上的文档格式统一，使分散的Internet资源连接为一个逻辑整体。HTML文本是由HTML命令组成的描述性文本，HTML命令可以说明文字，图形、动画、声音、表格、链接等 HTML历史上有如下版本： ①HTML 1.0：在1993年6月作为互联网工程工作小组(IETF)工作草案发布。 ②HTML 2.0：1995年1 1月作为RFC 1866发布，于2000年6月发布之后被宣布已经过时。 ③HTML 3.2：1997年1月14日，W3C推荐标准。 ④HTML 4.0：1997年12月18日，W3C推荐标准。 ⑤HTML 4.01（微小改进）：1999年12月24日，W3C推荐标准。 ⑥HTML 5：HTML5是公认的下一代Web语言，极大地提升了Web在富媒体、富内容和富应用等方面的能力，被喻为终将改变移动互联网的重要推手。Internet Explorer 8及以前的版本不支持 `
HTML 标记标签通常被称为 HTML 标签 (HTML tag) <标签>内容
HTML 元素包含了开始标签与结束标签，元素的内容是开始标签与结束标签之间的内容，元素属性是 HTML 元素提供的附加信息。
HTML基础结构
文档声明头
声明为 HTML5 文档页面的根元素
元素是 HTML 页面的根元素头部标记
元素包含了文档的元（meta）数据，如 定义网页编码格式为 utf-8。浏览器标签名
元素描述了文档的标题，浏览器标签名，通常放到head里面</code></pre><h1 class="pgc-h-arrow-right" data-track="23">页面主体</h1><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><body> 元素包含了可见的页面内容</code></pre><h1 class="pgc-h-arrow-right" data-track="25">常见的标签</h1><h1 class="pgc-h-arrow-right" data-track="26">块级元素</h1><p data-track="27"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">块级元素只能出现在 </span><span style="color: #A7A7A7; --tt-darkmode-color: #A3A3A3;"><body></span> 元素内。</p><p data-track="28"><strong><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">格式</span></strong></p><p data-track="29"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">默认情况下，块级元素会新起一行。</span></p><p data-track="30"><strong><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">内容模型</span></strong></p><p data-track="31"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">一般块级元素可以包含行内元素和其他块级元素。这种结构上的包含继承区别可以使块级元素创建比行内元素更”大型“的结构。 HTML 标准中块级元素和行内元素的区别至高出现在 4.01 标准中。在 HTML5，这种区别被一个更复杂的内容类别 (en-US)代替。”块级“类别大致相当于 HTML5 中的流内容 (en-US)类别，而”行内“类别相当于 HTML5 中的措辞内容 (en-US)类别，不过除了这两个还有其他类别。</span></p><p data-track="32"><strong><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">标签与描述</span></strong></p><div class="tableWrapper"><div class="syl-table-wrap"><table style="min-width: 112px;"><colgroup><col><col></colgroup><tbody><tr><td><p data-track="33"><strong><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">标签名</span></span></strong></p></td><td><p data-track="34"><strong><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">描述</span></span></strong></p></td></tr><tr><td><p data-track="35" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">address</span></p></td><td><p data-track="36"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">联系方式信息</span></p></td></tr><tr><td><p data-track="37" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">article (HTML5)</span></span></p></td><td><p data-track="38"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">文章内容</span></span></p></td></tr><tr><td><p data-track="39" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">aside (HTML5)</span></p></td><td><p data-track="40"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">伴随内容</span></p></td></tr><tr><td><p data-track="41" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">blockquote</span></span></p></td><td><p data-track="42"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">块引用</span></span></p></td></tr><tr><td><p data-track="43" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">dd</span></p></td><td><p data-track="44"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">定义列表中定义条目描述</span></p></td></tr><tr><td><p data-track="45" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">div</span></span></p></td><td><p data-track="46"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">定义列表中定义条目描述</span></span></p></td></tr><tr><td><p data-track="47" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">dl</span></p></td><td><p data-track="48"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">文章内容</span></p></td></tr><tr><td><p data-track="49" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">fieldset</span></span></p></td><td><p data-track="50"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">表单元素分组</span></span></p></td></tr><tr><td><p data-track="51" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">figcaption (HTML5)</span></p></td><td><p data-track="52"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">图文信息组标题</span></p></td></tr><tr><td><p data-track="53" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">figure (HTML5)</span></span></p></td><td><p data-track="54"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">可附标题内容元素</span></span></p></td></tr><tr><td><p data-track="55" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">footer (HTML5)</span></p></td><td><p data-track="56"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">区段尾或页尾</span></p></td></tr><tr><td><p data-track="57" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">form</span></span></p></td><td><p data-track="58"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">表单</span></span></p></td></tr><tr><td><p data-track="59" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">h1~h6</span></p></td><td><p data-track="60"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">标题</span></p></td></tr><tr><td><p data-track="61" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">header (HTML5)</span></span></p></td><td><p data-track="62"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">页头</span></span></p></td></tr><tr><td><p data-track="63" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">hgroup (HTML5)</span></p></td><td><p data-track="64"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">标题组</span></p></td></tr><tr><td><p data-track="65" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">hr</span></span></p></td><td><p data-track="66"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">分割线</span></span></p></td></tr><tr><td><p data-track="67" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">nav (HTML5)</span></p></td><td><p data-track="68"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">导航</span></p></td></tr><tr><td><p data-track="69" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">noframes</span></span></p></td><td><p data-track="70"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">针对不支持框架的用户的替代内容</span></span></p></td></tr><tr><td><p data-track="71" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">noscript</span></p></td><td><p data-track="72"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">针对不支持客户端脚本的用户的替代内容</span></p></td></tr><tr><td><p data-track="73" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">ol</span></span></p></td><td><p data-track="74"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">有序列表</span></span></p></td></tr><tr><td><p data-track="75" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">p</span></p></td><td><p data-track="76"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">段落</span></p></td></tr><tr><td><p data-track="77" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">section (HTML5)</span></span></p></td><td><p data-track="78"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">一个页面区段</span></span></p></td></tr><tr><td><p data-track="79" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">table</span></p></td><td><p data-track="80"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">表格</span></p></td></tr><tr><td><p data-track="81" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">tbody</span></span></p></td><td><p data-track="82"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">表格中的主体内容</span></span></p></td></tr><tr><td><p data-track="83" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">td</span></p></td><td><p data-track="84"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">表格中的单元</span></p></td></tr><tr><td><p data-track="85" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">tfoot</span></span></p></td><td><p data-track="86"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">表格中的表注内容（脚注）</span></span></p></td></tr><tr><td><p data-track="87" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">th</span></p></td><td><p data-track="88"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">表格中的表头单元格</span></p></td></tr><tr><td><p data-track="89" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">thead</span></span></p></td><td><p data-track="90"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">表格中的表头内容</span></span></p></td></tr><tr><td><p data-track="91" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">time</span></p></td><td><p data-track="92"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">日期/时间</span></p></td></tr><tr><td><p data-track="93" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">tr</span></span></p></td><td><p data-track="94"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">表格中的行</span></span></p></td></tr><tr><td><p data-track="95" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">ul</span></p></td><td><p data-track="96"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">无序列表</span></p></td></tr></tbody></table></div></div><p data-track="97"><br>行内元素</p><p data-track="98"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">一般情况下，行内元素只能包含数据和其他行内元素。</span></p><p data-track="99"><strong><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">格式</span></strong></p><p data-track="100"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">默认情况下，行内元素不会以新行开始，而块级元素会新起一行。</span></p><p data-track="101"><strong><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">标签与描述</span></strong></p><div class="tableWrapper"><div class="syl-table-wrap"><table style="min-width: 112px;"><colgroup><col><col></colgroup><tbody><tr><td><p data-track="102"><strong><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">标签名</span></span></strong></p></td><td><p data-track="103"><strong><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">描述</span></span></strong></p></td></tr><tr><td><p data-track="104" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">a</span></p></td><td><p data-track="105"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">锚</span></p></td></tr><tr><td><p data-track="106" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">abbr</span></span></p></td><td><p data-track="107"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">缩写</span></span></p></td></tr><tr><td><p data-track="108" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">acronym</span></p></td><td><p data-track="109"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">只取首字母的缩写</span></p></td></tr><tr><td><p data-track="110" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">b</span></span></p></td><td><p data-track="111"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">粗体</span></span></p></td></tr><tr><td><p data-track="112" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">bdo</span></p></td><td><p data-track="113"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">文字方向</span></p></td></tr><tr><td><p data-track="114" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">big</span></span></p></td><td><p data-track="115"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">大号文本</span></span></p></td></tr><tr><td><p data-track="116" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">br</span></p></td><td><p data-track="117"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">简单的折行</span></p></td></tr><tr><td><p data-track="118" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">button</span></span></p></td><td><p data-track="119"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">按钮 (push button)</span></span></p></td></tr><tr><td><p data-track="120" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">cite</span></p></td><td><p data-track="121"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">引用(citation)</span></p></td></tr><tr><td><p data-track="122" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">code</span></span></p></td><td><p data-track="123"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">计算机代码文本</span></span></p></td></tr><tr><td><p data-track="124" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">command</span></p></td><td><p data-track="125"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">命令按钮</span></p></td></tr><tr><td><p data-track="126" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">dfn</span></span></p></td><td><p data-track="127"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">项目</span></span></p></td></tr><tr><td><p data-track="128" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">del</span></p></td><td><p data-track="129"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">被删除文本</span></p></td></tr><tr><td><p data-track="130" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">em</span></span></p></td><td><p data-track="131"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">强调文本</span></span></p></td></tr><tr><td><p data-track="132" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">embed</span></p></td><td><p data-track="133"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">外部交互内容或插件</span></p></td></tr><tr><td><p data-track="134" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">i</span></span></p></td><td><p data-track="135"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">斜体字</span></span></p></td></tr><tr><td><p data-track="136" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">img</span></p></td><td><p data-track="137"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">图像</span></p></td></tr><tr><td><p data-track="138" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">input</span></span></p></td><td><p data-track="139"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">输入控件</span></span></p></td></tr><tr><td><p data-track="140" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">kbd</span></p></td><td><p data-track="141"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">键盘文本</span></p></td></tr><tr><td><p data-track="142" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">label</span></span></p></td><td><p data-track="143"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">input 元素的标注</span></span></p></td></tr><tr><td><p data-track="144" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">map</span></p></td><td><p data-track="145"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">图像映射</span></p></td></tr><tr><td><p data-track="146" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">mark</span></span></p></td><td><p data-track="147"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">有记号的文本</span></span></p></td></tr><tr><td><p data-track="148" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">objec</span></p></td><td><p data-track="149"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">内嵌对象</span></p></td></tr><tr><td><p data-track="150" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">progress</span></span></p></td><td><p data-track="151"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">任何类型的任务的进度</span></span></p></td></tr><tr><td><p data-track="152" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">q</span></p></td><td><p data-track="153"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">短的引用</span></p></td></tr><tr><td><p data-track="154" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">samp</span></span></p></td><td><p data-track="155"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">计算机代码样本</span></span></p></td></tr><tr><td><p data-track="156" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">select</span></p></td><td><p data-track="157"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">选择列表（下拉列表）</span></p></td></tr><tr><td><p data-track="158" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">small</span></span></p></td><td><p data-track="159"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">小号文本</span></span></p></td></tr><tr><td><p data-track="160" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">span</span></p></td><td><p data-track="161"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">文档中的节</span></p></td></tr><tr><td><p data-track="162" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">strong</span></span></p></td><td><p data-track="163"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">强调文本</span></span></p></td></tr><tr><td><p data-track="164" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">sub</span></p></td><td><p data-track="165"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">下标文本</span></p></td></tr><tr><td><p data-track="166" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">sup</span></span></p></td><td><p data-track="167"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">上标文本</span></span></p></td></tr><tr><td><p data-track="168" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">textarea</span></p></td><td><p data-track="169"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">多行的文本输入控件</span></p></td></tr><tr><td><p data-track="170" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">time</span></span></p></td><td><p data-track="171"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">日期/时间</span></span></p></td></tr><tr><td><p data-track="172" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">tt</span></p></td><td><p data-track="173"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">打字机文本</span></p></td></tr><tr><td><p data-track="174" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">var</span></span></p></td><td><p data-track="175"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">文本的变量部分</span></span></p></td></tr><tr><td><p data-track="176" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">video</span></p></td><td><p data-track="177"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">视频</span></p></td></tr><tr><td><p data-track="178" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">wbr</span></span></p></td><td><p data-track="179"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">可能的换行符</span></span></p></td></tr></tbody></table></div></div><h1 class="pgc-h-arrow-right" data-track="180">行内块元素</h1><p data-track="181"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">行内块状元素综合了行内元素和块状元素的特性，但是各有取舍。因此行内块状元素在日常的使用中，由于其特性，使用的次数也比较多。</span></p><p data-track="182"><strong><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">格式</span></strong><span style="color: #333333; --tt-darkmode-color: #A3A3A3;"> 默认情况下，行内元素不会以新行开始，能够识别宽高</span></p><p data-track="183"><strong><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">标签与描述</span></strong></p><div class="tableWrapper"><div class="syl-table-wrap"><table style="min-width: 112px;"><colgroup><col><col></colgroup><tbody><tr><td><p data-track="184"><strong><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">标签名</span></span></strong></p></td><td><p data-track="185"><strong><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">描述</span></span></strong></p></td></tr><tr><td><p data-track="186" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">img</span></p></td><td><p data-track="187"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">图片</span></p></td></tr><tr><td><p data-track="188" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">input</span></span></p></td><td><p data-track="189"><span style="color: #333333; --tt-darkmode-color: #B3B3B3;"><span style="background-color: #F8F8F8; --tt-darkmode-bgcolor: #191919;">输入框</span></span></p></td></tr><tr><td><p data-track="190" class="syl-line-pure-english"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">textarea</span></p></td><td><p data-track="191"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">多行文本</span></p></td></tr></tbody></table></div></div><h1 class="pgc-h-arrow-right" data-track="192">相互之间的转换</h1><ol start="1"><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">块级标签转换为行内标签：display:inline;</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">行内标签转换为块级标签：display:block;</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">转换为行内块标签：display：inline-block;</span></li></ol><h1 class="pgc-h-arrow-right" data-track="196">常?的meta标签</h1><p data-track="197"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">meta 标签由 name 和 content 属性定义，用来描述网页文档的属性，比如网页的作者，网页描述，关键词等，除了HTTP标准固定了一些name作为大家使用的共识，开发者还可以自定义name。</span></p><p data-track="198"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">常用的meta标签：</span></p><ol start="1"><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">charset，用来描述HTML文档的编码类型：</span></li></ol><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><meta charset="UTF-8" ></code></pre><ol start="2"><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">keywords，页面关键词：</span></li></ol><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><meta name="keywords" content="关键词" /></code></pre><ol start="3"><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">description，页面描述：</span></li></ol><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><meta name="description" content="页面描述内容" /></code></pre><ol start="4"><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">refresh，页面重定向和刷新：</span></li></ol><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><meta http-equiv="refresh" content="0;url=" /></code></pre><ol start="5"><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">viewport，适配移动端，可以控制视口的大小和比例：</span></li></ol><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></code></pre><ol start="6"><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">搜索引擎索引方式：</span></li></ol><pre class="prism-highlight prism-language-bash" class="syl-page-code"><code><meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"></code></pre><h1 class="pgc-h-arrow-right" data-track="211">相关面试题</h1><h1 class="pgc-h-arrow-right" data-track="212">HTML5有哪些更新</h1><ol start="1"><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">新增语义化标签：nav、header、footer、aside、section、article</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">音频、视频标签：audio、video</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">数据存储：localStorage、sessionStorage</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">canvas（画布）、Geolocation（地理定位）、websocket（通信协议）</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">input标签新增属性：placeholder、autocomplete、autofocus、required</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">history API：go、forward、back、pushstate</span></li></ol><p data-track="219"><strong><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">移除的元素有</span></strong></p><p data-track="220"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">纯表现的元素：basefont，big，center，font, s，strike，tt，u;</span></p><p data-track="221"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">对可用性产生负面影响的元素：frame，frameset，noframes；</span></p><h1 class="pgc-h-arrow-right" data-track="222">对HTML语义化的理解</h1><p data-track="223"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">语义化是指根据内容的结构化（内容语义化），选择合适的标签（代码语义化）。通俗来讲就是用正确的标签做正确的事情。 语义化的优点如下：</span></p><ol start="1"><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">有利于SEO，有利于搜索引擎爬虫；</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">增强了可读性，结构更加清晰，便于团队的开发与维护。</span></li></ol><h1 class="pgc-h-arrow-right" data-track="226">常?的meta标签有哪些</h1><p data-track="227"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">参考上文</span></p><h1 class="pgc-h-arrow-right" data-track="228">行内元素有哪些？块级元素有哪些？</h1><p data-track="229"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">参考上文</span></p><h1 class="pgc-h-arrow-right" data-track="230">head 标签有什么作用，其中什么标签必不可少？</h1><p data-track="231"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">head 标签用于定义文档的头部，它是所有头部元素的容器。 head 中的元素可以引用脚本、指示浏览器在哪里找到样式表、提供元信息等。 文档的头部描述了文档的各种属性和信息，包括文档的标题、在 Web 中的位置以及和其他文档的关系等。绝大多数文档头部包含的数据都不会真正作为内容显示给读者。 下面这些标签可用在 head 部分：base, link, meta, script, style, title 其中 title 定义文档的标题，它是 head 部分中唯一必需的元素。</span></p><h1 class="pgc-h-arrow-right" data-track="232">DOCTYPE(?档类型) 的作?</h1><p data-track="233"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">DOCTYPE是HTML5中一种标准通用标记语言的文档类型声明，它的目的是告诉浏览器（解析器）应该以什么样（html或xhtml）的文档类型定义来解析文档，不同的渲染模式会影响浏览器对 CSS 代码甚? JavaScript 脚本的解析。它必须声明在HTML?档的第??。 浏览器渲染页面的两种模式（可通过document.compatMode获取，比如，语雀官网的文档类型是CSS1Compat）：</span></p><ol start="1"><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">CSS1Compat：标准模式（Strick mode），默认模式，浏览器使用W3C的标准解析渲染页面。在标准模式中，浏览器以其支持的最高标准呈现页面。</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">BackCompat：怪异模式(混杂模式)(Quick mode)，浏览器使用自己的怪异模式解析渲染页面。在怪异模式中，页面以一种比较宽松的向后兼容的方式显示。</span></li></ol><h1 class="pgc-h-arrow-right" data-track="236">src和href的区别</h1><p data-track="237"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">src 用于替换当前元素，href 用于在当前文档和引用资源之间确立联系。</span></p><p data-track="238"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">src 是 source 的缩写，指向外部资源的位置，指向的内容将会嵌入到文档中当前标签所在位置；在请求 src 资源时会将其指向的资源下载并应用到文档内，例如 js 脚本，img 图片和 frame 等元素。 href 是 Hypertext Reference 的缩写，指向网络资源所在位置，建立和当前元素（锚点）或当前文档（链接）之间的链接，如果在文档中添加</span></p><h1 class="pgc-h-arrow-right" data-track="239">Canvas和SVG的区别</h1><ol start="1"><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">SVG： SVG可缩放矢量图形（Scalable Vector Graphics）是基于可扩展标记语言XML描述的2D图形的语言，SVG基于XML就意味着SVG DOM中的每个元素都是可用的，可以为某个元素附加Javascript事件处理器。在 SVG 中，每个被绘制的图形均被视为对象。如果 SVG 对象的属性发生变化，那么浏览器能够自动重现图形。 其特点如下：</span></li></ol><ul><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">不依赖分辨率</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">支持事件处理器</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">最适合带有大型渲染区域的应用程序（比如谷歌地图）</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">复杂度高会减慢渲染速度（任何过度使用 DOM 的应用都不快）</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">不适合游戏应用</span></li></ul><ol start="2"><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">Canvas： Canvas是画布，通过Javascript来绘制2D图形，是逐像素进行渲染的。其位置发生改变，就会重新进行绘制。 其特点如下：</span></li></ol><ul><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">依赖分辨率</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">不支持事件处理器</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">弱的文本渲染能力</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">能够以 .png 或 .jpg 格式保存结果图像</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">最适合图像密集型的游戏，其中的许多对象会被频繁重绘 注：矢量图，也称为面向对象的图像或绘图图像，在数学上定义为一系列由线连接的点。矢量文件中的图形元素称为对象。每个对象都是一个自成一体的实体，它具有颜色、形状、轮廓、大小和屏幕位置等属性。</span></li></ul><h1 class="pgc-h-arrow-right" data-track="252">渐进增强和优雅降级之间的区别</h1><ol start="1"><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">渐进增强（progressive enhancement): 主要是针对低版本的浏览器进行页面重构，保证基本的功能情况下，再针对高级浏览器进行效果、交互等方面的改进和追加功能，以达到更好的用户体验。</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">优雅降级 (graceful degradation)： 一开始就构建完整的功能，然后再针对低版本的浏览器进行兼容。</span></li></ol><p data-track="255"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">两者区别：</span></p><ul><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">优雅降级是从复杂的现状开始的，并试图减少用户体验的供给；而渐进增强是从一个非常基础的，能够起作用的版本开始的，并在此基础上不断扩充，以适应未来环境的需要；</span></li><li><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">降级（功能衰竭）意味着往回看，而渐进增强则意味着往前看，同时保证其根基处于安全地带。</span></li></ul><p data-track="258"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">“优雅降级”观点认为应该针对那些最高级、最完善的浏览器来设计网站。而将那些被认为“过时”或有功能缺失的浏览器下的测试工作安排在开发周期的最后阶段，并把测试对象限定为主流浏览器（如 IE、Mozilla 等）的前一个版本。 在这种设计范例下，旧版的浏览器被认为仅能提供“简陋却无妨 (poor, but passable)” 的浏览体验。可以做一些小的调整来适应某个特定的浏览器。但由于它们并非我们所关注的焦点，因此除了修复较大的错误之外，其它的差异将被直接忽略。</span></p><p data-track="259"><span style="color: #333333; --tt-darkmode-color: #A3A3A3;">“渐进增强”观点则认为应关注于内容本身。内容是建立网站的诱因，有的网站展示它，有的则收集它，有的寻求，有的操作，还有的网站甚至会包含以上的种种，但相同点是它们全都涉及到内容。这使得“渐进增强”成为一种更为合理的设计范例。这也是它立即被 Yahoo 所采纳并用以构建其“分级式浏览器支持 (Graded Browser Support)”策略的原因所在。</span></p> </div>
<div class="entry-details">
<details>
<summary>原文链接：<a href="http://sifan10.com/post/1376.html" rel="author">前端学习之路--重学开始 (一)（重学前端pdf）</a>，转发请注明来源！</summary>
</details>
</div>
</div>
<div class="entry-footer clearfix">
<span>
<a href="http://sifan10.com/" title="思凡资源网">
<span>思凡资源网</span></a>
</span>›
<span>
<a href="http://sifan10.com/category-1.html" title="技术文章">
<span>技术文章</span></a>
</span>›
<span>
<a href="http://sifan10.com/post/1376.html" title="前端学习之路--重学开始 (一)（重学前端pdf）">
<span>前端学习之路--重学开始 (一)（重学前端pdf）</span></a>
</span>
</div>
</div>
<nav class="pager">
<ol>
<li class="previous">
<a href="http://sifan10.com/post/1375.html" rel="prev">
<span class="text-muted">上一篇：</span>
<span>Java语言既能学前端也能些后端，为什么这么说呢?</span></a>
</li>
<li class="next">
<a href="http://sifan10.com/post/1378.html" rel="next">
<span class="text-muted">下一篇：</span>
<span>jeecg-boot 源码项目-强烈推荐使用</span></a>
</li>
</ol>
</nav>
</article><!-- #content --> <div id="sidebar" class="col-lg-4 col-md-4">
<aside id="recent-posts-1" class="panel panel-default widget clearfix widget_recent_entries">
<h3 class="panel-heading widget-title">最新文章</h3>
<ul>
<li>
<a href="http://sifan10.com/post/4586.html">性能出色，纯CSS实现的loading动画——Loaders.css</a></li>
<li>
<a href="http://sifan10.com/post/4585.html">IE将支持iOS和安卓? 微软称暂时没计划</a></li>
<li>
<a href="http://sifan10.com/post/4584.html">为何 Turf 能成为 JavaScript 地理空间引擎王者?</a></li>
<li>
<a href="http://sifan10.com/post/4583.html">Win10预览版IE浏览器正式支持HSTS</a></li>
<li>
<a href="http://sifan10.com/post/4582.html">韩国工程师为IE浏览器立墓碑:“它是下载其他浏览器的好工具”</a></li>
<li>
<a href="http://sifan10.com/post/4581.html">微软IE将集成Skype全部体验，支持实时通话</a></li>
<li>
<a href="http://sifan10.com/post/4580.html">谷歌浏览器ie兼容模式怎么设置在哪里?google怎么设置兼容模式</a></li>
<li>
<a href="http://sifan10.com/post/4579.html">关于中级会计师报名系统IE10/IE11兼容视图的设置方法</a></li>
<li>
<a href="http://sifan10.com/post/4578.html">IE11支持桌面和移动密码同步（ie11怎么设置保存密码）</a></li>
<li>
<a href="http://sifan10.com/post/4577.html">JavaScript开发者:Win10斯巴达浏览器很赞</a></li>
</ul>
</aside>
<aside id="tag_cloud-2" class="panel panel-default widget clearfix widget_tag_cloud">
<h3 class="panel-heading widget-title">标签云</h3>
<div class="tagcloud">
<a href="http://sifan10.com/tags-116.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端在线编辑器">前端在线编辑器
<span class="tag-link-count">(53)</span>
</a><a href="http://sifan10.com/tags-97.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端长连接">前端长连接
<span class="tag-link-count">(47)</span>
</a><a href="http://sifan10.com/tags-100.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="python写前端">python写前端
<span class="tag-link-count">(43)</span>
</a><a href="http://sifan10.com/tags-105.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端路由原理">前端路由原理
<span class="tag-link-count">(43)</span>
</a><a href="http://sifan10.com/tags-121.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端切图工具">前端切图工具
<span class="tag-link-count">(43)</span>
</a><a href="http://sifan10.com/tags-122.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端p6">前端p6
<span class="tag-link-count">(41)</span>
</a><a href="http://sifan10.com/tags-104.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="web前端安全">web前端安全
<span class="tag-link-count">(40)</span>
</a><a href="http://sifan10.com/tags-130.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端底噪">前端底噪
<span class="tag-link-count">(39)</span>
</a><a href="http://sifan10.com/tags-111.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="哈尔滨web前端培训">哈尔滨web前端培训
<span class="tag-link-count">(37)</span>
</a><a href="http://sifan10.com/tags-153.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="广州前端培训">广州前端培训
<span class="tag-link-count">(36)</span>
</a><a href="http://sifan10.com/tags-24.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="开发前端工具">开发前端工具
<span class="tag-link-count">(35)</span>
</a><a href="http://sifan10.com/tags-32.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端优化方法">前端优化方法
<span class="tag-link-count">(35)</span>
</a><a href="http://sifan10.com/tags-106.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="杭州前端工资">杭州前端工资
<span class="tag-link-count">(35)</span>
</a><a href="http://sifan10.com/tags-141.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端图表插件">前端图表插件
<span class="tag-link-count">(35)</span>
</a><a href="http://sifan10.com/tags-124.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端总线内存比">前端总线内存比
<span class="tag-link-count">(33)</span>
</a><a href="http://sifan10.com/tags-138.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端前沿技术">前端前沿技术
<span class="tag-link-count">(33)</span>
</a><a href="http://sifan10.com/tags-140.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端观察">前端观察
<span class="tag-link-count">(33)</span>
</a><a href="http://sifan10.com/tags-146.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端工程设计">前端工程设计
<span class="tag-link-count">(33)</span>
</a><a href="http://sifan10.com/tags-169.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端开发自我介绍">前端开发自我介绍
<span class="tag-link-count">(33)</span>
</a><a href="http://sifan10.com/tags-75.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="前端工程师前景">前端工程师前景
<span class="tag-link-count">(32)</span>
</a> </div>
</aside>
</div>
<!-- #sidebar -->
</div>
</div>
<!-- #main -->
<footer id="colophon" class="container">
<div class="panel panel-default text-muted">
<div class="panel-footer clearfix">
<a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2024111239号-2
</a> </div>
<!--<div class="panel-footer clearfix text-center">-->
<!-- Powered By <a href="https://www.zblogcn.com/" title="Z-BlogPHP 1.7.4 Build 173420" target="_blank" rel="noopener noreferrer">Z-BlogPHP 1.7.4</a>.-->
<!--</div>-->
</div>
</footer>
</body>
</html> <!--55.88 ms , 12 queries , 3024kb memory , 0 error-->