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

アンカー(Anchor)要素

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> アンカー(Anchor) </title>
</head>
<body>
<!-- 現在のページで開く -->
<a href="http://www.google.co.jp"><b>現在ページ</b></a><br />
<!-- 新規ページで開く -->
<a href="http://www.google.co.jp"
    target="_blank"><em>新規ページ</em></a><br />
<!-- イメージのリンク -->
<a href="http://www.google.co.jp"><img src="logo.jpg"
    alt="ぐーぐるURL"/></a><br />
<!-- 相対パス -->
<a href="text.html">相対パス</a><br />
<!-- リンク先の指定位置ジャンプ -->
<a href="text.html#a">リンク先の指定位置までジャンプ</a><br />
<!-- メール -->
<a href="mailto:info@htmq.com">メール</a><br>
</body>
</html>

リスト要素

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title>リスト要素</title>
</head>
<body>
    <ul>
        <li>JAVA</li>
        <li>c#</li>
        <li>PHP</li>
    </ul>
    <ol start="2" type="I" reversed>
        <li>JAVA</li>
        <li>c#</li>
        <li>PHP</li>
    </ol>
    <dl>
        <dt>言語</dt>
        <dd>JAVA</li>
        <dd>c#</li>
        <dd>PHP</li>
        <dt>フレームワーク</dt>
        <dd>Struts</dd>
        <dd>Spring</dd>
    </dl>
</body>
</html>

f:id:liguofeng29:20160115234726p:plain

イメージ要素

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=GBK" />
   <title> イメージ要素 </title>
</head>
<body>
<img src="logo.jpg" alt="おれおれLogo" /><br />
<!-- 高、幅� -->
<img src="logo.jpg" width="300" height="120"
    alt="おれおれLogo" /><br />
<!-- ｘｘｘｘ -->
<img src="logo.jpg" width="300" 
    height="120" border="0" usemap="#test"
    alt="おれおれLogo" /><br />
<!-- イメージmap -->
<map name="test" id="test">
    <area shape="circle" coords="57,55,25" alt="四角" href="http://google.co.jp"/>
    <area shape="poly" coords="188,28,185,50,200,74,224,72,246,51"
        alt="多角" href="http://yahoo.co.jp"/>
</map>
</body>
</html>

f:id:liguofeng29:20160116000341g:plain

フレーム要素

HTML5では、frameset,frame,noframesを削除し、iframeのみ残している。

<!DOCTYPE html>
<html>
<head>
   <meta http-equiv="Content-Type" content="text/html; charset=SJIS" />
   <title> iframe</title>
</head>
<body>
<iframe src="img.html" width="200" height="120"></iframe>
</body>
</html>

f:id:liguofeng29:20160117144611p:plain

liguofeng29’s blog

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

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