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