誰來教我滲透測試-黑客必須掌握的HTML基礎(chǔ)（二）

天我們繼續(xù)看看html的學(xué)習(xí)筆記。

文本標(biāo)簽

標(biāo)題標(biāo)簽<hn>

將文本設(shè)置為標(biāo)題顯示的標(biāo)簽對。設(shè)定標(biāo)題字體大小，n=1（大）~6（小），標(biāo)題大小一共有6種，也就是從<h1>……</h1>到<h6>……</h6>

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學(xué)習(xí)分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<h1>我是菜鳥小白</h1>
<h2>你們的好朋友</h2>
<h3>  讓我們一起學(xué)習(xí)吧！！！</h3>
</body>
</html>

顯示效果如下：

字體修飾標(biāo)簽

對文字的格式做相應(yīng)的變化，如粗體、斜體、底線、上標(biāo)、下標(biāo)等。常用的字體修飾標(biāo)簽有以下幾種。

<b>……</b>:指定文字為粗體字
<i>……</i>:指定文字為斜體字
<u>……</u>:指定文字為帶有下劃線
<tt>……</tt>:指定文字為打字機效果
<sup>……</sup>:指定文字為上標(biāo)
<sub>……</sub>:指定文字為小標(biāo)
<em>……</em>:對某段文字進行強調(diào)，通常用斜體字顯示出來
<strong>……</strong>:對文本進行強調(diào)，通常用粗體字顯示出來我們看下加粗前后對比，其它效果類似方式

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學(xué)習(xí)分享</title>
</head>
<body bgcolor="11ffff" text="000000">
<b>我是菜鳥小白呀</b>
我是菜鳥小白呀
</body>
</html>

顯示效果如下：

字體標(biāo)簽<font>

設(shè)置文檔的字體，改變其屬性，對文本進行不同的設(shè)置，包含字體、大小、顏色等

size
face
color

我們看看大小的對比區(qū)別

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學(xué)習(xí)分享</title>
</head>
<body bgcolor="11ffff" text="000000">
我是菜鳥小白
<font size="20px">我是菜鳥小白呀</font>
</body>
</html>

顯示效果如下：

超鏈接標(biāo)簽

超鏈接的定義

在不同文檔、同一個文檔的不同段落之前相互跳轉(zhuǎn)。html鏈接包含兩部分：錨標(biāo)和目標(biāo)點。錨標(biāo)就是鏈接的源點，當(dāng)鼠標(biāo)被移動到錨標(biāo)處時會變成小手狀。此時，用戶通過點擊鼠標(biāo)就可以到達鏈接的目標(biāo)點。目標(biāo)點可以是一張圖片、一個網(wǎng)絡(luò)文件、一個多媒體文件等。

屬性href（hypertext reference）

用于設(shè)定鏈接地址，其鏈接地址必須是URL地址，必須給出具體的路徑。其中URL地址可以為下面內(nèi)容：

網(wǎng)站：可以設(shè)置ip地址或者是網(wǎng)站的網(wǎng)址。

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

點擊頁面的百度地址可直接跳轉(zhuǎn)到百度頁面

網(wǎng)頁：鏈接到本機的網(wǎng)頁。

<a href="cainiao-跳轉(zhuǎn)后頁面.html">跳轉(zhuǎn)</a>

跳轉(zhuǎn)前頁面

點擊跳轉(zhuǎn)后直接跳轉(zhuǎn)到新的本機頁面

可執(zhí)行文件：當(dāng)文件擴展名不是html、asp等時，會將鏈接到的文件下載到本地計算機或直接執(zhí)行。如果是文本文件（如word格式），則在瀏覽器中打開文件并進行編輯。

<a href="index.txt">txt文件，打開進行編輯</a>
<a href="index.wav">播放聲音</a>

網(wǎng)頁上的書簽：通常使用在網(wǎng)頁的長度超過屏幕時，可以使用書簽直接跳轉(zhuǎn)到該書簽指向的具體內(nèi)容，節(jié)省移動滾動條的時間。

屬性target

屬性值分別為_blank、_self、_parent、_top。
target=_blank：在新的瀏覽器窗口中打開連接的文檔，同時保持當(dāng)前窗口不變
target=_self：將鏈接的文檔載入鏈接所在的同一框架或窗口，默認設(shè)置為_self
target=_parent：將鏈接的文檔載入該鏈接所在框架的父框架或父窗口。如果包含鏈接的框架不是嵌套框架，則所鏈接的文檔載入整個瀏覽器窗口。
target=_top：將鏈接的文檔載入整個瀏覽器窗口，從而刪除所有框架我們以“_blank”為例，可以按照如下方式編寫：

<!--在新的窗口中打開百度首頁-->
<a href="http://www.baidu.com" target=_blank>百度地址</a>

屬性title

瀏覽器會以浮動提示的方式顯示解釋信息

<a href="http://www.baidu.com" target=_blank title="百度歡迎你">百度地址</a>

實際效果展示：

屬性name

利用name屬性作為錨定位，可以實現(xiàn)文檔內(nèi)部的定位。這個需要我們在兩個<a>標(biāo)簽中，一個寫明name，作為一個錨點；另外一個寫明herf，用于指向錨點。如下面的示例，點擊“百度地址”會跳轉(zhuǎn)到“這是測試跳轉(zhuǎn)處”（當(dāng)頁面超過一頁長度時，測試效果更明顯）

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學(xué)習(xí)分享</title>
</head>

<body bgcolor="11ffff" text="000000">
<a name=ceshi>這是測試跳轉(zhuǎn)</a>
<a href="#ceshi" title="百度歡迎你">百度地址</a>
?
</body>
</html>

圖像標(biāo)簽

圖片標(biāo)簽<img 屬性=“屬性值”>

屬性src：來定義圖片的URL（統(tǒng)一資源定位符）地址，是圖片必不可少的屬性。用法形如：<img src="url">

<img src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

屬性height和width：規(guī)定圖片的大小。屬性值都是數(shù)字，表示圖像寬度和高度所占的像素點數(shù)。默認是瀏覽器窗口將自動調(diào)整圖像顯示尺寸

<img heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

屬性align：設(shè)置圖片對齊方式，垂直對齊（居上、居中和居下）和水平對齊（居左、居中和居右）。

<img align="right" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

屬性border：默認圖片是沒有邊框的，可以利用border屬性添加邊框。

<img border="20px" align="rows" heigh="500px" width="500px" src="https://mmbiz.qpic.cn/sz_mmbiz_png/l8AWk3KYjz4lGzzlHNpH7gCkT3kPLd0OSvgQJIp5RotD7VwV0zmYdXMACNBoOWE12FXnYZOkbv0VmnxkWibic5eQ/640?wx_fmt=png&tp=webp&wxfrom=5&wx_lazy=1&wx_co=1">

表格標(biāo)簽

表<table>

創(chuàng)建一個表格，有屬性width（寬度）、height（高度）、border（邊框）、bordercolor（邊框顏色）、cellspacing、cellpadding

行<tr>

創(chuàng)建表格中的每一行，有屬性align、valign、bgcolor

列<td>

創(chuàng)建表格的中每一列，有屬性

表頭<th>

設(shè)置表頭

我們現(xiàn)在建造一個表

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學(xué)習(xí)分享</title>
</head>
?
<body bgcolor="11ffff" text="000000">
?
<table border>
<th>測試表頭</th>
?
<tr>
<td>這是第一行第一列</td>
<td>這是第一行第二列</td>
<td>這是第一行第三列</td>
</tr>
<tr>
<td>這是第二行第一列</td>
<td>這是第二行第二列</td>
<td>這是第二行第三列</td>
</tr>
</table>

</body>
</html>

顯示如下：

框架標(biāo)簽

框架<frame>

一個瀏覽器文檔窗口一般只能顯示一個網(wǎng)頁文件，但是使用框架標(biāo)簽就可以將一個瀏覽器文檔窗口分割成多個子窗口，每個子窗口中都可以顯示一個獨立的網(wǎng)頁文件。

框架集<frameset>

多個框架組成了一個框架集（Frameset），定義了各個框架如何排列的。有屬性rows和cols，兩個屬性至少選擇一個，否則瀏覽器只顯示第一個定義的框架。

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學(xué)習(xí)分享</title>
</head>
?
<frameset cols="25%,50%,25%">
<frame src="https://www.baidu.com"></frame>
<frame src="https://www.qq.com"></frame>
<frame src="https://www.sina.com"></frame>
</frameset>
?
</html>

最終我們將三個頁面在同一個web窗口展示出來了

表單標(biāo)簽

表單標(biāo)簽<form>

主要用于采集和提交用戶輸入的信息，使網(wǎng)頁具有交互功能。有屬性：

action（處理提交數(shù)據(jù)的頁面）
method（提交方式（get、post、request））
target（）

用戶輸入?yún)^(qū)域標(biāo)簽<input type="">

這個標(biāo)簽必須放在<form>……</form>標(biāo)簽之間。有屬性type，具體參數(shù)值有：

text（單行文本輸入框）
textarea（多行輸入框）
password（密碼輸入框）
radio（單選框）
checkbox（復(fù)選框）
select（下拉框）
submit（提交）
reset（重置）
image（圖片提交）
file（上傳文件）

<html lang="zh-cn">
<head>
<meta content="text/html;charset=utf-8">
<title>菜鳥小白的學(xué)習(xí)分享</title>
</head>
?
<body>
<p>用戶名<input type="text"></input></p>
<p>多行輸入框<textarea></textarea></p>
<p>密  碼<input type="password"></input></p>
<p>單選框<input type="radio"></input></p>
<p>復(fù)選框<input type="checkbox"></input></p>
<p>下拉框<input type="select"></input></p>
<p>提交<input type="submit"></input></p>
<p>重置<input type="reset"></input></p>
<p>圖片提交<input type="image"></input></p>
<p>文件提交<input type="file"></input></p>
?
</body>
</html>

實現(xiàn)效果：

好了，今天的內(nèi)容就分享完了，如有什么意見和建議可以私信菜鳥小白哦，我們下期再會~

例

一個簡單的 HTML 表格，包含兩列兩行：

<tr>

<th>Month</th>

<th>Savings</th>

</tr>

<tr>

<td>January</td>

</tr>

</table>

瀏覽器支持

所有主流瀏覽器都支持 <table> 標(biāo)簽。

標(biāo)簽定義及使用說明

<table> 標(biāo)簽定義 HTML 表格

一個 HTML 表格包括 <table> 元素，一個或多個 <tr>、<th> 以及 <td> 元素。

<tr> 元素定義表格行，<th> 元素定義表頭，<td> 元素定義表格單元。

更復(fù)雜的 HTML 表格也可能包括 <caption>、<col>、<colgroup>、<thead>、<tfoot> 以及 <tbody> 元素。

HTML 4.01 與 HTML5之間的差異

在 HTML5 中，僅支持 "border" 屬性，并且只允許使用值 "1" 或 ""。

屬性

屬性	值	描述
align	leftcenterright	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定表格相對周圍元素的對齊方式。
bgcolor	rgb(x,x,x)#xxxxxxcolorname	HTML5 不支持。HTML 4.01 已廢棄。規(guī)定表格的背景顏色。
border	1""	規(guī)定表格單元是否擁有邊框。
cellpadding	pixels	HTML5 不支持。規(guī)定單元邊沿與其內(nèi)容之間的空白。
cellspacing	pixels	HTML5 不支持。規(guī)定單元格之間的空白。
frame	voidabovebelowhsideslhsrhsvsidesboxborder	HTML5 不支持。規(guī)定外側(cè)邊框的哪個部分是可見的。
rules	nonegroupsrowscolsall	HTML5 不支持。規(guī)定內(nèi)側(cè)邊框的哪個部分是可見的。
summary	text	HTML5 不支持。規(guī)定表格的摘要。
width	pixels%	HTML5 不支持。規(guī)定表格的寬度。

全局屬性

<table> 標(biāo)簽支持 HTML 的全局屬性。

事件屬性

<table> 標(biāo)簽支持 HTML 的事件屬性。

如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039，我們一起飛！

HTML表格的構(gòu)建中，<tr>標(biāo)簽（表格行）扮演著基礎(chǔ)而關(guān)鍵的角色。正確使用表格行不僅能夠提升數(shù)據(jù)展示的清晰度，還可以通過各種技巧增強表格的功能性和交互性。本文將深入探討如何高效利用<tr>標(biāo)簽，從而在網(wǎng)頁設(shè)計中實現(xiàn)更精細、更專業(yè)的布局和表現(xiàn)。

1. 理解<tr>標(biāo)簽的基本用途

1.1 <tr>標(biāo)簽概述

在HTML中，<tr>標(biāo)簽用于定義表格的行。每個<tr>元素內(nèi)部可以包含一或多個<td>（表格單元格）或<th>（表頭單元格）元素，用于展示具體的數(shù)據(jù)或標(biāo)題。

1.2 創(chuàng)建基本的表格行

一個典型的表格行示例如下：

<table>
    <tr>
        <th>編號</th>
        <th>姓名</th>
        <th>職位</th>
    </tr>
    <tr>
        <td>1</td>
        <td>王小明</td>
        <td>前端開發(fā)</td>
    </tr>
</table>

這個例子展示了如何使用<tr>來創(chuàng)建包含標(biāo)題和一行數(shù)據(jù)的表格。

2. 樣式化表格行

2.1 改善行的視覺效果

通過CSS，我們可以對表格行進行樣式化，例如設(shè)置斑馬線效果（條紋表格）、行懸停顏色等，以提升可讀性和用戶體驗。

tr:nth-child(even) {
    background-color: #f2f2f2;
}
tr:hover {
    background-color: #ddd;
}

2.2 使用類和ID優(yōu)化樣式控制

給表格行添加類或ID，可以更細致地控制特定行的樣式，這對于突出顯示某些數(shù)據(jù)非常有用。

3. 動態(tài)交互的實現(xiàn)

3.1 使用JavaScript處理行事件

可以通過JavaScript為表格行添加點擊事件，達到如彈出詳細信息、修改數(shù)據(jù)等交互效果。

document.querySelectorAll("tr").forEach(row => {
    row.addEventListener("click", function() {
        alert("你點擊了一行！");
    });
});

3.2 動態(tài)添加和刪除行

在需要動態(tài)修改表格內(nèi)容的場景下，可以通過JavaScript動態(tài)地添加或刪除表格行。

function addRow() {
    const table = document.getElementById("myTable");
    const row = table.insertRow(-1);  // 插入到表格末尾
    const cell1 = row.insertCell(0);
    const cell2 = row.insertCell(1);
    cell1.innerHTML = "新行單元格1";
    cell2.innerHTML = "新行單元格2";
}

4. 結(jié)語

通過深入了解和運用<tr>標(biāo)簽，你可以大幅提升HTML表格的功能性和視覺吸引力。無論是數(shù)據(jù)密集型網(wǎng)站還是需要高度定制的用戶界面，精通這些技巧將使你在網(wǎng)頁開發(fā)中更加得心應(yīng)手。

結(jié)尾部分：
希望本文的分享能幫助你更好地掌握HTML中的<tr>使用技巧，無論是基礎(chǔ)的數(shù)據(jù)展示還是復(fù)雜的用戶交互，都能通過你的代碼得到完美的實現(xiàn)。不斷實踐，不斷創(chuàng)新，讓我們在編程的路上一起進步！

在線咨詢

上一篇：爬蟲學(xué)習(xí)之Jsoup簡單練習(xí)
下一篇：「HTML4」HTML入門

您的項目需求

*請認真填寫需求信息，我們會在24小時內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商

誰來教我滲透測試-黑客必須掌握的HTML基礎(chǔ)（二）

文本標(biāo)簽

標(biāo)題標(biāo)簽<hn>

字體修飾標(biāo)簽

字體標(biāo)簽<font>

超鏈接標(biāo)簽

超鏈接的定義

屬性href（hypertext reference）

屬性target

屬性title

屬性name

圖像標(biāo)簽

圖片標(biāo)簽<img 屬性=“屬性值”>

表格標(biāo)簽

表<table>

行<tr>

列<td>

表頭<th>

框架標(biāo)簽

框架<frame>

框架集<frameset>

表單標(biāo)簽

表單標(biāo)簽<form>

用戶輸入?yún)^(qū)域標(biāo)簽<input type="">

1. 理解<tr>標(biāo)簽的基本用途

1.1 <tr>標(biāo)簽概述

1.2 創(chuàng)建基本的表格行

2. 樣式化表格行

2.1 改善行的視覺效果

2.2 使用類和ID優(yōu)化樣式控制

3. 動態(tài)交互的實現(xiàn)

3.1 使用JavaScript處理行事件

3.2 動態(tài)添加和刪除行

4. 結(jié)語

您的項目需求