網(wǎng)站開(kāi)發(fā)的時(shí)間流程seo修改器
文章目錄
- 前言
- 🌍一.B/S 軟件開(kāi)發(fā)架構(gòu)簡(jiǎn)述
- 🌍二.HTML 介紹
- ??2.1 官方文檔
- ??2.2 網(wǎng)頁(yè)的組成
- ??2.3 HTML 是什么
- ??2.4html基本結(jié)構(gòu)
- 🌍三.HTML標(biāo)簽
- 1.html 的標(biāo)簽/元素-說(shuō)明
- 2. html 標(biāo)簽注意事項(xiàng)和細(xì)節(jié)
- 3.font 字體標(biāo)簽
- 4.標(biāo)題標(biāo)簽
- 5.超鏈接標(biāo)簽
- 6.圖像標(biāo)簽
- 7.表格標(biāo)簽
- 8.div標(biāo)簽
- 9.p標(biāo)簽
- 10.span標(biāo)簽
- 11.表單
- 結(jié)語(yǔ)
🙋?♂? 作者：@whisperrr.🙋?♂?
👀 專欄：Javaweb學(xué)習(xí)👀
💥 標(biāo)題：Java Web開(kāi)發(fā)基礎(chǔ)：HTML的深度解析與應(yīng)用💥
?? 寄語(yǔ)：比較是偷走幸福的小偷??
前言
在Java Web開(kāi)發(fā)領(lǐng)域，HTML作為構(gòu)建網(wǎng)頁(yè)的基石，其重要性不言而喻。本文將解析HTML的核心概念、標(biāo)簽、屬性以及在實(shí)際Java Web開(kāi)發(fā)中的應(yīng)用，旨在幫助新手入門(mén)掌握HTML的使用技巧。下面我們先了解一下什么是B/S框架.
🌍一.B/S 軟件開(kāi)發(fā)架構(gòu)簡(jiǎn)述
- B/S框架，意思是前端(Browser 瀏覽器)和服務(wù)器端(Server)組成的系統(tǒng)的框架結(jié)構(gòu)。
- B/S架構(gòu)也可理解為web架構(gòu)，包含前端、后端、數(shù)據(jù)庫(kù)三大組成部分。
- 示意圖
- 前端開(kāi)發(fā)技術(shù)工具包括三要素：HTML、CSS 和 JavaScript，還有很多高級(jí)的前端框架，比如bootstrap、jquery，VUE 等。
- 后端開(kāi)發(fā)技術(shù)工具主要有：Net、JAVA、PHP, Go 等
- 數(shù)據(jù)庫(kù)主流的三種關(guān)系型數(shù)據(jù)庫(kù)：Mysql、SQLserver、Oracle ，還有 Nosql 非關(guān)系型數(shù)據(jù)庫(kù)：Redis、Mogodb 等。
🌍二.HTML 介紹
??2.1 官方文檔
首先給大家推薦一個(gè)學(xué)習(xí)網(wǎng)站https://www.w3school.com.cn/html/index.asp
??2.2 網(wǎng)頁(yè)的組成
- 結(jié)構(gòu)(HTML)·HTML是網(wǎng)頁(yè)內(nèi)容的載體。內(nèi)容就是網(wǎng)頁(yè)制作者放在頁(yè)面上想要讓用戶瀏覽的信息，可以包含文字、圖片、視頻等。
- 表現(xiàn)(CSS)·CSS樣式是表現(xiàn)。就像網(wǎng)頁(yè)的外衣。比如，標(biāo)題字體、顏色變化，或?yàn)闃?biāo)題加入背景圖片、邊框等。所有這些用來(lái)改變內(nèi)容外觀的東西稱之為表現(xiàn)。
- 行為(JavaScript/JQuery)·JavaScript是用來(lái)實(shí)現(xiàn)網(wǎng)頁(yè)上的特效效果。如：鼠標(biāo)滑過(guò)彈出下拉菜單。或鼠標(biāo)滑過(guò)表格的背景顏色改變。還有購(gòu)物網(wǎng)站中圖片的輪換?？梢赃@么理解，有動(dòng)畫(huà)的，有交互的一般都是用JavaScript來(lái)實(shí)現(xiàn)的
??2.3 HTML 是什么
- HTML（HyperText Mark-up Language）即超文本標(biāo)簽語(yǔ)言(可以展示的內(nèi)容類型很多)
- HTML 文本是由 HTML 標(biāo)簽組成的文本，可以包括文字、圖形、動(dòng)畫(huà)、聲音、表格、鏈接等
- HTML 的結(jié)構(gòu)包括頭部（Head）、主體（Body）兩大部分，其中頭部描述瀏覽器所需的信息，而主體則包含所要說(shuō)明的具體內(nèi)容。
??2.4html基本結(jié)構(gòu)
<!--文檔類型說(shuō)明 注釋 -->
<!DOCTYPE html>
<!--使用語(yǔ)言的地區(qū) en 表示英國(guó)美國(guó) en-US-->
<html lang="en">
<!--html 頭-->
<head>
<!--charset 文件的字符集-->
<meta charset="UTF-8">
<!--文件標(biāo)題-->
<title>csdn</title>
</head>
<!--body 體，主體部分-->
<body>
<!--內(nèi)容-->
hello
</body>
</html>
- HTML 文件不需要編譯，直接由瀏覽器進(jìn)行解析執(zhí)行
- 可以選擇的瀏覽器，是你電腦安裝有的瀏覽器, 如果沒(méi)有安裝這個(gè)瀏覽器，會(huì)報(bào)錯(cuò)
🌍三.HTML標(biāo)簽
1.html 的標(biāo)簽/元素-說(shuō)明
- HTML 標(biāo)簽用兩個(gè)尖括號(hào)
<>括起來(lái) - HTML 標(biāo)簽一般是雙標(biāo)簽，如
<b>和</b>前一個(gè)標(biāo)簽是起始標(biāo)簽, 后一個(gè)標(biāo)簽為結(jié)束標(biāo)簽 - 兩個(gè)標(biāo)簽之間的文本是 html 元素的內(nèi)容
- 某些標(biāo)簽稱為"單標(biāo)簽",因?yàn)樗恍鑶为?dú)使用就能完整地表達(dá)意思,如
<br/> <hr/> - HTML 元素指的是從開(kāi)始標(biāo)簽到結(jié)束標(biāo)簽的所有代碼。
2. html 標(biāo)簽注意事項(xiàng)和細(xì)節(jié)
標(biāo)簽使用細(xì)節(jié):
- 標(biāo)簽不能交叉嵌套
- 標(biāo)簽必須正確關(guān)閉
- 注釋不能嵌套
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)簽使用細(xì)節(jié)</title>
</head>
<body>
<!--標(biāo)簽不能交叉嵌套-->
<!--<div><span>tom</div></span> 錯(cuò)誤用法-->
<div><span>tom</span></div>
<!--標(biāo)簽必須正確關(guān)閉-->
<span>jack</span>
<!--注釋不能嵌套 -->
<font color="red">張飛</font>
<font color=blue>關(guān)羽</font>
<br/>
</body>
</html>
3.font 字體標(biāo)簽
font 標(biāo)簽是字體標(biāo)簽,它可以用來(lái)修改文本的字體,顏色,大小(尺寸)
(1)color 屬性修改顏色
(2)face 屬性修改字體
(3)size 屬性修改文本大小
應(yīng)用實(shí)例 ：在網(wǎng)頁(yè)上顯示 北京 ，并修改字體為 微軟雅黑，顏色為藍(lán)色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>font 標(biāo)簽</title>
</head>
<body>
<font color="blue" face="微軟雅黑" size="3">北京</font>
</body>
</html>
4.標(biāo)題標(biāo)簽
h1 - h6 都是標(biāo)題標(biāo)簽
h1 : 最大 h6 : 最小
align: 屬性是對(duì)齊屬性
left: 左對(duì)齊(默認(rèn))
center :居中
right : 右對(duì)齊
代碼演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>標(biāo)題標(biāo)簽</title>
</head>
<body>
<h1 align="left">標(biāo)題 1</h1>
<h2 align="center">標(biāo)題 2</h2>
<h3 align="right">標(biāo)題 3</h3>
<h4>標(biāo)題 4</h4>
<h5>標(biāo)題 5</h5>
<h6>標(biāo)題 6</h6>
</body>
</html>
5.超鏈接標(biāo)簽
超鏈接是指從一個(gè)網(wǎng)頁(yè)指向一個(gè)目標(biāo)的鏈接關(guān)系，這個(gè)目標(biāo)可以是另一個(gè)網(wǎng)頁(yè)，也可以是相同網(wǎng)頁(yè)上的不同位置，還可以是一個(gè)圖片，一個(gè)電子郵件地址，一個(gè)文件，甚至是一個(gè)應(yīng)用程序。
- a 標(biāo)簽是 超鏈接
- href 屬性設(shè)置連接的地址
- target 屬性設(shè)置哪個(gè)目標(biāo)進(jìn)行跳轉(zhuǎn)
- _self : 表示當(dāng)前頁(yè)面(默認(rèn)值)
- _blank : 表示打開(kāi)新頁(yè)面來(lái)進(jìn)行跳轉(zhuǎn)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>超鏈接標(biāo)簽</title>
</head>
<body>
<a href="https://www.sohu.com">搜狐</a><br/>
<a href="https://www.sohu.com" target="_self">搜狐_self</a><br/>
<a href="https://www.sohu.com" target="_blank">搜狐_blank</a><br/>
<a href="mailto:abc@163.com? subject=hello">abc@163.com</a><br/>
</body>
</html>
6.圖像標(biāo)簽
img: 標(biāo)簽是圖片標(biāo)簽,用來(lái)顯示圖片
src: 屬性可以設(shè)置圖片的路徑
width: 屬性設(shè)置圖片的寬度
height: 屬性設(shè)置圖片的高度
border: 屬性設(shè)置圖片邊框大小
alt: 屬性設(shè)置當(dāng)指定路徑找不到圖片時(shí),用來(lái)代替顯示的文本內(nèi)容
相對(duì)路徑:從工程名開(kāi)始算
絕對(duì)路徑:盤(pán)符:/目錄/文件名
在 web 中路徑分為相對(duì)路徑和絕對(duì)路徑兩種:
- 相對(duì)路徑:
.表示當(dāng)前文件所在的目錄,..表示當(dāng)前文件所在的上一級(jí)目錄,文件名 : 表示當(dāng)前文件所在目錄的文件,相當(dāng)于./文件名./可以省略. - 絕對(duì)路徑: 正確格式是:
http://IP 地址:port/工程名/資源路徑,錯(cuò)誤格式是: 盤(pán)符:/目錄/文件名.
應(yīng)用實(shí)例：使用 img 標(biāo)簽顯示一張美女的照片。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖像標(biāo)簽</title>
</head>
<body>
<!-- 如果只是指定 width 或者 height 瀏覽器會(huì)按比例顯示，不會(huì)變形 -->
<img src="x.png" width="300" border="1" alt="美女找不到"/><hr />
<img src="../1.png" width="300" border="1" alt="美女找不到"/><hr />
<img src="../aaa/1.png" width="100" border="1" alt="美女找不到"/><hr />
<!-- 如果同時(shí)指定 width height 自己要計(jì)算，否則圖像會(huì)變形 -->
<img src="../aaa/1.png" width="200" height="80" alt="美女找不到"/><hr />
</body>
</html>
7.表格標(biāo)簽
table： 標(biāo)簽是表格標(biāo)簽
border： 設(shè)置表格標(biāo)簽
width： 設(shè)置表格寬度
height： 設(shè)置表格高度
align： 設(shè)置表格相對(duì)于頁(yè)面的對(duì)齊方式
cellspacing： 設(shè)置單元格間距
tr ：是行標(biāo)簽
th ：是表頭標(biāo)簽
td ：是單元格標(biāo)簽
align： 設(shè)置單元格文本對(duì)齊方式
b ：是加粗標(biāo)簽
合并列 : colspan=“列數(shù)”
合并行 : rowspan=“行數(shù)”
cellspacing : 指定單元格間的空隙大小 :0 表示沒(méi)有空隙
bordercolor: 指定表格邊框的演示
例題：
代碼演示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格(跨行跨列)</title>
</head>
<body>
<table border="1px" bordercolor="#E87EFA" cellspacing="0"
width="400px">
<tr>
<td align=center colspan="3">星期一菜譜</td>
</tr>
<tr>
<td rowspan=2>素菜</td>
<td>青草茄子</td>
<td>花椒扁豆</td>
</tr>
<tr>
<td>小蔥豆腐</td>
<td>炒白菜</td>
</tr>
<tr>
<td rowspan=2>葷菜</td>
<td>油悶大蝦</td>
<td>海參魚(yú)翅</td>
</tr>
<tr>
<td>紅燒肉<img width="100px" src="../2.png"/></td>
<td>烤全羊</td>
</tr>
</table>
</body>
</html>
8.div標(biāo)簽
- 標(biāo)簽可以把文檔分割為獨(dú)立的、不同的部分
- 是一個(gè)塊級(jí)元素。它的內(nèi)容自動(dòng)地開(kāi)始一個(gè)新行。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>div 標(biāo)簽</title>
</head>
<body>
hello,world
<div>
<h3 style="color: blue">this is a h3</h3>
<a href="http://www.baidu.com">goto 百度</a>
</div>
</body>
</html>
9.p標(biāo)簽
-
標(biāo)簽定義段落
- p 元素會(huì)自動(dòng)在其前后創(chuàng)建一些空白。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>段落標(biāo)簽</title>
</head>
<body>
hello,world
<p>段落 1</p>
<p>段落 2</p>
<p>段落 3</p>
</body>
</html>
10.span標(biāo)簽
- span 標(biāo)簽是內(nèi)聯(lián)元素，不像塊級(jí)元素（如：div 標(biāo)簽、p 標(biāo)簽等）有換行的效果。
- 如果不對(duì) span 應(yīng)用樣式，span 標(biāo)簽沒(méi)有任何的顯示效果
- 語(yǔ)法：內(nèi)容
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>span 標(biāo)簽</title>
</head>
<body>
您的購(gòu)物車有<sapn style="color: red;font-size: 40px">10</sapn>個(gè)商品
</body>
</html>
11.表單
form 標(biāo)簽就是表單
input type=text : 是文件輸入框 value 設(shè)置默認(rèn)顯示內(nèi)容
input type=password 是密碼輸入框 value 設(shè)置默認(rèn)顯示內(nèi)容
input type=radio 是單選框 name 屬性可以對(duì)其進(jìn)行分組
checked="checked"表示默認(rèn)選中 input
type=checkbox 是復(fù)選框 checked="checked"表示默認(rèn)選中
input type=reset 是重置按鈕 value 屬性修改按鈕上的文本
input type=submit 是提交按鈕 value 屬性修改按鈕上的文本
input type=button 是按鈕 value 屬性修改按鈕上的文本
input type=file 是文件上傳域
input type=hidden 是隱藏域,當(dāng)我們要發(fā)送某些信息，而這些信息，不需要用戶參與，就可以使用隱藏（提交的時(shí)候同時(shí)發(fā)送給服務(wù)器）
select 標(biāo)簽是下拉列表框
option 標(biāo)簽是下拉列表框中的選項(xiàng)
selected="selected"設(shè)置默認(rèn)選中
textarea 表示多行文本輸入框 （起始標(biāo)簽和結(jié)束標(biāo)簽中的內(nèi)容是默認(rèn)值）
rows 屬性設(shè)置可以顯示幾行的高度
cols 屬性設(shè)置每行可以顯示幾個(gè)字符寬度
注意事項(xiàng)
- 一定一定使用 form 標(biāo)簽將 input 元素包起來(lái)
- 一定一定要給 input 元素設(shè)置 name 屬性，否則，數(shù)據(jù)提交不到服務(wù)器
- checkbox 是復(fù)選框，如果希望是同一組 保證 name 屬性一致
- 在 checkbox select radio 提交數(shù)據(jù)的時(shí)候是 value 屬性的值
下面我們看一下題目:
代碼演示:
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表單綜合案例</title>
</head>
<body>
<h1>用戶注冊(cè)信息</h1>
<form action="ok.html" method="get">用戶名稱：<input type="text" name="username"><br/>用戶密碼：<input type="password" name="password"><br/>確認(rèn)密碼：<input type="password" name="password"><br/>請(qǐng)選擇你喜歡的運(yùn)動(dòng)項(xiàng)目：<br/><input type="checkbox" name="sport" value="籃球">籃球<br/><input type="checkbox" name="sport" value="足球" checked>足球<br/><input type="checkbox" name="sport" value="手球">手球<br/>請(qǐng)選擇你的性別：<br/><input type="radio" name="gender" value="male">男<br/><input type="radio" name="gender" value="female">女<br/>請(qǐng)選擇你喜歡的城市：<br/><select name="city"><option value="ah" >安徽</option><option value="jx">江西</option><option value="bj">北京</option></select><br/>自我介紹：<textarea rows="6" cols="20"></textarea><br/>選擇你的文件<input type="file" name="myfile"><br/><input type="submit" value="登錄"><input type="reset" value="重置">
</form>
</body>
</html>
表單提交注意事項(xiàng):
-
action 屬性設(shè)置提交的服務(wù)器地址/資源
-
method 屬性設(shè)置提交的方式 GET(默認(rèn)值)或 POST
-
表單提交的時(shí)候，數(shù)據(jù)沒(méi)有發(fā)送給服務(wù)器的三種情況：
(1)表單某個(gè)元素項(xiàng)(比如 text,password)沒(méi)有 name 屬性值
(2)單選、復(fù)選（下拉列表中的 option 標(biāo)簽）都需要添加 value 屬性，以便發(fā)送給服務(wù)器中
(3)表單項(xiàng)不在提交的 form 標(biāo)簽
GET 請(qǐng)求的特點(diǎn)是：
(1)瀏覽器地址欄中的地址是： 請(qǐng)求參數(shù)的格式是 action 屬性[+?+請(qǐng)求參數(shù)] ：
name=value&name=valuehttp://localhost:63342/html/ok.htmlusername=jack&pwd1=111&pwd2=11&sport=lq&sport=sq&gender= male&city=bj&myfile=
(2)不安全
(3)它有數(shù)據(jù)長(zhǎng)度的限制(不同的瀏覽器規(guī)定不一樣，一般 2k)
POST 請(qǐng)求的特點(diǎn)是：
(1) 瀏覽器地址欄中只有 action 屬性值, 提交的數(shù)據(jù)是攜帶在 http 請(qǐng)求中, 不會(huì)展示在地
址欄
(2) 相對(duì)于 GET 請(qǐng)求要安全
(3) 理論上沒(méi)有數(shù)據(jù)長(zhǎng)度的限制
結(jié)語(yǔ)
通過(guò)本文的深度解析，相信大家對(duì)HTML在Java Web開(kāi)發(fā)中的應(yīng)用有了更加全面的認(rèn)識(shí)。掌握HTML不僅是成為一名優(yōu)秀Java Web開(kāi)發(fā)者的前提，也是構(gòu)建美觀、易用、兼容性強(qiáng)的網(wǎng)頁(yè)的關(guān)鍵。然而，HTML的學(xué)習(xí)之路還很長(zhǎng)，我們需要在實(shí)踐中不斷探索和積累，將理論知識(shí)轉(zhuǎn)化為實(shí)際生產(chǎn)力。
隨著Web技術(shù)的不斷發(fā)展，HTML也在不斷更新迭代，新的特性和標(biāo)簽層出不窮。作為一名開(kāi)發(fā)者，我們要保持學(xué)習(xí)的熱情，緊跟技術(shù)潮流，不斷提升自己的技能水平。最后，祝愿大家在Java Web開(kāi)發(fā)的道路上越走越遠(yuǎn)，創(chuàng)造更多優(yōu)秀的網(wǎng)頁(yè)應(yīng)用！