前端开发面试题：基础知识

<label> 元素的直观效果是直接显示标记之间的文本，而且不会为文本呈现任何特殊效果。但是，它和其他文本标记所不同的是，它为鼠标用户改进了用户体验性。

这是因为， <label> 元素可以附带一个 for 属性，只要将该属性的值设置为表单中任何一个控件的 id 属性的值，则当用户点击该标签（文本）时，浏览器就会自动将焦点转到和标签相关的表单控件上。即：如果在 <label>元素内点击文本，就会触发此控件。

02、列举常用的结构标记，并描述其作用。

结构标记专门用于标识页面的不同结构，相对于使用

<div> 元素而言，可以实现语义化的标签。

常用的结构标记有：

<header> 元素：用于定义文档的页眉；

<nav> 元素：用于定义页面的导航链接部分；

<section> 元素：用于定义文档中的节，表示文档中的一个具体的组成部分；

<article> 元素：常用于定义独立于文档的其他部分的内容；

<footer> 元素：常用于定义某区域的脚注信息；

<aside> 元素：常用于定义页面的一些额外组成部分，如广告栏、侧边栏和相关引用信息等。

03、表单向服务器提交数据有几种方式？这些方式有什么区别？

将表单数据发送给服务器的常用方式有两种：Get 和

Post。

浏览器发送给服务器的 HTTP 请求分为请求头（header）和请求主体（body）两部分。其中，必须包含头部分，用于指定发送请求的方式、目的地以及其他关键信息；而主体是可选的。在头数据和主体数据之间用一个空白行来隔开。

比如，需要发送请求到页面 GetStockPrice.php，且需要附带数据 Symbol=MSFT。

那么如果使用 Get 方式发送数据，则简化后的请求数据内容如下所示：

GET /Trading/GetStockPrice.aspx?Symbol=MSFT HTTP/1.1

Host: localhost

如果使用 Post 方式发送数据，则简化后的请求数据内容如下所示：

POST /Trading/GetStockPrice.aspx HTTP/1.1

Host: localhost

Content-Type: application/x-www-form-urlencoded

Content-Length: 11

Symbol=MSFT

由此可见，两种方式的区别主要在于发送数据方式不同。

使用 Get 方式向服务器发送表单数据时，表单数据将附加在 URL 属性的末端；采用 POST 方法发送数据时，数据会放置在主体中发送。

04、快速排序的实现【这个应该放在js里面，先在这里给大家预热下】

方法一(尽可能不用js数组方法）：

function quickSort(arr){

qSort(arr,0,arr.length - 1);

}

function qSort(arr,low,high){

if(low < high){

var partKey = partition(arr,low,high);

qSort(arr,low, partKey - 1);

qSort(arr,partKey + 1,high);

}

}

function partition(arr,low,high){

var key = arr[low]; //使用第一个元素作为分类依据

while(low < high){

while(low < high && arr[high] >= arr[key])

high--;

arr[low] = arr[high];

while(low < high && arr[low] <= arr[key])

low++;

arr[high] = arr[low];

}

arr[low] = key;

return low;

}

方法二（使用js数组方法）：

function quickSort(arr){

if(arr.length <= 1) return arr;

var index = Math.floor(arr.length/2);

var key = arr.splice(index,1)[0];

var left = [],right = [];

arr.forEach(function(v){

v <= key ? left.push(v) : right.push(v);

});

return quickSort(left).concat([key],quickSort(right));

}

05、css中哪些属性可以继承？

1、文本相关属性：font-family、font-size、font-style、font-variant, font-weight、font 、 letter-spacing 、 line-height 、 text-align 、 text-indent 、 text-transform 、word-spacing、color；

2、列表相关属性：list-style-image、list-style-position、list-style-type、list-style；

3、表格相关属性：border-collapse、border-spacing、caption-side、table-layoute；4）其他属性：Cursor、visibility。

其实就是有长度或者有大小的属性就可以继承比如：高度，宽度，字体大小，颜色等等，很好区分的，有几个特殊的就多熟记下。