コミュニティ 学ぶ ツールライブラリ レジャー
検索
日本語
ホームページ > ウェブフロントエンド > htmlチュートリアル > HTMLの共通タグ

HTMLの共通タグ

WBOY
リリース： 2016-12-05 13:26:28
オリジナル
1780 人が閲覧しました

よく使用される HTML タグ:

HTMLドキュメント形式:

まず第一に、HTMLはハイパーテキストタグ言語であり、Webページを作成するための基礎となります。

第 2 に、HTML ドキュメントには少なくとも基本的な 、、、 が含まれています。本体＞ダブルラベル。

最後に、 属性タグは、HTML Web ページの一部の属性を記述し、文字エンコーディングを変換するために不可欠です。通常、国際エンコーディング utf-8 が選択されます。

リーリー

HTMLドキュメントの解析:

1. ルート タグ。 は HTML ドキュメントのルート タグであり、ページ上のすべてのコンテンツを含める必要があります 。

2. head タグ。その中のドキュメントは Web ページに表示されません。その目的は、ブラウザーがその属性を解析することです。

3. title タグは簡潔かつ簡潔である必要があり、Web ページの主要なコンテンツ、つまり Web ページのタイトルを要約できます。

4. コンテンツ タグ。これは Web ページに表示されるコンテンツでもあります。

1. 最もよく使用されるタグ:

1.

...
タイトル文字列を設定します。設定後は、黒太字で表示されます。コードと効果は次のとおりです:

リーリー リーリー
2、& lt; p & gt; & lt;/p & gt; ウェブページ内の段落を設定します。複数の場合、ブラウザのサイズに合わせて行が自動的に変更されます。テキストの行。

コードは次のとおりです: リーリー

3.
改行タグ[注意] これは終了タグのない単一のタグです。
コードと効果は次のとおりです:

リーリー リーリー 4、 & lt; hr /& gt; 分割線ラベル ▷ ▷ Web ページ内のコンテンツの分割線を設定します。 [注意] これも終了タグのない単一のタグです。 コード

と効果

は次のとおりです: リーリー リーリー 5.

センタリングタグ

▷ ドキュメントがページ全体の中央に配置されるように、Web ページ内のコンテンツの位置を設定します。

リーリー

6、

    有序列表标签【注意】要套
  1. 列表项 使用。  ▷ 设置网页中的内容，使文档有序排列。代码及效果如下：

    <span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">ol</span><span style="color: #0000ff">></span>
<span style="color: #008080">3</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第1列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
<span style="color: #008080">4</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第2列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
<span style="color: #008080">5</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第3列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
<span style="color: #008080">6</span>     <span style="color: #0000ff"></span><span style="color: #800000">ol</span><span style="color: #0000ff">><img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204204319599-592154556.png" alt=""  style="max-width:90%"  style="max-width:90%"></span></span></span></span></span></span>
    ログイン後にコピー
    <span style="color: #008080">7</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
    ログイン後にコピー
    ログイン後にコピー

    7、

      无序列表标签【注意】要套
    • 列表项 使用。  ▷ 设置网页中的内容，使文档无序排列。代码及效果如下：

      <span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">ul</span><span style="color: #0000ff">></span>
<span style="color: #008080">3</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第1列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
<span style="color: #008080">4</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第2列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
<span style="color: #008080">5</span>         <span style="color: #0000ff"><span style="color: #800000">li</span><span style="color: #0000ff">></span>我是第3列<span style="color: #0000ff"></span><span style="color: #800000">li</span><span style="color: #0000ff">></span>
<span style="color: #008080">6</span>     <span style="color: #0000ff"></span><span style="color: #800000">ul</span><span style="color: #0000ff">><img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204204218693-875385495.png" alt=""></span></span></span></span></span></span>
      ログイン後にコピー
      <span style="color: #008080">7</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      ログイン後にコピー
      ログイン後にコピー

      8、

      自定义列表标签【注意】要套
      列表项使用。 ▷ 设置网页中的内容，使文档无序排列。代码及效果如下：

      <span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">dl</span><span style="color: #0000ff">></span>
<span style="color: #008080">3</span>         <span style="color: #0000ff"><span style="color: #800000">dt</span><span style="color: #0000ff">></span>我是自定义标题1<span style="color: #0000ff"></span><span style="color: #800000">dt</span><span style="color: #0000ff">><img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204205523490-2070875690.png" alt=""></span></span></span></span>
      ログイン後にコピー
      <span style="color: #008080">4</span>         <span style="color: #0000ff"><span style="color: #800000">dd</span><span style="color: #0000ff">></span>我是自定义描述1<span style="color: #0000ff"></span><span style="color: #800000">dd</span><span style="color: #0000ff">></span>
<span style="color: #008080">5</span>         <span style="color: #0000ff"><span style="color: #800000">dt</span><span style="color: #0000ff">></span>我是自定义标题2<span style="color: #0000ff"></span><span style="color: #800000">dt</span><span style="color: #0000ff">></span>
<span style="color: #008080">6</span>         <span style="color: #0000ff"><span style="color: #800000">dd</span><span style="color: #0000ff">></span>我是自定义描述2<span style="color: #0000ff"></span><span style="color: #800000">dd</span><span style="color: #0000ff">></span>
<span style="color: #008080">7</span>     <span style="color: #0000ff"></span><span style="color: #800000">dl</span><span style="color: #0000ff">></span>
<span style="color: #008080">8</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span></span></span></span>
      ログイン後にコピー

      9、

      ログイン後にコピー
       自定义格式标签         ▷ 自定义设置网页中的内容格式。代码及效果如下：
      

      

      <span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>    <span style="color: #0000ff"><span style="color: #800000">pre</span><span style="color: #0000ff">></span>
<span style="color: #008080">3</span> <span style="color: #000000">           您好！
</span><span style="color: #008080">4</span> <span style="color: #000000">           欢迎您来到 pengbo518 博客园<img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204210310131-1915429582.png" alt=""></span></span></span>
      ログイン後にコピー
      

      <span style="color: #008080">5</span> <span style="color: #000000">           感谢您对我的关注支持！
</span><span style="color: #008080">6</span> <span style="color: #000000">           让我们共同学习探讨吧！      
</span><span style="color: #008080">7</span>    <span style="color: #0000ff"></span><span style="color: #800000">pre</span><span style="color: #0000ff">></span>
<span style="color: #008080">8</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      ログイン後にコピー
      

      

      10.  フォント形状ラベル [太字] ▷ フォントを太字に設定します。コードと効果は次のとおりです: 
      

      

      11、 フォントの形状  タグ [斜体] 斜体で表示されるフォントを設定します。  コードと効果は次のとおりです。  
12、 フォントの形状ラベル[下線] ▷   下線付きのフォントを設定します。 
      

       コードと効果は次のとおりです。   
      13、 フォントの形状ラベル[添え字] ▷   テキストを次のように設定します下付き文字が表示されます。コードと効果は次のとおりです。
14、 フォントの形状ラベル [上付き] ▷   テキストを上付き文字として設定が表示されます。  コードと効果は次のとおりです。 
      

        

           ** 10、11、12、13、14 **                    ▷ 代码及效果集合如下：
      

      

      <span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">b</span><span style="color: #0000ff">></span>《静夜思》<span style="color: #0000ff"></span><span style="color: #800000">b</span><span style="color: #0000ff">></span> 
<span style="color: #008080">3</span>     <span style="color: #0000ff"><span style="color: #800000">sub</span><span style="color: #0000ff">></span>李白<span style="color: #0000ff"></span><span style="color: #800000">sub</span><span style="color: #0000ff">></span>
<span style="color: #008080">4</span>     <span style="color: #0000ff"><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #008080">5</span>            <span style="color: #0000ff"><span style="color: #800000">i</span><span style="color: #0000ff">></span>床前明月光，疑是地上霜。<span style="color: #0000ff"></span><span style="color: #800000">i</span><span style="color: #0000ff">></span>　<br><br><span style="color: #008080">6</span>     　　    <span style="color: #0000ff"><span style="color: #800000">u</span><span style="color: #0000ff">></span>举头望明月，低头思故乡。<span style="color: #0000ff"></span><span style="color: #800000">u</span><span style="color: #0000ff">></span> </span></span></span></span></span></span>
      ログイン後にコピー
      

      <em id="__mceDel"><span style="color: #008080">7</span>         <span style="color: #0000ff"><span style="color: #800000">sup</span><span style="color: #0000ff">></span>pengbo518<span style="color: #0000ff"></span><span style="color: #800000">sup</span><span style="color: #0000ff">></span>
<span style="color: #008080">8</span>     <span style="color: #0000ff"></span><span style="color: #800000">p</span><span style="color: #0000ff">></span>
<span style="color: #008080">9</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span></span></em>
      ログイン後にコピー
      

      

      

      15、 字体标签                    ▷ 设置字体、字号、颜色等。代码语法及效果如下：
      

             语法：文本
      

      

      <span style="color: #008080"> 1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 2</span>    <span style="color: #0000ff"><span style="color: #800000">font </span><span style="color: #ff0000">size</span><span style="color: #0000ff">="+2"</span><span style="color: #ff0000"> face</span><span style="color: #0000ff">="Arial, Helvetica, sans-serif"</span><span style="color: #ff0000"> color</span><span style="color: #0000ff">="#FF0000"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 3</span> <span style="color: #000000">       HTML I love you !
</span><span style="color: #008080"> 4</span>    <span style="color: #0000ff"></span><span style="color: #800000">font</span><span style="color: #0000ff">><img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204231516740-1821234010.png" alt=""></span></span></span>
      ログイン後にコピー
      

      <span style="color: #008080"> 5</span>        <span style="color: #0000ff"><span style="color: #800000">br </span><span style="color: #0000ff">/></span>
<span style="color: #008080"> 6</span>    <span style="color: #0000ff"><span style="color: #800000">font </span><span style="color: #ff0000">size</span><span style="color: #0000ff">="+3"</span><span style="color: #ff0000"> face</span><span style="color: #0000ff">="隶书"</span><span style="color: #ff0000"> color</span><span style="color: #0000ff">="#0000FF"</span><span style="color: #0000ff">></span>
<span style="color: #008080"> 7</span> <span style="color: #000000">       热爱生活，热爱博客园
</span><span style="color: #008080"> 8</span>    <span style="color: #0000ff"></span><span style="color: #800000">font</span><span style="color: #0000ff">></span>     
<span style="color: #008080"> 9</span> <span style="color: #0000ff"><span style="color: #800000">body<span style="color: #0000ff">></span></span></span>
</span></span>
      ログイン後にコピー
      

      

      16、HTMLの共通タグ 图像标签                                ▷ 设置字体、字号、颜色等。代码语法及效果如下：
      

      　　  语法：HTMLの共通タグ
      

      

      <span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>    <span style="color: #0000ff"><span style="color: #800000">img </span><span style="color: #ff0000">src</span><span style="color: #0000ff">="images.png"</span><span style="color: #ff0000"> title</span><span style="color: #0000ff">="小鱼"</span><span style="color: #ff0000"> width</span><span style="color: #0000ff">="70px"</span><span style="color: #ff0000"> height</span><span style="color: #0000ff">="70px"</span><span style="color: #ff0000"> alt</span><span style="color: #0000ff">="鱼干"</span> <span style="color: #0000ff">/><img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204232949302-201637373.png" alt=""></span></span></span>
      ログイン後にコピー
      

      <span style="color: #008080">3</span> <span style="color: #000000">      我的小鱼干呢
</span><span style="color: #008080">4</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span>
      ログイン後にコピー
      

      

      17、超链接标签                           ▷ 创建超链接，href属性来设置页面的链接地址。代码语法及效果如下：
      

      

      <span style="color: #008080">1</span> <span style="color: #0000ff"><span style="color: #800000">body</span><span style="color: #0000ff">></span>
<span style="color: #008080">2</span>     <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="http://www.baidu.com"</span><span style="color: #0000ff">></span>百度<span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span><span style="color: #000000">||<img   style="max-width:90%" src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161205001152240-1209790473.png" alt=""></span></span></span>
      ログイン後にコピー
      

      <span style="color: #008080">3</span>     <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="http://www.taobao.com"</span><span style="color: #0000ff">></span>淘宝<span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span><span style="color: #000000">||
</span><span style="color: #008080">4</span>     <span style="color: #0000ff"><span style="color: #800000">a </span><span style="color: #ff0000">href</span><span style="color: #0000ff">="http://www.cnblogs.com"</span><span style="color: #0000ff">></span>博客园<span style="color: #0000ff"></span><span style="color: #800000">a</span><span style="color: #0000ff">></span>
<span style="color: #008080">5</span> <span style="color: #0000ff"></span><span style="color: #800000">body</span><span style="color: #0000ff">></span></span></span>
      ログイン後にコピー
      

      

      【補足】1. ファイルパス: 1. 絶対パス: ▷  絶対パスとは、ドメイン名またはドライブ文字 完全なルート。 

      

       2. 相対パス: ▷ 相対パスとは、このファイルのパスと他のファイル（またはフォルダー）とのパス関係を指します。例: 

      

        ① 二つが同じ場合フォルダー、index.html 内のリンク pengbo518.html index.html リンクで次のメソッドを使用できます。 
      

         href=" pengbo518 .html"> pengbo518 ブログパーク  
        If   pengbo518.html    ファイルは   」です。   index.html      index.html ウェイリンク内のファイルの上位パスは次のようになります:  
 pengbo518.html ">pengbo518ブログガーデン
       二. アンカーポイント: ▷ アンカーポイントの設定は、通常、特定のトピックまたはドキュメントの上部に配置されます。次に、アンカー リンクを作成します。これを介して、指定した場所にすばやく移動できます。 
      
現在のドキュメントへのアンカー ポイントへのリンク: & lt; a href = "#アンカー ポイント名" & gt;

      

      

      

      

                      
      • 
            
      
            
      
                                
      
                    関連ラベル：
                    
      
                        HTML常用标签                    
      
                
      
                                
      ソース：php.cn
      
                            
      
            
      
                                    
                        前の記事：CSSで三角形を描く方法
                    
                                    
                        次の記事：CSS における !重要な役割
                    
                            
      
            
      
       
                
      このウェブサイトの声明
      
                
      この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
      
            
      
            

            
      
                
      著者別の最新記事
      
                
            
      
            
      
                
      最新の問題
      
                
      
                                        
      
                        
      
                            SQL Count() にも 0 が必要です
                            テーブルが 1 つだけあり、0 で始まるタグの各エントリをカウントしたいと考えています。今度はこれを試します: SELECT tag,COUNT(start)ASAnzahl,us...
                            
      
                                
      
                                     から 2024-04-06 19:48:53
                                
      
                                
      
                                    
        0 
      
                                    
      1
      
                                    
      449
      
                                
      
                            
      
                        
      
                    
      
                    
      
                                        
      
                        
      
                            CSS スタイルがサイトに適用されない
                            Bootstrap5を使用してWebサイトを作成していますが、index.cssプロパティがindex.htmlに適用されません。サービス カードの上にマウスを移動すると、背景が変...
                            
      
                                
      
                                     から 2024-04-06 17:12:23
                                
      
                                
      
                                    
        0 
      
                                    
      1
      
                                    
      336
      
                                
      
                            
      
                        
      
                    
      
                    
      
                                        
      
                        
      
                            hr タグが単色白に設定されているのに半透明になるのはなぜですか?
                            HTML（ブートストラップ付き）とCSSがあり、HTMLにはクラスを持つ<hr>タグがあり、CSSにはその境界線スタイルがあります。半透明で白い色は見えますが、「固体」...
                            
      
                                
      
                                     から 2024-04-06 16:13:26
                                
      
                                
      
                                    
        0 
      
                                    
      1
      
                                    
      500
      
                                
      
                            
      
                        
      
                    
      
                    
      
                                        
      
                        
      
                            ページのメインディスプレイに画像を表示するにはどうすればよいですか?
                            私がやりたいのは、NASAAPI を使用して写真を受信することです。これらの写真は、マイページのサムネイルとメインディスプレイに表示されます。コードがサムネイルから画像を取得してペ...
                            
      
                                
      
                                     から 2024-04-06 15:33:12
                                
      
                                
      
                                    
        0 
      
                                    
      1
      
                                    
      433
      
                                
      
                            
      
                        
      
                    
      
                    
      
                                        
      
                        
      
                            Live Server を使用する Web サイトをファイルから起動すると機能しません
                            いくつかのブラウザを試してみましたが、いずれの場合も Web サイトは LiveServer で正常に動作しました。一方、Firefox/Chrome を使用してサイトを起動すると...
                            
      
                                
      
                                     から 2024-04-06 12:46:18
                                
      
                                
      
                                    
        0 
      
                                    
      1
      
                                    
      403
      
                                
      
                            
      
                        
      
                    
      
                    
      
                                    
      
            
      

            
      
                
      
                    
      関連トピック
      
                    詳細>
                    
                
      
                
      
                    
                
      
            
      
        
      
    
      

    
      
    
    
        
      
            
      人気のおすすめ
      
            
      
                
            
      
        
      
        
        
      
            
      
                
      人気のチュートリアル
      
                詳細>
                
            
      
            
      
                
      
                    
      関連するチュートリアル 
      
                    
      人気のおすすめ
      
                    
      最新のコース
      
                
      
                
                
                
            
      
            
        
      

        
      
            
      
                
      最新のダウンロード
      
                詳細>
                
            
      
                        
            
      
                
      
                    
      ウェブエフェクト 
      
                    
      公式サイト
      
                    
      サイト素材
      
                    
      フロントエンドテンプレート