tags:

表格
表單
html

JavaDay28 HTML 表格和表單

@toc

table僅僅只是用來佈局用的,form則是用來封裝數據的,通常是 form 裏面包含 table；

一、複習

表單

- action:提交數據的地址，即 URL；當提交表單時，表單數據會提交到名爲 “XXX”（action 後面的參數）的頁面
  - URL ：向何處發送表單數據。
    可能的值：
    - 絕對 URL - 指向其他站點（比如 src=“www.example.com/example.htm”）
    - 相對 URL - 指向站點內的文件（比如 src=“example.htm”）
- method: 提交數據的方式，有 GET 和 POST
  - GET: 是通過 URL 明文傳遞；
  - POST：算是一個隱蔽傳遞，適合於傳遞需要加密的數據，但是實際上並沒有給數據加密；
- type:
  - text:可視化文本，是缺省屬性；
  - password: 密文
  - radio：單選，要求單選對話框的 name 屬性要一致；
  - checkbox: 多選，這裏建議多選對話框的 name 屬性用[]結尾；
  - date: 日期
  - file:文件上傳
  - hidden:隱藏傳遞數據，適用於文件上傳時候，先行告知服務器數據大小；
  - submit:提交數據
  - button：按鈕，這裏需要配合 JS 使用；
  - reset：重置；
下拉菜單框
單選框和多選框默認選擇是使用 checked;
下拉菜單默認選擇是 selected;

二、表格

tr 表示行
th 表示表頭：默認居中且加粗
td 表示一行裏面的一個單元格

修飾：
一共三種修飾：表格整體修飾、行修飾、每個單元格修飾；

整體相對標準格式：

<table border = " " width = " " bordercolor = " " style="border-collapse: collapse;"> 
<!--設置線寬和表格長度和線的顏色和線的樣式-->
  <tr>   <!--表示一行-->
    <th colspan="2">這裏是表頭</th> <!--表示該單元格佔兩列-->
    <th rowspan="2">這裏是表頭</th> <!--表示該單元格佔兩行-->
  </tr>

  <tr align = " "> <!--該行所有內容居中顯示-->
    <td width = " ">這裏是相當於第一行第一格內容 </td>
    <td>這裏是相當於第一行第二格內容</td>
  </tr>
</table>

顯示效果：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-FStBGVES-1569851855956)($resource/%E8%A1%A8%E6%A0%BC%E7%A4%BA%E4%BE%8B.png)]

常用屬性設置練習

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--p標籤爲表示段落，align設置對齊方式-->
		<p align="center"> <font size="32" face="黑體">學員表</font> </p>
		
		<!-- 設置table整體屬性，倒數第二個表示只是單線 -->
		<table border="1px" bordercolor="red" width="600"
			style="border-collapse: collapse;"
			align="center">
			<!-- 下面tr表示行，th表示表頭，其中表頭是默認加粗居中 -->
			<tr>
				<!-- 該行一種兩大列，第一列佔了3個單列，第二列佔了2個單列 -->
				<th colspan="3">學員基本信息</th>
				<th colspan="2">成績</th>
			</tr>
			<tr>
				<!-- 可以設置每個單元格的寬度 -->
				<th width="100px">姓名</th>
				<th>性別</th>
				<th>專業</th>
				<th>課程</th>
				<th>分數</th>
			</tr>
			<tr align="center">
				<td>小凱</td>
				<td>男</td>
				<td rowspan="2">計算機</td>
				<td rowspan="2">JavaEE</td>
				<td>86</td>
			</tr>
			<tr align="center">
				<td>小珊</td>
				<td>女</td>
				<td>98</td>
			</tr>
		</table>
	</body>
</html>

顯示效果：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-e8qIcgIo-1569851855957)($resource/%E5%B1%9E%E6%80%A7%E7%BB%83%E4%B9%A0%E7%BB%93%E6%9E%9C.png)]

三、表單

在前端頁面中，通過input標籤想要發送數據給後臺，有兩個必要條件
1. 該標籤必須有name屬性
2. 當前標籤必須放到form表單裏面
form表單中屬性解釋：
- action表示提交的目標地址
- method表示提交方式 GET/POST DELETE
  - GET是通過URL傳遞參數的，傳遞參數之後，URL中會明文顯示參數
  - POST是隱含傳遞參數，可以使用瀏覽器裏面的開發者工具->netword->找到發送給哪一個文件->from data

整體標準格式爲：

<form action="2.html" method="post">
	<p><b>這裏是文本輸入框</b></p>
	 <!--參數含義：  輸入類型   name屬性   placeholder表示默認輸入框中顯示的值  可輸入的最大長度-->
  用戶名：<input type= "text" name = "usename" placeholder = "請輸入用戶名" maxlength="10"/> <br />  
  密碼:<input type="password" name="password" placeholder="請輸入密碼"/> <br />
  
  <p><b>這裏是單選框</b></p>
  <!--參數含義：radio表示單選  單選的兩者的name值必須相同 value值爲存儲時候代替值
  	checked表示默認選擇
	id和<label for="另一個標籤的ID"></label>配合是爲了點擊：男 字也可以選擇
	當前情況下是爲了友好性-->
  性別：<input type="radio" id = "nan" name="sex" value="0" checked/>
		<label for="nan"> 男 </label>
   
		<input type="radio" id = "nv" name="sex" value="1" checked/>
		<label for="nv"> 女 </label> <br />
		
	<p><b>這裏是時間選擇框</b></p>
	出生年月：<input type="date" name = "birthday"> <br />
	
	<p><strong>這裏是多選框</strong></p>
	愛好：<input type="checkbox" name = "like[]" value="football" checked/>足球
		  <input type="checkbox" name = "like[]" value="music" >音樂
		  <input type="checkbox" name = "like[]" value="swimming" > 游泳 <br />
		  
	<p><strong>這裏是下拉選擇框</strong></p>
	籍貫：<select name = "city">
			<option value="jiangsu">南京 </option>
			<option value="shanghai" selected>上海 </option>
			<option value="hangzhou">杭州 </option>
		  </select>   <br/>
		  
	<p><strong>這裏是插入圖片</strong></p>
	<input type="file" name = "icon"/> <br/>
	
	<p><strong>這裏是輸入文本框</strong></p>
	<textarea name="desc" cols="100" rows="10"></textarea> <br />
        	<input type="hidden" name="size" value="200"/>
        	
        	<input type="button" value="這個能不能用？？" /><br/>
        	<input type="reset" value="重置" /> <br/>
        	<button>看看這個是啥</button><br/>
        	<input type="submit" value="註冊"/><br />
</form>

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-I7L7QKU2-1569851855958)($resource/%E8%A1%A8%E5%8D%95%E7%A4%BA%E4%BE%8B%E7%BB%93%E6%9E%9C.png)]

四、頁中頁

<body>
	<a href="http://www.163.com" target="iframe1">網易</a>
	<a href="http://www.taobao.com" target="iframe1">淘寶</a>
	<a href="http://www.jd.com" target="iframe1">京東</a>
	<iframe name="iframe1" src="http://www.baidu.com"
		width="800" height="400"></iframe>
</body>

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-0yJjh7iE-1569851855958)($resource/%E9%A1%B5%E4%B8%AD%E9%A1%B5.jpg)]

超級頁中頁：將整個頁面分割成幾個頁面

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>超級頁中頁</title>
	</head>
	<frameset rows="100, *" frameborder="1"> 
		<frame src="http://www.baidu.com"/>
		
		<frameset cols="30%, *">
			<frame src="http://www.taobao.com"/>
			<frame src="http://www.jd.com"/>
		</frameset>
	</frameset>
</html>

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-Yy8RpxJt-1569851855958)($resource/3.jpg)]

div 知識：

一個標籤如果單獨成行，這表示這個標籤是一個塊標籤
如果不是單獨一行，表示非塊標籤

標籤被用來組合文檔中的行內元素。
使用來組合行內元素，以便通過樣式來格式化它們。

HTML
元素：div是塊級元素，實際上就是一個區域，主要用於容納其他標籤。默認的display屬性是block
- HTML
  元素是塊級元素，它是可用於組合其他 HTML 元素的容器。
- 元素沒有特定的含義。除此之外，由於它屬於塊級元素，瀏覽器會在其前後顯示折行。
- 如果與 CSS 一同使用，
  元素可用於對大的內容塊設置樣式屬性。
- 元素的另一個常見的用途是文檔佈局。它取代了使用表格定義佈局的老式方法，使用元素進行文檔佈局不是表格的正確用法。
  元素的作用是顯示錶格化的數據。
HTML 元素：span是行內元素，主要用於容納文字。默認的display屬性是inline
HTML 元素是內聯元素，可用作文本的容器。
元素也沒有特定的含義。
當與 CSS 一同使用時，元素可用於爲部分文本設置樣式屬性。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>塊元素</title>
	</head>
	<body>
	<div style="background: deepskyblue; width: 100px; height: 100px;"></div>
	<div style="background: orangered; width: 100px; height: 100px;"></div>
	<div style="background: forestgreen; width: 100px; height: 100px;"></div>
	<span>你好</span><span>我不好</span>
	</body>
</html>

[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-eX3Poq7R-1569851855959)($resource/%E5%9D%97%E5%85%83%E7%B4%A0.jpg)]

CSS :層疊樣式表

英文全稱：Cascading Style Sheet
HTML 爲骨架，CSS 爲潤色，提高頁面的觀賞性； JavaScript 讓頁面有更好的展示方式，動態特效；

CSS 的三種聲明方式：
- 行內樣式表:直接在 style 標籤中寫；
  使用標籤的style屬性，直接在 style 標籤中定義； CSS樣式都是以鍵值對形式表示的，鍵值對用:連接；如果存在多個CSS樣式，用分號隔開。
- 內聯樣式表：在 style 標籤中聲明，然後文件中寫 CSS 文件；
  藉助於在head標籤內定義style標籤聲明CSS樣式，在style標籤內就可以認爲是一個CSS文件，這裏的註釋方式採用CSS文件的方式
  CSS修飾的樣式是使用大括號包含的，在大括號之前有一個標記，這個標記表示修飾的是哪一部分內容
- 外聯樣式表：☆☆☆ 在 style 標籤中聲明，然後在其他文件中寫 CSS 文件；
  是藉助於head標籤裏面的link標籤來連接在html 文件之外的樣式表
  rel=“stylesheet” 樣式表
  type=“text/css” 可視化的CSS文件
  href=“CSS文件所在路徑” 可以是URL

外聯樣式表的好處：
1. 多個頁面可以同時使用一個CSS樣式表：例如：淘寶的搜索詳情頁
2. 提高加載效率，因爲都是同一張CSS樣式，加載一次之後，可以保存在
本地緩存中，方便下一次使用
3. 可以加快頁面的加載，也可以節省用戶的流量和服務器帶寬

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>CSS的聲明方式</title>
		<!--方式2:內聯樣式表
        		藉助於在head標籤內定義style標籤聲明CSS樣式
        -->
        <style type="text/css">

        	p {
        		background-color: black;
        		color: white;
        	}
        </style>
        
          <!--方式3：外聯樣式表【重點】-->
          
        <link rel="stylesheet" type="text/css" href="01-usemethod.css"/>
	</head>
	
	<!--方式1：行內樣式表-->
	
	<body style="background-color:#FFCE44;">
		<div style="background-color: #064B88; width: 200px; height: 200px;">
		</div>
		<p>
			最窮不過要飯，不死終會出頭
		</p>
		<span>
			好好學習，天天向上
		</span>
	</body>
</html>

外聯樣式表：01-usemethod.css

span {
	background-color: black;
	color: yellow;
}

最終顯示結果：
[外鏈圖片轉存失敗,源站可能有防盜鏈機制,建議將圖片保存下來直接上傳(img-ZqRxg4VT-1569851855959)($resource/CSS%E6%A0%B7%E5%BC%8F%E8%A1%A8.jpg)]

JavaDay28 HTML 表格和表單

JavaDay28 HTML 表格和表單

一、複習

表單

二、表格

三、表單

四、頁中頁

超級頁中頁：將整個頁面分割成幾個頁面

div 知識：

CSS :層疊樣式表

MySQL 核心模塊揭祕 | 18 期 | 鎖在內存里長什麼樣*

使用perf工具生成火焰圖

HttpSecurity 是如何組裝過濾器鏈的

數說海南——近6年海南各市縣人口簡單看

長序列中Transformers的高級注意力機制總結

大齡程序員思考

響應式界面控件DevExtreme * 更強的數據分析和可視化功能

CentOS 7 安裝 JDK 1.8

JavaEEDay31 XML

JavaDay29 CSS

JavaDay27 反射

JavaDay24 多線程與多進程

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

linux以太網驅動總結

JavaDay28 HTML 表格和表單

JavaDay28 HTML 表格和表單

一、複習

表單

二、表格

三、表單

四、 頁中頁

超級頁中頁：將整個頁面分割成幾個頁面

div 知識：

CSS :層疊樣式表

四、頁中頁