2021-05-26

最新推荐文章于 2022-09-14 19:56:13 发布

小黑编程

最新推荐文章于 2022-09-14 19:56:13 发布

阅读量69

点赞数

分类专栏： H5 文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_44764595/article/details/117291458

版权

H5 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端面试知识梳理（1）

1.Html

A.语义化

1.什么是语义化？
根据内容的结构化（内容语义化），选择合适的标签（代码语义化）便于开发者阅读和写出更优雅的代码的同时让浏览器的爬虫和机器很好地解析
2.语义化的原因

为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构:（为了裸奔时好看）；
用户体验：例如title、alt用于解释名词或解释图片信息、label标签的活用；
有利于SEO：和搜索引擎建立良好沟通，有助于爬虫抓取更多的有效信息：爬虫依赖于标签来确定上下文和各个关键字的权重；
方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以意义的方式来渲染网页；
便于团队开发和维护，语义化更具可读性，是下一步吧网页的重要动向，遵循W3C标准的团队都遵循这个标准，可以减少差异化。

3.语义化的标签及使用

header 元素代表“网页”或“section”的页眉。作为整个页面或者一个内容块的标题。也可以包裹一节的目录部分，一个搜索框，一个nav，或者任何相关logo。
footer元素代表“网页”或“section”的页脚，通常含有该节的一些基本信息，譬如：作者，相关文档链接，版权资料。
hgroup元素代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将h1到h6元素放在其内，譬如文章的主标题和副标题的组合。
nav元素代表页面的导航链接区域。用于定义页面的主要导航部分。
aside元素被包含在article元素中作为主要内容的附属信息部分，其中的内容可以是与当前文章有关的相关资料、标签、名次解释等。
section元素代表文档中的“节”或“段”，“段”可以是指一篇文章里按照主题的分段；“节”可以是指一个页面里的分组。
article元素最容易跟section和div容易混淆，其实article代表一个在文档，页面或者网站中自成一体的内容，其目的是为了让开发者独立开发或重用。譬如论坛的帖子，博客上的文章，一篇用户的评论，一个互动的widget小工具。
article内部嵌套

//方法一:
<article>
    <h1>前端技术</h1>
    <p>前端技术有那些</p>

    <section>
        <h2>CSS</h2>
        <p>样式..</p>
    </section>

    <section>
        <h2>JS</h2>
        <p>脚本</p>
    </section>

</article>
//方法二：
<section>
    
    <h1>介绍: 网站制作成员配备</h1>

    <article>
        <h2>设计师</h2>
        <p>设计网页的...</p>
    </article>

    <article>
        <h2>程序员</h2>
        <p>后台写程序的..</p>
    </article>

    <article>
        <h2>前端工程师</h2>
        <p>给楼上两位打杂的..</p>
    </article>
</section>

B.CSS

1.盒子模型

内容（content）+内补白（padding）+边框（border）+外部白（margin）
标准盒子模型：只包含文本内容。
IE盒子模型：内容+border+padding

设置盒子模型样式 box-sizing
content-box默认值，标准盒子模型。
border-box ，IE盒子模型

2.弹性盒子

flex-direction 属性指定了弹性子元素在父容器中的位置.
flex-direction的值有:
row：横向从左到右排列（左对齐），默认的排列方式。
row-reverse：反转横向排列（右对齐，从后往前排，最后一项排在最前面。
column：纵向排列。
column-reverse：反转纵向排列，从后往前排，最后一项排在最上面。

justify-content 属性

内容对齐（justify-content）属性应用在弹性容器上，把弹性项沿着弹性容器的主轴线（main axis）对齐.
flex-start：