Take the HTML interview questions - 10 questions you must master

    Through my job interviews and listening to other people's interviews, I found that front-end interviews do not examine HTML a lot (should be a consensus), mainly new features of H5, head tags, inline elements and block elements, and semantic meanings waiting for examination. This article summarizes the interview questions that appear most frequently in html. It is enough to master the basics of their interviews. I will also summarize the interview questions of other front-end knowledge points later.

    1. What are the inline elements? What are block-level elements? What are the empty (void) elements?

    Inline elements: span, img, input, a, strong...
    Block-level elements: div, h1 to h6, ul, ol, li, footer, header, section, p...
    Empty elements: br, hr...
    

    Conversion problem between elements: display: inline; convert an element into an inline element display: inline-block; Convert an element into an inline block element display: block; convert an element into a block element

    2. Picture format problem

    png: Lossless compression, larger in size and volume than jpg, suitable for small icons
    jpg: Lossy compression, smaller than png, suitable for medium and large pictures
    gif: animation
    webp: supports lossy or lossless compression at the same time, with the same quality image, webp is smaller in size. Disadvantages: poor compatibility

    3. How to understand semantics

    1. Causes:
      When there was only DIV in the past, because it didn't have any semantic meaning, it all relied on CSS to display the style of the page. Therefore, developers proposed the semantics of HTML structure, and W3C formulated semantic tags.
    2. What is semantics:
      Semanticization refers to the selection of appropriate tags (code semantics) based on the structure of the content (semantic content), so that developers can read and write more elegant code, and at the same time allow browser crawlers and machines to analyze well . That is, the tags that make up the HTML structure should be meaningful, such as head means the head of the page, footer means the bottom of the page, not all of them are represented by div
    3. Semantic tags:
      Semantic elements: <article> <aside> <details> <footer> <main> <time> etc.
    4. Determine whether the page uses semantics:
      Remove the CSS of the page and look at the HTML code structure. If the page structure is still clear and the content can be displayed normally, then semantics is used.
    5. Why there are semantics and semantic advantages:
      • Conducive to SEO, helping crawlers to grab more effective information: crawlers rely on tags to determine the context and the weight of each keyword • Screen readers can use them as signposts to help visually impaired users navigate pages (That is, barrier-free web pages, please refer to: Accessibility Principles)
      • div finds meaningful code blocks more easily than nonsensical code blocks
      • Conducive to building a clear structure, conducive to the development and maintenance of the team
      • Better user experience, even if CSS cannot be loaded, the page structure is still clear

    4.H5 new features

    • Semantic tags
    • Media and video tabs

    <audio controls="controls"> <source src="" type="" /> </audio>

    <video muted="muted" loop="loop" controls>
             <source src="" type="" />
             Your browser does not support playing this video
    </video>
    
    • local cache: localStorage、sessionStorage
    • New features added to the form

           <li>Email: <input type="email" ></li>
           <li>URL: <input type="url" /></li>
           <li>Date: <input type="date" /></li>
           <li>Date: <input type="time" /></li>
           <li>Number: <input type="number" /></li>
           <li>Mobile phone number: <input type="tel" /></li>
           <li>Search: <input type="search" /></li>
           <li>Color: <input type="color" /></li>
      
    • Image function Canvas: If we want to add Canvas tag in our HTML document, we need ID, width and height.

      <canvas id="myCanvas" width="100" height="100"> </canvas>

    SVG:

    <svg width="100" height="100">
      <circle cx="50" cy="50" r="40" stroke="yellow" stroke-width="4" fill="red" />
    </svg>
    

    HTML SVG is a markup language for describing vector and raster graphics, and XML text files define SVG images and related behaviors.

    5. The difference between using link and @import when importing styles

    • order of appearance:
      link first, then @import (compatibility link is stronger than @import: link is the syntax provided by HTML, there is no compatibility problem @import is the syntax provided by CSS, only compatible with IE5 and above);
    • Loading order:
      link css is loaded at the same time when the page loads
      The css introduced by @import needs to be loaded after the page is loaded
    • The weight of the link style is higher than that of @import
    • It is recommended to use link

    Expansion
    The link tag can be preloaded through the rel attribute, such as <link rel="dns-prefetch" href=""> rel has several attributes:
    dns-prefetch: The browser will perform DNS resolution and cache the domain name in href. When requesting the domain name again, it can save the process of querying the IP, thereby reducing time loss
    prefetch/preload: download and cache a resource in advance, the difference is that prefetch may be ignored when the browser is busy, but preload will definitely download in advance
    preconnect: Pre-execute DNS resolution, TCP handshake, etc. before formally sending http requests. Save time by eliminating round trip delays
    prerender: The browser will not only load resources, but also parse and execute the page, and perform pre-rendering


    6. The title and alt of the img tag

    Difference one:
    title : The value displayed when the mouse moves into the image
    alt : The value displayed when the image cannot be loaded
    Difference two:
    At the level of seo, in order to increase the SEO effect, alt attributes should be added to describe the content or keywords of this picture, because the content of the picture cannot be captured.

    7. The difference between i and em

    definition:
    i: Entity label, used for text tilting.
    em: is a logical label, used to emphasize the text content
    the difference:
    i is just an italic label with no real meaning.
    em indicates the importance of the characters in the label for emphasis.
    Scenes:
    i is more used in font icons, em terms (medicine, biology)

    PS:

    The HTML emphasis element `<em> `marks content that the user should focus on
      `<em>` elements can be nested, and the deeper the nesting level, the more important the content is considered to be.
      Note: Normally, this element will be displayed as italic text by the browser
    


    8. The difference between title and h1

    definition:
    title: summarizes the website information, written in <head>, tells search engines or users what the content theme of this website is
    h1: Article subject content, written in <body>
    the difference:
    title is displayed on the title of the webpage, h1 is displayed on the content of the webpage
    For SEO, title is more important than h1

    9. What problems will result from setting the same id to multiple elements in a page

    The css style set according to the id will also appear.
    The element event is triggered according to the id, only the first element is valid and the following elements cannot be obtained normally

    test code
    <style>
        #one{
            color: aquamarine;
        }
    </style>
    <body>
        <div id="one">47</div>
        <div  id="one">587</div>
        <div  id="one">587</div>
    </body>
    
    <script>
       var one= document.getElementById('one')
         one.onclick=function(){
            console.log('123')
        }
    </script>
    


    10.HTML head tag

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
    </head>
    

    Document Type Declaration!DOCTYPE

    usage:

    <!DOCTYPE html>

    effect:

    • The <!DOCTYPE> declaration is placed at the very front of the document, before the tag. This tag tells the browser which HTML or XHTML specification the document uses
    • <!DOCTYPE> is not an HTML tag, it is a document type declaration tag

    page language lang

    <html lang="en"> specifies the html language type
    

    The 2 most common:

    1. en defines the language as English
    2. zh-CN defines the language as Chinese

    The role of lang:
    According to the lang attribute to set the css style of different languages, or the font tells the search engine to do accurate recognition
    Let the grammar checker do the language identification
    Help translation tool to do recognition
    Help web reader program to do recognition

    character set

    <meta charset="UTF-8" />
    

    A character set is a collection of characters.

    In order for a computer to accurately process various character set texts, character encoding is required so that the computer can recognize and store various texts.

    PS: Additionally, the <meta> element contains the name and content attributes: <meta http-equiv="X-UA-Compatible" content="initial-scale=1.0" name="viewport">

    • name specifies the type of element; the description should contain information about the element type.
    • content specifies the actual metadata content.
      These two meta elements are used to define the author of your page and provide a brief description of the page (it may make your page appear more SEO in relevant searches of search engines)

    Popular posts from this blog

    大学资料分享——广工计院各个科目实验报告、课设及期末复习资料!!

    Win10 远程计算机或设备将不接受连接

    JAVA Traffic Signal Light Course Design (Source Code + Report + Video Demonstration)

    Implementation of Ajax Interceptor