前端学习之路--重学开始 (一)

今天是2022年第一天,站在2022年的开始回首整个2021年并没有发现自己有很大的进步。2022年一定要行动起来,丰富自己。

2022年给自己定几个目标:

  1. 重新学习前端之路
  2. 搭建一个自己的博客网站 ---每周发送一至两篇文章记录自己重新学习前端之路
  3. 培养自己一个爱好
  4. 减肥
  5. 带老婆出去旅游一趟
  6. 每月读一本书

重学之路从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="entry-details">
						<details>
						<summary>原文链接:<a href="http://www.jieren365.com/post/4215.html" rel="author">前端学习之路--重学开始 (一)</a>,转发请注明来源!</summary>
						</details>
					</div>
				</div>
				<div class="entry-footer clearfix">
	              <span>
	                <a href="http://www.jieren365.com/" title="杰人编程网">
	                  <span>杰人编程网</span></a>
	              </span>›
	              <span>
	                <a href="http://www.jieren365.com/category-1.html" title="文章教程">
	                  <span>文章教程</span></a>
	              </span>›
	              <span>
	                <a href="http://www.jieren365.com/post/4215.html" title="前端学习之路--重学开始 (一)">
	                  <span>前端学习之路--重学开始 (一)</span></a>
	              </span>
            	</div>
			</div>
			<nav class="pager">
			<ol>    
				
            <li class="previous">
              <a href="http://www.jieren365.com/post/4214.html" rel="prev">
                <span class="text-muted">上一篇:</span>
                <span>JavaScript知识点——详细的Cookie总结</span></a>
            </li>
						            <li class="next">
              <a href="http://www.jieren365.com/post/4216.html" rel="next">
                <span class="text-muted">下一篇:</span>
                <span>分享12个面向前端开发人员的设计工具,提高你的生产力</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://www.jieren365.com/post/6329.html">霍尼韦尔Honeywell条码打印机常见问题和解决方法</a></li>
		  	              <li>
                <a href="http://www.jieren365.com/post/6328.html">通过字体映射实现图章签名(通过文字内容自动匹配图片)</a></li>
		  	              <li>
                <a href="http://www.jieren365.com/post/6327.html">VBA案例精选 查找含有公式的单元格</a></li>
		  	              <li>
                <a href="http://www.jieren365.com/post/6326.html">方舟像素字体ArkPixelFont——开源的泛中日韩像素字体</a></li>
		  	              <li>
                <a href="http://www.jieren365.com/post/6325.html">VBA案例精选 更改指定字符串的格式</a></li>
		  	              <li>
                <a href="http://www.jieren365.com/post/6324.html">系统小技巧:字体显示怪病 重置字体缓存</a></li>
		  	              <li>
                <a href="http://www.jieren365.com/post/6323.html">Python | 数据结构 - 冒泡排序和选择排序</a></li>
		  	              <li>
                <a href="http://www.jieren365.com/post/6322.html">数据结构与算法之冒泡排序(数据结构冒泡排序法详解)</a></li>
		  	              <li>
                <a href="http://www.jieren365.com/post/6321.html">常用排序算法:冒泡排序,快速排序</a></li>
		  	              <li>
                <a href="http://www.jieren365.com/post/6320.html">C++编程:函数的递归与应用案例(c++递归函数流程图)</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://www.jieren365.com/tags-7.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="arrays.copyof">arrays.copyof
	        	<span class="tag-link-count">(67)</span>
	        </a><a href="http://www.jieren365.com/tags-10.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="socketbind">socketbind
	        	<span class="tag-link-count">(67)</span>
	        </a><a href="http://www.jieren365.com/tags-38.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="strdup">strdup
	        	<span class="tag-link-count">(60)</span>
	        </a><a href="http://www.jieren365.com/tags-16.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="css resize">css resize
	        	<span class="tag-link-count">(58)</span>
	        </a><a href="http://www.jieren365.com/tags-23.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="流水灯代码">流水灯代码
	        	<span class="tag-link-count">(58)</span>
	        </a><a href="http://www.jieren365.com/tags-46.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="c++ cout">c++ cout
	        	<span class="tag-link-count">(57)</span>
	        </a><a href="http://www.jieren365.com/tags-1.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="css动画">css动画
	        	<span class="tag-link-count">(56)</span>
	        </a><a href="http://www.jieren365.com/tags-12.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="html frame">html frame
	        	<span class="tag-link-count">(54)</span>
	        </a><a href="http://www.jieren365.com/tags-20.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="css 鼠标手">css 鼠标手
	        	<span class="tag-link-count">(51)</span>
	        </a><a href="http://www.jieren365.com/tags-2.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="css transition">css transition
	        	<span class="tag-link-count">(47)</span>
	        </a><a href="http://www.jieren365.com/tags-39.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="eclipse使用">eclipse使用
	        	<span class="tag-link-count">(46)</span>
	        </a><a href="http://www.jieren365.com/tags-34.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="border-radius属性">border-radius属性
	        	<span class="tag-link-count">(44)</span>
	        </a><a href="http://www.jieren365.com/tags-27.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="opacity css">opacity css
	        	<span class="tag-link-count">(40)</span>
	        </a><a href="http://www.jieren365.com/tags-5.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="css cursor">css cursor
	        	<span class="tag-link-count">(37)</span>
	        </a><a href="http://www.jieren365.com/tags-140.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="navicat for mysql安装">navicat for mysql安装
	        	<span class="tag-link-count">(36)</span>
	        </a><a href="http://www.jieren365.com/tags-180.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="c++ 与或非">c++ 与或非
	        	<span class="tag-link-count">(36)</span>
	        </a><a href="http://www.jieren365.com/tags-181.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="java选择排序">java选择排序
	        	<span class="tag-link-count">(36)</span>
	        </a><a href="http://www.jieren365.com/tags-202.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="shutdown 重启">shutdown 重启
	        	<span class="tag-link-count">(36)</span>
	        </a><a href="http://www.jieren365.com/tags-11.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="copyofrange">copyofrange
	        	<span class="tag-link-count">(35)</span>
	        </a><a href="http://www.jieren365.com/tags-13.html" class="tag-cloud-link tag-link-6533 tag-link-position-45" style="font-size: 8pt;" aria-label="html框架">html框架
	        	<span class="tag-link-count">(35)</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">
						</div>
		<div class="panel-footer clearfix text-center">
			Theme by <a href="http://www.jieren365.com/" target="_blank">jieren365</a>.
		</div>
	</div>	
</footer>			
				
</body>
</html>	<!--71.79 ms , 12 queries , 3091kb memory , 0 error-->