失效链接处理 |
2020q校招前端面试问题整?PDF 下蝲
本站整理下蝲Q?/strong>
链接Q?a target="_blank">https://pan.baidu.com/s/1d6064SM2J-la4dKrE28mMQ
提取码:(x)qalk
相关截图Q?/strong>
![]()
主要内容Q?/strong>
h、HTML问题
语义?/div>
语义cL{是U⽂字的补充Q⽐如标题、⾃然段、列表等U⽂字不能表辄Q需要依赖语义标{。在?/div>
码中低Tnav、p或者html5的新标签header、footer、section、article{就是语义化?/div>
那么Q不低T语义化,只div和span可以吗?
当今互联品中QHTML于描述“软g界⾯”多过?ldquo;富⽂?rdquo;Q❲软g界⾯中,如购物⻋功能中每个
购物⻋oq的商品和⽂本中的列表,以及(qing)按钮和表单中的ButtonQ其实已l相差很q了Q?/div>
l论Q⽀持在M“软g界⾯”的场景中Q直接div和span
语义化的优点
但是Q在很多h作场景中,正确低T语义标签的好处也䏝易⻅Q?/div>
1. 对开发者友好,便于与他h协作。语义标{֢Z可读性,即没有CSSQ开发者也能够清晰
的看出⻚q结构,便于团队的开发和协作?/div>
2. 让计机能够快速的L内容Q⾼效的处理信息Q可以对搜烦(ch)引擎QSEOQ更友好。可以让搜烦(ch)?/div>
擎爬q更好的获取到更多有效的信息Q有效提升⽹⻚的搜烦(ch)量,q且语义c还可以(g)持读屏YӞ
Ҏ(gu)章可以q动成录?/div>
爬⾍下蝲到我们⽹⻚的 HTML 代码Q搜索引擎如何更好地ȝ解⽹⻚的内容呢?
{:(x)Ҏ(gu) HTML 既定的标{?/div>
h1标签׃表是标题
pq⾯的就是段落详l内容,权重肯定没有标题q?/div>
ulq⾯是列表
strong是加粗的强调的内容
书写 HTML Ӟ恰当的语义化是⾮帔R要的Q是 W3C q⾟苦苦制定出的标准?/div>
不恰当的低T语义标签?x)副作T
误区Q给所有的q列关系都套上ul -> ?x)导致⼤量冗余标{?/div>
正确低TQul多数出现在⾏中_(d)它的上⽂多数在提C:(x)要列举某些项?/div>
lgQ错误的低T语义标签Q会(x)l机器阅读造成障碍、增加嵌套,lC(j)SS~写增加负担?/div>
态度QT?gt;不T>错
重要的语义标{场?/div>
1. q然语⾔表达能⼒的补充:(x)ruby、rt、rp
2. 没有该语义标{会(x)产Ω歧义Qem
3. 章标题摘要Qhgroup、section+h1
4. 适合机器阅读的整体结构:(x)
场景Q越来越多的览器推?ldquo;阅读模式”Q以?qing)各U⾮览器终端的出现Q语义化HTML适合机器
阅读的特性变得越来越重要?/div>
应T了语义化l构的⻚q,可以明确地提C出⻚⾯信息的主ơ关p,它能让浏览器很好W⽀?ldquo;?/div>
读视囑֊?rdquo;Q还可以让搜索引擎的命中率提升,同时Q它也对市场户的读屏Y件更友好?/div>
正确的整体结构类的语义标{:(x)
<body>
<header>
<nav>
……
</nav>
</header>
<aside>
<nav>
……
</nav>
</aside>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>
<address>……</address>
</footer>
</body>
cM报纸的多章l构适合articlel织Q?/div>
<body>
<header>……</header>
<article>
<header>……</header>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>……</footer>
</article>
<article>
……
</article>
<article>
……
</article>
<footer>
<address></address>
</footer>
</body>
|