検索
ホームページウェブフロントエンドhtmlチュートリアルHTMLの共通タグ

HTMLの共通タグ

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB
Dec 05, 2016 pm 01:26 PM

よく使用される 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 src="/static/imghwm/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204204319599-592154556.png?x-oss-process=image/resize,p_40" class="lazy"   style="max-width:90%" 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 src="/static/imghwm/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204204218693-875385495.png?x-oss-process=image/resize,p_40" class="lazy"   style="max-width:90%" 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 src="/static/imghwm/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204205523490-2070875690.png?x-oss-process=image/resize,p_40" class="lazy"   style="max-width:90%" 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 src="/static/imghwm/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204210310131-1915429582.png?x-oss-process=image/resize,p_40" class="lazy"   style="max-width:90%" 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 src="/static/imghwm/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204231516740-1821234010.png?x-oss-process=image/resize,p_40" class="lazy"   style="max-width:90%" 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 src="/static/imghwm/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204232949302-201637373.png?x-oss-process=image/resize,p_40" class="lazy"   style="max-width:90%" 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 src="/static/imghwm/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161205001152240-1209790473.png?x-oss-process=image/resize,p_40" class="lazy"   style="max-width:90%" 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;

      

      

      

      

      • 声明
      この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
      関連記事
      HTML：Webページの構造の構築HTML：Webページの構造の構築Apr 14, 2025 am	 12:14 AM
      HTMLは、Webページ構造の構築の基礎です。 1。HTMLは、コンテンツ構造とセマンティクス、および使用などを定義します。タグ。 2. SEO効果を改善するために、などのセマンティックマーカーを提供します。 3.タグを介したユーザーの相互作用を実現するには、フォーム検証に注意してください。 4. JavaScriptと組み合わせて、動的効果を実現するなどの高度な要素を使用します。 5.一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれ、検証ツールが必要です。 6.最適化戦略には、HTTP要求の削減、HTMLの圧縮、セマンティックタグの使用などが含まれます。
      テキストからウェブサイトへ：HTMLの力テキストからウェブサイトへ：HTMLの力Apr 13, 2025 am	 12:07 AM
      HTMLは、Webページを構築するために使用される言語であり、タグと属性を使用してWebページの構造とコンテンツを定義します。 1）htmlは、などのタグを介してドキュメント構造を整理します。 2）ブラウザはHTMLを分析してDOMを構築し、Webページをレンダリングします。 3）マルチメディア関数を強化するなど、HTML5の新機能。 4）一般的なエラーには、閉じられていないラベルと引用されていない属性値が含まれます。 5）最適化の提案には、セマンティックタグの使用とファイルサイズの削減が含まれます。
      HTML、CSS、およびJavaScriptの理解：初心者向けガイドHTML、CSS、およびJavaScriptの理解：初心者向けガイドApr 12, 2025 am	 12:02 AM
      webdevelopmentReliesOnhtml、css、andjavascript：1）htmlStructuresContent、2）cssStylesit、および3）Javascriptaddsinteractivity、形成、
      HTMLの役割：Webコンテンツの構造HTMLの役割：Webコンテンツの構造Apr 11, 2025 am	 12:12 AM
      HTMLの役割は、タグと属性を使用してWebページの構造とコンテンツを定義することです。 1。HTMLは、読みやすく理解しやすいようなタグを介してコンテンツを整理します。 2。アクセシビリティとSEOを強化するには、セマンティックタグなどを使用します。 3. HTMLコードの最適化により、Webページの読み込み速度とユーザーエクスペリエンスが向上する可能性があります。
      HTMLとコード：用語を詳しく見るHTMLとコード：用語を詳しく見るApr 10, 2025 am	 09:28 AM
      htmlisaspecifictypeofcodefocuseduructuringwebcontent
      HTML、CSS、およびJavaScript：Web開発者に不可欠なツール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の役割：コアの責任HTML、CSS、およびJavaScriptの役割：コアの責任Apr 08, 2025 pm	 07:05 PM
      HTMLはWeb構造を定義し、CSSはスタイルとレイアウトを担当し、JavaScriptは動的な相互作用を提供します。 3人はWeb開発で職務を遂行し、共同でカラフルなWebサイトを構築します。
      HTMLは初心者のために簡単に学ぶことができますか？HTMLは初心者のために簡単に学ぶことができますか？Apr 07, 2025 am	 12:11 AM
      HTMLは、簡単に学習しやすく、結果をすばやく見ることができるため、初心者に適しています。 1）HTMLの学習曲線はスムーズで簡単に開始できます。 2）基本タグをマスターして、Webページの作成を開始します。 3）柔軟性が高く、CSSおよびJavaScriptと組み合わせて使用​​できます。 4）豊富な学習リソースと最新のツールは、学習プロセスをサポートしています。
      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ヘンタイを無料で生成します。
      もっと見る
      人気の記事
      R.E.P.O.説明されたエネルギー結晶と彼らが何をするか（黄色のクリスタル）
      3週間前By尊渡假赌尊渡假赌尊渡假赌
      R.E.P.O.最高のグラフィック設定
      3週間前By尊渡假赌尊渡假赌尊渡假赌
      アサシンのクリードシャドウズ：シーシェルリドルソリューション
      2週間前ByDDD
      R.E.P.O.誰も聞こえない場合はオーディオを修正する方法
      3週間前By尊渡假赌尊渡假赌尊渡假赌
      WWE 2K25：Myriseのすべてのロックを解除する方法
      4週間前By尊渡假赌尊渡假赌尊渡假赌
      もっと見る
      ホットツール
      SAP NetWeaver Server Adapter for Eclipse
      SAP NetWeaver Server Adapter for Eclipse
      Eclipse を SAP NetWeaver アプリケーション サーバーと統合します。
      AtomエディタMac版ダウンロード
      AtomエディタMac版ダウンロード
      最も人気のあるオープンソースエディター
      ZendStudio 13.5.1 Mac
      ZendStudio 13.5.1 Mac
      強力な PHP 統合開発環境
      VSCode Windows 64 ビットのダウンロード
      VSCode Windows 64 ビットのダウンロード
      Microsoft によって発売された無料で強力な IDE エディター
      ゼンドスタジオ 13.0.1
      ゼンドスタジオ 13.0.1
      強力な PHP 統合開発環境
      もっと見る
      ホットトピック
      Gmailメールのログイン入り口はどこですか？
      7489
      15
      CakePHP チュートリアル
      1377
      52
      Steamのアカウント名の形式は何ですか
      77
      11
      Win11 Activation Key Permanent
      52
      19
      NYTの接続はヒントと回答です
      19
      41
      もっと見る