liguofeng29’s blog

個人勉強用ブログだっす。

HTML5の要素と属性 - 既存HTML要素①

HTML5 ┗━HTML5の常用要素と属性

基本要素

<!-- HTML5はDTD指定しないね -->
<!DOCTYPE html>
<html>
<head>
   <!-- 文字コード -->
   <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
   <title>基本タグ</title>
   <meta name="author" content="HTML5基本タグ" />
</head>
<body>
    <!-- テキスト出力 -->
    <h1>h1のテキスト</h1>
    <h2>h2のテキスト</h2>
    <h3>h3のテキスト</h3>
    <h4>h4のテキスト</h4>
    <h5>h5のテキスト</h5>
    <h6>h6のテキスト</h6>
    <!-- 水平線 -->
    <hr />
    <h4>SPAN使用 : SPANは自動改行しない</h4>
    <span>Tomcat</span><span>Jetty</span><span>Resin</span>
    <!-- 改行 -->
    <br />
    <h4>DIV使用 : DIVは改行を行う</h4>
    <div>Tomcat</div><div>Jetty</div><div>Resin</div>
    <h4>Pタグ使用 : 定義タグ</h4>
    <p>Tomcat<p>Jetty<p>Resin
</body>
</html>

f:id:liguofeng29:20160115223520p:plain

テキスト整形要素

<!DOCTYPE html>
<html>
<head>
   <meta name="author" content="作成者" />
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title>テキスト整形</title>
</head>
<body>
    <span><b>強調</b></span><br />
    <span><i>斜体</i></span><br />
    <span><b><i>強調斜体</i></b></span><br />
    <span><em>強調斜体</em></span><br />
    <p><strong>強調</strong></p>
    <small><span>小さいフォント</span></small><br />
    <div>通常テキスト<sup>上付き文字</sup></div>
    <span>通常テキスト<strong><sub>下付き文字</sub></strong></span><br />
    <bdo dir="ltr">左から右へ書き出す</bdo><br />
    <bdo dir="rtl">右から左へ書き出す</bdo><br />
</body>
</html>

f:id:liguofeng29:20160115225056p:plain

定義要素

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title>定義要素</title>
</head>
<body>
<!-- qタグ：引用テキストを定義する -->
<!-- ブラウザは””をつけてくれる -->
<p>googleのURLは<q cite="http://www.google.co.jp">google.co.jp</q></p>
<div>
<!-- blockquoteで長い引用文 -->
<blockquote>
あいうえおあいうえお<br>
あいうえおあいうえお<br>
あいうえおあいうえお<br>
あいうえおあいうえお</blockquote>
ここは普通のテキストです。</div>
<p>
<cite>作品１</cite>、<cite>作品２</cite>作者はXXXXです。</p>
<p>
下記はjavaコードを表示します。<br>
<code>
    public class Cat<br>
    {<br>
        private int name = "garfield";<br>
    }<br>
</code>
</p>
<!-- pre -->
<pre>
    public class Cat
    {
        private int name = "garfield";
    }
</pre>
<p>
<!-- 省略を定義 -->
中華人民共和国の略は<abbr title="中華人民共和国">中国</abbr>
<!-- addressで住所を定義 -->
XXさんの住所は<address>東京都 XXX区 XXX町 1-2-1</address>
<!-- dfnで専門用語を定義 -->
<p>
<dfn>HTML</dfn>はHYPER TEXT MAKEUP LANGUAGEの略語
</p>
<p>
テキストはキーボードから入力されていることを定義<br/>
<kbd>list -l</kbd><br/>
すべてのファイルとフォルダの詳細を表示する</p>
<p>
<!-- sampで例文を定義 -->
<samp>
例1: XXXXXXXXXXX<br/>
XXXXXXXXXXXXXXXX
</samp>
</p>
<!-- varで変数定義 -->
<var>i</var>、<var>j</var>、<var>k</var>ループで使用される変数です
<!-- delとinsで修正を定義 -->
<p>Androidは<del>MS</del><ins>Google</ins>が開発した</p>
</body>
</html>

f:id:liguofeng29:20160115231928p:plain