html標籤詳解（2）-html教學-PHP中文網

首頁

web前端

html教學

html標籤詳解（2）

高洛峰

Feb 16, 2017 pm 02:17 PM

html標籤

在上一篇文章中主要講了，http的一些基礎標籤，比方說連結標籤，圖片標籤，html框架等，那接下來主要針對表格標籤，列表標籤，表單標籤做一個詳細的講解

1 ：表格標籤

表格的標籤

<!DOCTYPE html>
    <html>
        <head>
            <!-- 原创作者：蜗牛 -->
            <title>table标签</title>
        </head>
        <body>
            <table  border="1" width="360"  height="240" 
                    cellspacing="1" cellpadding="1" 
                    align="center" bgcolor="red">   <!--这里的center表示该表格在页面的中间位置-->
                                                    <!--这里的背景色标签是bgcolor-->
                    <caption><h2>我的好朋友</caption>

                     <tr>
                         <th>姓名</th>
                 <th>性别</th>
                         <th>年龄</th>
                         <th>爱好</th>                     
                     </tr>

                     <tr align="center">          <!--这里的center表示的是表格里面的字体居中-->
                         <td>小红</td>
                         <td>女</td>
                         <td>20</td>
                         <td>跳舞</td>
                     </tr>

                     <tr align="center"> 
                         <td>小舵</td>
                         <td>女</td>
                         <td>24</td>
                         <td>唱歌</td>
                     </tr>
                    
                </table>
       </body>
    </html>

登入後複製

註解：

標籤用來表示表格的標題，用法和一樣只是裡面的內容會自動加大加粗

border 設定表格邊框的寬度，單位為pixel設定表格寬度，單位為pixel

height 設定表格高度，單位為pixel

cellspacing 設定單元格之間的距離, 表邊框的間距文字設定表格的背景顏色

align 用於設定對齊方式，例如center，left，right

表頭名用於表示表頭

如下：

注意：當你在表格的每個單元格中輸入不同內容是，你的內容長度不同內容會變，要想每個單元格保持一樣大有兩種方法1 ；例如當你的表格總hight為400，你設定4行，那麼在每個標籤中加入屬性：hight=100；就相當於平均分配，同樣寬度用同樣方法。 2：會比第一種簡單，就是設定css樣式，把tr和td大小固定

2：列表標籤

<!DOCTYPE html>
<html>
    <head>     
        <title>table中合并单元格</title>
    </head>
    <body>
        <table  border="1" width="300"  height="200" 
                align="center" background="first.jpg" >  <!--background代表的是背景图片，bgcolor代表背景色完全不一样-->

                  <tr align="center" width="100" >
                     <td>1</td>
                     <td colspan="2">占两列</td>    <!--当colspan="2"表示在同一行中，两列并一列，那么在它下面少写一个<td></td>标签-->
                     <!-- 删除掉此<td></td> -->
                     <td>2</td>
                 </tr>

                 <tr   align="center" width="100">  
                     <td rowspan="2">占两行</td>   <!--当 rowspan="2"表示在同一列中 两行并一行，那么在同一列中删掉一个<td></td>标签-->
                     <td>3</td>
                     <td>4</td>
                     <td>5</td>
                 </tr>

                  <tr   align="center" width="100" >
                    <!-- 删除掉此<td></td> -->
                     <td>6</td>
                     <td>7</td>
                     <td>8</td>
                 </tr>          
            </table>
   </body>
</html>

登入後複製

運行結果如下：

html標籤詳解（2）

3：表單

表單標籤

<!DOCTYPE html>
<html>
    <head>
    <title>列表标签</title>
    </head>
    <body  bgcolor="#FFFF00">
        <!-- 无序列表 -->
        2017年心愿
        <ul type="circle">     <!--无序序列<ul> ，无序有circle：圆点，square：小方块-->
            <li>父母身体健康</li>
            <li>宝宝健康成长</li>
            <li>媳妇健健康康</li>
        </ul>

        <!-- 有序列表 -->
        2017年大事件
        <ol type="1" start="2">   <!--有序的标签是<ol>,有序有五种：1,A,a ,i,I，start代表从什么时候开始等于2代表从2开始--> 
            <li>老婆要生小孩了</li>
            <li>自己换工作了</li>
            <li>要卖掉一套房</li>
        </ol>
        
        <!-- 自定义列表 -->
        <dl>                    <!--在自定义列表<dl> </dl>中使用<dt> </dt>表示小标题，使用<dd> </dd>表示列表项-->
            <dt>时刻告诉自己</dt>
            <dd>不抱怨</dd>
            <dd>零负能量</dd>
            <dd>该与不该</dd>
        </dl>
    </body>
</html>

登入後複製

效果圖如下：

更多html標籤詳解（2）相關文章請關注PHP中文網！

本網站聲明

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

熱AI工具

熱工具

熱門話題

gmail信箱登陸入口在哪裡

7536

CakePHP 教程

1379

steam的賬戶名稱是什麼格式

win11激活密鑰永久

NYT連接提示和答案

Related knowledge

如何在Go語言中使用正規表示式擷取HTML標籤內容 Jul 14, 2023 pm 01:18 PM

如何在Go語言中使用正規表示式擷取HTML標籤內容導讀：正規表示式是一種強大的文字比對工具，它在Go語言中也有著廣泛的應用。在處理HTML標籤的場景中，正規表示式可以幫助我們快速擷取所需的內容。本文將介紹如何在Go語言中使用正規表示式擷取HTML標籤的內容，並給予相關程式碼範例。一、引入相關套件首先，我們需要導入相關的套件：regexp和fmt。 regexp包提供

如何使用Python正規表示式去除HTML標籤 Jun 22, 2023 am 08:44 AM

HTML（HyperTextMarkupLanguage）是用於建立Web頁面的標準語言，它使用標籤和屬性來描述頁面上的各種元素，例如文字、圖像、表格和連結等等。但是，在處理HTML文字時，很難將其中的文字內容快速地提取出來用於後續的處理。這時，我們可以使用Python中的正規表示式來移除HTML標籤，以達到快速擷取純文字的目的。在Python中，正規表

PHP如何去除字串中的HTML標籤？ Mar 23, 2024 pm 09:03 PM

PHP是一種常用的伺服器端腳本語言，廣泛應用於網站開發和後端應用程式開發。在開發網站或應用程式時，經常會遇到需要處理字串中的HTML標籤的情況。本文將介紹如何使用PHP去除字串中的HTML標籤，並提供具體的程式碼範例。為什麼需要移除HTML標籤？在處理使用者輸入或從資料庫中取得的文字時，經常會包含HTML標籤。有時我們希望在顯示文字時移除這些HTML標籤

php中怎麼轉義html標籤 Feb 24, 2021 pm 06:00 PM

在PHP中，可以使用htmlentities()函數來轉義html，能把字元轉換成HTML實體，語法「htmlentities(string,flags,character-set,double_encode)」。 PHP中也可以使用html_entity_decode()函數來反轉義html，把HTML實體轉換成字元。

如何在Java中從給定的字串中刪除HTML標籤？ Aug 29, 2023 pm 06:05 PM

String是Java中的final類，它是不可變的，這意味著我們不能改變物件本身，但我們可以更改物件的引用。可以使用String類別的replaceAll()方法從給定字串中刪除HTML標籤。我們可以使用正規表示式從給定字串中刪除HTML標記。從字串中刪除HTML標籤後，它將傳回一個字串作為普通文字。語法publicStringreplaceAll(Stringregex,Stringreplacement)範例publicclassRemoveHTMLTagsTest{&nbs

如何在HTML表格中使用HTML標籤？ Sep 08, 2023 pm 06:13 PM

我們可以輕鬆地在表格中新增HTML標籤。 HTML標籤應放置在<td>標籤內。例如，在<td>標籤內新增段落<p>…</p>標籤或其他可用標籤。語法以下是在HTML表格中使用HTMl標記的語法。 <td><p>Paragraphofthecontext</p><td>範例1下面給出了在HTML表格中使用HTML標籤的範例。 <!DOCTYPEhtml><html><head&g

HTML中起始標籤的示例是什麼？ Apr 06, 2025 am 12:04 AM

AnexampleOfAstartingTaginHtmlis，beginSaparagraph.startingTagSareEssentialInhtmlastheyInitiateEllements，defiteTheeTheErtypes，andarecrucialforsstructuringwebpages wepages webpages andConstructingthedom。

PHP正規表示式驗證基本的HTML標籤的方法 Jun 24, 2023 am 08:07 AM

PHP是一種高效率的網頁開發語言，其支援正規表示式功能，能夠快速驗證輸入資料的有效性。在網頁開發中，HTML是常見的標記語言，而對HTML標籤進行驗證，是網頁表單驗證的非常重要的方法。本文將介紹基本的HTML標籤驗證方法，以及如何使用PHP正規表示式進行驗證。一、HTML標籤基本結構HTML標籤由尖括號包圍的元素名稱和屬性組成，常見的標籤包括p、a、div

See all articles

html標籤詳解（2）

熱AI工具

Undresser.AI Undress

AI Clothes Remover

Undress AI Tool

Clothoff.io

AI Hentai Generator

熱門文章

熱工具

記事本++7.3.1

SublimeText3漢化版

禪工作室 13.0.1

Dreamweaver CS6

SublimeText3 Mac版

熱門話題