Shulou(Shulou.com)06/03 Report--

This article mainly introduces the HTML5-related knowledge points, has a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand.

What is the relationship between SGML (Standard Universal markup language) and HTML (Hypertext markup language), XML (Extensible markup language) and HTML?

SGML (Standard Universal markup language) is a standard that tells us how to specify document tags. It is a meta-language that only describes what a document tag should look like. HTML is a markup language described in SGML.

So using SGML to create a HTML reference and a common DTD, you will often find the "DOCTYPE" attribute in the header of the HTML page, which is used to define the target DTD.

Parsing SGML is painful now, so I created XML to make things better. XML uses SGML, for example: in SGML you have to use the start and end tags, but in XML you can have the end tag that closes automatically.

XHTML was created in XML and is used in HTML4.0. You can refer to the XML DTD shown in the following code snippet

In short, SGML is the parent class of all types, and older HTML uses SGML,HTML4.0 to use XHTML derived from XML

What is HTML5?

HTML5 is the latest HTML standard, and its main goal is to provide all the content without any additional plug-ins like flash,silverlight, which come from animation, video, rich GUI, etc.

HTML5 is the result of cooperation between the World wide Web Consortium (W3C) and the Web Hypertext Application Technology working Group (WHATWG).

Why don't we need DTD (document type definition (Document Type Definition)) in HTML5?

HTML5 doesn't use SGML or XHTML, it's a whole new thing, so you don't need to refer to DTD, for HTML5, you just need to place the following document type code to tell the browser that this is an HTML5 document.

Will HTML5 still work if I don't put it in?

No, the browser will not recognize him as an HTML document, and the HTML5 tag will not work properly

Which browsers support HTML5?

Almost all browsers Safari,Chrome,Firefox,Opera,IE support HTML5

What is the difference between the page structure of HTML5 and HTML4 or previous HTML?

A typical WEB page contains head, feet, navigation, center area, and sidebar. Now if we want to render this content in the HTML area of HTML4, we may want to use the p tag.

But in HTML5, create element names for these areas to make them clearer and make your HTML more readable

Here are more details of the HTML5 elements that form the page structure:

: represents the header data of HTML

The foot area of the page

Page navigation elements

Self-contained content

Use the internal article to define the region or put the grouped content into the region

Represents the contents of the sidebar of the page

What is datalist in HTML5?

The Datalist element in HTML5 helps provide text box autocompletion, as shown in the following figure:

The following is the HTML code for the DataList feature:

What are the different new form element types in HTML5?

Here are 10 important new form elements introduced in HTML5

Color

Date

Datetime-local

Email

Time

Url

Range

Telephone

Number

Search

Let's learn about these 10 elements step by step.

If you want to display a color selection dialog box

If you want to display the calendar dialog box

If you want to display a calendar with local time

If you want to create a HTML text box with email check, we can set the type to "email"

For URL validation settings of type "url", such as the HTML code shown in the following figure

If you want to display a range of numbers in text, you can set the type to "number"

If you want to display range control, you can use the type "range"

Want to use text boxes as search engines

You can only enter time if you want to.

If you want to use the text box to accept phone numbers

What are output elements in HTML5?

You need to output elements when you need to calculate the sum of two inputs into one tag. For example, if you have two text boxes (as shown below), you want to sum the numbers from the two input boxes and put them in the label.

Here is the code for how to use the output element in HTML5

Function DrawMe () {var c=document.getElementById ("mycanvas"); var ctx=c.getContext ("2d"); ctx.moveTo (10Magna 10); ctx.lineTo (200100); ctx.stroke ();}

You can get the following output

What is the difference between Canvas and SVG graphics?

Note:- if you look at the previous two problems, both Canvas and SVG can draw graphics on the browser. So in this question, the interviewer wants to know when and which way you choose.

SVGCanvas is like drawing and memorizing. In other words, any shape drawn with SVG can be memorized and manipulated. Browsers can display Canvas again, just like drawing and forgetting. Once the drawing is finished, you can't access pixels and manipulate it. SVG is good for creating graphics, such as CAD software, once things are drawn. Users want to manipulate it, Canvas scenes that are drawn and forgotten, such as animations and games, are good, because for later operations, you need to record coordinates, so it's slower, because you don't have the intention to remember things in the future, so it's faster that we can use events related to drawing objects, and we can't use events related to drawing objects. Since we don't have their reference resolution independent of resolution, how can we use SVG in Canvas and HTML5 to draw a rectangle?

HTML5 code for drawing rectangles using SVG

HTML5 code for drawing rectangles using Canvas

What is the selector in var c=document.getElementById ("mycanvas"); var ctx=c.getContext ("2d"); ctx.rect (20J 20150100); ctx.stroke (); CSS (cascading style sheet (cascading style sheets))?

The selector helps you select elements when you want to apply a style. For example, here is a simple style named "instro" that applies to HTML elements showing a red background

.intro {background-color:red;}

By applying the "intro" style above to p, we can use the "class" selector, as shown in the following figure

My name is Shivprasad koirala.

I write interview questions.

How do I use ID values to apply a CSS style?

Suppose you have a HTML paragraph tag, and the id is "mytext", as shown in the following snippet

This is HTML interview questions.

You can create a style using the "#" selector and the name "id" and apply the CSS value to the paragraph tag, so to apply the style to the "mytext" element, we can use "# mytext", as shown below

# mytext {background-color:yellow;}

Quickly revise some important selectors

Set the background color of all paragraph tags to yellow

P p {background-color:yellow;}

Set all paragraphs inside p to a yellow background

P p {background-color:yellow;}

Set all paragraphs after p to a yellow background

Pairp {background-color:yellow;}

Set all yellow backgrounds that contain the "target" attribute

A [target] {background-color:yellow;} ASP.NET interview questionsc# interview questions.NET interview questions with answers

Set all elements to a yellow background when the control gets focus

Input:focus {background-color:yellow;}

Set the hyperlink style according to the relevant connection operation

What is the column layout used in a:link {color:green;} a:visited {color:green;} a:hover {color:red;} a:active {color:yellow;} CSS?

The CSS column layout helps you split the text into columns. For example, consider the following magazine news in a large text, but we need to divide the boundary between them into three columns, where the column layout of HTML5 helps.

To implement the column layout, we need to specify the following

How many columns do we need to divide the text into

Specify the number of columns we need to use column-count, for Chrome and firefox we need "webkit" and "moz-column" respectively

-moz-column-count:3; / * Firefox * /-webkit-column-count:3; / * Safari and Chrome * / column-count:3

How much difference do we want between the two columns?

-moz-column-gap:40px; / * Firefox * /-webkit-column-gap:40px; / * Safari and Chrome * / column-gap:20px

Do you want to draw a line between these columns?

If so, how thick is it?

-moz-column-rule:4px outset # ff00ff; / * Firefox * /-webkit-column-rule:4px outset # ff00ff; / * Safari and Chrome * / column-rule:6px outset # ff00ff

Here is the complete code

.magazine {- moz-column-count:3; / * Firefox * /-webkit-column-count:3; / * Safari and Chrome * / column-count:3;-moz-column-gap:40px; / * Firefox * /-webkit-column-gap:40px; / * Safari and Chrome * / column-gap:20px;-moz-column-rule:4px outset # ff00ff; / * Firefox * /-webkit-column-rule:4px outset # ff00ff; / * Safari and Chrome * / column-rule:6px outset # ff00ff;}

You can use the class property to apply styles to text

Your text goes here which you want to pide in to 3 columns.

Can you explain the box model of CSS?

CSS and models are rectangular spaces that define Border (boundary), padding (inner margin) and margin (outer margin) around HTML elements.

Border (boundary): defines the maximum area that the element contains. We can make the boundary visible, invisible, define height, width, etc.

Padding (inside margin): defines the spacing between boundaries and internal elements

Margin (outer margin): defines the spacing between the boundary and any adjacent elements

For example, here is a simple CSS code that defines the boundaries, inner and outer margins of the box.

.box {width: 200px; border: 10px solid # 99c; padding: 20px; margin: 50px;}

Now if we apply the above CSS to a p tag shown below, your output will be the same as shown in the figure below. I have created two tests "Some text" and "Some other text", so we can see how many margin (outer margins) attribute functions

Some text

Some other text

Can you explain some of the text effects in CSS3?

Here the interviewer expects you to answer two CSS text effects. Here are two effects to pay attention to.

Shadow text effect

.specialtext {text-shadow: 5px 5px 5px # FF0000;}

Text packaging effect

.breakword {word-wrap:break-word;}

What is Web Workers? Why do we need them?

Consider the following heavy loop code that will be executed millions of times

Function SomeHeavyFunction () {for (I = 0; I < 100000000000000; iSum +) {x = I + x;}}

For example, the above loop code is executed after the HTML button is clicked, and now the method execution is synchronized, in other words, the browser must wait until the loop is complete.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.