【報告分享】 2020年教育行業OMO模式轉型現狀研究報告（附下載）
阿新 • • 發佈：2020-10-11
HTML(H5)
視訊連結: https://www.bilibili.com/video/BV1x4411V75C/
資料來源: 遇見狂神說 (https://space.bilibili.com/95256449/channel/detail?cid=146244)
HTML(Hyper Text Markup Language)超文字標記語言
超文字包括 : 文字, 圖片, 音訊, 視訊, 動畫等.
HTML5
W3C標準
W3C
- World Wide Web Consortium (全球資訊網聯盟)
- 成立於1994年, Web技術鄰域最權威和具影響力的國際中立性技術標準機構
- http://www.w3.org/
- http://www.chinaw.org/
W3C標準包括
- 結構化標準語言(HTML, XML)
- 表現標準語言 (CSS)
- 行為標準 (DOM, ECMAScript)
<!--DOCTYPE: 告訴瀏覽器我們要使用什麼規範--> <!DOCTYPE html> <html lang="en"> <!--網頁頭部--> <head><!--開放標籤--> <!-- meta描述型標籤,用來描述我們網站的一些資訊 --> <!-- meta一般用來做SEO<搜尋引擎優化>--> <meta charset="UTF-8"> <meta name="keywords" content="橘子皮的第一個html"> <meta name="description" content="立志成為一名合格的java程式設計師"> <!--title網頁標題--> <title>Title</title> </head><!--閉合標籤--> <!--主體部分--> <body> </body> </html>
網頁基本標籤
- 標題標籤
- 段落標籤
- 換行標籤
- 水平線標籤
- 字型樣式標籤
- 註釋和特殊符號
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>網頁基本標籤</title> </head> <body> <!--標題標籤--> <h1>一級標籤</h1> <h2>二級標籤</h2> <h3>三級標籤</h3> <h4>四級標籤</h4> <h5>五級標籤</h5> <h6>六級標籤</h6> <!--段落標籤--> <p>i am the king</p> <p>天不生我李淳罡</p> <p>劍道萬古如長夜</p> <!--換行標籤--> i <br/> love <br/> you <br/> <!--水平線標籤--> <hr/> <!--字型樣式標籤--> 粗體 : <strong>gzpstart</strong><br/> 斜體 : <em>baby</em> <br/> <!--特殊符號--> 空 格<br/> 空 格 <br/> > <br/> < <br/> © </body> </html>
影象標籤
常見影象格式
- JPG
- GIF
- PNG
- BMP
- ......
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>影象標籤</title>
</head>
<body>
<!--
src:圖片地址(必填)
../ 上一級目錄
alt:圖片名字(-必填-)
-->
<img src="../resources/image/main.jpg" alt="main" title="懸停文字" height="300" width="500"/>
</body>
</html>
連結標籤
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>連結標籤</title>
</head>
<body>
<!--a標籤
href : 必填, 表示要跳到那個頁面
target : 表示視窗在哪裡開啟
_blank : 在新標籤中開啟
_self : 在當前頁面開啟
-->
<a href="3.影象標籤.html" target="_blank">點選我跳轉頁面</a>
<a href="https://www.baidu.com" target="_self">百度</a>
<br/>
<a href="1.我的第一個網頁.html">
<img src="../resources/image/main.jpg" alt="main" title="懸停文字" width="550" height="300">
</a>
</body>
</html>
錨鏈接
頁面之間的跳轉
<!--使用name作為標記-->
<a name="top">頂部</a>
......
<br/>
<!--錨鏈接
1. 需要一個標記
2. 跳轉到標記
#
-->
<a href="#top">回到頂部</a>
頁面與頁面的跳轉
<a href="4.連結標籤.html#down">down</a>
<a href="down">底部</a>
功能性連結
<!--功能性連結-->
<a href="mailto:[email protected]">點選聯絡我</a>
<!--qq推廣-->
<a target="_blank" href="http://wpa.qq.com/msgrd?v=3&uin=&site=qq&menu=yes">
<img border="0" src="http://wpa.qq.com/pa?p=2::52" alt="點選這裡給我發訊息" title="點選這裡給我發訊息"/></a>
行內元素和塊元素
塊元素
- 無論內容多少,該元素獨佔一行.
- (p, h1-h6...)
行內元素
- 內容撐開寬度,左右都是行內元素的可以排在一行.
- (a, strong, em...)
列表
列表可以使資訊結構化, 條理化.
列表分類
- 有序列表
- 無序列表
- 自定義列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>列表</title>
</head>
<body>
<!--有序列表-->
<ol>
<li>java</li>
<li>Web</li>
<li>C</li>
<li>C++</li>
<li>Linux</li>
</ol>
<hr/>
<!--無序列表-->
<ul>
<li>凱撒</li>
<li>楚子航</li>
<li>繪梨衣</li>
<li>夏彌</li>
<li>諾諾</li>
</ul>
<hr/>
<!--自定義列表
dl : 標籤
dt : 列表名稱
dd : 列表內容
-->
<dl>
<dt>公司</dt>
<dd>阿里</dd>
<dd>騰訊</dd>
<dd>谷歌</dd>
<dd>位元組跳動</dd>
</dl>
<dl>
<dt>人物</dt>
<dd>馬雲</dd>
<dd>馬化騰</dd>
<dd>周鴻禕</dd>
<dd>張朝陽</dd>
</dl>
</body>
</html>
表格
簡單通用, 結構穩定
基本結構:
- 單元格
- 行
- 列
- 跨行
- 跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格
table : 表格標籤
tr : 行 rows
td : 列 column
-->
<table border="1px">
<tr>
<!--colspan : 跨列-->
<td colspan="3">學生成績</td>
</tr>
<tr>
<!--rowspan : 跨行-->
<td rowspan="2">gzp</td>
<td>語文</td>
<td>100</td>
</tr>
<tr>
<td>數學</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">start</td>
<td>物理</td>
<td>100</td>
</tr>
<tr>
<td>化學</td>
<td>100</td>
</tr>
</table>
</body>
</html>
媒體元素
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體元素</title>
</head>
<body>
<!--媒體元素
src : 資源路徑
controls : 控制條
autoplay : 自動播放
muted : 靜音
loop: 控制視訊迴圈播放
高版本瀏覽器，對視訊靜音後，可以保證視訊自動播放
-->
<!--<video src="../resources/video/片頭.mp4 " controls autoplay muted>視訊</video>-->
<audio src="../resources/audio/海賊.mp3" controls autoplay>音訊</audio>
</body>
</html>
頁面結構分析
| 元素名 | 描述 |
|---|---|
| header | 標題頭部區域的內容(用於頁面或頁面中的一塊區域) |
| footer | 標記腳部區域的內容(用於整個頁面或頁面的一塊區域) |
| section | Web頁面中的一塊獨立區域 |
| article | 獨立的文章內容 |
| aside | 相關內容或應用(常用於側邊欄) |
| nav | 導航類輔助內容 |
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面結構</title>
</head>
<body>
<header>
<h4>頁面頭部</h4>
</header>
<section>
<h3>頁面主體</h3>
</section>
<footer>
<h3>頁面腳部</h3>
</footer>
</body>
</html>
iframe內聯框架
一個網頁裡面巢狀另一個網頁
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>iframe</title>
</head>
<body>
<!--iframe內聯框架
src : 路徑
w-h : 寬度高度
-->
<!--<iframe src="https://www.baidu.com" frameborder="0" width="850" height="800"></iframe>-->
<iframe src="" name="gzp" frameborder="0"></iframe>
<a href="3.影象標籤.html#gzp">點選我跳轉</a>
<!--bilibili-->
<!--<iframe src="//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11"-->
<!--scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true">-->
<!--</iframe>-->
</body>
</html>
form表單*
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<h2>註冊</h2>
<!--表單form
action : 表單提交的位置, 可以是網站, 也可以是一個請求處理的地址
method : post, get 提交方式
get方式提交 : 我們可以在url中看到我們提交的資訊, 不安全, 高效.
post : 比較安全, 可以傳輸大檔案.
-->
<form action="6.表格.html" method="post">
<p>名字 : <input type="text" name="username"></p>
<p>密碼 : <input type="password" name="pwd"></p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
</body>
</html>
表單元素格式
| 屬性 | 說明 |
|---|---|
| type | 指定元素的型別. text, password, checkbox, radio, submit, reset, file, hidden, image和button, 預設為text |
| name | 指定表單元素名稱 |
| value | 元素的初始值. type為radio時必須指定一個值. |
| size | 指定表單元素的初始寬度. 當type為text或password時,表單元素的大小以字元為單位, 對於其他型別, 寬度以畫素為單位. |
| maxlength | 當type為text或password時, 輸入最大的字元數. |
| checked | type為radio或checkbox時, 指定按鈕是否被選中. |
單選框
<form action="6.表格.html" method="post">
<!--input type="text"
value="gzpstart" 預設初始值
maxLength="8" 最長能寫幾個字元
size="30" 文字框長度
-->
<p>名字 : <input type="text" name="username"></p>
<p>密碼 : <input type="password" name="pwd"></p>
<!--單選框標籤
input type="radio"
value : 單選框的值
name : 表示組
-->
<p>性別 :
<input type="radio" value="boy" name="sex"/>男
<input type="radio" value="girl" name="sex"/>女
</p>
<p>
<input type="submit">
<input type="reset">
</p>
</form>
多選框 按鈕
<!--多選框
input type="checkbox"
checked : 預設
-->
<p>愛好 :
<input type="checkbox" value="game" name="hobby"/>遊戲
<input type="checkbox" value="girl" name="hobby" checked/>女人
<input type="checkbox" value="java" name="hobby"/>java
<input type="checkbox" value="witch" name="hobby"/>表
<input type="checkbox" value="money" name="hobby"/>錢
</p>
<!--按鈕
input type="button" : 普通按鈕
input type="image" : 圖片按鈕
input type="submit" : 表單提交按鈕
input type="reset" : 重置按鈕
-->
<p>按鈕 :
<input type="button" value="點選變長" name="btn">
<br/>
<input type="image" src="../resources/image/main.jpg" width="400" height="260"/>
</p>
<p>
<input type="submit">
<input type="reset">
</p>
下拉框 文字域 檔案域
<!--下拉框
select/option
selected : 預設
-->
<p>國家 :
<select name="country" id="">
<option value="China">中國</option>
<option value="USA">美國</option>
<option value="Japan" selected>日本</option>
<option value="India">印度</option>
</select>
</p>
<!--文字域
textarea name="textarea"
cols="60" : 列
rows="10" : 行
-->
<p>反饋 :
<textarea name="textarea" cols="60" rows="10" >文字內容</textarea>
</p>
<!--檔案域
input type="file"
name="files"
-->
<p>上傳檔案 :
<input type="file" name="files"/>
<input type="button" name="btn" value="提交"/>
</p>
驗證
<!--郵箱驗證-->
<p>郵箱 :
<input type="email" name="email">
</p>
<!--url-->
<p>URL :
<input type="url" name="url">
</p>
<!--數字-->
<p>商品數量 :
<input type="number" name="number" step="1">
</p>
<!--滑塊
range
-->
<p>音量 :
<input type="range" name="volume" step="2">
</p>
<!--搜尋框-->
<p>搜尋 :
<input type="search" name="search">
</p>
表單的應用
- 隱藏域 hidden
- 只讀 readonly
- 禁用 disabled
<p>名字 : <input type="text" name="username" value="admin" readonly></p>
<p>密碼 : <input type="password" name="pwd" hidden></p>
<p>
<input type="radio" value="boy" name="sex" disabled/>男
</p>
增強滑鼠可用性
<!--增強滑鼠的可用性-->
<p>
<label for="one">你點我試試</label>
<input type="text" id="one"/>
</p>
......
<p>
<label for="text">搜尋 :</label>
<input type="search" name="search" id="text">
</p>
表單初級驗證
安全, 減輕壓力
常用方式:
- placeholder 提示資訊
- required 非空判斷
- pattern 正則表示式
<p>名字 : <input type="text" name="username" placeholder="請輸入使用者名稱" required></p>
<p>密碼 : <input type="password" name="pwd" required placeholder="請輸入密碼"></p>
常用正則表示式
https://www.jb51.net/tools/regexsc.htm