検索
htmlタグの詳しい解説(2)Feb 16, 2017 pm 02:17 PM
htmlタグ

前回は、httpの基本的なタグであるリンクタグ、イメージタグ、HTMLフレームワークなどを中心に説明しましたが、次回はテーブルタグ、リストタグ、フォームタグを中心に詳しく解説していきます

1 : テーブルタグ l & lt; & lt;/table & gt; タグ

& lt;/TR & GT; を示すために使用されます。 & lt;/td & gt; 列を表すために使用されるラベル

ラベルは、

と同じです。 ; ただし、内部のコンテンツは自動的に拡大され、太字になります

border テーブルの幅を設定します。単位はピクセルです

width テーブルの幅を設定します、単位はピクセルです

height テーブルの高さ、単位を設定しますピクセルです

cellspacing 表の境界線の間隔を表すセル間の距離を設定します

cellpadding テキストを設定します セルの境界線からの距離

bgcolor 表の背景色を設定します

align 配置の設定に使用されます、中央、左、右など

(2) セルの結合について
<!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>

実行結果は以下の通りです:

注: 表の各セルに異なる内容を入力した場合、各セルのサイズを同じに保つには 2 つの方法があります。たとえば、テーブルの合計の高さが 400 で 4 行を設定し、各 に属性を追加します。 tag: hight=100; これは均等分布に相当し、同じ幅に対して同じ方法を使用します。 2: CSSのスタイルを設定してtrとtdのサイズを固定するだけなので、1つ目より簡単になります

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: フォーム

form> フォームタグ

<!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)

htmlタグの詳しい説明は(2) 関連記事はPHP中国語サイトにご注目ください!

声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
如何使用Python正则表达式去除HTML标签如何使用Python正则表达式去除HTML标签Jun 22, 2023 am 08:44 AM

HTML(HyperTextMarkupLanguage)是用于创建Web页面的标准语言,它使用标签和属性来描述页面上的各种元素,例如文本、图像、表格和链接等等。但是,在处理HTML文本时,很难将其中的文本内容快速地提取出来用于后续的处理。这时,我们可以使用Python中的正则表达式来去除HTML标签,以达到快速提取纯文本的目的。在Python中,正则表

如何在Go语言中使用正则表达式提取HTML标签内容如何在Go语言中使用正则表达式提取HTML标签内容Jul 14, 2023 pm 01:18 PM

如何在Go语言中使用正则表达式提取HTML标签内容导读:正则表达式是一种强大的文本匹配工具,它在Go语言中也有着广泛的应用。在处理HTML标签的场景中,正则表达式可以帮助我们快速提取需要的内容。本文将介绍如何在Go语言中使用正则表达式提取HTML标签的内容,并给出相关代码示例。一、引入相关包首先,我们需要导入相关的包:regexp和fmt。regexp包提供

PHP如何去除字符串中的HTML标签?PHP如何去除字符串中的HTML标签?Mar 23, 2024 pm 09:03 PM

PHP是一种常用的服务器端脚本语言,广泛应用于网站开发和后端应用程序开发中。在开发网站或应用程序时,经常会遇到需要处理字符串中的HTML标签的情况。本文将介绍如何使用PHP去除字符串中的HTML标签,并提供具体的代码示例。为什么需要去除HTML标签?在处理用户输入或从数据库中获取的文本时,经常会包含HTML标签。有时候我们希望在显示文本时去除这些HTML标签

php中怎么转义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标签?如何在Java中从给定的字符串中删除HTML标签?Aug 29, 2023 pm 06:05 PM

String是Java中的final类,它是不可变的,这意味着我们不能改变对象本身,但我们可以更改对象的引用。可以使用String类的replaceAll()方法从给定字符串中删除HTML标签。我们可以使用正则表达式从给定字符串中删除HTML标记。从字符串中删除HTML标签后,它将返回一个字符串作为普通文本。语法publicStringreplaceAll(Stringregex,Stringreplacement)示例publicclassRemoveHTMLTagsTest{&nbs

如何在HTML表格中使用HTML标签?如何在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

PHP正则表达式验证基本的HTML标签的方法PHP正则表达式验证基本的HTML标签的方法Jun 24, 2023 am 08:07 AM

PHP是一种高效的网页开发语言,其支持正则表达式功能,能够快速验证输入数据的有效性。在网页开发中,HTML是常见的标记语言,而对HTML标签进行验证,是网页表单验证的一种非常重要的方法。本文将介绍基本的HTML标签验证方法,以及如何使用PHP正则表达式进行验证。一、HTML标签基本结构HTML标签由尖括号包围的元素名称和属性组成,常见的标签包括p、a、div

HTML标签大全HTML标签大全Nov 27, 2023 am 10:05 AM

HTML标签有<!DOCTYPE>、<html>、<head>、<title>、<meta>、<link>、<style>、<script>、<body>、<h1> - <h6>、<p>、<a>、<img>、<div>、<span>、<input>、<button>、<form

See all articles

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

AI Hentai Generator

AIヘンタイを無料で生成します。

ホットツール

MantisBT

MantisBT

Mantis は、製品の欠陥追跡を支援するために設計された、導入が簡単な Web ベースの欠陥追跡ツールです。 PHP、MySQL、Web サーバーが必要です。デモおよびホスティング サービスをチェックしてください。

VSCode Windows 64 ビットのダウンロード

VSCode Windows 64 ビットのダウンロード

Microsoft によって発売された無料で強力な IDE エディター

Dreamweaver Mac版

Dreamweaver Mac版

ビジュアル Web 開発ツール

SublimeText3 英語版

SublimeText3 英語版

推奨: Win バージョン、コードプロンプトをサポート!

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター