周比較火的莫過于 3 位初中生開源的 Windows 12 網(wǎng)頁版，雖然項目完成度不如在線版的 Windows 11，但是不妨一看。除了后生可畏的 win12 之外，開源不到一周的 open-interpreter 表現(xiàn)也很搶眼，一個在終端就能使喚的 AI 助手獲得了 15k+ star。

還有深度開源的 deepin-unioncode IDE 表現(xiàn)也不俗，還有不能錯過的靜態(tài)分析工具 biome 和 React 編輯器 puck 都可以玩玩看。

選項標(biāo)準(zhǔn)：新發(fā)布 | 實用 | 有趣，根據(jù)項目 release 時間分類，發(fā)布時間不超過 14 day 的項目會標(biāo)注 New，無該標(biāo)志則說明項目 release 超過半月。由于本文篇幅有限，還有部分項目未能在本文展示，望周知

1. 本周特推

1.1 在你的計算機里跑模型：open-interpreter

主語言：Python

New 這是一個在你計算機里運行語言模型的項目，支持 Python、JavaScript、Shell 等等。安裝后，通過在終端中運行 $ interpreter，就可以通過類似 ChatGPT 的界面與 open-interpreter 聊天。比如，像是 demo 里，讓它將系統(tǒng)主題變暗黑，btw，這個項目開源沒到一周，便獲得了 15k+ star，可見其受歡迎程度。

GitHub 地址→github.com/KillianLucas/open-interpreter

1.2 Windows 在線版：win12

主語言：HTML、JavaScript

這是 3 個初中生做的 Windows 12 在線體驗版，在線就能體驗一把 Windows 12。如果你還在用 Windows 11，不妨試試這個在線版的 12，再考慮是否升級系統(tǒng)。

GitHub 地址→github.com/tjy-gitnub/win12

2. GitHub Trending 周榜

2.1 React 編輯器：puck

本周 star 增長數(shù) 1,150+，主語言：TypeScript

可用來寫 React 的自托管、拖拽編輯器，特性：

• 拖拽：對現(xiàn)有 React 組件進行可視化編輯；
• 集成：從第三方 CMS 里加載內(nèi)容；
• 內(nèi)置編輯：可方便地直接通過 puck 編寫內(nèi)容；
• 支持自托管，與現(xiàn)有應(yīng)用集成；

GitHub 地址→github.com/measuredco/puck

2.2 深度 IDE：deepin-unioncode

本周 star 增長數(shù)：450+，主語言：C++

深度公司開源的深度集成開發(fā)環(huán)境，具有多語言、跨平臺等特性。

GitHub 地址→github.com/linuxdeepin/deepin-unioncode

2.3 短鏈接服務(wù)：dub

本周 star 增長數(shù)：1,050+，主語言：TypeScript

支持自定義域名的短鏈接縮短服務(wù)，dub 還自帶分析功能，你可以統(tǒng)計到鏈接點擊情況、點擊區(qū)域分布等等信息。此外，它還支持生成短鏈接相對應(yīng)的二維碼。

GitHub 地址→github.com/steven-tey/dub

2.4 Web 開發(fā)工具：biome

本周 star 增長數(shù)：750+，主語言：Rust

New 不到一秒，它就能格式化并檢查你的代碼。除了靜態(tài)代碼分析之外，biome 有一流的 IDE，其復(fù)雜的解析器可以高保真地展示源文本，并提供一流的錯誤恢復(fù)功能。而 biome 的設(shè)計目標(biāo)是為了最終取代 Babel、ESLint、Webpack、Prettier、Jest 等工具。

GitHub 地址→github.com/biomejs/biome

2.5 GPT 型全能 App：aidea

本周 star 增長數(shù)：800+，主語言：Dart

New 一款集成了主流大語言模型以及繪圖模型的 APP， 采用 Flutter 開發(fā)，代碼完全開源，支持以下功能：

• 支持 GPT-3.5/4 問答聊天
• 支持國產(chǎn)模型：通義千問，文心一言、訊飛星火
• 支持文生圖、圖生圖、超分辨率、黑白圖片上色等功能，集成 Stable Diffusion 模型，支持 SDXL 1.0

GitHub 地址→github.com/mylxsw/aidea

3. HelloGitHub 熱評

在這個章節(jié)，我們將會分享下本周 HelloGitHub 網(wǎng)站上的熱評項目，HG 開源項目評價體系剛上線不久，期待你的評價。

3.1 macOS 系統(tǒng)固件：Mist

主語言：Swift

這款工具可以列出所有可供下載的 macOS 固件/安裝程序的信息，包括名稱、版本號、發(fā)布日期和大小。

HG 評價地址→hellogithub.com/repository/00c31d3483b7498d8961c05b7ec8cdb9

3.2 Go 的 XML 庫：etree

主語言：Go

雖然 Go 語言內(nèi)置了處理 XML 的庫，但在使用時必須按照嵌套層級定義結(jié)構(gòu)體非常繁瑣。這個項目的設(shè)計靈感來源于 Python 語言的 ElementTree 庫，可以在無需定義結(jié)構(gòu)體的情況下靈活的讀取、生成 XML 文檔。

HG 評價地址→hellogithub.com/repository/89689a3f8df5449ea9a7fe1cafc13c10

- END -

export
 
default
 
{
 data
()
 
{
 
return
 
{
 petName
:
 
""
,
 petNameTouched
:
 
false
,
 petSize
:
 
""
,
 petSizeTouched
:
 
false
 
};
 
},
 computed
:
 
{
 petNameComment
:
 
function
()
 
{
 
if
 
(
this
.
petNameTouched
)
 
{
 
return
 
"Hello "
 
+
 
this
.
petName
;
 
}
 
return
 
null
;
 
},
 petSizeComment
:
 
function
()
 
{
 
if
 
(
this
.
petSizeTouched
)
 
{
 
switch
 
(
this
.
petSize
)
 
{
 
case
 
"Small"
:
 
return
 
"I can barely see your pet!"
;
 
case
 
"Medium"
:
 
return
 
"Your pet is pretty average."
;
 
case
 
"Large"
:
 
return
 
"Wow, your pet is huge!"
;
 
default
:
 
return
 
null
;
 
}
 
}
 
return
 
null
;
 
}
 
},
 methods
:
 
{
 onPetNameBlur
:
 
function
()
 
{
 
this
.
petNameTouched=true
;
 
},
 onPetSizeChange
:
 
function
()
 
{
 
this
.
petSizeTouched=true
;
 
}
 
}
};

import
 
{
 state
,
 computed 
}
 
from
 
"vue"
;
export
 
default
 
{
 setup
()
 
{
 
const
 petNameState=state
({
 name
:
 
""
,
 touched
:
 
false
 
});
 
const
 petNameComment=computed
(()=>
 
{
 
if
 
(
petNameState
.
touched
)
 
{
 
return
 
"Hello "
 
+
 petNameState
.
name
;
 
}
 
return
 
null
;
 
});
 
const
 onPetNameBlur=()=>
 
{
 petNameState
.
touched=true
;
 
};
 
const
 petSizeState=state
({
 size
:
 
""
,
 touched
:
 
false
 
});
 
const
 petSizeComment=computed
(()=>
 
{
 
if
 
(
petSizeState
.
touched
)
 
{
 
switch
 
(
this
.
petSize
)
 
{
 
case
 
"Small"
:
 
return
 
"I can barely see your pet!"
;
 
case
 
"Medium"
:
 
return
 
"Your pet is pretty average."
;
 
case
 
"Large"
:
 
return
 
"Wow, your pet is huge!"
;
 
default
:
 
return
 
null
;
 
}
 
}
 
return
 
null
;
 
});
 
const
 onPetSizeChange=()=>
 
{
 petSizeState
.
touched=true
;
 
};
 
return
 
{
 petName
:
 petNameState
.
name
,
 petNameComment
,
 onPetNameBlur
,
 petSize
:
 petSizeState
.
size
,
 petSizeComment
,
 onPetSizeChange
 
};
 
}
};

import
 
{
 state
,
 computed 
}
 
from
 
"vue"
;
function
 usePetName
()
 
{
 
const
 petNameState=state
({
 name
:
 
""
,
 touched
:
 
false
 
});
 
const
 petNameComment=computed
(()=>
 
{
 
if
 
(
petNameState
.
touched
)
 
{
 
return
 
"Hello "
 
+
 petNameState
.
name
;
 
}
 
return
 
null
;
 
});
 
const
 onPetNameBlur=()=>
 
{
 petNameState
.
touched=true
;
 
};
 
return
 
{
 petName
:
 petNameState
.
name
,
 petNameComment
,
 onPetNameBlur
 
};
}
function
 usePetSize
()
 
{
 
const
 petSizeState=state
({
 size
:
 
""
,
 touched
:
 
false
 
});
 
const
 petSizeComment=computed
(()=>
 
{
 
if
 
(
petSizeState
.
touched
)
 
{
 
switch
 
(
this
.
petSize
)
 
{
 
case
 
"Small"
:
 
return
 
"I can barely see your pet!"
;
 
case
 
"Medium"
:
 
return
 
"Your pet is pretty average."
;
 
case
 
"Large"
:
 
return
 
"Wow, your pet is huge!"
;
 
default
:
 
return
 
null
;
 
}
 
}
 
return
 
null
;
 
});
 
const
 onPetSizeChange=()=>
 
{
 petSizeState
.
touched=true
;
 
};
 
return
 
{
 petSize
:
 petSizeState
.
size
,
 petSizeComment
,
 onPetSizeChange
 
};
}
export
 
default
 
{
 setup
()
 
{
 
const
 
{
 petName
,
 petNameComment
,
 onPetNameBlur 
}=usePetName
();
 
const
 
{
 petSize
,
 petSizeComment
,
 onPetSizeChange 
}=usePetSize
();
 
return
 
{
 petName
,
 petNameComment
,
 onPetNameBlur
,
 petSize
,
 petSizeComment
,
 onPetSizeChange
 
};
 
}
};

TML稱為超文本標(biāo)記語言，是一種標(biāo)識性的語言。在前端開發(fā)中離不開HTML，支持不同數(shù)據(jù)格式的文件鑲?cè)搿Ｇ岸斯こ處熢诿嬖囘^程中涉及到一些基礎(chǔ)知識，常見的前端HTML面試題有哪些呢？本文，千鋒武漢Web前端培訓(xùn)小編分享12道經(jīng)典的HTML面試題給大家！

1、<image>標(biāo)簽上title屬性與alt屬性的區(qū)別是什么？

alt屬性是為了給那些不能看到你文檔中圖像的瀏覽者提供文字說明的。且長度必須少于100個英文字符或者用戶必須保證替換文字盡可能的短。

這包括那些使用本來就不支持圖像顯示或者圖像顯示被關(guān)閉的瀏覽器的用戶，視覺障礙的用戶和使用屏幕閱讀器的用戶等。

title屬性為設(shè)置該屬性的元素提供建議性的信息。使用title屬性提供非本質(zhì)的額外信息。參考《alt和title屬性的區(qū)別及應(yīng)用》

2、分別寫出以下幾個HTML標(biāo)簽：文字加粗、下標(biāo)、居中、字體

加粗：<b>、<strong>

下標(biāo)：<sub>

居中：<center>

字體：<font>、<basefont>、參考《HTML標(biāo)簽列表》

3、請寫出至少5個html5新增的標(biāo)簽，并說明其語義和應(yīng)用場景

section：定義文檔中的一個章節(jié)

nav：定義只包含導(dǎo)航鏈接的章節(jié)

header：定義頁面或章節(jié)的頭部。它經(jīng)常包含 logo、頁面標(biāo)題和導(dǎo)航性的目錄。

footer：定義頁面或章節(jié)的尾部。它經(jīng)常包含版權(quán)信息、法律信息鏈接和反饋建議用的地址。

aside：定義和頁面內(nèi)容關(guān)聯(lián)度較低的內(nèi)容——如果被刪除，剩下的內(nèi)容仍然很合理。

參考《HTML5 標(biāo)簽列表》

4、請說說你對標(biāo)簽語義化的理解？

a. 去掉或者丟失樣式的時候能夠讓頁面呈現(xiàn)出清晰的結(jié)構(gòu)

b. 有利于SEO：和搜索引擎建立良好溝通，有助于爬蟲抓取更多的有效信息：爬蟲依賴于標(biāo)簽來確定上下文和各個關(guān)鍵字的權(quán)重；

c. 方便其他設(shè)備解析（如屏幕閱讀器、盲人閱讀器、移動設(shè)備）以意義的方式來渲染網(wǎng)頁；

d. 便于團隊開發(fā)和維護，語義化更具可讀性，遵循W3C標(biāo)準(zhǔn)的團隊都遵循這個標(biāo)準(zhǔn)，可以減少差異化。

5、Doctype作用? 嚴(yán)格模式與混雜模式如何區(qū)分？它們有何意義?

聲明位于文檔中的最前面，處于 標(biāo)簽之前。告知瀏覽器以何種模式來渲染文檔。

嚴(yán)格模式的排版和 JS 運作模式是，以該瀏覽器支持的最高標(biāo)準(zhǔn)運行。

在混雜模式中，頁面以寬松的向后兼容的方式顯示。模擬老式瀏覽器的行為以防止站點無法工作。

DOCTYPE不存在或格式不正確會導(dǎo)致文檔以混雜模式呈現(xiàn)。

6、你知道多少種Doctype文檔類型？

標(biāo)簽可聲明三種 DTD 類型，分別表示嚴(yán)格版本、過渡版本以及基于框架的 HTML 文檔。

HTML 4.01 規(guī)定了三種文檔類型：Strict、Transitional 以及 Frameset。

XHTML 1.0 規(guī)定了三種 XML 文檔類型：Strict、Transitional 以及 Frameset。

Standards （標(biāo)準(zhǔn)）模式（也就是嚴(yán)格呈現(xiàn)模式）用于呈現(xiàn)遵循最新標(biāo)準(zhǔn)的網(wǎng)頁，

Quirks（包容）模式（也就是松散呈現(xiàn)模式或者兼容模式）用于呈現(xiàn)為傳統(tǒng)瀏覽器而設(shè)計的網(wǎng)頁。

7、HTML與XHTML——二者有什么區(qū)別

a. XHTML 元素必須被正確地嵌套。

b. XHTML 元素必須被關(guān)閉。

c. 標(biāo)簽名必須用小寫字母。

d. XHTML 文檔必須擁有根元素。

參考《XHTML 與 HTML 之間的差異》

8、html5有哪些新特性、移除了那些元素？

a. HTML5 現(xiàn)在已經(jīng)不是 SGML 的子集，主要是關(guān)于圖像，位置，存儲，多任務(wù)等功能的增加。

b. 拖拽釋放(Drag and drop) API

c. 語義化更好的內(nèi)容標(biāo)簽（header,nav,footer,aside,article,section）

d. 音頻、視頻API(audio,video)

e. 畫布(Canvas) API

f. 地理(Geolocation) API

g. 本地離線存儲 localStorage 長期存儲數(shù)據(jù)，瀏覽器關(guān)閉后數(shù)據(jù)不丟失

h. sessionStorage 的數(shù)據(jù)在頁面會話結(jié)束時會被清除

i. 表單控件，calendar、date、time、email、url、search

j. 新的技術(shù)webworker, websocket等

移除的元素：

a. 純表現(xiàn)的元素：basefont，big，center, s，strike，tt，u；

b. 對可用性產(chǎn)生負(fù)面影響的元素：frame，frameset，noframes；

9、iframe的優(yōu)缺點？

優(yōu)點：

a. 解決加載緩慢的第三方內(nèi)容如圖標(biāo)和廣告等的加載問題

b. iframe無刷新文件上傳

c. iframe跨域通信

缺點：

a. iframe會阻塞主頁面的Onload事件

b. 無法被一些搜索引擎索引到

c. 頁面會增加服務(wù)器的http請求

d. 會產(chǎn)生很多頁面，不容易管理。

參考《iframe的一些記錄》

10、Quirks模式是什么？它和Standards模式有什么區(qū)別？

在寫程序時我們也會經(jīng)常遇到這樣的問題，如何保證原來的接口不變，又提供更強大的功能，尤其是新功能不兼容舊功能時。IE6以前的頁面大家都不會去寫DTD，所以IE6就假定 如果寫了DTD，就意味著這個頁面將采用對CSS支持更好的布局，而如果沒有，則采用兼容之前的布局方式。這就是Quirks模式（怪癖模式，詭異模式，怪異模式）。

區(qū)別：總體會有布局、樣式解析和腳本執(zhí)行三個方面的區(qū)別。

a. 盒模型：在W3C標(biāo)準(zhǔn)中，如果設(shè)置一個元素的寬度和高度，指的是元素內(nèi)容的寬度和高度，而在Quirks 模式下，IE的寬度和高度還包含了padding和border。

b. 設(shè)置行內(nèi)元素的高寬：在Standards模式下，給等行內(nèi)元素設(shè)置wdith和height都不會生效，而在quirks模式下，則會生效。

c. 設(shè)置百分比的高度：在standards模式下，一個元素的高度是由其包含的內(nèi)容來決定的，如果父元素沒有設(shè)置百分比的高度，子元素設(shè)置一個百分比的高度是無效的用

d. 設(shè)置水平居中：使用margin:0 auto在standards模式下可以使元素水平居中，但在quirks模式下卻會失效。

11、請闡述table的缺點

a. 太深的嵌套，比如table>tr>td>h3，會導(dǎo)致搜索引擎讀取困難，而且，最直接的損失就是大大增加了冗余代碼量。

b. 靈活性差，比如要將tr設(shè)置border等屬性，是不行的，得通過td

c. 代碼臃腫，當(dāng)在table中套用table的時候，閱讀代碼會顯得異常混亂

d. 混亂的colspan與rowspan，用來布局時，頻繁使用他們會造成整個文檔順序混亂。

e. 不夠語義

參考《為什么說table表格布局不好？》

12、簡述一下src與href的區(qū)別

src用于替換當(dāng)前元素；href用于在當(dāng)前文檔和引用資源之間確立聯(lián)系。

src是source的縮寫，指向外部資源的位置，指向的內(nèi)容將會嵌入到文檔中當(dāng)前標(biāo)簽所在位置

href是Hypertext Reference的縮寫，指向網(wǎng)絡(luò)資源所在位置，建立和當(dāng)前元素（錨點）或當(dāng)前文檔（鏈接）之間的鏈接

以上千鋒武漢Web前端培訓(xùn)小編僅介紹了部分HTML面試題及答案。如果想要在眾多競爭者中脫穎而出，除了專業(yè)技能還需要掌握一些求職面試的技巧，在面試過程中爭取更多的主動權(quán)。了解更多Web前端工程師求職面試技巧，你可以關(guān)注“武漢千鋒”微信公眾號，定期發(fā)布技術(shù)熱點文章和求職指南。你也可以來千鋒武漢Web前端培訓(xùn)班免費試聽兩周，親身感受教學(xué)效果，滿意后進行系統(tǒng)深入的學(xué)習(xí)進階！

千鋒武漢Web前端培訓(xùn)課程結(jié)合時下流行技術(shù)，以實戰(zhàn)項目驅(qū)動教學(xué)，除了培養(yǎng)學(xué)員的開發(fā)技術(shù)，覆蓋熱門大數(shù)據(jù)可視化內(nèi)容，深度貫穿前端后端開發(fā)，緊貼主流企業(yè)一線需求。這里有專業(yè)老師帶你，最多半年的時間讓你完美蛻變。進名企、拿高薪不再是問題，命運掌握在自己的手里，想要什么樣的人生就看你自己的選擇了！