整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
壓縮。
我是沒想到還是有人會(huì)說(shuō)，沒有基礎(chǔ)的人才會(huì)問html空格的問題，這些細(xì)節(jié)沒有什么用，而我這里給大家簡(jiǎn)單的匯報(bào)一下。
首先第一個(gè)問題，標(biāo)簽和標(biāo)簽之間空格的問題。先看一下這個(gè)家伙，這個(gè)例子，這兩種寫法有什么區(qū)別？直接看這里的例子。第一種寫法包含了一個(gè)奇怪的空格，但是第二種寫法是不包含空格的。
這個(gè)東西在html里面，它的解析，它的Dome節(jié)點(diǎn)中看是看不出來(lái)的，而我們看它們的表現(xiàn)完全一致的，要怎么去理解？畢竟寫的代碼不是所有的都會(huì)去掛工程畫，這個(gè)地方是animate和note的區(qū)別，它們的內(nèi)存結(jié)構(gòu)是不一樣的。
比如第一個(gè)節(jié)點(diǎn)，它下面包含了5個(gè)字節(jié)點(diǎn)，有3個(gè)是文本節(jié)點(diǎn)。再看第二個(gè)節(jié)點(diǎn)，這個(gè)節(jié)點(diǎn)下面只有兩個(gè)節(jié)點(diǎn)，只有兩個(gè)span的標(biāo)簽。去看html的時(shí)候，它的表現(xiàn)是字符，標(biāo)簽是字符的一種結(jié)構(gòu)，但是最終使用的時(shí)候是document，它是節(jié)點(diǎn)，中間是有轉(zhuǎn)換的，這是理論。
這里聊的就是text文本節(jié)點(diǎn)，而對(duì)于文本節(jié)點(diǎn)，那里面的東西就非常惡心了，東西就特別多了。比如現(xiàn)在就要這三個(gè)字，無(wú)壓縮它的寬度，要怎么去計(jì)算？找一下無(wú)壓縮節(jié)點(diǎn)，找的是無(wú)壓縮里面文案的節(jié)點(diǎn)，它是沒有寬度的，上面可以看到它的寬度是144，這是它渲染出來(lái)的，它的寬度是沒有的，這個(gè)節(jié)點(diǎn)里面是不給提供它的寬高的，這是很惡心的一件事情。
必須得基于容器，基于它外側(cè)的容器，來(lái)去獲取到它最終的寬度，計(jì)算中文的寬度是多少，大家有見過這樣的需求吧。
再說(shuō)一個(gè)，現(xiàn)在要節(jié)點(diǎn)信息的位置，比如這里做了個(gè)例子，現(xiàn)在要定義文案的偏移量，要怎么去計(jì)算？當(dāng)用第一種方式里面寫的有SPA標(biāo)簽以后，直接獲取標(biāo)簽，用行內(nèi)的標(biāo)簽來(lái)去進(jìn)行獲取，里面包含了左邊定位的信息，三百八十七。
·但現(xiàn)在要計(jì)算第二個(gè)節(jié)點(diǎn)，它的問題跟剛才的問題是一樣的，如何去獲取到text的節(jié)點(diǎn)？它的寬高獲取不到的，沒有偏移量的信息，得進(jìn)行特殊的計(jì)算，這就是其中一個(gè)比較大的區(qū)別，這個(gè)東西就比較操蛋了。
·再來(lái)一個(gè)跨局跟行內(nèi)元素的規(guī)則，規(guī)則包含哪些？標(biāo)準(zhǔn)的規(guī)則是所有的子元素，塊菊元素當(dāng)中所有的子元素要么都是塊菊，要么都是內(nèi)聯(lián)的。看一下它們兩個(gè)這種寫法上有沒有區(qū)別？這兩種寫法是沒有任何區(qū)別的，因?yàn)樗强鐦O，它是內(nèi)聯(lián)的，而內(nèi)聯(lián)和跨極是不允許進(jìn)行交叉使用的。
它的寫法相當(dāng)于它的外層又包含了一個(gè)隱匿的跨句元素，直接看頁(yè)面中表現(xiàn)的效果，它倆的表現(xiàn)效果是一致的，雖然標(biāo)簽不一樣，但是最終展示的結(jié)果是一樣的，它倆的表現(xiàn)形式是一樣的。
如果這個(gè)邏輯知道，再解釋一下下面這種寫法，這兩種寫法是一樣的，解釋一下為什么？已知div是跨距元素，跨距元素當(dāng)中里面所有的節(jié)點(diǎn)全部都是跨距元素或者是行內(nèi)元素，而又知道空格會(huì)轉(zhuǎn)換成text的節(jié)點(diǎn)，而Tech的節(jié)點(diǎn)是行內(nèi)元素，所以它的外層又會(huì)包成一行隱匿的節(jié)點(diǎn)，它是div，所以這里包含div，這里又包含div，有3個(gè)空格。
塊級(jí)：所有的子元素都是塊，中間兩偏差的兩個(gè)一，這兩個(gè)元素它倆的表現(xiàn)是一樣的，可以看到它最終表現(xiàn)的效果。
這里引出的額外的概念就是塌陷，沒有內(nèi)容，沒有div它的content是0，它的高度必須得是0，否則這種實(shí)現(xiàn)就會(huì)跟理解是有差異的，而這種實(shí)現(xiàn)又會(huì)產(chǎn)生一些額外的其他的問題。
舉一個(gè)例子，往from表單里面，往table里面插入元素，恰巧那一行的數(shù)據(jù)它就是為空，后端返回這個(gè)空詞無(wú)串，這個(gè)時(shí)候要不要進(jìn)行特殊處理？比如圖中這個(gè)table，這個(gè)table它就是沒有數(shù)據(jù)，這兩行就是沒有數(shù)據(jù)，最終展示的時(shí)候可能就是第一行它是正常的，它的高度可能是40，第二行第三行它就是癟了，發(fā)現(xiàn)了因?yàn)闆]有內(nèi)容產(chǎn)生的原因。
要怎么去解決這個(gè)問題？phone表格也是一樣的，它也會(huì)有類似的問題。當(dāng)然還會(huì)有一些其他的比較惡心的要求，現(xiàn)在是復(fù)文本，現(xiàn)在是編輯代碼，而要求內(nèi)容跟寫的結(jié)構(gòu)一樣，現(xiàn)在要再怎么去處理第三類？使用PRE標(biāo)簽，刷新一下，空殼這個(gè)問題又得到了一個(gè)處理。
這里就涉及到了具體的解析結(jié)構(gòu)、規(guī)則，而這些問題聊完以后又可以回到上一個(gè)問題，HM中有哪些標(biāo)簽？關(guān)于如何分類的？標(biāo)簽的分類其實(shí)按功能分、按和模型去區(qū)分，沒問題都沒問題，但至少所有的類型得加上。
比如hider meter，它們是行類的還是塊兒級(jí)？包括直播的時(shí)候彈幕上已經(jīng)提到過行內(nèi)塊級(jí)，有些內(nèi)容是說(shuō)錯(cuò)的，講道理當(dāng)時(shí)就是聽個(gè)響，因?yàn)榇鸢柑胀??？梢园凑樟硗獾囊环N結(jié)構(gòu)來(lái)去區(qū)分，可以基于轉(zhuǎn)換后的元素進(jìn)行區(qū)分，而它包含很多。
·第一種：空元素，沒有內(nèi)容的元素，它的核心是什么？現(xiàn)在寫一個(gè)image標(biāo)簽，里面的標(biāo)簽內(nèi)容不要那樣寫，非要這樣去寫，里面加一個(gè)奇怪的標(biāo)簽內(nèi)容，肯定是標(biāo)加不進(jìn)去的，是沒有辦法放到image里面的。包括heart，包括這些里面的其他的標(biāo)簽全部都是這樣的，最終會(huì)做一些特殊的操作來(lái)去處理里面的span或者里面文案的內(nèi)容。
·第二個(gè)元素，模板元素。它是用來(lái)定義下面模板用的，是比較特殊的，里面的內(nèi)容不會(huì)進(jìn)行額外的解析。比如現(xiàn)在寫了一個(gè)奇怪的標(biāo)簽，里面加了一個(gè)script，這個(gè)時(shí)候刷起甲會(huì)怎樣？刷新一下標(biāo)簽會(huì)進(jìn)行執(zhí)行。當(dāng)然是如果用time play就不會(huì)進(jìn)行執(zhí)行，它是一個(gè)元素的，是一個(gè)模板類的標(biāo)簽，刷新一下不會(huì)進(jìn)行執(zhí)行。
·第三類，原始文本元素。這類元素其實(shí)往下看，主要是看這兩個(gè)元素包含可轉(zhuǎn)移和不可轉(zhuǎn)移，一般是兩個(gè)，提示器寫的也行，一般是兩個(gè)。這兩個(gè)會(huì)進(jìn)行解析，需要其他的解析器來(lái)對(duì)里面的代碼去進(jìn)行解析。但是textl里邊放的這些元素是不會(huì)進(jìn)行解析的。
比如現(xiàn)在把tablet改成taxl，大家注意里面的節(jié)點(diǎn)會(huì)怎么處理？會(huì)去執(zhí)行嗎？不會(huì)執(zhí)行，并且會(huì)把里面的內(nèi)容放到里面的內(nèi)容，這個(gè)東西也是以前代替template的核心原因。去看一些比較老的實(shí)現(xiàn)的時(shí)候，比如百度中里面會(huì)用一些taxl代替template，因?yàn)橐郧皼]這個(gè)元素。
·第五個(gè)，這兩原始文本算兩個(gè)，第五個(gè)就是外來(lái)元素，這里寫的又比較清楚，非HTML規(guī)范的一些元素。特殊的一些元素，外來(lái)的不是html里面規(guī)范的。
最后就是普通元素，打鼓本身就是筆試題的平替，但是它的內(nèi)容跟筆試是不一樣的，筆試是有標(biāo)準(zhǔn)答案的，是要打分的，60分以后繼續(xù)聊，沒有超過60分就可以走了。
但打鼓不是，拋出一個(gè)問題，永遠(yuǎn)是論述題，大家來(lái)相互的溝通，有可能面試官的這個(gè)點(diǎn)不會(huì)沒關(guān)系，完全可以主動(dòng)地去提。面試官我覺得這個(gè)點(diǎn)不重要，我更了解瀏覽器中編語(yǔ)原理的部分，了解瀏覽器中關(guān)于渲染引擎的這一部分，可以基于這個(gè)問題來(lái)探討一下關(guān)于節(jié)點(diǎn)，關(guān)于剛才這些問題到底是有一個(gè)什么樣的答案，這是沒有問題的。
反正一句話，我是不認(rèn)可沒有技術(shù)的人才會(huì)問hmr空格問題的，更不認(rèn)可這些細(xì)節(jié)問題沒有任何用的言論。
① B/S架構(gòu)：Browser/Server（瀏覽器/服務(wù)器的交互形式。）
② C/S架構(gòu)：Client/Server（客戶端/服務(wù)器的交互形式。）
① 什么是HTML？② 怎么開發(fā)HTML？③ 怎么運(yùn)行HTML?
?由大量的標(biāo)簽組成，每一個(gè)標(biāo)簽都有開始標(biāo)簽和結(jié)束標(biāo)簽。
?超文本：圖片、聲音、視頻等
?編輯器有：HBuilder、vscode等
③ 直接采用瀏覽器打開HTML文件就能運(yùn)行
④ HTML是誰(shuí)制定的？
?W3C制定了HTML的規(guī)范：每個(gè)瀏覽器生產(chǎn)廠家都會(huì)遵守規(guī)范。HTML也會(huì)按照規(guī)范去寫代碼
?HTML規(guī)范目前最高的版本是：HTML5.0，簡(jiǎn)稱H5
?我們現(xiàn)在主要學(xué)的HTML4.0（基本用法）
?w3school：先出現(xiàn)的，和W3C無(wú)關(guān)
?w3cschool：后出現(xiàn)的，和W3C無(wú)關(guān)
?W3C制定了很多規(guī)范：HTML/XML/http協(xié)議/https協(xié)議……
頁(yè)面效果圖：
超鏈接的作用：
通過超鏈接可以從瀏覽器向服務(wù)器發(fā)送請(qǐng)求。
效果圖：
地址欄提交的信息：
?username=abc&userpassowrd=1234&sex=1&aihao=study&aihao=dream&myText=我沒有value屬性；&position=ln&myFile=&myHidden=
14、表單的說(shuō)明：
let str = "jiajia2023_&^%^&";
console.log(str.match(/.+/));//匹配除換行符以外的任何單個(gè)字符
let url = 'http://www.baidu.com'
console.log(url.match(/https?:\/\/w+\.\w+\.\w+/));//['http://www.baidu.com', index: 0, input: 'http://www.baidu.com', groups: undefined]
// 不能匹配換行符
let aStr = `
sfjsjalsjkajjnjn
dgudjg
`;
console.log(aStr.match(/.+/));//['sfjsjalsjkajjnjn', index: 1, input: '\nsfjsjalsjkajjnjn\ndgudjg\n', groups: undefined]
console.log(aStr.match(/.+/s));//s視為單行 ['\nsfjsjalsjkajjnjn\ndgudjg\n', index: 0, input: '\nsfjsjalsjkajjnjn\ndgudjg\n', groups: undefined]
let tel = '010 - 4561237'
console.log(tel.match(/\d+ - \d{7}/));//['010 - 4561237', index: 0, input: '010 - 4561237', groups: undefined]
console.log(tel.match(/\d+\s-\s\d{7}/));//結(jié)果同上，可以用空格，也可以用\s*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
