The HTML part of the web front-end development test

Tip: This is http://davidshariff.com/quiz/ front-end development of test questions given HTML part, according to my own understanding answer given, please Paizhuan, brush with the title ==> Github repository address .

Q: <keygen>Is it the correct HTML5 tag?

A: Yes.

<keygen>The label specifies the key pair generator field for the form. When submitting the form, the private key is stored locally and the public key is sent to the server. Is an HTML5 tag.
Q: <bdo>Can the label change the text direction?

A: Yes.

<bdo>The label overrides the default text direction.
```
<bdo dir="rtl">Here is some text</bdo>
```
Q: Are the following HTML codes correct?
```
<figure>
    <img src="myimage.jpg" alt="My image">
    <figcaption>
        <p>This is my self portrait.</p>
    </figcaption>
</figure>
```
A: Correct

<figure>Tags specify independent streaming content (images, charts, photos, codes, etc.). figureThe content of the element should be related to the main content, but if it is deleted, it should not affect the document flow. Use the <figcaption>element to figureadd caption.
Q: In which case should the smalllabel be used ? When you want to h1create a subtitle after the title? Or should I footeradd copyright information in it?

A: The smallgeneral usage scenarios of tags are used in copyright information and legal text. You can also use additional information in the title (visible in bootstrap), but it cannot be used to create subtitles.

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.
Q: In a well-structured web page, will multiple h1tags be bad for SEO?

A: No effect.

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.

Excerpt from: http://www.quora.com/Does-using-multiple-h1-tags-on-a-page-affect-search-engine-rankings
Q: If you have a search results page, you want to highlight the search keywords. What HTML tags can be used?

A: The <mark>label represents the highlighted text.

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.

Q: scopeWhat are the attributes in the following code ?

<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: The scopedattribute is a Boolean attribute. If this attribute is used, the style is only applied to the parent and child elements of the style element.

Does HTML5 support block-level hyperlinks? E.g:
```
<article>
    <a href="#">
        <h1>Hello</h1>
        <p>I am some text</p>
    </a>
</article>
```
A: Yes.

The <a>element in HTML5 appears as a hyperlink, supporting any inline elements and block-level elements.
Q: Will new HTTP requests be triggered when the following HTML code is loaded?
```
<img src="mypic.jpg" style="visibility: hidden" alt="My picture">
```
A: Wow
Q: Will new HTTP requests be triggered when the following HTML code is loaded?
```
<div style="display: none;">
    <img src="mypic.jpg" alt="My photo">
</div>
```
A: Meeting!

main1.cssWill it alert('Hello world')be loaded and compiled?

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

A: Yes!

Q: Must it be downloaded and analyzed main2.cssbefore getting main1it?

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

A: no!

Q: Will it be loaded and compiled Paragraph 1after main2.cssloading?

<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!

Summary of knowledge points:

For how the browser renders, you can refer to the following article:

Summary of knowledge points:

Guess you like