OneStep ↻

web前端知识

⇧ 目录 ⇩
Toc目录

web前端知识汇总-合集

早期的文档申明
Html4.01和 Xhtml1.0：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 和 <!DOCTYPE html>

html5: <!DOCTYPE html>
最上面 文档声明 <!doctype html> 是 每个html网页 必须要有 不能省略 否则会出现不兼容等各种问题

在head标签下设置 语言 属性 lang="zh-CN" lang="zh" 或者 lang="en"
<html lang="zh-CN">

<html lang="zh-cmn-Hans"> 简体中文

<html lang="zh-cmn-Hant"> 繁体中文

编码设置 <meta charset="UTF-8" /> 或者 UTF8

html或php页面直接插入css样式： style="align:center;text-align: center;background-image: url();"

a标签链接在新选项页打开 target="_blank"

网页head基本要素

<meta charset="UTF-8">
<meta name="author" content="beiduoye">
<meta name="homepage" content="http://www.beiduoye.com">
<link type="image/x-icon" rel="shortcut icon" href="images/favicon.ico">
<title>我的标题</title>
<link rel="stylesheet" href="css/style.css">

<meta name="robots" content="noindex, nofollow">
表示：搜索引擎不将本页面添加到索引，也不抓取该页面上链接。

鼠标指针放在元素上显示的文本 title="鼠标悬停显示的文字内容" 多用于a标签上

控件设置为不显示 style="display:none;"
display与visibility的区别
CSS Display(显示) 与 Visibility（可见性）
规定元素是否可见 visibility:hidden;
参数visible 默认值。元素是可见的
hidden 元素不可见的 （即使设置成hidden后元素依然占据页面上的空间），具有隐藏效果，可用于重复隐藏显示元素的位置。
而display:none隐藏某个元素后，隐藏的元素不会占用任何空间。不会影响布局和页面结构
扩展： 隐藏元素的方法
还有其它非常规方法如 设置元素透明度opacity 或者 超出父控件后overflow隐藏 或者 设置元素 宽高为0

溢出了元素的内容会如何显示 overflow-x:hidden;

参数 scroll 裁剪内容 - 提供滚动机制。
hidden 裁剪内容 - 不提供滚动机制。
auto 如果溢出框，则应该提供滚动机制。

上右下左边距（顺时针旋转记忆） margin: 10px 3px 30px 5px; 与 padding 内边距 的差异

控件定位 position属性指定一个元素（静态的，相对的，绝对或固定）的定位方法 position: relative;
参数 absolute 绝对（）
relative 相对（根据附件控件变化）
fixed 固定（浏览器窗口）

z-index 属性指定一个元素的堆叠顺序。 z-index: 6;
数字大的 显示 在上面

letter-spacing 属性增加或减少字符间的空白（字符间距） letter-spacing: .3px
可以设置为负值 数值越大 间距越大

旋转transform:rotate只对块状元素有效，需要把控件元素设置成display:block和display:inline-block
再设置 固定的宽和高
默认inline内联元素没有效果

font-weight 文本字体粗细 font-weight:bold;
参数 normal 默认值
bold 粗体 bolder 更粗
lighter 更细

设置控件内边距属性 padding 内边距 padding:10px 5px 15px 20px;
上右下左 顺时针 顺序
一个值得时候 控制所有4个方向内边距 四边对等
两个值得时候 第一个控制 上下，第二个控制左右
三个值得时候 第一个控制 上，第二个控制左右，第一个控制 下

ol,ul从是序号01开始排序list-style-type:decimal-leading-zero;
01 02 03...

ol或者ul列表项目标记 位置 list-style-position: inside;
何为项目标记？就 就是列表前的 项目符号 圆点、圈、方块等样式图案
参数 inside 列表项目标记放置在文本以内，且环绕文本根据标记对齐。
outside 默认值。保持标记位于文本的左侧。列表项目标记放置在文本以外，且环绕文本不根据标记对齐。
不想显示项目标记可以用list-style: none; 屏蔽显示

还有默认列表项目是list-style-position:outside的，如果用了overflow:hidden 就会被隐藏掉
可以将列表项目设置在列表文本以内list-style-position: inside
项目标记会包裹在li的边框内部（如果给li设置里边框效果就会很明显）

元素的水平方向向左或向右浮动 style="float:right;"

 左右两个方向参数 float : none | left |right

可以用clear 清除浮动
元素浮动之后，周围的元素会重新排列，为了避免这种情况，使用 clear 属性。
clear 属性指定元素两侧不能出现浮动元素。clear:both;
备注：慎重使用float，因为会影响原有的页面布局 造成其他元素浮动
方法：建一个空div标签，并设置样式为clear:both;

元素的透明度级别opacity:0.5;
值：指定不透明度。从0.0（完全透明）到1.0（完全不透明）
与background-color搭配使用

设置以百分比计的行高： line-height: 200%; 不允许的负值 可以消除元素间高低不齐 从而达到整齐美观

CSS之px、em、rem三者的联系与区别

code标签与pre的区别
pre标签可以保留文本中的空格和换行符及样式
而源代码code标签不行
简单理解：显示一行代码时可以使用code标签，显示多行代码时可以用pre标签

其他文本效果 扩展标签
em强调文本
strong加粗文本
dfn定义项目
samp计算机样本
kbd键盘输入
var变量
tt定义打字机文本

兼容ie浏览器的问题

<!--[if it IE6]>
中间的内容在IE6中可以显示，其他的都不显示。
<![endif]>

<!--[if lt IE 9]>
        <div class="message error browsehappy" role="dialog"><?php _e('当前网页 <strong>不支持</strong> 你正在使用的浏览器. 为了正常的访问, 请 <a href="http://browsehappy.com/">升级你的浏览器</a>'); ?>.</div>
    <![endif]-->

文本超出父容器的部分以...的形式隐藏
显示省略符号...来代表被修剪的文本。text-overflow:ellipsis;
参数 clip 修剪文本 直接不显示超出部分
配合css样式 overflow:visible; 一起
overflow:hidden;text-overflow:ellipsis; 这一整句的意思：超出显示省略号
white-space:pre; 空白会被浏览器保留。其行为方式类似 HTML 中的<pre>标签。
white-space:nowrap; 强制文本不换行(文本会在在同一行上继续，直到遇到<br>标签为止。)
word-wrap:break-word; 自动换行（不拆分单词）
word-break:break-all; 强制英文单词断行，强行拆分单词换行
white-space:pre-wrap; 保留空白符序列，但是正常地进行换行。
white-space:pre-line; 合并空白符序列，但是保留换行符。
新标签overflow-wrap

页面跳转顶部
<a href="#">to top</a> //直接跳转到最顶端

页面跳转顶部底部的三种常见操作
第一种

<a href="#div1">to bottom</a> //跳转链接
<div id="div1">to bottom</div> //跳转地点

第二种

这种方法会跳转到底部

<a href="#div2">Jump</a> //跳转链接
<a name="div2">hello world! goodbye and see you tomorrow.</a> //跳转地点

利用javascript跳转

get方法跳转

window.location.href='/manage/enterpriseexportexcel?ids='+ids; // 在下载数据时,这个方法可以实现不刷新页面
window.open('/manage/enterpriseexportexcel?id='+id);

section和div用法有什么区别

设置文本对齐方式 text-align: left;
参数 left center right 左中右
只能对齐文本，对其它元素控件无效
text-align:center居中，不同内含浏览器不同书写方式，有的时候会出现不生效的情况
适配火狐浏览器 text-align:-moz-center
适配谷歌浏览器 text-align:-webkit-center

css 消除div内a标签span标签间 空隙
1.先在外层div设置font-size: 0; 2.再设置div内的每个标签相同的font-size 这样就行了

dotted 1px #c7cfcf 斑点线与 1px dashed #747473 虚线 1px solid #d8dadc 实线
border-bottom: 1px dashed #747473; 底部增加一条虚线

淡入 淡出 效果
使用fadeIn()和fadeOut()方法 必须导入jQuery脚本

<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">

框架
iframe标签的使用
插入一个js

document.writeln('<iframe style="width:300px;height:460px;display:block;" frameborder="0" marginheight="0" marginwidth="0" border="0" scrolling="no" height="300px" width="460px" src="http://sc.115.com/api/?ct=sc&ac=my&page=1" background-color :#000000;></iframe>');

<div id="sc115"><script type="text/javascript" src="./sc115.js"></script>
</div>
<input type="button" value="115网页版" 
onclick="javascrtpt:window.location.href='http://115.com/?m=1'">
<input type="button" value="网址收藏" 
onclick="javascrtpt:window.location.href='add.html'">

一些未解的疑惑和不理解的地方

<input type="button"> 与 <button></button> 的区别
获取控件 document.getElementById 与 $ 的区别
将js代码中getElementById换成getElementsByClassName很多时候都无效
原因是getElementsByClassName所指向的元素可以有很多个相同类名，
getElementById所指向的元素是唯一的一个
直接获取getElementsByClassName()返回的是数组而不是单个的元素
getElementsByClassName("btn")[3] 这个表示class="btn"第四个类名为btn的控件
备注：Internet Explorer 8 及更早 IE 版本不支持 getElementsByClassName() 方法。

css样式在index.html页面直接插入 还是单独写 style.css 有区别吗，区别大吗
table标签下中th和td区别
程序中this的妙用

申明变量let 和 var的区别
let声明的变量只在它所在的代码块有效。适合用于for循环这类单一独立的代码块。

class与id的区别
css样式中Id以井号“#”符号开头,Class以小写句号“.”（点）符号开头
Id唯一标识，在一个网页中只能使用一次。
Class类，在一个网页中可以使用无数次。

字体加粗效果<b>标签和<strong>标签与css样式font-weight: bolder;的区别以及使用的侧重点

draggable 属性规定元素是否可拖动 draggable="true" 链接和图像默认是可拖动的。
参数：true 规定元素的可拖动的。
false 规定元素不可拖动。
auto 使用浏览器的默认特性。

使用:before和:after为控件元素前后增加内容
:before和:after的作用及使用方法
content: 'Hello';
或是 用:after :before伪类 添加小图标

写在css样式内

h3:before {
    content: "#";
}
a.moneytome:before {
content: "\9749";
}
a.lovetome:before {
content: "\2764";
}

为什么很多博客主都用i标签来显示小图标

onmouseover和hover有什么区别
javascript滑过事件onmouseover，是动作 。可以触发js命令。
css鼠标悬停样式：hover 。只能改变样式属性 不能操作动作

small#declaration:hover {
    color: #f00;
}

鼠标滑过是改变元素 颜色

css响应式布局 @media (min-width:768px){***} 判断>=768的设备屏幕尺寸
@media (max-width: 767px) 判断<=767的设备屏幕尺寸

css通过transform控制元素旋转

    transform: rotate(45deg);
transform-origin:20% 40%;
-ms-transform: rotate(45deg); /* IE 9 */
-ms-transform-origin:20% 40%; /* IE 9 */
-webkit-transform: rotate(45deg); /* Safari and Chrome */
-webkit-transform-origin:20% 40%; /* Safari and Chrome */

css通过@keyframes控制元素移动
html前端设置移动时间animation: diymove 30s infinite;
-webkit-animation: diymove 30s infinite; 谷歌浏览器模式下

兼容其他内核浏览器

-moz-animation:  /* Firefox */
-webkit-animation:  /* Safari and Chrome */
-o-animation:  /* opera */
-ms-animation:  /* ie9 */
animation:

css移动方向

@keyframes diymove
{
    0%   {left:-15%;}
    100% {left:100%;}
}    
@-webkit-keyframes diymove /* Safari and Chrome */
{
        0%   {left:-15%;}
    100% {left:100%;}
}

也可以用 from 开始位置 to 终点位置 代替 百分比
备注：@keyframes 规则 不兼容 IE 9 以及更早版本的浏览器
而 文本移动标签 marquee已废弃，各大参考文档标注说明已过时。

设置字体居中 style="text-align: center"

外层DIV设定position: absolute div内的元素该如何居中

left:50%;
margin-left: -100px;

margin-left的尺寸为元素的一半

边距设置
css三种边距 怎么理解和使用
左边距 left ，margin-left ，padding-left

a标签 空链接
很多时候会用到一个没有链接地址的a标签，这时候就会用到空链接使它不跳转
<a herf="###"></a> 链接为空不跳转，唯一地址栏地址多增加了三个###
<a herf="#"></a> 锚标记 页面滑到顶部 地址栏地址多增加了一个#页面不发生变化
<a href="javascript:void(0);"></a> 跳转一个空方法

去除a标签 默认下划线 text-decoration: none;

纵向超出限定高度后自动出现上下滚动条overflow-y: auto;
overflow: scroll;

去除li前面样式图案 list-style: none;

li标签可以单独用吗？犯了个小错误 li单独使用 没有套ol或者li ,在不同浏览器下出现宽度和高度不同
li标签单独使用 不符合w3c的标准
还有 ul列表里不能直接嵌套div标签

首行文本的缩进text-indent: 1.5em!important; 长文本，一大段文章必备

字体粗细font-weight
参数 normal 默认 标准
bold 粗体
bolder 更粗
lighter 更细
数值 100——900 ， 400 等同于 normal，而 700 等同于 bold

document.getElementById()方法 getElementsByClassName()方法 的用法
document.querySelector() 方法仅仅返回匹配指定选择器的第一个元素

alert弹窗功能 alert("我是一个弹窗提醒！");

音频audio标签 播放状态监听
<audio src="" id="audio"></audio>
js代码监听播放状态

var audios = document.getElementById('audio');
audios.addEventListener("play", function () {   //开始播放时触发 执行
});
audios.addEventListener("pause", function () {   // 暂停时会触发，当播放完一首歌曲时也会触发
 });

怎样去除浏览器默认样式user agent stylesheet
不必烦恼，据说 浏览器默认样式 优先级很低，只要手动添加上样式就行了

css中 空格 逗号, 冒号: 感叹号！大于号>的用法
css中 逗号,的作用，把需要设置相同css样式的控件 写在一起节省代码条数

body.night, input, textarea {
    background-color: #ad6 ;
}

给pre标签 增加class和样式

     <script type="text/javascript">
 $('pre').addClass("line-numbers").css("white-space", "pre-wrap");
</script>

初识CSS

CSS引入方式
1.将CSS语句写在style标签中 style写在head标签中.
2.使用link标签将CSS文件引入.
3.在标签的style属性写CSS语句
语法
标签名 .类名 #id名 *通配符
优先级
通配符<标签<class类<id<行内样式<!important
代码注释
css里
注释 /*这里是注释*/

js里
单行注释 //这里是注释
多行注释 /*这里是注释*/

html里 <!--注释-->

HTML下的条件注释

<!--[if it IE6]>
中间的内容在IE6中可以显示，其他的都不显示。
<![endif]>

php里注释
<?php /* 这里面是注释内容 */ ?>

伪类
link 没有单击访问时超链接样式
visited 单击访问之后超链接样式
hover 鼠标悬停后样式
active 鼠标单击未释放
阴影
box-shadow
第一个值 在X轴上移动的距离
第二个值 在Y轴的距离
第三个值 距离物体的距离
第四个值 阴影大小

前后端 HTML/CSS/JavaScript 库 ，框架

jQuery
Bootstrap
AngularJS
Vue.js
Font Awesome 字体图标框架
layer(web弹窗/层 插件)

备注：尽可能的不要贪图省时省力而使用这些开发框架
纯代码也许需要百多行而使用框架仅仅只需5-6行
可以学习参考，但不能依赖这些框架插件

前端 控制台 打印消息

console.log() 打印日志
console.clear() 清除消息

页面间的参数传递

方法一：前台通过a标签 href="?参数名=参数" 在url链接上拼接参数
后台页面通过$_GET['参数名']; 获取

方法二： 使用$.ajax传递参数

$.ajax({
    //url: '', 不写默认传递到当前页面
    //type: 'post',  不指定type类型的话，会以get方式提交 参数拼接在url后面传递以后台方式传递
             //参数不会直接显示在网址栏处的网址后面(F12调试工具里可以查看)
    data: {
        参数名: "参数"
    },
    dataType: 'text',
    success: function (data) {
        alert(data);
    }
})

a标签 鼠标悬停样式（鼠标指针显示小手图案）

默认书写规范正常的a标签 小手形状
a标签在没有href属性的情况下 文本指针形状
可通过 css样式 cursor:pointer; 修改自定义鼠标悬停指针图案
或将href属性设置为 href="javascript:;"
还有 href="###" 和 href="javascript:void(0);"

前端 清除元素 间距的方法
1.使用float 浮动
2.在外层控件的样式中设置font-size: 0; ，内层元素 再设置一个font-size就可以了。

使用jQuery库的attr设置修改 元素的 css样式属性
错误示例：$('#left_btn').attr("visibility","hidden");
这个效果是 visibility="hidden";

正确示例：$('#left_btn').attr("visibility":"hidden");
效果 style="visibility: hidden;"

使用原始 js 设置修改 元素的 css样式属性

$('#left_btn').css('dispaly','none');

或者直接

document.getElementById("left_btn").style.visibility="hidden";

同理 对应jQuery库的removeAttr为 设置 移除 属性
设置方法 类似同上

    $('#left_btn').removeAttr('dispaly');

移除属性名就行，和值无关

实现页面跳转

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <meta http-equiv="refresh" content="0; url=https://beiduoye.github.io/" />
    <title>Document</title>
</head>
<body>
</body>
</html>
选项卡 控件<option>隐藏选择 设置参数

下拉列表
隐藏 disabled hidden

举例---

<select>
<option>沃尔沃</option>
<option>萨博</option>
<option disabled hidden>奔驰</option>
<option selected="selected">奥迪</option>
</select>

说明 <option selected="selected">奥迪</option> 与 <option selected>奥迪</option> 效果相同

清空内容替换为新的控件

$("#diyselect").empty();
  $('#diyselect').append("<li>test</li><li>贝多叶</li><li>112</li>");
  $("#diyselect").show();

使用新的语句 节省代码

$("#diyselect ul").replaceWith("<b>Hello world!</b>");

监听 事件
addEventListener() 方法用于向指定元素添加事件句柄。
change ，click 等
示例： 监听 select选项卡

const select = document.getElementById("select_id");
       select.addEventListener("change", () => {
            alert(select.value)
        });

addEventListener可以换成 on
其中 () => 这种 写法不太理解 一般 都是 写 function()

另外一种 写法

$("#select_id").change(function(){
var selected=$(this).children('option:selected').val();
             alert(selected);
});

图片img延时加载

图像延迟加载，只有鼠标滚动到该图片所在位置才会显示。
loading="lazy"

打开窗口
window.location.href

新窗口打开链接
window.open("https://www.1.cn/")

站点图标
<!--[if IE]><link rel="icon" href="/favicon.ico"><![endif]-->

通过calc设置width和height
calc(100% - 70px)

前端原生框架iframe
已弃用

input框不可编辑的方法
1.disabled
示例:<input type="text" disabled="disabled" />

  1. readonly unselectable="on"
    示例:<input type="text" readonly unselectable="on" >

3.readonly
示例:<input type="text" readonly="readonly">
4.css设置
opacity: 0;或者display: none; 或者visibility:hidden;

表单

<form id="form1" onsubmit="return false" action="##" method="post"><input id="diySearch" type="text" name="inputkey" placeholder="简单 方便 高效"  autocomplete="off"></form>

使用i元素图标
<i style="font-size: 20px;" class="iconfont icon-sousuo"></i>

规定文本不进行换行
white-space: nowrap;
可用于设置li横向滚动

前端页面html向js传递参数
值通过方法传递
onclick="setAsBg('<?=$key?>')"
如何使用

function setAsBg(ss) {
bgimgid=parseInt(ss);
}

值通过方法传递
data-bgId="<?=$key?>"
如何使用
var bgId= $(this).attr('data-bgId');

<textarea name="msg" id="text" rows="1"></textarea>
textarea 在iPhone13mini端 始终有最小宽度 坑爹啊 以至于覆盖到其他控件
而且内联元素 套div宽度不是很好把控

box-sizing: border-box;

网页背景音乐

<audio autoplay="autoplay" controls="controls" loop="loop" id="bg-music">
<source src='名决 - 黄沙.flac' type="audio/mpeg"></source>
        </audio>

可以放在<head>标签内
<embed type="video/webm" src="movie.mp4" hidden="true" loop="false" autostart="false">
<embed src="toot.mp3" hidden="true" loop="false" autostart="ture">
<audio id="music" muted preload="auto"><source src="toot.mp3" audio=""></audio>
只有ie才能用的
<bgsound src="paomo.mp3" loop="-1">

备注 embed有很多浏览器不播放 如Firefox及部分手机浏览器
音乐播放控件

js控制
document.getElementById("music").muted = false;
document.getElementById('music').play();

页面自动刷新
<meta http-equiv="refresh" content="10">

空值
"" 和 null 还有 undefined
js判断类型是否为undefined
typeof(传入变量名) == "undefined"
直接判断变量是否为真

画布（Canvas）元素
<canvas id="myCanvas" width="200" height="100"></canvas>

使用 data-* 属性来嵌入自定义数据
示例：

<li class="se-li" data-soname="Bing" data-url="https://www.bing.com/search" data-name="q" data-placeholder="必应-国际版" data-typename="默认" data-params="FORM" data-paramsvalue="BESBTB" data-img="#icon-bing"><svg class="sou-ico"><use xlink:href="#icon-bing"></use></svg>Bing</li>

---在当前目录下打开cmd命令窗口的快捷方法
在当前目录上面的路径显示框中输入CMD，然后回车即可。

apple系列 图标 申明

<link rel="apple-touch-icon" href="/icon.png" />
<link rel="apple-touch-icon" sizes="72x72" href="/icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="/icon-114x114.png" />

<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> 
<link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> 
<link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">

屏幕尺寸
iPhone 6/7, iPhone 6/7s, iPhone SE 120×120 (60pt × 60pt @2x)
iPad / iPad Mini 152×152 (76pt × 76pt @2x)
iPad Pro 167×167 (83.5pt × 83.5pt @2x)
iPhone 6/7 Plus, iPhone 6/7s Plus 180×180 (60pt × 60pt @3x)

Android Regular 128×128
Android Hi-Res 192×192

彩虹七色 颜色代码
"#FF0000", "#FF7F00", "#FFFF00", "#00FF00", "#00FFFF", "#0000FF", "#8B00FF"
蓝绿浅色
19CAAD 8CC7B5 A0EEE1 BEE7E9 BEEDC7
灰红色
D6D5B7 D1BA74 E6CEAC ECAD9E F4606C

点赞(2)👍 👎
Cate&Tag:技术 web
浏览次数(1428) 字数(3699)
@贝多叶
☕打赏❤赞助！
支付宝打赏 微信打赏

免责声明:本站多数资源来源于互联网。少数原创内容为本人随意书写不对其负任何法律责任(均为键盘和鼠标自行敲击)，部分有助于网友的内容仅供学习与交流。如有转载、盗链等其它行为产生对国家社会网络不良影响均与本人无关。
版权说明:未经博主授权禁止转载、摘编、复制或建立镜像。对既成事实本站将保留所有的权利。

⇦       ⇨




发表评论

发表新评论

请输入本站名：

暂无评论   

发送消息！ ✕
取消 发送
onestep
网站二维码
手机扫一扫，查看
.
贝多叶@聚合支付

真诚赞赏，手留余香

使用微信扫描二维码完成支付