¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ

Size: px

Start display at page:

Download "¥Í¥Ã¥È¥ï¡¼¥¯¥×¥í¥°¥é¥ß¥ó¥°ÆÃÏÀ"

れいがこうだ
9 years ago
Views:

1 HTTP/2 HTTP/1.1 (1999 ) RFC7540! Google SPDY ( ) 1 TCP TCP TLS HTTP Upgrade HTTP 1 HPACK 1 / 24

2 3 : HTTP : HTML4 2 / 24

3 testform.html: POST testform2.html: GET iedemo: IE default.css: CSS proxy.pac: domtest.html: DOM 3 / 24

4 URI URI = URN URL foo://user:[email protected]:8042/over/index.dtb?type=animal;name=doc#tail \_/ \ / \ / \ / \ / \ / userinfo hostname port query fragment \ /\ / scheme authority path path / \ / \ urn:example:animal:ferret:nose scheme (Official IANA-registered schemes) data:, javascript: % HEX HEX 4 / 24

$query fragment \ /\ / scheme authority path path / \ / \$

5 HTML4 meta link form (POST ) script html4 5 / 24

6 HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " <HTML> <HEAD> <TITLE>HTML </TITLE> </HEAD> <BODY> <P> </BODY> </HTML> 6 / 24

01//EN" "http://www.w3.org/tr/html4/strict.

7 HTML4 (3 ) SGML HTML HTML SGML ( XHTML) : : <UL> </UL> (P LI) < 1= 1 2= 2 > id class JS DOM id : <div id="special-elem"> class : <div class="cls1 cls2"> 7 / 24

8 HTML4 (5 6 ) HTML HTTP Content-Type: text/html; charset=euc-jp META ( ) HTML URI MIME 8 / 24

9 HTML4 (7 ) : HEAD, TITLE, META META name, content, scheme, http-equiv : <META name="author" content="dave Raggett"> http-equiv (Apache ) : <META http-equiv="expires" content="tue, 20 Aug :25:27 <META http-equiv="content-type" content="text/html; charset=eu (HTML5 http-equiv ) : <META name="keywords" lang="en-us" content="vacation, Greece"> : BODY : DIV, SPAN : H1, H2,... H6 9 / 24

1996 14:25:27 <META http-equiv="content-type" content="text/html; charset=eu (HTML5 http-equiv )

10 HTML4 (8 11 ) : EM, STRONG, DFN, CODE, SAMP, KBD, VAR, CITE, BLOCKQUOTE, Q, SUB, SUP,... : P, PRE, INS, DEL, UL, OL, LI,... TABLE, TR, TH, TD, / 24

11 HTML4 (12 13 ) : A <A name=cdata> <A href=uri> HTTP GET : LINK LINK <link rel="stylesheet" href=uri> <link rel="next" href=uri> <link rel="prev" href=uri> <link rel="index" href=uri> <link rel="glossary" href=uri> IMG OBJECT (APPLET) MAP 11 / 24

12 HTML4 (14 16, 18 ) HTML ( ) align, HR FRAMESET FRAME IFRAME SCRIPT 12 / 24

13 HTML4 (17 ) FORM, INPUT, BUTTON, SELECT, TEXTAREA, LABEL : <FORM action=" method="post"> <P> : <INPUT type="text" name="firstname"><br> : <INPUT type="text" name="lastname"><br> <INPUT type="text" name=" "><br> <INPUT type="radio" name="sex" value="male"> <BR> <INPUT type="radio" name="sex" value="female"> <BR> <INPUT type="submit" value=" "> <INPUT type="reset"> </P> </FORM> method="get" method="post" HTTP : testform.html, testform2.html 13 / 24

<INPUT type="text" name="email"><br> <INPUT type="radio" name="sex" value="male"> <BR> <INPUT type="radio" name="sex" value="female">

14 ( ) FORM FRAME, IFRAME IMG (, OBJECT) SCRIPT 14 / 24

15 CSS (Cascading Style Sheet) 1 ( ): <link rel="stylesheet" type="text/css" href=".../mycss.css"/> 2 ( ): <style type="text/css">... </style> 3 ( ): <div url( : default.css 15 / 24

16 CSS: CSS :... /* */ : { 1: 1; 2: 2;... } 16 / 24

17 CSS: * # id=. class= 1 > :first-child :before :after [ = ], (or ) 17 / 24

18 CSS: display: block inline none ( 5-10) font-family: serif, sans-serif font-size: small, medium font-style: normal, italic line-height: color: rgb(,, ) background-color: content: " " (:before :after) counter-increment: content counter( ) 18 / 24

italic line-height: color: rgb(,, ) background-color:

19 Browser Rendering Engine JavaScript ( ) Bookmarklet javascript:alert(this); URI proxy.pac proxy.pac Gecko parse (reflow) (paint) 19 / 24

20 Trident (Microsoft) EdgeHTML (Microsoft) Gecko (Mozilla) KHTML (KDE/Linux) Webkit Webkit Blink IE, Sleipnir, Lunascape Edge Firefox Safari Chrome, Opera IE Pocket, Opera Mini, NetFront : Amazon Silk (Kindle) ( WebKit) 20 / 24

Lunascape Edge Firefox Safari Chrome, Opera IE Pocket,

21 : ie Visual C++ Express Edition 1 CLR 2 TextBox 3 WebBrowser 4 TextBox 5 ( ) private: System::Void textbox1_textchanged( System::Object^ sender, System::EventArgs^ e) { webbrowser1->navigate(textbox1->text); } iedemo/ 21 / 24

22 : UI : ie edge Firefox Chrome Safari Opera ActiveX NPAPI?? NPAPI UI BHO Web- Extension?? Web- Extension? Web- Extension Safari extension NPAPI:Netscape Plugin API BHO: Browser Helper Object Safari extension WebExtension Opera extension : Greasemoneky Firefox extension DOMContentLoaded JavaScript 22 / 24

23 Webkit Gecko 23 / 24

24 life of an HTML HTTP request domtest.html 24 / 24

388-356697252-2.pdf

388-356697252-2.pdf 専修大学ネットワーク情報学部 2012年度特殊演習 (Webプログラミング) 新居雅行 / Masayuki Nii 2 HTML/CSS 2012 4 23 1 2-1 Web 2 2-1 80 SSL Apache WindowsIIS Internet Information Server HTTP HyperText Transfer Protocol HTML HTML 1 1 [ URI]