html5學習筆記（二）（摘抄講義加部分理解）

視頻地址：http://study.163.com/course/courseMain.htm?courseId=1003005

講義地址：https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/2.html

第7章文檔元素

文檔元素的主要作用是劃分各個不同的內容，讓整個佈局清晰明快。讓整個佈局元素具有語義，進一步替代 div。

元素名稱	說明
h1~h6	表示標題
header	表示首部
footer	表示尾部
nav	表示有意集中在一起的導航元素
section	表示重要概念或主題
article	表示一段獨立的內容
address	表示文檔或 article 的聯繫信息
aside	表示與周邊內容少有牽涉的內容
hgroup	將一組標題組織在一起
details	生成一個區域，用戶將其展開可以獲得更多細節
summary	用在 details 元素中，表示該元素內容的標題或說明

佈局例子：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>文檔元素</title>
</head>
<body>
	<header>
		<hgroup>
			<h1>這裏是一個大標題</h1>
			<h4>這裏是一個副標題</h4>
		</hgroup>
		<nav>這裏是一個導航</nav>
		這裏是存放網頁的標頭部分：logo,標題，導航
	</header>
	
	<section>
		這裏是文檔的主題部分。
	</section>
	
	<article>
		相當於一個內置的body
		<header>...</header>
		<section>...</section>
		<address>...</address>
		<footer>...</footer>
	</article>

	<aside>
		這是一個側欄
		<nav>...</nav>
	</aside>

	<footer>
		<h4>這裏是尾部的副標題</h4>
		這裏存放頁面的尾部：版權聲明，友情鏈接
		<address>這裏是聯繫信息</address>
	</footer>
	
</body>
</html>

大概的佈局：

解釋：文檔元素的大部分標籤，是沒有任何效果的，完全是爲了配合語義使用，以強調它的結構性。只有在後面的章節學習 CSS，配合使用才能起到佈局和樣式的效果。

<details>元素生成詳情區域、<summary>元素在其內部生成說明標籤
解釋：由於大多數主流瀏覽器尚未支持，暫略。

---------------------------

第8章嵌入元素

元素名稱	說明
img	嵌入圖片
map	定義客戶端分區響應圖
area	表示一個用戶客戶端分區響應圖的區域
audio	表示一個音頻資源
video	表示一個視頻資源
iframe	嵌入一個文檔
embed	用插件在 HTML 中嵌入內容
canvas	生成一個動態的圖形畫布
meter	嵌入數值在許可值範圍背景中的圖形表示
object	在 HTML 文檔中嵌入內容
param	表示將通過 object 元素傳遞給插件的參數
progress	嵌入目標進展或任務完成情況的圖形表示
source	表示媒體資源
svg	表示結構化矢量內容
track	表示媒體的附加軌道（例如字幕）

img 的私有屬性

屬性名稱	說明
src	嵌入圖像的 URL
alt	當圖片不加載時顯示的備用內容
width	定義圖片的長度（單位是像素）
height	定義圖片的高度（單位是像素）
ismap	創建服務器端分區響應圖
usemap	關聯<map>元素

示例1：

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>嵌入元素</title>
</head>
<body>
<p>alt屬性表示沒有圖片時顯示的文字說明；ismap屬性表示，點擊圖片任意位置，地址欄出現座標點定位</p>
	<a href="embed.html">
		<img src="0034TG2Qgy71wxSkoYh19&690.jpg" alt="風景圖(ismap屬性響應分區)" width="300" height="200" ismap></a><br>
<p>創建分區響應圖，熱點區域，超鏈接，用usermap關聯到Map中name爲“map”的標籤，裏面的設置可以用
	dw軟件來編輯：1.選擇“設計”模式2.選中圖片，左下角出現“地圖”顯示欄，選擇一個矩形，
	在圖上劃出一個區域，點擊確定，然後輸入鏈接（網址），目標（網頁打開方式），替換（網址說明）即可3.運行，鼠標放到之前矩形區域，會出現一個小手標誌，點擊，即可跳轉鏈接</p>
<img src="0034TG2Qgy71wxSkoYh19&690.jpg" alt="風景圖(ismap屬性響應分區)" width="300" height="200" border="0" usemap="#Map">
<map name="Map">
  <area shape="rect" coords="26,41,73,79" href="http://www.baidu.com" target="_blank" alt="百度">
  <area shape="circle" coords="157,106,33" href="www.soso.com" target="_blank" alt="搜搜">
  <area shape="poly" coords="41,144" href="#">
  <area shape="poly" coords="35,156" href="https://wizardforcel.gitbooks.io/liyanhui-tutorials/content/9.html" target="_blank" alt="dsf">
</map>
</body>
</html>

示例2，ifram（插入另一個文檔），<embed>（嵌入插件內容:

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>嵌入2</title>
</head>
<body>
	<a href="http://www.baidu.com" target="in">百度</a>
	<a href="http://www.haoso.com" target="in">好搜</a><br>
	<iframe src="http://www.csdn.net" width = "800" height="600" name="in"></iframe><br><br>
	<embed src="http://www.tudou.com/v/i4ZZvFwfluI/&bid=05&rpid=50797543&resourceId=50797543_05_05_99/v.swf"
	 type="application/x-shockwave-flash" width="400" height ="400"></embed>
</body>
</html>

效果如圖：

點擊百度，iframe框架裏顯示百度頁面，點擊好搜顯示好搜頁面（src 屬性表示初始化時顯示的頁面，name 表示用於 target 的名稱）。

下面的插件是一個土豆視頻，type屬性表示插入內容的類型。

示例3，progress進度條和meter

進度條，IE9及低版本不支持 <progress value = "30" max = "100" ></progress><br>
	顯示範圍裏的值:min 和 max 表示範圍邊界， low 表示小於它的值過低，high 表示大於它的值過高，optimum 表示最佳值，但不出現效果.value爲進度條的值。當value<low或value>high，進度條由綠色變爲了黃色，表示警示<meter value = "20" min="10" max="100" low = "40" high = "80" optimum="50"></meter>

效果如圖：

其他補充：<object>元素和<embed>一樣，只不過 object 是 html4 的標準，而 embed 是 html5 的標準。而 object 不但可以嵌入 flash，還可以嵌入圖片等其他內容。由於圖片、音頻、視頻、插件都有相應標籤元素代替，我們這裏暫時不對其詳細講解。

-----------------------------------

第九章音頻和視頻

1.<video src="第一週第二天上午_.mp4" width="640" height="480" poster="0034TG2Qgy71wxSkoYh19&690.jpg" controls muted loop></video>

poster表示封面圖片或叫預覽圖（沒有這個屬性的話默認顯示視頻的第一幀），controls 表示播放器標誌，muted 表示靜音，loop表示循環播放

其他屬性：autoplay自動播放（沒有value值）

2.預加載設置
<video src="http://li.cc/test.webm" width="800" height="600" controls
preload="none"></video>
解釋：preload 屬性有三個值：none 表示播放器什麼都不加載；metadata 表示播放之前只能加載元數據（寬高、第一幀畫面等信息）；auto 表示請求瀏覽器儘快下載整個視頻。
3.兼容多個瀏覽器
<video width="800" height="600" controls poster="img.png">
<source src="test.webm">
<source src="test.mp4">
<source src="test.ogg">
<object>這裏引入 flash 播放器實現 IE9 以下，但沒必要了</object>
</video>
4.音頻

<audio src="10_S_dicestop.mp3" controls autoplay></audio>

兼容：

<audio controls>
    <source src="test.mp3">
    <source src="test.m4a">
    <source src="test.wav">
</audio>

--------------------------------------------------------------------------

第10章表單元素（上）

一．表單元素總彙
在 HTML5 的表單中，提供了各種可供用戶輸入的表單控件。

元素名稱	說明
form	表示 HTML 表單
input	表示用來收集用戶輸入數據的控件
textarea	表示可以輸入多行文本的控件
select	表示用來提供一組固定的選項
option	表示提供提供一個選項
optgroup	表示一組相關的 option 元素
button	表示可用來提交或重置的表單按鈕（或一般按鈕）
datalist	定義一組提供給用戶的建議值
fieldset	表示一組表單元素
legend	表示 fieldset 元素的說明性標籤
label	表示表單元素的說明標籤
output	表示計算結果

1.大致用法

<!DOCTYPE html>
<html lang="zh-cn">
<head>
	<meta charset="UTF-8">
	<title>表單元素1</title>
</head>
<body>
	form屬性說明：
	1.action如果不指定，則默認提交到本頁面
	2.autocomplete默認爲on，記住之前的輸入內容並提示，如果設置爲"off"則沒有提示功能
	3.enctype表示瀏覽器對發送給服務器的數據所採用的編碼格式，如multipart/form-data（用於上傳文件到服務器）
	Input屬性說明：
	autofocus自動聚焦當前元素；disabled禁用input元素；autocomplete單獨設置input元素的自動完成功能;
	form讓讓表單外的元素和指定的表單掛鉤提交
	label元素說明：
	點擊input的名稱，有可以光標自動跳轉到該input元素
	<form id = "register" action="http://www.baidu.com" method="get" target="_blank" autocomplete="off">
		用戶名：<input type="text" name="user" autofocus ><br>
		
		<label>
			label使用1：<input type="text" name="l1">
		</label><br>

		<label for="lable1">
			label使用2：
		</label>
		<input id = "lable1" type="text" name="l1">
		
		<button>提交（button在form裏具有提交功能）</button>

	</form>

	電子郵件：<input name="email" form="register">
	
	<hr>

	<form action="http://www.baidu.com" target="_blank" method="get" id="ff">
		<fieldset  name = "abc">
			<legend>註冊分組</legend>
			用戶名:<input type="text" name="name" value="默認名稱">
			密碼：<input type="password" name="pwd">
		</fieldset>
		<button>提交（button在form裏具有提交功能）</button>
	</form>
	<fieldset form="ff">
		表單外分組:<input type="text" name="other" >
	</fieldset>
</body>
</html>

2.button元素

<button type="submit">提交（button在form裏具有提交功能）</button>
<button type="reset">重置</button>

當type爲“submit”時，可以用以下屬性覆蓋from裏的設置，

formaction 覆蓋 form 元素的 action 屬性
formenctype 覆蓋 form 元素的 enctype 屬性
formmethod 覆蓋 form 元素的 method 屬性
formtarget 覆蓋 form 元素的 target 屬性
formnovalidate 覆蓋 form 元素的 novalidate 屬性

例如：<button type="submit" formaction="http://www.sougu.com"m>提交（button在form裏具有提交功能）</button>

擴展：

<button> 標籤定義一個按鈕。

<button> 標籤定義一個按鈕。
在 button 元素內部，您可以放置內容，比如文本或圖像。這是該元素與使用 input 元素創建的按鈕之間的不同之處。
<button> 控件與 <input type="button"> 相比，提供了更爲強大的功能和更豐富的內容。<button> 與 </button> 標籤之間的所有內容都是按鈕的內容，其中包括任何可接受的正文內容，比如文本或多媒體內容。例如，我們可以在按鈕中包括一個圖像和相關的文本，用它們在按鈕中創建一個吸引人的標記圖像。
唯一禁止使用的元素是圖像映射，因爲它對鼠標和鍵盤敏感的動作會干擾表單按鈕的行爲。

請始終爲按鈕規定 type 屬性。Internet Explorer 的默認類型是 "button"，而其他瀏覽器中（包括 W3C 規範）的默認值是 "submit"。

例如：<button>默認爲submit類型<img src="0034TG2Qgy71wxSkoYh19&690.jpg"></button>

----------------------

第10章表單元素（二）

1.當 type 值爲 text 時，呈現的就是一個可以輸入任意字符的文本框，這也是默認行爲。並且，input元素還提供了一些額外的屬性。
屬性名稱說明
list 指定爲文本框提供建議值的 datalist 元素，其值爲datalist 元素的 id 值
maxlength 設置文本框最大字符長度
pattern 用於輸入驗證的正則表達式
placeholder 輸入字符的提示
readonly 文本框處於只讀狀態
disabled 文本框處於禁用狀態
size 設置文本框寬度
value 設置文本框初始值
required 表明用戶必須輸入一個值，否則無法通過輸入驗證

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表單(中)</title>
</head>
<body>
	<form action="http://www.baidu.com" >
		<input type="text" name = "user" maxlength="10" size = "30" value="初始值">
		<input type="text" name = "a1" maxlength="10" size = "30" value = "只能讀，可以提交" readonly>
		<input type="text" name = "a2" maxlength="10" value = "禁用，不能提交" disabled><br>
		提示信息：<input type="text" placeholder="請輸入內容"><br>
		建議輸入內容：<input list="footlist">
			<datalist id="footlist">
 			  	 <option value="蘋果">蘋果</option>
  			         <option value="桔子">桔子</option>
   				 <option value="香蕉" label="香蕉">
    			         <option value="梨子">
			</datalist><br>
		<button>提交</button>
	</form>
</body>
</html>

效果如圖：

用戶名：<input type="text" name="name" required>

當沒有輸入值的時候，直接提交，就會有提示信息，如圖：

2.HTML5 增加了多個新的輸入類型：
color，date，datetime，datetime-local，email，month，number，range，search，tel，time，url，week

a.search 解釋：和文本框一致，在除 Firefox 瀏覽器的其他現代瀏覽器，會顯示一個叉來取消搜索內容。額外屬性也和 text 一致。

效果如圖：

<input type="search"><br>
			<input type="number" step="2" min="10" max="100"><br>
			<input type="date">
			<input type="month">
			<input type="time">
			<input type="week">
			<input type="datetime">
			<input type="datetime-local"><br>
			<input type="color" name="color"><br>

效果如圖：

3.複選框，單選框，imgae

<form>
		複選框：
		音樂<input type="checkbox" name="favorite" value="1">
		體育<input type="checkbox" name="favorite" value="2"><br>
		單選框：
		男<input type="radio" name="sex" value="1" checked>
		女<input type="radio" name="sex" value="2"><br>
		<input type="image" src="img.png" formaction="http://www.sogou.com">
	</form>

image:生成一個圖片按鈕，點擊圖片就實現提交功能，並且傳送了分區響應數據。圖片按鈕也提供了一些額外屬性。

4.type 爲** email、tel、url 時**
<input type="email">
<input type="tel">
<input type="url">
解釋：email 爲電子郵件格式、tel 爲電話格式、url 爲網址格式。額外屬性和 text 一致。但對於這幾種類型，瀏覽器支持是不同的。email 支持比較好，現在瀏覽器都支持格式驗證；tel 基本不支持；url 支持一般，部分瀏覽器只要檢測到 http://就能通過。

5.type="file"（accept="image/gif, image/jpeg, image/png"）， type="hidden"分別是上傳文件和隱藏控件（但可以傳value，經常使用）

----------------------------

第10章表單元素(下)

1,下拉列表框

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>表單元素（下）</title>
</head>
<body>
	<form action="http://www.baidu.com" target="_blank">
		單選：<select name="fruit1">
			<option value="1">蘋果</option>
			<option value="2">香蕉</option>
			<option value="3">葡萄</option>
		</select>
		可多選：<select name="fruit2" size="5" multiple="">
			<option value="1" selected>蘋果</option>
			<option value="2">香蕉</option>
			<option value="3">葡萄</option>
		</select>
		分類的：
		<select name="fruit" action="http://www.baidu.com" target="_blank" size="6" multiple>
			<optgroup label="水果類1">
   			 	<option value="1">蘋果</option>
   			 	<option value="2" selected>橘子</option>
   			 	<option value="3">香蕉</option>
			</optgroup>
			<optgroup label="水果類2">
   			 	<option value="4">葡萄</option>
   			 	<option value="5" selected>香瓜</option>
   			 	<option value="6">芒果</option>
			</optgroup>
		</select>
		
		<button>提交</button>
	</form>
</body>
</html>

效果如圖：

selected屬性表示默認選中；size表示大小，multiplse表示可以多選。optgroup裏的label表示分組大標題，不能被選中，只是個標題。

2.多行文本框

<textarea name="content" rows="5" cols="40" wrap="hard">請留下您的建議</textarea>

wrap:設置是否插入換行符，有 soft 和 hard 兩種

3.計算

<form action="http://www.baidu.com" oninput="res.value = num1.valueAsNumber * num2.valueAsNumber">
		<input type="number" id="num1"> * <input type="number" name="num2">
		<output for="num1 num2" name="res"></output>
		<button>提交</button>
</form>

效果如圖：

4.驗證比較簡陋且支持性差，所以還是要使用jquery完成驗證功能和顯示

	數字範圍：<input type="number" min="10" max="12">
	正則表達式：<input type="text" placeholder="請輸入區號+座機" pattern="^[\d]{2,4}\-[\d]{6,8}$">

//禁止表單驗證
<form action="http://li.cc" novalidate>

--------------

html5學習筆記（二）（摘抄講義加部分理解）

「Pygors跨平臺GUI」1：Pygors跨平臺GUI應用研究

[轉帖]

python列出centos7內存使用前50的進程信息

「Pygors跨平臺GUI」2：安裝MinGW-w64、MSYS2還是WSL2

一鍵自動化博客發佈工具,用過的人都說好(掘金篇)

通義千問 2.5 “客串” ChatGPT4，你分的清嗎？

Garnet：微軟官方基於.NET開源的高性能分佈式緩存存儲數據庫

Flink執行圖

Java響應式編程

評估統計算法在銀行僞造鈔票檢測中的價值

判斷checkBox標籤某一個選項是否被選中

jsp 回顯顯示select

sql查詢find_in_set，字段包含多個ID，並用逗號分開，查詢該字段是否包含某個ID

html5學習筆記（二）（摘抄講義加部分理解）

一個簡單的存儲過程及擴展

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

linux以太網驅動總結