江西南昌網(wǎng)站建設(shè)服務(wù)文大俠seo博客
文章目錄
- 零、本講學習目標
- 一、HTML基礎(chǔ)
- （一）HTML簡介
- 1、HTML
- 2、HTML語言的基本格式
- 3、<!DOCTYPE>聲明
- 4、html標簽
- 5、head標簽
- 6、body標簽
- 7、編寫第一個網(wǎng)頁
- 8、關(guān)于編寫HTML文件的工具
- 9、HTML標簽概述
- （1）單標簽
- （2）雙標簽
- （3）注釋標簽
- 二、常用的HTML標簽
- （一）段落、行內(nèi)和換行標簽
- （二）文本樣式標簽
- （三）表格標簽
- （四）表單標簽
- 1、表單域\<form\>
- 2、表單控件\<input\>
- 三、CSS技術(shù)
- 四、JavaScript基礎(chǔ)
- 五、Bootstrap框架基礎(chǔ)
- 六、Bootstrap框架的常用組件
零、本講學習目標
- 熟悉HTML標簽的使用
- 掌握CSS樣式的引用方式
- 掌握CSS選擇器的常用屬性
- 熟悉DOM與BOM的相關(guān)知識
- 掌握JavaScript的使用
- 熟悉Bootstrap框架的下載與使用
- 掌握BootStrap框架的常用組件
在學習Java Web開發(fā)之前，讀者首先需要了解一些網(wǎng)頁開發(fā)的基礎(chǔ)知識。說到網(wǎng)頁，其實大家并不陌生，我們上網(wǎng)查詢信息時就是在瀏覽網(wǎng)頁。網(wǎng)頁可以看作是承載各種網(wǎng)站應(yīng)用和信息的容器，網(wǎng)站的所有可視化內(nèi)容都會通過網(wǎng)頁展示給用戶。本講將圍繞HTML技術(shù)、CSS技術(shù)以及JavaScript技術(shù)對網(wǎng)頁開發(fā)基礎(chǔ)知識進行講解。
一、HTML基礎(chǔ)
（一）HTML簡介
1、HTML
- HTML是英文
Hyper Text Markup Language的縮寫，中文譯為“超文本標記語言”。HTML主要作用是通過HTML標簽對網(wǎng)頁中的文本、圖片、聲音等內(nèi)容進行描述。HTML網(wǎng)頁就是一個后綴名為“.html”或“.htm”的文件，它可以用記事本打開，因此簡單的html代碼可以在記事本中編寫。編寫完成后，將文件后綴名修改為“.html”或“.htm”即可生成一個HTML網(wǎng)頁。
2、HTML語言的基本格式
3、<!DOCTYPE>聲明
<!DOCTYPE>聲明必須是 HTML 文檔的第一行，位于 標簽之前。<!DOCTYPE>聲明不是 HTML 標簽，是一條指令，它用于向瀏覽器說明當前文檔使用哪種HTML標準規(guī)范，網(wǎng)頁在開頭處使用<!DOCTYPE>聲明為所有的HTML文檔指定HTML版本和類型，這樣瀏覽器將該網(wǎng)頁作為有效的HTML文檔，并按指定的文檔類型進行解析。<!DOCTYPE>聲明和瀏覽器的兼容性相關(guān)，<!DOCTYPE>聲明被刪除后，如何展示HTML頁面的權(quán)利就交給了瀏覽器，即頁面的顯示效果由瀏覽器決定。
4、html標簽
<html>標簽位于<!DOCTYPE>聲明之后，被稱為根標簽。根標簽主要用于告知瀏覽器該文檔是一個HTML文檔。其中，<html>標簽標志著HTML文檔的開始，</html>標簽則標志著HTML文檔的結(jié)束，它們之間是文檔的頭部和主體內(nèi)容。
5、head標簽
<head>標簽用于定義HTML文檔的頭部信息，也被稱為頭部標簽。<head>標簽緊跟在<html>之后，主要用于封裝其他位于文檔頭部的標簽，如<title>、<meta>、<link>及<style>等標簽。
6、body標簽
<body>標簽用于定義HTML文檔所要顯示的內(nèi)容，也被稱為主體標簽。瀏覽器中顯示的所有文本、圖像、音頻和視頻等信息都必須位于<body>標簽內(nèi)，才能最終展示給用戶。需要注意的是，一個HTML文檔只能含有一對<body>標簽，且<body>標簽必須在<html>標簽內(nèi)，位于<head>標簽之后，與<head>標簽是并列關(guān)系。
7、編寫第一個網(wǎng)頁
-
在
D:\web_work里創(chuàng)建一個名稱為chapter01的文件夾，然后在該文件夾中新建一個文本文件（.txt后綴），將文件的名稱更改為htmlDemo01，后綴名改為.html。
-
在
htmlDemo01.html文件中編寫代碼
-
運行程序，使用瀏覽器打開
htmlDemo01.html文件
8、關(guān)于編寫HTML文件的工具
-
讀者在編寫HTML文件時，可以使用系統(tǒng)自帶的記事本編寫，也可以使用Notepad++、EditPlus、UltraEdit、HBuilder或IDEA等工具編寫HTML文件，當使用工具創(chuàng)建HTML文件時，文件中的基本標簽會被自動創(chuàng)建，編輯工具還會有代碼顏色和代碼提示功能，開發(fā)者只需根據(jù)需求完善功能代碼即可，工具的使用有助于提高編碼效率，減少出錯率。
-
Notepad++編輯器
-
HBuilder開發(fā)工具
-
IDEA開發(fā)工具
9、HTML標簽概述
（1）單標簽
- 單標簽也被稱為“空標簽”，是指用一個標簽符號就可以完整地描述某個功能的標簽。
- 單標簽基本語法格式：
<標簽名 /> - 注意：在標簽名與“/”之間有一個空格，雖然在顯示效果上有無空格都一樣，但是按照規(guī)范的要求，建議加上空格。
- 為什么要有單標簽？HTML標簽的作用原理是選擇網(wǎng)頁內(nèi)容進行描述，也就是說需要描述誰，就選擇誰，所以才會有雙標簽的出現(xiàn)，雙標簽有開始和結(jié)束標簽。而單標簽本身就可以描述一個功能，不需要選擇誰，例如水平線標簽
<hr />，按照雙標簽的語法，它應(yīng)該寫成“<hr></hr>”，但是水平線標簽不需要選擇誰，它本身就代表一條水平線，此時寫成雙標簽就顯得有點多余，但是又不能沒有結(jié)束符號，所以單標簽的語法格式就是在標簽名稱后面加一個關(guān)閉符，即為<標簽名 />。
（2）雙標簽
- 雙標簽也稱體標簽，是指由開始和結(jié)束兩個標簽符組成的標簽。
- 雙標簽基本語法格式：
<標簽名>內(nèi)容</標簽名>
（3）注釋標簽
- 在HTML中還有一種特殊的標簽——注釋標簽，如果需要在HTML文檔中添加一些便于閱讀和理解，但又不需要顯示在頁面中的注釋文字，就需要使用注釋標簽。
- 注釋標簽的基本語法格式：
<!--注釋語句--> - 注意：注釋內(nèi)容不會顯示在瀏覽器窗口中，但是作為HTML文檔內(nèi)容的一部分，注釋標簽可以被下載到用戶的計算機上，或者用戶查看源代碼時也可以看到注釋標簽。
二、常用的HTML標簽
（一）段落、行內(nèi)和換行標簽
- 目標：熟悉HTML的段內(nèi)、行內(nèi)和換行標簽
- 在
chapter01文件夾中新建HTML文件htmlDemo02.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>htmlDemo02</title></head><body><p>相思</p><p><span>紅豆生南國，<br />春來發(fā)幾枝。<br />勸君多采擷，<br />此物最相思。</span></p></body>
</html>
- 運行程序，使用瀏覽器打開
htmlDemo02.html文件
（二）文本樣式標簽
- 目標：熟悉HTML的文本樣式標簽
- 在HTML中，使用
<font>標簽控制網(wǎng)頁中文本的樣式，如字體、字號和顏色 <font>標簽的基本語法格式：<font 屬性="屬性值">文本內(nèi)容</font>- 在
chapter01文件夾中新建HTML文件htmlDemo03.html
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>htmlDemo03</title></head><body>默認樣式文本：踏青尋芳<br /><font face="微軟雅黑" size="7" color="green">微軟7號綠色文本：春滿人間</font></body>
</html>
- 運行程序，使用瀏覽器打開
htmlDemo03.html文件
（三）表格標簽
- 目標：掌握表格標簽，學會使用border屬性改變表格的邊框
- 在HTML網(wǎng)頁中要想創(chuàng)建表格，需要使用相關(guān)的表格標簽才能創(chuàng)建表格
- 在HTML網(wǎng)頁中創(chuàng)建表格的基本語法格式
<table><tr><td>單元格內(nèi)的文字</td></tr>
</table>
- 注意：
<table>、<tr>和<td>是創(chuàng)建表格的基本標簽，缺一不可。<table>用于定義一個表格，<tr>用于定義表格中的行(table row)，必須嵌套在<table>標簽中，<td>用于定義表格中的單元格（table data），也可稱為表格中的列，必須嵌套在<tr>標簽中。 - 在
chapter01文件夾中創(chuàng)建一個HTML文件htmlDemo04.html
- 運行程序，使用瀏覽器打開
htmlDemo04.html文件
- 注意：如果border屬性的值發(fā)生改變，那么只有圍繞表格的邊框尺寸會發(fā)生變化，表格內(nèi)部的邊框還是1像素寬。如果將border的屬性值設(shè)置為0或者刪除border屬性，將顯示沒有邊框的表格。
（四）表單標簽
- 目標：掌握表單標簽，學會使用表單標簽收集數(shù)據(jù)信息
- 表單就是在網(wǎng)頁上用于輸入信息的區(qū)域，它的主要功能是收集數(shù)據(jù)信息，并將這些信息傳遞給后臺信息處理模塊。例如，注冊頁面中的用戶名和密碼輸入、性別選擇、提交按鈕等都是用表單中的相關(guān)標簽定義的。
1、表單域<form>
- 在HTML中，
<form>標簽用于定義表單域，即創(chuàng)建一個表單。 <form>標簽基本語法
<form action="url地址" method="提交方式" name="表單名稱">各種表單控件
</form>
action屬性：用于指定表單提交的地址。method屬性：用于設(shè)置表單數(shù)據(jù)的提交方式，它有GET和POST兩個值，其中，GET為默認值，這種方式提交的數(shù)據(jù)將顯示在瀏覽器的地址欄中，保密性差且有數(shù)據(jù)量限制；而使用POST提交方式不但保密性好，還可以提交大量的數(shù)據(jù)，因此開發(fā)中通常使用POST方式提交表單。
2、表單控件<input>
-
瀏覽網(wǎng)頁時經(jīng)常會看到單行文本輸入框、單選按鈕、復(fù)選框、重置按鈕等，使用
<input>控件可以在表單中定義這些元素。 -
<intput>控件基本語法格式：<input type="控件類型" /> -
type屬性為<input>控件最基本的屬性，用來指定不同的控件類型。 -
<input>控件還可以定義很多其他屬性，其中，比較常用的有id、name、value、size，它們分別用來指定<input>控件的ID值、名稱、控件中的默認值和控件在頁面中的顯示寬度。 -
在
chapter01文件夾中創(chuàng)建一個HTML文件htmlDemo05.html，添加表單，并設(shè)置提交方式為POST，再定義一個2列的表格
-
在
htmlDemo05.html中添加用戶名輸入控件和密碼輸入框控件
-
在
htmlDemo05.html中添加性別選擇控件和復(fù)選框控件
-
在
htmlDemo05.html中添加文件上傳控件、提交按鈕控件和重置按鈕
-
查看頁面完整代碼
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>htmlDemo05</title></head><body><form action="#" method="post"><table cellpadding="2" align="center"><tr><td align="right">用戶名：</td><td><!-- 1.文本輸入框控件 --><input type="text" name="username" /> </td></tr><tr><td align="right">密碼：</td><!-- 2.密碼輸入框控件 --><td><input type="password" name="password" /></td></tr><tr><td align="right">性別：</td><td><input type="radio" name="gender" value="male" /> 男 <input type="radio" name="gender" value="female" /> 女 </td></tr><tr><td align="right">興趣：</td><td><input type="checkbox" name="interest" value="film" /> 看電影<input type="checkbox" name="interest" value="code" /> 敲代碼<input type="checkbox" name="interest" value="game" /> 玩游戲</td></tr><tr><td align="right">頭像：</td><td><input type="file" name="photo" /></td></tr><tr><td colspan="2" align="center"><input type="submit" value="注冊" /> <input type="reset" value="重填" /> </td></tr></table></form></body>
</html>
- 運行程序，使用瀏覽器打開
htmlDemo05.html文件
- 給表單加一個有標題的邊框
<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>htmlDemo05</title></head><body> <form action="#" method="post"><fieldset><legend>新用戶注冊</legend><table cellpadding="2" align="center"><tr><td align="right">用戶名：</td><td><!-- 1.文本輸入框控件 --><input type="text" name="username" /> </td></tr><tr><td align="right">密碼：</td><!-- 2.密碼輸入框控件 --><td><input type="password" name="password" /></td></tr><tr><td align="right">性別：</td><td><input type="radio" name="gender" value="male" /> 男 <input type="radio" name="gender" value="female" /> 女 </td></tr><tr><td align="right">興趣：</td><td><input type="checkbox" name="interest" value="film" /> 看電影<input type="checkbox" name="interest" value="code" /> 敲代碼<input type="checkbox" name="interest" value="game" /> 玩游戲</td></tr><tr><td align="right">頭像：</td><td><input type="file" name="photo" /></td></tr><tr><td colspan="2" align="center"><input type="submit" value="注冊" /> <input type="reset" value="重填" /> </td></tr></table></fieldset></form></body>
</html>
- 運行程序，使用瀏覽器打開
htmlDemo05.html文件
