JavaScript：简单面试题知识点总结

最新推荐文章于 2024-08-27 15:59:21 发布

Re__CODE

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量266

点赞数

分类专栏： JavaScript 文章标签： javascript

本文链接：https://blog.csdn.net/qq_44668555/article/details/105630206

版权

JavaScript 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

一、网页头部的声明用 lang="zh"还是 lang=“zh-cn”?

简体中文页面：html lang=zh-cmn-Hans
繁体中文页面：html lang=zh-cmn-Hant
英语页面：html lang=en

二、JavaScript放在< head >和< body >里有区别吗？

先加载与后加载的区别，写在head标签里，在需要用window.onload起到一个延迟加载的作用。
例如：

// 写在body里
<body>
<input type="button" id="btn"/>
<a href="javascript:;" id="div-box"></a>
<script>
    var oBtn = document.getElementById('btn');
    var oBox = document.getElementById('div-box');
    oBtn.onclick = function () {
        var html = '<div style="width:100px; height:100px; background: #ccc;"></div>';
        if (oBox.innerHTML == '') {
            oBox.innerHTML = html;
        } else {
            oBox.innerHTML = '';
        }
    };
</script>
</body>

//写在head里
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <script>
       window.onload = function (){
           var oBtn = document.getElementById('btn');
           var oBox = document.getElementById('div-box');
           oBtn.onclick = function () {
               var html = '<div style="width:100px; height:100px; background: #ccc;"></div>';
               if (oBox.innerHTML == '') {
                   oBox.innerHTML = html;
               } else {
                   oBox.innerHTML = '';
               }
           };
       }
    </script>
</head>
<body>
<input type="button" id="btn"/>
<a href="javascript:;" id="div-box"></a>
 
</body>

CSS介绍以及Ccss调用方式

1. 什么是css？
层叠样式表：为网页标签添加属性的（表现），修饰渲染控制显示方式。
css的出现解决了结构和表现排版混乱，把结构和表现分离了，减少单页面代码量，便于统一管理和维护。
2. css如何使用？
在HTML页面中，css的使用方式：

行内样式：应用样式到网页元素内，元素style属性：
style=“样式名称 : value ; 样式名称 : value…”
业内样式：head body 之间
< stytle >
< /style >
type=“test/css” 类型：文本编写的css
外部样式：调用了外部样式文件 .css
< link type=“text/css” href=“css/index.css” rel=“stylesheet” / >
【type="text/css"类型：文本编写的css
href=“样式文件的路径” 注意：路径遵循规则
rel=“stylesheet” 样式的引入规范】

三、CSS margin属性

设置一个元素所有外边距的宽度，或者设置各边上外边距的宽度。（允许使用负值）
margin: 0 auto介绍
margin: 0 auto 设置对象上下间距为0，左右自动
可拆分为：margin: 0 auto 0auto（上下）
还可拆分为：margin-left:auto;margin-right:auto;margin-top:0;margin-bottom:0;
作用：岁DIV设置margin:0 auto样式，是为了让DIV在浏览器水平居中。布局居中、水平居中，均加入margin:0 auto即可。
“自动”占用可用空间
text-align: center; //设置h1,h2,h2元素文本对齐方式
padding: 15px 20px; //所有内边距属性
font-size: 24px; //属性可设置字体的尺寸
vertical-align:top; //设置元素的垂直对齐方式
padding-top:12px; //设置p元素的内边距
.box-body tr:last-child {} //指定属于其父元素的最后一个子元素的p的背景色

<div id="outer">
<div id="inner"></div>
</div>

#inner{
	margin:auto;
	width:250px;
	height:125px;
	background-image:linger-gradient(45deg,#84ECEF 10%, #F8F62F 60%, #FDC018);
}
#outer{
	height:500px;
	width:500px;
	backgroud:#1F1D20;
	background-image: linear-gradient(#757575 1px, transparent 1px), linear-gradient(90deg, #757575 1px, transparent 1px);
  background-size: 25px 25px;
}

/*
设置p元素的4个外边距
*/
p{
	margin:10px 5px 15px 20px;
}

margin:10px 5px 15px 20px;
/*
上外边距是10px
右外边距5px
下外边距15px
左外边距是20px
*/
margin:10px,5px,15px
/*
上外边距是10px
右外边距和左外边距是5px
下外边距是15px
*/
margin:10px,5px
/*
上外边距和下外边距是10px
右外边距和左外边距是5px
*/
margin:10px
/*
所有四个外边距都是10px
*/

四、单选框和复选框

注意：单选框是圆的，而复选框是方的

五、label标签加for与不加for属性的区别

for属性规定label与哪个表单元绑定
作用：在点击label时，会自动将焦点移动到绑定的元素上

<from>
	<label for="male">Male</label>
	<input type="radio" name="sex" id="male" />
	<br/>
</from>

另一种方法：< lable > 包裹 < input >

<from action="" class="box">
	<label for="btn1">
		<input type="radio" name="aa" id="btn1"/>
		我是单选按钮1
	</label>
	<label for="btn2">
		<input type="radio" name="aa" id="btn2"/>
		我是单选按钮2
	</label>
</from>

注意：这种用法代码看起来比较规整，多个单选或者复选框时更能在视觉上体现代码的规整，但是这种写法需要注意的问题是：for属性

加了for属性就必须要有值（值为内元素input的id），如果只是一个空的for属性，则label失效，无法关联到内部的input框的筛选【注意：这种写法label是不起作用的】
不加for标签，当用户选择该标签时，浏览器会自动将焦点转到和标签相关的表单控件上【注：< label > 包裹 < input >标签，点击< label>，< label >相应两次，即< label >本身出发和< input >触发后冒泡到< label>】
解决方法：1把label的事件放到input上，2给input加组织事件冒泡；

六、HTML中&nbsp和空格的区别

HTML中&nbsp和空格的区别
在HTML代码中每输入一个转义字符&nbsp就表示一个空格，输入十个&nbsp，页面中就显示10个空格的位置。
而在HTML代码中输入空格，不管输入多少个空格，最终在页面中显示的空格位置只有一个。
在HTML代码中，&amp表示&字符，而空格表示的就是一个空格，在很多网站上编辑文字时，如果需要输入HTML中的一些转义字符，需要其进行转化

//如果要在页面中显示出转义字符&nbsp，而在HTML代码中直接输入，页面中显示的是一个空格，哥不是&nbsp。
//需要先将字符&通过转义字符&amp表示出来,再进行输入
<html>
<head>
	<title>HTML中的空格和&amp例子</title>
	<style type="text/css">
		body{background:#ccc;}
	</style>
</head>
<body>
<p>输入：&amp;nbsp</p>
</body>
</html>

扩展： HTML中常用特殊媳妇（HTML语法字符）的一种表达方式符
&nbsp ; 表示空格
&amp ；表示 &
&lt ; 表示 <
&gt ; 表示 >
&quot ; 表示 "
&apos ; 表示 ’

七、标签说明

< br/ > 插入换行符
type=“radio” 单选框
&nbsp 表示一个空格
&amp 表示&
overflow 属性规定当内容溢出元素框时发生的事情
< input placeholder="" > 表示带有placeholder文本搜索字段【该提示会在输入字段为空时显示，并会在字段获得焦点时消失】
注意：placeholder属性适用于以下的< input > 类型：text,search,url,telephone, email 以及 password。

Re__CODE

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript：简单面试题知识点总结

一、网页头部的声明用 lang="zh"还是 lang=“zh-cn”?简体中文页面：html lang=zh-cmn-Hans繁体中文页面：html lang=zh-cmn-Hant英语页面：html lang=en二、JavaScript放在< head >和< body >里有区别吗？先加载与后加载的区别，写在head标签里，在需要用window.onl...
复制链接

扫一扫

专栏目录