HTML學習筆記

HTML學習筆記

HTML:hyper text make language

pl-sql,html,java都是編程語言

編程語言分類：

編譯型：C，C++

半編譯型： java，.net

解釋型：js,html

make language：標記語言（主要是一些標籤項）

HTML的定義組織：W3C

RFC1866：requestfor comment

HTML4的格式:

允許容錯，大小寫不敏感

（對比）XML:Extensible markup language的縮寫

是用來描述數據的語言

標記不是預定義的，要自己定義標記

不允許容錯，大小寫敏感

H5：

自適應布局

多媒體播放

web socket

HTML 裡面主要是標籤

HTML如何播放多媒體？

<object cclassid="">標籤

Applet activeX

（這裡有一個未解決的疑惑，H5中使用的是標籤不需要第三方插件，但是標籤顯然不能實現第三方插件的功能，流媒體的解析播放是怎麼實現的呢？）

報表：jasperReport，activeX插件

圖表：柱狀圖、餅狀圖、折線圖

jfreechart echart

瀏覽器："解釋和執行"html源碼的工具

下載tomcat http://www.apache.org/

Tomcat6 ------------- servlet2.5

Tomcat7 --------------

implements the Servlet 3.0 and JavaServer Pages 2.2 specifications from the Java Community Process

Tomcat8:

implements the Servlet 3.1 and JavaServer Pages 2.3 specifications

下載javaEE Spec:

https://www.oracle.com/index.html

JavaEE5 ------Tomcat6 --------Servlet2.5

JavaEE6 ------Tomcat7 --------Servlet3.0

JavaEE7 ------Tomcat8 --------Servlet3.1

JavaEE8 ------Tomcat9 --------Servlet4

http://localhost:8081/

http://127.0.0.1:8081

http://10.0.8.253:8081/

http://10.0.8.253:8081/WebTest/main/aa.html

F12 開啟瀏覽器的調試模式

客戶端訪問伺服器小結：

1. 底層通訊技術是socket

2. 使用的協議是http

3. 伺服器傳輸給客戶端的數據是html

相對路徑：

./ 當前路徑

../ 上一級路徑

絕對路徑：

<img src="../pic/dd.jpg" /> （相對路徑）

總結：客戶端訪問伺服器資源，用絕對地址

伺服器資源之間的跳轉，使用相對地址 （forward）

HTML <form> 標籤

<form action="" method="get" > http://webtest2/UserServlet?uname=xiaohp&pwd=33224

method="post"

<form action="http://WebTest2/UserServlet" method="post" >

enctype MIME 類型 用來編碼表單內容的 MIME 類型

定義和用法

enctype 屬性可設置或返回用於編碼表單內容的 MIME 類型。

如果表單沒有 enctype 屬性，那麼當提交文本時的默認值是 "application/x-www-form-urlencoded"。

當 input type 是 "file" 時，值是 "multipart/form-data"。 (上次圖片或*.zip文件)

<a href="content1.html" target="right">顯示內容A</a>

<li><a href="b.html" target="myiframe">bbbb</a></li>

<div class="right">

<iframe name="myiframe"/>

</div>

<!-- dddddddddddddd -->

// 行注釋

/*

*/ 注釋

/**

javaDoc

*/

html和XML中的特殊符號：

空格：&nbsp;

大於(>)：&gt;

小於(<）: &lt;

引號（」）：&quot;

客戶端向伺服器提交數據：

<form action="" method="post">

<input type="hiddent">

<input type="text">

<input type="password">

<input name="gen" type="radio" value="男" checked="checked">

<input name="gen" type="radio" value="女" >

<!-可以多選->

<input type="checkbox" name="hobby1" value="sports" />

運動&nbsp;&nbsp;

<input type="checkbox" name="hobby2" value="talk"

checked="checked" />聊天&nbsp;&nbsp;

<input type="checkbox" name="hobby3" value="play" /> 玩遊戲

<select name="bmon">

<option value="" selected="selected">[選擇月份]</option>

<option value="0">一月</option>

<option value="1">二月</option>

<option value="2">三月</option>

<option value="3">四月</option>

</select>

<form>

課後作業：

web socket 是什麼？

是一個在單個tcp上的全雙工通信協議

分為客戶端和服務端

實現 WebSockets 的 Web 瀏覽器將通過 WebSockets 對象公開所有必需的客戶端功能

WebSocket 在服務端的實現非常豐富。Node.js、Java、C++、Python 等多種語言都有自己的解決方案。

特點：

（1）服務端可以主動推送信息，屬於伺服器推送技術的一種。

（2）建立在TCP協議之上，服務端的實現比較容易。

（3）與HTTP協議有著良好的兼容性，默認埠也是80和443，並且握手階段採用HTTP協議，因此握手時不容易屏蔽，能通過各種HTTP代理伺服器。

（4）數據格式比較輕量，性能開銷小，通信高效。

（5）可以發送文本，也可以發送二進位數據。

（6）沒有同源限制，客戶端可以與任意伺服器通信。

（7）協議標識符是ws（如果加密，則為wss），伺服器網址就是URL。

Java 的 web 一般都依託於 servlet 容器。

servlet 容器有：Tomcat、Jetty、Resin。其中Tomcat7、Jetty7及以上版本均開始支持 WebSocket（推薦較新的版本，因為隨著版本的更迭，對 WebSocket 的支持可能有變更）。

此外，Spring 框架對 WebSocket 也提供了支持。

雖然，以上應用對於 WebSocket 都有各自的實現。但是，它們都遵循RFC6455 的通信標準，並且 Java API 統一遵循 JSR 356 - JavaTM API for WebSocket 規範。所以，在實際編碼中，API 差異不大。

Spring

Spring 對於 WebSocket 的支持基於下面的 jar 包：

<dependency> <groupId>org.springframework</groupId> <artifactId>spring-websocket</artifactId> <version>${spring.version}</version> </dependency>

在 Spring 實現 WebSocket 伺服器大概分為以下幾步：

創建 WebSocket 處理器

擴展 TextWebSocketHandler 或 BinaryWebSocketHandler ，你可以覆寫指定的方法。Spring 在收到 WebSocket 事件時，會自動調用事件對應的方法。

import org.springframework.web.socket.WebSocketHandler; import org.springframework.web.socket.WebSocketSession; import org.springframework.web.socket.TextMessage; public class MyHandler extends TextWebSocketHandler { @Override public void handleTextMessage(WebSocketSession session, TextMessage message) { // ... } }

WebSocketHandler 源碼如下，這意味著你的處理器大概可以處理哪些 WebSocket 事件：

public interface WebSocketHandler { /** * 建立連接後觸發的回調 */ void afterConnectionEstablished(WebSocketSession session) throws Exception; /** * 收到消息時觸發的回調 */ void handleMessage(WebSocketSession session, WebSocketMessage<?> message) throws Exception; /** * 傳輸消息出錯時觸發的回調 */ void handleTransportError(WebSocketSession session, Throwable exception) throws Exception; /** * 斷開連接後觸發的回調 */ void afterConnectionClosed(WebSocketSession session, CloseStatus closeStatus) throws Exception; /** * 是否處理分片消息 */ boolean supportsPartialMessages(); }

配置 WebSocket

配置有兩種方式：註解和 xml 。其作用就是將 WebSocket 處理器添加到註冊中心。

1.實現 WebSocketConfigurer

import org.springframework.web.socket.config.annotation.EnableWebSocket; import org.springframework.web.socket.config.annotation.WebSocketConfigurer; import org.springframework.web.socket.config.annotation.WebSocketHandlerRegistry; @Configuration @EnableWebSocket public class WebSocketConfig implements WebSocketConfigurer { @Override public void registerWebSocketHandlers(WebSocketHandlerRegistry registry) { registry.addHandler(myHandler(), "/myHandler"); } @Bean public WebSocketHandler myHandler() { return new MyHandler(); } }

2.xml 方式

<beans xmlns="http://www.springframework.org/schema/beans" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:websocket="http://www.springframework.org/schema/websocket" xsi:schemaLocation=" http://www.springframework.org/schema/beans http://www.springframework.org/schema/beans/spring-beans.xsd http://www.springframework.org/schema/websocket http://www.springframework.org/schema/websocket/spring-websocket.xsd"> <websocket:handlers> <websocket:mapping path="/myHandler" handler="myHandler"/> </websocket:handlers> <bean id="myHandler" class="org.springframework.samples.MyHandler"/> </beans>

下載html5規範

下載javaEE7規範

瀏覽w3中的html標籤