今天是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></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' /></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' /></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' /></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'></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'></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="imoney logbot">
</div>
<fieldset class="ainfo">
<legend align="center">点击这里复制本文地址</legend>
<div class="social-share" data-disabled="diandian"></div> <input type="text" value="http://www.gslnedu.com/post/3593.html" id="aurl">
<i class="fa fa-thumb-tack"></i>以上内容由<a href="http://www.gslnedu.com/" class="mlight">朽木教程网</a>整理呈现，请务必在转载分享时注明本文地址！如对内容有疑问，请联系我们，谢谢！ </fieldset>
<link rel="stylesheet" href="http://www.gslnedu.com/zb_users/theme/CmsDown/css/share.min.css">
<script src="http://www.gslnedu.com/zb_users/theme/CmsDown/script/jquery.share.min.js"></script>
<div class="tags"><a href="http://www.gslnedu.com/tags-234.html" target="_blank">html菜鸟教程</a></div>
<div class="nextlog">
<div class="prev"><span>上一篇：</span><a href="http://www.gslnedu.com/post/3592.html">如何使用postman做接口测试(菜鸟级攻略)</a></div> <div class="next"><span>下一篇：</span><a href="http://www.gslnedu.com/post/3594.html">[Eclipse篇]05.从菜鸟开始のSpket插件.md</a></div> </div>
<div class="link-box">
<h3>相关文章</h3>
<ul class="rexlist">
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4391.html" title="治愈焦虑!清晨两道 CSS 面试题，轻松开启元气学习日">治愈焦虑!清晨两道 CSS 面试题，轻松开启元气学习日</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4390.html" title="lol十月幸运召唤师网址 英雄联盟10月幸运召唤师最新地址">lol十月幸运召唤师网址 英雄联盟10月幸运召唤师最新地址</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4389.html" title="《原神》「风物之歌」交流平台限时开启">《原神》「风物之歌」交流平台限时开启</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4388.html" title="苹果手机的浏览器在哪里打开">苹果手机的浏览器在哪里打开</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4387.html" title="刷剧这里看，白嫖真的香">刷剧这里看，白嫖真的香</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4386.html" title="不花一分钱!提升网站访问速度">不花一分钱!提升网站访问速度</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4385.html" title="Day1 网络世界入门:从打开浏览器到数据抵达的全过程">Day1 网络世界入门:从打开浏览器到数据抵达的全过程</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4384.html" title="英特尔 Evo 认证 PC 对决 M1 Macbook:x86 生态加持，Evo 更省心">英特尔 Evo 认证 PC 对决 M1 Macbook:x86 生态加持，Evo 更省心</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4383.html" title="为什么我们有时打开网页会慢，这三种原因你必须知道">为什么我们有时打开网页会慢，这三种原因你必须知道</a></li>
<li><i class="fa fa-caret-right"></i><a href="http://www.gslnedu.com/post/4382.html" title="网站打开慢，如何提升网站打开速度?">网站打开慢，如何提升网站打开速度?</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="footerbar">
<div class="wrap">
<img src="http://www.gslnedu.com/zb_users/theme/CmsDown/images/qrcode.png" class="ft-qrcode" alt="qrcode"> <p class="ftp"><a href="http://www.gslnedu.com/">朽木教程网</a> ©<script>document.write(new Date().getFullYear());</script> All Rights Reserved. <a href="https://beian.miit.gov.cn/" target="_blank">蜀ICP备2024111239号-8
</a><br /><span class="fta"></span></p>
</div>
</div>
<link rel="stylesheet" href="http://www.gslnedu.com/zb_users/theme/CmsDown/css/lightgallery.min.css">
<script src="http://www.gslnedu.com/zb_users/theme/CmsDown/script/lightgallery-all.min.js"></script>
<script>
$(function(){
$(".logcon img:not([src*='.php'])").each(function(){
var path = $(this).attr("src"), width = $(this).width();
if(width >= 200 && !$(this).parent("a").length){
$(this).wrap('<a href="'+path+'" class="lightgallery"></a>');
}
});
setTimeout(function () {
$(".logcon").lightGallery({
thumbnail: false,
selector: '.lightgallery'
});
}, 800);
});
</script>
<div class="backtop"><span class="fa fa-angle-up"></span></div>
</body>
</html><!--65.86 ms , 11 queries , 3025kb memory , 0 error-->