- PDF 無料ダウンロード

Size: px

Start display at page:

Download ""

ひろじたけはな
7 years ago
Views:

6 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>...</title>... <img> <img />

7 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>...</title>...

8 <!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8" /> <title>...</title>... charset

9 <meta http-equiv="content-type"... /> <meta http-equiv="content-style-type"... /> <meta http-equiv="content-script-type"... /> <link rel="stylesheet" type="text/css"... /> <script type="text/javascript"... ></script> head

10 <div id="header"> <header id="page-header"> <div id="footer"> <div id="utility-nav">! <footer id="page-footer"> <nav id="utility-nav"> <div id="news"> <section class="news"> : : id class

11 div div div div div div

12 header nav section aside section footer

14 section, nav, article, aside, hgroup, header, footer, figure, figcaption, summary { display: block; }

16 /* */ #header { height: 80px; } #header h1 { width: 960px; margin: 0 auto; padding: 20px px; }! /* */ #page-header { height: 80px; } #page-header h1 { width: 960px; margin: 0 auto; padding: 20px px; } id class

23

26 地ならし

32 全部乗せ

38 section nav article aside hgroup h1 h2 header footer figure figcaption time mark ruby rt rp wbr bdi

39 canvas embed track math svg datalist keygen video audio source output progress meter details summary command

40 address hr strong small i u b menu

42 section nav article aside hgroup h1 h2 header footer figure figcaption time mark ruby rt rp wbr bdi

45 <section> <section>

46 <section> <section id="main"> <h1> </h1> <section class="highlight"> <h2>2012 Spring Catalog </h2> <p>...</p> </section> <section class="highlight"> <h2> </h2> <p>...</p> </section> </section> <section>

47 <div>

48 <article>

49 <article>

50 <article>

51 <article>

52 <article> <section> <article> <article> <article>

53 <nav>

55 ナビゲーションの嵐

56 <nav> <nav>

57 <aside>

58 <hgroup> h1 h2 <h1> <h2> <h1> <h6> <hgroup>

59 <h1> <h6> <h1>

60 <header> <footer> <body> <section> <article>

61 <address> <article>

65 header nav

68 header nav section section nav section

69 section section section

70 footer section

72 header nav h1 form p ul section h3 h2 section h2 ul p nav section section ul

73 ul section h2 dl section section

74 h2 section dl div small p footer

76 <em> <strong> <em> <strong> <em> <strong> <em> <strong>

77 <figure> <img> <figcaption> <figure> <img src="..." alt="..." /> <figcaption> </figcaption> </figure>

78 <a> <a href="..."> <div class="detail"> <h3> </h3> <p> </p> </div> </a>

80 <time> datetime <time datetime=" "> </time> <ruby> <mark> <hr>

83 base command link meta noscript script style title article aside nav section h1 h2 h3 h4 h5 h6 hgroup a abbr address area(with map) article aside audio b bdi bdo blockquote br button canvas cite code command datalist del details dfn div dl em embed fieldset figure footer form h1 h2 h3 h4 h5 h6 header hgroup hr i iframe img input ins kbd keygen label map mark math menu meter nav noscript object ol output p pre progress q ruby s samp script section select small span strong style(with scoped attribute) sub sup svg table textarea time u ul var video wbr text(implicit element) abbr area(with map) audio b bdi bdo br button canvas cite code command datalist dfn em embed i iframe img input kbd keygen label mark math meter noscript object output progress q ruby s samp script select small span strong sub sup svg textarea time u var video wbr a del ins map audio canvas embed iframe img math object svg video a audio(with controls attribute) button details embed iframe img(with usemap) input(excepting type="hidden") keygen label menu(with type="toolbar") object(with usemap) select textarea video(with controls attribute)

86 <h1> <h6> <hgroup> <section> <article> <aside> <nav> <body> <blockquote> <details> <fieldset> <figure> <td>

87 <header> <h1> </h1> <h2> </h2> </header> <h3> </h3> <p> </p>... <header> <hgroup> <h1> </h1> <h2> </h2> </hgroup> </header> <h3> </h3> <p> </p> <h1> <h6>... <hgroup>

88 <h1> </h1> <p> </p> <h2> </h2> <p> </p> <h3> </h3> <p> </p>... <h1> </h1> <p> </p> <article> <h1> </h1> <p> </p> <h2> </h2> <p> </p> </article>...

89 <h1> </h1> <p> </p> <h2> </h2> <p> </p> <h3> </h3> <p> </p>... <h1> </h1> <p> </p> <blockquote> <h2> </h2> <p> </p> </blockquote> <h3> </h3> <p> </p>...

90 <section> <h1> </h1> <section> <h2> </h2> <section> <h3> </h3> </section> </section> </section> <section> <h1> </h1> <section> <h1> </h1> <section> <h1> </h1> </section> </section> </section> <h1> </h1> <h2> </h2> <h3> </h3>

97 type="search" type="tel" type="url" type=" " type="datetime" type="date" input type="month" type="week" type="time" type="datetime-local" type="number" type="range" type="color" html manifest

98 contenteditable contextmenu draggable hidden spellchack translate data-* * role aria-* * itemscope input textarea select autocomplete input textarea select list datalist input textarea select required input textarea select pattern input textarea select step input textarea select placeholder input textarea select autofocus input textarea select form form

100

101

102 <input... x-autocompletetype="surname" /> <input... x-autocompletetype="given-name" /> <input... x-autocompletetype=" " /> : : <input... x-autocompletetype="state" /> <input... x-autocompletetype="city" /> <input... x-autocompletetype="address-line1" /> <input... x-autocompletetype="address-line2" /> x-autocompletetype

103

104 async defer <script async defer src="..."></script> async defer async defer

105 scoped <section> <style scoped> p { color: black; } </style> <h1> </h1> <p> </p>  </section> <p> </p>

106 @global <section> <style p { color: black; } </style> <h1> </h1> <p> </p>  </section> <p> </p>  scoped

107 data-* <a data-url="..." data-title="..."> </a> <img src="..." alt=" " />

108 role aria-* <section id="main" role="main"> <li role="treeitem" aria-expanded="true">

109 itemscope itemtype itemprop <div itemscope itemtype=" <h1 itemprop="name"> </h1> <span> <span itemprop="director"> </span> </span> <span itemprop="genre"> </span> <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer"> </a> </div>

110

111

112

113 ありがとうございました

HTMLとメタデータ

HTMLとメタデータ http://www2.mmc.atomi.ac.jp/~artnavi1/lib rarysci/index.htmlを例にHTMLを理解する IPアドレスドメイン名 http://www2.mmc.atomi.ac.jp httpとはhyper Text Transfer Protocol( 何でもリンクできるテキストの通信手順 : 説明 JPNIC)