HTML快速学习
HTML快速學習
- 一. 介紹
- 二. 快速入門
- 三. 基礎標簽
- 案例：公司簡介
- 四. 圖片、音頻、視頻標簽
- 五. 超鏈接標簽
- 超鏈接標簽
- 六. 列表標簽
- 七. 表格標簽
- 八. 布局標簽
- 九. 表單標簽
- 1. 表單標簽概述
- 2. form標簽屬性
- 3. 代碼演示
- 3. 表單項標簽
一. 介紹
HTML 是一門語言，所有的網(wǎng)頁都是用HTML 這門語言編寫出來的，也就是HTML是用來寫網(wǎng)頁的，像京東，12306等網(wǎng)站有很多網(wǎng)頁
這些都是網(wǎng)頁展示出來的效果。而HTML也有專業(yè)的解釋
HTML(HyperText Markup Language)：超文本標記語言
- 超文本：超越了文本的限制，比普通文本更強大。除了文字信息，還可以定義圖片、音頻、視頻等內容如上圖看到的頁面，我們除了能看到一些文字，同時也有大量的圖片展示；有些網(wǎng)頁也有視頻，音頻等。這種展示效果超越了文本展示的限制。
- 標記語言：由標簽構成的語言之前學習的XML就是標記語言，由一個一個的標簽組成，HTML 也是由標簽組成 。我們在瀏覽器頁面右鍵可以查看頁面的源代碼，如下
可以看到如下內容，就是由一個一個的標簽組成的
這些標簽不像XML那樣可以自定義，HTML中的標簽都是預定義好的，運行在瀏覽器上并由瀏覽器解析，然后展示出對應的效果。例如我們想在瀏覽器上展示出圖片就需要使用預定義的 img 標簽；想展示可以點擊的鏈接的效果就可以使用預定義的a 標簽等。
W3C標準
- W3C是萬維網(wǎng)聯(lián)盟，這個組成是用來定義標準的。他們規(guī)定了一個網(wǎng)頁是由三部分組成，分別是：
- 結構：對應的是 HTML 語言
- 表現(xiàn)：對應的是 CSS 語言
- 行為：對應的是 JavaScript 語言
- HTML定義頁面的整體結構；CSS是用來美化頁面，讓頁面看起來更加美觀；JavaScript可以使網(wǎng)頁動起來，比如輪播圖也就是多張圖片自動的進行切換等效果。
二. 快速入門
需求：編寫如下圖效果的頁面:
要實現(xiàn)這個頁面，我們需要從以下三步進行實現(xiàn)
- 新建文本文件，后綴名改為 .html
頁面文件的后綴名是 .html，所以需要該后綴名 - 編寫 HTML 結構標簽
HTML 是由一個一個的標簽組成的，但是它也用于表示結構的標簽
html標簽是根標簽，下面有 head 標簽和 body 標簽這兩個子標簽。而 head 標簽的 title 子標簽是用來定義頁面標題名稱的，它定義的內容會展示在瀏覽器的標題位置，如下圖紅框標記
body 標簽的內容會被展示在內容區(qū)中，如下圖紅框標記
在訪問其他網(wǎng)站頁面時會看到字體顏色是五顏六色的，我們可以該字體顏色嗎？當然可以了
font 標簽就可以使用，該標簽有一個 color 屬性可以設置字體顏色
如： 就是將文字設置成了紅顏色。那么我們只需要將需要變成紅色的文字放在標簽體部分就可以了，如下：
總結：
- HTML 文件以.htm或.html為擴展名
- HTML 結構標簽
- HTML 標簽不區(qū)分大小寫
如上案例中的 font 寫成 Font 也是一樣可以展示出對應的效果的。 - HTML 標簽屬性值 單雙引皆可
如上案例中的color屬性值使用雙引號也是可以的。 - HTML 語法松散
比如 font 標簽不加結束標簽也是可以展示出效果的。但是建議同學們在寫的時候還是不要這樣做，嚴格按照要求去寫
三. 基礎標簽
基礎標簽就是一些和文字相關的標簽，如下：
| <h1> ~ <h6> | 定義標題，h1最大，h6最小 |
| <font> | 定義文本的字體、字體尺寸、字體顏色 |
| <b> | 定義粗體文本 |
| <i> | 定義斜體文本 |
| <u> | 定義文本下劃線 |
| <center> | 定義文本居中 |
| <p> | 定義段落 |
| <br> | 定義折行 |
| <hr> | 定義水平線 |
| < | < | 小于號或顯示標記 |
| > ; | > | 大于號或顯示標記 |
| & | & | 可用于顯示其它特殊字符 |
| " | “ | 引號 |
| ® | ? | 已注冊 |
| © | ? | 版權 |
| ™ | ? | 商標 |
| | 不斷行的空白 |
案例：公司簡介
案例如圖：
具體代碼演示：
四. 圖片、音頻、視頻標簽
| <img> | 定義圖片 |
| <audio> | 定義音頻 |
| <video> | 定義視頻 |
- img：定義圖片
src：規(guī)定顯示圖像的 URL（統(tǒng)一資源定位符）
height：定義圖像的高度
width：定義圖像的寬度 - audio：定義音頻。支持的音頻格式：MP3、WAV、OGG
src：規(guī)定音頻的 URL
controls：顯示播放控件 - video：定義視頻。支持的音頻格式：MP4, WebM、OGG
src：規(guī)定視頻的 URL
controls：顯示播放控件
尺寸單位：
height屬性和width屬性有兩種設置方式：
- 像素：單位是px
- 百分比。占父標簽的百分比。例如寬度設置為 50%，意思就是占它的父標簽寬度的一般（50%）
資源路徑：
圖片，音頻，視頻標簽都有src屬性，而src是用來指定對應的圖片，音頻，視頻文件的路徑。此處的圖片，音頻，視頻就稱為資源。資源路徑有如下兩種設置方式：
- 絕對路徑：完整路徑
這里的絕對路徑是網(wǎng)絡中的絕對路徑。 格式為： 協(xié)議://ip地址:端口號/資源名稱。
如：
- 相對路徑：相對位置關系
- 找頁面和其他資源的相對路徑。
./ 表示當前路徑
../ 表示上一級路徑
../../ 表示上兩級路徑 - 如模塊目錄結構如下
- 找頁面和其他資源的相對路徑。
在瀏覽器展示的效果如下：
五. 超鏈接標簽
超鏈接標簽
| <a> | 定義超鏈接，用于鏈接到另一個資源 |
- href：指定訪問資源的URL
- target：指定打開資源的方式
- _self：默認值，在當前頁面打開
- _blank：在空白頁面打開
如圖演示：
六. 列表標簽
| <ol> | 定義有序列表 |
| <ul> | 定義無序列表 |
| <li> | 定義列表項 |
- type：符號類型
七. 表格標簽
| <table> | 定義表格 |
| <tr> | 定義行 |
| <td> | 定義單元格 |
| <th> | 定義表頭單元格 |
-
table：設置符號的類型
-
table：定義表格
- width：寬度
- border：邊框
- cellpadding：定義內容和單元格的距離
- cellspacing：定義單元格之間的距離。如果指定為0，則單元格的線會合為一條、
- bgcolor：背景色
- align：對齊方式
- tr：定義行
- bgcolor：背景色
- align：對齊方式
- td：定義單元格
- colspan：合并列
- rowspan：合并行
- th：定義表頭單元格
- < caption >：表格標題
- width：寬度
八. 布局標簽
| <div> | 定義 HTML 文檔中的一個區(qū)域部分，經(jīng)常與 CSS 一起使用，用來布局網(wǎng)頁 |
| <span> | 用于組合行內元素。 |
這兩個標簽，一般都是和css結合到一塊使用來實現(xiàn)頁面的布局。
div 標簽 在瀏覽器上會有換行的效果，而 span 標簽在瀏覽器上沒有換行效果
九. 表單標簽
表單標簽效果大家其實都不陌生，像登陸頁面、注冊頁面等都是表單。
像這樣的表單就是用來采集用戶輸入的數(shù)據(jù)，然后將數(shù)據(jù)發(fā)送到服務端，服務端會對數(shù)據(jù)庫進行操作，比如注冊就是將數(shù)據(jù)保存到數(shù)據(jù)庫中，而登陸就是根據(jù)用戶名和密碼進行數(shù)據(jù)庫的查詢操作。
1. 表單標簽概述
表單：在網(wǎng)頁中主要負責數(shù)據(jù)采集功能，使用標簽定義表單
表單項(元素)：不同類型的 input 元素、下拉列表、文本域等
| <form> | 定義表單 |
| <input> | 定義表單項，通過type屬性控制輸入形式 |
| <label> | 為表單項定義標注 |
| <select> | 定義下拉列表 |
| <option> | 定義下拉列表的列表項 |
| <textarea> | 定義文本域 |
form 是表單標簽，它在頁面上沒有任何展示的效果。需要借助于表單項標簽來展示不同的效果。如下圖就是不同的表單項標簽展示出來的效果。
2. form標簽屬性
method取值有如下兩種：
- get：默認值。如果不設置method屬性則默認就是該值請求參數(shù)會拼接在URL后邊url的長度有限制 4KB
- post(安全)：瀏覽器會將數(shù)據(jù)放到http請求消息體中請求參數(shù)無限制的
3. 代碼演示
由于表單標簽在頁面上沒有任何展示的效果，所以在演示的過程是會先使用 input 這個表單項標簽展示輸入框效果。
代碼如下：
從效果可以看到頁面有一個輸入框，用戶可以在數(shù)據(jù)框中輸入自己想輸入的內容，點擊提交按鈕以后會將數(shù)據(jù)發(fā)送到服務端，當然現(xiàn)在肯定不能實現(xiàn)。現(xiàn)在我們可以將 form 標簽的 action 屬性值設置為 # ，將其將數(shù)據(jù)提交到當前頁面。還需要注意一點，要想提交數(shù)據(jù)， input 輸入框必須設置 name 屬性。
代碼如下：
- 當在form表單標簽中添加method屬性時候，屬性值為postt時更安全
從上圖可以看出數(shù)據(jù)并沒有拼接到 URL 后，那怎么看提交的數(shù)據(jù)呢？我們可以使用瀏覽器的開發(fā)者工具來查看
按照如上步驟操作能看到如下頁面
重新提交數(shù)據(jù)后，可以看到提交的數(shù)據(jù)，如下圖
3. 表單項標簽
表單項標簽有很多，不同的表單項標簽有不同的展示效果。表單項標簽可以分為以下三個：
- < input >：表單項，通過type屬性控制輸入形式
input 標簽有個 type 屬性。 type 屬性的取值不同，展示的效果也不一樣
| text | 默認值。定義單行的輸入字段 |
| password | 定義密碼字段 |
| radio | 定義單選按鈕 |
| checkbox | 定義復選框 |
| file | 定義文件上傳按鈕 |
| hidden | 定義隱藏的輸入字段 |
| submit | 定義提交按鈕，提交按鈕會把表單數(shù)據(jù)發(fā)送到服務器 |
| reset | 定義重置按鈕，重置按鈕會清除表單中的所有數(shù)據(jù) |
| button | 定義可點擊按鈕 |
-
：定義下拉列表， 定義列表項
如下圖就是下拉列表的效果
-
< textarea >：文本域
如下圖就是文本域效果。它可以輸入多行文本，而 input 數(shù)據(jù)框只能輸入一行文本。
注意：
- 以上標簽項的內容要想提交，必須得定義 name 屬性。
- 每一個標簽都有id屬性，id屬性值是唯一的標識。
- 單選框、復選框、下拉列表需要使用 value 屬性指定提交的值。
代碼演示：
<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><title>Title</title></head><body><form action="#" method="post"><input type="hidden" name="id" value="123"><label for="username">用戶名：</label><input type="text" name="username" id="username"><br><label for="password">密碼：</label><input type="password" name="password" id="password"><br> 性別：<input type="radio" name="gender" value="1" id="male"> <label for="male">男</label><input type="radio" name="gender" value="2" id="female"> <label for="female">女 </label><br> 愛好：<input type="checkbox" name="hobby" value="1"> 旅游<input type="checkbox" name="hobby" value="2"> 電影<input type="checkbox" name="hobby" value="3"> 游戲<br> 頭像：<input type="file"><br> 城市:<select name="city"><option>北京</option><option value="shanghai">上海</option><option>廣州</option></select><br> 個人描述：<textarea cols="20" rows="5" name="desc"></textarea><br><br><input type="submit" value="免費注冊"><input type="reset" value="重置"><input type="button" value="一個按鈕"></form></body></html>在瀏覽器的效果如下：
總結
- 上一篇： java 中通过 Lettuce 来操作
- 下一篇： HTML——meta标签