?HTML
HTML的全稱為超文本標記語言,是一種標記語言,它包括一系列標簽.通過這些標簽可以將網路上的檔案格式統一,使分散的Internet資源連接為一個邏輯整體,HTML文本是由HTML命令組成的描述性文本,HTML命令可以說明文字,圖形、影片、聲音、表格、鏈接等,
?課程
https://www.bilibili.com/video/BV1x4411V75C
?學習筆記
我的第一個網頁
<!--!DOCTYPE 告訴瀏覽器使用什么規范-->
<!DOCTYPE html>
<html lang="en">
<!--head 網頁頭部-->
<head>
<!-- meta 描述性標簽 描述網頁資訊-->
<!-- meta 一般用來做SEO-->
<meta charset="UTF-8">
<meta name="keywords" content="IU">
<meta name="description" content="Test">
<!-- title 網頁標題-->
<title>Hello World</title>
</head>
<!--body 網頁主題-->
<body>
Hello World
</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>設計模式(Design Pattern)是前輩們對代碼開發經驗的總結,是解決特定問題的一系列套路,它不是語法規定,而是一套用來提高代碼可復用性、可維護性、可讀性、穩健性以及安全性的解決方案,</p>
<p>1995 年,GoF(Gang of Four,四人組/四人幫)合作出版了《設計模式:可復用面向物件軟體的基礎》一書,共收錄了 23 種設計模式,從此樹立了軟體設計模式領域的里程碑,人稱「GoF設計模式」,</p>
<!--換行標簽-->
<p>設計模式(Design Pattern)是前輩們對代碼開發經驗的總結,是解決特定問題的一系列套路,它不是語法規定,而是一套用來提高代碼可復用性、可維護性、可讀性、穩健性以及安全性的解決方案,</p>
<br>
<p>1995 年,GoF(Gang of Four,四人組/四人幫)合作出版了《設計模式:可復用面向物件軟體的基礎》一書,共收錄了 23 種設計模式,從此樹立了軟體設計模式領域的里程碑,人稱「GoF設計模式」,</p>
<!--水平線標簽-->
<hr/>
<!--字體樣式標簽-->
<h1>字體樣式標簽</h1>
<strong>粗體</strong>
<em>斜體</em>
<br>
<!--特殊符號-->
<!--空格-->
空 格
>
<
©
</body>
</html>
影像標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>影像標簽</title>
</head>
<body>
<!--src圖片地址(必填) alt圖片名字(必填)-->
<img src="https://img.uj5u.com/2021/06/27/246112270626371.png" alt="圖片加載失敗時顯示" title="懸停文字" width="1067" height="667">
<a href="https://www.cnblogs.com/Flat-White/archive/2021/06/26/4.%20鏈接標簽.html#down"> 底部</a>
</body>
</html>
鏈接標簽
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈接標簽</title>
</head>
<!--a標簽-->
<!--href(必填)表示跳轉到哪個頁面-->
<!--target 表示視窗在哪里打開-->
<!-- _blank 新標簽打開-->
<!-- _self 本頁面打開-->
<!--塊元素-->
<!--無論內容多少,該元素獨占一行(p、h1-h6...)-->
<!--行內元素-->
<!--內容撐開寬度﹐左右都是行內元素的可以在排在一行( a . strong . em ... )-->
<body>
<a name="top">頂部</a>
<a href="https://www.cnblogs.com/Flat-White/archive/2021/06/26/1.%20我的第一個網頁.html" target="_blank">點擊跳轉我的第一個網頁</a>
<a href="https://www.baidu.com" target="_self">點擊跳轉百度</a>
<br>
<a href="https://www.cnblogs.com/Flat-White/archive/2021/06/26/1.%20我的第一個網頁.html">點擊跳轉我的第一個網頁
<img src="https://img.uj5u.com/2021/06/27/246112270626371.png" alt="圖片加載失敗時顯示" title="懸停文字" width="1067" height="667">
</a>
<!--錨鏈接-->
<!--1. 需要一個錨標記-->
<!--2. 跳轉到標記-->
<!--<a href="https://www.cnblogs.com/Flat-White/archive/2021/06/26/1.%20我的第一個網頁.html">點擊跳轉我的第一個網頁-->
<!-- <img src="https://img.uj5u.com/2021/06/27/246112270626371.png" alt="圖片加載失敗時顯示" title="懸停文字" width="1067" height="667">-->
<!--</a><a href="https://www.cnblogs.com/Flat-White/archive/2021/06/26/1.%20我的第一個網頁.html">點擊跳轉我的第一個網頁-->
<!-- <img src="https://img.uj5u.com/2021/06/27/246112270626371.png" alt="圖片加載失敗時顯示" title="懸停文字" width="1067" height="667">-->
<!--</a><a href="https://www.cnblogs.com/Flat-White/archive/2021/06/26/1.%20我的第一個網頁.html">點擊跳轉我的第一個網頁-->
<!-- <img src="https://img.uj5u.com/2021/06/27/246112270626371.png" alt="圖片加載失敗時顯示" title="懸停文字" width="1067" height="667">-->
<!--</a><a href="https://www.cnblogs.com/Flat-White/archive/2021/06/26/1.%20我的第一個網頁.html">點擊跳轉我的第一個網頁-->
<!-- <img src="https://img.uj5u.com/2021/06/27/246112270626371.png" alt="圖片加載失敗時顯示" title="懸停文字" width="1067" height="667">-->
<!--</a><a href="https://www.cnblogs.com/Flat-White/archive/2021/06/26/1.%20我的第一個網頁.html">點擊跳轉我的第一個網頁-->
<!-- <img src="https://img.uj5u.com/2021/06/27/246112270626371.png" alt="圖片加載失敗時顯示" title="懸停文字" width="1067" height="667">-->
<!--</a><a href="https://www.cnblogs.com/Flat-White/archive/2021/06/26/1.%20我的第一個網頁.html">點擊跳轉我的第一個網頁-->
<!-- <img src="https://img.uj5u.com/2021/06/27/246112270626371.png" alt="圖片加載失敗時顯示" title="懸停文字" width="1067" height="667">-->
<!--</a>-->
<!--功能性鏈接-->
<!--郵箱鏈接-->
<!--QQ推廣鏈接-->
<a href="mailto:[email protected]">mailto</a>
<a href="https://www.cnblogs.com/Flat-White/archive/2021/06/26/#top">回到頂部</a>
<a name="down">底部</a>
</body>
</html>
串列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>串列</title>
</head>
<body>
<!--有序串列-->
<ol>
<li>Java</li>
<li>Python</li>
<li>C</li>
<li>C++</li>
<li>PHP</li>
</ol>
<hr/>
<!--無序串列-->
<ul>
<li>Java</li>
<li>Python</li>
<li>C</li>
<li>C++</li>
<li>PHP</li>
</ul>
<hr/>
<!--自定義串列
dl:標簽
dt:標題
dd:內容-->
<dl>
<dt>title1</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
<dt>title2</dt>
<dd>1</dd>
<dd>2</dd>
<dd>3</dd>
</dl>
</body>
</html>
表格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table
行 tr
列 td-->
<table border="1px">
<tr>
<!-- 跨列-->
<td colspan="5">跨5列</td>
</tr>
<tr>
<!-- 跨行-->
<td rowspan="2">跨2行</td>
<td>2</td>
<td>3</td>
<td>4</td>
<td>5</td>
</tr>
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
<td>4</td>
<!-- <td>5</td>-->
</tr>
</table>
<hr/>
<table border="1px">
<tr>
<td colspan="3">表格測驗</td>
</tr>
<tr>
<td rowspan="2">跨2行</td>
<td>語文</td>
<td>100</td>
</tr>
<tr>
<td>數學</td>
<td>100</td>
</tr>
<tr>
<td rowspan="2">跨2行</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>
<!--<video src="https://www.cnblogs.com/Flat-White/archive/2021/06/26/源" controls控制條 autoplay自動播放/></video>-->
<audio src="https://www.cnblogs.com/Flat-White/archive/2021/06/resources/audio/IU,SUGA%20-%20??(Prod.&Feat.%20SUGA%20of%20BTS).flac" controls autoplay>
</audio>
</body>
</html>
頁面結構分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>頁面結構分析</title>
</head>
<body>
<p>header 標題頭部區域的內容(用于頁面或頁面中的一塊區域)</p>
<p>footer 標記腳部區域的內容(用于整個頁面或頁面的一塊區域)</p>
<p>section Web頁面中的一塊獨立區域</p>
<p>article 獨立的文章內容</p>
<p>aside 相關內容或應用(常用于側邊欄)</p>
<p>nav 導航類輔助內容<p/>
<header><h1>網頁頭部</h1></header>
<header>網頁頭部</header>
<hr>
<section><h1>網頁主體</h1></section>
<section>網頁主體</section>
<hr>
<footer><h1>網頁腳部</h1></footer>
<footer>網頁腳部</footer>
</body>
</html>
行內框架
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行內框架</title>
</head>
<body>
<!--ifram行內框架-->
<iframe src="https://www.cnblogs.com//player.bilibili.com/player.html?aid=55631961&bvid=BV1x4411V75C&cid=97257967&page=11" scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
<!--<iframe src="https://www.baidu.com" width="300px" height="300px"></iframe>-->
<iframe src="" name="baidu" width="1000px" height="800px"></iframe>
<a href="https://www.baidu.com" target="baidu">點擊跳轉</a>
</body>
</html>
表單
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<!--表單form
action 表單提交的位置 網站/請求處理地址
method post get 提交方式
get方式提交 可以在url中看到提交的資訊 不安全 高效
post方式提交 比較安全 傳輸大檔案
-->
<p>type 指定元素的型別,text、password、checkbox、radio、submit、reset、file、hidden、image 和button,默認為 text</p>
<p>name 指定表單元素的名稱</p>
<p>value 元素的初始值,type為radio時必須指定一個值</p>
<p>size 指定表單元素的初始寬度,當type為text或password時,表單元素的大小以字符為單位,對于其他型別,寬度以像素為單位</p>
<p>maxlength type為text或 password時,輸入的最大字符數</p>
<p>checked type為radio或checkbox時,指定按鈕是否是被選中</p>
<p>readonly 只讀</p>d
<p>disable 禁用</p>
<p>hidden 隱藏 -> 傳遞默認值</p>
<h1>注冊</h1>
<form action="1.%20我的第一個網頁.html" method="get">
<!-- 文本輸入框-->
<p>用戶名 <input type="text" name="username" value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/初始值" maxlength="8" size="30"></p>
<p>用戶名 <input type="text" name="username" value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/readonly" readonly maxlength="8" size="30"></p>
<!-- 密碼框-->
<p>密 碼 <input type="password" name="passwd"></p>
<p>密 碼 <input type="password" name="passwd" hidden></p>
<!-- 單選框-->
<!-- name相同為同一組-->
<p>性 別
<input type="radio" value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/boy" name="sex" checked/>男
<input type="radio" value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/boy" name="sex" checked disabled/>男
<input type="radio" value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/girl" name="sex"/>女
</p>
<!-- 多選框-->
<p>愛好
<input type="checkbox" value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/sleep" name="hobby">睡覺
<input type="checkbox" value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/code" name="hobby" checked>coding
<input type="checkbox" value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/chat" name="hobby">聊天
<input type="checkbox" value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/game" name="hobby">游戲
<input type="checkbox" value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/girl" name="hobby">girl
</p>
<!-- 按鈕-->
<p>
<input type="button" name="btn1" value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/按鈕">
<!-- <input type="image" src="https://img.uj5u.com/2021/06/27/246112270626371.png">-->
</p>
<p>
<input type="submit">
<input type="reset" value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/清空表單">
</p>
<!-- 下拉框 串列框-->
<p>下拉框
<select name="串列名稱">
<option value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/111">選項一</option>
<option value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/222">選項二</option>
<option value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/333" selected>選項三</option>
<option value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/444">選項四</option>
<option value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/555">選項五</option>
</select>
</p>
<!-- 文本域-->
<p>textarea
<textarea name="textarea" cols="50" rows="10">文本內容</textarea>
</p>
<!-- 檔案域-->
<p>
<input type="file" name="files">
<input type="button" value="https://www.cnblogs.com/Flat-White/archive/2021/06/26/上傳" name="upload">
</p>
<!-- 郵件驗證-->
<p>郵箱
<input type="email" name="email">
</p>
<!-- URL驗證-->
<p>URL
<input type="url" name="url">
</p>
<!-- 數字驗證-->
<p>商品數量
<input type="number" name="number" max="100" min="0" step="10">
</p>
<!-- 滑塊-->
<p>音量
<input type="range" name="voice" min="0" max="100" step="10">
</p>
<!-- 搜索-->
<p>搜索
<input type="search" name="search">
</p>
<!-- 增強滑鼠可用性-->
<p>
<label for="mark">點我聚焦位置</label>
<input type="text" id="mark">
</p>
<p>
<input type="submit" disabled>
</p>
</form>
</body>
</html>
表單驗證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單驗證</title>
</head>
<body>
<!--表單form
action 表單提交的位置 網站/請求處理地址
method post get 提交方式
get方式提交 可以在url中看到提交的資訊 不安全 高效
post方式提交 比較安全 傳輸大檔案
-->
<p>placeholder 提示資訊</p>
<p>required 非空判斷</p>
<p>pattern 正則運算式</p>
<form action="1.%20我的第一個網頁.html" method="get">
<!-- 文本輸入框-->
<p>用戶名 <input type="text" name="username" placeholder="請輸入用戶名" required></p>
<!-- 密碼框-->
<p>密 碼 <input type="password" name="passwd" placeholder="請輸入密碼"required></p>
<!-- 正則運算式驗證-->
<p>正則運算式驗證<input type="text" required name="test" pattern="[A-z]{3}" title="只能包含三個字母的文本欄位(數字或特殊字符)"></p>
<p>
<input type="submit">
</p>
</form>
</body>
</html>
?轉載請注明出處
本文作者:雙份濃縮馥芮白
原文鏈接:https://www.cnblogs.com/Flat-White/p/14939352.html
著作權所有,如需轉載請注明出處,
轉載請註明出處,本文鏈接:https://www.uj5u.com/qiye/288518.html
標籤:其他
上一篇:Typescript學習總結
