網(wǎng)頁開發(fā)中的提示詞

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

他們發(fā)現(xiàn)第一次生成的網(wǎng)頁通常質(zhì)量不太行，但是第二次增強(qiáng)提示之后 GPT-4V 生成網(wǎng)頁代碼質(zhì)量明顯變好，下面是對應(yīng)提示詞。

第一次代碼生成提示詞：

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

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

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

增強(qiáng)提示詞：

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

你的任務(wù)是仔細(xì)比較這兩個網(wǎng)頁，并根據(jù)提供的文本內(nèi)容，修改原始的HTML代碼。你需要確保新的實(shí)現(xiàn)在外觀上與參考網(wǎng)頁完全一致。在編碼時，要保證HTML代碼語法正確，能夠生成一個結(jié)構(gòu)完整的網(wǎng)頁。對于需要圖片的地方，你可以暫時用一個名為"rick.jpg"的圖片作為占位符。

在進(jìn)行代碼修訂時，請?zhí)貏e注意網(wǎng)頁元素的大小、文本內(nèi)容、位置布局和顏色等方面，確保最終的布局和原網(wǎng)頁高度相似。完成后，請直接提供新修訂的HTML文件內(nèi)容，無需附加任何解釋。

LLM 通過設(shè)計(jì)生成代碼未來重點(diǎn)和研究方向：

◆為多模態(tài)大語言模型開發(fā)更有效的提示技巧，尤其是在處理復(fù)雜網(wǎng)頁設(shè)計(jì)時，例如通過分步驟生成網(wǎng)頁的不同部分。

◆使用真實(shí)世界的網(wǎng)頁內(nèi)容來訓(xùn)練開放源代碼的多模態(tài)大語言模型。我們的初步實(shí)驗(yàn)表明，直接在真實(shí)的網(wǎng)頁上進(jìn)行訓(xùn)練存在挑戰(zhàn)，因?yàn)檫@些網(wǎng)頁往往內(nèi)容繁雜、數(shù)據(jù)雜亂。未來的研究可能會探索數(shù)據(jù)清洗和優(yōu)化的方法，以實(shí)現(xiàn)更穩(wěn)定有效的訓(xùn)練過程。

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

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

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

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

1.首字下沉

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

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

2.給文字添加漸變

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

它還為你的設(shè)計(jì)添加了一些引人注目的功能。

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

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

3. 使用 SVG 遮罩圖像

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

CSS 非常強(qiáng)大，為我們提供了許多可以實(shí)現(xiàn)的功能來實(shí)現(xiàn)此功能。


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

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

4. 使用圖像作為光標(biāo)

我們可以在 CSS 中使用圖像作為光標(biāo)。舉個例子，你想在你的內(nèi)容上提供一個圖像光標(biāo)。

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

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

}

5. 為列表標(biāo)記設(shè)置樣式

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

要自定義列表標(biāo)記，只需要對 CSS 進(jìn)行編碼，如下所示。

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

6. 設(shè)計(jì)視頻的字幕。

CSS 具有強(qiáng)大的提示偽元素，可用于設(shè)置視頻中的字幕樣式。

::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 實(shí)現(xiàn)平滑滾動，但 CSS 使我們可以更輕松地在我們的網(wǎng)站中實(shí)現(xiàn)平滑滾動。

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

檢查下面顯示的代碼段。

html{
  scroll-behavior:smooth;
}

9. 過濾圖像

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

查看下面的代碼片段。

.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. 自定義移動瀏覽器標(biāo)題中的地址欄。

看看下面顯示的圖像。移動瀏覽器標(biāo)題有多種顏色。我們可以修改它并創(chuàng)建與我們網(wǎng)站的顏色主題相融合的顏色。

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

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

在元標(biāo)記中，我們需要傳入兩個參數(shù)，即名稱和內(nèi)容，我們指定我們想要的顏色。您可以在十六進(jìn)制代碼中包含顏色。

最后的想法

當(dāng)想要構(gòu)建交互式用戶界面時，層級樣式表非常強(qiáng)大。

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

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

什么是 HTML

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

HTML的結(jié)構(gòu)

html的后綴名有兩種一種是.html，另一種是.htm （兩種并無區(qū)別）
快捷創(chuàng)建基本結(jié)構(gòu)的方法：方法一：可以在開頭打一個“!”號，方法二：打一個html，智能提示會出現(xiàn)html:5 選中即可。

HTML的頭部

在<hard>頭部標(biāo)簽中你可以插入腳本（scripts）,樣式文件（CSS），以及各種meta信息?？梢蕴砑釉陬^部區(qū)域的元素有：<title>，<style>，<meta>，<link>等等

? <title>定義網(wǎng)頁標(biāo)題</title>
<meta>元素：描述了一些基本的元數(shù)據(jù)，元數(shù)據(jù)不顯示在頁面上，但會被瀏覽器解析，<meta>通常用于指定網(wǎng)頁的描述，關(guān)鍵詞，作者。

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

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

HTML屬性

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

HTML完整結(jié)構(gòu)

 <!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>
       <!--內(nèi)容主體-->
 </body>
 </html>

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

在線咨詢

上一篇：CSS設(shè)置字體大小、字體粗細(xì)、字體風(fēng)格
下一篇：中文像素字體制作

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商