Basic theory of html

This article shares with you the basic theoretical knowledge about html. The content is very good. Friends who are interested can take a look at

HTML

---

Semanticization

• The semantics of HTML tags means: appropriately expressing the document structure by using tags that contain semantics (such as h1-h6)

• Css naming semantics refers to: adding meaningful classes to html tags

• Why semantics is needed:

• After removing the style, the page presents a clear structure

• Blind people can use screen readers to read better

• Search engines can better understand the page, with Conducive to inclusion

• Facilitates the sustainable operation and maintenance of team projects

Briefly describe your understanding of HTML semantics understand?

• 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 are the inline elements? What are block-level elements? What are the void elements?

Inline elements include:
• a b span img input select strong

  (emphasis tone)

Block level The elements are:
• p ul ol li dl dt dd h1 h2 h3 h4…p

Common empty elements:
• 
  

  ---

##What is the difference between using link and @import when importing styles on the 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

  Can you introduce your understanding of the browser core?

is mainly divided into two parts: rendering engine (

layout engineer

or
• Rendering Engine

  ) and JS engine Rendering engine: Responsible for obtaining the content of the web page (HTML, XML, images, etc.), organizing the information (such as adding CSS, etc.), and calculating the display method of the web page, and then outputting it to monitor or printer. Different browser kernels will have different grammatical interpretations of web pages, so the rendering effects will also be different. All web browsers, email clients, and other applications that need to edit and display network content require a kernel

• JS engine: parsing and executing javascript to achieve dynamic effects on web pages

• At first there was no clear distinction between the rendering engine and the JS engine. Later, the JS engine became more and more independent, and the kernel tended to refer only to the rendering engine

• 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 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
In 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 the difference between cookies, sessionStorage and localStorage?

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 required), and will be passed back and forth between the browser and the server
• sessionStorage

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

Storage size:
• cookie

  The 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, the data will not be lost after the browser is closed unless the data is actively deleted

• sessionStorage

  The data will be automatically deleted after the current browser window is closed

• cookie  设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭

iframe有那些缺点？

• iframe会阻塞主页面的Onload事件

• 搜索引擎的检索程序无法解读这种页面，不利于SEO

• iframe和主页面共享连接池，而浏览器对相同域的连接有限制，所以会影响页面的并行加载

• 使用iframe之前需要考虑这两个缺点。如果需要使用iframe，最好是通过javascript动态给iframe添加src属性值，这样可以绕开以上两个问题

Label的作用是什么？是怎么用的？

• label标签来定义表单控制间的关系,当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件

HTML5的form如何关闭自动完成功能？

• 给不想要提示的 form 或某个 input 设置为 autocomplete=off。

如何实现浏览器内多个标签页之间的通信? (阿里)

• WebSocket、SharedWorker

• 也可以调用localstorge、cookies等本地存储方式

webSocket如何兼容低浏览器？(阿里)

• Adobe Flash Socket 、

• ActiveX HTMLFile (IE) 、

• 基于 multipart 编码发送 XHR 、

• 基于长轮询的 XHR

页面可见性（Page Visibility API） 可以有哪些用途？

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

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

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

• map+area或者svg

• border-radius

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

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

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

网页验证码是干嘛的，是为了解决什么安全问题

• 区分用户是计算机还是人的公共全自动程序。可以防止恶意破解密码、刷票、论坛灌水

• 有效防止黑客对某一个特定注册用户用特定程序暴力破解方式进行不断的登陆尝试

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

• title属性没有明确意义只表示是个标题，H1则表示层次明确的标题，对页面信息的抓取也有很大的影响

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

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

页面导入样式时，使用 link 和 @import 有什么区别？

• link 属于HTML标签，除了加载CSS外，还能用于定 RSS等；@import 只能用于加载CSS

• 页面加载的时，link 会同时被加载，而 @import 引用的 CSS 会等到页面被加载完再加载

• @import 只在 IE5 以上才能被识别，而 link 是HTML标签，无兼容问题

介绍一下你对浏览器内核的理解？

• 浏览器内核主要分为两部分：渲染引擎(layout engineer 或 Rendering Engine) 和 JS引擎

• 渲染引擎负责取得网页的内容进行布局计和样式渲染，然后会输出至显示器或打印机

• JS引擎则负责解析和执行JS脚本来实现网页的动态效果和用户交互

• 最开始渲染引擎和JS引擎并没有区分的很明确，后来JS引擎越来越独立，内核就倾向于只指渲染引擎

常见的浏览器内核有哪些？

• Blink内核：新版 Chrome、新版 Opera

• Webkit内核：Safari、原Chrome

• Gecko内核：FireFox、Netscape6及以上版本

• Trident内核（又称MSHTML内核）：IE、国产浏览器

• Presto内核：原Opera7及以上

HTML5有哪些新特性？

• New selectors document.querySelector, document.querySelectorAll

• Drag and drop API

• Media playback video and audio

• Local storage localStorage and sessionStorage

• Offline application manifest

• Desktop Notifications

• Semantic tags article, footer, header, nav, section

• Enhanced form controls calendar, date, time , email, url, search

• Geolocation

• Multi-tasking webworker

• Full double Industrial communication protocol websocket

• History management history

• Cross-domain resource sharing (CORS) Access-Control-Allow-Origin

• Page visibility change event visibilitychange

• Cross-window communication PostMessage

• Form Data object

• Paintingcanvas

HTML5 removes those elements?

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

• Influence on usability Negatively affected elements: frame, frameset, noframes

How to deal with browser compatibility issues with HTML5 new tags?

• Create new tag via document.createElement

• Use shim html5shiv.js

How to distinguish between HTML and HTML5?

• DOCTYPE declaration, new structural elements, functional elements

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

• The offline storage principle of HTML5:

• When the user is online, save and update the cache file on the user's machine; When users are offline, they can access offline storage site or application content normally

• HTML5 offline storage usage:

• Set the manifest attribute in the html tag of the document, such as manifest="/offline.appcache"

• Create a new manifest file in the project. The naming suggestion for the manifest file is: xxx.appcache

• Configure the correct MIME-type on the web server, that is, text/cache-manifest

How does the browser take HTML5 offline? Storage resources are managed and loaded?

• When online, the browser finds that the html tag has a manifest attribute, and it will request the manifest file

• If it is the first When the app is accessed once, the browser will download the corresponding resources according to the contents of the manifest file and store them offline

• If the app has been visited and the resources have been stored offline, the browser will compare The new manifest file is the same as 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 will directly use the resources stored offline.

#What are the advantages and disadvantages of iframe?

• Advantages:

• Used to load slower content (such as ads)

• Can enable scripts to be downloaded in parallel

• Can achieve cross-subdomain communication

• Disadvantages:

• iframe will block the onload event of the main page

• cannot be recognized by some search engines

• It will generate a lot of pages, which is not easy to manage

What is the function of label? How to use it?

• label label to define the relationship between form controls:

• When the user selects the label label, the browser will automatically Turn the focus to the form control related to the label label

• ##Usage method 1:

• < ;label for="mobile">Number:

• ##

Usage method 2:
##Date:
##How to achieve communication between multiple tab pages in the browser?

iframe + contentWindow

• postMessage

• SharedWorker(Web Worker API)

• storage event (localStorge API)

• WebSocket

• How webSocket is compatible with low browsing device?

• Adobe Flash Socket

• ActiveX HTMLFile (IE)

• Send XHR based on multipart encoding

• XHR based on long polling

What are the possible uses of Page Visibility API?

• Automatically pause the playback of music or video when the page is switched to other background processes

• When the user browses other pages , pause the automatic playback of the slideshow on the homepage of the website

• After completing the login, automatically synchronize the login status of other pages without refreshing

title and h1 The difference between b and strong, the difference between i and em?

• title represents the title of the entire page, h1 represents a clearly hierarchical title, which has a great impact on capturing page information

• strong indicates key content and has the meaning of strengthening the tone. When using a reading device to read the Internet, strong will be stressed, while b

is to display the emphasized content

• i Content is displayed in italics, em represents emphasized text

• Natural style tags: b, i, u, s, pre

• Semantic style tags: strong, em, ins, del, code

• ##Semantic style tags should be used accurately, but not abused. If you are not sure, it is preferred to use natural style tags

Related recommendations:

A few basic HTML knowledge points

Basic knowledge of html in the front-end

Detailed explanation of basic html image knowledge

The above is the detailed content of Basic theory of html. For more information, please follow other related articles on the PHP Chinese website!