關(guān)于HTML、CSS、JavaScript
HTML主要用于網(wǎng)頁(yè)主體結(jié)構(gòu)的搭建
CSS主要用于頁(yè)面元素美化
JavaScript主要用于頁(yè)面元素的動(dòng)態(tài)處理
關(guān)于HTML
關(guān)于超文本?
?關(guān)于標(biāo)記語(yǔ)言
HTML基礎(chǔ)結(jié)構(gòu)
- html文件是瀏覽器負(fù)責(zé)解析和展示。
- html文件是純文本文件，普通編輯工具都可以編輯。
文檔聲明
<!DOCTYPE html> ：聲明此文檔是一個(gè)html文檔，也可以不寫(xiě)。
html文件的根標(biāo)簽
<html> </html>所有的根標(biāo)簽都要在這個(gè)標(biāo)簽中間
html根標(biāo)簽下有兩個(gè)一級(jí)子標(biāo)簽：頭標(biāo)簽、體標(biāo)簽。
頭標(biāo)簽
<head></head> 頭標(biāo)簽：定義那些不直接展示在頁(yè)面主體上但是又很重要的內(nèi)容（比如：字符集、title、css引入、js引入，等）
體標(biāo)簽
<body></body> 體標(biāo)簽：定義要展示到頁(yè)面主題的標(biāo)簽
頁(yè)面標(biāo)題標(biāo)簽
<title></title> 頁(yè)面標(biāo)題的標(biāo)簽，將頁(yè)面標(biāo)題寫(xiě)入其中。定義在頭標(biāo)簽內(nèi)。
例：<title>李二狗的JavaWeb學(xué)習(xí)</title> ，效果如圖。
定義字符集標(biāo)簽
<meta charset = '字符集'/> 告訴瀏覽器用什么字符集對(duì)文件解碼。通常用UTF-8字符集，定義在頭標(biāo)簽內(nèi)部。
注釋
HTML中注釋的寫(xiě)法是
<!--注釋內(nèi)容-->
html文件的大概格式如下：
<!DOCTYPE html>
<html>
<head>
<meta?charset="字符集">
<title>頁(yè)面的標(biāo)題</title>
</head>
<body>
頁(yè)面的主體
</body>
</html>
HTML概念詞匯
標(biāo)簽
代碼中的一個(gè)<>叫做一個(gè)標(biāo)簽。有些標(biāo)簽成對(duì)出現(xiàn)，稱(chēng)為雙標(biāo)簽。有些標(biāo)簽單獨(dú)出現(xiàn)，稱(chēng)為單標(biāo)簽。
屬性
一般在開(kāi)始標(biāo)簽中，用于定義標(biāo)簽的一些特征。
文本
雙標(biāo)簽中間的文字，包含空格換行等結(jié)構(gòu)。
元素
經(jīng)過(guò)瀏覽器解析后，每一個(gè)完整的標(biāo)簽（標(biāo)簽+屬性+文本）可以稱(chēng)為一個(gè)元素。
HTML的語(yǔ)法規(guī)則
- 根標(biāo)簽只能有一個(gè)。
- 無(wú)論是雙標(biāo)簽還是單標(biāo)簽都要正確關(guān)閉。
- 標(biāo)簽可以嵌套但不能交叉嵌套。
- 注釋不能嵌套。
- 屬性必須要有值，且值必須加引號(hào)，H5中屬性名和值相同時(shí)可以省略屬性值。
- HTML中不嚴(yán)格區(qū)分字符串使用單雙引號(hào)。引號(hào)的嵌套可以使用單引號(hào)和雙引號(hào)的不同來(lái)完成。
常見(jiàn)標(biāo)簽
標(biāo)題標(biāo)簽
格式：（以一級(jí)標(biāo)簽為例）
<h1> (標(biāo)題內(nèi)容) </h1>
標(biāo)題總共有六級(jí)，即h1到h6。
h1到h6的顯示效果如圖：
<!--關(guān)于標(biāo)題標(biāo)簽-->
? ? <h1>我愛(ài)敲代碼</h1>
? ? <h2>我愛(ài)敲代碼</h2>
? ? <h3>我愛(ài)敲代碼</h3>
? ? <h4>我愛(ài)敲代碼</h4>
? ? <h5>我愛(ài)敲代碼</h5>
? ? <h6>我愛(ài)敲代碼</h6>
自然段標(biāo)簽
格式：
<p>
(自然段內(nèi)容)
</p>
在html中，不會(huì)識(shí)別換行操作，要將兩個(gè)自然段分開(kāi)，要將兩個(gè)自然段分別用<p></p>括起來(lái)。
換行標(biāo)簽
格式：
<br/> <!--也可以寫(xiě)成<br>-->
<hr/> <!--也可以寫(xiě)成<hr>-->
<br>是單純的換行操作
<hr>是帶分割線的換行
列表標(biāo)簽
有序列表
列表標(biāo)簽：<ol></ol>
列表項(xiàng)標(biāo)簽：<li></li>
一對(duì)列表標(biāo)簽內(nèi)包含一組有序列表，一對(duì)列表項(xiàng)內(nèi)包含有序列表的一列。
有序列表內(nèi)，列表中的每一列的開(kāi)頭都有其在列表中的序號(hào)。
效果如圖：
<ol>
<li>C語(yǔ)言</li>
<li>Java</li>
<li>MySQL數(shù)據(jù)庫(kù)</li>
<li>JavaWeb</li>
</ol>
?
無(wú)序列表
列表標(biāo)簽：<ul></ul>
列表項(xiàng)標(biāo)簽：<li></li>
一對(duì)列表標(biāo)簽內(nèi)包含一組無(wú)序列表，一對(duì)列表項(xiàng)內(nèi)包含無(wú)序列表的一列。
無(wú)序列表內(nèi)，列表中的每一項(xiàng)的開(kāi)頭沒(méi)有序號(hào)，而是有一個(gè)黑色的圓點(diǎn)。
效果如圖：
<ul>
<li>C語(yǔ)言</li>
<li>Java</li>
<li>MySQL數(shù)據(jù)庫(kù)</li>
<li>JavaWeb</li>
</ul>
?
列表的嵌套
可以在列表內(nèi)嵌套列表，即在<li></li>內(nèi)再寫(xiě)列表。
例如：
<ul>
<li>C語(yǔ)言
<ol>
<li>數(shù)據(jù)類(lèi)型</li>
<li>變量</li>
<li>流程控制</li>
<li>數(shù)組</li>
<li>函數(shù)</li>
<li>指針</li>
</ol>
</li>
<li>Java</li>
<li>MySQL數(shù)據(jù)庫(kù)</li>
<li>JavaWeb</li>
</ul>
效果如圖：
?
超鏈接標(biāo)簽
格式：
<a></a>
屬性：
href 用于定義要跳轉(zhuǎn)的目標(biāo)資源地址，屬性值為指定的網(wǎng)頁(yè)地址（可以是完整的url，也可以是相對(duì)路徑或絕對(duì)路徑）
target 用于定義目標(biāo)資源的打開(kāi)方式，屬性值為打開(kāi)方式
打開(kāi)方式：
_self：在當(dāng)前窗口打開(kāi)目標(biāo)資源
_blank：開(kāi)啟新窗口打開(kāi)目標(biāo)資源
代碼效果如圖：
<a href = "<http://www.atguigu.com>" target="_self">尚硅谷</a>
?
點(diǎn)擊尚硅谷文字后就會(huì)在此頁(yè)面跳轉(zhuǎn)到尚硅谷的官網(wǎng)
在同一個(gè)樹(shù)分支中的倆個(gè)文件的超鏈接可以使用相對(duì)路徑實(shí)現(xiàn)，例如：
<a href="有序和無(wú)序列表.html" target="_blank">有序和無(wú)序列表的代碼效果</a>
點(diǎn)擊有序列表和無(wú)序列表的文字就會(huì)再打開(kāi)一個(gè)新的頁(yè)面跳轉(zhuǎn)到 有序和無(wú)序列表.html 的頁(yè)面
關(guān)于相對(duì)路徑
相對(duì)路徑的開(kāi)頭可以是 ./或../。./表示當(dāng)前資源的所在路徑，可以省略不寫(xiě)。../表示當(dāng)前資源的上一層路徑，使用時(shí)要顯式寫(xiě)出。
多媒體標(biāo)簽
圖片標(biāo)簽
格式：
<img/>
屬性：
src：定義圖片的路徑
title：定義鼠標(biāo)懸停時(shí)提示的文字
alt：定義加載失敗時(shí)提示的文字
width：指定圖片的寬度，單位為px（像素）
表格標(biāo)簽
<table></table>：一對(duì)table標(biāo)簽內(nèi)包含一個(gè)表格
<thead></thead>：代表表頭，可以省略不寫(xiě)
<tbody></tbody>：代表表體，可以省略不寫(xiě)
<tfoot></tfoot>：代表表尾，可以省略不寫(xiě)
<tr></tr>：代表一行
<td></td>：代表行內(nèi)的一格
<th></th>：代表自帶加粗和居中效果的td
例如：
<h1 style="text-align: center;">員工信息表</h1>
<table border="2px" style="margin: auto; width: 500px;">
<thead>
<tr>
<th>員工姓名</th>
<th>員工部門(mén)</th>
<th>員工薪資</th>
</tr>
</thead>
<tbody>
<tr>
<td>李四</td>
<td>10號(hào)部門(mén)</td>
<td>10000</td>
</tr>
<tr>
<td>張三</td>
<td>20號(hào)部門(mén)</td>
<td>11000</td>
</tr>
</tbody>
</table>
效果如圖：
如果省略表頭表體表尾標(biāo)簽，則默認(rèn)都是表體。
如果想讓一個(gè)格向下多占幾行，則在td標(biāo)簽或th標(biāo)簽中加上屬性rowspan = “所占的行數(shù)”
例如：
<table border="2px" style="margin: auto; width: 500px;">
<thead>
<tr>
<th>員工姓名</th>
<th>員工部門(mén)</th>
<th>員工薪資</th>
<th>備注</th>
</tr>
</thead>
<tbody>
<tr>
<td>李四</td>
<td>10號(hào)部門(mén)</td>
<td>10000</td>
<td rowspan="3">每人工資漲薪10000塊</td>
</tr>
<tr>
<td>張三</td>
<td>20號(hào)部門(mén)</td>
<td>11000</td>
</tr>
<tr>
<td>二狗</td>
<td>30號(hào)部門(mén)</td>
<td>30000</td>
</tr>
</tbody>
</table>
效果如圖：
讓一格向右多占幾列也是同理，使用屬性colspan = “所占的列數(shù)”
例：
<table border="2px" style="margin: auto; width: 500px;">
<thead>
<tr>
<th>員工姓名</th>
<th>員工部門(mén)</th>
<th>員工薪資</th>
<th>備注</th>
</tr>
</thead>
<tbody>
<tr>
<td>李四</td>
<td>10號(hào)部門(mén)</td>
<td>10000</td>
<td rowspan="5">每人工資漲薪10000塊</td>
</tr>
<tr>
<td>張三</td>
<td>20號(hào)部門(mén)</td>
<td>11000</td>
</tr>
<tr>
<td>二狗</td>
<td>30號(hào)部門(mén)</td>
<td>30000</td>
</tr>
<tr>
<td>總?cè)藬?shù)</td>
<td colspan="2">3</td>
</tr>
<tr>
<td>職位</td>
<td colspan="2">后端開(kāi)發(fā)工程師</td>
</tr>
</tbody>
</table>
效果如圖：
?
表單標(biāo)簽
表單標(biāo)簽是可以實(shí)現(xiàn)讓用戶(hù)在界面上輸入各種信息并提交的一種標(biāo)簽，是向服務(wù)器端發(fā)送數(shù)據(jù)主要的方式之一
<form></from>：form標(biāo)簽，即表單標(biāo)簽，其內(nèi)部用于定義可以讓用戶(hù)輸入信息的表單項(xiàng)標(biāo)簽
屬性：
action：用于定義信息提交的服務(wù)器的地址
method：用于定義信息提交的方式。get方式：數(shù)據(jù)會(huì)綴到url后，以?作為參數(shù)開(kāi)始的標(biāo)識(shí)。post方式，數(shù)據(jù)會(huì)通過(guò)請(qǐng)求體發(fā)送，不會(huì)綴到url后。
<input/>：主要的表單項(xiàng)標(biāo)簽，可以用于定義表單項(xiàng)
屬性：
name：用于定義提交的參數(shù)名
type：用于定義表單項(xiàng)類(lèi)型。類(lèi)型：text 文本框，password 密碼框，submit 提交按鈕，reset 重置按鈕,radio 單選框
表單項(xiàng)一定要定義name屬性，該屬性用于明確提交時(shí)的參數(shù)名
表單項(xiàng)還有value屬性，該屬性用于明確提交時(shí)的實(shí)參。不對(duì)輸入內(nèi)容進(jìn)行修改時(shí)，提交的實(shí)參即為value屬性的值。若輸入內(nèi)容，提交的實(shí)參即為輸入的內(nèi)容。
表單的提交方式
提交方式定義在method標(biāo)簽中，有post與get
get：
- 參數(shù)會(huì)以鍵值對(duì)的形式放在url后提交 ：url?key=value&key=value……
- 數(shù)據(jù)直接暴露在地址欄上，相對(duì)不安全
- 地址欄的長(zhǎng)度有限制，所以提交的數(shù)據(jù)量有限
- 地址欄上，只能是字符
- 相比于post，效率更高。
post：
- 參數(shù)不默認(rèn)放到url后
- 數(shù)據(jù)不會(huì)放在地址欄上，相對(duì)安全
- 數(shù)據(jù)是單獨(dú)打包通過(guò)請(qǐng)求體發(fā)送，提交的數(shù)據(jù)量比較大
- 請(qǐng)求體中，可以是字符，也可以是字節(jié)數(shù)據(jù)，可以提交文件
- 相比于get，效率更低。
表單項(xiàng)類(lèi)型
input標(biāo)簽中的表單項(xiàng)的屬性：
radio：?jiǎn)芜x框
多個(gè)單選框使用相同的name則就會(huì)有互斥效果，即只能選其中的一個(gè)。
需要給表單項(xiàng)定義value值，如此被選中的單選框就會(huì)將其默認(rèn)的value值提交出去
在表單項(xiàng)的屬性后加上 checked=”true”或checked=”checked”或直接寫(xiě)checked（屬性名與屬性值不同時(shí)，可以省略屬性值的定義）之后，在未作選擇時(shí)，該表單項(xiàng)就會(huì)被默認(rèn)選擇
例：
<form action="圖片標(biāo)簽.html" method="get">
用戶(hù)名:<input type="text" name="username"/><br>
密碼:<input type="password" name="userpassword"/><br>
<input type="radio" name="gender" value="man" checked="true"/>男
<input type="radio" name="gender"/ value="woman">女<br>
<input type="submit" value="登錄"/>
<input type="reset" value="清空"/>
</form>
效果如圖：
checkbox：復(fù)選框
復(fù)選框使用相同的name不會(huì)有互斥效果，可以選擇多個(gè)。
也需要給表單項(xiàng)定義value值，如此被選中的單選框就會(huì)將其默認(rèn)的value值提交出去，選多個(gè)表單項(xiàng)時(shí)，相應(yīng)提交多個(gè)鍵值對(duì)信息（比如：hobby=basketball&hobby=football&hobby=baseball）。
復(fù)選框也可以使用check屬性來(lái)默認(rèn)選中。
hidden：隱藏域
不顯示在頁(yè)面上，提交時(shí)會(huì)攜帶隱藏域中的信息一起提交。提交一些特定的信息，但是考慮到安全問(wèn)題或者是用戶(hù)操作不當(dāng)時(shí)，不希望這些特定的信息發(fā)生改變，就可以使用隱藏域。
一些其他的表單項(xiàng)的屬性：
readonly：數(shù)據(jù)設(shè)置為只是可讀
disable：數(shù)據(jù)設(shè)置為顯示但是不提交
input標(biāo)簽的表單項(xiàng)之外的表單項(xiàng)：
textarea 文本域（多行文本框）
格式：
<textarea></textarea>
textarea表單項(xiàng)也要定義name，但是沒(méi)有屬性value，textarea提交的就是textarea雙標(biāo)簽中間的數(shù)據(jù)
select：下拉框
格式：
<select>
<option>下拉框中的選項(xiàng)</option>
<option>下拉框中的選項(xiàng)</option>
<option>下拉框中的選項(xiàng)</option>
……
</select>
下拉框表單項(xiàng)也要定義name，如果option標(biāo)簽中沒(méi)有定義value屬性，則提交option雙標(biāo)簽中間的數(shù)據(jù)，如果定義了value屬性，則提交定義的value屬性。
如果在某個(gè)選項(xiàng)的option標(biāo)簽中加上selected，此選項(xiàng)就被默認(rèn)選中
復(fù)選框、文本域、下拉框的代碼如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄系統(tǒng)</title>
</head>
<body>
<form action="圖片標(biāo)簽.html" method="get">
用戶(hù)名:<input type="text" name="username"/><br>
密碼:<input type="password" name="userpassword"/><br>
<input type="radio" name="gender" value="man" checked="true"/>男
<input type="radio" name="gender"/ value="woman">女<br>
<input type="checkbox" name="hobby" value="basketball"/>籃球
<input type="checkbox" name="hobby" value="football"/>足球
<input type="checkbox" name="hobby" value="baseball"/>棒球<br>
所在地: <select name="located">
<option value="gan_zhou">贛州</option>
<option value="ji_an">吉安</option>
<option value="nan_chang">南昌</option>
<option value="jiu_jiang">九江</option>
<option value="0" selected>請(qǐng)選擇</option>
</select><br>
個(gè)人簡(jiǎn)介:<br>
<textarea name="introduction" style="width: 300px;height: 100px;"></textarea>
<br>
<input type="submit" value="登錄"/>
<input type="reset" value="清空"/>
</form>
</body>
</html>
演示效果如圖：
布局相關(guān)標(biāo)簽
div：屬于塊元素，自己獨(dú)占一行
span：屬于行內(nèi)元素，不會(huì)自己獨(dú)占一行
塊元素的css樣式的寬、高等往往都生效，行內(nèi)元素的css樣式的寬、高等，很多都是不生效的。
div可以將頁(yè)面的內(nèi)容分成多塊來(lái)布局，span用來(lái)對(duì)行內(nèi)的內(nèi)容進(jìn)行分開(kāi)編輯，二者配合使用
例：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>登錄系統(tǒng)</title>
</head>
<body>
<div style="border: 1px solid red;width: 700px;height: 300px;margin: auto;background-color: antiquewhite;">
用戶(hù)登錄界面 <span style="font: 25px;color: red;"> 歡迎!</span>
<form action="圖片標(biāo)簽.html" method="get">
用戶(hù)名:<input type="text" name="username"/><br>
密碼:<input type="password" name="userpassword"/><br>
<input type="radio" name="gender" value="man" checked="true"/>男
<input type="radio" name="gender"/ value="woman">女<br>
<input type="checkbox" name="hobby" value="basketball"/>籃球
<input type="checkbox" name="hobby" value="football"/>足球
<input type="checkbox" name="hobby" value="baseball"/>棒球<br>
所在地: <select name="located">
<option value="gan_zhou">贛州</option>
<option value="ji_an">吉安</option>
<option value="nan_chang">南昌</option>
<option value="jiu_jiang">九江</option>
<option value="0" selected>請(qǐng)選擇</option>
</select><br>
個(gè)人簡(jiǎn)介:<br>
<textarea name="introduction" style="width: 300px;height: 100px;"></textarea>
<br>
<input type="submit" value="登錄"/>
<input type="reset" value="清空"/>
</form>
</div>
<div style="border: 1px solid red;width: 700px;height: 300px;margin: 10px auto;background-color: antiquewhite;">
用戶(hù)協(xié)議：<a href="./協(xié)議.html" target="_self">用戶(hù)協(xié)議</a><br>
<input type="radio" name="gender" value="yes" checked="true"/>同意
<input type="radio" name="gender"/ value="no">不同意
</div>
</body>
</html>
效果如圖：
特殊字符
對(duì)于HTML代碼來(lái)說(shuō)，某些符號(hào)是有特殊含義的，如果想顯示這些符號(hào)，則需要轉(zhuǎn)義。
當(dāng)想要使用這些字符，使用相應(yīng)的實(shí)體名稱(chēng)或者實(shí)體編號(hào)進(jìn)行寫(xiě)入即可。
例：
<h1>一級(jí)標(biāo)題</h1>
效果如圖：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-785196.html
文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-785196.html
到了這里，關(guān)于JavaWeb，HTML的學(xué)習(xí)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
![[JavaWeb]【一】入門(mén)JavaWeb開(kāi)發(fā)總概及HTML、CSS、JavaScript](https://imgs.yssmx.com/Uploads/2024/02/652989-1.png)
