| 失效链接处理 |
|
2020年校招前端面试问题整理 PDF 下载
本站整理下载：
相关截图：
主要内容：
⼀、HTML问题
语义化
语义类标签是纯⽂字的补充，⽐如标题、⾃然段、列表等纯⽂字不能表达的，需要依赖语义标签。在代
码中使⽤nav、p或者html5的新标签header、footer、section、article等就是语义化。
那么，不使⽤语义化，只使⽤div和span可以吗？
当今互联⽹产品中，HTML⽤于描述“软件界⾯”多过于“富⽂本”，⽽软件界⾯中，⽐如购物⻋功能中每个
购物⻋⾥⾯的商品和⽂本中的列表，以及按钮和表单中的Button，其实已经相差很远了，
结论：⽀持在任何“软件界⾯”的场景中，直接使⽤div和span
语义化的优点
但是，在很多⼯作场景中，正确使⽤语义标签的好处也显⽽易⻅：
1. 对开发者友好，便于与他⼈协作。使⽤语义标签增强了可读性，即使没有CSS，开发者也能够清晰
的看出⻚⾯结构，便于团队的开发和协作。
2. 让计算机能够快速的读懂内容，⾼效的处理信息，可以对搜索引擎（SEO）更友好。可以让搜索引
擎爬⾍更好的获取到更多有效的信息，有效提升⽹⻚的搜索量，并且语义类还可以⽀持读屏软件，
根据⽂章可以⾃动⽣成⽬录。
爬⾍下载到我们⽹⻚的 HTML 代码，搜索引擎如何更好地去理解⽹⻚的内容呢？
答：根据 HTML 既定的标签。
h1标签就代表是标题
p⾥⾯的就是段落详细内容，权重肯定没有标题⾼
ul⾥⾯就是列表
strong就是加粗的强调的内容
书写 HTML 时，恰当的使⽤语义化是⾮常重要的，是 W3C ⾟⾟苦苦制定出的标准。
不恰当的使⽤语义标签会产⽣副作⽤
误区：给所有的并列关系都套上ul -> 会导致⼤量冗余标签
正确使⽤：ul多数出现在⾏⽂中间，它的上⽂多数在提示：要列举某些项。
综上，错误的使⽤语义标签，会给机器阅读造成障碍、增加嵌套，给CSS编写增加负担。
态度：⽤对>不⽤>⽤错
重要的语义标签使⽤场景
1. ⾃然语⾔表达能⼒的补充：ruby、rt、rp
2. 没有该语义标签会产⽣歧义：em
3. ⽂章标题摘要：hgroup、section+h1
4. 适合机器阅读的整体结构：
场景：越来越多的浏览器推出“阅读模式”，以及各种⾮浏览器终端的出现，语义化HTML适合机器
阅读的特性变得越来越重要。
应⽤了语义化结构的⻚⾯，可以明确地提示出⻚⾯信息的主次关系，它能让浏览器很好第⽀持“阅
读视图功能”，还可以让搜索引擎的命中率提升，同时，它也对市场⽤户的读屏软件更友好。
正确的使⽤整体结构类的语义标签：
<body>
<header>
<nav>
……
</nav>
</header>
<aside>
<nav>
……
</nav>
</aside>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>
<address>……</address>
</footer>
</body>
类似报纸的多⽂章结构适合⽤article组织：
<body>
<header>……</header>
<article>
<header>……</header>
<section>……</section>
<section>……</section>
<section>……</section>
<footer>……</footer>
</article>
<article>
……
</article>
<article>
……
</article>
<footer>
<address></address>
</footer>
</body>
|
| Java1234官方群25： | 
|
| Java1234官方群25： | 838462530 |
苏公网安备 32061202001004号
