前端Web开发面试问题

决定浏览器的呈现模式: 对于实际操作,通知浏览器读取文档时用哪种解析算法。如果没有写,则浏览器则根据自身的规则对代码进行解析,可能会严重影响HTML 排版布局。浏览器有三种方式解析HTML文档。 * 非怪异(标准)模式 * 怪异模式 * 部分怪异(近乎标准)模式 关于IE浏览器的文档模式,浏览器模式,严格模式,怪异模式,DOCTYPE标签,可详细阅读[模式?标准!]的内容。

应用介绍

此项目是前端Web开发面试问题讲解。

## HTML 部分问题与解答

这里是 [Front End Web Development Quiz]HTML 部分问题与解答

1. Q: `<keygen>` 是正确的HTML5标签吗?

    A: 是。

    `<keygen>` 标签规定用于表单的密钥对生成器字段。当提交表单时,私钥存储在本地,公钥发送到服务器。是HTML5 标签。

2. Q: `<bdo>` 标签是否可以改变文本方向?

    A: 可以。

    `<bdo>`标签覆盖默认的文本方向。

    ```

    <bdo dir="rtl">Here is some text</bdo>

    ```

3. Q: 下列HTML代码是否正确?

    ```

    <figure>

        <img src="myimage.jpg" alt="My image">

        <figcaption>

            <p>This is my self portrait.</p>

        </figcaption>

    </figure>

    ```

    A: 正确

     `<figure>` 标签规定独立的流内容(图像、图表、照片、代码等等)。`figure` 元素的内容应该与主内容相关,但如果被删除,则不应对文档流产生影响。使用`<figcaption>`元素为`figure`添加标题(caption)。

4. Q: 哪种情况下应该使用`small`标签?当你想在`h1` 标题后创建副标题?还是当在`footer`里面增加版权信息?

    A: `small`标签一般使用场景是在版权信息和法律文本里使用,也可以在标题里使用标注附加信息(bootstrap中可见),但不可以用来创建副标题。

    > The HTML Small Element (`<small>`) makes the text font size one size smaller (for example, from large to medium, or from small to x-small) down to the browser's minimum font size.  In HTML5, this element is repurposed to represent side-comments and small print, including copyright and legal text, independent of its styled presentation.

5. Q: 在一个结构良好的web网页里,多个`h1`标签会不利于SEO吗?

    A: 不影响。

    > According to Matt Cutts (lead of Google's webspam team and the de facto expert on these things), using multiple `<h1>` tags is fine, as long as you're not abusing it (like sticking your whole page in an `<h1>` and using CSS to style it back to normal size). That would likely have no effect, and might trigger a penalty, as it looks spammy.

    > If you have multiple headings and it would be natural to use multiple `<h1>`'s, then go for it.

6. Q: 如果你有一个搜索结果页面,你想高亮搜索的关键词。什么HTML 标签可以使用?

    A:`<mark>` 标签表现高亮文本。

    > The HTML `<mark>` Element represents highlighted text, i.e., a run of text marked for reference purpose, due to its relevance in a particular context. For example it can be used in a page showing search results to highlight every instance of the searched for word.

7. Q: 下列代码中`scope` 属性是做什么的?

    ```

    <article>

        <h1>Hello World</h1>

        <style scoped>

            p {

                color: #FF0;

            }

        </style>

        <p>This is my text</p>

    </article>

    <article>

        <h1>This is awesome</h1>

        <p>I am some other text</p>

    </article>

    ```

    A: `scoped` 属性是一个布尔属性。如果使用该属性,则样式仅仅应用到 style 元素的父元素及其子元素。

8. HTML5 支持块级超链接吗?例如:

    ```

    <article>

        <a href="#">

            <h1>Hello</h1>

            <p>I am some text</p>

        </a>

    </article>

    ```

    HTML5中`<a>` 元素表现为一个超链接,支持任何行内元素和块级元素。

9. Q: 当下列的HTML代码加载时会触发新的HTTP请求吗?

    ```

    <img src="mypic.jpg" style="visibility: hidden" alt="My picture">

    ```

10. Q: 当下列的HTML代码加载时会触发新的HTTP请求吗?

    ```

    <div style="display: none;">

        <img src="mypic.jpg" alt="My photo">

    </div>

    ```

11. `main1.css`一定会在`alert('Hello world')`被加载和编译吗?

    ```

    <head>

        <link href="main1.css" rel="stylesheet">

        <script>

            alert('Hello World');

        </script>

    </head>

    ```

12. Q: 在`main2.css`获取前`main1`一定必须被下载解析吗?

    ```

    <head>

        <link href="main1.css" rel="stylesheet">

        <link href="main2.css" rel="stylesheet">

    </head>

    ```

13. Q: 在`Paragraph 1`加载后`main2.css`才会被加载编译吗?

    ```

    <head>

        <link href="main1.css" rel="stylesheet">

    </head>

    <body>

        <p>Paragraph 1</p>

        <p>Paragraph 2</p>

        <link href="main2.css" rel="stylesheet">

    </body>

    ```

。。。。。。。想了解更多请下载附件。

文件列表(部分)

名称 大小 修改日期
.editorconfig0.18 KB2019-09-11
google06290e14368c0ea3.html0.05 KB2019-09-11
index.html1.65 KB2019-09-11
package-lock.json14.23 KB2019-09-11
package.json0.35 KB2019-09-11
1.md3.91 KB2020-08-30
11.md2.17 KB2020-08-30
2.md2.18 KB2020-08-30
5.md4.81 KB2020-08-30
6.md5.48 KB2020-08-30
7.md4.50 KB2020-08-30
8.md0.48 KB2019-09-11
9.md0.49 KB2019-09-11
css.md1.42 KB2020-08-30
html.md0.73 KB2020-08-30
http.md0.50 KB2020-08-30
js.md2.21 KB2020-08-30
sw.js1.38 KB2019-09-11
android-icon-144x144.png4.13 KB2019-09-11
android-icon-192x192.png7.44 KB2019-09-11
android-icon-36x36.png1.24 KB2019-09-11
android-icon-48x48.png1.54 KB2019-09-11
android-icon-72x72.png2.10 KB2019-09-11
android-icon-96x96.png2.67 KB2019-09-11
apple-icon-114x114.png3.24 KB2019-09-11
apple-icon-120x120.png5.43 KB2019-09-11
apple-icon-144x144.png4.13 KB2019-09-11
apple-icon-152x152.png4.39 KB2019-09-11
apple-icon-180x180.png9.00 KB2019-09-11
apple-icon-57x57.png1.78 KB2019-09-11

立即下载

相关下载

[前端Web开发面试问题] 决定浏览器的呈现模式: 对于实际操作,通知浏览器读取文档时用哪种解析算法。如果没有写,则浏览器则根据自身的规则对代码进行解析,可能会严重影响HTML 排版布局。浏览器有三种方式解析HTML文档。 * 非怪异(标准)模式 * 怪异模式 * 部分怪异(近乎标准)模式 关于IE浏览器的文档模式,浏览器模式,严格模式,怪异模式,DOCTYPE标签,可详细阅读[模式?标准!]的内容。

评论列表 共有 0 条评论

暂无评论

微信捐赠

微信扫一扫体验

立即
上传
发表
评论
返回
顶部