HTML詳解

弘護(hù)正法 2019-09-17

展開(kāi)全文

JavaWeb課程體系介紹

在JavaWeb階段，我們會(huì)帶領(lǐng)學(xué)員經(jīng)歷五個(gè)階段的學(xué)習(xí)，如上圖所示。

第一階段（當(dāng)前課程階段）：前端開(kāi)發(fā)階段

開(kāi)發(fā)要求：

1.可以讀懂UI工程師編寫(xiě)的頁(yè)面，在整個(gè)頁(yè)面中根據(jù)自己的需求填寫(xiě)代碼；

2.可以在指定位置進(jìn)行簡(jiǎn)單內(nèi)容的編寫(xiě)，核心目的在于顯示數(shù)據(jù)；

3.掌握表單內(nèi)容的編寫(xiě)；

4.掌握J(rèn)S簡(jiǎn)單動(dòng)畫(huà)的使用

第二階段：數(shù)據(jù)庫(kù)基礎(chǔ)回顧和進(jìn)階

開(kāi)發(fā)要求：

1.必須會(huì)使用SQL語(yǔ)句進(jìn)行數(shù)據(jù)庫(kù)表操作；

2.會(huì)使用JDBC連接數(shù)據(jù)庫(kù)和數(shù)據(jù)庫(kù)連接池技術(shù)。為之后的框架打基礎(chǔ)

第三階段：服務(wù)端開(kāi)發(fā)

開(kāi)發(fā)要求：

1.會(huì)使用tomcat.可以將Web項(xiàng)目成功部署到Tomcat下，并通過(guò)瀏覽器可以訪問(wèn)；

2.可以進(jìn)行服務(wù)器端程序開(kāi)發(fā)，能夠綜合運(yùn)用JavaWeb技術(shù)開(kāi)發(fā)實(shí)際項(xiàng)目

第四階段：服務(wù)器開(kāi)發(fā)高級(jí)進(jìn)階

開(kāi)發(fā)要求：

1.掌握監(jiān)聽(tīng)器和過(guò)濾器的用法,重點(diǎn)會(huì)使用過(guò)濾器完成實(shí)際功能;

2.了解Ajax運(yùn)行原理,掌握jQuery中的Ajax操作;

第五階段：綜合案例

開(kāi)發(fā)要求：

1.掌握J(rèn)avaWeb開(kāi)發(fā)基本流程

2.linux操作系統(tǒng)的使用

3.掌握項(xiàng)目中的郵件發(fā)送、支付功能、緩存等技術(shù)的應(yīng)用。

2.網(wǎng)站信息頁(yè)面顯示案例

2.1需求分析

[案例一] 實(shí)現(xiàn)示例網(wǎng)站中 [公司簡(jiǎn)介] 頁(yè)面的制作

2.1技術(shù)分析

2.2.1什么是 HTML？

超文本標(biāo)記語(yǔ)言: Hyper Text Markup Language

超文本: 功能比普通的文本更加的強(qiáng)大.

標(biāo)記語(yǔ)言: 使用一組標(biāo)簽對(duì)內(nèi)容進(jìn)行描述的語(yǔ)言,它不是編程語(yǔ)言.是一種解釋性的語(yǔ)言。

1. 1. 為什么學(xué)習(xí) HTML？

靜態(tài)頁(yè)面，通過(guò)瀏覽器顯示出來(lái)的靜態(tài)的頁(yè)面?？梢院秃笈_(tái)程序組合成項(xiàng)目網(wǎng)站。

1. 1. HTML 的語(yǔ)法和規(guī)范
Html 文件都是以 .html 或者.htm 結(jié)尾.建議使用.html
Html文件分為頭部<head></head> 和主體<body></body>組成的.
Html標(biāo)簽都是由開(kāi)始標(biāo)簽和結(jié)束標(biāo)簽組成的（除自閉合標(biāo)簽）

例如:

Html 標(biāo)簽忽略大小寫(xiě)，建議使用小寫(xiě)形式。
Html源碼中忽略空格和換行
1. HTML 入門(mén)

</head>

網(wǎng)頁(yè)的主體內(nèi)容

</body>

</html>

1. HTML 排版標(biāo)簽
標(biāo)題標(biāo)簽

從h1~h6 逐漸變小

特點(diǎn)：加粗并且加黑顯示，獨(dú)占一行，每行與其他行之間有間距

屬性：align:取值 left(默認(rèn))/right/center

水平線標(biāo)簽<hr/>

屬性：color:顏色

size:粗細(xì)

width:長(zhǎng)度

段落標(biāo)簽

特點(diǎn)：有段前段后間距，獨(dú)占一行

換行：
字體標(biāo)簽

必須結(jié)合屬性使用

字體內(nèi)容

屬性: color：字體的顏色,可以使用英文單詞或者16進(jìn)制

size：字體大小 1 2 3 4 +1 +2 +3 -1 -2 -3 … point=1/72英寸

face：設(shè)置字體 (黑體 ,楷體,華文隸書(shū)… )在系統(tǒng)中存在的字體

注釋?zhuān)?lt;!--注釋--> 快捷鍵ctrl+/
加粗
傾斜
1. 1. 步驟分析

第一步: 創(chuàng)建一個(gè)Html文件

第二步: 創(chuàng)建一個(gè)標(biāo)題標(biāo)題顯示極客營(yíng)

第三步: 創(chuàng)建四個(gè)段落的標(biāo)簽,分別顯示文字內(nèi)容.

第四步: 對(duì)文字內(nèi)容進(jìn)行完善(加粗變色等等)

補(bǔ)充:特殊符號(hào) ( 空格 < > 等)

1. 1. 代碼實(shí)現(xiàn)

<!DOCTYPE html>

<html>

<head>

<title>網(wǎng)站信息顯示</title>

</head>

<body>

<hr>

極客營(yíng)---是基于多年培訓(xùn)、實(shí)訓(xùn)基礎(chǔ)之上累積而成的IT精英教育連鎖品牌。自成立以來(lái)，一直致力于精英化培訓(xùn)，施行高質(zhì)量教學(xué)、高品質(zhì)服務(wù)、高薪就業(yè)這一“三高”標(biāo)準(zhǔn)，全面打造IT精英團(tuán)隊(duì)。為推動(dòng)“互聯(lián)網(wǎng)+”、“大眾創(chuàng)業(yè)、萬(wàn)眾創(chuàng)新”這一國(guó)家級(jí)新興戰(zhàn)略培育優(yōu)質(zhì)人才，孕育領(lǐng)軍人物；經(jīng)過(guò)多年發(fā)展，極客營(yíng)人才實(shí)訓(xùn)連鎖基地已發(fā)展成為國(guó)內(nèi)IT研發(fā)培訓(xùn)領(lǐng)導(dǎo)品牌。

企業(yè)定位：極客營(yíng)專(zhuān)業(yè)從事于IT類(lèi)人才實(shí)訓(xùn)和人力資源解決方案。我們的成功源自于不懈地幫助學(xué)員提高IT技術(shù)，增加社會(huì)核心競(jìng)爭(zhēng)力乃至提升生活品質(zhì)；幫助合作伙伴解決人才培育培養(yǎng)問(wèn)題，定制化各類(lèi)人才解決方案。

企業(yè)使命：為提高學(xué)員技能而努力創(chuàng)新，提供最優(yōu)秀、最具創(chuàng)新性的 IT教育產(chǎn)品，像對(duì)待生命一樣致力于IT教學(xué)創(chuàng)新，讓更多的人獲得更新、更好的IT教育。

價(jià)值觀念極客營(yíng)及所有教職員工鄭重承諾，以下四個(gè)核心價(jià)值觀是我們一切工作的基礎(chǔ)：，成就學(xué)員——致力于學(xué)員的滿(mǎn)意度與口碑，創(chuàng)業(yè)創(chuàng)新—— 追求教學(xué)質(zhì)量和效率，專(zhuān)注于對(duì)學(xué)員和公司有影響的創(chuàng)新，精準(zhǔn)求實(shí)—— 基于高質(zhì)量教學(xué)與高薪就業(yè)，誠(chéng)信正直——建立信任與高性能的伙伴關(guān)系，秉承銳意創(chuàng)新與追求卓越的傳統(tǒng)，極客營(yíng)將是一個(gè)具有競(jìng)爭(zhēng)力的IT教育先鋒。

品牌精神：合作、共贏、創(chuàng)新、成就。

</body>

</html>

網(wǎng)站圖片顯示頁(yè)面案例
1. 需求分析

1. 技術(shù)分析

1.<img/>標(biāo)簽

屬性：

1) src :訪問(wèn)的圖片的路徑

路徑分為相對(duì)路徑和絕對(duì)路徑

相對(duì)路勁: 指定相對(duì)于當(dāng)前文件的資源文件位置.

當(dāng)前目錄：直接寫(xiě)文件名稱(chēng)(文件名稱(chēng)包括后綴名稱(chēng) .jpg .gif 等)

上一級(jí)目錄：../文件名稱(chēng)（返回多級(jí)，加多個(gè)../）

下一級(jí)：目錄名稱(chēng)/文件名稱(chēng)

絕對(duì)路徑（用的較少）: 指定從盤(pán)符到資源文件的完整路徑.

2) width：設(shè)置圖片的寬度

3)height：設(shè)置圖片的高度

一般情況下，設(shè)置圖片的width和height，防止布局亂

)alt：當(dāng)圖片無(wú)法正常顯示的時(shí)候給出的提示信息，它的顯示效果與瀏覽器有關(guān)

5)title: 鼠標(biāo)移到圖片時(shí)，顯示的提示信息

1. 1. 步驟分析

第一步：創(chuàng)建一個(gè) html 文件

第二步：創(chuàng)建一個(gè)圖片標(biāo)簽顯示 logo 圖片

第三步：創(chuàng)建一個(gè)圖片標(biāo)簽顯示 header 圖片

1. 1. 代碼實(shí)現(xiàn)

<!DOCTYPE html>

<html>

<head>

<title>頭部圖片顯示頁(yè)面</title>

</head>

<body>

</body>

</html>

網(wǎng)站友情鏈接顯示頁(yè)面案例
1. 需求分析

1. 技術(shù)分析

【HTML的列表標(biāo)簽】

無(wú)序列表

<ul>

</ul>

屬性：

type:指定無(wú)序列表前項(xiàng)目符號(hào)

有序列表

<ol>

</ol>

屬性：

type:指定列表項(xiàng)前面的序號(hào)（1,a,A,i,I）

reversed:倒敘 html5里有的屬性

start:起始值

超鏈接標(biāo)簽<a></a>

屬性：href:超鏈接的地址

target:指定頁(yè)面顯示的位置

_self:默認(rèn)取值，覆蓋當(dāng)前頁(yè)面本身

_blank:打開(kāi)新頁(yè)面

frame的name取值

1. 1. 步驟分析
創(chuàng)建一個(gè)無(wú)序列表
使用超鏈接標(biāo)簽包含文本
1. 1. 代碼實(shí)現(xiàn)

<!DOCTYPE html>

<html>

<head>

<title>友情鏈接顯示頁(yè)面</title>

</head>

<body>

<ul>

</ul>

</body>

</html>

網(wǎng)站首頁(yè)顯示案例
1. 需求分析

網(wǎng)站首頁(yè)顯示頁(yè)面

1. 技術(shù)分析

單元格

1.HTML的表格標(biāo)簽

1) 表格標(biāo)簽（組合標(biāo)簽）：

<table>

<tr>

</tr>

</table>

2) 表格的屬性：

table標(biāo)簽上

border ：表格邊框

width ：表格寬度

height ：表格高度

align ：水平方向?qū)R方式 left/ center/ right

bgcolor ：背景色

cellspacing : 單元格與單元格之間的間距

cellpadding : 單元格與內(nèi)容的填充

tr標(biāo)簽上的屬性

bgcolor:背景色

align:本行文本對(duì)其方式 left/center/right

height:行高

td標(biāo)簽上屬性與tr屬性類(lèi)似

valign:垂直對(duì)其方式，這是td所特有的屬性。（top,center,bottom）

2.HTML的表格跨行跨列操作】

實(shí)現(xiàn):

在td標(biāo)簽上使用下面的屬性

跨列：colspan="值"

跨行：rowspan="值"

1. 1. 步驟分析

第一步：網(wǎng)站首頁(yè)分為八行一列的表格

第二步：實(shí)現(xiàn)第一行頭部：（一行三列表格）

第三步：實(shí)現(xiàn)第二行（用font，a實(shí)現(xiàn)）

第四步：實(shí)現(xiàn)第三行（靜態(tài)圖片）

第五步：實(shí)現(xiàn)第四行（嵌入一個(gè)三行七列的表格）

第六步：實(shí)現(xiàn)第五行（插入圖片）

第七步：實(shí)現(xiàn)第六行：復(fù)制第四行內(nèi)容

第八步：實(shí)現(xiàn)第七行（插入圖片）

第九步：實(shí)現(xiàn)第八行（寫(xiě)文本標(biāo)簽）

1. 1. 代碼實(shí)現(xiàn)

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<tr>

<tr>

</td>

</td>

<td>

</td>

</tr>

</table>

</td>

</tr>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

最新商品

</td>

</tr>

</td>

</td>

電炒鍋

￥299

</td>

電炒鍋

￥299

</td>

電炒鍋

￥299

</td>

</tr>

電炒鍋

￥299

</td>

電炒鍋

￥299

</td>

電炒鍋

￥299

</td>

電炒鍋

￥299

</td>

電炒鍋

￥299

</td>

電炒鍋

￥299

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<tr>

熱門(mén)商品

</td>

</tr>

</td>

</td>

電炒鍋

￥299

</td>

電炒鍋

￥299

</td>

電炒鍋

￥299

</td>

</tr>

電炒鍋

￥299

</td>

電炒鍋

￥299

</td>

電炒鍋

￥299

</td>

電炒鍋

￥299

</td>

電炒鍋

￥299

</td>

電炒鍋

￥299

</td>

</tr>

</table>

</td>

</tr>

<tr>

<td>

</td>

</tr>

<td>

</td>

</tr>

</table>

</body>

</html>

網(wǎng)站后臺(tái)管理頁(yè)面案例
1. 需求分析

1. 技術(shù)分析

1.框架集標(biāo)簽<frameset></frameset>

作用：將頁(yè)面進(jìn)行區(qū)域的劃分

屬性：cols="20%,*" 垂直分割成多列，取值可以是百分比，可以是數(shù)值，其中一個(gè)可以是*。

rows="" 水平分割成多行，取值可以是百分比，可以是數(shù)值，其中一個(gè)可以是*。

注意事項(xiàng)：應(yīng)用該標(biāo)簽時(shí)，頁(yè)面中不能包含body標(biāo)簽
frameset可以進(jìn)行嵌套使用，完成較復(fù)雜的頁(yè)面分割

2.frame標(biāo)簽

作用：在每個(gè)區(qū)域中使用frame標(biāo)簽顯示頁(yè)面

屬性：src指定該區(qū)域顯示的頁(yè)面地址

name:為區(qū)域起名，配合a標(biāo)簽上的target使用。

1. 1. 步驟分析

第一步：創(chuàng)建頁(yè)面"后臺(tái)管理系統(tǒng)頁(yè)面.html"

第二步：使用frameset標(biāo)簽將頁(yè)面進(jìn)行劃分成top，left，rigth三部分，為right部分frame添加name屬性

第三步：分別創(chuàng)建top.html，left.html，right.html等頁(yè)面

第四步：在left.html中創(chuàng)建列表和超鏈接文本，添加target屬性。

1. 1. 代碼實(shí)現(xiàn)

后臺(tái)管理系統(tǒng)顯示頁(yè)面.html代碼

<!DOCTYPE html>

<html>

<head>

</head>

</frameset>

</html>

left.html頁(yè)面

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<ul>

</ul>

</body>

</html>

本站是提供個(gè)人知識(shí)管理的網(wǎng)絡(luò)存儲(chǔ)空間，所有內(nèi)容均由用戶(hù)發(fā)布，不代表本站觀點(diǎn)。請(qǐng)注意甄別內(nèi)容中的聯(lián)系方式、誘導(dǎo)購(gòu)買(mǎi)等信息，謹(jǐn)防詐騙。如發(fā)現(xiàn)有害或侵權(quán)內(nèi)容，請(qǐng)點(diǎn)擊一鍵舉報(bào)。

轉(zhuǎn)藏 分享

QQ空間 QQ好友新浪微博微信

獻(xiàn)花（0） +1

來(lái)自：弘護(hù)正法 > 《電腦技術(shù)》

舉報(bào)/認(rèn)領(lǐng)