HTML面試知識點總結

時間 2019-11-17

標籤 html 面試知識總結欄目 HTML 简体版

原文原文鏈接

寫在前面的話

之間一直習慣用oneNote記前端筆記，一我的總結筆記太孤單，全部最近想陸續的把筆記遷移到博客平臺上分享分享, 興奮ing (下圖是博主拍的底特律街頭一角, 順便分享下底特律面貌~)javascript

what's the HTML?

HTML is short for Hypertext Markup Language
HTML is used to tell your browser how to structure the web page
HTML consists of a series of elements, which are the building block of the html pages

3 Ways to apply CSS styles in HTML document?

inline style
embedded style sheet
external style sheet

The <link>element always goes inside the head of your document. this takes 2 attributes: rel=' stylesheet', which indicates that it's the document's stylesheet. and href, which contains the path to the stylesheet filecss

What's DOCTYPE? What is it used for? Why do u need it?

what's DOCTYPE: Doctype tells the browser which version of HTML/XHTML standard is used and how to render the page.
why we use "Doctype":

It ensures how elements should be displayed on the page
It also makes the browser's life easier. otherwise, the browser will guess and will go the quirk mode. Moreover, doctype is required to Validate markup.

Does a tag is a HTML tag?

Nope, the <!DOCTYPE html> declaration is not an HTML tag.html

HTML5爲何只須要寫?

HTML不基於SGML，所以不須要對DTD進行引用，可是須要doctype來規範瀏覽器的行爲（讓瀏覽器以應該的運行方式去運行文檔。而 HTML4.01基於SGML，因此須要對DTD進行引用，才能告知瀏覽器文檔所使用的文檔類型。前端

What's XHTML?

XHTML(Extensible Hyper Text Markup language).
XHTML is the earlier version of HTML that was designed by taking the good qualities of HTML and XML.
XHTML is stricter than other versions. some example are like:

Elements must always be closed.
Elements must be properly nested.
Attributes names must be in lowercase and must be quotedhtml5

XHTML VS HTML

HTML is based on SGML. XHTML is based on XML.
XHTML is more strict than HTML. For example:

XHTML is case sensitive, HTML is not case sensitive (XHTML標籤名必須用小寫字母)
XHTML tags should be closed or self closed, HTML is not required to end the tag. (XHTML 元素必須被關閉)
XHTML should have one root element, HTML is not mandatory to have one root element. (XHTML 文檔必須擁有根元素)

link VS `@import`

（1）link屬於XHTML tag，而@import是CSS提供的;java

（2）頁面被加載的時，link會同時被加載，而@import引用的CSS會等到頁面被加載完再加載;web

（3）import只在IE5以上才能識別，而link是XHTML標籤，無兼容問題;算法

（4）link方式的樣式的權重高於@import的權重. 瀏覽器

What' HTML tag?

HTML tag is a piece of code that is wrapped by the angle brackets
HTML tag is a keyword that is understood by the browser to display the content

What are self-closing tag/void tags/empty elements/singleton tags?

In HTML5, self-closing tags do not require slash (/) for closing.
They are also called void or empty elements and sometimes called singleton tags.
common void tags: <br> <hr> <img> <input> <link> <meta>
other rear void tags: <area> <base> <col> <command> <embed> <keygen> <param> <source> <track> <wbr>

What are HTML elements?

Html elements are the building block of the HTML pages.
They consist of start tag, content and the end tag except the empty elements like <br>
The content of HTML elements doesn't have to be just string, like:<p> My cat is <em>very</em>cute </p>

what are html attributes?

html attributes define property of an element.
They provide additional information about the element and help in changing the functionality of element.

The element & metadata in HTML

<head> element is the part which is not displayed in the web browser when the page is loaded.
<head> element contains information like <title>, CSS, js, links to custom favicons, and other metadata( data about the HTML, such as the author, keyword, description etc).

Introduce `<meta>` tag as much as you can

<meta> tag is inside of <head> tag, and it's not displayed in a web browser.
<meta> tag provides metadata about HTML document.
meta elements are used to specify page description, keywords, author and other metadata.
<meta> tags can improve the optimization of your site.

metadata in `<meta>`

metadata is data that describes data, metadata provide additional information about the HTML document.
metadata make your page appear higher in relevant searches performed in search engines.
meta tag should be always inside the head tag, and they are not displayed on the page but they are machine parsable.

常見的meta data:bash

<meta charset='utf-8'> define the character set is being used. Like'utf-8' helps us in writing text in all kinds of languages like Chinese,Japanese
<meta name='author' content='mingyue liu'>
<meta nane='keyword' content='mingyue website mimi dudu'> --目的------>improve search ranking(SEO);
<meta name='description' content= ' this is the description for the webpage'>
<meta property='og:image' content='mimi.png'> (open graph data in <meta>)

tabindex屬性

'tabindex' attribute is responsible for indicating if an element is focusable by keyboard navigation.
Syntax: tabindex="numeric_value" This numeric_value is the weight of element. A lower value will be accessed first.
tabindex is useful to create accessible widgets with JavaScript.

boolean attribute

The presence of a boolean attribute on an element represents the true value and the absence of the attribute represents the false value.
common boolean attribute has:

disabled
checked
readonly
selected

"lang" attribute

'lang' attribute helps we defined the language of the web page.
your HTML document will be indexed more effectively by search engines.
it's useful to people with visual impairments using screen readers.

http-equiv meta attribute

This attribute is used by servers to gather information about the page using the HTTP headers

href and target attributes in `<a>` tag

href attribute specifies the destination address
target attribute specifies where to open the linked document, For example "_blank" opens the documents in new window or tab.

alt attribute in `<img>`

alt attribute in <img> is used in order to display the alternative text in case the image cannot be rendered for some reasons.

How to refresh the page every 10 seconds using http-equiv attribute?

<meta http-equiv="refresh" content="10" >複製代碼

what is "Open Graph Data"?

"Open Graph Data" is a metadata protocol that Facebook invented to provide richer metadata for websites.

what are semantic elements? semantic tag VS div?

semantic elements are those that have a clear meaning and these elements are both understood by the user and the browser.
common semantic tag have: <header> <nav> <main> <article> <section> <aside> <footer>

why we use semantic tag instead of div tag？

For developer, semantic tags are easy to maintain
semantic is good for SEO
semantic is good for accessibility.

how to associate `<label>` and `<input>`?

by using "for" attribute on <label> tag. and set id on the <input> tag (屬性法)

<label for="Name"> Number </label>
<input type="text" name="Name" id="Name" />複製代碼

<label> nest <input> also can associate them (嵌入法) <label>Date:<input type="text" name="B"/></label>

`<title>` element

the <title> element is metadata that represents the title of the whole HTML page
it will be shown as the tab name, it will also be the name if when you save the page into the bookmark.

`<q>` VS `<blockquote>`

<q> element is used to define a short quotation and it is an inline element
<blockquote> specifies a section cited from another source and it is a block level element meaning it takes the whole line and space.

Which tag would you prefer if you have to display a poem as the content?

<pre> tag is used to display the preformatted text with unusual spaces in the text. It preserves spaces and line break.

`<datalist>` VS `<select>`

datalist need combine with input tag, select can work alone.
For datalist, user can type their own data in the input tag, for select, user can not type their own data.

`<a>`的三個用處

<a> as anchor tag, it can redirect to another website （normal function）
use <a> to find document fragment ( 去同一網頁的不一樣位置 )
use <a> to send email: <a href="mailto: mliu2@ltu.edu" / >

what is `<form>`?

Form can submit information to server.
An HTML form is a section of a document containing normal content, markup, special elements called controls (checkboxes, radio buttons, menus, etc.), and labels on those controls.
Form的屬性有： action, method target name

<form action="" method="GET" target="_blank">  </form>
//the action attribute defines the action to be performed when the form is submitted.複製代碼

你對瀏覽器內核的理解？

主要分紅兩部分：渲染引擎(layout engineer或Rendering Engine)和JS引擎。

渲染引擎：負責取得網頁的內容（HTML、XML、圖像等等）、整理訊息（例如加入CSS等），以及計算網頁的顯示方式，而後會輸出至顯示器或打印機。

瀏覽器的內核的不一樣對於網頁的語法解釋會有不一樣，因此渲染的效果也不相同。全部網頁瀏覽器、電子郵件客戶端以及其它須要編輯、顯示網絡內容的應用程序都須要內核。

JS引擎則：解析和執行javascript來實現網頁的動態效果。

最開始渲染引擎和JS引擎並無區分的很明確，後來JS引擎愈來愈獨立，內核就傾向於只指渲染引擎。

瀏覽器的內核分別是什麼?

Trident內核：IE,MaxThon,TT,The World,360,搜狗瀏覽器等。[又稱MSHTML]
Gecko內核：Netscape6及以上版本，FF,MozillaSuite/SeaMonkey等
Presto內核：Opera7及以上。 [Opera內核原爲：Presto，現爲：Blink;]
Webkit內核：Safari,Chrome等。 [ Chrome的：Blink（WebKit的分支）]

What's `<Canvas>`?

The html <Canvas> element helps to draw graphics with the help of javascript.
The <Canvas> elements are only a container for graphics. we need to use the script to actually draw the graphics

What's `<SVG>` tag?

svg stands for scalable vector graphics.
<svg> is a container for svg graphics
svg has several methods for drawing path, boxes, circles, text and graphic images.

Canvas VS SVG

How to serve a page content in multiple languages?

You would generally use a CMS for this, which would be wired up with different content for each language, but still output the same structure and styling.

What is semantic HTML? Why you would like to use semantic tags?

Semantic HTML or semantic markup is HTML that introduces meaning to the web page rather than just presentation.
Examples of semantic elements: <form>, <main>, and <article> - it can clearly define its content.

Search Engine Optimization, accessibility, repurposing, light code.

Semantic tag improves accessibility. Many visually impaired person rely on semantic tag helps to interpret page content clearly.
semantic tag improve SEO, making the website more findable.

What does 「semantically correct」 mean?

It means that you use them for what they are supposed to, like:

It means that you use tables for tabular data but not for layout
it means that you use lists for listing things, strong and em for giving text emphasis, and the like.

Frame, Iframe, Frameset之間的區別是什麼？

Frameset 和 Frame的區別：

frame元素是和frameset元素一塊兒使用，用於將頁面切分紅多個部分，每一個部分是一個frame。每一個frame顯示一個單獨的網頁。

<Frameset></Frameset>用來劃分框架, 每個框架由<Frame></Frame>標記。

<Frame></Frame>必須在<Frameset></Frameset>以內使用

<Frameset>爲框架標記，說明該網頁文檔爲框架組成，並設定文檔中組成框架集的框架的佈局

<Frame>用以設置組成框架集中各個框架的屬性。

好比：

<frameset border=1 frameSpacing=1 borderColor=#47478d rows=* cols=180,*> <frame src="inc/admin_left.htm" name=left scrolling=no id="left"> <frame src="inc/admin_center.htm" name=main scrolling="no"></frameset>複製代碼

在上面的例子當中，<Frameset></Frameset>把頁面分爲左右兩個部分，左側框架中的頁面是admin_left.htm，右側框架中的頁面是admin_center.html

注意：

<frame></frame>標記的框架順序從左至右或從上至下
文檔中沒有body
frameset和frame標籤必須在一塊兒使用
frame和frameset在html5中已經被棄用了

Frame 和 IFrame的區別：

IFrame和Frame標記的最大區別是在網頁中嵌入的<Iframe></Iframe>所包含的內容與整個頁面是一個總體, 而<Frame></Frame>所包含的內容是一個獨立的個體，是能夠獨立顯示的。
應用Iframe還能夠在同一個頁面中屢次顯示同一內容，而沒必要重複這段內容的代碼。
iframe是將一個網頁嵌到當前的文檔中來. 對於frame，同級的各個frame以前的並行的，dom沒有包含關係，是相互獨立的。而iframe則是當前dom的一個子節點。
frame不能脫離frameSet單獨使用，iframe能夠

iframe有那些缺點？

iframe會阻塞主頁面的Onload事件；
iframe和主頁面共享鏈接池，而瀏覽器對相同域的鏈接有限制，因此會影響頁面的並行加載。
若是須要使用iframe，最好是經過javascript動態給iframe添加src屬性值，這樣能夠能夠繞開以上兩個問題。
iframe is bad for SEO.

cookies，sessionStorage 和 localStorage 的區別？

LocalStorage is local storage for your browsers, it can save up to 10MB.

SessionStorage is session based and will be deleted after closing your browser, also can save less than LocalStorage, like up to 5MB

Cookies are very tiny data storing in your browser, that can save up 4KB and can be accessed through server or browser both.

What's data-attributes? what is it used for?

Data- attributes are used to store custom data directly inside HTML tags. They are easily-accessible from css and javascript.

頁面可見性（Page Visibility API）能夠有哪些用途？

經過 visibilityState 的值檢測頁面當前是否可見，以及打開網頁的時間等在頁面被切換到其餘後臺進程的時候，自動暫停音樂或視頻的播放；

如何在頁面上實現一個圓形的可點擊區域？

一、map+area或者svg
二、border-radius
三、純js實現須要求一個點在不在圓上簡單算法、獲取鼠標座標等等

what is accessibility?

Accessibility can making your website usable by as many people as possible, it benefits disabilities people and slow network connections.

how to improve website Accessibility?

Html improve website Accessibility:

Use correct semantic tag. like <main> <article> <header>
make sure all the images have "alt" text.
building keyboard accessiblity, like using "tabindex" attribute on tags.
In a table, using <th> and <caption> tags.

Css improve website Accessiblity:

using modern page layout instead of "table layout".

Js improve website Accessiblity.(還沒寫完，之後補上.....)

What are new features of HTML5?

如何區分Html和html5 ?

using "document declaration" to distinguish them. HTML5 only have <!DOCTYPE>(在文檔聲明上，html有很長的一段代碼，而且很難記住這段代碼，都是靠工具直接生成，而html5倒是不一樣，只有簡簡單單的聲明，也方便人們的記憶，更加精簡。)

Html5 have semantic elements, html 4 don't have. (在結構語義上；html4.0沒有體現結構語義化的標籤，這樣表示網站的頭部。html5在語義上卻有很大的優點。提供了一些新的html5標籤。)

html5 移除的元素有哪些?

純表現的元素：basefont big center font s strike tt u

對可用性產生負面影響的元素: frame frameset noframes

What is `<output>` tag ?

<output> 是html5 中的新標籤，it used in form.
IE 不支持output 標籤

The output element represents the result of a calculation.

Does HTML5 support block-level links?

yes. 通俗講，能夠就是a標籤能夠包裹p, div之類的block水平的標籤。

Html5 Web Storage (HTML5的離線儲存有幾種方式)?

What are two types of Web Storage in html5?

Session Storage:

It stores data of current session only.
It means that the data stored in session storage clear automatically when the browser is closed.
sessionStorage 數據在瀏覽器關閉後自動刪除。

Local Storage:

data is not deleted automatically when the current browser window is closed.
localStorage長期存儲數據，瀏覽器關閉後數據不丟失；

Benefits of Html5 Web Storage:

It can store up to 10MB data which is more than what cookies have.
Web storage data cannot be transferred with HTTP request. It helps to increase the performance of the application.