1. HTML5新增標籤屬性

主流瀏覽器都支援H5，然而IE9以及以上支援，IE8以及以下不支援

HTML5+CSS3改變了使用者與文件的互動方式：
- 多媒體： video audio canvas
- 新特性：語義特性、本地儲存、網頁多媒體、二維三維、特效（過渡動畫）
相對於H4：
- 拋棄了一些不合理不常用的標籤和屬性
- 新增了一些標籤和屬性
- 從程式碼角度而言，h5的網頁結構程式碼更簡潔
```
html
html:xt
html:xs
```

1.1 部分新語義標籤

標籤名	作用
nav	導航
header	頁首或者其他內容的頭部
footer	頁尾或者其他內容的尾部
main	文件主要內容
article	文章
aside	主題內容之外

<header></header>
<nav></nav>
<main>
	<article></article>
	<asdie></aside>
</main>
<footer></footer>

相容性問題

IE9中這些標籤是 inline的，需要更改
IE8中完全無效，不認識這些標籤

解決辦法1. ——手動建立標籤:

<script>
// 建立了這些標籤，IE8就能理解了
//但是他們的display屬性預設是inline,需要在css中修改
	document.createElement("header");
	document.createElement("main");
	document.createElement("footer");
	document.createElement("aside");
</script>

解決方法2.—— 引入第三方外掛

// 預設情況下IE8以下的IE是不支援HTML5的，引入這個之後就可以了
<script src="html5shiv.min.js"></script>

1.2 新增表單type屬性

type型別	說明	屬性
`type="email"`	郵箱，輸入和平時一樣，但是在提交的時候添加了驗證（@符號和域名），如果不滿足要求，會阻止提交
`type="tel"`	電話，輸入和平時一樣，沒有驗證和阻止提交；為的是在移動端，會開啟數字鍵盤寫一個網頁，把檔案用手機發送給QQ，在QQ中檢視，就能看到數字鍵盤
`type="url"`	輸入和平時一樣，提交的時候添加了驗證（合法網址，包含協議名）
`type = "number"`	有上下箭頭選擇，且無法輸入非數字	max， min, value 分別表示最大、最小、預設值
`type="search"`	幾乎和平時一樣，但是右邊多了一個刪除全部的按鈕
`type="range"`	拖動條（調音量等等使用）	max,min屬性
`type="color"`	拾色器，可使用js獲取顏色值
`type="time"`	顯示為時間，並且有上下箭頭
`type="date"`	日期年月日，有日曆控制元件，並且有上下箭頭
`type="datetime"`	日期+時間，顯示和平時一樣（目前大多數瀏覽器不支援）,只有safari有用
`type="datetime-local"`	日期+時間，上下箭頭、日曆控制元件，瀏覽器有用
`type="month"`	哪一年的哪一月
`type="week"`	哪一年的第幾周

1.3 新增表單屬性

表單屬性	說明	取值
`placeholder`	使用者沒輸入時的佔位符	文字
`autofocus`	自動獲取焦點	無
`autocomplete`	自動根據以前成功提交的內容，提示補全；且該元素必須要有`name`屬性	on \| off
`required`	必須輸入, 不填寫會阻止提交	無
`pattern`	給一些輸入的正則驗證規則，比如給`tel`	正則表示式
`multiple`	給type="file"的，允許選擇多個檔案給type="email"中允許輸入多個郵件，用逗號分隔	無
`form`	給表單控制元件設定這個屬性，用來指定屬於哪個form	`form`標籤的id名稱

1.4 新增表單元素—— datalist, keygen, output

datalist

可以輸入又可以選擇的輸入—— input + datalist

使用list屬性加上 id號來關聯

<input type ="text" list="subjects" />
<datalist id="subjects">
	<!-- 
		option可以是單標籤也可以是雙標籤
		<option value="內容" label="提示" />
	-->
	<option value="前端" label="就業不錯"></option>
	<option value="後端" label="就業也不錯"></option>
	<option value="全棧" label="就業很不錯"></option>		
</datalist>

url+ datalist—— value必須新增http://

<input type ="url" list="subjects" />
<datalist id="subjects">
	<!-- 
		option可以是單標籤也可以是雙標籤
		<option value="內容" label="提示" />
	-->
	<option value="http://www.baidu.com" label="就業不錯"></option>
	<option value="http://www.baidu.com" label="就業不錯"></option>
</datalist>

相容性問題：

在谷歌中，選擇的內容為value內容， label內容為說明
在火狐中，選擇的內容為label，不支援value

keygen

金鑰生成器。當提交表單時，會生成2個金鑰，公鑰和私鑰；私鑰儲存於客戶端，公鑰會提交到伺服器。這個用於之後的驗證客戶端證書——實現非對稱加密。

瀏覽器支援率：極地
使用頻率：低

<form>
	<input type="text" >
	<input type="password" >
	<keygen></keygen>
	<input type="submit" >
</form>

傳遞公鑰+ 二次加密的資料。伺服器收到後，使用公鑰來解密。

output

只是用來顯示輸出的，不能顯示不能修改不能選中。
輸入內容是自己設定的，無法自動計算

<output>總金額：1000元</output>

使用頻率：低

1.5 新增的表單事件—— oninput、oninvalid

oninput：監聽當前指定元素內容的改變（新增刪除修改）
oninvalid：當驗證不通過時觸發

oninput

document.getElementById("inp1").oninput = function(){
	console.log(this.value);
}

對比：

onkeyup：鍵盤彈起觸發，每一個鍵彈起觸發一次
oninput: 不光是鍵盤輸入，賦值貼上都可以觸發

oninvalid —— 可以設定驗證失敗時的提示資訊

document.getElementById("inp1").oninvalid = function(){
	// 設定預設提示資訊
	this.setCustomValidity("請輸入合法手機號");
}

1.6 新增標籤—— progress, meter

標籤	屬性	說明
progress	max, value	進度條
meter	max,min,high,low,value	度量器

<progress max="100" value="100"></progress>

<meter max="100" min="0" high="80" low="40" value="30"></meter>
<meter max="100" min="0" high="80" low="40" value="60"></meter>
<meter max="100" min="0" high="80" low="40" value="100" name="level"></meter>

1.7 新增標籤——audio, video, source

以前使用音訊、視訊的方式：

embed : 直接插入視訊檔案——本質是呼叫本機上已經安裝的軟體，有相容性
flash外掛：需要安裝flash——需要學習flash使用、蘋果裝置不支援
audio或者video

標籤	屬性	說明
audio	src,controls, autoplay, loop	播放音訊
video	src, controls, autoplay, loop, width, height, post	播放視訊

屬性說明：

標籤	說明	取值
src	音訊檔案路徑
controls	顯示播放器控制面板	無
autoplay	自動播放	無
loop	迴圈	數字
poster	視訊專有，當視訊還沒有完全下載，或者使用者還沒有點選播放前，顯示的封面預設顯示視訊檔案的第一幀	圖片路徑

<audio src="../mp3/aa.mp3" controls></audio>
<video src="../mp3/mp4.mp4" poster="../images/l1.jpg" controls  height="600"></video>

==注意：==設定寬高的時候，一般只設置一個，讓他等比例縮放；如果都設定，不會完全按照寬高設定。

a. source標籤

因為不同瀏覽器支援的視訊和音訊檔案格式不一樣，所以我們在進行視訊新增的時候，需要考慮到瀏覽器是否支援。我們可以準備多個格式的視訊檔案，讓瀏覽器去選擇

<video>
	<source src="mp3/1.flv" type="video/flv">
	<source src="mp3/1.mp4" type="video/mp4">
	您的瀏覽器不支援當前視訊播放   <!-- 都不支援，就提示 -->
</video>

b. ★自定義播放器

參考地址：
W3School
MDN中Video的事件

常用方法	含義
`load()`	重新載入視訊元素。
`play()`	開始播放視訊。
`pause()`	暫停視訊
常用屬性	含義
`currentTime`	獲取當前視訊播放進度——秒
`duration`	獲取視訊總時間——秒
`paused`	返回視訊是否在暫停狀態
常用事件	含義
`oncanplay`:	載入到可以播放視訊/音訊時觸發
`ontimeupdate`	播放進度改變的時候觸發——播放時持續觸發
`onended`	視訊播放完成後觸發

注意：

video標籤的方法都是js方法，如果使用jquery的話需要將他們變回js物件才可以使用
使用hbuilder或者webstorm來設定currentTime屬性的時候，用他們自帶伺服器開啟會有點問題，但實際執行是ok的
進度條由4層組成：總長度、當前播放進度、已載入進度、透明的最上層，用來響應點選事件改變播放進度

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="jquery-1.12.4.js" ></script>
		<link rel="stylesheet" type="text/css" href="font/iconfont.css"/>
		<style>
			*{
				margin:0;
				padding: 0;
			}
			a{
				text-decoration: none;
				color:black;
			}
			.videoplayer{
				position: relative;
				width: 800px;
				height: 550px;
			}
			.videoplayer .media{
				width: 100%;
				height: 100%;
				background-color: black;
			}
			.videoplayer .media .video{
				/*width: 100%;*/
				height: 100%;
				margin: 0 auto;
				display: block;
			}
			/* 下方控制欄，讓他在*/
			.controls{
				position:  absolute;
				width: 100%;
				height: 50px;
				left:0;
				bottom: 0;
				background-color: pink;
				/* 讓 兒子按鈕定位*/
				/*position: relative;*/
			}
			.controls .play {
				position: absolute;
				left: 0;
			}
			.controls .fullscreen{
				position: absolute;
				right: 0;
			}
			
			/* 進度條 */
			.controls .progress{
				position: relative;
				
				margin-left: 70px;
				float:left;
				width: 60%;
				height: 100%;
			}
			.controls .progress > div{
				/* 將所有 進度條 固定在 中間*/
				position: absolute;
				height: 20px;
				left: 0;
				top: 50%;
				margin-top: -10px;
			}
			.controls .progress .fullbar{
				width: 100%;
				background-color: darkgrey;
			}
			/* 透明的bar，用於響應事件*/
			.controls .progress .bar{
				width: 100%;
				opacity: 0;
				z-index: 999;
			}
			/* 已走過的長度*/
			.controls .progress .elapse{
				background-color: white;
				width: 0%;
			}
			/* 已載入長度*/
			.controls .progress .loaded{
				background-color: grey;
				width: 60%;
			}
			
			/* 顯示時間 */
			.controls .time{
				float:left;
				height: 50px;
				line-height: 50px;
				margin-left: 10px;
			}
		</style>
	</head>
	<body>
		<div class="videoplayer">
			<!-- 視訊和載入gif-->
			<div class="media">
				<video class="video" src="竊格瓦拉.mp4"></video>	
			</div>
			<div class="controls">
				<!-- 左邊開始暫停  -->
				<a class="play" href="javascript:void(0);">
					<i class="iconfont icon-play_fill"></i>	
				</a>
				
				<!-- 右邊的按鈕全屏 -->
				<a class="fullscreen" href="javascript:void(0);">
					<i class="iconfont icon-fullscreen"></i>
					
				</a>
				<!--中間的進度條，有4個部分—— 已播放、已載入、全部長度、一層透明的點選事件響應層  -->
				<div class="progress">
					<!-- 全長-->
					<div class="fullbar"></div>
					<!-- 響應事件的bar-->
					<div class="bar"></div>
					<!--已載入長度-->
					<div class="loaded"></div>
					<!--走過時長-->
					<div class="elapse"></div>
				</div>
				<!-- 播放時長/總時長-->
				<div class="time">
					<span class="current-time">00:00</span>
					/
					<span class="total-time">00:00</span>
				</div>
			</div>
		</div>
		<script>
			$(function(){
				var video = $(".video").
              
           
              
              
            
            相關推薦
			   
            
            
            
 

    

    
    前端視訊學習（九、HTML5+CSS3）
       
 
  
  
 
 
  目錄
  
   1. HTML5新增標籤屬性
   
    1.1 部分新語義標籤
    
     相容性問題
    
    1.2 新增表單type屬性
    1.3 新增表單屬性
    1.4 新增表單元素—— datalist, keygen, outpu 

  
 

    

    
    前端視訊學習（六、JavaScript高階）
       
 
  
  
 
 
  目錄
  
   0. 複習
   
    
     
      基本型別（值型別）
      複雜型別（引用型別）
      型別檢測
     
     JavaScript 執行過程
    
   
   1. 物件
   
    1.1 建立物件的方法
 

  
 

    

    
    前端視訊學習（二、CSS（上））
      
							
							
							
課程目標:


學會使用CSS選擇器
熟記CSS樣式和外觀屬性
熟練掌握CSS各種選擇器
熟練掌握CSS三種顯示模式
熟練掌握CSS背景屬性
熟練掌握CSS三大特性：層疊、繼承、
熟練掌握CSS盒子模型
熟練掌握CSS浮動**
熟練掌握CSS定位
10.熟練掌 

  
 

    

    
    前端視訊學習（七、JQuery）
       
 
  
  
 
 
  目錄
  
   1. 第一個jquery
   2. jQuery版本問題
   3. jQuery入口函式
   
    3.1 寫法
    3.2 和js入口函式的區別
   
   4. ★jsDom物件和JQ物件
   
    4.1 JS偽陣列
    4.2 

  
 

    

    
    Python視訊學習（七、Python高階）
      
								
								            
							
							
							重點回顧：

GIL鎖是CPython直譯器的問題
copy模組的deepcopy和copy方法對於tuple拷貝的區別
私有屬性的繼承問題和重整
Python物件的__mro__ ，以及導致的 sup 

  
 

    

    
    Python視訊學習（十三、Git）
       
 
  
  
 
 
  目錄
  
   
    1. Git基本操作
    
     建立版本庫
     提交檔案
     檢視版本資訊
     回退版本
     工作區
     版本庫
     檢視工作區狀態
     撤銷修改
     對比檔案差異
     刪除檔案
    

  
 

    

    
    Python視訊學習（八、MySQL）
       
 
  
  
 58到家資料庫30條軍規 
  
  在開發中有很多設計資料庫的軟體，常用的如power designer，db desinger等，這些軟體可以直觀的看到實體及實體間的關係 
  
 
 
  目錄
  
   1. SQL分類
   2. MySQL安裝(檢視另一帖，安裝版本8.0) 

  
 

    

    
    GO語言學習（二、開發工具）
       
  
  
 LiteIDE LiteIDE 是一款開源、跨平臺的輕量級 Go 語言整合開發環境（IDE）。 
 支援的 作業系統 Windows x86 (32-bit or 64-bit) Linux x86 (32-bit or 64-bit) 下載地址 ：http://sourceforge.ne 

  
 

    

    
    Spark基礎-scala學習（七、型別引數）
      型別引數是什麼 
 
 類似於java泛型，泛型類 
 泛型函式 
 上邊界Bounds 
 下邊界 
 View Bounds 
 Context Bounds 
 Manifest Context Bounds 
 協變和逆變 
 Existential Type 
 
泛型類 
scala> :p 

  
 

    

    
    C# Winform 窗體美化（九、嵌入窗體）
      
							
							
							九、嵌入窗體

還是關於 Winform 窗體的一些操作問題，這次是研究了一個嵌入窗體，這次學習純屬偶然，專案中確實沒遇到過這種需求。就是把別人的程式嵌入到自己的程式中，就像這樣：

這裡我嵌入了測試顯示器的程式 




關於嵌入程式的資料，上面連結部落格的作 

  
 

    

    
    前端工具配置（webpack、vue-cli）
      　　隨著前端專案複雜度的增加，其所依賴的資源也越來越多，從最初的HTML檔案，CSS檔案，JS檔案發展到現在的各種預處理檔案，模板檔案等等。檔案多了，專案大了，專案的維護就變得更加困難了，使用者載入頁面的速度也變得更慢了。在這樣的背景下，webpack 應運而生，webpack 的主要作用是資源的整合，打包， 

  
 

    

    
    征服大前端視頻教程第一季（jQuery、HTML5、CSS3、Node.js）
      RR   程序   lar   mongodb   講解   ofo   href   工具   前端工程   征服大前端視頻教程第一季（jQuery、HTML5、CSS3、Node.js、AngularJS、MongoDB）網盤地址：https://pan.baidu.com/s/1-dbJMOa1RrQz 

  
 

    

    
    Web 前端開發精華文章推薦（jQuery、HTML5、CSS3）【系列十二】
      　　2012年12月12日，【《Web 前端開發人員和設計師必讀文章》系列十二】和大家見面了。夢想天空部落格關注 前端開發 技術，分享各種增強網站使用者體驗的 外掛，展示前沿的 HTML5 和 CSS3 技術應用，推薦優秀的 網頁設計 案例，共享精美的設計素材和優秀的 Web 開發工具，希望這些精心推薦的文章 

  
 

    

    
    Web 前端開發精華文章集錦（jQuery、HTML5、CSS3）【系列十七】
      　　《Web 前端開發精華文章推薦》2013年第五期（總第十七期）和大家見面了。夢想天空部落格關注 前端開發 技術，分享各種增強網站使用者體驗的 外掛，展示前沿的 HTML5 和 CSS3 技術應用，推薦優秀的 網頁設計 案例，共享精美的設計素材和優秀的 Web 開發工具，希望這些精心整理的前端技術文章能夠幫 

  
 

    

    
    linux學習（九）set_uid、set_gid、stick_bit、軟鏈接、硬鏈接
      private   char   就是   bug   spec   deb   date   scrip   usr   一、set_uid
set_uid其實是一種特殊權限，我們看一個文件：

[root@iZ25lzba47vZ ~]# ls -l /usr/bin/passwd
-rwsr-xr-x. 

  
 

    

    
    操作系統學習（九） 、訪問數據段時的特權級檢查
      區域   系統   才會   使用   執行   有效   以及   選擇   改變   為了訪問數據段中的操作數，數據段的段選擇符必須被加載進數據段寄存器(DS,ES,FS或GS)或堆棧段寄存器(SS)中。可以使用指令MOV、POP、LDS、LES、LFS、lGS和LSS來加載段寄存器。
在把一個段選擇符加 

  
 

    

    
    吳恩達機器學習（九）Precision、Recall、F-score、TPR、FPR、TNR、FNR、AUC、Accuracy
      
                目錄

0. 前言








學習完吳恩達老師機器學習課程的機器學習系統設計，簡單的做個筆記。文中部分描述屬於個人消化後的理解，僅供參考。

如果這篇文章對你有一點小小的幫助，請給個關注喔~我會非常開心的~


0. 前言

針對二分類的結果，對模型進行評估，通常有以下 

  
 

    

    
    201711671125 《Java程式設計》第9周學習總結（第九、十章）
       
 
 教材學習內容總結 
 第九章 
 1.處理事件 
 1．1事件處理模式 
 事件源：能夠產生事件的物件。 
 監視器：需要一個物件對事件源進行監視，以便對發生的事件做出處理。事件源通過呼叫相應的方法將某個物件註冊為自己的監視器。 
 addActionListener(監視器); 
 處理事件的介面 

  
 

    

    
    Python視訊學習（十四、Redis）
       
 
  
  
 
 
  目錄
  
   0. Redis基本介紹
   
    Redis簡介
    Redis特性：
    Redis 優勢
    Redis應用場景
   
   1. 安裝和配置
   
    1.1 下載安裝Redis
    
     遇到的問題
    
   

  
 

    

    
    十九、HTML5單頁框架View.js介紹 - 檢視跳轉（一）
       
  
  
 檢視跳轉，是指使用者看到的介面切換為另一個介面的過程，亦即活動檢視轉移的過程。（同一時刻，只有一個檢視處於活動狀態。） 
 檢視跳轉時，View.js將自動調整位址列中的hash部分，使其始終反映出當前的活動檢視ID。如： 
  
  http://wzhsoft.com/index.htm