HTML

HTML構成

・Tags

・Attributes

・Events

HTML4 ⇒ HTML5の主な進化

1.<!doctype html>

2.追加タグ

Content Tag

<header>,<nav>,<article>,<aside>,<footer>

<section>,<menu>,<figure>

2D/3D Tag

<canvas>

Multimedia Tag

<audio>,<video>

3.修正タグ（属性）

<form>

<input>

CSS2 ⇒ CSS3の主な進化

1.RGBa

opacityの弱みを改善

2.Multi-column layout

3.Round corners

border-radius

4.Web Fonts

@font-face

Javascript APIの主な進化

1.Canvas

2.Geolocation

3.Web storage

cookieの弱みを改善

4.Drag and drop

5.Web Workers

6.Web Socket

HTTPと違い、TCP利用

Space &nbsp;

< &lt;

> &gt;

& &amp;

" &quot;

HTML5で廃棄したタグ

※削除する場合：del

内容が間違った場合：s

★クロスブラウザ対応

IE6のみ有効

<!--[if IE 6] <link rel="stylesheet" type="text/css" href="ie6.css" /> <![endif]-->

IE(IE6～IE8)にHTML5使えるように

<head>

<!--[if IE]>

<script src=”http://html5shiv.googlecode.com/svn/trunk/html5.js”></script>

< ![endif]-->

<style type="text/css">

article,aside,dialog,footer,header,section,footer,nav,figure,menu{

display:block;

}

</style>

</head>

ブラウザごとにHTML5を利用できる状況を把握するサイト

http://html5test.com

http://fmbip.com/litmus

http://caniuse.com/

HTML5テンプレート

<!DOCTYPE html>

<html lang="en-US">

<head>

<meta charset="utf-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no"> <!-- モバイル用 -->

<title>Default Page Title</title>

<link rel="icon" href="favicon.ico" type="image/x-icon">

<link rel="stylesheet" type="text/css" href="css/styles.css">

</head>

<body>

...

<script type="text/javascript" src="js/test.js"></script>

<!--[if lt IE 9]>

<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

</body>

</html>

XHTML1.1テンプレート

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 推薦

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 FrameSet//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> 廃棄

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>DEMO</title>

</head>

<body>

</body>

</html>

HTML4テンプレート

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

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

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

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<title>DEMO</title>

</head>

<body>

</body>

</html>