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
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
CSS referenced by
@import will Wait until the page is loaded before loading
CSS2.1 and can only be used with
IE5 or above is recognized, and
link is a
XHTML tag, there is no compatibility issue
IE, MaxThon, TT, The World, 360, Sogou browser, etc. [Also known as MSHTML]
and above, FF, MozillaSuite/SeaMonkey
, etc.
and above. [Opera
The kernel was originally: Presto, now: Blink
;]
, etc. [Blink
of Chrome
(branch of WebKit
)]
HTML5 is no longer a subset of SGML, it is mainly about the addition of images, location, storage, multi-tasking and other functions
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:
<!--[if lt IE 9]> <script> src="http://html5shim.googlecode.com /svn/trunk/html5.js"</script><![endif]-->
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 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 Storage size: Period time: 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 using 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高的线,在不同浏览器的标准模式与怪异模式下都能保持一致的效果 如何实现浏览器内多个标签页之间的通信? 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中文网其它相关文章! 推荐阅读:
sessionStorage
andlocalStorage
Will not automatically send data to the server, only save it locally
cookie
The data size cannot exceed 4ksessionStorage
and localStorage
Although there are storage size limits, they are larger than cookies More, can reach 5M or larger
localStorage
Storage persistence Data will not be lost after the browser is closed unless the data is actively deletedsessionStorage
Data will be automatically deleted after the current browser window is closedcookie
The set cookie
is valid until the expiration time, even if the window or browser is closed
iframe
. 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
<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!