整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
子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小時內與您取得聯系。
