整合营销服务商
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
电脑端+手机端+微信端=数据同步管理
免费咨询热线：
子1：（文本内容中的连续空格）
<p>这段文本中，输入连续的空格 大概输入了十个。</p>显示效果：“格”和“大” 之间的是个空格显示出来只是一个空格。
这段文本中，输入连续的空格 大概输入了十个。例子2：（代码之间的连续空格）
<span>span是一个行内标签</span> <span>和前面的span元素之间隔了很多个空格</span>显示效果:两个span元素之间连续的空格，显示出来即"签"与“和”之间的空格，只有一个空格。
span是一个行内标签 和前面的span元素之间隔了很多个空格上面两个例子证明：HTML代码中连续的空格在显示时会显示为一个空格，其余的多余的空格会被移除或者说被忽略。
段落文本其实也是HTML代码的一部分，只不过它在p标签内部，而例子2的空格是在两个span标签之间。
理解了空格，现在看看空行，同理
例子3：（文本内容中的空行）
<p>这段文本中，输入连续的空行
大概输入了五行。</p>显示效果：如我们所见，文本代码中的五行空行，显示出来也只是一个空格。
这段文本中，输入连续的空行 大概输入了五行。例子4：（元素之间/标签之间的空行），只要把例子2中的空格换成空行就可以了，显示效果和例子2的一样，多行空行都只会显示为一个空格。
<span>span是一个行内标签</span>
<span>和前面的span元素之间隔了很多空行</span>span是一个行内标签 和前面的span元素之间隔了很多空行得证：HTML 代码中的所有连续的空格或空行（换行）都会被显示为一个空格。
既然如此，如果我们希望扩大两个字符之间的间距，让代码中的连续空格或空行显示出来的结果也是连续的空格或空行，那该怎么办？其实很简单。
方法一：我们可以用预格式化标签<pre>，无论是空格或空行都适用。
<pre>
这是
预格式文本。
它保留了 空格
和换行。
</pre>显示效果
这是
预格式文本。
它保留了 空格
和换行。方法二：我们可以用空格实体符 代替空格，用换行标签<br/>代替空行。虽然这种方法可以得到我们想要的显示效果，但是对搜索引擎不是最友好的方式，因为 和<br/>在HTML中都是没有语义的。所以建议尽量少用。另外需要注意的是， 必须小写，而且最后面的分号是不能省略的。
方法三：（适合空格）使用全角空格
全角空格被解释为汉字，所以不会被被解释为HTML分隔符，可以按照实际的空格数显示。
问题：怎么使用全角输入法？
以搜狗输入法为例，我们通常使用的是半角输入，其状态栏中有个月亮的标志，就说明正在使用的是半角输入，如果是太阳的标志，就说明使用的是全角输入。全角/半角的切换可以通过点击标志，也可以通过快捷键 Shift+Space（空格符）切换。
半角输入（月亮）
全角输入（太阳）
方法四：使用CSS样式中字间隔属性控制，CSS中的word-spacing 属性可以改变字（单词）之间的标准间隔。我们知道英文中两个单词之间是通过空格隔开的，所以我们视觉上可以这样认为，word-spacing改变了（拉长或缩短）单词之间那个空格的宽度。
方法五：使用CSS样式中的white-space 属性，这个属性声明如何处理元素内的空白符。
值 | 描述 |
normal | 默认。空白会被浏览器忽略。 |
pre | 空白会被浏览器保留。其行为方式类似 HTML 中的 <pre> 标签。 |
nowrap | 文本不会换行，文本会在在同一行上继续，直到遇到 <br> 标签为止。 |
pre-wrap | 保留空白符序列，但是正常地进行换行。 |
pre-line | 合并空白符序列，但是保留换行符。 |
white-space:normal;就是正常，和不设置一样，连续空格和空行都只会显示一个空格。
white-space:nowrap;不换行是什么意思呢？正常情况下，当我们的文本超出了文本域，文本就会自动折行，这个设置就是说不自动折行了，而是碰到换行标签<br />才换
white-space:pre;和方法一相同，将文本原样输出显示。当文本超出文本域时，不换行，会产生滚动条。
white-space:pre-wrap;保留空格和空行，但当文本超出文本域时，会自动换行。
white-space:pre-line;连续的空格会显示为一个空格，但保留连续的空行。
当用户进行鼠标框选选择了页面上的内容时，把选择的内容进行上报。
虽然这需求就一句话的事，但是很显然，没那么简单...
因为鼠标框选说起来简单，就是选择的内容，但是这包含很多中情况，比如：只选择文案、选择图片、选择输入框、输入框中的内容选择、iframe、等。
简单总结，分为以下几点：
鼠标框选包含以下几点：
老生常谈的技术点了，这里不能用节流，因为肯定不能你鼠标选择的时候，隔一段时间返回一段内容，肯定是选择之后一起返回。
这里用 debounce 主要也是用在事件监听和事件处理上。
事件监听，因为鼠标选择，不仅仅是鼠标按下到鼠标抬起，还包括双击、右键、全选。
需要使用事件监听对事件作处理。
Range 接口表示一个包含节点与文本节点的一部分的文档片段。
Range 是浏览器原生的对象。
<body>
<ul>
<li>Vite</li>
<li>Vue</li>
<li>React</li>
<li>VitePress</li>
<li>NaiveUI</li>
</ul>
</body>
<script>
// 创建 Range 对象
const range = new Range()
const liDoms = document.querySelectorAll("li");
// Range 起始位置在 li 2
range.setStartBefore(liDoms[1]);
// Range 结束位置在 li 3
range.setEndAfter(liDoms[2]);
// 获取 selection 对象
const selection = window.getSelection();
// 添加光标选择的范围
selection.addRange(range);
</script>可以看到，选择内容为第二行和第三行
只选择 li 中的 itePres
可以看出 range 属性对应的值
const range = document.createRange();const range = window.getSelection().getRangeAt(0)if (document.caretRangeFromPoint) {
range = document.caretRangeFromPoint(e.clientX, e.clientY);
}const range = new Range()Selection 对象表示用户选择的文本范围或插入符号的当前位置。它代表页面中的文本选区，可能横跨多个元素。
window.getSelection()锚指的是一个选区的起始点（不同于 HTML 中的锚点链接）。当我们使用鼠标框选一个区域的时候，锚点就是我们鼠标按下瞬间的那个点。在用户拖动鼠标时，锚点是不会变的。
选区的焦点是该选区的终点，当你用鼠标框选一个选区的时候，焦点是你的鼠标松开瞬间所记录的那个点。随着用户拖动鼠标，焦点的位置会随着改变。
范围指的是文档中连续的一部分。一个范围包括整个节点，也可以包含节点的一部分，例如文本节点的一部分。用户通常下只能选择一个范围，但是有的时候用户也有可能选择多个范围。
一个用户可编辑的元素（例如一个使用 contenteditable 的 HTML 元素，或是在启用了 designMode 的 Document 的子元素）。
首先要清楚，选择的起点称为锚点(anchor)，终点称为焦点(focus)。
function debounce (fn, time = 500) {
let timeout = null; // 创建一个标记用来存放定时器的返回值
return function () {
clearTimeout(timeout) // 每当触发时，把前一个 定时器 clear 掉
timeout = setTimeout(() => { // 创建一个新的 定时器，并赋值给 timeout
fn.apply(this, arguments)
}, time)
}
}/**
* debounce 函数类型
*/
type DebouncedFunction<F extends (...args: any[]) => any> = (...args: Parameters<F>) => void
/**
* debounce 防抖函数
* @param {Function} func 函数
* @param {number} wait 等待时间
* @param {false} immediate 是否立即执行
* @returns {DebouncedFunction}
*/
function debounce<F extends (...args: any[]) => any>(
func: F,
wait = 500,
immediate = false
): DebouncedFunction<F> {
let timeout: ReturnType<typeof setTimeout> | null
return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const context = this
const later = function () {
timeout = null
if (!immediate) {
func.apply(context, args)
}
}
const callNow = immediate && !timeout
if (timeout) {
clearTimeout(timeout)
}
timeout = setTimeout(later, wait)
if (callNow) {
func.apply(context, args)
}
}
}nterface IGetSelectContentProps {
type: 'html' | 'text'
content: string
}
/**
* 获取选择的内容
* @returns {null | IGetSelectContentProps} 返回选择的内容
*/
const getSelectContent = (): null | IGetSelectContentProps => {
const selection = window.getSelection()
if (selection) {
// 1. 是焦点在 input 输入框
// 2. 没有选中
// 3. 选择的是输入框
if (selection.isCollapsed) {
return selection.toString().trim().length
? {
type: 'text',
content: selection.toString().trim()
}
: null
}
// 获取选择范围
const range = selection.getRangeAt(0)
// 获取选择内容
const rangeClone = range.cloneContents()
// 判断选择内容里面有没有节点
if (rangeClone.childElementCount > 0) {
// 创建 div 标签
const container = document.createElement('div')
// div 标签 append 复制节点
container.appendChild(rangeClone)
// 如果复制的内容长度为 0
if (!selection.toString().trim().length) {
// 判断是否有选择特殊节点
const isSpNode = hasSpNode(container)
return isSpNode
? {
type: 'html',
content: container.innerHTML
}
: null
}
return {
type: 'html',
content: container.innerHTML
}
} else {
return selection.toString().trim().length
? {
type: 'text',
content: selection.toString().trim()
}
: null
}
} else {
return null
}
}
/**
* 判断是否包含特殊元素
* @param {Element} parent 父元素
* @returns {boolean} 是否包含特殊元素
*/
const hasSpNode = (parent: Element): boolean => {
const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
const inpList = ['input', 'textarea', 'select']
return Array.from(parent.children).some((node) => {
if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
if (
inpList.includes(node.nodeName.toLocaleLowerCase()) &&
(node as HTMLInputElement).value.trim().length
)
return true
if (node.children) {
return hasSpNode(node)
}
return false
})
}/**
* 获取框选的文案内容
* @returns {string} 返回框选的内容
*/
const getSelectTextContent = (): string => {
const selection = window.getSelection()
return selection?.toString().trim() || ''
}// 是否时鼠标点击动作
let selectionchangeMouseTrack: boolean = false
const selectionChangeFun = debounce(() => {
const selectContent = getSelectContent()
console.log('selectContent', selectContent)
// todo... 处理上报
selectionchangeMouseTrack = false
})
// 添加 mousedown 监听事件
document.addEventListener('mousedown', () => {
selectionchangeMouseTrack = true
})
// 添加 mouseup 监听事件
document.addEventListener(
'mouseup',
debounce(() => {
selectionChangeFun()
}, 100)
)
// 添加 selectionchange 监听事件
document.addEventListener(
'selectionchange',
debounce(() => {
if (selectionchangeMouseTrack) return
selectionChangeFun()
})
)
// 添加 dblclick 监听事件
document.addEventListener('dblclick', () => {
selectionChangeFun()
})
// 添加 contextmenu 监听事件
document.addEventListener(
'contextmenu',
debounce(() => {
selectionChangeFun()
})
)也可以进行封装
/**
* addEventlistener function 类型
*/
export interface IEventHandlerProps {
[eventName: string]: EventListenerOrEventListenerObject
}
let selectionchangeMouseTrack: boolean = false
const eventHandlers: IEventHandlerProps = {
// 鼠标 down 事件
mousedown: () => {
selectionchangeMouseTrack = true
},
// 鼠标 up 事件
mouseup: debounce(() => selectionChangeFun(), 100),
// 选择事件
selectionchange: debounce(() => {
if (selectionchangeMouseTrack) return
selectionChangeFun()
}),
// 双击事件
dblclick: () => selectionChangeFun(),
// 右键事件
contextmenu: debounce(() => selectionChangeFun())
}
Object.keys(eventHandlers).forEach((event) => {
document.addEventListener(event, eventHandlers[event])
})function debounce (fn, time = 500) {
let timeout = null; // 创建一个标记用来存放定时器的返回值
return function () {
clearTimeout(timeout) // 每当触发时，把前一个 定时器 clear 掉
timeout = setTimeout(() => { // 创建一个新的 定时器，并赋值给 timeout
fn.apply(this, arguments)
}, time)
}
}
let selectionchangeMouseTrack = false
document.addEventListener('mousedown', (e) => {
selectionchangeMouseTrack = true
console.log('mousedown', e)
})
document.addEventListener('mouseup', debounce((e) => {
console.log('mouseup', e)
selectionChangeFun()
}, 100))
document.addEventListener('selectionchange', debounce((e) => {
console.log('selectionchange', e)
if (selectionchangeMouseTrack) return
selectionChangeFun()
}))
document.addEventListener('dblclick', (e) => {
console.log('dblclick', e)
selectionChangeFun()
})
document.addEventListener('contextmenu',debounce(() => {
selectionChangeFun()
}))
const selectionChangeFun = debounce(() => {
const selectContent = getSelectContent()
selectionchangeMouseTrack = false
console.log('selectContent', selectContent)
})
const getSelectContent = () => {
const selection = window.getSelection();
if (selection) {
// 1. 是焦点在 input 输入框
// 2. 没有选中
// 3. 选择的是输入框
if (selection.isCollapsed) {
return selection.toString().trim().length ? {
type: 'text',
content: selection.toString().trim()
} : null
}
// 获取选择范围
const range = selection.getRangeAt(0);
// 获取选择内容
const rangeClone = range.cloneContents()
// 判断选择内容里面有没有节点
if (rangeClone.childElementCount > 0) {
const container = document.createElement('div');
container.appendChild(rangeClone);
if (!selection.toString().trim().length) {
const hasSpNode = getSpNode(container)
return hasSpNode ? {
type: 'html',
content: container.innerHTML
} : null
}
return {
type: 'html',
content: container.innerHTML
}
} else {
return selection.toString().trim().length ? {
type: 'text',
content: selection.toString().trim()
} : null
}
} else {
return null
}
}
const getSpNode = (parent) => {
const nodeNameList = ['iframe', 'svg', 'img', 'audio', 'video']
const inpList = ['input', 'textarea', 'select']
return Array.from(parent.children).some((node) => {
if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
if (inpList.includes(node.nodeName.toLocaleLowerCase()) && node.value.trim().length) return true
if (node.children) {
return getSpNode(node)
}
return false
})
}接上文
上面我们做到了这一步
将标题居中
需要新学一个属性：
align 属性规定内容的水平对齐方式。
align 属性有3个值：
当 align="center" 的时候，就是居中对齐内容；当 align="left" 的时候，就是左对齐内容；当 align="right" 的时候，就是右对齐内容。
在 <h1>、<p> 标签中添加 align 属性，如下：
<h1 align="center">俄媒盘点三大性价较高的度假胜地</h2>
<p align="center"><font size="2" color="#545454">2020-08-20 00:02:38 来源：环球时报</font></p>标题居中对齐了
总结：align的值：center：居中；left：左对齐；right：右对齐。
在标题下面有一条横线，我们可以用 <hr/> 这个单标签实现：
<hr> 标签用于在 HTML 页面中创建一条水平线。
再加入 <hr/> 后可以看到，只需要一个 <hr/> 即可在浏览器中显示一条水平线，这就是单标签和双标签区别，它只需要一个。不仅如此，我们还可以定义这条横线的长短、粗细、颜色。
可以试试看在 <hr/> 里面加入以下内容：
<hr size="2" width=200px color="red"/>中间红色的线就是加属性后的<hr/>
size：规定 hr 元素的厚度；width：规定 hr 元素的宽度（px是像素的意思，例如100px是100像素）； color：规定 hr 元素呈现的颜色。
最后一步，把文字写进<p>标签里面
<p>世界上有许多美丽的国家，去那里旅游无需办理繁琐的证件手续，而且还可以欣赏到不一样的风景。 俄罗斯“健康生活网”与旅游门户网站“摩登门”为大家推荐一些经济实惠、性价比比较高的旅游国度，让大家好好畅游一番。
</p>
<p>1.亚美尼亚</p>
<p>2.黑山共和国</p>
<p>3.摩洛哥</p>细心的你可能会发现，为什么成品图3个国家名字的行高间隔很小，而上面的行高却间隔很大
这时我们需要认识一个新标签<br/>
<br/> 可以插入一个换行符，它与<p>标签区别是：<p>标签在换行时，还会在相邻的段落之间插入一些垂直的行间距(行高)。这个标签和上面的<hr/>同样属于单标签。
所以我们稍微修改一下，并加入颜色：
<p><font color="#f00">1.亚美尼亚<br/>2.黑山共和国<br/>3.摩洛哥</font></p>完全一样了
以下是完整html代码：
你学到了<h1> - <h6>标签、<font>标签、<!--注释-->、align 属性、<hr/>标签、<br/>标签。
你已经能自己做出一个简单的网页了。
*请认真填写需求信息，我们会在24小时内与您取得联系。
