首頁>CGI源碼>其他類別
下載
front end

這是 Web 開發的儲存庫

準備工作：對於此內容，學生必須擁有一台可以存取互聯網的電腦、一個支援 HTML 5 的網頁瀏覽器（Google Chrome、Mozilla Firefox、Microsoft Edge、Safari、Opera 等）、一個文字編輯器（VSCode 等） .）和託管平台（免費或付費）。

  • https://www.frontendmentor.io/
  • https://daily.dev/
  • https://getcssscan.com/css-box-shadow-examples
  • https://whirl.netlify.app/
  • https://flexboxfroggy.com/
  • https://courses.cs.washington.edu/courses/cse154/flexboxducky/
  • http://www.flexboxdefense.com/
  • https://cssgridgarden.com/
  • https://gridcritters.com/
  • https://caniuse.com/
  • https://www.magicpattern.design/tools/blob-generator
  • https://meyerweb.com/eric/tools/css/reset/
  • https://html5boilerplate.com/
  • https://www.color-hex.com/color-palette/22942
  • https://www.greatfrontend.com/pt-BR
  • https://echarts.apache.org/en/index.html

什麼是網站？

當我們談論網站時，我們可以注意到這個術語是兩個英語單字的組合：“web”，意思是網絡，指萬維網；“site”，意思是地方。從這個意義上說，網站或網站是一個可以透過 URL 在網路上存取的地方，並且具有一組用某種語言編程的頁面。

為了更好地理解這個主題，讓我們來看一個例子：當您在互聯網瀏覽器中輸入地址 blog.betrybe.com 來訪問 Trybe 的博客時，瀏覽器將查找該網站在互聯網上的位置。然後將向伺服器發出請求。

構成網頁的所有文字、圖像和樣式檔案都儲存在該伺服器上。然後，伺服器會將這組文件傳回瀏覽器，以便瀏覽器可以顯示您在螢幕上看到的內容。

網站可以呈現不同的形式和內容。其中一些選項包括： 虛擬商店，例如 Mercado Livre 和 Amazon，可以在其中購買和銷售產品；公司和個人用來展示自己並被客戶找到的機構網站和投資組合；和博客，就像您讀過的那樣。

此外，網站還可以分為靜態網站和動態網站。靜態網站通常使用 HTML、CSS 和 JavaScript 開發。它的內容比較簡單，也沒有與資料庫的互動。

動態網站除了利用 HTML、CSS 和 JavaScript 之外，還使用更強大的程式語言，例如 PHP。這些站點具有連接到資料庫的功能。這樣，訪問的每個頁面都可以帶來特定的數據。

網頁設計

透過網頁設計，您需要觀察介面對於網站開發的重要性、用於建立豐富網頁的技術的演變（web 1.0、web 2.0、web 3.0 和 web 4.0）、介面的演變（美學、功能和結構） ）。

因此，您需要了解為建立網站創建豐富的介面的重要性，旨在為最終用戶提供最佳的導航和可用性體驗，以了解過去用於建立線上網站的一些技術。從這個視野出發，觀察舊有的市場趨勢，也看到界面發展的新趨勢。

調色盤：

  • https://paletadecolores.online/pt/magenta/
  • https://simpleicons.org/
  • https://colorhunt.co/
  • https://coolors.co/
  • https://colors.muz.li/
  • https://www.toptal.com/designers/colourcode/
  • https://lospec.com/palette-list
  • https://mycolor.space/
  • https://www.pantone.com/articles/color-palettes
  • https://atmos.style/color-generator
  • https://github.com/EmilHvitfeldt/r-color-palettes
  • https://www.color-hex.com/color-palettes/
  • https://visme.co/blog/website-color-schemes/
  • https://colorpalettes.com/
  • https://colorpalettes.net/

漸層：

  • https://www.grabient.com/
  • http://gradientsguru.com/
  • https://www.eggradients.com/
  • https://uigradients.com/#Zinc
  • https://webgradients.com/
  • https://cssgradient.io/

網頁開發

基本上，網頁開發意味著互聯網的編碼頁面。然而，這項任務超出了使用 HTML 和 CSS 的範圍，它們是建立靜態頁面的基本工具，它們提供的資訊只能透過編輯原始碼來修改。

相反，網站上的頁面可以是動態的。這意味著可以在不干擾原始程式碼的情況下更改顯示的內容。為了實現這一點，網站的動態部分儲存在資料庫中，只要需要檢索該內容就可以存取該資料庫。

此功能允許開發複雜的應用程序，這些應用程式使用業務規則、API（應用程式介面）等等。因此，針對 Web 開發、客戶端編碼（前端）和伺服器端編碼（後端）的活動進行了劃分。

API 範例，目前 Web 和行動應用程式最常用的結構，REST API 也稱為RESTful API 。

Web 應用程式是 Web 上越來越多的網站；也就是說，它們模仿桌面應用程序，而不是構成 Web 大部分的傳統文件以及文字和圖像的靜態連結。例如，我們有線上文字處理器、照片編輯工具、地圖網站等。在 JavaScript 的大力支援下，他們將 HTML4 推向了其能力的邊緣。 HTML5 為 DOM（文件物件模型）指定了新的 API（應用程式介面），DOM 是一種跨平台、獨立於語言的約定，用於表示 HTML、XHTML 和 XML 物件和文件並與之互動。

這些新的 API 可協助您拖放伺服器傳送的對象，例如繪圖、影片等。

HTML 頁面透過 DOM 中的物件向 JavaScript 公開的這些新介面使得使用高度指定的模式編寫應用程式變得更加容易，而不僅僅是文件記錄不足的花招。

更重要的是需要一個免費（使用和實施）的開放標準，可以與 Adob​​e Flash 或 Microsoft Silverlight 等專有標準競爭。無論您如何看待這些技術或公司，我們都相信網路是製造商掌握的社會、商業和通訊的重要平台。

目前已有數百萬個網頁在使用，因此必須繼續複製它們。因此，HTML5 主要是 HTML4 的衍生品，它繼續定義瀏覽器應如何處理舊標記，如 、

和其他新標記，因為數百萬網頁都在使用它們。

介面

術語「介面」可以有多種含義，取決於它所研究的領域。在資訊科技領域，介面意味著兩個沒有外部幫助就無法自然通訊的系統之間進行通訊的可能性。

人機互動是對人與電腦之間互動的研究。它是一門跨學科學科，涉及電腦科學、藝術、設計、人體工學、心理學、社會學、符號學、語言學和相關領域。人與機器之間的互動是透過由軟體和硬體組成的使用者介面進行的。

人機互動是一門涉及人類使用的互動式計算系統的設計、評估和實現以及對其周圍主要現象的研究的學科。

範例 3：向電子郵件發送訊息

發送電子郵件

[HTML5] 多媒體標籤

數位媒體一詞與類比媒體相反，類比媒體由物質基礎構成：聲音被記錄在乙烯基表面的小凹槽中，當針穿過這些凹槽時，聲音就會被再現。在數位媒體中，實體支援實際上消失了，資料被轉換為數位或數位序列 - 因此使用了術語「數位」。這樣，聲音、圖像、文字實際上都是數位序列，可以實現資料共享、儲存和轉換。從最廣泛的意義上講，數位媒體可以定義為基於數位技術的一組通訊工具和設備，允許以數位方式分發或傳播書面、聲音或視覺智力作品。品牌與消費者溝通策略中所使用的電子來源手段，通常稱為數位媒體。

對於需要在網頁上添加影片和音樂的人來說， Flash始終是最可行的選擇。它曾經並且仍然存在於幾乎所有瀏覽器中，我們有一種可以使用而不會出現任何重大問題的格式。

只需添加對插件的呼叫即可運行。

由於瀏覽器不一致，有必要加入 ；至於指令，使用插件的特定指令，複製許多屬性。更不用說像Flash這樣的插件會造成很多不穩定，導致錯誤甚至導致瀏覽器關閉。

因此，HTML 5 提供了該語言原生的新支持，以避免使用不必要的插件和命令。目前，只需進行簡單的調用，就像是圖像一樣，檔案就會被觸發。

 <視訊控制 src="video.mp4" width="426" height="240">

新命令帶來的問題是使用src屬性，該屬性在某些瀏覽器中無法很好地工作。如果我們希望每個人都能夠使用任何瀏覽器開啟該頁面，則有必要使用另一種類型的屬性。因此，通常在標籤中使用屬性。

元素可以多次使用，並允許您為每個瀏覽器定義視訊格式，從而為您提供更大的覆蓋範圍。

影片

">
 < video width =" 426 " height =" 240 " controls >
  < source src =" video.mp4 " type =" video/mp4 " >
  < source src =" video.webm " type =" video/webm " >
  < source src =" video.ogg " type =" video/ogg " >
 video >

聲音的

">
 < audio controls >
 < source src =" audio.mp3 " type =" audio/mpeg " >
 < source src =" audio.ogg " type =" audio/ogg " >
 < source src =" audio.wav " type =" audio/wav " >
 audio >

有多種可能的編解碼器，您需要匯出至少兩個版本才能獲得更大的覆蓋範圍。

注意：編解碼器是用於編碼和解碼媒體檔案的程式。它們壓縮原始格式，有利於存儲，並在再現過程中解壓縮，將其轉換回影像或音訊。

所有提到的音訊和視訊範例都是透過目錄中的文件匯入的。問題是，如何匯入已託管在 YouTube 或 Vimeo 等網站上的影片？兩種解決方案（透過文件或透過伺服器）哪一種最有利？

導入影片

讓我們逐步了解如何從 YouTube 和 Vimeo 匯入影片！

[HTML5] 表格標籤

在 HTML5 出現之前，表格一直被用來作為設計頁面佈局的資源。設計師使用表格作為網格來顯示圖像和文本，它們被廣泛使用，成為網站設計的主要形式，從而創造出豐富的外觀。

然而，今天，表格的使用實際上妨礙了更好、更容易訪問、更靈活和更實用的網站的構建，特別是對於手機、平板電腦等新媒體而言。

這些表格仍然存在於 HTML 5 中，作為顯示表格資料（來自資料庫的資訊）的資源。使用新版本的 HTML，我們可以創建完全沒有表格的網站，從而創建出現在大螢幕（如電腦）上並很好地適應小型智慧型手機螢幕的動態佈局。稍後您將了解如何使用 HTML5 和 CSS3 建立響應式佈局。

table 指令並未從語言中刪除，但其使用受到限制。另一方面，我們仍然有幾個網站使用此資源，因此了解它的工作原理非常重要，以便我們可以在必要時維護此類頁面。

插入表格的指令是

。要開始一行，我們必須引入標記和單元格
，它劃分錶行。 將內容以粗體顯示來劃分錶格行。所有這些命令分別以
、 和終止。 

 < table >
  < tr >
    < td >  td >
    < td >  td >
   tr >
 table >

指令具有一系列有助於表格式設定的屬性。主要有：

align=""將表格在三個位置對齊： center 、 left 、 right和justify
bgcolor=""確定表格的顏色
border=""決定邊框的大小，如果為零則不顯示邊框
cellspacing=""確定單元格之間的間距
colspan=""決定兩個或多個表格列之間的分組（橫向）
rowspan=""決定表中兩行或多行之間的分組。 （向下和向上方向）
cellpadding=""確定文字和單元格邊框之間的間距

顯示相對於表格居中的文本，就好像它是標題一樣。

規則屬性

若要選擇將在表格中顯示的內部行，我們在標記內使用RULES屬性。該屬性的補充是：

和
none沒有整條線。
all顯示表中每列和行之間的所有行（預設）
rows表中每行之間的水平線。
cols用於表格每列之間的垂直線。
groups對於列組和水平部分之間的行，由特殊標籤定義，例如

看一些例子：

">
 < table border rules =" all " 6 >
">
 
">
 
 
">
 
 
">
 
 
表單標籤
HTML 表單部分對於填寫使用者輸入到 HTML 頁面的資料非常重要。這些資料由後端使用後端程式語言（PHP、JavaScript、Python、Java 等）收集，並在資料庫（MySQL、PostgreSQL、MongoDB、OracleDB 等）中儲存和查詢這些資料。讓我們看看表單標籤：
登入表單（樣板） ： 


	Senha:

	

	
     
  
">
 < html >
  < body >
     < h2 > Login  h2 >
     < form >
	Login: < br >
	< input type =" email " name =" email " > < br >
	Senha: < br >
	< input type =" password " name =" senha " > < br >
	< input type =" submit " value =" Logar " >
      form >
   body >
 html >
透過type屬性我們可以定義我們使用的input的類型， name=''屬性我們可以處理透過程式語言發送的資料。
登入表單（樣板）- 使用 PHP ： 

	Login:

	

	Senha:

	

	
     
  
">
 < html >
  < body >
     < h2 > Login  h2 >
     < form action =" processa.php " >
	Login: < br >
	< input type =" email " name =" email " required > < br >
	Senha: < br >
	< input type =" password " name =" senha " required > < br >
	< input type =" submit " value =" Logar " >
      form >
   body >
 html >
登記表（樣板） ： 

	  Nome Completo:

	  

	  
      Email:

	  

	  Senha:

	  

	  Repita a senha:

	  

	  	
	  Sexo:

	   Masculino

	   Feminino

	  
	  Interesses:

	   Futebol

	   Video-games

	   Academia

	  
	  Estado

	  

	
	  Comente!

	  


	  
       
   
">
 < html >
  < head >
    < title > Cadastro  title >
   head >
  < body >
     < h2 > Cadastre-se  h2 >
       < form action =" processa.php " >
	  Nome Completo: < br >
	  < input type =" text " name =" nome " required > < br >
	  
      Email: < br >
	  < input type =" email " name =" email " required > < br >
	  Senha: < br >
	  < input type =" password " name =" password " required > < br >
	  Repita a senha: < br >
	  < input type =" password " name =" password " required > < br >
	  	
	  Sexo: < br >
	  < input type =" radio " name =" sexo " value =" masculino " > Masculino < br >
	  < input type =" radio " name =" sexo " value =" feminino " > Feminino < br >
	  
	  Interesses: < br >
	  < input type =" checkbox " name =" interesse " value =" futebol " > Futebol < br >
	  < input type =" checkbox " name =" interesse " value =" video-games " > Video-games < br >
	  < input type =" checkbox " name =" interesse " value =" academia " > Academia < br >
	  
	  Estado < br >
	  < select name =" estado " >
	    < option value =" RJ " > RJ  option >
	    < option value =" SP " > SP  option >
	    < option value =" MG " > MG  option >
	    < option value =" ES " > ES  option >
	   select > < br >
	
	  Comente! < br >
	  < textarea name =" comentario " >  textarea > < br >

	  < input type =" submit " value =" Cadastrar " >
        form >
    body >
 html >
只有name相同的情況下，我們才能在無線電之間input ，這樣我們就可以將這些資訊分組，並且只標記其中一個。
透過checkbox我們可以選擇多個選項。
和
我們可以定義類型及其屬性：
  •  button
  •  password
  •  text
  、 和">
 < button type =" button " > Clique Aqui  button >
簡而言之，如果您要建立導航按鈕，請使用 。如果您要建立一個按鈕來從表單提交數據，請使用或
偽類定義
:hover它透過將滑鼠懸停在元素上來更改元素。
 :active透過點擊來更改元素。
 :link更改所有未造訪的連結。
 :visited更改所有造訪過的連結。
 :focus更改具有焦點的元素。
 :checked更改所有標記的元素。
 :disable更改所有已停用的元素。
 :enabled變更所有啟用的元素。
 :empty更改所有沒有子元素的
元素。
 :first-child更改每個啟用的元素。
 :enabled更改每個啟用的元素。
 :first-child更改作為父元素的第一個子元素的每個
元素。
 :first-of-type它更改作為其父元素的第一個
元素的每個
元素。
 :in-range將元素變更為指定範圍內的值。
 :invalid將所有元素變更為無效值。
 :lang(language)使用以「 it 」開頭的 lang 屬性值來變更每個
元素。
 :last-child它會更改作為其父元素的最後一個子元素的所有
元素。
 :last-of-type更改作為其父元素的最後一個
元素的每個
元素。
 :link更改所有未造訪的連結。
 :not(selector)更改除
元素之外的每個元素。
 :nth-child(n)更改從其父元素排序的每個 
 元素。
 :nth-last-child(n)更改從其父元素排序的每個 
 元素，從最後一個子元素開始計數。
 :nth-last-of-type(n)更改從其父元素算起的第二個 
 元素（從最後一個子元素開始計數）的每個 
 元素。
 :nth-of-type(n)它會更改作為其父元素的第二個 
 元素的每個 
 元素。
 :only-of-type更改作為其父元素中唯一的 
 元素的 
 元素。
 :only-child它會更改作為其父元素的唯一子元素的每個 
 元素。
 :optional更改沒有「required」屬性的  元素。
 :out-of-range使用 atr 變更  元素        
        
展開

    



    

        

            附加信息
        

        
    
            
  • 
                版本
                1.0.0
            
    • 
            
  • 
                類型
                其他類別
            
    • 
            
  • 
                更新時間
                2024-12-14
            
    • 
            
  • 
                大小
                407.23KB
            
    • 
                            
  • 
                    來自於
                    Github
                
    • 
                    

    





    

        

            相關應用
        

        
    





    

        

            爲您推薦
        

        
    






    

        

            相關資訊
            全部