『JavaWeb前端』一、HTML-精煉-易懂

阿新 • • 發佈：2021-05-29

文章目錄

一、HTML
1 - a 標籤：
2 - img標籤：
3 - input 標籤：
4 - table 表格標籤：
- 4 - 1 table 標籤：
- 4 - 2 th，td，tr 標籤：
5 - 表單標籤 form：
6 - 框架 frameset 標籤
- 6 - 1 框架之間的導航
- 6 - 2 frameset 的缺點

一、HTML

<!DOCTYPE html> <!--告訴瀏覽器網頁所使用的文件型別（DOCTYPE）--> 

<html>		-- 文件的開始標籤
<head>		-- 文件頭的開始標籤
    <title>標題</title>	-- 文件標題，顯示的瀏覽器標題欄中
</head>		-- 文件頭的結束標籤
<body>		-- 文件內容的開始標籤
    內容
</body>		-- 文件內容的結束標籤
</html>		-- 文件的結束標籤

<!--註釋內容-->

塊級標籤：

就像標題、段落一樣，需要在頁面上佔據一塊的位置的標籤

<h1>---<h6>

標題
<p>

段落標籤（無格式）
<div>

塊標籤
<pre>

用於顯示想要格式化顯示的文字（程式碼）

內聯標籤：

<em> / <i>

斜體
<strong> / <b>

黑體
<sub>

下標
<sup>

上標
<br>

換行
<hr>

水平線
<span>

普通內聯標籤
<code>

標示一段程式碼

常用實體字元：

 

空格
<

<
>
&

&
"

“

1 - a 標籤：

屬性	屬性作用	值
`href`	指定超連結目標的 URL	任何有效文件的相對或絕對 URL / 絕對路徑（http/https/mailto/ftp）
`name`	記錄頁面跳轉位置	設定頁面錨點 top(頂部)/middle(中部)
`target`	指定開啟位置	`_blank`:新頁面開啟；`_self`:當前頁面開啟；`targetname`：指定視窗或Frame中開啟連結
		`_parent`:父視窗中開啟；`_top`:最頂層父視窗中開啟；

2 - img標籤：

若圖片有邊框，用style="borde:0px;"屬性去掉邊框

圖片地圖<map>：

設定點選圖片不同位置，觸發不同的連線

屬性	值	作用
`alt`	`alt="無法載入"`	規定影象的替代文字
`src`	`src="圖片地址"`	規定顯示影象的 URL
`height`	`height=200px`	定義影象的高度
`width`	`width=400px`	設定影象的寬度
`usemap`	`usemap="#earthmap"`	`earthmap`為`<map>`標籤的name屬性值

<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>

	<img alt="earth" src="./stady.jpg" usemap="#earthmap"/>

	<map name="earthmap">

		<area shape="rect" coords="0,0,20,20" href="baidu" href="https://www.baidu.com" target="_blank">
		<area shape="circle" coords="80,80,20" href="google" href="https://www.google.com" target="_blank">
	
	</map>

</body>
</html>

3 - input 標籤：

屬性	值	作用
`alt`	`alt="text"`	定義文字
`type`	`type=button`	定義可點選按鈕
	`type=text`	定義單行的輸入欄位，使用者可在其中輸入文字（預設寬度為 20 個字元）
	`type=password`	定義密碼欄位
	`type=hidden`	定義隱藏的輸入欄位
	`type=radio`	定義單選按鈕
	`type=checkbox`	定義複選框
	`type=reset`	定義重置按鈕，清除表單中的所有資料
	`type=submit`	定義提交按鈕，把表單資料傳送到伺服器
`value`	`value=" "`	規定 input 元素的值

4 - table 表格標籤：

<table border="1" align="center" cellspacing="7" cellpadding="20">
		<tr>
			<td rowspan="2">1-1</td>
			<td>1-2</td>
			<td colspan="2">佔兩列(1-4)</td>
			<td >1-4</td>
		</tr>
		<tr>
			<td>2-1</td>
			<td>2-2</td>
			<td>2-3</td>
			<td>2-4</td>
		</tr>
</table>

在這裡插入圖片描述

4 - 1 table 標籤：

屬性	值	作用
`border`		規定表格邊框的寬度
`width`		規定表格的寬度
`cellpadding`		規定單元邊沿與其內容之間的空白（單元格內邊距）
`cellspacing`		規定單元格之間的空白（單元格邊框的寬度）

4 - 2 th，td，tr 標籤：

標籤	作用	屬性	值	作用
`<th>`	表頭
`<td>`	列	`colspan`	`colspan=2`	規定單元格可橫跨的列數(佔兩列)
		`rowspan`	`rowspan=2`	規定單元格可橫跨的行數(佔兩行)
		`align`	`left,right,center`	規定單元格內容的水平對齊方式
`<tr>`	行	`colspan`
		`rowspan`
		`align`

5 - 表單標籤 form：

表單：用來蒐集使用者資訊並提交給伺服器

一般按鈕要提交表單：JavaScript

	<form method="post"  >
		使用者名稱：<input type="txt" name="username"><br>
		密碼：<input type="password" name="password"><br>
		<a><input type="submit" value="登入"></a>
	</form>

在這裡插入圖片描述

5 - 1 form 標籤：

屬性	值	作用
`method`	get	（提交資料的方式）收集少量的使用者資訊，url長度限制為4KB
	post	收集大量使用者資訊，資訊儲存在HTTP請求訊息的正文，提交後不能使用重新整理按鈕
`action`	地址（form.html）	提交表單時轉到的url地址

5 - 2 input 標籤：

屬性	值	作用
`type`	`type=button`	可點選按鈕
	`type=text`	單行的輸入欄位，使用者可在其中輸入文字（預設寬度為 20 個字元）
	`type=password`	密碼欄位
	`type=hidden`	隱藏輸入框(使用者不可見，但輸入框的值會隨表單一起提交，用與多頁面收集使用者資訊)
	`type=radio`	單選按鈕
	`type=checkbox`	複選框
	`type=reset`	重置按鈕，清除表單中的所有資料
	`type=submit`	提交按鈕，把表單資料傳送到伺服器
`value`	文字框的值
`name`（必須包含）		提交表單時，文字框的值value儲存在name變數中
maxlength		文字框允許輸入的最多的字元數
readonly		只讀文字框
disabled		只讀文字框，文字框顯示為灰色，文字框的值不會發送到伺服器

5 - 3 textarea 標籤

多行文字輸入框

沒有字元數的限制

屬性	值	作用
rows	行數	內容過長時自動顯示滾動條
cols	列數

5 - 4 select 標籤

下拉列表框

標籤	屬性	值	作用
select	name	下拉框的名稱
	size	顯示行數（>1）	顯示多少行，以平鋪的形式顯示
	multiple	multiple	可以多選
option	value	選項代表的值	提交以後會將value的值儲存到name中
	selected	selected	是否選中此選項
optgroup	labal	分組名稱（此名稱不可選中）	用來對選項進行分組

<select name="country">
	<optgroup label="北美洲">
		<option value="America">美國</option>
    </optgroup>
	<optgroup label="亞洲">
		<option value="China" selected="selected">中國</option>
		<option value="India">印度</option>
		<option value="Russia" >俄羅斯</option>
    </optgroup>
</select>

在這裡插入圖片描述

<select name="country" size="5" multiple="multiple">
		<option value="America">美國</option>
		<option value="China" selected="selected">中國</option>
		<option value="India">印度</option>
		<option value="Russia" >俄羅斯</option>
</select>

在這裡插入圖片描述

5 - 5 lable 標籤、fieldset 標籤

<lable>標籤：實現點選按鈕旁邊與點選選項框的效果相同

<fieldset>標籤：實現分組框

標籤	屬性	值	作用
lable	for	`<input>`標籤中id的值	點選按鈕旁邊與點選選項框的效果相同
fieldset	style	width:200px	設定分組框的大小
`<fieldset>`/`<legend>`			分組框的名稱

<fieldset style="width: 200px">
    	<legend>選擇顏色</legend>

    	<label for="blue">藍色</label>
        <input type="radio" id="blue" name="color" ><br>

    	<label for="red">紅色</label>
        <input type="radio" name="color" id="red"><br>

    	<label for="white">白色</label>
        <input type="radio" name="color" id="white">
    	
    </fieldset>

在這裡插入圖片描述

6 - 框架 frameset 標籤

此標籤不能寫在<html>標籤中，因為它是集成了多個html

可以將很多頁面組合成一個頁面

常見應用場景：（部分重新整理）

一個 frame 中放置頁面導航，另一個 frame 中放置頁面內容，當點選頁面導航時，只重新整理頁面內容。

標籤	屬性	值	作用
`<frameset>`	cols	px;%;*	垂直分欄的各列的寬度(`*`表示佔用剩餘全部空間)
	rows	px;%;*	水平分欄的各行的寬度(`*`表示佔用剩餘全部空間)
	frameborder	0	不顯示分割條
`<frame>`	noresize	noresize	分割條不可拖動
	scrolling	no	不顯示滾動條

<!-- <frameset cols="33%,33%,*">
   	<frame src="1.html"></frame>
   	<frame src="2.html"></frame>
  	<frame src="3.html"></frame>

</frameset> -->

<frameset rows="33%,33%,*">
   	<frame src="1.html"></frame>
   	<frame src="2.html" ></frame>
  	<frame src="3.html"></frame>
</frameset>