自分用

1.HTML基本型(HTML4/HTML5)

自分用基本形（あんま自信はない）
HTML4とHTML5アリ

HTML4 HTML5

HTML4

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-language" content="ja">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title></title>
<link rel="shortcut icon" href="lib/images/favicon.ico">
<!--<meta name="viewport" content="width=1200px">-->
<meta name="Description" content="">
<meta name="Keywords" content="">
<link rel="index" href="index.html">
<link rel="stylesheet" type="text/css" href="">
<style type="text/css">
</style>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src=""></script>
<script type="text/javascript">
</script>
</head>
<body>
</body>
</html>

CSS

Js&jQ

れすぽん

DOCTYPE内に書く内容で出来ること、その後に書くことが変わるので注意
DTDっての変えてるらしい

Strict DTD（厳格型）

非推奨の要素や属性は使えないフレームも不可
body直下に文章置けない、スタイルはCSSに全て記載
面倒だけど覚えるルールも少ないから、場合によってはこっちのがいいかもしれん

     			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">

Transitional DTD（移行型）

非推奨要素、属性も使用可能
廃止タグは勿論違反だけど非推奨であれば扱える
ルール緩々だけどframeタグは使えない

     			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

Frameset DTD（フレームワーク型）

frame使うならこれにしないと使えない
bodyタグは使用しないので注意(バリデータでクッソ引っかかった)
ただ、frame自体あんまり対応してるブラウザ無いみたいなので、これといった理由がないなら使用は自粛したほうが無難

     			<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">

HTML5

HTML

<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<meta name="Description" content="" />
<meta name="Keywords" content="" />
<link rel="shortcut icon" href="favicon.ico">
<title></title>
<link rel="stylesheet" href="" />
<style>
.txtdel {
    text-indent:100%;
    white-space:nowrap;
    overflow:hidden;
}
.flodel:after{
    content:"";
    clear:both;
    height:0;
    display:block;
    visibility:hidden;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
</script>
</head>
<body>
</body>
</html>

CSS

Js&jQ

れすぽん

『charset』はHTML4のやつでも問題ない
『<script language="JavaScript">』は省略されて『<script>』となっている
typeとかも全部いらない感じ
因みにタイトルとCSS外部呼出しのhref内は空っぽだとバリデータ引っかかるっぽい(ｷﾆｽﾝﾅ)
『.txtdel』と『.flodel』は自分用の付属品なので、いらない場合は適時消すこと

<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />

はデフォルトになり省略となった

2.CSSの上部分

HTML

CSS

@charset "UTF-8";

/* bace@CSS Document */

Js&jQ

れすぽん

3.レスポンシブ - メディアクエリ

maxが0から数えた値、minがブラウザ幅から以下の値

HTML

CSS

@media screen and (max-width: 610px) {
}

Js&jQ

れすぽん

4.CSSとJSの一括読み込み

jsファイルに外部ファイルの呼び出し全部書いて纏めておく
これで纏め.jsだけHTMLに読み込めばおｋ
パスは纏め.jsを読み込んだHTMLから見た場所なので絶対パスか『/js/他のjs.js』みたいな感じで指定した方が無難
（さもなくば発狂待ったなし）

HTML

普通にJavascript読み込むだけ

CSS

Js&jQ

document.write('');

(例)alljscss.js
これをガンガン増やすだけ

れすぽん

こんなのもあった

function importJS() {
    if (! new Array().push) return false;
        var scripts = new Array(
        'path/hoge.js',
        'path/moge.js'
        );
        for (var i=0; i<\/script>’);
        }
    }
importJS();

独学Webデザイナーの覚書引用