HTML面试知识点总结

明明如月1994
VIP.3 渐入佳境
1,437 阅读12分钟

写在前面的话

之间一直习惯用oneNote记前端笔记，一个人总结笔记太孤单，所有最近想陆续的把笔记迁移到博客平台上分享分享, 兴奋ing (下图是博主拍的底特律街头一角, 顺便分享下底特律面貌~)



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 file

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.

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 quoted

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提供的;

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

（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

  1. <meta> tag is inside of <head> tag, and it's not displayed in a web browser.
  2. <meta> tag provides metadata about HTML document.
  3. meta elements are used to specify page description, keywords, author and other metadata.
  4. <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:

  • <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属性

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

boolean attribute 

  1. The presence of a boolean attribute on an element represents the true value and the absence of the attribute represents the false value.
  2. 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？

  1. For developer, semantic tags are easy to maintain
  2. semantic is good for SEO
  3. 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

  1. the <title> element is metadata that represents the title of the whole HTML page
  2. 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>

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

<a>的三个用处

  1. <a> as anchor tag, it can redirect to another website （normal function）
  2. use <a> to find document fragment ( 去同一网页的不同位置 )
  3. 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 的值检测页面当前是否可见，以及打开网页的时间等 在页面被切换到其他后台进程的时候，自动暂停音乐或视频的播放；

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

1、map+area或者svg
2、border-radius
3、纯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 ?

  1. using "document declaration" to distinguish them. HTML5 only have <!DOCTYPE>(在文档声明上，html有很长的一段代码，并且很难记住这段代码，都是靠工具直接生成，而html5却是不同，只有简简单单的声明，也方便人们的记忆，更加精简。)

  1. 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.

what are some of the major advantages of local storage over cookie?



avatar
文章
阅读
粉丝

友情链接：