Web front-end written test question bank HTML chapter

Summarized some web front-end interview (written test) questions to share with you. This article will first share with you the HTML part of the written test questions (with answers). You can do it yourself and see how many you can answer correctly!

Related recommendations: "Web Front-end Written Test Question Bank CSS Chapter"

Q1: Is <keygen></keygen> the correct HTML5 tag?

A: Yes.

<keygen></keygen> The tag specifies the key pair generator field to use for the form. When the form is submitted, the private key is stored locally and the public key is sent to the server. is an HTML5 tag.

Q2: <bdo></bdo> Can labels change the text direction?

A: Yes.

<bdo></bdo> tag overrides the default text direction.

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

Q3: Is the following HTML code correct?

<figure>
    <img src="/static/imghwm/default1.png"  data-src="myimage.jpg"  class="lazy"   alt="My image">
    <figcaption>
        <p>This is my self portrait.</p>
    </figcaption>
</figure>

A: Correct

<figure></figure> The tag specifies independent stream content (images, charts, photos, code, etc.). The content of the figure element should be related to the main content, but should have no impact on document flow if removed. Use the <figcaption></figcaption> element to add a caption to the figure.

Q4: Under what circumstances should the small tag be used? When you want to create a subtitle after an h1 title? Or should I add copyright information in the footer?

A: The small tag is generally used in copyright information and legal text. It can also be used to mark additional information in the title (visible in bootstrap), but it cannot be used to create subtitle.

The HTML Small Element (<small></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.

Q5: In a well-structured web page, will multiple h1 tags be detrimental to SEO?

A: No impact.

According to Matt Cutts (lead of Google's webspam team and the de facto expert on these things), using multiple

tags is fine, as long as you're not abusing it (like sticking your whole page in an

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

's, then go for it.

Excerpted from: http://www.quora.com/Does-using-multiple-h1-tags-on -a-page-affect-search-engine-rankings

Q6: If you have a search results page, you want to highlight search keywords. What HTML tags can be used?

A: The <mark></mark> tag displays highlighted text.

The HTML <mark></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.

Q7: What does the scope attribute do in the following code?

<article>
    <h1 id="Hello-nbsp-World">Hello World</h1>
    <style scoped>
        p {
            color: #FF0;
        }
    </style>
    <p>This is my text</p>
</article>
<article>
    <h1 id="This-nbsp-is-nbsp-awesome">This is awesome</h1>
    <p>I am some other text</p>
</article>

A: The scoped attribute is a Boolean attribute. If this attribute is used, the style is applied only to the parent element of the style element and its children.

Q8: Does HTML5 support block-level hyperlinks? For example:

<article>
    <a href="#">
        <h1 id="Hello">Hello</h1>
        <p>I am some text</p>
    </a>
</article>

A: Supported.

The element in HTML5 appears as a hyperlink and supports any inline elements and block-level elements.

Q9: Will a new HTTP request be triggered when the following HTML code is loaded?

<img src="/static/imghwm/default1.png"  data-src="mypic.jpg"  class="lazy"     style="max-width:90%" alt="My picture">

A: Yes

Q10: Will a new HTTP request be triggered when the following HTML code is loaded?

<div style="display: none;">
    <img src="/static/imghwm/default1.png"  data-src="mypic.jpg"  class="lazy"   alt="My photo">
</div>

A: Yes!

Q11: Will main1.css be loaded and compiled in alert('Hello world')?

<head>
    <link href="main1.css" rel="stylesheet">
    <script>
        alert(&#39;Hello World&#39;);
    </script>
</head>

A: Yes!

Q12: Does main1 have to be downloaded and parsed before main2.css is obtained?

<head>
    <link href="main1.css" rel="stylesheet">
    <link href="main2.css" rel="stylesheet">
</head>

A: no!

Q13: Will main2.css be loaded and compiled after Paragraph 1 is loaded?

<head>
    <link href="main1.css" rel="stylesheet">
</head>
<body>
    <p>Paragraph 1</p>
    <p>Paragraph 2</p>
    <link href="main2.css" rel="stylesheet">
</body>

A: yes!

[Related recommendations: html video tutorial, web front-end]

The above is the detailed content of Web front-end written test question bank HTML chapter. For more information, please follow other related articles on the PHP Chinese website!