总结持续更新

最新推荐文章于 2023-04-07 16:23:13 发布

n7%

最新推荐文章于 2023-04-07 16:23:13 发布

阅读量99

点赞数

文章标签： html css js

本文链接：https://blog.csdn.net/Love_Roro/article/details/112546942

版权

页面导入样式时，使用link和@import的区别

1）从属关系的区别：link属于XHTML标签，而@import是CSS提供的语法规则，link除了加载CSS，还可以定义RSS，定义rel连接属性等，@import就只能加载CSS。

2）加载顺序的区别：页面加载时，link会同时被加载，而@import引用的CSS会等页面被加载完后再加载。

3）兼容性的区别：@import不兼容ie5以下，link是XHTML标签，没有兼容性问题。

4）DOM可控性区别：通过js操作DOM,可以插入link标签来改变样式；DOM方法是基于文档的，无法使用@import方式插入样式。

在html设计制作中，css有四种引入方式。

方式一：内联样式

内联样式，也叫行内样式，指的是直接在 HTML 标签中的 style 属性中添加 CSS。
示例：

<div style="display: none;background:red"></div>

这通常是个很糟糕的书写方式，它只能改变当前标签的样式，如果想要多个 <div> 拥有相同的样式，你不得不重复地为每个 <div> 添加相同的样式，如果想要修改一种样式，又不得不修改所有的 style 中的代码。很显然，内联方式引入 CSS 代码会导致 HTML 代码变得冗长，且使得网页难以维护。

方式二：嵌入样式

嵌入方式指的是在 HTML 头部中的 <style> 标签下书写 CSS 代码。
示例：

<head>
    <style>

    .content {
        background: red;
    }

    </style>
</head>

嵌入方式的 CSS 只对当前的网页有效。因为 CSS 代码是在 HTML 文件中，所以会使得代码比较集中，当我们写模板网页时这通常比较有利。因为查看模板代码的人可以一目了然地查看 HTML 结构和 CSS 样式。因为嵌入的 CSS 只对当前页面有效，所以当多个页面需要引入相同的 CSS 代码时，这样写会导致代码冗余，也不利于维护。

方式三：链接样式

链接方式指的是使用 HTML 头部的标签引入外部的 CSS 文件。
示例：

<head>
    <link rel="stylesheet" type="text/css" href="style.css">
</head>

这是最常见的也是最推荐的引入 CSS 的方式。使用这种方式，所有的 CSS 代码只存在于单独的 CSS 文件中，所以具有良好的可维护性。并且所有的 CSS 代码只存在于 CSS 文件中，CSS 文件会在第一次加载时引入，以后切换页面时只需加载 HTML 文件即可。

方式四：导入样式

导入方式指的是使用 CSS 规则引入外部 CSS 文件。
示例：

<style>
    @import url(style.css);
</style>

或者写在css样式中

@charset "utf-8";
@import url(style.css);
*{ margin:0; padding:0;}
.notice-link a{ color:#999;}

圣杯布局和双飞翼布局

作用：圣杯布局和双飞翼布局解决的问题是一样的，就是两边顶宽，中间自适应的三栏布局，中间栏要在放在文档流前面以优先渲染。

区别：

圣杯布局，为了中间div内容不被遮挡，将中间div设置了左右padding-left和padding-right后，将左右两个div用相对布局position: relative并分别配合right和left属性，以便左右两栏div移动后不遮挡中间div。

双飞翼布局，为了中间div内容不被遮挡，直接在中间div内部创建子div用于放置内容，在该子div里用margin-left和margin-right为左右两栏div留出位置。

用递归算法实现，数组长度为5且元素的随机数在2-32间不重复的值

描述：

这是一道大题目，把考点拆成了4个小项；需要侯选人用递归算法实现（限制15行代码以内实现；限制时间10分钟内完成）：
a) 生成一个长度为5的空数组arr。
b) 生成一个（2－32）之间的随机整数rand。
c) 把随机数rand插入到数组arr内，如果数组arr内已存在与rand相同的数字，则重新生成随机数rand并插入到arr内[需要使用递归实现，不能使用for/while等循环]
d) 最终输出一个长度为5，且内容不重复的数组arr。

 var arr = new Array(5);
    var num = randomNumber();
    var i = 0;
    randomArr(arr,num);
    function randomArr(arr,num) {
        if (arr.indexOf(num)< 0){
            arr[i] = num;
            i++;
        } else {
            num = randomNumber();
        }
        if (i>=arr.length){
            console.log(arr);
            return;
        }else{
            randomArr(arr,num)
        }
    }
    function randomNumber() {
        return Math.floor(Math.random()*31 + 2)
    }

（包含H5）HTML的元素有哪些

行内元素：a、b、span、strong、i、em、button、input、label、br、textarea、select

块元素：div、p、h1-h6、ol、ul、li、table、tbody、td、tr、thead、dl、dt、dd

H5新增元素：section、article、audio、video、hearder、footer、small

CSS3新增特性

边框圆角：border-radius

盒子阴影：box-shadow

背景定位：background-origin

背景尺寸：background-size

渐变：

linear-gradient线性渐变

radial-gradient 径向渐变

2d、3d变换：

transform、rotate()、scale()、skew()、translate()

css3动画：@Keyframes

过渡动画：transition

自定义动画：animation

弹性布局：flex

多媒体查询：@media

写一个方法去掉字符串中的空格

方法一是replace()方法与正则表达式的相结合,replace(/\s/g,’’)中，/\s/g表示检索全局中的空格。

方法二是split(’ ‘)先将字符串通过空格进行分割成为数组，然后再用join(’’)将数组通过空字符进行连接成字符串。

实际代码：

<script>
	
	var str=' abc     dafs  f343fs ';
	// 方法一
	console.log(str.replace(/\s/g,''));
	// 方法二
	// console.log(str.split(' ').join(''));

</script>