HTMLの共通タグ

よく使用される 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、

有序列表标签【注意】要套

列表项 使用。  ▷ 设置网页中的内容，使文档有序排列。代码及效果如下：

<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/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204204319599-592154556.png" 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/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204204218693-875385495.png" 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/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204205523490-2070875690.png" 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/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204210310131-1915429582.png" 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/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204231516740-1821234010.png" 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、 图像标签                                ▷ 设置字体、字号、颜色等。代码语法及效果如下：

　　  语法：

<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/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161204232949302-201637373.png" 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/imghw/default1.png" data-src="http://images2015.cnblogs.com/blog/1072336/201612/1072336-20161205001152240-1209790473.png" 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;