front end
1.0.0
準備工作：對於此內容，學生必須擁有一台可以存取互聯網的電腦、一個支援 HTML 5 的網頁瀏覽器（Google Chrome、Mozilla Firefox、Microsoft Edge、Safari、Opera 等）、一個文字編輯器（VSCode 等） .）和託管平台（免費或付費）。
當我們談論網站時，我們可以注意到這個術語是兩個英語單字的組合：“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）、介面的演變（美學、功能和結構） ）。
因此，您需要了解為建立網站創建豐富的介面的重要性，旨在為最終用戶提供最佳的導航和可用性體驗，以了解過去用於建立線上網站的一些技術。從這個視野出發，觀察舊有的市場趨勢，也看到界面發展的新趨勢。
調色盤：
漸層：
基本上，網頁開發意味著互聯網的編碼頁面。然而，這項任務超出了使用 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 公開的這些新介面使得使用高度指定的模式編寫應用程式變得更加容易，而不僅僅是文件記錄不足的花招。
更重要的是需要一個免費（使用和實施）的開放標準，可以與 Adobe Flash 或 Microsoft Silverlight 等專有標準競爭。無論您如何看待這些技術或公司，我們都相信網路是製造商掌握的社會、商業和通訊的重要平台。
目前已有數百萬個網頁在使用，因此必須繼續複製它們。因此，HTML5 主要是 HTML4 的衍生品，它繼續定義瀏覽器應如何處理舊標記，如<font> 、 <center>和其他新標記，因為數百萬網頁都在使用它們。
術語「介面」可以有多種含義，取決於它所研究的領域。在資訊科技領域，介面意味著兩個沒有外部幫助就無法自然通訊的系統之間進行通訊的可能性。
人機互動是對人與電腦之間互動的研究。它是一門跨學科學科，涉及電腦科學、藝術、設計、人體工學、心理學、社會學、符號學、語言學和相關領域。人與機器之間的互動是透過由軟體和硬體組成的使用者介面進行的。
人機互動是一門涉及人類使用的互動式計算系統的設計、評估和實現以及對其周圍主要現象的研究的學科。
<a href="mailto:[email protected]">發送電子郵件</a>
數位媒體一詞與類比媒體相反，類比媒體由物質基礎構成：聲音被記錄在乙烯基表面的小凹槽中，當針穿過這些凹槽時，聲音就會被再現。在數位媒體中，實體支援實際上消失了，資料被轉換為數位或數位序列 - 因此使用了術語「數位」。這樣，聲音、圖像、文字實際上都是數位序列，可以實現資料共享、儲存和轉換。從最廣泛的意義上講，數位媒體可以定義為基於數位技術的一組通訊工具和設備，允許以數位方式分發或傳播書面、聲音或視覺智力作品。品牌與消費者溝通策略中所使用的電子來源手段，通常稱為數位媒體。
對於需要在網頁上添加影片和音樂的人來說， Flash始終是最可行的選擇。它曾經並且仍然存在於幾乎所有瀏覽器中，我們有一種可以使用而不會出現任何重大問題的格式。
只需添加對插件的呼叫即可運行。
<object width="426" height="240"><param name="movie" value=" https://youtu.be/S2Vty9srpFw"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><param name="allowscriptaccess" value="always"></param> <embed src= https://www.youtube.com/embed/S2Vty9srpFw type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="426" height="240"></embed></object>
由於瀏覽器不一致，有必要加入<object> ；至於<embed>指令，使用插件的特定指令，複製許多屬性。更不用說像Flash這樣的插件會造成很多不穩定，導致錯誤甚至導致瀏覽器關閉。
因此，HTML 5 提供了該語言原生的新支持，以避免使用不必要的插件和命令。目前，只需進行簡單的調用，就像是圖像一樣，檔案就會被觸發。
<視訊控制 src="video.mp4" width="426" height="240"></video>
新命令帶來的問題是使用src屬性，該屬性在某些瀏覽器中無法很好地工作。如果我們希望每個人都能夠使用任何瀏覽器開啟該頁面，則有必要使用另一種類型的屬性。因此，通常在<video>標籤中使用<source>屬性。
<source>元素可以多次使用，並允許您為每個瀏覽器定義視訊格式，從而為您提供更大的覆蓋範圍。
< 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 出現之前，表格一直被用來作為設計頁面佈局的資源。設計師使用表格作為網格來顯示圖像和文本，它們被廣泛使用，成為網站設計的主要形式，從而創造出豐富的外觀。
然而，今天，表格的使用實際上妨礙了更好、更容易訪問、更靈活和更實用的網站的構建，特別是對於手機、平板電腦等新媒體而言。
這些表格仍然存在於 HTML 5 中，作為顯示表格資料（來自資料庫的資訊）的資源。使用新版本的 HTML，我們可以創建完全沒有表格的網站，從而創建出現在大螢幕（如電腦）上並很好地適應小型智慧型手機螢幕的動態佈局。稍後您將了解如何使用 HTML5 和 CSS3 建立響應式佈局。
table 指令並未從語言中刪除，但其使用受到限制。另一方面，我們仍然有幾個網站使用此資源，因此了解它的工作原理非常重要，以便我們可以在必要時維護此類頁面。
插入表格的指令是<table> 。要開始一行，我們必須引入<tr>標記和單元格<td> ，它劃分錶行。 <th>將內容以粗體顯示來劃分錶格行。所有這些命令分別以</table> 、 </tr>和</td>終止。
< table >
< tr >
< td > </ td >
< td > </ td >
</ tr >
</ table > <table>指令具有一系列有助於表格式設定的屬性。主要有：
align="" | 將表格在三個位置對齊： center 、 left 、 right和justify |
bgcolor="" | 確定表格的顏色 |
border="" | 決定邊框的大小，如果為零則不顯示邊框 |
cellspacing="" | 確定單元格之間的間距 |
colspan="" | 決定兩個或多個表格列之間的分組（橫向） |
rowspan="" | 決定表中兩行或多行之間的分組。 （向下和向上方向） |
cellpadding="" | 確定文字和單元格邊框之間的間距 |
<caption>顯示相對於表格居中的文本，就好像它是標題一樣。
若要選擇將在表格中顯示的內部行，我們在標記內使用RULES屬性。該屬性的補充是：
none | 沒有整條線。 |
all | 顯示表中每列和行之間的所有行（預設） |
rows | 表中每行之間的水平線。 |
cols | 用於表格每列之間的垂直線。 |
groups | 對於列組和水平部分之間的行，由特殊標籤定義，例如<colgroup>和<thead> |
看一些例子：
< table border rules =" all " 6 > <table border rules="none"6> <table border rules="cols"6> <table border rules="groups"6> <table border rules="rows"6>HTML 表單部分對於填寫使用者輸入到 HTML 頁面的資料非常重要。這些資料由後端使用後端程式語言（PHP、JavaScript、Python、Java 等）收集，並在資料庫（MySQL、PostgreSQL、MongoDB、OracleDB 等）中儲存和查詢這些資料。讓我們看看表單標籤：
登入表單（樣板） ：
< 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 ：
< 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 >登記表（樣板） ：
< 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 >
<!-- <label for="email">Email:</label> -->
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我們可以選擇多個選項。
和
我們可以定義<input>類型及其屬性：
buttonpasswordtext <a> 、 <input>和<button>元素都用於在 HTML 頁面上建立按鈕，但每個元素的用途略有不同，並且在不同的上下文中使用。
<a>錨點用於在 HTML 中建立連結。它主要用於在不同網頁之間導航或錨定到頁面的不同部分。當使用者點擊<a>元素時，他們將被導向到href屬性中指定的 URL。 <a>元素通常使用 CSS 進行樣式設置，使其看起來像按鈕，但它們具有標準的連結行為。
< a href =" pagina.html " > Link </ a > <input>用於在 HTML 表單中建立輸入元素。雖然它經常用於建立文字輸入字段，但它也可以用於建立按鈕。按鈕類型由type屬性指定。 type屬性的一些常見值是"button" 、 "submit"和"reset" 。當您需要將資料從表單傳送到伺服器或按一下按鈕時執行特定操作時， <input>按鈕非常有用。
< input type =" button " value =" Clique Aqui " > <button>用於在 HTML 中建立按鈕。它可以包含文字、圖像元素或其他 HTML 元素。就像<input>按鈕一樣， <button>按鈕可以具有由type屬性指定的特定類型，例如"button" 、 "submit"或"reset" 。 <button>按鈕在內容和行為方面比<input>按鈕提供了更大的靈活性，特別是在使用 JavaScript 進行樣式設定和事件處理時。
< button type =" button " > Clique Aqui </ button >簡而言之，如果您要建立導航按鈕，請使用<a> 。如果您要建立一個按鈕來從表單提交數據，請使用<input type="submit">或<button type="submit"> 。如果您要建立一個按鈕來在頁面上執行特定操作（例如顯示或隱藏內容），請使用<button type="button"> 。
語義 HTML用於將文件元素組織和建構為特定部分，以便它們不會以無組織且不可讀的方式在整個正文中亂序。
在HTML 版本4 之前，div 是頁面的主要結構化語義，隨著HTML5 的到來，出現了新的TAG，其中包含div 函數，這些函數是為了建立文件中包含的元素而創建的，這使得建立頁面變得更加容易。請注意，您可以將網頁的架構與報紙頁面的版面進行比較，因為兩者都包含頁首、頁尾、文章和章節。
<section>元素表示文檔中的通用部分。此元素可以包含一組具有多個章節、編號部分等的文字。在以下範例中，呈現的文章包含一個主要主題，以及該主題內包含不同主題的多個部分。 
<header>元素也用於分隔部分標題，與前面的元素結合使用，但是，它不是強制性的。 
<nav> （導覽）此元素是頁面資訊所在的部分。一般情況下，指向頁面本身的連結（內部連結）或指向外部網站其他頁面的外部連結都放置在此部分中。 
<article> （文章）此元素是文本中的獨立文章，此元素可能位於或不在<section>元素內。想像報紙上有體育、八卦等欄位。每個部分中都有幾篇關於特定文本的文章，例如，在體育部分中可能有一篇文章討論 A 隊，另一篇文章討論 B 隊，另一篇文章討論 C 隊。 <header>元素，該元素是title 和一個<footer>元素，它是元素的頁腳。 
<footer> （頁尾）此元素基本上包含有關該部分內容的信息，例如作者、相關連結等。 
<aside>此元素包含與文字不直接相關的資訊。例如：付費廣告、促銷連結等。 
它的特點是編寫CSS程式碼，使用HTML <style>指令。此方法優於前一種方法，因為所有 CSS 規則都位於 HTML5 程式碼的開頭。然而，這些規則只能在本文檔內使用，從而阻止了規則的共用和重複使用。
使用範例：
< head >
< style >
* {margin: 0; padding: 0; box-sizing: border-box;}
body {width: 100%; height: 100vh;}
</ style >
</ head >這些規則編寫在副檔名為.css的檔案中，可以透過兩種方式載入到 HTML5 文件中：
< head >
< link rel =" stylesheet " href =" default.css " >
< link rel =" stylesheet " href =" green.css " title =" Green styles " >
< link rel =" alternate stylesheet " href =" contrast.css " title =" High contrast " >
< link rel =" alternate stylesheet " href =" big.css " title =" Big fonts " >
< link rel =" alternate stylesheet " href =" wide.css " title =" Wide screen " >
</ head > @import元素允許您在其他樣式規則中匯入樣式規則。此方法可讓您將通用規則套用至所有 HTML 文件。
使用範例：
在.css文件中，我們可以在第一行中呼叫外部文件來使用現有命令。
@import "mystyle.css" ;
@import url ( "mystyle.css" );
@import url ( "fineprint.css" ) print; /* mídia específica para impressão */
@import url ( "bluish.css" ) projection , tv; /* mídia específica grandes mídias*/
@import url ( "narrow.css" ) handheld and ( max-width : 400 px ); /* mídia específica mídias portáteis*/ CSS level 3 實現了模組的概念，其中每個模組都是按照自己的時間表獨立開發的。主要優點是建構新功能的獨立性。
HTML 創建後，對頁面進行格式化的需求變得明顯，因此在 1996 年，我們稱為CSS 的樣式語言創建了。
語法非常簡單，可以用短語“您為元素或元素組建立樣式規則”來解釋。
讓我們使用之前看到的 HTML 元素（錨點）來舉例說明。
CSS 規則由一個選擇器或一組選擇器表示，在我們的例子中它是一個，因此在一對大括號內我們添加聲明，在下面的示例中我們將更改此標題的顏色和字體大小，聲明由屬性和值組成。
CSS 規則表示為：
例子：
a {
color : # 000 ;
}在 CSS 中，元素選擇的範圍可以從簡化到豐富的上下文模式。
選擇類型非常重要，因為它們的順序會根據頁面處理結果而變化。
CSS 可讓您將重複的語句分組。
例子：
h1 {字型系列：無襯線}
h2 {字型系列：無襯線}
h3 {字型系列：無襯線}
它相當於：
h1、h2、h3 {
字體系列：無襯線字體
}
注意：所有 h1、所有 h2 和所有 h3
一個元素可以包含在另一個元素中。
範例：<H1>這段文字<EM>非常</EM>重要</H1>
h1 { color: red } /* 表示所有 h1 元素的顏色為紅色 */
in { color: red } /* 表示 in 中的所有元素的顏色都是紅色 */
h1 in { color: blue } /* 表示 h1 元素中包含的元素顏色為藍色 */
當元素由“>”分隔時，就具有了子元素的特徵。
div ol > li p {顏色：綠色}在此範例中，當所有p元素位於項目 <li> 元素（<div> 內的列表 <ol> 的子元素）內時，它們將著色為綠色。
當元素以“+”分隔時，依優先權來表徵元素。即 div 之後的第一段。
div + p {
顏色: 紅色;
}
指定具有特定屬性的元素的規則。
例子：
跨度[你好=“克利夫蘭”][再見=“哥倫布”]{顏色：藍色； }此規則將應用於所有具有 hello="Cleveland" 屬性和 goodbye="Columbus" 屬性的 span 元素。
類別允許您將一組規則分配給給定元素。它由星號點 (*.) 或簡單的點 (.) 決定。
例子：
.pastoral { color: green } /* 所有具有 class~=pastoral 的元素 */
/*或*/
*.pastoral { color: green } /* 所有 class~=pastoral 的元素 */
ID 屬性可讓您識別 HTML 文件中的唯一元素。要選擇此元素，只需使用字元“#”後跟元素名稱即可。
例子：
h1#title1 { text-align: center } /* 將規則套用至 id=title 的 h1 元素 */
*.pastoral { color: green } /* 所有 class~=pastoral 的元素 */
在前面的範例中，我們建立了一個直接更改 HTML 元素的規則，但這意味著所有元素都將具有該外觀，並且我們通常有更複雜的網站，需要針對相同元素使用多個不同的規則。
為了使它更具體，讓我們記住一些我們在上一個模組中開始創建的網站，它有幾個標題元素，但我們不希望主標題具有與帖子標題相同的格式，這就是ID 和類別。
我們在第一個範例中看到的選擇器是一個類型選擇器，因為它代表一個 HTML 元素，透過 ID 和類，我們可以代表任何類型的元素，但它們之間有一些差異：
ID ：由#（雜湊）符號表示，後面跟著該 ID 的名稱。只能使用一次！
#id{
}Class ：類別的表示方式與 ID 類似，但前面有句點而不是雜湊值。可以多次使用！
.class{
}它們之間最重要的區別在於它們的使用方式：ID 只能在 HTML 頁面中使用一次，而類別則沒有限制。
此範例中還有最後一個細節：偽類。 HTML 元素會因使用者互動而發生變化，例如將滑鼠移到該元素上或按一下該元素。偽類與 JavaScript 事件非常相似，但它們沒有相同的操作元素的能力。
選擇器：偽類{
財產：價值；
}
範例中的a:hover意味著當使用者將滑鼠懸停在超連結上時，錨點也將如下所示。
| 偽類 | 定義 |
:hover | 它透過將滑鼠懸停在元素上來更改元素。 |
:active | 透過點擊來更改元素。 |
:link | 更改所有未造訪的連結。 |
:visited | 更改所有造訪過的連結。 |
:focus | 更改具有焦點的<input>元素。 |
:checked | 更改所有標記的<input>元素。 |
:disable | 更改所有已停用的<input>元素。 |
:enabled | 變更所有啟用的<input>元素。 |
:empty | 更改所有沒有子元素的<p>元素。 |
:first-child | 更改每個啟用的<input>元素。 |
:enabled | 更改每個啟用的<input>元素。 |
:first-child | 更改作為父元素的第一個子元素的每個<p>元素。 |
:first-of-type | 它更改作為其父元素的第一個<p>元素的每個<p>元素。 |
:in-range | 將<input>元素變更為指定範圍內的值。 |
:invalid | 將所有<input>元素變更為無效值。 |
:lang(language) | 使用以「 it 」開頭的 lang 屬性值來變更每個<p>元素。 |
:last-child | 它會更改作為其父元素的最後一個子元素的所有<p>元素。 |
:last-of-type | 更改作為其父元素的最後一個<p>元素的每個<p>元素。 |
:link | 更改所有未造訪的連結。 |
:not(selector) | 更改除<p>元素之外的每個元素。 |
:nth-child(n) | 更改從其父元素排序的每個 <p> 元素。 |
:nth-last-child(n) | 更改從其父元素排序的每個 <p> 元素，從最後一個子元素開始計數。 |
:nth-last-of-type(n) | 更改從其父元素算起的第二個 <p> 元素（從最後一個子元素開始計數）的每個 <p> 元素。 |
:nth-of-type(n) | 它會更改作為其父元素的第二個 <p> 元素的每個 <p> 元素。 |
:only-of-type | 更改作為其父元素中唯一的 <p> 元素的 <p> 元素。 |
:only-child | 它會更改作為其父元素的唯一子元素的每個 <p> 元素。 |
:optional | 更改沒有「required」屬性的 <input> 元素。 |
:out-of-range | 使用 atr 變更 <input> 元素
展開
爲您推薦
相關資訊
全部
|
