HTML學習之旅
阿新 • • 發佈：2021-01-26
技術標籤：html5
1.什麼是HTML
Html：Hyper Text Markup Language (超文字標記語言)
優點優勢：世界知名瀏覽器廠商對HTML5的支援 市場的需求 跨平臺
W3C標準 World Wide Web Consortium(全球資訊網聯盟)
W3C標準包括
結構化標準語言 (HTML，XML)
表現標準語言(CSS)
行為標準(DOM , ECMAScript)
常見 ide(開發工具) 記事本 Dreamweaver IDEA WebStorm…
1.1HTML基本結構
DOCTYPE 宣告
<!DOCTYPE html> 1.2網頁的基本標籤
<!DOCTYPE html>
<html lang="en" 1.3影象標籤
常見的影象格式 JPG GIF PNG BMP …
<img src="path" alt="text" title="text" width="x" height="y"/>
<!-- src影象的地址 alt影象未加載出現的文字 title滑鼠懸停的文字 width影象寬度 height影象的高度 ../上一級目錄 推薦使用相對地址 不推薦使用絕對地址 -->
1.4連結標籤(重點)
文字超連結 圖片超連結
<a href="path" target="目標視窗位置">連結文字或影象</a>
<!-- href 連線路徑 target 連結在那個視窗開啟 常用值 _self在本網頁開啟 _blank建立一個新視窗開啟 -->
<!-- 錨鏈接 -->
<a href="#">回到頂部</a>
<!-- 功能性連結 -->
<!-- 郵件連結 -->
<a href="mailto:[email protected]">點選聯絡我</a>
1.5行內元素和塊元素
塊元素：無論內容多少該元素獨佔一行
行內元素：內容撐開寬度，左右都是行內元素可以排在一行
1.6列表
什麼是列表：列表就是資訊資源的一種展開形式。
列表的分類：
有序列表
無序列表
定義列表
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="keywords" content="來學習">
<meta name="description" content="學習">
<title>Document</title>
</head>
<body>
<!-- 有序列表 -->
<ol>
<li>java</li>
<li>python</li>
<li>運維</li>
<li>前端</li>
<li>c++</li>
</ol>
<hr/>
<!-- 無序列表
應用範圍 ： 導航 側邊欄.....
-->
<ul>
<li>java</li>
<li>python</li>
<li>運維</li>
<li>前端</li>
<li>c++</li>
</ul>
<hr/>
<!-- 自定義列表
dl 標籤
dt 列表名稱
dd 列表內容
應用範圍 ： 公司網站的底部
-->
<dl>
<dt>學科</dt>
<dd>java</dd>
<dd>python</dd>
<dd>linux</dd>
<dt>位置</dt>
<dd>黑龍江</dd>
<dd>北京</dd>
<dd>瀋陽</dd>
</dl>
</body>
</html>
1.7表格
為什麼使用表格：簡單通用，結構穩定
基本結構：單元格 行 列 跨行 跨列
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<!--
表格tatle
行 tr
列 td
-->
<table border="1px">
<tr>
<!-- colspan 跨列 -->
<td colspan="4">1-1</td>
</tr>
<tr>
<!-- rowspan 跨列 -->
<td rowspan="2">2-1</td>
<td>2-2</td>
<td>2-3</td>
<td>2-4</td>
</tr>
<tr>
<td>3-1</td>
<td>3-2</td>
<td>3-3</td>
</tr>
</table>
</body>
</html>
1.8媒體元素
視訊元素
<!-- src視訊資源路徑 controls進度條 autoplay自動播放-->
<video src="" controls autoplay></video>
音訊元素
<!-- src音訊資源路徑 controls進度條 autoplay自動播放 -->
<audio src="" controls autoplay></audio>
2.頁面結構分析
元素名 描述
header 標籤頭部區域的內容(用於頁面或頁面中的一塊區域)
footer 標籤腳部區域的內容(用於整個頁面或頁面一塊區域)
section Web頁面中一塊獨立的區域
article 獨立的文章內容
aside 相關內容或應用(常用於側邊欄)
nav 導航類輔助內容
<header><h2>網頁頭部</h2></header>
<section>
<h2>網頁主體</h2>
</section>
<footer><h2>網頁尾部</h2></footer>
2.1ifeame內聯框架
<!-- src 引用頁面地址 name框架標識名 -->
<!-- 內聯框架來自B站微小_時光 -->
<iframe src="//player.bilibili.com/player.html?aid=203807862&bvid=BV1Ch411y75c&cid=285834143&page=1"
scrolling="no" border="0" frameborder="no" framespacing="0" allowfullscreen="true"> </iframe>
3.表單(重點)
<h1>註冊</h1>
<!-- method如何傳送表單資料 常用值 get / post 提交方式
action 表示向何處傳送表單資料 可以提交到網站也可以是一個請求處理地址-->
<form action="我的第一個網頁.html" method="post">
<!-- 文字輸入框 : input type="text" -->
<p>名字: <input type="text" name="username"></p>
<!-- 密碼輸入框 input type="password"-->
<p>密碼: <input type="password" name="pwd"></p>
<input type="submit">
<input type="reset">
</form>
屬性 說明
type 指定元素的型別。text,passwoed,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時，指定按鈕是否是被選中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<h1>註冊</h1>
<!-- method如何傳送表單資料 常用值 get / post 提交方式
action 表示向何處傳送表單資料 可以提交到網站也可以是一個請求處理地址-->
<form action="我的第一個網頁.html" method="post">
<!-- 文字輸入框 : input type="text" -->
<p>名字: <input type="text" name="username"></p>
<!-- 密碼輸入框 input type="password"-->
<p>密碼: <input type="password" name="pwd"></p>
<!-- 單選框標籤
input type="radio"
value : 單選框的值
name : 表示組
-->
<p>性別:
<input type="radio" value="sex">男
<input type="radio" value="sex">女
</p>
<!-- 多選框
input type="checkbox"
checked 預設選中
-->
<p>愛好:
<input type="checkbox" value="sleep" name="hobby">睡覺
<input type="checkbox" value="code" name="hobby" checked>敲程式碼
<input type="checkbox" value="chat" name="hobby">聊天
<input type="checkbox" value="game" name="hobby">遊戲
</p>
<!-- 按鈕
type="button" 普通按鈕
type="image" 影象按鈕
type="submit" 提交按鈕
type="reset" 重置
-->
<p>按鈕:
<input type="button" name="btn1" value="點選變長">
<input type="image" src="圖片的地址">
</p>
<!-- 下拉框
selected 預設選中
-->
<p>下拉框:
<select name="列表名稱" id="選擇器">
<option value="選項的值">中國</option>
<option value="選項的值">美國</option>
<option value="選項的值">日本</option>
<option value="選項的值" selected>韓國</option>
</select>
</p>
<!-- 文字區域 -->
<p>反饋:
<textarea name="textarea" id="" cols="10" rows="10">文字內容</textarea>
</p>
<!-- 檔案域 -->
<p>
<input type="file" name="files">
<input type="button" value="上傳" name="upload">
</p>
<!-- 郵件驗證 -->
<p>郵箱：
<input type="email" name="email">
</p>
<!-- URL -->
<p>url：
<input type="url" name="url">
</p>
<!-- 數字驗證 常用在商品數量 -->
<p>數字:
<input type="number" name="num" max="100" min="0" step="10">
</p>
<!-- 滑塊 常用於音量 -->
<p>滑塊：
<input type="range" min="0" max="100" name="voice" step="2">
</p>
<!-- 搜尋框 -->
<p>搜尋：
<input type="search" name="search">
</p>
<input type="submit">
<input type="reset">
</form>
</body>
</html>
3.1表單的應用
只讀：<p>名字: <input type="text" name="username" value="admin" readonly></p>
禁用：<input type="radio" value="sex" disabled>男
隱藏域：
密碼: <input type="password" name="pwd" hidden></p>
<!-- 增強滑鼠可用性 -->
<p>
<label for="mark">你點我試試</label>
<input type="text" id="mark">
</p>
3.2表單初級驗證
常用方式
placeholder:提示資訊
required:非空判斷
pattern:正則表示式