例
一段帶有已刪除部分和新插入部分的文本:
<p>My favorite color is <del>blue</del> <ins>red</ins>!</p>
瀏覽器支持
所有主流瀏覽器都支持 <del> 標簽。
標簽定義及使用說明
<del> 標簽定義文檔中已刪除的文本。
提示和注釋
提示:您也可以看看 <ins> 標簽如何標記先插入的文本。
提示:<del> 和 <ins> 一起使用,描述文檔中的更新和修正。瀏覽器通常會在已刪除文本上添加一條刪除線,在新插入文本下添加一條下劃線。
HTML 4.01 與 HTML5之間的差異
無。
屬性
屬性 | 值 | 描述 |
---|---|---|
cite | URL | 規定一個解釋了文本被刪除的原因的文檔的 URL。 |
datetime | YYYY-MM-DDThh:mm:ssTZD | 規定文本被刪除的日期和時間。 |
全局屬性
<del> 標簽支持 HTML 的全局屬性。
事件屬性
<del> 標簽支持 HTML 的事件屬性。
如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!
這一節以及以后幾節我們將對HTML中<body>標簽中的各種元素進行一個概述,并對一些基本元素進行練習。
HTML元素:指的是從開始標簽到結束標簽的所有代碼。
舉個例子,在《第一個HTML頁面如何寫?——零基礎自學網頁制作》這一節中,我們寫了這樣一個頁面"第一個頁面.html"。后面的練習我們都在這個文件中進行。
<!DOCTYPE HTML>
<html>
<head>
</head>
<body>
<h>第一個網頁</h>
<p>千里之行始于足下</p>
</body>
</html>
其中"<h>第一個網頁</h>"整個代碼就可以看做是一個html元素,<h></h>叫做標題標簽,加上"第一個網頁"這段文字共同構成一個HTML元素。
HTML元素非常多,因為我們可以在頁面中顯示各種各樣的信息,不同的信息載體對應不同的元素。
下面我們就介紹幾個常用的html元素。
HTML常用元素使用練習1
NO.1:<h></h>與<hr>
<h></h>這個用來添加標題的元素大家比較熟悉了,這里要介紹一個新的用法。示例代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1>
<h2>第一個網頁</h2>
<h3>第一個網頁</h3>
<h4>第一個網頁</h4>
<h5>第一個網頁</h5>
<h6>第一個網頁</h6>
<p>千里之行始于足下</p>
</body>
</html>
頁面顯示效果如圖:
大家通過觀察可以看出h后面的編號用來控制標題字號大小,僅僅是標題有這種預設,其他元素如果要調整字號的話我們放在以后CSS里講。
下面看<hr>,示例代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1><hr>
<h2>第一個網頁</h2><hr>
<h3>第一個網頁</h3><hr>
<h4>第一個網頁</h4><hr>
<h5>第一個網頁</h5><hr>
<h6>第一個網頁</h6><hr>
<p>千里之行始于足下</p><hr>
</body>
</html>
效果如下:
<hr>標簽可以為它前面的元素添加分割線,大家注意的是分割線不是下劃線,添加下劃線的操作我們會在CSS樣式表中詳細講解。
NO.2:<p></p>與<br>
<p></p>元素是添加段落的。示例代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1><hr>
<p>千里之行始于足下值得注意的是我們沒有必要一一講解HTML中的所有元素以及每個元素的各個屬性,
因為每個元素的使用都是大同小異,我們完全可以通過幾個常用案例對HTML全部元素及屬性的指定形成一
個整體認識,以后可以根據需求通過查詢手冊來自己學習其他元素及其屬性的用法。</p><hr>
</body>
</html>
效果如圖所示:
通過觀察發現,即使我們在代碼中對段落的文字進行回車操作,但是出現在頁面中是沒有回車的效果的,文字按照順序長長的排列在顯示器上,非常不利于閱讀,因此我們就要介紹常常和p標簽連用的<br>換行標簽。
示例代碼如下:
<!DOCTYPE HTML>
<html>
<head>
<title>第一個網頁</title>
</head>
<body>
<h1>第一個網頁</h1><hr>
<p>千里之行始于足下<br>
值得注意的是我們沒有必要一一講解HTML中的所有元素以及每個元素的各個屬性,<br>
因為每個元素的使用都是大同小異,我們完全可以通過幾個常用案例對HTML全部元<br>
素及屬性的指定形成一個整體認識,以后可以根據需求通過查詢手冊來自己學習其他<br>
元素及其屬性的用法。</p><hr>
</body>
</html>
效果如圖所示:
喜歡的小伙伴請關注我,閱讀中遇到任何問題請給我留言,如有疏漏或錯誤歡迎大家斧正,不勝感激!
HTML序章(學習目的、對象、基本概念)——零基礎自學網頁制作
HTML是什么?——零基礎自學網頁制作
第一個HTML頁面如何寫?——零基礎自學網頁制作
HTML頁面中head標簽有啥用?——零基礎自學網頁制作
初識meta標簽與SEO——零基礎自學網頁制作
HTML中的元素使用方法1——零基礎自學網頁制作
HTML中的元素使用方法2——零基礎自學網頁制作
HTML元素中的屬性1——零基礎自學網頁制作
HTML元素中的屬性2(路徑詳解)——零基礎自學網頁制作
使用HTML添加表格1(基本元素)——零基礎自學網頁制作
使用HTML添加表格2(表格頭部與腳部)——零基礎自學網頁制作
使用HTML添加表格3(間距與顏色)——零基礎自學網頁制作
使用HTML添加表格4(行顏色與表格嵌套)——零基礎自學網頁制作
16進制顏色表示與RGB色彩模型——零基礎自學網頁制作
HTML中的塊級元素與內聯元素——零基礎自學網頁制作
初識HTML中的<div>塊元素——零基礎自學網頁制作
在HTML頁面中嵌入其他頁面的方法——零基礎自學網頁制作
封閉在家學網頁制作!為頁面嵌入PDF文件——零基礎自學網頁制作
HTML表單元素初識1——零基礎自學網頁制作
HTML表單元素初識2——零基礎自學網頁制作
HTML表單3(下拉列表、多行文字輸入)——零基礎自學網頁制作
HTML表單4(form的action、method屬性)——零基礎自學網頁制作
HTML列表制作講解——零基礎自學網頁制作
為HTML頁面添加視頻、音頻的方法——零基礎自學網頁制作
音視頻格式轉換神器與html視頻元素加字幕——零基礎自學網頁制作
HTML中使用<a>標簽實現文本內鏈接——零基礎自學網頁制作
過昨天的學習算是對HTML有了一點點了解,知道了什么是前端,什么是HTML、前端三大標準、主流瀏覽器和html的基本結構及常用標簽。那么今天繼續看看html還有什么新的知識吧。
有常見性就有特殊性,我們使用電腦時經常會用到空格鍵,在html文檔上有時也會使用到空格鍵等等,那怎么在html上又是以什么形式展示給瀏覽器解析呢?
瀏覽器顯示結果 | 特殊字符名稱 | HTML編輯字符 |
空格 | & n b s p; | |
< | 小于號 | & l t ; |
> | 大于號 | & g t; |
& | 和 | & a m p; |
? | 版權 | & c o p y ; |
作用:在瀏覽器上清晰美觀地顯示、展示數據。
表格標簽的語法
<table>
<tr>
<td></td>
</tr>
</table>
表格標簽:<table></table>,一個table標簽中可嵌套多個tr標簽。
行標簽:<tr></tr>,一個tr標簽代表一行。一個行標簽中可以嵌套多個單元格標簽。
單元格標簽:<td></td>,一個td標簽代表一個單元格。在單元格中可以填充文本、圖片、超鏈接等等內容。
在html中表格不是由橫線劃分行和列,而是大大小小的矩形盒子來劃分。Table是一個最大的矩形盒子,里面包含tr標簽,這個是一個和table長度差不多的矩形盒子,table一行僅容納一個tr盒子。在tr盒子中還包含有N個td盒子,td盒子就是單元格。
表格示例:
在html文檔中編輯表格標簽結構時,除了一個標簽一個標簽地敲之外,可以使用快捷方式快速操作:如五行三列的表格,可以在table標簽中輸入:“tr*5>td*3”然后敲回車,就將其表格結構迅速展現出來。
<h1>表格示例:</h1>
<table>
<tr>
<td>姓名</td>
<td>性別</td>
<td>年齡</td>
</tr>
<tr>
<td>張三豐</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>
運行界面示例:默認狀態下表格是沒有線條分界,表格對齊方式左對齊。
表頭單元格標簽
<th></th>:位于表格的第一行或第一列,可以使其內容加粗居中顯示。
語法:
<table>
<th>
<td></td>
</th>
</table>
表頭表格代碼示例:
<h1>表頭表格示例:</h1>
<table>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三豐</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>
運行界面示例:
表格結構標簽
表格結構標簽分為表格頭部標簽和表格主體標簽。類似于head標簽和body標簽對于html標簽之間的關系。
表格頭部標簽:<thead></thead>。定義表格頭部,嵌套在<table></table>中,一般位于第一行。
表格主體標簽:<tbody></tbody>。定義表格主體,嵌套在<table></table>中,主要用于顯示數據。
代碼示例:
<h1>表格結構標簽</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<thead>
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
</thead>
<tbody>
<tr>
<td>張三豐</td>
<td>男</td>
<td>36</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>30</td>
</tr>
</tbody>
</table>
運行界面:
表格屬性
雖然表格屬性在實際開發過程中不常使用,一般都是通過CSS樣式設置,但是還是需要記住這些屬性關鍵詞,在css中屬性關鍵詞也會用到。
注:這些屬性都要寫在table標簽的開始標簽中,多個屬性之間需要使用空格分隔。
align:表格的對其方式。
align=“left”:在瀏覽器中居左顯示。也是默認顯示。
align=“center”:在瀏覽器中居中顯示。
align=“right”:在瀏覽器中居右顯示。
border:表格是否具有邊框。
border=”1”:表格添加邊框。
cellpadding:單元格內的元素和td邊框的距離。
舉個例子,如果表格是一件教室的話,桌子就是單元格,桌子上放的書本就是單元格內的元素,書本邊緣和桌子邊緣之間產生的空白區域就是cellpadding的值。
cellspacing:單元格和單元格之間的距離。默認是有空隙的,可設置為零,使其空隙清零,成為一條直線。
還是以教室為表格,桌子為單元格。桌子和桌子之間的距離就是cellspacing的值。
width:表格的寬度,屬性值可以是像素值也可以是百分比。
height:表格的高度,屬性值可以是像素值也可以是百分比。
代碼示例:
<h1>表頭表格示例:</h1>
<table align="center" border="1" cellpadding="0" cellspacing="0" width="200px" height="300px">
<tr>
<th>姓名</th>
<th>性別</th>
<th>年齡</th>
</tr>
<tr>
<td>張三豐</td>
<td>男</td>
<td>27</td>
</tr>
<tr>
<td>李四喜</td>
<td>女</td>
<td>18</td>
</tr>
<tr>
<td>王五通</td>
<td>男</td>
<td>35</td>
</tr>
<tr>
<td>秦六夏</td>
<td>女</td>
<td>30</td>
</tr>
</table>
運行界面:
合并單元格
合并單元格是指將兩個或兩個以上的單元格合并成一個單元格。合并屬性一般寫在單元格標簽的開始標簽上。合并代碼屬性設置后,要將沒有寫合并的單元格代碼的其他合并單元格標簽刪除掉。
目標單元格:(合并代碼存在位置)
跨行合并:最上側單元格為目標單元格,寫合并代碼。
跨列合并:最左側單元格為目標單元格,寫合并代碼。
合并單元格的方式:
跨行合并:將處于不同行的單元格進行合并
語法:rowspan=“合并單元格個數”
代碼示例:
<h1>跨行合并表格:</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
運行界面:
跨列合并:將處于不同列的單元格進行合并
語法:colspan=“合并單元格個數”
代碼示例:
<h1>跨列合并表格:</h1>
<table border="1" width="300px" height="150px" cellspacing="0">
<tr>
<td colspan="2"></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
運行示例:
今天學習的表格內容就到這里了,明天開始學習列表。
*請認真填寫需求信息,我們會在24小時內與您取得聯系。