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 Why do you only need to write ?

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

What is the difference between using link and @import when importing styles on a page?

• 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]-->

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

How to use HTML5 offline storage? Can you explain the working principle?

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

How does the browser manage and load HTML5 offline storage resources?

• 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

Please describe cookies, sessionStorage and localStorage the difference?

• Cookie is data (usually encrypted) stored on the user’s local terminal (Client Side) by the website in order to identify the user’s identity

• Cookie data is always carried in the http request from the same origin (even if not needed), and will be passed back and forth between the browser and the server

• sessionStorageandlocalStorage Will not automatically send data to the server, only save it locally

• Storage size:

• cookieThe data size cannot exceed 4k

• sessionStorage and localStorageAlthough there are storage size limits, they are larger than cookies More, can reach 5M or larger

• Period time:

• localStorage Storage persistence Data will not be lost after the browser is closed unless the data is actively deleted

• sessionStorage Data will be automatically deleted after the current browser window is closed

• cookie The set cookie is valid until the expiration time, even if the window or browser is closed

What are the advantages and disadvantages of iframes?

• Disadvantages:

• iframe will block the Onload event of the main page

• The search engine's retrieval program cannot interpret this kind of page, which is not conducive to SEO

• iframe and the main page share the connection pool, and the browser has restrictions on connections in the same domain. Therefore, it will affect the parallel loading of the page

• You need to consider these two shortcomings before usingiframe. If you need to use iframe, it is best to dynamically add the src<a href="http://www.php.cn/wiki/48.html" target="_blank"> attribute value to </a>iframe through javascript, so that Bypassing the above two problems

• Advantages:

• is used to load slower content ( As advertised)

• can enable scripts to be downloaded in parallel

• can achieve cross-subdomain communication

What is the function of Label? How is it used?

• label label to define the relationship between form controls. When the user selects the label, the browser will automatically turn the focus to the form control related to the label

How to turn off the autocomplete function in HTML5 form?

• Set autocomplete=off for forms or inputs that do not want prompts.

How to achieve communication between multiple tabs in the browser? (Alibaba)

• WebSocket, SharedWorker

• You can also call local storage methods such as localstorge and cookies

How is webSocket compatible with low-end browsers? (Alibaba)

• Adobe Flash Socket 、

• ActiveX HTMLFile (IE) 、

• Send XHR based on multipart encoding,

• XHR based on long polling

Page visibility (Page Visibility What are the possible uses of API)?

• 通过 visibilityState 的值检测页面当前是否可见，以及打开网页的时间等;

• 在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放

如何在页面上实现一个圆形的可点击区域？

• map+area或者svg

• border-radius

• 纯js实现 需要求一个点在不在圆上简单算法、获取鼠标坐标等等

实现不使用 border 画出1px高的线，在不同浏览器的标准模式与怪异模式下都能保持一致的效果

<p></p>

如何实现浏览器内多个标签页之间的通信？

• iframe + contentWindow

• postMessage

• SharedWorker(Web Worker API)

• storage 事件(localStorge API)

• WebSocket

webSocket 如何兼容低浏览器？

• Adobe Flash Socket

• ActiveX HTMLFile (IE)

• 基于 multipart 编码发送 XHR

• 基于长轮询的 XHR

title 与 h1 的区别、b 与 strong 的区别、i 与 em 的区别？

• title 表示是整个页面标题，h1 则表示层次明确的标题，对页面信息的抓取有很大的影响

• strong 标明重点内容，有语气加强的含义，使用阅读设备阅读网络时，strong 会重读，而 b 是展示强调内容

• i内容展示为斜体，em 表示强调的文本

• 自然样式标签：b, i, u, s, pre

• 语义样式标签：strong, em, ins, del, code

• 应该准确使用语义样式标签, 但不能滥用。如果不能确定时，首选使用自然样式标签

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

bootstarp+table使用方法分析

前端中排序算法实例详解

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!