小男孩‘自慰网亚洲一区二区,亚洲一级在线播放毛片,亚洲中文字幕av每天更新,黄aⅴ永久免费无码,91成人午夜在线精品,色网站免费在线观看,亚洲欧洲wwwww在线观看

搜索
分享

HTML詳解

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

 

  1. JavaWeb課程體系介紹

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

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

開發(fā)要求：

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

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

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

4.掌握J(rèn)S簡單動畫的使用

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

開發(fā)要求：

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

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

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

開發(fā)要求：

1.會使用tomcat.可以將Web項目成功部署到Tomcat下，并通過瀏覽器可以訪問；

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

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

開發(fā)要求：

1.掌握監(jiān)聽器和過濾器的用法,重點會使用過濾器完成實際功能;

2.了解Ajax運行原理,掌握jQuery中的Ajax操作;

  • 第五階段：綜合案例

開發(fā)要求：

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

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

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

 

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

      2.1需求分析

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

 

2.1技術(shù)分析

2.2.1什么是 HTML？

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

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

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

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

靜態(tài)頁面，通過瀏覽器顯示出來的靜態(tài)的頁面。可以和后臺程序組合成項目網(wǎng)站。

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

例如:<br/>

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

<html><!--開始標(biāo)簽-->

<head><!--頭部標(biāo)簽-->

<!--網(wǎng)頁標(biāo)題標(biāo)簽-->

<title>網(wǎng)頁標(biāo)題</title>

</head>

<body><!--網(wǎng)頁內(nèi)容標(biāo)簽-->

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

</body>

</html><!--結(jié)束標(biāo)簽-->

 

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

從h1~h6 逐漸變小

特點：加粗并且加黑顯示，獨占一行，每行與其他行之間有間距

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

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

屬性：color:顏色

  size:粗細(xì)

  width:長度

  1. 段落標(biāo)簽<p></p>

特點：有段前段后間距，獨占一行

  1. 換行：<br/>
  2. 字體標(biāo)簽<font></font>

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

<font 屬性=值>字體內(nèi)容</font>

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

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

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

  1. 注釋：<!--注釋--> 快捷鍵ctrl+/
  2. 加粗<b></b>
  3. 傾斜<i></i>
      1. 步驟分析

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

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

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

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

 

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

      1. 代碼實現(xiàn)

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

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

</head>

<body>

<h2 align="center">品牌故事</h2>

<hr>

<h1>極客營</h1>

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

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

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

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

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

</body>

</html>

 

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

    1. 技術(shù)分析

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

  屬性：

1) src :訪問的圖片的路徑

路徑分為相對路徑和絕對路徑

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

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

上一級目錄：../文件名稱（返回多級，加多個../）

下一級：目錄名稱/文件名稱

  1. 絕對路徑（用的較少）: 指定從盤符到資源文件的完整路徑.

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

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

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

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

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

      1. 步驟分析

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

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

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

      1. 代碼實現(xiàn)

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>頭部圖片顯示頁面</title>

</head>

<body>

<!--logo圖片-->

<img src="../img/logo.png" alt="logo圖片" width="327" height="58" />

<!--header圖片-->

<img src="../img/header.png" alt="header圖片" width="299" height="51">

</body>

</html>

 

 

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

    1. 技術(shù)分析

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

  1. 無序列表

<ul>

<li>CSDN</li>

<li>百度</li>

</ul>

屬性：

type:指定無序列表前項目符號

  1. 有序列表

<ol>

<li>淘寶</li>

<li>阿里巴巴</li>

</ol>

屬性：

type:指定列表項前面的序號（1,a,A,i,I）

reversed:倒敘 html5里有的屬性

start:起始值

 

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

屬性：href:超鏈接的地址

target:指定頁面顯示的位置

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

_blank:打開新頁面

frame的name取值

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>友情鏈接顯示頁面</title>

</head>

<body>

<!--列表項-->

<ul>

<li><a href="http://www.csdn.net">CSDN</a></li>

<li><a href="http://www.baidu.com">百度</a></li>

<li><a href="#">淘寶</a></li>

<li><a href="#">阿里巴巴</a></li>

</ul>

</body>

</html>

 

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

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

    1. 技術(shù)分析

單元格

 

 

 

 

 

 

 

 

 

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

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

<table>

<tr>

<td>單元格1</td>

<td>單元格2</td>

</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:本行文本對其方式 left/center/right

height:行高

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

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

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

 

 

 

 

 

 

 

 

 

 

 

實現(xiàn):

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

跨列：colspan="值"

跨行：rowspan="值"

      1. 步驟分析

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

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

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

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

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

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

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

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

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

      1. 代碼實現(xiàn)

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>網(wǎng)站首頁</title>

</head>

<body>

<!--第一步：8行1列表格-->

<table border="1" width="1300px" align="center">

<!--第一行-->

<tr>

<td height="58">

<!--嵌入一行三列的表格-->

<table border="1" width="100%" height="100%">

<tr>

<td width="40%">

<img src="../img/logo.png">

</td>

<td width="40%">

<img src="../img/header.png">

</td>

<td>

<a href="#"><font color="blue">  登錄  </font></a>

<a href="#"><font color="blue">  注冊  </font></a>

<a href="#"><font color="blue">  購物車  </font></a>

</td>

</tr>

</table>

</td>

</tr>

<!--第二行-->

<tr height="50">

<td bgcolor="black">

<a href="#"><font color="grey" size="4">  首頁  </font></a>

<a href="#"><font color="white" size="3">  手機(jī)數(shù)碼  </font></a>

<a href="#"><font color="grey" size="3">  電腦辦公  </font></a>

<a href="#"><font color="grey" size="3">  電腦辦公  </font></a>

<a href="#"><font color="grey" size="3">  電腦辦公  </font></a>

 

 

</td>

</tr>

<!--第三行-->

<tr>

<td>

<img src="../img/1.jpg" width="100%">

</td>

</tr>

<!--第四行-->

<tr>

<td height="525px">

<!--嵌入3行七列表格-->

<table border="1" width="100%" height="100%">

<tr height="50">

<td colspan="7">

<font size="6">  最新商品     </font>

<img src="../img/title2.jpg">

</td>

 

</tr>

<tr align="center">

<td rowspan="2" width="220px">

<a href="#"><img src="../img/big01.jpg"></a>

</td>

<td colspan="3" width="540" height="236">

<a href="#"><img src="../img/middle01.jpg"></a>

</td>

 

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

</tr>

<tr align="center">

 

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

</tr>

</table>

</td>

</tr>

<!--第五行-->

<tr>

<td>

<img src="../img/ad.jpg" width="100%">

</td>

</tr>

<!--第六行-->

<tr>

<td height="525px">

<!--嵌入3行七列表格-->

<table border="1" width="100%" height="100%">

<tr height="50">

<td colspan="7">

<font size="6">  熱門商品     </font>

<img src="../img/title2.jpg">

</td>

 

</tr>

<tr align="center">

<td rowspan="2" width="220px">

<a href="#"><img src="../img/big01.jpg"></a>

</td>

<td colspan="3" width="540" height="236">

<a href="#"><img src="../img/middle01.jpg"></a>

</td>

 

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

</tr>

<tr align="center">

 

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

<td width="180">

<img src="../img/small03.jpg"><br>

<font size="2">電炒鍋</font><br><br>

<font size="2" color="red">￥299</font>

</td>

</tr>

</table>

</td>

</tr>

<!--第七行-->

<tr>

<td>

<img src="../img/footer.jpg">

</td>

</tr>

<!--第八行-->

<tr align="center">

<td>

<p>

<a href="#"><font size="2" color="blue">關(guān)于我們</font></a>

<a href="#"><font size="2" color="blue">聯(lián)系我們</font></a>

<a href="#"><font size="2" color="blue">招賢納士</font></a>

<a href="#"><font size="2" color="blue">法律聲明</font></a>

<a href="#"><font size="2" color="blue">友情鏈接</font></a>

<a href="#"><font size="2" color="blue">支付方式</font></a>

<a href="#"><font size="2" color="blue">配送方式</font></a>

<a href="#"><font size="2" color="blue">服務(wù)聲明</font></a>

<a href="#"><font size="2" color="blue">廣告聲明</font></a>

</p>

<p>

<font size="2">Copyright ? 2009-2017 極客商城 版權(quán)所有 </font>

</p>

</td>

</tr>

</table>

</body>

</html>

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

    1. 技術(shù)分析

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

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

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

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

 

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

2.frame標(biāo)簽

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

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

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

      1. 步驟分析

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

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

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

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

      1. 代碼實現(xiàn)

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

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>后臺管理</title>

</head>

<frameset rows="20%,*">

<frame src="top.html" />

<!--第二行嵌入一個框架集-->

<frameset cols="25%,*">

<frame src="left.html" />

<frame name="right" src="right.html" />

</frameset>

</frameset>

</html>

 

left.html頁面

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title></title>

</head>

<body>

<ul>

<li><a href="member.html" target="right">會員管理</a></li>

<li><a href="product.html" target="right">商品管理</a></li>

<li><a href="brand.html" target="right">品牌管理</a></li>

<li><a href="type.html" target="right">分類管理</a></li>

</ul>

</body>

</html>

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

    0條評論

    發(fā)表

    請遵守用戶 評論公約

    類似文章 更多