整理了一下里面對我們自己通過 LLM 生成代碼可能有用的提示詞和經驗。感興趣可以看看。

他們發現第一次生成的網頁通常質量不太行，但是第二次增強提示之后 GPT-4V 生成網頁代碼質量明顯變好，下面是對應提示詞。

第一次代碼生成提示詞：

假設你是一位精通HTML和CSS的網頁開發專家。當用戶提供一張網頁的截圖給你時，你的任務是創建一個HTML文件。這個文件需要用HTML和CSS編碼來精確還原截圖中的網站設計。重要的是，所有的CSS樣式代碼都要直接寫在HTML文件里，而不是鏈接到其他文件。

如果原網頁中有圖片，你可以用一個名為"rick.jpg"的圖片作為所有圖片的替代品。即便網頁中的某些圖片已經被藍色的矩形占位符替代了，你同樣需要使用"rick.jpg"作為這些位置的圖片。記住，你的HTML文件中不應包含任何外部文件的鏈接。

此外，這個任務不需要你使用JavaScript編寫動態交互腳本。你的重點應該放在復原網頁元素的大小、文本、位置、顏色以及整體布局上。最終，你需要提供完整的HTML文件內容，其中包含了所有必要的CSS樣式代碼。

增強提示詞：

作為一名擅長HTML和CSS的網頁開發高手，你面臨的挑戰是修改一個已有的HTML文件。這個文件是用來構建一個網頁的，但它目前有一些缺失或錯誤的部分，使得它與原網頁有所不同。我將向你展示我想要創建的網頁原型和目前HTML實現的網頁效果。同時，我也會提供你我想在網頁中包含的所有文本。

你的任務是仔細比較這兩個網頁，并根據提供的文本內容，修改原始的HTML代碼。你需要確保新的實現在外觀上與參考網頁完全一致。在編碼時，要保證HTML代碼語法正確，能夠生成一個結構完整的網頁。對于需要圖片的地方，你可以暫時用一個名為"rick.jpg"的圖片作為占位符。

在進行代碼修訂時，請特別注意網頁元素的大小、文本內容、位置布局和顏色等方面，確保最終的布局和原網頁高度相似。完成后，請直接提供新修訂的HTML文件內容，無需附加任何解釋。

LLM 通過設計生成代碼未來重點和研究方向：

◆為多模態大語言模型開發更有效的提示技巧，尤其是在處理復雜網頁設計時，例如通過分步驟生成網頁的不同部分。

◆使用真實世界的網頁內容來訓練開放源代碼的多模態大語言模型。我們的初步實驗表明，直接在真實的網頁上進行訓練存在挑戰，因為這些網頁往往內容繁雜、數據雜亂。未來的研究可能會探索數據清洗和優化的方法，以實現更穩定有效的訓練過程。

◆超越傳統的截圖輸入方式，例如，嘗試使用前端設計師的Figma框架或手繪草圖作為測試輸入。這種方法的擴展還需要我們仔細地重新設計評估體系。

◆將研究范圍從靜態網頁擴展到動態網頁。這意味著評估過程需要考慮網頁的交互功能，而不僅僅是視覺效果的相似性。

開發交互式用戶界面時，層級樣式表 (CSS) 非常強大。 CSS 有一些驚人的隱藏提示和技巧，可以用來改善你的網站的外觀。

在本文中，將介紹每個前端開發人員在開發出色且用戶友好的網頁時需要知道的一些很棒的 CSS 技巧。

1.首字下沉

可以在 CSS 中實現首字下沉。 它看起來很簡單。 比如下面顯示的圖像和代碼片段。

p:first-letter {
    font-size: 3rem;
}

2.給文字添加漸變

為文本添加漸變使文本提供了令人驚嘆的顏色。

它還為你的設計添加了一些引人注目的功能。

要向文本添加漸變，它采用下面顯示的代碼片段的形式。

p {
  font-size: 48px;
  background: -webkit-linear-gradient(#eee, #333);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

3. 使用 SVG 遮罩圖像

有了這個功能，我們可以在 SVG 中屏蔽圖像。 檢查下面顯示的圖像。

CSS 非常強大，為我們提供了許多可以實現的功能來實現此功能。

<svg>
<clippath id='clippath'>
/* Enter your svg here*/
</clippath>
</svg>

<style>
img:{
clip-path:url(#clippath)
}
</style>

4. 使用圖像作為光標

我們可以在 CSS 中使用圖像作為光標。 舉個例子，你想在你的內容上提供一個圖像光標。

要執行此操作，只需要提供如下代碼片段所示。

h1{
    cursor:url("custom.gif"), auto;

}

5. 為列表標記設置樣式

厭倦了普通無聊的列表？CSS 使列表的樣式成為可能。

要自定義列表標記，只需要對 CSS 進行編碼，如下所示。

::marker{
  color:#f548r9;
  text-shadow:2px 2px black;
    
}

6. 設計視頻的字幕。

CSS 具有強大的提示偽元素，可用于設置視頻中的字幕樣式。

::cue{
    color:green;
    background:red;
}

7. 用文字剪輯視頻

CSS 使剪輯帶有文本的視頻成為可能。

查看下面代碼片段。

<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet">
<stye>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}


.container {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  width: 100%;
  height: 500px;
}

.container video {
  width: 100%;
  height: 100%;
}

.container .text {
  position: absolute;
  top: 0;
    line-height: 350px;
  width: 100%;
  height: 100%;
  text-align: center;
  background: #ffffff;
  mix-blend-mode: screen;
  font-size: 15em;
  font-family: 'Bebas Neue', sans-serif;
}
</style>
<div class="container">
  <video autoplay loop muted>
    <source src="https://res.cloudinary.com/dptgkdbjg/video/upload/v1623121486/video_iqbbwc.mp4" type="video/mp4">
  </video>
  <div class="text">
    <p>OCEAN</p>
  </div>
</div>

8.平滑滾動

雖然我們可以使用 JavaScript 實現平滑滾動，但 CSS 使我們可以更輕松地在我們的網站中實現平滑滾動。

要啟用平滑滾動，需要將 smooth-behavior 設置為平滑。

檢查下面顯示的代碼段。

html{
  scroll-behavior:smooth;
}

9. 過濾圖像

圖像構成了網絡的很大一部分，可以使用過濾器來模糊圖像。 也可以使用過濾器屬性來模糊、飽和、添加亮度、添加其他屬性中的飽和度。

查看下面的代碼片段。

.blur {
  filter: blur(5px);
}

.grayscale {
  filter: grayscale(100%);
}

.brightness {
  filter: brightness(150%);
}

.saturate {
  filter: saturate(200%);
}

.invert {
  filter: invert(100%);
}

.huerotate {
  filter: hue-rotate(180deg);
}

10. 自定義移動瀏覽器標題中的地址欄。

看看下面顯示的圖像。 移動瀏覽器標題有多種顏色。 我們可以修改它并創建與我們網站的顏色主題相融合的顏色。

要更改或自定義移動瀏覽器標題中的默認地址欄，我們需要包含元標記，如下面的代碼片段所示。

<meta name='theme-color' content='#0575e6' />

在元標記中，我們需要傳入兩個參數，即名稱和內容，我們指定我們想要的顏色。 您可以在十六進制代碼中包含顏色。

最后的想法

當想要構建交互式用戶界面時，層級樣式表非常強大。

這些只是我們可以在 CSS 中利用的一些提示和技巧。

人在校生一枚，希望可以找到志同道合的小伙伴一起進步，不定期的更新自己的收獲，如果有大神的話可以指出我的不足，我用的是VS code軟件來寫代碼的

什么是 HTML

HTML 是個縮寫，全稱Hyper Text Markup Language，譯為超文本標記語言。它是一種標識性的語言。它包括一系列標簽．通過這些標簽可以將網絡上的文檔格式統一，使分散的Internet資源連接為一個邏輯整體。HTML文本是由HTML命令組成的描述性文本，HTML命令可以說明文字，圖形、動畫、聲音、表格、鏈接等。

HTML的結構

• html的后綴名有兩種 一種是.html，另一種是.htm （兩種并無區別）
• 快捷創建基本結構的方法：方法一：可以在開頭打一個“!”號，方法二：打一個html，智能提示會出現html:5 選中即可。

HTML的頭部

在<hard>頭部標簽中你可以 插入腳本（scripts）,樣式文件（CSS），以及各種meta信息。可以添加在頭部區域的元素有：<title>，<style>，<meta>，<link>等等

• ? <title>定義網頁標題</title>
• <meta>元素：描述了一些基本的元數據，元數據不顯示在頁面上，但會被瀏覽器解析，<meta>通常用于指定網頁的描述，關鍵詞，作者。

注釋快捷鍵：CTRL+? （注釋是不被運行的，作用就是幫助程序員記東西）

 <!--這是一個注釋-->

HTML屬性

• 通用屬性：幾乎所有元素都可以使用的屬性，例如 id、name、style等
• 私有屬性：某個一個/類元素所具備的屬性
• 事件屬性：為某個元素綁定事件（DOM學習）
• 自定義屬性：開發者為某個元素設置的屬性，一般都是在前端框架中使用
• 參考介紹https://developer.mozilla.org/zh-CN/

HTML完整結構

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
			<!--頭部，js和css寫在這里面-->
 </head>
 <body>
       <!--內容主體-->
 </body>
 </html>

可能我寫的會有些不清楚，到后面有代碼的時候就會清楚了