JavaScript_HTML

html

一、html

html:超文本標記語言；html語言中是由標籤組成的，html中的數據都會封裝在標籤中，因爲可以通過標籤中的屬性值的改變對封裝內數據進行操作。

確定html代碼範圍：<html></html>，在該範圍中可以定義兩部分內容，一部分是頭，一部分是體。

<html>

</body><body>

</html>

head:網頁的一些屬性信息，比如：標題。

body:網頁顯示的數據。

標籤特點：對於數據進行封裝，那麼就有開始標籤和結束標籤，但是也有一些標籤只體現單一功能，不需要結束標籤，規範中要求標籤必須結束，所以這樣的標籤在內部結束。

如：<br/><hr/><img/><input/>

標籤格式：<標籤名屬性名=“屬性值”>數據</標籤名>

<標籤名屬性名 =“屬性值”/>

操作思想：爲了操作數據，都需要將數據進行不同標籤的封裝，通過標籤中的屬性對封裝的數據進行操作。標籤就相當於一個容器。對容器中的數據進行操作，就是在再不斷的改變容器的屬性值。

常見標籤：

1、字體標籤：<font> <font size=”7” color=”#ffffff”>數據</font>

特殊部分：如果要在頁面顯示一些特殊符號值，需要進行轉義。如下圖：

標題標籤：<h1><h2>...<h6>。

2、列表標籤：<dl></dl>

上層項目：<dt>

下層項目:<dd>

項目符號標籤：<ul> <ol>這兩個標籤中的列表項都由<li>標籤封裝。

示例：

1.遊戲名稱

a.星際

b.紅警

2.遊戲內容

a.攻略

b.祕籍

代碼如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>遊戲列表標籤演示</title>
</head>

<body>
	<ol>
		<li>遊戲名稱</li>
			<ol type="a">
				<li>星際爭霸</li>
				<li>紅色警戒</li>
			</ol>
		<li>遊戲內容</li>
			<ol type="a">
				<li>攻略</li>
				<li>祕籍</li>
			</ol>
	</ol>
</body>
</html>

3、圖像標籤:<img>

align:屬性定義圖片的排列方式，border：用來設置圖像的邊框。

4、表格標籤：<table>：表格由行所組成，行由單元格組成。表格中默認都有一個tbody標籤。

組成：標題標籤：<caption>；表頭標籤：<th>；行標籤：<tr>；單元格標籤：<td>

每個表格可以有一個表頭、一個表尾和多個表體(正文)，分別以THEAD、TFOOT、TBODY元素表示；THEAD、TFOOT包含關於表格列的信息。

TBODY作用是：可以控制表格分行下載，從而提高下載速度。（網頁的打開是先表格的的內容全部下載完畢後，才顯示出來，分行下載可以先顯示部分內容，這樣會減少用戶等待時間。）

使用TBODY的目的是可以使得這些包含在內的代碼不用在整個表格都解析後一起顯示，就是說如果有多個行，那麼如果得到一個TBODY行，就可以先顯示一行。

TBODY這個標籤可以控制表格分行下載，當表格內容很大時比較實用，在需要分行下載處加上<tbody>和</tbody>。

表格是最常見的標籤，用於對數據進行格式化。

代碼演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>表格標籤演示</title>
</head>

<body>
	<table border="1" bordercolor="#CC0066" cellpadding="10" cellspacing="0" width="500">
		<tbody>
			<tr>
				<th rowspan="2">個人信息</th>
				<td>張三</td>
			</tr>
			<tr>
				<td>30</td>
			</tr>
		</tbody>	
	</table>
		
	<hr/>
	<table border="1" bordercolor="#CC0066" cellpadding="10" cellspacing="0" width="500">
		<tr>
			<th colspan="2">個人信息</th>
		</tr>
		<tr>
			<td>張三</td>
			<td>30</td>
		</tr>	
	</table>
	<hr />
	<table border="1" bordercolor="#CC0066" cellpadding="10" cellspacing="0" width="500">
		<caption>表格標題</caption>
		<tr>
			<th>姓名</th>
			<th>年齡</th>
		</tr>
		<tr>
			<td>張三</td>
			<td>30</td>
		</tr>
	</table>
</body>
</html>

5、超鏈接：<a>

當被點擊後，會啓動引擎對應解析程序。去查找指定的主機。

1、先找本地主機的hosts文件，如果沒有找到該主機對應的ip地址；

2、去公網DNS服務器上去找對應的ip地址。

當點擊超鏈接時，就會出現郵件相關聯的解析程序，本機默認的outlook。

超鏈接的另一個作用：定位標記；

<aname=”top”>頂部位置</a>

<ahref=”#top”>回到頂部位置</a>

代碼演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>超鏈接2</title>
</head>

<body>
	<a name="top">頂部位置</a>
	</br>
	<a href="mailto:[email protected]">聯繫我們</a>
	</br>
	<a href="thunder://fdgdgbcb">半斤八兩(許冠文)</a>
	<hr/>
	</br>
	<a href="http://www.hao123.com" target="_blank">好123上網導航</a>
	</br>
	<a href="http://www.hao123.com" target="_blank"><img src="imgs//10.bmp"/></a>
	</br>
	<img src = "imgs//1.jpg" height="900" width="400" border="10" />
	<hr/>
	<a name ="mid">中間位置</a>
	<hr/>
	
	<img src = "imgs\1.jpg" height="900" width="400" border="10" />
	<a href = "#top">回到頂部位置</a>
	<a href = "#mid">回到中間位置</a>
</body>
</html>

6、表單標籤：該標籤是可以和服務端進行交互：<form>；

表單標籤中的元素：

<input>:該標籤因爲type屬性的值不同，所對應的組件也不相同。

type屬性：

1、text：文本框，輸入的文本可見。

2、password：密碼框，輸入的文本不可見。

3、radio：單選框，注意，要被選中，必須要給單選框定義一個屬性name。當有多個單選框時，只能有一個被選中，那麼這些單選框的name值必須相同。

4、checkbox：複選框，用在當對多個數據進行同時選中時。

5、file：可以進行文件選擇的組件，通常用於附件，或者文件上傳。

6、hidden：隱藏組件，該組件的內容不會在頁面上顯示，但是其定義的name和value可以提交到服務端。

7、button：按鈕組件，自定義一個按鈕默認是沒有任何效果的，可以通過註冊事件並加入自定義效果。

8、reset：重置按鈕，將組件中被操作的效果還原到初始狀態。

9、submit：提交按鈕，將組件中添加的數據提交到指定的目的地。

10、image：圖像組件，爲了避免提交按鈕的難看，可以通過image的src屬性連接一個好看的按鈕圖片完成提交效果。

下拉菜單：<select>:每一個下拉菜單項都由option進行封裝。

</select>

文本區域：<textarea>

表單組件通常都需要定義name和value屬性，因爲要將數據發送給服務端，服務端只有知道了該name的屬性值纔可以對提交的數據進行分別獲取。

form標籤中常見的屬性：

action：指定數據提交的目的地；method：提交方式；兩種常用值get和post，get爲默認的提交方法，比如在地址欄中輸入一個URL、點擊一個超鏈接、都是get提交。

代碼演示：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>數據提交</title>
</head>

<body>
	<form action="http://100.64.27.61:10019" method="post">
		<table border="1" bordercolor="#CC0066" cellpadding="10" cellspacing="0" width="600">
			
			<tr>
				<th colspan="2">註冊表單</th>
			</tr>
			<label accesskey="u" for="userid">
			<tr>
				<td>用戶名稱(U)：</td>
				<td><input type="text" name="user" id="userid"/></td>
			</tr>
			</label>
			<tr>
				<td>輸入密碼：</td>
				<td><input type="password" name="psw"/></td>
			</tr>
			<tr>
				<td>確認密碼：</td>
				<td><input type="password" name="repsw"/></td>
			</tr>
			<tr>
				<td>性別選擇：</td>
				<td>
					<input type="radio" name="sex" value="nan" />男
					<input type="radio" name="sex" value="nv" />女
					</td>
				</td>
			</tr>
			<tr>
				<td>選擇技術：</td>
				<td>
					<input type="checkbox" name="tech" value="java" />JAVA
					<input type="checkbox" name="tech" value="html" />HTML
					<input type="checkbox" name="tech" value="css" />CSS
				</td>
			</tr>
			<tr>
				<td>選擇國家：</td>
				<td>
					<select name="country">
						<option value="none">--選擇國家--</option>
						<option value="USA">美國</option>
						<option value="CHINA">中國</option>
						<option value="English">英國</option>
		           </select>
				</td>
			</tr>
			<tr>
				<th colspan="2">
					<input type="reset" value="清除數據"/>
					<input type="submit" value="提交數據"/>
				</th>
			</tr>
			</table>
	</form>
</body>
</html>

效果圖如下：

Get和post提交的區別：

Get:會將提交的數據顯示在地址欄上；post：不會將數據顯示在地址欄上；

Get:提交的數據的體積受地址欄的限制；post：可以提交大體積數據；

Get:對於敏感信息不安全；post：對於敏感信息安全；

Get:會將提交信息封裝在請求行，也就是http消息頭之前；post：會將提交數據封裝在數據體中，也就是http消息頭之後的空行。

對於服務器而言：表單提交儘量用post，因爲涉及到編碼問題。因爲tomcat服務器默認的解碼是ISO8859-1。對於post提交的中文，在服務器可以直接使用setCharacterEncoding(“gbk”)就可以解決，對於get提交的中文，在服務端只能通過ISO8859-1將數據編碼一遍，再通過指定的碼錶如GBK解碼。

使用表單的組件不一定要定義form標籤，只有需要將數據進行服務端的提交時纔用到form標籤。

使用表單的組件不一定要定義form標籤，只有需要將數據進行服務端的提交時，纔用到form標籤。

7、<label>標籤：用於給各個元素定義快捷鍵。

for屬性：指定快捷鍵作用的表單元素，必須與要作用的表單元素的id值相同；

accesskey屬性：指定的快捷鍵，此快捷鍵需要和alt鍵組合使用。

例如：<label for=”user” accesskey=”u”>用戶名(U)</label>

<inputtype=”text” id=”user”/>

8、頭標籤：頭標籤都放在<head></head>頭部分之間，包括：title、base、meta、link；

<title>:指定瀏覽器的標題欄顯示的內容；

<base>:

href屬性：指定網頁中所有的超鏈接的目錄，可以是本地目錄，也可以是網絡目錄，注意值的結尾處一定要用/表示目錄，只作用於相對路徑的超鏈接文件。

target屬性：指定打開超鏈接的方式，如_blank表示所有的超鏈接都用新窗口打開顯示。

<meta>

name屬性：網頁的描述信息，當去keywords時，content屬性的內容就作爲搜索引擎的關鍵字進行搜索。

http-equiv屬性：模擬http協議的相應消息頭；例如：

<metahttp-equiv="refresh" content="3;url=http://www.sina.com.cn"/>；表示打開此頁面3秒後自動跳轉到新浪頁面。

<link>

rel屬性：描述目標文檔與當前文檔的關係；

type屬性：文檔類型；

media：指定目標文檔在哪種設備上起作用；例如：

<linkrel="stylesheet" type="text/css"media="screen,print" href="a.css" />

其他標籤

<marquee>:可以讓內容動起來；

direction屬性：left right down up

behavior屬性：scroll alternate slide

<pre>:可以將文本內容按照代碼區的樣子顯示在頁面上，比如java源代碼的顯示；

<p>:段落標籤。每一個段落之間有一個空行；

<b></b>;<strong></strong>:給修飾的字體加粗；

<sub>2</sub>下標；<sup>3</sup>上標；

<i></i>:斜體<u></u>:加下劃線；

<div></div>：段落標籤，但段落之間沒有空行；

div:行級區域；span：塊級區域；p:行級區域；p中不能嵌套div。

XHTML：可擴展的超文本標記語言（Extensible HyperText Markup Language）。

XHTML是w3c組織在2000年的時候爲了增強HTML推出的，本來是想替代HTML，但是發現Internet上用HTML寫的網頁太多，所以沒有成功。可以理解爲它是HTML一個升級版（HTML4.01）；XHTML的代碼結構更爲嚴謹，是基於XML的一種應用。

XML：可擴展標記語言（Extensible Markup Language）；

XML是對數據信息的描述,HTML是數據顯示的描述; XML代碼規定的更爲嚴格，如：標籤不結束被視爲錯誤; XML規範可以被更多的應用程序所解釋，將成爲一種通用的數據交換語言; 各個服務器，框架都將XML作爲配置文件。

Spring Cloud 部署時如何使用 Kubernetes 作爲註冊中心和配置中心

JavaScript_HTML

JavaScript_JavaScript

JavaScript_css

Java基礎_面向對象(下)

Java基礎加強_類加載器、代理

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結