HTML テキストの書式設定

HTML では、太字、斜体、テキストの方向など、多くの書式設定された出力要素を定義できます。これらの書式設定されたタグは、
タグ機能に従って次の 2 つの側面に分けることができます。テキスト書式設定タグ「コンピュータ出力」タグ引用および用語定義タグ
タグ機能の実装に従って、次のように分割できます:
コンテンツベースのスタイルタグ物理スタイルに基づいたタグ
まず、タグ機能の実装の観点からテキストの書式設定を見てみましょう。
1. コンテンツベースのスタイルタグコンテンツベースのスタイルは次のことを示します。ブラウザはそれが何であるか含まれているテキストには特別な意味、コンテキスト、または使用法があり、ブラウザはその意味、コンテキスト、または使用法と一致する形式をテキストに適用します。
コンテンツベースのスタイルタグは次のとおりです:
1 ) は略語を表します
2) <頭字語> は最初の文字のみを取る略語を定義します
 は、コンピューターのソース コードまたはその他の機械可読コードを表すために使用されます。 + 入力されたテキストはブラウザによって固定幅フォントで表示されます
       
7)  タグは  タグと同じで、テキストの強調を示します。 8)  は、ユーザーが指定した変数名または値を表します。
       コンテンツベースのスタイルは、特別な意味を持つラベルで囲まれたテキストを表示します。これらの特別な意味を持たずに、単に異なるテキスト表示効果を生成したい場合は、これらのタグを使用しないことをお勧めします。ただし、
       は強調を意味し、それに含まれるテキストは太字で表示されます。太字のテキストを作成したい場合は、 タグを使用せず、 タグを使用してください。
2. コンテンツベースのタグスタイルは、これらのタグが特別な意味を表すことをブラウザーに伝えます。これにより、特別な場合に、テキストを特別な方法で表示する必要がある場合があり、これには物理ベースのスタイルを使用する必要があります。太字 (太字) イタリック <イタリック )等幅、下線、取り消し線、大きい、小さい、上付き、下付き
太字
大きいフォント
イタリック
削除、現在は一般的に使用されていません。代わりに  を使用できます。
小さいフォント
下線
<下付き>上付き^{下付き付き}
等幅フォント
機能分類は以上です。上記のタグと重複するタグが多いため、以下では上記に挙げていないタグのみ詳しく紹介します。 .
テキスト書式設定タグ

タグ 斜体フォントを定義します
定義より強い強調_{上付き文字を定義します}
 定義を削除します
 非推奨です。代わりに del を使用してください。 gt; コンピュータコードを定義します。
 キーボードコードを定義します。
 コンピューター コード サンプルの定義。
 タイプライター コードを定義します。
 変数を定義します。
 フォーマット済みテキストを定義します。
 は廃止されました。代わりに  を使用してください。
<平文>は非推奨です。代わりに 
 を使用してください。
 は非推奨になりました。代わりに <pre> を使用してください。</strong></p><p></p><strong>引用、引用、および用語の定義<p><strong></strong></p><p><br>タグ</p>説明<p><span style="line-height: 1.76em;"></span></p><p><br><abbr> 定義の略語。</p><p><頭字語> 頭字語の定義。</p><p><アドレス> アドレスを定義します。</p><p><bdo> テキストの方向を定義します。</p><p><blockquote> 長い引用符を定義します。</p><p><q> 短い引用符を定義します。</p><p><cite> 定義参照、引用。</p><p><dfn> 定義プロジェクトを定義します。</p><p><span style="font-size: 20px;"><strong>インスタンス:</strong></span><strong><br></strong></p><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <b>This text is bold</b> <br /> <strong>This text is strong</strong> <br /> <big>This text is big</big> <br /> <em>This text is emphasized</em> <br /> <i>This text is italic</i> <br /> <small>This text is small</small> <br /> This text contains <sub>subscript</sub> <br /> This text contains <sup>superscript</sup> </body> </html></pre><p><span style="font-size: 18px;"><strong>インスタンス2:</strong></span></p><pre class="brush:php;toolbar:false"><!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <code>Computer code</code> <br /> <kbd>Keyboard input</kbd> <br /> <tt>Teletype text</tt> <br /> <samp>Sample text</samp> <br /> <var>Computer variable</var> <br /> <p> <b>注释：</b>这些标签常用于显示计算机/编程代码。 </p> </body> </html></pre><p><span style="font-size: 18px;"></span><br></p></strong></strong>
      </div>
      <strong><strong></strong></strong>
     </div>
     <strong><strong><a class="course-btn course_code_header_next" href="//m.sbmmt.com/ja">学び続ける</a></strong></strong>
    </div>
    <strong><strong>
      <div class="layui-col-md6 editor-box">
       <div id="code_spread_shrink">
        <div id="code_spread_shrink_show" unselectable="on">
         <span>||</span>
        </div>
       </div>
       <div class="editor-tab js-editor-tab">
        <div class="editor-left icon-left editor-op"></div>
        <div class="editor-view">
         <ul class="clearfix" id="J_TabType" style="width: 120px; margin-left: 0px;">
          <li class="ui-tabs-active"><a href="javascript:;">新しいファイル</a></li>
         </ul>
        </div>
        <div class="editor-right icon-right editor-op"></div>
       </div>
       <div id="editor-tabs-html" data-filename="index.html" data-lang="php" style="font-size: 16px;height:600px">
        <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>php中文网(php.cn)</title> <script type="text/javascript" src="/js/jquery.3.5.2.min.m.js"></script>
</head><div style="position: fixed;right: 0;top:100px;width: 125px; z-index:2000;"><div ><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php" ><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div><div style="position: fixed;left: 0;top: 100px;width: 125px;z-index:2000;"><div><a target="_blank" rel="nofollow" href="https://www.520xingyun.com/from/188bet.php"><img width="120px" height="550px" src="https://www.520xingyun.com/images/188_120.gif"></a></div></div> <body> <b>这个文本是加粗的</b> <br /> <strong>这个文本是加粗的</strong> <br /> <big>这个文本字体放大</big> <br /> <em>这个文本是斜体的</em> <br /> <i>这个文本是斜体的</i> <br /> <small>这个文本是缩小的</small> <br /> 这个文本包含 <sub>下标</sub> <br /> 这个文本包含 <sup>上标</sup> </body> </html>
       </div>
       <div class="editor-btn">
        <div class="editor-btn-inner">
         <a href="javascript:;" class="code-btn-submit" id="J_Commit" title="提出する">提出する</a>
         <a href="javascript:;" class="code-btn-reset " id="J_EditorReset" title="リセットコード">リセットコード</a>
         <div class="aotorun" style="display: block;">
          <input type="checkbox" id="aotoruncheck" title="選択すると、コードの変更が自動的に有効になります。チェックを外した場合、有効にするために送信が必要です">
          <label for="aotoruncheck" title="選択すると、コードの変更が自動的に有効になります。チェックを外した場合、有効にするために送信が必要です">自動運転</label>
         </div>
        </div>
       </div>
      </div>
      <div class="layui-col-md3" id="viewPort-content"></div>
      <!-- 右侧章节列表 --></strong></strong>
   </div>
   <strong><strong></strong></strong>
  </div>
  <strong><strong>
    <div class="phpSyyBox">
     <div class="phpSyyLeft">
      <div class="phpSyySyj">
       <span class="right"><a href="//m.sbmmt.com/ja/code/431.html" title="前のセクション"><b class="icon3"></b>前のセクション</a></span>
       <em></em>
       <span class="right"><a href="//m.sbmmt.com/ja/code/438.html" title="次のセクション"><b class="icon2"></b>次のセクション</a></span>
      </div>
      <div class="phpSyyQhlx">
       <a href="//m.sbmmt.com/ja/course.html" target="_blank" title="チュートリアルリスト"><b></b>チュートリアルリスト</a>
      </div>
      <div class="phpSyyHqbz">
       <a href="//m.sbmmt.com/ja/wenda.html" target="_blank" title="ヘルプの取得"><b></b>ヘルプの取得</a>
      </div>
      <div class="clear"></div>
     </div>
     <div class="clear"></div>
    </div>
    <div class="layui-main">
     <div class="layui-row">
      <div class="layui-col-md9">
       <div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
        <ul class="layui-tab-title">
         <li class="layui-this">おすすめコース</li>
         <li id="code_down_li">コースウェアのダウンロード</li>
        </ul>
        <div class="layui-tab-content">
         <!--推荐课程-->
         <div class="layui-tab-item layui-show">
          <ul class="diy-vodeo diy-li-left php-video-ul">
           <li><a href="//m.sbmmt.com/ja/course/1441.html" title=""><img alt="HTML+CSS クイックスタート" src="https://img.php.cn/upload/course/000/000/068/62ea1e8b3c8e0915.png" height="124" width="100%">
             <div class="php-course-intro">
              <h3><i>初級</i>HTML+CSS クイックスタート</h3>
             </div>
             <div class="php-course-bottom">
              <span class="l">2940 人が視聴しています</span>
             </div></a></li>
           <li><a href="//m.sbmmt.com/ja/course/1022.html" title=""><img alt="HTML+CSS Web ページの基本" src="https://img.php.cn/upload/course/000/000/068/6256990bbf04e971.png" height="124" width="100%">
             <div class="php-course-intro">
              <h3><i>初級</i>HTML+CSS Web ページの基本</h3>
             </div>
             <div class="php-course-bottom">
              <span class="l">16677 人が視聴しています</span>
             </div></a></li>
           <li><a href="//m.sbmmt.com/ja/course/1056.html" title=""><img alt="HTML+CSS の簡単な紹介" src="https://img.php.cn/upload/course/000/000/067/64be2dec04de7806.png" height="124" width="100%">
             <div class="php-course-intro">
              <h3><i>初級</i>HTML+CSS の簡単な紹介</h3>
             </div>
             <div class="php-course-bottom">
              <span class="l">15795 人が視聴しています</span>
             </div></a></li>
           <li><a href="//m.sbmmt.com/ja/course/1047.html" title=""><img alt="HTML+CSSの基礎知識" src="https://img.php.cn/upload/course/000/000/010/5cbd225e3a348614.jpeg" height="124" width="100%">
             <div class="php-course-intro">
              <h3><i>初級</i>HTML+CSSの基礎知識</h3>
             </div>
             <div class="php-course-bottom">
              <span class="l">19894 人が視聴しています</span>
             </div></a></li>
           <li><a href="//m.sbmmt.com/ja/course/8.html" title=""><img alt="html/cssクイックスタート" src="https://img.php.cn/upload/course/000/000/068/625908118aa86152.png" height="124" width="100%">
             <div class="php-course-intro">
              <h3><i>初級</i>html/cssクイックスタート</h3>
             </div>
             <div class="php-course-bottom">
              <span class="l">18491 人が視聴しています</span>
             </div></a></li>
           <li><a href="//m.sbmmt.com/ja/course/1033.html" title=""><img alt="HTML+CSS+PHP を始めましょう" src="https://img.php.cn/upload/course/000/000/067/64be2bcc4c3bf736.png" height="124" width="100%">
             <div class="php-course-intro">
              <h3><i>中級</i>HTML+CSS+PHP を始めましょう</h3>
             </div>
             <div class="php-course-bottom">
              <span class="l">29075 人が視聴しています</span>
             </div></a></li>
           <li><a href="//m.sbmmt.com/ja/course/10.html" title=""><img alt="HTML+CSSをすぐに学べます" src="https://img.php.cn/upload/course/000/000/068/6253e1723d354580.png" height="124" width="100%">
             <div class="php-course-intro">
              <h3><i>初級</i>HTML+CSSをすぐに学べます</h3>
             </div>
             <div class="php-course-bottom">
              <span class="l">34280 人が視聴しています</span>
             </div></a></li>
           <li><a href="//m.sbmmt.com/ja/course/1566.html" title=""><img alt="HTML+CSSの基礎と実践" src="https://img.php.cn/upload/course/000/000/067/6497af87c2a31936.png" height="124" width="100%">
             <div class="php-course-intro">
              <h3><i>初級</i>HTML+CSSの基礎と実践</h3>
             </div>
             <div class="php-course-bottom">
              <span class="l">2449 人が視聴しています</span>
             </div></a></li>
           <li><a href="//m.sbmmt.com/ja/course/12.html" title=""><img alt="HTML+CSS基礎入門チュートリアル" src="https://img.php.cn/upload/course/000/000/068/6253de8ca1761701.png" height="124" width="100%">
             <div class="php-course-intro">
              <h3><i>初級</i>HTML+CSS基礎入門チュートリアル</h3>
             </div>
             <div class="php-course-bottom">
              <span class="l">79888 人が視聴しています</span>
             </div></a></li>
           <li><a href="//m.sbmmt.com/ja/course/11.html" title=""><img alt="HTML+CSS 簡単入門チュートリアル" src="https://img.php.cn/upload/course/000/000/068/6253eb19a38f5133.png" height="124" width="100%">
             <div class="php-course-intro">
              <h3><i>初級</i>HTML+CSS 簡単入門チュートリアル</h3>
             </div>
             <div class="php-course-bottom">
              <span class="l">18773 人が視聴しています</span>
             </div></a></li>
           <li><a href="//m.sbmmt.com/ja/course/968.html" title=""><img alt="HTML/CSSの技術知識を毎日共有" src="https://img.php.cn/upload/course/000/000/068/625d302f0f4b7990.jpg" height="124" width="100%">
             <div class="php-course-intro">
              <h3><i>初級</i>HTML/CSSの技術知識を毎日共有</h3>
             </div>
             <div class="php-course-bottom">
              <span class="l">9768 人が視聴しています</span>
             </div></a></li>
           <li><a href="//m.sbmmt.com/ja/course/210.html" title=""><img alt="2016年度新カリキュラムシステムhtml+css動画" src="https://img.php.cn/upload/course/000/000/068/625686f8a1bca597.png" height="124" width="100%">
             <div class="php-course-intro">
              <h3><i>初級</i>2016年度新カリキュラムシステムhtml+css動画</h3>
             </div>
             <div class="php-course-bottom">
              <span class="l">16165 人が視聴しています</span>
             </div></a></li>
          </ul>
         </div>
         <div class="layui-tab-item">
          <div id="code_down" style="margin: 0 30px 26px;">
           <div class="no_data" style="text-align: center;min-height: 490px;line-height:112px;padding: 190px 0;box-sizing: border-box;color: #e3e3e3;font-size: 20px;">
            <div style="background: url(/static/images/lesson_video_lists.png) no-repeat;margin-right: 20px;width: 118px;height: 112px;background-position: 0 -389px;float:left;"></div>現時点ではコースウェアはダウンロードできません。現在スタッフが整理中です。今後もこのコースにもっと注目してください〜
           </div>
          </div>
         </div>
        </div>
       </div>
      </div>
      <div class="layui-col-md3 video-right-course">
       <div class="layui-col-md12 title">
        <p>このコースを視聴した生徒はこちらも学んでいます</p>
       </div>
       <div class="layui-col-md12 php-video-img">
        <a class="recommend" href="//m.sbmmt.com/ja/course/812.html" target="_blank"><img width="300" height="160" src="https://img.php.cn/upload/course/000/000/041/620debc3eab3f377.jpg" alt="最新の ThinkPHP 5.1 ワールドプレミアビデオチュートリアル (PHP エキスパートになるための 60 日間のオンライン トレーニング コース)"><span class="font14">491468 回再生</span></a>
       </div>
       <div class="layui-col-md12 php-video-list">
        <ul>
         <li><a class="font14 color66" title="PHP でビジネスを始めることについて簡単に説明しましょう" href="//m.sbmmt.com/ja/course/1503.html" target="_blank">PHP でビジネスを始めることについて簡単に説明しましょう</a></li>
         <li><a class="font14 color66" title="Web フロントエンド開発の簡単な紹介" href="//m.sbmmt.com/ja/course/901.html" target="_blank">Web フロントエンド開発の簡単な紹介</a></li>
         <li><a class="font14 color66" title="恥ずかしいことの百科事典サイトを模倣したミニ版MVCフレームワークの大規模実践天龍宝開発" href="//m.sbmmt.com/ja/course/836.html" target="_blank">恥ずかしいことの百科事典サイトを模倣したミニ版MVCフレームワークの大規模実践天龍宝開発</a></li>
         <li><a class="font14 color66" title="PHP 実践開発入門: PHP クイック作成 [中小企業フォーラム]" href="//m.sbmmt.com/ja/course/902.html" target="_blank">PHP 実践開発入門: PHP クイック作成 [中小企業フォーラム]</a></li>
         <li><a class="font14 color66" title="ログイン認証と従来の掲示板" href="//m.sbmmt.com/ja/course/866.html" target="_blank">ログイン認証と従来の掲示板</a></li>
         <li><a class="font14 color66" title="コンピュータネットワークの知識収集" href="//m.sbmmt.com/ja/course/1463.html" target="_blank">コンピュータネットワークの知識収集</a></li>
         <li><a class="font14 color66" title="クイックスタート Node.JS フルバージョン" href="//m.sbmmt.com/ja/course/1462.html" target="_blank">クイックスタート Node.JS フルバージョン</a></li>
         <li><a class="font14 color66" title="あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]" href="//m.sbmmt.com/ja/course/1455.html" target="_blank">あなたを最もよく理解するフロントエンドコース: HTML5/CSS3/ES6/NPM/Vue/...[オリジナル]</a></li>
         <li><a class="font14 color66" title="独自の PHP MVC フレームワークを作成する (40 章の詳細/詳細/初心者が先に進むには必読)" href="//m.sbmmt.com/ja/course/1467.html" target="_blank">独自の PHP MVC フレームワークを作成する (40 章の詳細/詳細/初心者が先に進むには必読)</a></li>
        </ul>
       </div>
      </div>
     </div>
    </div>
    <div class="phpcn-modal-layer fixed" style="z-index:9004;visibility:visible;opacity:1;display:none;">
     <div class="phpcn-modal-title">
      <div class="phpcn-modal-draggable dragging">
       <span>注</span>
       <a href="javascript:void(0)" class="phpcn-icon-close phpcn-modal-close js-modal-close">X</a>
      </div>
     </div>
     <div class="phpcn-modal-inner">
      <div class="phpcn-modal-dialog"></div>
     </div>
    </div>
    <div class="phpFoot">
     <div class="phpFootIn">
      <div class="phpFootCont">
       <div class="phpFootLeft">
        <dl>
         <dt>
          <a href="//m.sbmmt.com/ja/about/us.html" rel="nofollow" target="_blank" title="私たちについて" class="cBlack">私たちについて</a>
          <a href="//m.sbmmt.com/ja/about/disclaimer.html" rel="nofollow" target="_blank" title="免責事項" class="cBlack">免責事項</a>
          <a href="//m.sbmmt.com/ja/update/article_0_1.html" target="_blank" title="Sitemap" class="cBlack">Sitemap</a>
          <div class="clear"></div>
         </dt>
         <dd class="cont1">
          PHP中国語ウェブサイト：福祉オンライン PHP トレーニング，PHP 学習者の迅速な成長を支援します！
         </dd>
        </dl>
       </div>
      </div>
     </div>
    </div><input type="hidden" id="verifycode" value="/captcha.html"></strong></strong>
 </body>
</html>