面试题
- html语义化相关内容
-
语义化的HTML结构如何理解？
- html语义化就是让页面的内容结构化。
-
好处：
- 在没有样式CSS情况下也以一种文档格式显示，并且是容易阅读的；
- 在搜索引擎的爬虫依赖于标记来确定上下文和各个关键字的权重，利于SEO（搜索引擎优化）；
- 使阅读源代码的人对网站更容易将网站分块，便于阅读维护理解；
- 方便其他设备解析（如屏幕阅读器、移动设备等）以有意义的方式来渲染网页；
- 便于团队开发和维护，语义化更具可读性，遵循这个标准可以减少差异化。
-
语义化就是说你写的html界面在没有css的情况下能让大家都能看懂，无论是开发人员还是阅读源码人员，或者其它适配器；h5的很多标签如：
<title>：页面主题内容；<hn>分级标题；<ul><ol>无序/有序列表；<header>页眉，通常包括网站标志、主导航、全站链接以及搜索框；<main>页面主要内容，一个页面只能使用一次；<article>定义外部的内容，其中的内容独立于文档的其余部分...就是为了让页面更加语义化；之前都是使用<div>来表示页面章节，但是这些<div>都没有实际意义。 -
节元素标签
- header元素：代表“网页”或“section”的页眉；通常包括
<h1>-<h6>或<hgroup>，作为整个页面或一个内容块的标题；无个数限制； - footer元素：代表“网页”或“section”的页脚；通常含有该节的一些基本信息；无个数限制；
- hgroup元素：代表“网页”或“section”的标题，当元素有多个层级时，该元素可以将
<h1>到<h6>元素放在其内，例如文章的主标题和副标题的组合； - nav元素：代表页面的导航链接区域，用于定义页面的主要导航部分；不合适的地方就不要用nav元素
- aside元素：被包含在article元素中作为主要内容的附属信息部分，其内容可以是与当前文章有关的相关标签、名词解释等；
- section元素：代表文档的“节”或“段”，一篇文章里按照主题的分段，一个页面里的分组等；
- article元素：代表一个文档，页面或网站中自成一体的内容，其目的是为了让开发者独立开发或重用；
- header元素：代表“网页”或“section”的页眉；通常包括
-
文本元素标签
- a：用于定义超链接
- em：用于句意强调
- strong：用于表示重要
- p：段落
- b：加粗
- i：倾斜
- code：代码文本
- q：引用的内容
- cite：用于定义引用内容出自书籍或杂志的标题，不允许其他信息
- u：下划线文本
- abbr：缩写文本
- dfn：定义一个术语
- var：定义代码中的变量
- samp：程序输出示例文本
- kbd：由键盘输入的文本
- wbr：换行的时机
- span：无语义
- br：换行符
- time：标记一篇文章的发布时间
-
分组元素标签
- div、p、dl、dt、dd、ol、ul、li、hr等
- blockquote：标记一段长引文
- pre：定义预格式化的文本，被包围在pre元素中的文本通常会保留空格和换行符。文本会呈现为等宽字体，常用来表示源代码。
- figure：用来包含一块独立内容，图片，音频视频，代码块等
实例：结合简历简单的用html描述一下是如何用语义化的标签来写简历页面的
- 怎么判断是不是空对象？什么是空对象？ 空对象：就是说一个对象内没有任何属性/值 判断一个变量是否是对象？
obj !== null && typeof obj === 'object' && !Array.isArray(obj)
Object.prototype.toString.call(obj) === '[object Object]'
判断一个空对象？
let a = {};
let b = {cc:1}
//方法一：将其转换为字符串，再判断是否为“{}”
console.log(JSON.stringify(a) === "{}");//true
console.log(JSON.stringify(b) === "{}");//false
//方法二：for in循环判断
let res = function(obj) {
for(let key in obj){
return false;
}
return true;
}
console.log(res(a)); //true
console.log(res(b)); //false
//方法三：用jquery的isEmptyObject()方法
console.log($.isEmptyObject(a));
console.log($.isEmptyObject(b));
function isEmptyObject(obj){
for(let key in obj){
return false;
}
return true;
}
//方法四：用Object对象的getOwnPropertyNames()方法，获取到对象中的属性名，存到一个数组中，返回数组对象，通过判断数组的length来判断此对象是否为空
let aa = Object.getOwnPropertyNames(a);
let bb = Object.getOwnPropertyNames(b);
console.log(aa.length == 0);
console.log(bb.length == 0);
//方法五：ES6的Object.keys()方法，返回值也是对象中属性名组成的数组。
let aaa = Object.keys(a);
console.log(aaa.length === 0);
- JS判断数组中是否含有某个值
//方法一：arr.indexOf()
if (arr.indexOf(2) != -1){
console.log("数组含有2")
}else {
console.log("数组不含2")
}
//方法二：for循环结合if判断
for (let i = 0;i < arr.length;i++){
if (arr[i] === 2){
console.log("数组含有2")
}
}
//方法三：arr.find(callback)
arr.find(value => {
if (value === 2){
console.log("数组含有2")
}
})
//方法四： arr.includes() 数组中含有某值返回true，没有返回false。
let arr = [1,2,3,4];
if(arr.includes(2)){
console.log("数组中有2");
}else{
console.log("数组中无2");
}
- 两栏布局的实现（左边固定，右边自适应）
<div class="wrap">
<div class="left">左侧固定内容</div>
<div class="right">右侧内容自适应</div>
</div>
//方式一：float浮动
* {
margin: 0;
padding: 0;
}
.wrap {
border: 2px solid red;
overflow: hidden;
}
.left {
float: left;
width: 200px;
height: 200px;
background: purple;
}
.right {
margin-left: 200px;
background: skyblue;
height: 200px;
}
//方式二：绝对定位
* {
margin: 0;
padding: 0;
}
.wrap {
overflow: hidden;
position: relative;
border: 2px solid red;
}
.left {
position: absolute;
left: 0;
top: 0;
width: 200px;
height: 200px;
background: purple;
}
.right {
margin-left: 200px;
background: skyblue;
height: 200px;
}
//方式三：表格方式
* {
margin: 0;
padding: 0;
}
.wrap {
display: table;
width: 100%;
border: 2px solid red;
}
.left {
display: table-cell;
width: 200px;
height: 200px;
background: purple;
}
.right {
display: table-cell;
background: skyblue;
height: 200px;
}
//方式四：使用弹性布局flex
* {
margin: 0;
padding: 0;
}
.wrap {
display: flex;
}
.left {
height: 200px;
background: purple;
flex:0 0 200px
}
.right {
background: skyblue;
height: 200px;
flex: 1;
}
- BFC的实现
-
BFC（block formating context）块级格式化上下文。它是一个独立的渲染区域，只有block-level box参与，它规定了内部的block-level box如何布局，并且与这个区域毫不相干。
-
BFC的布局规则
- 内部的Box会在垂直方向，一个接一个地放置
- Box垂直方向的距离由margin决定，属于同一个BFC的两个相邻Box的margin会发生重叠
- 每个盒子的margin box的左边，与包含块border box的左边相接触
- BFC区域不会与float box重叠
- BFC就是页面上的一个隔离的独立容器，容器里面的子元素不会影响到外面的元素，反之亦如此
- 计算BFC的高度时，浮动元素也参与计算
-
如何创建BFC
- float的值不是none
- position的值不是static或relative
- display的值不是inline-block、table-cell、flex、table-caption、inline-flex
- overflow的值不是visible
-
BFC的作用
- 可以阻止元素被浮动的元素覆盖
- 可以包含浮动的元素-清除浮动
- 解决同一个BFC区域的垂直方向margin塌陷的问题
算法题
- 查找一个数组中，出现次数前三的字符
var arr = [1,2,2,3,3,3,4,4,4,4,5,5,5,5,5,6,]
function fun(arr,k){
let map = {};
for(let i=0; i<arr.length; i++){
if(arr[i] in map){
map[arr[i]] += 1;
}else{
map[arr[i]] = 1;
}
}
let res = Object.keys(map).sort((a,b)=>map[b]-map[a]);
return res.slice(0,k);
}
console.log(fun(arr,3))
//方法二：
function resolve(str){
let result = str.reduce((map,cur)=>{
map[cur] === undefined ? map[cur] = 1 : map[cur] ++
return map
},{})
let resArr = Object.keys(result).sort((a,b)=>result[a]<result[b])
return resArr.slice(0,3)
}
//方法三：
function findNum(arr) {
let map = new Map()
for (let i = 0; i < arr.length; i++) {
if (!map.has(arr[i])) {
map.set(arr[i], 1)
} else {
map.set(arr[i], 1 + map.get(arr[i]))
}
}
let res = Array.from(map).sort((a, b) => {
return b[1] - a[1]
})
console.log(res[0][0], res[1][0], res[2][0]);
}
findNum(arr)
- 【二维数组的查找】在一个二维数组中（每个一维数组的长度相同），每一行都按照从左到右递增的顺序排序，每一列都按照从上到下递增的顺序排序。请完成一个函数，输入这样的一个二维数组和一个整数，判断数组中是否含有该整数。
//方法一：暴力解法，循环所有，查找（O(n*n)）
function Find(target, array)
{
for(let i=0; i<array.length; i++){
for(let j=0; j<array[i].length; j++){
if(array[i][0] > target){
return false;
}else if(array[i][j] > target){
break;
}else if(array[i][j] === target){
return true;
}
}
}
return false;
}
//方法二：遍历每一行，每行用二分法
function Find(target, array)
{
for(let i=0; i<array.length; i++){
var low = 0;
var high = array[i].length - 1;
while(low <= high){
var mid = Math.floor((low+high)/2);
if(target > array[i][mid]){
low = mid + 1;
}else if(target < array[i][mid]){
high = mid - 1;
}else{
return true;
}
}
}
return false;
}
//方法三：利用有序的特点，从右上开始查找
function Find(target, array)
{
let lenX = array.length;
let lenY = array[0].length;
let i = 0, j = lenY-1;
while(i<lenX && j >=0){
if(array[i][j] == target){
return true;
}else if(array[i][j] > target){
j--;
}else{
i++;
}
}
return false;
}
- 【替换空格】请实现一个函数，将一个字符串中的每个空格替换成“%20”。例如，当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy。
function replaceSpace(str)
{
var str = str.split("");
var newStr=[]
for(let i=0; i<str.length; i++){
if(str[i] == " "){
newStr.push("%20")
}else{
newStr.push(str[i])
}
}
return newStr.join("")
}
//正则
function replaceSpace(str)
{
return str.replace(/ /g,"%20");
}
字符串替换的一些区别之处
function replaceSpace(str)
{
return str.replace(" ","%20"); //只能替换单个英文空格或中文空格，只能替换第一个匹配项 We%20Are Happy
return str.replace(new RegExp(/( )/g),"%20");//只能替换英文空格或中文空格的一种 We%20Are%20%20Happy%20
return str.split(" ").join("%20"); //只能替换英文空格或中文空格的一种 We%20Are%20%20Happy%20
return str.replace(/(^\s*)|(\s*$)/g,"%20") //只能替换首尾的空格，对字符串中间的空格不起作用。%20We Are Happy%20%20
return str.replace(/\s+/g,"%20") //We%20Are%20Happy%20 完美
return str.replace(/ /g,"%20") //We%20Are%20%20Happy%20
}
console.log(replaceSpace("We Are Happy "));
