Front-end interview questions HTML newbies need to know

HTML

Semanticization

• The semantics of the HTML tag means: by using Semantic tags (such as h1-h6) appropriately represent the document structure

• The semantics of css naming means: adding meaningful classes to html tags

• Why semantics is needed:

• After removing the style, the page will have a clear structure

• Blind people use screen readers to update Good reading

• Search engines can better understand the page, which is conducive to inclusion

• Facilitates the sustainable operation and maintenance of team projects

Briefly describe your understanding of HTML semantics?

• Do the right thing with the right tags.

• html semantics structure the content of the page and make the structure clearer, making it easier for browsers and search engines to parse;

• Even if there is no Style CSS is also displayed in a document format and is easy to read;

• #Search engine crawlers also rely on HTML markup to determine context and the weight of individual keywords, which is beneficial to SEO;

• Make it easier for people who read the source code to divide the website into chunks for easy reading, maintenance and understanding

Doctype function ? What is the difference between standards mode and compatibility mode?

• ##The declaration is located in the HTML document The first line, before the tag. Tells the browser's parser what document standard to use to parse this document. DOCTYPENon-existence or incorrect format will cause the document to be rendered in compatibility mode

• The formatting and JS operation modes of standard mode are based on the highest standards supported by the browser run. In compatibility mode, pages are displayed in a loosely backward-compatible manner, simulating the behavior of older browsers to prevent the site from not working

HTML5 is not based on SGML, so there is no need to reference the DTD, but a doctype is needed to regulate browser behavior (let browsers run the way they should)
HTML4.01 is based on SGML, so you need to reference the DTD to tell the browser the document type used by the document

• link

  belongs to the XHTML tag. In addition to loading CSS, it can also be used to define RSS, defines rel connection attributes and other functions; while @import is provided by CSS and can only be used to load CSS## When the

  # page is loaded,
link
• will be loaded at the same time, and the

  CSS referenced by @import will Wait until the page is loaded before loading

import
• is proposed by

  CSS2.1 and can only be used with IE5 or above is recognized, and link is a XHTML tag, there is no compatibility issue

What are the common browser kernels?

Trident
• Kernel:

  IE, MaxThon, TT, The World, 360, Sogou browser, etc. [Also known as MSHTML]

  ##Gecko
Kernel:
• Netscape6

  and above, FF, MozillaSuite/SeaMonkey, etc.

  Presto
Kernel:
• Opera7

  and above. [OperaThe kernel was originally: Presto, now: Blink;]

  Webkit
Kernel:
• Safari, Chrome

  , etc. [Blink of Chrome (branch of WebKit)]

  What are the new features and migrations of html5 Besides those elements? How to deal with browser compatibility issues with HTML5 new tags? How to differentiate between HTML and HTML5?

HTML5 is no longer a subset of SGML, it is mainly about the addition of images, location, storage, multi-tasking and other functions

• Painting canvas

• Video and audio elements for media playback

• Local offline storage localStorage long-term storage data, the data will not be lost after the browser is closed

• sessionStorage data will be automatically deleted after the browser is closed

• Content elements with better semantics, such as article, footer, header, nav, section

• Form controls, calendar, date, time, email, url , search

• New technology webworker, websocket, Geolocation

• Removed elements:

• Purely expressive elements: basefont, big, center, font, s, strike, tt, u

• Elements that negatively impact usability: frame, frameset , noframes

• Support HTML5 new tags:

• IE8/IE7/IE6 support generated by document.createElement method Tag

• You can use this feature to make these browsers support HTML5 new tags

• After the browser supports the new tag, you still need to add the tag default The style of

##What are the new features and what elements have been removed? How to deal with browser compatibility issues with HTML5 new tags? How to differentiate between HTML and HTML5?

• HTML5 is no longer a subset of SGML, it is mainly about the addition of images, location, storage, multi-tasking and other functions

• Painting canvas

• Video and audio elements for media playback

• Local offline storage localStorage long-term storage of data, the browser is closed The data will not be lost

• The sessionStorage data will be automatically deleted after the browser is closed

• Content elements with better semantics, such as article and footer , header, nav, section

• Form control, calendar, date, time, email, url, search

• New technology webworker, websocket , Geolocation

• Removed elements:

• ##Purely expressive elements: basefont, big, center, font, s, strike, tt, u

##Elements that negatively impact usability: frame, frameset, noframes

Support HTML5 new Tags:
IE8/IE7/IE6 supports tags generated through the document.createElement method
You can use this feature to make these The browser supports HTML5 new tags
After the browser supports the new tags, you still need to add the default style of the tag

Of course you can Directly use mature frameworks, such as html5shim

• <!--[if lt IE 9]>
  <script> src="http://html5shim.googlecode.com
  /svn/trunk/html5.js"</script><![endif]-->

  Copy after login

How to distinguish HTML5: DOCTYPE declares new structural elements and functional elements

When the user is not connected to the Internet, the site or application can be accessed normally. When the user is connected to the Internet, the cache file on the user's machine is updated
Principle: HTML5 offline storage is based on the caching mechanism (not storage technology) of a newly created .appcache file. Resources are stored offline through the parsing list on this file, and these resources will be stored like cookies. Come down. Later, when the network is offline, the browser will display the page through the data stored offline
How to use:
Add a manifest attribute to the page header as below;
Write offline storage resources in the cache.manifest file
When offline, operate window.applicationCache to implement requirements

CACHE MANIFEST
    #v0.11
    CACHE:
    js/app.js
    css/style.css
    NETWORK:
    resourse/logo.png
    FALLBACK:
    / /offline.html

• When online, the browser finds that the html header has the manifest attribute, and it will request the manifest file. If it is the first time to access the app, the browser will The content of the manifest file downloads the corresponding resources and stores them offline. If the app has been accessed and the resources have been stored offline, the browser will use the offline resources to load the page, and then the browser will compare the new manifest file with the old manifest file. If the file has not changed, no operation will be performed. , if the file changes, the resources in the file will be re-downloaded and stored offline.

• When offline, the browser directly uses the resources stored offline

<p style="height:1px;overflow:hidden;background:red"></p>

The above is the detailed content of Front-end interview questions HTML newbies need to know. For more information, please follow other related articles on the PHP Chinese website!