一、在原页面上打开新的页面target=“_blank”
ctrl + shift + t 打开原来关闭的页面
在 HTML 中，如果要在新窗口或新标签页中打开链接，可以使用 `target="_blank"` 属性。
这个属性告诉浏览器在一个新的浏览器窗口或标签页中打开链接的目标页面。
例如，如果您有一个链接元素，您可以这样使用 `target="_blank"`：
<a href="https://www.example.com" target="_blank">打开链接a>
在上面的代码中，当用户点击 "打开链接" 链接时，目标页面将在新的浏览器窗口或标签页中打开，
而不会导致当前页面的导航离开。
需要注意的是，虽然使用 `target="_blank"` 可以在新窗口或标签页中打开链接，
但这也可能影响用户体验，因为在不通知用户的情况下打开新窗口可能被一些浏览器或插件阻止，
也可能对可访问性造成影响。
因此，最好在链接中使用适当的文本或图标来表示链接将在新窗口或标签页中打开。
二、父标签塌陷怎么处理
父标签塌陷（也称为“垂直外边距折叠”）通常发生在垂直外边距相遇时，
导致父元素的高度不会像预期的那样增加。这可能会影响页面布局。
以下是处理父标签塌陷的几种常见方法：
1. **清除浮动（Clearfix）**：当子元素浮动时，父元素的高度可能会塌陷。
通过将父元素的 `overflow` 属性设置为 `hidden` 或 `auto`，可以触发清除浮动，从而防止塌陷。
<div style="overflow: hidden;">
div>
2. **使用 BFC（Block Formatting Context）**：BFC 是一个独立的布局环境，可以防止外边距折叠。
将父元素设置为 BFC 可以防止塌陷问题。
<div style="overflow: hidden; display: flow-root;">
div>
3. **设置内边距**：在父元素上添加适当的内边距可以防止外边距折叠，并保持父元素的高度不受影响。
<div style="padding: 1px;">
div>
4. **使用伪元素清除浮动**：将一个清除浮动的伪元素添加到父元素中，可以触发 BFC 并防止塌陷。
<div class="clearfix">
div>
<style>
.clearfix::after {
content: "";
display: block;
clear: both;
}
style>
这些方法可以帮助您处理父标签塌陷问题，具体的选择取决于您的布局和需求。
三、form表单-按钮注意事项
1.使用方法
注意：
由于form表单会自动提交表单，所以在写按钮要注意一下内容：
<form action="">
<div>
<input type="button" value="提交" class="btn btn-success btn-block">
div>
form>
四、KindEditor 编辑器
1.使用方法
1. 下载编辑器
下载 KindEditor 最新版本，下载之后打开 examples/index.html 就可以看到演示。
下载页面: http://www.kindsoft.net/down.php
2. 部署编辑器
解压 kindeditor-x.x.x.zip 文件，将所有文件上传到您的网站程序目录里，
例如：http://您的域名/editor/
Note
您可以根据需求删除以下目录后上传到服务器。
asp - ASP程序
asp.net - ASP.NET程序
php - PHP程序
jsp - JSP程序
examples - 演示文件
3. 修改HTML页面
1.在需要显示编辑器的位置添加textarea输入框。
<textarea id="editor_id" name="content" style="width:700px;height:300px;">
<strong>HTML内容</strong>
</textarea>
注意：Note
id在当前页面必须是唯一的值。
在textarea里设置HTML内容即可实现编辑，在这里需要注意的是，
如果从服务器端程序(ASP、PHP、ASP.NET等)直接显示内容，则必须转换HTML特殊字符(>,<,&,”)。
具体请参考各语言目录下面的demo.xxx程序，目前支持ASP、ASP.NET、PHP、JSP。
在有些浏览器上不设宽度和高度可能显示有问题，所以最好设一下宽度和高度。
宽度和高度可用inline样式设置，也可用 编辑器初始化参数 设置。
2.在该HTML页面添加以下脚本。
<script charset="utf-8" src="/editor/kindeditor.js"></script>
<script charset="utf-8" src="/editor/lang/zh-CN.js"></script>
<script>
KindEditor.ready(function(K) {
window.editor = K.create('#editor_id');
});
</script>
注意：Note
第一个参数可用其它CSS选择器，匹配多个textarea时只在第一个元素上加载编辑器。
通过K.create函数的第二个参数，可以对编辑器进行配置，具体参数请参考 编辑器初始化参数 。
var options = {
cssPath : '/css/index.css',
filterMode : true
};
var editor = K.create('textarea[name="content"]', options);
4. 获取HTML数据
html = editor.html();
editor.sync();
html = document.getElementById('editor_id').value;
html = K('#editor_id').val();
html = $('#editor_id').val();
editor.html('HTML内容');
注意：Note
KindEditor的可视化操作在新创建的iframe上执行，代码模式下的textarea框也是新创建的，
所以最后提交前需要执行 sync() 将HTML数据设置到原来的textarea。
KindEditor在默认情况下自动寻找textarea所属的form元素，
找到form后onsubmit事件里添加sync函数，所以用form方式提交数据，
不需要手动执行sync()函数。
KindEditor默认采用白名单过滤方式，可用 htmlTags 参数定义要保留的标签和属性。
当然也可以用 filterMode 参数关闭过滤模式，保留所有标签。
KindEditor.options.filterMode = false;
KindEditor.ready(function(K)) {
K.create('#editor_id');
}
2.编辑器初始化参数
Contents
编辑器初始化参数
width height
minWidth minHeight
items noDisableItems
filterMode htmlTags
wellFormatMode
resizeType themeType langType
designMode fullscreenMode
basePath themesPath pluginsPath langPath
minChangeSize
urlType newlineTag pasteType dialogAlignType
shadowMode
zIndex
useContextmenu
syncType
indentChar
cssPath
cssData
bodyClass
colorTable
afterCreate
afterChange
afterTab
afterFocus
afterBlur
afterUpload
uploadJson
fileManagerJson
allowPreviewEmoticons
allowImageUpload
allowFlashUpload
allowMediaUpload
allowFileUpload
allowFileManager
fontSizeTable
imageTabIndex
formatUploadUrl
fullscreenShortcut
extraFileUploadParams
filePostName
fillDescAfterUploadImage
afterSelectFile
pagebreakHtml
allowImageRemote
autoHeightMode
fixToolBar
1.width
编辑器的宽度，可以设置px或%，比textarea输入框样式表宽度优先度高。
数据类型: String
默认值: textarea输入框的宽度
示例:
K.create('#id', {
width : '700px'
});
2.height
编辑器的高度，只能设置px，比textarea输入框样式表高度优先度高。
数据类型: String
默认值: textarea输入框的高度
3.minWidth
指定编辑器最小宽度，单位为px。
数据类型: Int
默认值: 650
4.minHeight
指定编辑器最小高度，单位为px。
数据类型: Int
默认值: 100
5.items
配置编辑器的工具栏，其中”/”表示换行，”|”表示分隔符。
数据类型: Array
默认值:
[
'source', '|', 'undo', 'redo', '|', 'preview', 'print', 'template', 'code', 'cut', 'copy', 'paste',
'plainpaste', 'wordpaste', '|', 'justifyleft', 'justifycenter', 'justifyright',
'justifyfull', 'insertorderedlist', 'insertunorderedlist', 'indent', 'outdent', 'subscript',
'superscript', 'clearhtml', 'quickformat', 'selectall', '|', 'fullscreen', '/',
'formatblock', 'fontname', 'fontsize', '|', 'forecolor', 'hilitecolor', 'bold',
'italic', 'underline', 'strikethrough', 'lineheight', 'removeformat', '|', 'image', 'multiimage',
'flash', 'media', 'insertfile', 'table', 'hr', 'emoticons', 'baidumap', 'pagebreak',
'anchor', 'link', 'unlink', '|', 'about'
]
source HTML代码
preview 预览
undo 后退
redo 前进
cut 剪切
copy 复制
paste 粘贴
plainpaste 粘贴为无格式文本
wordpaste 从Word粘贴
selectall 全选
justifyleft 左对齐
justifycenter 居中
justifyright 右对齐
justifyfull 两端对齐
insertorderedlist 编号
insertunorderedlist 项目符号
indent 增加缩进
outdent 减少缩进
subscript 下标
superscript 上标
formatblock 段落
fontname 字体
fontsize 文字大小
forecolor 文字颜色
hilitecolor 文字背景
bold 粗体
italic 斜体
underline 下划线
strikethrough 删除线
removeformat 删除格式
image 图片
flash Flash
media 视音频
table 表格
hr 插入横线
emoticons 插入表情
link 超级链接
unlink 取消超级链接
fullscreen 全屏显示
about 关于
print 打印
code 插入程序代码
map Google地图
baidumap 百度地图
lineheight 行距
clearhtml 清理HTML代码
pagebreak 插入分页符
quickformat 一键排版
insertfile 插入文件
template 插入模板
anchor 插入锚点
6.noDisableItems
designMode 为false时，要保留的工具栏图标。
数据类型: Array
默认值: [‘source’, ‘fullscreen’]
7.filterMode
true时根据 htmlTags 过滤HTML代码，false时允许输入任何代码。
数据类型: Boolean
默认值: true
注意：Note
4.1.1版本开始默认值为true。
8.htmlTags
指定要保留的HTML标记和属性。Object的key为HTML标签名，value为HTML属性数组，
”.”开始的属性表示style属性。
数据类型: Object
默认值:
{
font : ['color', 'size', 'face', '.background-color'],
span : [
'.color', '.background-color', '.font-size', '.font-family', '.background',
'.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.line-height'
],
div : [
'align', '.border', '.margin', '.padding', '.text-align', '.color',
'.background-color', '.font-size', '.font-family', '.font-weight', '.background',
'.font-style', '.text-decoration', '.vertical-align', '.margin-left'
],
table: [
'border', 'cellspacing', 'cellpadding', 'width', 'height', 'align', 'bordercolor',
'.padding', '.margin', '.border', 'bgcolor', '.text-align', '.color', '.background-color',
'.font-size', '.font-family', '.font-weight', '.font-style', '.text-decoration', '.background',
'.width', '.height', '.border-collapse'
],
'td,th': [
'align', 'valign', 'width', 'height', 'colspan', 'rowspan', 'bgcolor',
'.text-align', '.color', '.background-color', '.font-size', '.font-family', '.font-weight',
'.font-style', '.text-decoration', '.vertical-align', '.background', '.border'
],
a : ['href', 'target', 'name'],
embed : ['src', 'width', 'height', 'type', 'loop', 'autostart', 'quality', '.width', '.height', 'align', 'allowscriptaccess'],
img : ['src', 'width', 'height', 'border', 'alt', 'title', 'align', '.width', '.height', '.border'],
'p,ol,ul,li,blockquote,h1,h2,h3,h4,h5,h6' : [
'align', '.text-align', '.color', '.background-color', '.font-size', '.font-family', '.background',
'.font-weight', '.font-style', '.text-decoration', '.vertical-align', '.text-indent', '.margin-left'
],
pre : ['class'],
hr : ['class', '.page-break-after'],
'br,tbody,tr,strong,b,sub,sup,em,i,u,strike,s,del' : []
}
9.wellFormatMode
true时美化HTML数据。
数据类型: Boolean
默认值: true
10。resizeType
2或1或0，2时可以拖动改变宽度和高度，1时只能改变高度，0时不能拖动。
数据类型: Int
默认值: 2
11.themeType
指定主题风格，可设置”default”、”simple”，指定simple时需要引入simple.css。
数据类型: String
默认值: “default”
示例:
<link rel="stylesheet" href="../themes/default/default.css" />
<link rel="stylesheet" href="../themes/simple/simple.css" />
<script charset="utf-8" src="../kindeditor.js"></script>
<script charset="utf-8" src="../lang/zh-CN.js"></script>
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('#editor_id', {
themeType : 'simple'
});
});
</script>
12.langType
指定语言，可设置”en”、”zh-CN”，需要引入lang/[langType].js。
数据类型: String
默认值: “zh-CN”
示例:
<link rel="stylesheet" href="../themes/default/default.css" />
<script charset="utf-8" src="../kindeditor.js"></script>
<script charset="utf-8" src="../lang/en.js"></script>
<script>
var editor;
KindEditor.ready(function(K) {
editor = K.create('#editor_id', {
langType : 'en'
});
});
</script>
13.designMode
可视化模式或代码模式
数据类型: Boolean
默认值: true
14.fullscreenMode
true时加载编辑器后变成全屏模式。
数据类型: Boolean
默认值: false
15.basePath
指定编辑器的根目录路径。
数据类型: String
默认值: 根据kindeditor.js文件名自动获取
16.themesPath
指定编辑器的themes目录路径。
数据类型: String
默认值: basePath + ‘themes/’
17.pluginsPath
指定编辑器的plugins目录路径。
数据类型: String
默认值: basePath + ‘plugins/’
18.langPath
指定编辑器的lang目录路径。
数据类型: String
默认值: basePath + ‘lang/’
19.minChangeSize
undo/redo文字输入最小变化长度，当输入的文字变化小于这个长度时不会添加到undo记录里。
数据类型: String
默认值: 5
20.urlType
改变站内本地URL，可设置”“、”relative”、”absolute”、”domain”。空为不修改URL，
relative为相对路径，absolute为绝对路径，domain为带域名的绝对路径。
数据类型: String
默认值: “”
21.newlineTag
设置回车换行标签，可设置”p”、”br”。
数据类型: String
默认值: “p”
22.pasteType
设置粘贴类型，0:禁止粘贴, 1:纯文本粘贴, 2:HTML粘贴
数据类型: Int
默认值: 2
23.dialogAlignType
设置弹出框(dialog)的对齐类型，可设置”“、”page”，指定page时按当前页面居中，指定空时按编辑器居中。
数据类型: String
默认值: “page”
24.shadowMode
true时弹出层(dialog)显示阴影。
数据类型: Boolean
默认值: true
25.zIndex
指定弹出层的基准z-index。
数据类型: Int
默认值: 811213
26.useContextmenu
true时使用右键菜单，false时屏蔽右键菜单。
数据类型: Boolean
默认值: true
27.syncType
同步数据的方式，可设置”“、”form”，值为form时提交form时自动同步，空时不会自动同步。
数据类型: String
默认值: “form”
28.indentChar
wellFormatMode 为true时，HTML代码缩进字符。
数据类型: String
默认值: “\t”
29.cssPath
指定编辑器iframe document的CSS文件，用于设置可视化区域的样式。
数据类型: String或Array
默认值: 空
30.cssData
指定编辑器iframe document的CSS数据，用于设置可视化区域的样式。
数据类型: String
默认值: 空
31.bodyClass
指定编辑器iframe document body的className。
数据类型: String
默认值: “ke-content”
32.colorTable
指定取色器里的颜色。
数据类型: Array
默认值:
[
['#E53333', '#E56600', '#FF9900', '#64451D', '#DFC5A4', '#FFE500'],
['#009900', '#006600', '#99BB00', '#B8D100', '#60D978', '#00D5FF'],
['#337FE5', '#003399', '#4C33E5', '#9933E5', '#CC33E5', '#EE33EE'],
['#FFFFFF', '#CCCCCC', '#999999', '#666666', '#333333', '#000000']
]
33.afterCreate
设置编辑器创建后执行的回调函数。
数据类型: Function
默认值: 无
34.afterChange
编辑器内容发生变化后执行的回调函数。
数据类型: Function
默认值: 无
35.afterTab
按下TAB键后执行的的回调函数。
数据类型: Function
默认值: 插入4个空格的函数
36.afterFocus
编辑器聚焦(focus)时执行的回调函数。
数据类型: Function
默认值: 无
37.afterBlur
编辑器失去焦点(blur)时执行的回调函数。
数据类型: Function
默认值: 无
38.afterUpload
上传文件后执行的回调函数。
数据类型: Function
默认值: 无
KindEditor.ready(function(K) {
K.create('#id', {
afterUpload : function(url) {
alert(url);
}
});
});
39.uploadJson
指定上传文件的服务器端程序。
数据类型: String
默认值: basePath + ‘php/upload_json.php’
40.fileManagerJson
指定浏览远程图片的服务器端程序。
数据类型: String
默认值: basePath + ‘php/file_manager_json.php’
41.allowPreviewEmoticons
true时鼠标放在表情上可以预览表情。
数据类型: Boolean
默认值: true
42.allowImageUpload
true时显示图片上传按钮。
数据类型: Boolean
默认值: true
43.allowFlashUpload
true时显示Flash上传按钮。
数据类型: Boolean
默认值: true
44.allowMediaUpload
true时显示视音频上传按钮。
数据类型: Boolean
默认值: true
45.allowFileUpload
true时显示文件上传按钮。
数据类型: Boolean
默认值: true
注意：Note
4.0.6版本开始支持。
46.allowFileManager
true时显示浏览远程服务器按钮。
数据类型: Boolean
默认值: false
47.fontSizeTable
指定文字大小。
数据类型: Array
默认值:
['9px', '10px', '12px', '14px', '16px', '18px', '24px', '32px']
48.imageTabIndex
图片弹出层的默认显示标签索引。
数据类型: Int
默认值: 0
注意：Note
4.0.6版本开始支持。
49.formatUploadUrl
false时不会自动格式化上传后的URL。
数据类型: Boolean
默认值: true
注意：Note
4.1版本开始支持。
50.fullscreenShortcut
false时禁用ESC全屏快捷键。
数据类型: Boolean
默认值: false
注意：Note
4.1版本开始支持，从4.1.2版本开始默认值为false。
51.extraFileUploadParams
上传图片、Flash、视音频、文件时，支持添加别的参数一并传到服务器。
数据类型: Array
默认值: {}
KindEditor.ready(function(K) {
K.create('#id', {
extraFileUploadParams : {
item_id : 1000,
category_id : 1
}
});
});
注意：Note
4.1.1版本开始支持。
52.filePostName
指定上传文件form名称。
数据类型: String
默认值: imgFile
Note
4.1.2版本开始支持。
53.fillDescAfterUploadImage
true时图片上传成功后切换到图片编辑标签，false时插入图片后关闭弹出框。
数据类型: Boolean
默认值: false
Note
4.1.2版本开始支持。
54.afterSelectFile
从图片空间选择文件后执行的回调函数。
数据类型: Function
默认值: 无
Note
4.1.2版本开始支持。
55.pagebreakHtml
可指定分页符HTML。
数据类型: String
默认值: <hr style=”page-break-after: always;” class=”ke-pagebreak” />
Note
4.1.3版本开始支持。
56.allowImageRemote
true时显示网络图片标签，false时不显示。
数据类型: Boolean
默认值: true
Note
4.1.6版本开始支持。
57.autoHeightMode
值为true，并引入autoheight.js插件时自动调整高度。
数据类型: Boolean
默认值: false
Note
4.1.8版本开始支持。
58.fixToolBar
值为true，并引入fixtoolbar.js插件时固定工具栏位置。
数据类型: Boolean
默认值: false
