日々更新する予定のブログ

いろいろ中が変わってます。

HTMLでよく使うタグ

ブログ編集やサイト作成においてよく使いそうなタグをメモしておきます。

 

 

 

<body text="色" bgcolor="background color" background="背景画像のpath" link="link前のcolor" alink="linkを押した瞬間のcolor" vlink="linkで訪れたあとのcolor">


<!--読者に見えないコメントをつけたいときはこれで挟む-->

 

<basefont size ="1〜7で指定">

 

<font color="" size="1〜7で指定" face="フォント名"></font>

(このタグは、今後のwebの記述を考えると使用は控えた方がいいかもしれません。) 

 

 

<br>

終了タグがない。

breakの略

(便利だけれども、デバイスの表示やgoogle検索等を理由に好まれないことがあるのは留意しておきましょう。<p>を使った方がいいシチュエーションも多々あります。) 

 

<h1></h1>〜<h6></h6>

見出しをつけれる。

<h1>が一番大きい見出しで

<h6>か一番小さい見出し

 

<em></em>

文中で強調したいぶんに使える。

emphasize

 

<strong></strong>

文中で<em>より強調したいぶんに使える。

 

<strong>や<em>は太字で強調するが、<b>より今ではほとんどが使用が好まれると思われる。

 

 

<mark></mark>

文中で、マーキングする。

こんな感じ 




<bdo dir="rtl"></bdo>

文字の表示する方向性を決めれる。すなわち、アラビア語など右から左の言語を書きたいときに使える。

right to leftの略でrtl,逆に左から右にすることを記述する必要がある場合は、ltr(left to right)と書けば良い。


<abbr title="略語の略す前の名前"></abbr>

略語を本名を添えて書きたいときに使うタグ


<del></del>

<s>と同じく打ち消し線を引くが、今ではこちらが好まれると思われる。

<q></q>

引用を表すが、internet explorerでは「」だがgoogle chromeでは"'である

<blockquote cite="urlの転載を表す">

長い引用を示すときはこちらを用いる

 

<b></b>

太字にする。bold

<i></i>

斜めの字体にする。italic

<u></u>

下線をひく。

<s></s>

取り消し線を引く。

<sup></sup>

上付き字にする。

<sub></sub>

下付き字にする。

化学式などにつかえるかな?

CO2

↑こんな感じ 

 

 

<p style="meta要素で指定されていたらスタイルシート言語が使える"></p>

段落を表す。paragraph

title属性でカーソルをおいたときの補足情報をかけられる。

color属性も使用可能

 

 

<hr width="%指定もしくは数字" size="数字指定" align="right or center or left" noshade></hr>

線を引ける。noshadeは、塗りつぶすか指定できる。

horizontal rule 

 

 

 

<center></center>

センタリングできる。

 

<pre></pre>

このタグ内なら空白行や改行をそのまま反映できる。

 

<div align="right or center or left"></div>

 




<a href="リンク先" "></a>

この中に画像をで貼れば、リンクを画像に貼れることになる。


文字のリンク先を指定できる。

絶対path:url直接打ち込む。

相対path:そこの階層からリンクしたい階層までを考えればいい。

../←これで一つ上の階層に行ける。

 

<a name="〇〇"></a>

a href="#〇〇"></a>で指定しておくと、name属性で囲ったタグまで同ページ内でとべる。

 

href="malito:開きたいメールアドレス名"

 

属性でtarget="_brank"にすると新しいウィンドウにリンクが開くようになる。

 

style="text-decoration:none"

属性でこれを指定すればリンク下の線を消せる。


title=""でツールチップをリンクにつけれる。



<img src="画像のリンク先指定" width="数字" height="数字" alt="画像が表示されなかったときの代替の処理" border="数字(枠の指定)" align="top or middle or bottom" style="width:数字;height:数字px;float:direct指定"></img>

画像を貼れる。

 

<ol type="A or 1 , I etc " style="list-style-type=squareなど"><li></li></ol>

番号をつけてリスト化できる。<ol></ol>の中に作りたいリストの分だけ<li></li>を入れてく。

ordered list(順序あるリスト)の略

 

<ul type="□ or ・etc" ><li></li></ul>

上のリストと同じように用い、箇条書きできるようになる。

unordered list(順序のないリスト)の略

 

 

<dl><dt></dt><dd></dd></dl>

用語を列挙して説明したいときに、<dl></dl>内に用語と説明を書く。

<dt>言葉</dt>

<dd>説明</dd>

dl →definition list

dt→definition term

dd→definition description

 

 

<table border="数字" cellspacing="セル間の隙間、数字" cellpadding="数字" style="width:数字px">

<caption>見出し</caption>

<tr>

<th bgcolor="color"></th>

<td bgcolor="color" colspan="数字、数字分横に連結" rowspan="数字、数字分縦に連結"></td>

</tr>

</table>

<table>の属性、borderについて

値が0でborder無し、1以上でテーブルの枠の太さを決められる。

 

tr…table row

td…table data

th…table header 



<iframe src="フレーム内に表示するpath指定" width="数字"></>

新たな枠にサイト等を表示する枠 

style="border:none"で枠のボーダー消せる。


<button></button>

ボタンを設置できる。

 

<html> </html>

htmlの宣言

<head></head>

ヘッダー

<title ></title>

そのサイトのタイトル

 

<><><><><><><>

 

 

 CSSについて

style="color:blue;"

style="font-family:フォント名''

style="text-align:center"(センタリング)

style="font-size:npx;"

style="background-color:color;"

 

<style>

body {background-color :color名;}

body {font-family:font名;}

body {color:color名;} 文字色

p {border:1px solid color名;}


</style>




<style>

#id名 {}

p.class名{}

.class名2

</style>

<p id="id名"></p>

<p class="class名 class名2"></p>

 


JavaScriptについて

<body>


</body>