HTTP/2 HTTP/1.1 (1999 ) 2015 5 RFC7540! Google SPDY ( ) 1 TCP TCP TLS HTTP Upgrade HTTP 1 HPACK 1 / 24
3 : HTTP : HTML4 2 / 24
testform.html: POST testform2.html: GET iedemo: IE default.css: CSS proxy.pac: domtest.html: DOM 3 / 24
URI URI = URN URL foo://user:passwd@example.com: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
HTML4 meta link form (POST ) script html4 5 / 24
HTML <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/tr/html4/strict.dtd"> <HTML> <HEAD> <TITLE>HTML </TITLE> </HEAD> <BODY> <P> </BODY> </HTML> 6 / 24
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
HTML4 (5 6 ) HTML HTTP Content-Type: text/html; charset=euc-jp META ( ) HTML URI MIME 8 / 24
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 1996 14: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
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,... 10 / 24
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
HTML4 (14 16, 18 ) HTML ( ) align, HR FRAMESET FRAME IFRAME SCRIPT 12 / 24
HTML4 (17 ) FORM, INPUT, BUTTON, SELECT, TEXTAREA, LABEL : <FORM action="http://somesite.com/prog/adduser" method="post"> <P> : <INPUT type="text" name="firstname"><br> : <INPUT type="text" name="lastname"><br> email: <INPUT type="text" name="email"><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" http://.../?firstname=yamazaki&sex=male method="post" HTTP : testform.html, testform2.html 13 / 24
( ) FORM FRAME, IFRAME IMG (, OBJECT) SCRIPT 14 / 24
CSS (Cascading Style Sheet) 1 ( ): <link rel="stylesheet" type="text/css" href=".../mycss.css"/> 2 ( ): <style type="text/css">... </style> 3 ( ): <div style="font-size:18px;"> @import url(http://.../mycss.css); : default.css 15 / 24
CSS: CSS :... /* */ : { 1: 1; 2: 2;... } 16 / 24
CSS: * # id=. class= 1 > 2 1 2 1 2 1 2 :first-child :before :after 1+ 2 1 2 [ = ], (or ) 17 / 24
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
Browser Rendering Engine JavaScript ( ) Bookmarklet javascript:alert(this); URI proxy.pac proxy.pac Gecko parse (reflow) (paint) 19 / 24
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
: 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
: 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 http://blog.37to.net/2009/03/firebuggreasemonkeyf/ 22 / 24
Webkit Gecko http://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/ 23 / 24
https://developer.mozilla.org/en/the life of an HTML HTTP request domtest.html 24 / 24