-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathtag.html
182 lines (168 loc) · 8.12 KB
/
tag.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>簡単！必修HTMLタグ一覧！</title>
<style>
body{
margin:0;
background:#F3F3F3;
}
h1{
text-align: center;
color:aquamarine;
background:lightgray;
text-shadow:5px 5px 3px black;
margin-top:0;
padding:50px;
}
h2{
border-left:15px solid blue;
}
.main{
margin:0 30px 0 30px;;
}
nav{
text-align: center;
border:3px solid gray;
margin:0% 35% 0% 35%;
font-size: 30px;
}
nav ul{
font-size:initial;
text-align: left;
}
nav li{
margin:5px 0px 5px 0px;
}
nav li a{
color: gray;
}
nav li a:hover{
color:darkblue;
}
</style>
</head>
<body>
<h1 id="top" style="font-size:300%">簡単！必修HTMLタグ一覧！</h1>
<span style="color:red">注：このページに有るタグが全てではありません。が、よく使うのはこいつらです。</span><br>
ちなみにこのページのソースコードは全要素をhtmlファイル1つに突っ込んでる都合上、かなり汚いよ！<br>
<nav>
目次
<ul>
<li><a href="#doctype"><!DOCTYPE html></a>：おまじない</li>
<li><a href="#html"><html></a>：「俺はhtml」</li>
<li><a href="#head"><head></a>：ページ情報関連</li>
<li><a href="#title"><title></a>：タイトル</li>
<li><a href="#body"><body></a>：ページの内容</li>
<li><a href="#br"><br></a>：改行</li>
<li><a href="#div"><div></a>：箱</li>
<li><a href="#h"><h1>～<h6></a>：見出し</li>
<li><a href="#a"><a></a>：リンク</li>
<li><a href="#p"><p></a>：段落</li>
<li><a href="#img"><img></a>：画像</li>
<li><a href="#ul"><ul>,<ol>,<li></a>：リスト</li>
</ul>
</nav>
<div class="main">
<h2 id="doctype"><!DOCTYPE html></h2>
htmlの最初に記述するおまじない。<br>
上記の記法はHTML5のもので、例えばHTMl 4.01の場合は<br>
<code><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"></code><br>
と書く<br>
<h2 id="html"><html></h2>
この中がHTMLで書かれている。<br>
ということを示すタグ。<br>
基本的にページのあれこれはすべてこの中に書く<br>
<h2 id="head"><head></h2>
HTML内の色んな情報を格納するところを表すタグ。<br>
例えば、CSSのファイル格納場所のパスとか、JSのパスとか、ページタイトル、文字コード、SNSでリンクが貼られた際に表示する画像 etc...<br>
<h2 id="title"><title></h2>
タイトル設定用のタグ。<br>
head内に記述。<br>
タブのところに書いてあるアレ。<br>
<h2 id="body"><body></h2>
文書本体を入れるところを示すタグ。<br>
この中にページのテキストだとかそういったデータを入れる。<br>
また、ページ全体を示しているからCSSとかでページ内の(スタイル未指定の)全要素に対してスタイルを割り当てたりできる。<br>
<h2 id="br"><br></h2>
改行<br>
逆に言えばこれを入れないと開業されない<br>
(ただし<p>や<h1>などの一部のタグを使っている場合は例外)<br>
<h3>例</h3>
こ<br>
んな<br>
かんじ<br>
で改行が<br>
できます。<br>
<h2 id="div"><div></h2>
言うなれば箱。<br>
単体ではなんの意味も持たないが、divタグ内の要素にスタイルを一気に指定できる<br>
意外と便利。<br>
似たようなタグとしてspanタグがある。<br>
(用法や機能は少々異なる。)<br>
<h3>例</h3>
<div style="background:darkgray; color:white; text-shadow: black 1px 1px 0px, black -1px 1px 0px,
black 1px -1px 0px, black -1px -1px 0px; text-align: center; margin-right:50%">divタグを使うと<br>このように<br>
<img src="https://images.pexels.com/photos/730896/pexels-photo-730896.jpeg" width=20% height=20%><br>
複数の要素にまとめてスタイルがつけられます。
</div>
<br>
<h2 id="h"><h1>～<h6></h2>
見出し。<br>
h1からh6まで存在し、数が大きくなるほどサイズが小さくなる。<br>
とはいえあくまでも見出しとして使うタグなのでテキストサイズの変更目的での使用はNG<br>
<h3>例</h3>
※実際のサイズより20%縮小
<div style="font-size:80%">
<h1 style="text-align: initial;color:initial;background:initial;text-shadow:initial;margin-top:initial;padding:initial;">これがh1</h1>
<h2 style="border-left:initial">これがh2</h2>
<h3>これがh3</h3>
<h4>これがh4</h4>
<h5>これがh5</h5>
<h6>これがh6</h6>
</div>
<h2 id="a"><a></h2>
リンク<br>
href属性と併用することでリンクを配置することができる。<br>
他のページへのリンク以外にも、id属性を用いることで同じページ内の該当するidの場所に飛ばすこともできる。<br>
<h3>例</h3>
<a href="https://www.google.com/">ここをクリックするとGoogleにジャンプします</a><br>
<br>
<a href="#top">ここをクリックするとサイトの最上に移動します。</a>
<br>
<h2 id="p"><p></h2>
段落。<br>
タグ1つにつき1つの段落として表す。<br>
段落の前後は一行改行される。<br>
<h3>例</h3>
<p>例えば、これが第一段落だとするならば</p>
<p>これが第二段落だろう。</p>
<h2 id="img"><img></h2>
src属性と併用することで画像を表示させることができるタグ。<br>
アニメーションgifやapngもこのタグを使えば何もせずとも動く。<br>
<h3>例</h3>
普通の画像。<br>
<img src="https://images.pexels.com/photos/374624/pexels-photo-374624.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=360&w=480" width=480 height=360><br>
<br>
アニメーション画像(動画ではない)<br>
<span style="color:red">注:一部環境では動かない場合あり</span><br>
<img src="http://ics-web.jp/lab-data/140930_apng/images/elephant_apng_zopfli.png" width=300 height=300><br>
<h2 id="ul"><ul>,<ol>,<li></h2>
箇条書きに使うタグ<br>
<ul>,<ol>は箇条書きの範囲、それぞれの違いは番号をつけるか否か<br>
<li>はulまたはolタグ内の各項目<br>
<h3>例</h3>
<ul>
<li>例えば</li>
<li>ulを使えば</li>
<li>こんな感じ</li>
</ul>
<ol>
<li>例えば</li>
<li>olを使えば</li>
<li>こんな感じ</li>
</ol>
</div>
</body>
</html>