HTML基礎入門

前言

在程序的世界裏，有着這麼一羣人，我們稱他們爲“程序員”或“工程師”。他們可以不會流利的英語，卻可以華麗的使用26字母和字符。他們可以不精通高等數學，卻可以玩轉衆多邏輯和算法。他們賦予了冷血的機器以生命，他們改變了五彩的世界更多彩。

年輕人，從今天開始，你將加入程序員大家族。使用自己的五指敲出自己的摩天大樓。世界因你而改變，你因今天而騰飛。不懼艱難，勇往直前，如此優秀的你，還有什麼可以阻擋你成功的腳步。披荊斬棘，所向披靡，才華橫逆的你，正走在輝煌人生的大道上。

HTML基礎入門

今日內容介紹

u 使用html的排版標籤編寫“網站信息頁面”

u 使用html的圖片標籤編寫“圖片顯示頁面”

u 使用html的列表標籤編寫“友情鏈接頁面”

u 使用html的表格標籤編寫“首頁”

u 使用html的框架標籤表現“後臺頁面”

今日內容學習目標

u 能夠使用<table><tr><td>進行簡單頁面佈局

u 能夠使用<a>完成多個頁面之間切換

u 能夠使用<img/>顯示指定位置的圖片

u 能夠使用<frameset><frame>標籤繪製上左右框架結構

u 能夠看懂<p><h1><i>等標籤修飾文字信息

u 能夠看懂<ul><li>進行列表信息的展示

今日學習標籤總覽

一天的學習需要使用衆多獨立沒有關聯的標籤，爲了大家更好的吸收，現給出標籤總覽，以“重要程度”排序。例如：“表格標籤”爲今天最重要的標籤。

第1章網站信息頁面顯示

1.1 案例需求:

通常在一個網站中都會有關於公司的介紹,那麼我們就來完成這樣的案例

當然，大家現在還不知道怎麼來完成這個案例，因爲這個案例中需要使用很多HTML中的標籤。

1.2 相關知識點

1.2.1 HTML的概述

1.2.1.1 什麼是HTML

HTML：超級文本標記語言（HyperText Markup Language）

l “超文本”就是指頁面內可以包含圖片、鏈接等非文字內容。

l “標記”就是使用標籤的方法將需要的內容包括起來。例如：<a>www.itcast.cn</a>

1.2.1.2 HTML能幹什麼

HTML用於編寫網頁。平時上網通過瀏覽器我們看到的大部分頁面都是由html編寫的。在瀏覽器訪問網頁時，可以通過“右鍵/查看網頁源代碼”看到具體的html代碼。

網頁內容包含：HTML代碼、CSS代碼、JavaScript代碼等內容。

l HTML代碼：用於展示需要顯示的數據。

l CSS代碼：使顯示的數據更佳好看。

l JavaScript代碼：使整個頁面顯示的數據具有動畫效果。

網頁根據內容是否改變分爲：靜態頁面、動態頁面

l 靜態頁面：編寫之後在瀏覽器不再改變的網頁。HTML就是用於編寫靜態網頁的。

l 動態頁面：會根據不同的情況展示不同的內容。例如：登錄成功後右上角顯示用戶名。

1.2.1.3 HTML語言特點

n HTML文件不需要編譯，直接使用瀏覽器閱讀即可

n HTML文件的擴展名是*.html 或 *.htm

n HTML結構都是由標籤組成

u 標籤名預先定義好的，我們只需要瞭解其功能即可。

u 標籤名不區分大小寫

u 通常情況下標籤由開始標籤和結束標籤組成。例如：<a></a>

u 如果沒有結束標籤，建議以/結尾。例如：<img />

n HTML結構包括兩部分：頭head和體body

1.2.1.4 創建模板

1. 在任意位置（F盤根目錄），創建“文本文檔”，重命名“00.模板.html”

文件名自定義，擴展名爲html。00.template1表示意思今天案例前的模板1頁面。

2. 右鍵/打開方式/記事本，開發html文件，並編寫如下內容

<html>

<head>

</head>

<body>

這裏是正文

</body>

</html>

以上使用的標籤組成了HTML頁面的基本結構，現將所有標籤進行陳述：

l <html> 整個頁面的根標籤，理論上一個頁面只需要一個，由頭和體組成。

n <head> 頭標籤，用於引入腳本、導入樣式、提供元信息等。一般情況下頭標籤的內容在瀏覽器端都不顯示。

u <title>子標籤，用於顯示瀏覽器標題。

n <body> 體標籤，是整個網頁的主體，我們編寫的html代碼基本都在此標籤體內。

3. 使用瀏覽器打開

1.2.1.5 環境搭建

使用“記事本”開發效率低，現階段比較流程的前端IDE（集成開發環境）是HBuilder，爲了統一環境，要求所有同學的都安裝HBuilder，參考“1.HBuilder安裝.doc”

提供模板代碼，使用“HBuilder”創建01.模板.html頁面。

<!DOCTYPE html>

<html>

<head>

</head>

<body>

正文

</body>

</html>

在模板代碼中，我們使用到了HTML註釋

l 格式：<!—註釋內容 -->

l 註釋特點：

n 瀏覽器查看時，不顯示。右鍵查看源碼可以看到。

n 註釋標籤不能嵌套。

n 註釋特殊用法，爲不同的瀏覽器提供不同的解決方案（瞭解）

1.2.2 案例相關標籤

本案例中需要使用的標籤如下：

l <h1></h1>

l <hr />

l <font>

l <b></b>

l <i></i>

l <p></p>

l <br />

下面我們開始一個一個的介紹，爲了方便演示，創建一個“01.demo.html”文件

1.2.2.1 標題標籤：<h1>

HTML提供<hn>系列標籤，用於修飾標題，包含：<h1>、<h2>、<h3>、<h4>、<h5>、<h6>。<h1> 定義最大的標題。<h6> 定義最小的標題

例如：

<h2>Java學院</h2>

1.2.2.2 標題標籤： <hr>

<hr /> 標籤在 HTML 頁面中創建一條水平分隔線，用於定義內容中的主題變化。

size屬性：水平線的高度，單位像素

noshade屬性：沒有陰影，取值：noshade，表示顯示純色

例如：

<hr />

1.2.2.3 字體標籤：<font>

<font> 用於設置字體尺寸、字體顏色等。

size屬性：設置字體的大小。可能的值：從 1 到 7 的數字。瀏覽器默認值是 3。

color屬性：設置字體的顏色

顏色的取值：#xxxxxx 或 colorname

#xxxxxx 表示使用紅綠藍三原色設置顏色。

紅綠藍分別取值：00 -- FF，此處使用16進制。（FF就是十進制的255）

#000000 表示黑色，#FFFFFF白色

#FF0000紅色，#00FF00綠色，#0000FF藍色

紅綠藍2位取值相同可以省略成1位。例如：#112233 簡化成#123

colorname 使用英文單詞確定顏色。red 紅色，blue 藍色，green綠色

例如：

<font color="blue">我是藍色的</font>

1.2.2.4 格式化標籤： <b> <i>

<b> 粗體

<i> 斜體

例如：

1.2.2.5 段落標籤：<p> <br/>

<p> 定義段落。p 標籤會自動在其前後創建一些空白。

<br /> 插入單個換行。

1.3 案例分析

1.3.2 步驟分析

1. 創建03.案例：顯示信息頁面.html

2. 複製需要編寫的內容

3. 使用標題標籤<h1>修飾“公司簡介”

4. 使用標題標籤<hr>添加分隔線

5. 使用段落標籤<p>和<br>劃分區域

6. 使用字體標籤<font> 修飾“中關村黑馬程序員訓練營”

7. 使用格式化標籤<b> <i> 修飾“傳智播客”

1.4 代碼實現

<!DOCTYPE html>

<html>

<head>

</head>

<body>

<hr/>

<p>

<font color="red">“中關村”</font>是由<b><i>你好</i></b>聯合中關村軟件園、CSDN，並委託進行實施的軟件開發，致力於服務各大軟件企業，解決當前軟件開發技術飛速發展，而企業招不到優秀人才的困擾。<br/>

目前，“中關村”已成長爲行業“”的移動開發高端訓練基地，並被評爲中關村軟件園重點扶持人才企業。

</p>

<p>

這些流程中不僅包括嚴格的技術測試、自學能力測試，還包括性格測試、壓力測試、品德測試等等測試。毫不誇張地說，都是精挑細選出來的。並降低企業的用人風險。

</p>

<p>

更注重培養項目實施管理能力，並密切關注技術革新，不斷引入先進的技術，研發更新技術課程，確保學員進入企業後不僅能獨立從事開發工作，更能給企業帶來新的技術體系和理念。

</p>

<p>

一直以來，關注IT產業發展，以深度分享推進產業技術成長，致力於弘揚技術創新，倡導分享、開放和協作，努力打造高質量的IT人才服務平臺。

</p>

</body>

</html>

第2章網站圖片頁面顯示案例

2.1 案例介紹

在上面的案例中，我們發現這個頁面都是文字的內容，而我們看到的頁面往往文字和圖片是並存的，或者很多地方都是圖片的效果，那麼我們如何在頁面中顯示圖片呢？那麼我們來實現這樣的案例：

當然，大家現在還不知道怎麼來完成這個案例，因爲我們還沒有學習HTML中的圖片標籤，那麼我們現在就來學習一下吧。

2.2 相關知識點

2.2.1 案例相關標籤

2.2.1.1 圖片標籤：<img>

<img> 在html頁面中引用一張圖片

n src ：指定需要顯示圖片的URL（路徑）。

n alt ：圖片無法顯示時的替代文本。

n width ：設置圖像的寬度。

n height ：定義圖像的高度。

<img src="img/registImg.jpg" alt="剁手不夠解恨"

width="200px" height="200px" title="鼠標移上顯示"/>

<img src="img/registImg2.jpg" alt="剁手不夠解恨"

width="200px" height="200px" title="鼠標移上顯示"/>

2.3 案例分析:

2.3.1 知識點分析

2.3.2 步驟分析

1.創建案例二:網站圖片頁面顯示.html

2.使用圖片標籤<img>標籤的src屬性引入圖片

2.4 代碼實現

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</body>

</html>

第3章網站列表頁面顯示

3.1 案例介紹

在頁面中顯示文字和圖片我們已經完成了，那麼如果想在頁面中顯示一組友情鏈接信息，效果如下：

點擊這幾個鏈接，可以跳轉到相應的網站上.那麼現在我們就來實現這樣的效果

3.2 相關知識點

3.2.1 列表標籤：<ol><ul>

l <ol> 定義有序列表。

n type 列表類型，取值：A、a 、I 、i 、1 等

l <ul> 定義無序列表。

n type 符號的類型，取值：disc 實心圓、square 方塊、circle 空心圓

l <li> 定義列表項。是<ul> 或 <ol> 的子標籤

例如：

</ul>

</ol>

3.2.2 超鏈接標籤 <a>

<a> 標籤是超鏈接，是在html頁面提供一種可以訪問其他位置的實現方式。

n href：用於確定需要顯示頁面的路徑（URL）

n target：確定以何種方式打開href所設置的頁面。常用取值：_blank、_self 等

u _blank 在新窗口中打開href確定的頁面。

u _self 默認。使用href確定的頁面替換當前頁面。

例如：

訪問“”官網，以默認方式打開

</a><br />

訪問“”官網，以新窗口方式打開

</a><br />

3.3 案例分析

3.3.1 知識點分析

3.4 案例實現

<!DOCTYPE html>

<html>

<head>

</head>

<body>

</ul>

</body>

</html>

第4章網站首頁顯示

4.1 案例介紹

在之後的開發中，div+css佈局非常常見，但對於更熟悉服務器端開發的Java程序員來說，沒有相應的知識底蘊。我們更側重功能的完成，頁面的美觀展示就交予UI工程師。所以在之後的學習和開發中，我們使用表格<table>佈局更多。

爲了讓大家熟練的應用表格佈局，本案例我們將使用表格完成比較複雜的首頁編寫。

4.2 相關知識點

4.2.1 案例相關標籤

在整個首頁頁面中，第二行的右邊使用到表單，此處暫時省略，下一個案例我們單獨講解。

本案例使用的標籤，如下：

<table>

<tr>

<td>

慣例，我們將創建“案例三:網站首頁.html”頁面進行演示。

4.2.1.1 表格標籤<table><tr><td>

HTML表格由<table>標籤以及一個或多個<tr>、<th>或<td>標籤組成。

n <table> 是父標籤，相當於整個表格的容器。

u border 表格邊框的寬度。

u width 表格的寬度。

u cellpadding 單元邊沿與其內容之間的空白。

u cellspacing 單元格之間的空白。

u bgcolor 表格的背景顏色。

n <tr>標籤用於定義行

n <td>標籤用於定義表格的單元格（一個列）

u colspan 單元格可橫跨的列數。

u rowspan 單元格可橫跨的行數。

u align 單元格內容的水平對齊方式, 取值：left 左、right 右、center 居中。

u nowrap 單元格中的內容是否折行。

n <th>標籤用於定義表頭。單元格內的內容默認居中、加粗。

a) 實例1：編寫3*3表格，使用<td>修飾表頭

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

b) 實例2：編寫3*3表格，將第一行全部合併

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

c) 實例3：編寫3*3表格,將第一列全部合併

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

4.3 案例分析

4.3.1 知識點分析

根據對首頁頁面的分析，我們將採用表格嵌套的方式繪製。首頁繪製一個7*1的表格用於作爲外圍的整體結構，然後給每一行分別添加表格繪製自己的模塊，有1*3表格，有2*7表格。對於第三行輪播條暫時不編寫，需要使用js。（第4天和第5天講解）

4.4 案例實現

4.4.1 整體佈局

繪製整體佈局，使用border標記邊框，定位之後再刪除。

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

<tr>

</tr>

</table>

4.4.2 完整案例，填充數據

填充數據，將數字替換真實案例的數據

<!DOCTYPE html>

<html>

<head>

<title>itheima商城</title>

</head>

<body>

<tr>

<td>

</td>

</tr>

</td>

</tr>

<tr>

</tr>

</table>

</td>

<td >

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

</tr>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

</tr>

</table>

</td>

<td >

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

</tr>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

<td>

冬瓜<br />

</td>

</tr>

</table>

</tr>

</td>

</tr>

</table>

</body>

</html>

第5章網站後臺頁面顯示

5.1 案例介紹

平時我們看到的電商網站，其實只是其前臺頁面，提供給普通用戶進行查詢商品，購買商品等操作的。實際上，還有後臺頁面，提供給管理員使用的，用於添加商品，發貨等操作。

一般情況，後臺頁面都採用的框架方式進行呈現。效果如下圖：

5.2 相關知識點

5.2.1 案例相關標籤

5.2.1.1 框架標籤：<frameset>

<frameset> 標籤，是多個窗口頁面整合在一起的一個集合（框架集）。每一個頁面（框架）都是單獨文檔，需要使用子標籤<frame>來確定頁面的位置。<frameset>通過列和行來確定整體佈局，使用cols確定列數，使用rows確定行數。多個<frameset>可以嵌套使用。

l <frameset>和<body>兩個不能共存。

l rows屬性和cols屬性取值：值1,值2,值3,….. 一個值表示一行（列），多值使用逗號分隔，值可以是 10px、10% 等，最後一個值如果不想計算可以使用*匹配剩餘量。

5.2.1.2 框架子標籤：<frame>

<frame>標籤，用於設置<frameset>框架集中的一個頁面（框架）。

l src屬性：確定頁面的路徑

l noresize屬性：框架分隔先不能移動

l target屬性：確定需要顯示的頁面在何處顯示

5.3 案例分析

5.4 案例實現

<!DOCTYPE html>

<html>

<head>

</head>

</frameset>

</html>

985 碩士程序員，空窗 4 個月沒有 Offer！

一文搞懂 Spring 循環依賴

賽博鬥地主——使用大語言模型扮演Agent智能體玩牌類遊戲。

VScode右鍵打開(添加到右鍵)

Git 入門學習，基本命令使用

svn和Git版本管理優缺點

MySQL 基本語句使用總結

MySQL和Oracle數據庫的一些區別

IDEA 常用快捷鍵總結

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結