Close tags, lowercase tags, no nesting: improve the search probability of search robots;
Use external css and js to separate structural behavior: file downloading and page loading Faster, content can be accessed by a wider range of devices;
Fewer codes and components: easy to maintain, easy to revise, no need to change the page content, provide a printed version without copying the content, improve the usability of the website sex.
Html (Hypertext Markup Language) is an application under the Standard Universal Markup Language, and it is also a specification and a standard.
Xhtml (Extensible Hypertext Markup Language) is a markup language that is similar to html, but the syntax is more strict. The main difference is:
1, all elements must be correct Nesting,
2, all tags must be closed,
3, tag names, attribute names must be lowercase letters,
4, all attributes must be enclosed with "",
5, all ><& that are not part of the label must be in encoded form,
6, all attributes must have a value,
7, there should be no -- in the comments
8, pictures must have captions
Four types: inline, embedded, external link, import
Difference:
1, link belongs to xhtml tag, @import is completely css A way provided by , link in addition to loading css can also define rss, define rel attributes, etc., @import can only load css .
2, the difference in loading order: the css quoted by link is loaded at the same time, and the css quoted by @import will wait until all pages are downloaded. be loaded again.
3, compatibility difference, @import is proposed by css2.1, only supported by ie5 and above, link has no compatibility issues.
4, use dom to control the difference in style. When using javascript to control the style, you can only use link, @import is not dom Controllable.
5, @import can introduce other stylesheets again in css.
tag selector, class selector, id selector
is not inherited as specified, id>class>Tagname
Importanthigh priority
Structural layer: html
is created by html or xhtml, and uses tags to describe the meaning of web page content.
Presentation layer: css
is created by css to answer how to display relevant content.
Behavior layer: javascript
is created by javascript and is responsible for answering how to react to events.
Selector, attribute, attribute value
Ie (iekernel), Firefox (Gecko), Google (webkit), opera (presto )
Alt is a prompt message displayed on the page when your image cannot be loaded for some reason. It will be output directly at the place where the image is originally loaded. title is displayed when the mouse is hovering over the image. The small prompt displayed will disappear when the mouse is moved away. Most html tags support title.
1.Double marginBUG float caused by using display
2.3Pixel issue caused by using float caused by using dislpay:inline -3px
3.Hyperlinkhover Invalid after click Use the correct writing orderlink visited hover active
4.Ie z-indexThe problem is to add position:relative
5.Png to the parent Transparently use jsCode change
6.Min-height Minimum height! Important Solution’
7.select Use iframenested 8.Why there is no way to define
1pxThe left and right width container (IE6 caused by the default line height, use over:hidden,zoom:0.08 line-height:1px) 10.
Describe the role and purpose of
css resetstyle. Different browser types have different default styles. By using css reset reset, they can be unified and facilitate development. 11.
How do you optimize the files and resources of your website? Expected solutions include
:requests (file merging) 2, use
CDN(content delivery network) 3, Add
Expire/Cache-Controlheader4, enable
Gzipcompression5,
cssput it at the top of the page6 ,
scripPlace it at the bottom of the page7, avoid using
Expressions8 in css, put
jsand css outside In the file 9, reduce
dnsqueries 10, compress
javascriptand css11, avoid redirects
12, remove duplicate scripts
13 , configure entity tags
14, use
ajaxcache 12.
What is semantic
html1,Parent definitionheight (Advantages: less code, simple and easy to master; disadvantages: only suitable for fixed height elements, cannot be highly adaptive)
2, use an empty label at the end to clear the float :Clear: both (Advantages: In theory, it can clear the floating of all tags, simple code and less browser support; Disadvantages: Added meaningless tags)
3, parent definition pseudo-class After and zoom (Advantages: good browser support; disadvantages: a lot of code, the two lines of code can be combined to support mainstream browsers)
4, parent definition overflow: hidden (Advantages: less code, simplicity, and good browser support; disadvantages: must define width or zoom, and cannot define height, and cannot be used in conjunction with position)
5, parent definition overflow:auto (Advantages: less code, simplicity, good browser support; disadvantages: must define width or zoom, and cannot define height at the same time , a scroll bar will appear if the height of the internal element exceeds the parent)
Also, the parent floats together, the parent defines display:table, and adds br at the end of clear: bothetc
The so-called standard mode means that the browser parses and executes the code according to the W3C standard; the weird mode uses the browser's own way to parse and execute the code, because different browsers parse and execute in different ways, so we call it It's a weird mode. Whether the browser uses standard mode or weird mode when parsing is directly related to the DTD declaration in your web page. The DTD declaration defines the type of standard document (standard mode parsing) document type, which will cause the browser to Use the corresponding method to load the web page and display it. Ignoring the DTD declaration, will cause the web page to enter weird mode(quirks mode).
In standard mode,
IE6don’t recognize !important statement, IE7, IE8, Firefox, Chrome Waiting for the browser to recognize; while In weird mode, I don’t even recognize IE6/7/8!importantstatement
is a way of processing web images. It allows you to include all the scattered pictures involved in a page into one big picture, so that when the page is accessed, the loaded pictures will not be displayed one by one as before. .
pageicon is suitable for many situations.
Every browser knows it, here it is for firefox;
9 All ieBrowser recognized;
Difference: Graceful degradation starts from a complex status quo and tries to reduce the supply of user experience, while progressive enhancement starts from a very basic, functioning version and continuously expands it to adapt to the needs of the future environment. Degradation (functional decay) means looking backward; progressive enhancement means looking forward while keeping its foundation in a safe zone.
text-transform Value:
Capitalize The first letter of English Pinyin is capitalized
Uppercase English Pinyin letters are all capitalized
Lowercase English pinyin letters All lowercase
Derived selector (declared with HTML tag)
id selector (declared with DOM ID)
Class selector (declared with a style class name)
Attribute selector (declared with DOM attributes, belonging to CSS2, not supported by IE6, not commonly used, forget it if you don’t know)
In addition to the first 3 basic selectors, there are also some extended selectors, including
descendant selectors (using space separation, such as p .a{ })
group selectors (using Comma separation, such as p,p,#a{ })
Answer: The clicked hyperlink style no longer has hover and active. The solution is to change the order of CSS attributes: L-V-H-A (link, visited, hover, active)
Answer: , ,
PX:
PX is actually pixel, use PX to set the font size when, compare Stable and precise. But there is a problem with this method. When the user browses the Web page we created in the browser, if the zoom of the browser is changed, the layout of our Web page will be broken. This is a big problem for users who are concerned about the usability of their websites. Therefore, it was proposed to use "em" to define the font of the Web page. EM:
EM is to scale the font size based on the benchmark. EM is essentially a relative value rather than a specific numerical value. This technique requires a reference point, which is usually
. In addition, em is calculated relative to the attributes of the parent element. If you want to calculate the conversion between px and em, this website is good. You can enter the data just px and em calculate each other. Click here: px and em conversion
Rem:
EM sets the font size relative to its parent element, so there will be a problem. When setting any element, you may need to know the size of its parent element. Rem is relative to the root element
Browser compatibility
Except IE6-IE8r, other browsers support em and rem attributes, and px is supported by all browsers.
So for browser compatibility, "px" and "rem" can be used together, use "px" to achieve the effect under IE6-8, and then use "Rem" to achieve the effect of the browser Effect.
html{
filter:alpha(opacity=50); /* ie valid*/
-moz-opacity:0.5; /* Firefox valid*/
opacity: 0.5 ; /* Universal, valid in other browsers*/
}
Object, number, function, boolean, undefined;
force Number(),String(),Boolean(),Object();
Implicit + - == if while for in alert
Join() function takes a batch of strings and then joins them with a delimiter string to return a string.
Split() The function takes a string and breaks it at the separator, thus returning a batch of strings.
split is to divide a string of characters (according to a certain delimiter) into several elements and store them in an array. And Join is to connect the strings in the array into a long string, which can be roughly considered as the reverse operation of split.
The ordinary method of adding events does not support adding multiple events. The bottom event will overwrite the top one. However, adding events by event binding (addEventListener) can add multiple events.
Push()Tail additionpop()Tail deletion
Unshift()head Header addition shift()Header deletion
1.The execution order is different
2.The parameters are different
3.Events added or noton
4.Thispoints to the problem
and
post
?
, while using Post is to put them in virtual Inside the carrier , will not be displayed. 2. For the get method, the server side uses Request.QueryString to get the value of the variable. For the post method, the server side uses Request.Form to get the submitted data. Parameters of both methods can be obtained using Request. The amount of data transferred by 3 and get is small and cannot be larger than 2KB. post transfers a large amount of data and is generally unrestricted by default. But in theory, it varies from server to server. . 4, get are very low security, post are high security. 5, get requests need to pay attention to caching issues, post requests do not need to worry about this problem. 6, post request must set Content-Type value to application/x-form-www-urlencoded 7, when sending request , Because The parameters of the get request are all in url, so the parameters sent by the send function are null, and the post request is using send When using the method , needs to be given its parameters callmethod: Syntax: call(thisObj, Object) Definition: Call a method of an object to replace the current object with another object. Description: The call method can be used to call a method instead of another object. The call method changes the object context of a function from the initial context to the new object specified by thisObj . If no thisObj parameter is provided, then the Global object is used as thisObj. applyMethod: Syntax: apply(thisObj, [argArray]) Definition: Apply a method of an object to replace the current object with another object. Description: If argArray is not a valid array or is not an arguments object, then a TypeError will result. If neither argArray nor thisObj is provided, then the Global object will be used as thisObj, and no parameters can be passed. Use eval parse In view of security considerations, it is more reliable to use parse Local objects: Objects provided by the ECMAScript implementation independent of the host environment. They include: Object, Function, Array, String, Boolean, Number, Date, RegExp , Error, EvalError, RangeError, ReferenceError , SyntaxError, TypeError URIError can be instantiated. Built-in objects Global and Math : All objects provided by the ECMASscript implementation independently of the host environment cannot be instantiated. Host objects: All non-local objects are host objects, that is, objects provided by the host environment implemented by ECMAscript. All BOM and DOM objects are host objects, document, window , etc. There are two events when the page is loaded. One is ready, which indicates that the document structure has been loaded (excluding non-text media files such as images), and the other is onload, which indicates that the page contains images and other files. All elements included are loaded. 1.Create a new array to store the results 2.Create an empty object 3. When the for loops, each time an element is taken out and compared with the object. If the element is not repeated, it is stored in the result array. At the same time, the content of this element is used as an attribute of the object and assigned a value of 1, stored in the object created in step 2. 14.Event delegation. Use the principle of bubbling to add events to the parent to trigger the execution effect. Using event delegation techniques allows you to avoid adding event listeners to specific each node; instead, event listeners are added to their parent elements. The event listener will analyze the events that bubble up from the child elements and find out which child element the event is from. 15.Scope chain. When code is executed in an environment, a scope chain of variable objects (scope chain) will be created. The purpose of the scope chain is to ensure ordered access to all variables and functions that the execution environment has access to. The front end of the scope chain is always the variable object of the environment where the currently executing code is located. If this environment is a function, its active object is used as a variable object. Each function has its own execution environment. When execution flows into a function, the function environment will be pushed into an environment stack. After the function is executed, the stack will pop up its environment and return control to In the previous execution environment, this stack was the scope chain. When a function is executed, the execution environment of the function (calling object) will be created, and the object will be placed at the beginning of the linked list, then the calling object of the parent function will be linked after it, and finally the global object . 16.Closure. A closure is a function that can read the internal variables of other functions. Since in the Javascript language, only sub-functions inside the function can read local variables, closures can be simply understood as "functions defined inside a function". So, in essence, closure is a bridge connecting the inside of the function with the outside of the function. Closures can be used in many places. Its greatest uses are two, one is to read the variables inside the function, and the other is to keep the values of these variables in memory. 1) Since closures will cause the variables in the function to be stored in memory, which consumes a lot of memory, closures cannot be abused, otherwise it will cause performance problems on the web page, which may occur in IE Memory leak. The solution is to delete all unused local variables before exiting the function. 2) The closure will change the value of the variable inside the parent function outside the parent function. So, if you use the parent function as an object (object), the closure as its public method (Public Method), and the internal variables as its private properties (private value), you must be careful not to change the value of the internal variable of the parent function casually. 17.How to prevent event bubbling and default events. Same origin policy for 18.javascript. A script can only read the properties of windows and documents from the same source, where the same source refers to the combination of host name, protocol and port number 19.JSSort algorithm. The above is the content of the Web front-end written test questions that you may need, and more For related content, please pay attention to the PHP Chinese website (m.sbmmt.com)!
9. What is the difference between call and apply?
10. How to parse json data during Ajax request?
11.What are the local objects, built-in objects and host objects of javascript?
12. What is the difference between Document load and document ready?
13.Write a method to remove duplicates from an array.
var s = [0, 2, 3, 4, 4, 0, 2, 'tt', 0, 0]; //测试数组
for (var i = 0, o = {}, tmp = [], count = 0, l = s.length; i < l; i++) {
if (o[s[i]]) {
count++;//重复+1
} else {
o[s[i]] = 1;//不重复设置属性
tmp.push(s[i])//加入新数组
}}
alert(count);alert(tmp)Copy after login//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.stopPropagation ) {
e.stopPropagation(); //因此它支持W3C的stopPropagation()方法
} else {
window.event.cancelBubble = true; //否则，我们需要使用IE的方式来取消事件冒泡
return false;
}
//如果提供了事件对象，则这是一个非IE浏览器
if ( e && e.preventDefault ) {
e.preventDefault(); //阻止默认浏览器动作(W3C)
} else {
window.event.returnValue = false; //IE中阻止函数器默认动作的方式
return false;
}Copy after loginvar sort = {
debug: function(str) {
if (window.console && window.console.log) {
console.log(str);
}
},
swap: function(arr, index1, index2) { //数组数据交换
var temp = arr[index1];
arr[index1] = arr[index2];
arr[index2] = temp;
},
bubbleSort: function(arr) { //冒泡排序
this.debug("冒泡排序before:" + arr);
var len = arr.length;
for (var outer = 0; outer < len - 1; outer++) { //比较的轮数
for (var inner = 0; inner < len - outer - 1; inner++) { //每轮比较的次数
if (arr[inner] > arr[inner + 1]) {
this.swap(arr, inner, inner + 1)
}
}
this.debug("第" + (outer + 1) + "轮后:" + arr);
}
this.debug("冒泡排序after:" + arr);
},
selectionSort: function(arr) { //选择排序
this.debug("选择排序before:" + arr);
var min, len = arr.length;
for (var outer = 0; outer < len - 1; outer++) {
min = outer;
// 比较最小项目和第outer项之后的剩余数组项, 以寻找更小项
for (var inner = outer + 1; inner < len; inner++) {
if (arr[inner] < arr[min]) {
min = inner;
this.debug("min--" + min);
}
}
this.swap(arr, outer, min);
this.debug("第" + (outer + 1) + "轮后:" + arr);
}
this.debug("选择排序after:" + arr);
},
insertionSort: function(arr) { //插入排序
this.debug("插入排序before:" + arr);
var temp, inner, len = arr.length;
for (var outer = 1; outer < len; outer++) {
temp = arr[outer];
inner = outer;
while (inner > 0 && arr[inner - 1] >= temp) {
arr[inner] = arr[inner - 1];
--inner;
}
arr[inner] = temp;
}
this.debug("插入排序after:" + arr);
},
shellSort: function(arr) { //希尔排序
this.debug("希尔排序before:" + arr);
var gaps = [5, 3, 1],
temp;
for (var g = 0; g < gaps.length; g++) {
for (var i = gaps[g]; i < arr.length; i++) {
temp = arr[i];
for (var j = i; j >= gaps[g] && arr[j - gaps[g]] > temp; j -= gaps[g]) {
arr[j] = arr[j - gaps[g]];
}
arr[j] = temp;
}
}
this.debug("希尔排序after:" + arr);
},
shellSortDynamic: function(arr) { //动态计算间隔序列的希尔排序
this.debug("动态计算间隔序列的希尔排序before:" + arr);
var N = arr.length,
h = 1;
while (h < N / 3) {
h = 3 * h + 1;
}
while (h >= 1) {
for (var i = h; i < N; i++) {
for (var j = i; j >= h && arr[j] < arr[j - h]; j -= h) {
this.swap(arr, j, j - h);
}
}
h = (h - 1) / 3;
}
this.debug("动态计算间隔序列的希尔排序after:" + arr);
},
mergeSort: function(arr) { //归并排序
this.debug("归并排序before:" + arr);
var len = arr.length,
step = 1,
left,
right;
var mergeArray = function(arr, startLeft, stopLeft, startRight, stopRight) {
var rightArr = new Array(stopRight - startRight + 1),
leftArr = new Array(stopLeft - startLeft + 1),
k = startRight,
m = 0,
n = 0;
for (var i = 0; i < (rightArr.length - 1); ++i) {
rightArr[i] = arr[k];
++k;
}
k = startLeft;
for (var i = 0; i < (leftArr.length - 1); ++i) {
leftArr[i] = arr[k];
++k;
}
rightArr[rightArr.length - 1] = Infinity; //哨兵值
leftArr[leftArr.length - 1] = Infinity; //哨兵值
for (var k = startLeft; k < stopRight; ++k) {
if (leftArr[m] <= rightArr[n]) {
arr[k] = leftArr[m];
m++;
} else {
arr[k] = rightArr[n];
n++
}
}
}
if (len < 2) {
return;
}
while (step < len) {
left = 0;
right = step;
while (right + step <= len) {
mergeArray(arr, left, left + step, right, right + step);
left = right + step;
right = left + step;
}
if (right < len) {
mergeArray(arr, left, left + step, right, len);
}
step *= 2;
}
this.debug("归并排序after:" + arr);
},
quickSort: function(arr) { //快速排序
this.debug("快速排序before:" + arr);
var _quickSort = function(arr) {
var len = arr.length,
lesser = [],
greater = [],
pivot,
meCall = arguments.callee;
if (len == 0) {
return [];
}
pivot = arr[0];
for (var i = 1; i < len; i++) {
if (arr[i] < pivot) {
lesser.push(arr[i])
} else {
greater.push(arr[i])
}
}
return meCall(lesser).concat(pivot, meCall(greater));
}
this.debug("快速排序after:" + _quickSort(arr));
return _quickSort(arr);
}
}
var search = {
linearSearch: function(arr, data) { //线性查找
for (var i = 0; i < arr.length; i++) {
if (arr[i] == data) {
return i;
}
}
return -1;
},
binarySearch: function(arr, data) { //二分查找 适用于已排好序的线性结构
var lowerBound = 0,
upperBound = arr.length - 1,
mid;
while (lowerBound <= upperBound) {
mid = Math.floor((lowerBound + upperBound) / 2);
if (arr[mid] < data) {
lowerBound = mid + 1;
} else if (arr[mid] > data) {
upperBound = mid - 1;
} else {
return mid;
}
return -1;
}
}
}
var tempArr = [3, 6, 4, 2, 11, 10, 5];
//sort.bubbleSort(tempArr);
//sort.selectionSort(tempArr);
//sort.insertionSort(tempArr);
//sort.shellSort(tempArr);
//sort.shellSortDynamic(tempArr);
//sort.mergeSort(tempArr);
//sort.quickSort(tempArr);Copy after login
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
