HTML頁面
一、B/S 軟體的結構
二、前端開發流程
三、網頁的組成部分
HTML：是網頁的結構（骨架），就是我們在頁面中能看到的內容，
CSS：是網頁的表現，指的是這些內容在頁面上的展示形式，比如說，布局，顏色，大小等等，
JavaScript：是網頁的行為，指的是頁面中元素與輸入設備互動的回應，
四、HTML 簡介
超文本標記語言：Hyper Text Markup Language （簡寫為HTML）
HTML 通過標簽來標記要顯示的網頁中的各個部分，網頁檔案本身是一種文本檔案，通過在文本檔案中添加標記符，可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）
五、創建HTML 檔案
1.創建一個web工程
2.在工程下創建 html 頁面
選擇要執行的瀏覽器：
第一個HTML頁面示例：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>first.html</title> </head> <body> 第一個HTML頁面 </body> </html>
注：HTML 檔案它不需要編譯，直接由瀏覽器進行決議執行，
六、HTML的注釋
注釋：<!-- 注釋內容 -->
注：注釋的內容可以在F12查看源代碼中看到，
七、HTML標簽介紹
1.標簽的分類
單標簽：<標簽名 屬性名 = "屬性值" /> 如：<br />
雙標簽：<標簽名 屬性名 = "屬性值">封裝的資料</標簽名> 如：<div>我是div</div>
2.標簽的屬性
基本屬性：可以修改簡單的樣式效果
效果如下：
事件屬性：可以直接設定事件回應后的代碼
效果如下：
3.標簽名大小寫不敏感
4.標簽的語法
①標簽不能交叉嵌套；
②標簽必須正確的關閉；
③標簽的屬性必須有值，屬性值必須加引號；
④注釋不能交叉嵌套，
八、常用標簽介紹
1.font 字體標簽
需求1：在網頁上顯示 我是字體標簽 ，并修改字體為 宋體，顏色為紅色，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>字體標簽</title> </head> <body> <!--需求1：在網頁上顯示 我是字體標簽 ，并修改字體為 宋體，顏色為紅色，--> <font face="宋體" color="red" size="7"> 我是字體標簽 </font> </body> </html>
效果如下：
2.特殊字符
需求1：把 <br> 換行標簽 變成文本 轉換成字符顯示在頁面上
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>特殊字符</title> </head> <body> <!--需求1：把 <br> 換行標簽 變成文本 轉換成字符顯示在頁面上--> 我是<br />標簽 </body> </html>
效果如下：
以后根據業務需要，可以去w3cschool去找：
3.標題標簽
明確：標題標簽只有h1~h6.
示例如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>標題標簽</title> </head> <body> <!-- 標題標簽：h1~h6 h1最大 h6最小 屬性：align（可以設定標題標簽中資料的對齊方式） 屬性值： center：居中 left：居左 right：居右 --> <h1 align="center">標題1</h1> <h2>標題2</h2> <h3 align="right">標題3</h3> <h4>標題4</h4> <h5>標題5</h5> <h6 align="left">標題6</h6> </body> </html>
效果如下：
4.超鏈接 （ **** 重 點 ，必 須 掌 握 * ）
說明：在網頁中點擊之后可以跳轉的內容是超鏈接，
需求1：普通的 超連接，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>超鏈接標簽</title> </head> <body> <!-- a標簽是超鏈接標簽（默認在一行內顯示）， 屬性： href：跳轉的目標地址 target：以怎樣的方式進行跳轉 _self：當前頁面跳轉（默認值） _blank：新的頁面進行跳轉 br：換行標簽 --> <a href="http://www.baidu.com">百度一下</a> <br/> <a href="http://www.baidu.com" target="_blank">百度一下_blank</a> <br/> <a href="http://www.baidu.com" target="_self">百度一下_self</a> <br/> </body> </html>
效果如下：
5.串列標簽
需求1：使用無序串列方式，把東北F4，趙四，劉能，小沈陽，宋小寶，展示出來
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>無序串列</title> </head> <body> <!--需求1：使用無序串列方式，把東北F4，趙四，劉能，小沈陽，宋小寶，展示出來--> <!-- 無序串列使用ul標簽表示，li是串列項， --> <ul> <li>趙四</li> <li>劉能</li> <li>小沈陽</li> <li>宋小寶</li> </ul> </body> </html>
效果如下：
6.img標簽
img標簽可以在HTML頁面上顯示圖片，
需求1：使用img 標簽顯示一張美女的照片，并修改寬高，和邊框屬性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>圖片標簽</title> </head> <body> <!-- 需求1：使用img 標簽顯示一張美女的照片，并修改寬高，和邊框屬性. img標簽可以在HTML頁面上顯示圖片， 屬性： border：設定圖片的邊框 width：設定圖片的寬度 height：設定圖片的高度 align：設定圖片的對齊方式 src：設定圖片的路徑 alt：當在某個路徑下找不到需要的圖片時，給用戶的提示資訊 關于路徑： 在JavaSE中： 絕對路徑：盤符:/目錄/檔案名 相對路徑:從工程名開始算 在web中： 絕對路徑：http://ip:port/工程名/資源路徑 相對路徑： . 表示當前檔案所在的目錄 .. 表示當前檔案所在目錄的父目錄 檔案名 表示當前檔案所在的目錄，相當于./檔案名.其中，./可以省略 --> <img border="1" width="400" height="400" align="center" src="./timg.jpg" alt="美女找不到" /> </body> </html>
效果如下：
7.表格標簽（ **** 重點，必須掌握 * ）
先明確表格標簽能干嘛？
如上的內容使用的就是表格標簽，可以讓頁面更整齊美觀，
需求1：做一個 帶表頭的 ，三行，三列的表格，并顯示邊框
需求2：修改表格的寬度，高度，表格的對齊方式，單元格間距，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>表格標簽</title> </head> <body> <!-- 需求1：做一個 帶表頭的 ，三行，三列的表格，并顯示邊框 需求2：修改表格的寬度，高度，表格的對齊方式，單元格間距， table：表格標簽 border：設定邊框 width：設定表格的寬度 height：設定表格的高度 align：設定表格的對齊方式 cellspacing：設定單元格的間距 tr是行標簽， th是表頭標簽，（具有特殊樣式） td是單元格標簽： align：設定單元格文本的對齊方式 --> <table border="1" width="300" height="300" align="center" cellspacing="0"> <tr> <th>學號</th> <th>姓名</th> <th>年齡</th> </tr> <tr> <td>001</td> <td align="center">郭鵬</td> <td>25</td> </tr> <tr> <td>002</td> <td>郭新</td> <td>24</td> </tr> </table> </body> </html>
效果如下：
跨行跨串列格 （* 次重點，必須掌握 *）
需求1：新建一個五行五列的表格，第一行第一列的單元格要跨兩列，第二行第一列的單元格跨兩行，第四行第四列的單元格跨兩行兩列，
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>跨行跨列</title> </head> <body> <!-- 需求1：新建一個五行五列的表格，第一行第一列的單元格要跨兩列， 第二行第一列的單元格跨兩行，第四行第四列的單元格跨兩行兩列， --> <table border="1" width="300" height="300" cellspacing="0"> <tr> <td colspan="2">1.1</td> <td>1.3</td> <td>1.4</td> <td>1.5</td> </tr> <tr> <td rowspan="2">2.1</td> <td>2.2</td> <td>2.3</td> <td>2.4</td> <td>2.5</td> </tr> <tr> <td>3.2</td> <td>3.3</td> <td>3.4</td> <td>3.5</td> </tr> <tr> <td>4.1</td> <td>4.2</td> <td>4.3</td> <td colspan="2" rowspan="2">4.4</td> </tr> <tr> <td>5.1</td> <td>5.2</td> <td>5.3</td> </tr> </table> </body> </html>
效果如下：
8.iframe框架標簽
ifarme 標簽它可以在一個 html 頁面上,打開一個小視窗,去加載一個單獨的頁面.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>iframe標簽</title> </head> <body> <!-- iframe可以在頁面上開辟一個小區域顯示一個單獨的頁面， iframe和a標簽搭配使用： 1.給iframe設定name屬性，屬性值任意 2.a標簽的target屬性值設定成iframe對應的name屬性值即可 --> 一個單獨的完整的頁面 <br/> <br/> <iframe src="http://www.baidu.com" width="400px" height="400px" name="label"></iframe> <br/> <a href="https://www.huya.com/" target="label">虎牙直播</a> <a href="https://egame.qq.com/" target="label">企鵝電競</a> <a href="https://www.douyu.com/" target="label">斗魚直播</a> </body> </html>
效果如下：
9.表單標簽 （ ***** 重點 ，必須掌握 * ）
什么是表單?
表單就是 html 頁面中,用來收集用戶資訊的所有元素集合.然后把這些資訊發送給服務器.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form標簽</title> </head> <body> <!--需求1:創建一個個人資訊注冊的表單界面，包含用戶名，密碼，確認密碼，性別（單選）， 興趣愛好（多選），國籍（下拉串列）,隱藏域，自我評價（多行文本域），重置，提交，--> <!-- form標簽就是表單， text：文本輸入框，value設定默認顯示內容， password：密碼輸入框，value設定默認顯示內容， radio：單選框，name可以對其進行分組（一組中的內容只能選一個），checked是默認選中狀態 checkbox：多選框，checked是默認選中， select：下拉串列 option：下拉串列項,selected表示默認選中 hidden：隱藏域（隱藏域用戶是看不到的） textarea：多行文本域 cols是列數 rows是行數 多行文本域的默認值是textarea的文本內容， reset和submit只需要注意value屬性是按鈕顯示的內容， --> <form> 用戶名 : <input type="text" value="默認值" /> <br/> 密碼 : <input type="password" value="abcde" /> <br/> 確認密碼 : <input type="password" value="abcde" /> <br/> 性別 : <input type="radio" name="sex" />男 <input type="radio" name="sex" checked="checked" />女<br/> 興趣愛好 : <input type="checkbox" name="hobby" checked="checked" />Java <input type="checkbox" name="hobby">JS <input type="checkbox" name="hobby">C++ <br/> 國籍 : <select> <option>--請選擇國籍--</option> <option>中國</option> <option selected="selected">美國</option> <option>日本</option> </select><br/> <input type="hidden" name="username" value="password" /><br/> <textarea cols="20" rows="10">我才是默認值</textarea><br/> <input type="reset" value="重置" /><br/> <input type="submit" value="提交" /><br/> </form> </body> </html>
效果如下：
我們發現，上面的表單不夠規范，用戶體驗極差，因此，需要對表單進行格式化，
表單格式化:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form標簽</title> </head> <body> <form> <h1 align="center">用戶注冊</h1> <table align="center"> <tr> <td>用戶名 : </td> <td><input type="text" value="默認值" /></td> </tr> <tr> <td>密碼 : </td> <td><input type="password" value="abcde" /></td> </tr> <tr> <td>確認密碼 : </td> <td><input type="password" value="abcde" /></td> </tr> <tr> <td>性別 : </td> <td> <input type="radio" name="sex" />男 <input type="radio" name="sex" checked="checked" />女 </td> </tr> <tr> <td>興趣愛好 : </td> <td> <input type="checkbox" name="hobby" checked="checked" />Java <input type="checkbox" name="hobby">JS <input type="checkbox" name="hobby">C++ </td> </tr> <tr> <td>國籍 : </td> <td> <select> <option>--請選擇國籍--</option> <option>中國</option> <option selected="selected">美國</option> <option>日本</option> </select> </td> </tr> <tr> <td><input type="hidden" name="username" value="password" /></td> </tr> <tr> <td>自我評價 : </td> <td><textarea cols="20" rows="10">我才是默認值</textarea></td> </tr> <tr> <td><input type="reset" value="重置" /></td> <td><input type="submit" value="提交" /></td> </tr> </table> </form> </body> </html>
效果如下：
表單提交細節：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>form標簽</title> </head> <body> <!-- form是表單標簽， action：表單提交的地址 method：提交的方式，GET（默認值）或 POST 表單提交的時候，資料沒有發送給服務器的3中情況， 1.表單項沒有name屬性值； 2.單選，復選，下拉串列需要設定value屬性，以便發送給服務器； 3.表單項沒有在form標簽中， GET請求： 1.瀏覽器地址欄地址是：action屬性值[+?+請求引數] 2.資料不安全 3.有長度的限制 POST請求： 1.瀏覽器地址欄是：action屬性值 2.安全 3.理論上沒有資料長度的限制 --> <form action="http://www.baidu.com" method="get"> <h1 align="center">用戶注冊</h1> <table align="center"> <tr> <td>用戶名 : </td> <td><input type="text" name="user" value="默認值" /></td> </tr> <tr> <td>密碼 : </td> <td><input type="password" name="pwd" value="abcde" /></td> </tr> <tr> <td>確認密碼 : </td> <td><input type="password" value="abcde" /></td> </tr> <tr> <td>性別 : </td> <td> <input type="radio" name="sex" value="boy" />男 <input type="radio" name="sex" checked="checked" value="girl" />女 </td> </tr> <tr> <td>興趣愛好 : </td> <td> <input type="checkbox" name="hobby" checked="checked" value="java" />Java <input type="checkbox" name="hobby" value="javascript" />JS <input type="checkbox" name="hobby" value="cpp">C++ </td> </tr> <tr> <td>國籍 : </td> <td> <select name="country"> <option value="none">--請選擇國籍--</option> <option value="cn">中國</option> <option value="us" selected="selected">美國</option> <option value="jp">日本</option> </select> </td> </tr> <tr> <td><input type="hidden" name="username" value="password" /></td> </tr> <tr> <td>自我評價 : </td> <td><textarea name="desc" cols="20" rows="10">我才是默認值</textarea></td> </tr> <tr> <td><input type="reset" value="重置" /></td> <td><input type="submit" value="提交" /></td> </tr> </table> </form> </body> </html>
效果如下：
九、其它標簽
需求1：div、span、p 標簽的演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>其它標簽</title> </head> <body> <!-- 說明： div：每個div獨占一行 span：多個span在一行內顯示 p：會在前或后空出一行 --> <div>div標簽</div> <span>span標簽</span> <p>段落標簽</p> </body> </html>
效果如下：
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/206662.html
標籤：其他
下一篇：122買賣股票的最佳時機