HTML body タグの関連タグ 2-htmlチュートリアル-php.cn

ホームページ

ウェブフロントエンド

htmlチュートリアル

HTML body タグの関連タグ 2

无忌哥哥

Jul 12, 2018 am 09:52 AM

リストタグ ul ol dl

リストタグには次の 3 種類があります:

順序なしリスト ol
定義リスト dl

順序なしリスト

<body>
    <ul>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ul>
</body>

HTML body タグの関連タグ 2 注:

li は単独で存在できず、逆に ul でラップする必要があります。リー以外の何ものでもない。

ul の機能は、テキストに小さな点を追加することではなく、順序なしリストの「意味論」を追加することです。
属性

type="属性値"。属性値を選択できます: ディスク (実線のドット、デフォルト)、正方形 (実線の正方形のドット)、円 (中空の円)

効果は次のとおりです:

順序付きリスト

<body>
    <ol>
        <li>张三</li>
        <li>李四</li>
        <li>王五</li>
    </ol>
</body>

効果:

属性: HTML body タグの関連タグ 2

type="属性値"; 1、a、A、i、I を組み合わせることができます。数値で開始を表す start 属性を使用します

定義リスト

dt: リストのタイトル、このタグは必須です

dd: リストのリスト項目、書く必要はありません

注: dl では dt、dd のみが可能です

<dl>
 <dt>第一条规则</dt>
 <dd>不准睡觉</dd>
 <dd>不准交头接耳</dd>
 <dd>不准下神</dd>

 <dt>第二条规则</dt>
 <dd>可以泡妞</dd>
 <dd>可以找妹子</dd>
 <dd>可以看mv</dd>
</dl>

テーブルラベルはで表されます。
テーブル HTML body タグの関連タグ 2 で構成されます。

したがって、テーブルは行と列ではなく、行で構成されている (行は列で構成されている) ことを覚えておく必要があります。

<table>
    <tr>
        <td></td>
        <td></td>
        <td></td>
    </tr>
</table>

ボーダー: ボーダー。単位はピクセルです

<table>是由每行<code><tr>组成的，每行是由<code><td> style="border--collapse;collapse;": セルの行と表の枠線が結合されます<h4></h4> <ul class=" list-paddingleft-2">width: 幅。単位はピクセル<li></li>height:高さです。単位はピクセルです<li></li>bordercolor: 表の境界線の色<li></li>align: 表の水平モード。属性値を入力できます: left right center<li> 注: これはテーブル内のコンテンツの配置を設定するものではありません。コンテンツの配置を設定したい場合は、セルラベル </li> <li></li> cellpadding: セルの内容から端までの距離。単位はピクセルです。デフォルトでは、テキストは左側の行の隣にあります。つまり、デフォルト値は 0<li> <blockquote>cellspacing: セル間の距離 (余白) です。単位はピクセルで、デフォルトは0です </blockquote> </li>bgcolor="": テーブルの背景色<li></li>background="Path": 背景画像。背景画像の優先度は背景色よりも高くなります<li></li> <row>テーブルは行と行で構成されます <li>属性 </li></row> </ul> <h4 id="パブリック属性-配置を設定しますこの行のセルの内容-可能な値-ltr-左から右-rtl-右から左">:パブリック属性、配置を設定しますこの行のセルの内容。可能な値: ltr: 左から右、rtl: 右から左 </h4> bgcolor: この行のセルの背景色を設定します <ul class=" list-paddingleft-2">height: 行の高さ<li></li>align=" center": 行の内容が水平方向の中央に表示されます。値: left、center、right<li></li>valign="center": 行の内容が垂直方向の中央に表示されます。値: top、middle、bottom<li> </li> ユニットグリッド <li> 属性 </li> <li></li> : コンテンツの水平方向の配置。属性値は次のとおりです: left right center</ul> <h4></h4> valign: コンテンツの垂直方向の配置。属性値は、上中下 <ul class=" list-paddingleft-2">width:絶対値または相対値(%)<li></li>height:セルの高さ<li></li>bgcolor:セルの背景色を設定します<li> </li>背景: セルの背景画像を設定します<li></li>セルの結合<li> 2つ以上のセルを結合したい場合は、残りのセルを削除し、1つのセルだけを残す必要がありますセル属性:</li> <li> colspan:水平マージ。たとえば、colspan="2" は、現在のセルが水平方向に 2 つのセル位置を占めることを意味します</li> </ul> <h4></h4>rowspan: 垂直方向に結合します。たとえば、rowspan="2" は、現在のセルが垂直方向に 2 つのセル位置を占めることを意味します <h4 id="表格的标题-使用时和tr标签并列"> 表格的标题。使用时和tr标签并列</h4> 效果： <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/005/06dcf1df41543c8ce78c070efae5cef3-4.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML body タグの関連タグ 2" > <h2 id="表单标签">表单标签 </h2> 表单标签用表示，用于与服务器的交互。表单就是收集用户信息的，就是让用户填写的，选择的 属性： <ul class=" list-paddingleft-2"> <li>name：表单的名称，用于JS来操作或控制表单时使用</li> <li>id：表单的名称，用于JS来操作或控制表单时使用</li> <li>action：指定表单数据的处理程序，一般是PHP</li> <li>method：表单数据的提交方式，一般取值：get(默认)和 post</li> </ul> action属性就是表示，表单将提交到哪里。 method属性表示用什么HTTP方法提交，有get、post两种。 get提交和post提交的区别： GET方式： 将表单数据，以"name=value"形式追加到action指定的处理程序的后面，两者间用"?"隔开，每一个表单的"name=value"间用"&"号隔开。 特点：只适合提交少量信息，并且不太安全(不要提交敏感数据)、提交的数据类型只限于ASCII字符。 POST方式： 将表单数据直接发送(隐藏)到action指定的处理程序。POST发送的数据不可见。Action指定的处理程序可以获取到表单数据。 特点：可以提交海量信息，相对来说安全一些，提交的数据格式是多样的(Word、Excel、rar、img)。 Enctype： 表单数据的编码方式(加密方式)，取值可以是：application/x-www-form-urlencoded、multipart/form-data。Enctype只能在POST方式下使用。 <ul class=" list-paddingleft-2"> <li>Application/x-www-form-urlencoded：默认加密方式，除了上传文件之外的数据都可以</li> <li>Multipart/form-data：上传附件时，必须使用这种编码方式。</li> </ul> <h4 id="输入标签-文本框"> 输入标签(文本框)</h4> 用于接收用户输入<pre class='brush:php;toolbar:false;'><input type=&#39;text&#39; /></pre>属性： <ul class=" list-paddingleft-2"> <li> type="text"：文本类型。属性值可以为： <blockquote></blockquote> </li> <ul class=" list-paddingleft-2" style="list-style-type: square;"> <li>注：如果要限制上传文件的类型，需要配合JS来实现验证，对上传文件的安全检查：一是扩展名的检查，二是文件数据内的检查</li> <li>text(默认)：文本类型</li> <li>password：密码类型</li> <li>radio：单选按钮，名字相同的按钮作为一组进行单选(单选按钮，天生不能互斥，如果想要互斥，必须要有相同的name属性)</li> <li>checkbox：多选按钮，名字相同的按钮作为一组进行选择</li> <li>checked：将单选按钮或多选按钮默认处于选择状态。当标签的type="radio"时，可以用这个属性，属性值也是checked</li> <li>hidden：隐藏框，在表单中包含不希望用户看见的信息</li> <li>button：普通按钮，结合JS代码进行使用</li> <li>submit：提交按钮，传送当前表单的数据给服务器或者其他程序处理，这个按钮不需要写value自动就会有"提交"文字，点击按钮后，这个表单就会被提交到form标签的action属性中指定的我那个页面区</li> <li>reset：重置按钮，清空当前表单的内容，并设置为最初的默认值</li> <li>image：图片按钮，和提交按钮的功能完全一致，只不过图片按钮可以显示图片</li> <li> file：文件选择框 <blockquote></blockquote> </li> </ul> <ul class=" list-paddingleft-2" style="list-style-type: square;"></ul> <li>value="内容"：文本框里的默认内容</li> <li> size="50"：表示文本框可以显示五十个字符，一个英文或一个中文都算一个字符 <blockquote>注：size属性值的单位不是像素</blockquote> </li> <li>readonly：文本框只读，不能编辑。因为它的属性值是readonly,所以属性值可以不写</li> <li>disabled：文本框只读，不能编辑。光标点不进去，属性值可以不写</li> </ul> <h4 id="下拉列表选项"> 下拉列表选项</h4> 标签里面的每一项都用表示，select是"选择"，option是 "选项" 属性： <ul class=" list-paddingleft-2"> <li>mutiple：可以对下啦列表中的选项进行多选，没有属性值</li> <li>size=""：如果属性值大于 1，则列表为滚动视图，默认属性值为1，即下拉视图</li> </ul> 属性： <ul class=" list-paddingleft-2"><li>selected：预选中。没有属性值</li></ul><pre class='brush:php;toolbar:false;'> <form> <select> <option>小学</option> <option>初中</option> <option>高中</option> <option>大学</option> <option selected="">研究生</option> </select> <select size="3"> <option>小学</option> <option>初中</option> <option>高中</option> <option>大学</option> <option>研究生</option> </select> <select multiple=""> <option>小学</option> <option>初中</option> <option selected="">高中</option> <option selected="">大学</option> <option>研究生</option> </select> </form></pre>效果： <img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/005/2e749b5c165e05f1d51d3c2eb4b80a60-5.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML body タグの関連タグ 2" > <h4 id="多行文本输入框"> 多行文本输入框</h4> text是"文本"，area是"区域" 属性： <ul class=" list-paddingleft-2"> <li>value：提交给服务器的值</li> <li>rows=""：指定文本区域的行数</li> <li>cols=""：指定文本区域的列数</li> <li>readonly：只读</li> </ul><pre class='brush:php;toolbar:false;'><form> <textarea name="txtInfo" rows="4" cols="20">路飞学城</textarea> </form></pre><img src="/static/imghwm/default1.png" data-src="https://img.php.cn/upload/article/000/000/005/2e749b5c165e05f1d51d3c2eb4b80a60-6.png?x-oss-process=image/resize,p_40" class="lazy" alt="HTML body タグの関連タグ 2" > </td>

以上がHTML body タグの関連タグ 2の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

HTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am 12:02 AM

webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、

HTMLの役割：Webコンテンツの構造Apr 11, 2025 am 12:12 AM

HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。

HTMLとコード：用語を詳しく見るApr 10, 2025 am 09:28 AM

htmlisaspecifictypeofcodefocuseduructuringwebcontent

HTML、CSS、およびJavaScript：Web開発者に不可欠なツールApr 09, 2025 am 12:12 AM

HTML、CSS、およびJavaScriptは、Web開発の3つの柱です。 1。HTMLは、Webページ構造を定義し、などなどのタグを使用します。2。CSSは、色、フォントサイズなどのセレクターと属性を使用してWebページスタイルを制御します。

HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm 07:05 PM

HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。

HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am 12:11 AM

HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。

HTMLでの開始タグの例は何ですか？Apr 06, 2025 am 12:04 AM

Anexampleapalofastartingtaginhtmlis、それはaperginsaparagraph.startingtagsaresentionentientiontheyinitiateelements、definetheirtypes、およびarecrucialforurturingwebpagesandcontingthomedomを構築します。

CSSのフレックスボックスレイアウトを使用して、メニューの点線のラインセグメンテーション効果のセンターアラインメントを実現する方法は？Apr 05, 2025 pm 01:24 PM

メニューで点線のラインセグメンテーション効果を設計する方法は？メニューを設計するときは、通常、皿の名前と価格の間に左右に合わせることは難しくありませんが、真ん中の点線またはポイントはどうですか...

See all articles

ホットAIツール

Undresser.AI Undress

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

AI Clothes Remover

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

Undress AI Tool

脱衣画像を無料で

Clothoff.io

AI衣類リムーバー

AI Hentai Generator

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

ホットツール

SublimeText3 Mac版

神レベルのコード編集ソフト（SublimeText3）

メモ帳++7.3.1

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

MinGW - Minimalist GNU for Windows

このプロジェクトは osdn.net/projects/mingw に移行中です。引き続きそこでフォローしていただけます。 MinGW: GNU Compiler Collection (GCC) のネイティブ Windows ポートであり、ネイティブ Windows アプリケーションを構築するための自由に配布可能なインポートライブラリとヘッダーファイルであり、C99 機能をサポートする MSVC ランタイムの拡張機能が含まれています。すべての MinGW ソフトウェアは 64 ビット Windows プラットフォームで実行できます。