一、HTML5簡介
HTML是互聯網上應用最廣泛的標記語言，HTML檔案就是普通文本+HTML標記，而不同的HTML標記能表示不同的效果，
HTML5優勢
HTML5并不是一種革新的的升級，而是一種向規范向習慣的妥協，因此HTML5并不會帶給開發者過多的沖擊，從HTML4到HTML5過渡會非常輕松，
HTML5解決了以下四點問題 ：
解決跨瀏覽器問題
部標簽代替了原來的JavaScript
更明確的語意支持
增強了web應用程式和功能
二、我的第一個網頁
下面在ideal中先寫一個第一個網頁，測驗一下環境是否搭建好，
<!--DOCTYPE :告訴瀏覽器，我們要使用什么規范 -->
<!DOCTYPE html>
<html lang="en">
<!--head標簽代表網頁頭部-->
<head>
<!--meta描述性標簽，它用來描述我們網站的一些資訊-->
<meta charset="UTF-8">
<meta name="keywords" content="好好學習">
<meta name="description" content="從現在開始好好學習">
<!--title網頁標題-->
<title>我的第一個網頁</title>
</head>
<!--body標簽代表網頁主體 -->
<body>
hello，world！
</body>
</html>
三、影像標簽
image影像 src：圖片地址，可以選用相對路徑，也可以選用絕對路徑，一般使用相對路徑，便于進行修改，或者發送給他人，每個人的存盤路徑不同，絕對路徑就要進行修改，大大不便， src和talt是必填項 ，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>影像標簽</title>
</head>
<body>
<!--放入影像
src圖片地址 相對路徑 alt 報錯誤時提示資訊
title 滑鼠懸停時的文字-->
<img src="https://img.uj5u.com/2021/04/01/232026012025351.png" alt="缺陷照片" title="懸停文字" width="300" height="300">
<a href="https://www.cnblogs.com/pythonzhilian/p/3、鏈接標簽.html#down">跳轉到底部</a>
</body>
</html>
四、鏈接標簽
在日常我們經常可以看到點擊這個鏈接，跳轉到另一個界面，其實就是使用了鏈接標簽這個方法，a href輸入跳轉地址，還應用了一下錨鏈接，功能性鏈接，郵件，qq等，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>鏈接標簽</title>
</head>
<body>
<!--使用name作為標記-->
<a name="top">頂部</a>
<!--a標簽
herf必填 表示要跳轉到哪個網頁
target表示視窗在哪里打開
_blank 在新標簽中打開
_self 在自己網頁打開-->
<a href="https://www.cnblogs.com/pythonzhilian/p/1.我的第一個網頁.html" target="_blank">點我跳轉到頁面</a>
<br>
<a href="https://www.baidu.com" target="_self">點我跳轉到百度</a>
<br>
<a href="https://www.cnblogs.com/pythonzhilian/p/1.我的第一個網頁.html">
<img src="https://img.uj5u.com/2021/04/01/232026012025351.png" alt="缺陷照片" title="懸停文字" width="300" height="300" >
</a>
<p></p>
<a href="https://www.cnblogs.com/pythonzhilian/p/1.我的第一個網頁.html">
<img src="https://img.uj5u.com/2021/04/01/232026012025351.png" alt="缺陷照片" title="懸停文字" width="300" height="300" >
</a>
<p></p>
<a href="https://www.cnblogs.com/pythonzhilian/p/1.我的第一個網頁.html">
<img src="https://img.uj5u.com/2021/04/01/232026012025351.png" alt="缺陷照片" title="懸停文字" width="300" height="300" >
</a><p></p>
<a href="https://www.cnblogs.com/pythonzhilian/p/1.我的第一個網頁.html">
<img src="https://img.uj5u.com/2021/04/01/232026012025351.png" alt="缺陷照片" title="懸停文字" width="300" height="300" >
</a><p></p>
<a href="https://www.cnblogs.com/pythonzhilian/p/1.我的第一個網頁.html">
<img src="https://img.uj5u.com/2021/04/01/232026012025351.png" alt="缺陷照片" title="懸停文字" width="300" height="300" >
</a>
<!--錨鏈接
1、需要一個錨標記
2、跳轉到標記
#-->
<a href="https://www.cnblogs.com/pythonzhilian/p/#top">回到頂部</a>
<a name="down">回到底部</a>
<!--功能性鏈接
郵件鏈接：mailto：-->
<a href="https://www.cnblogs.com/pythonzhilian/p/mailto：[email protected]">點擊聯系我</a>
<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>
</body>
</html>
五、 串列
串列分為有有序串列和無序串列，有序串列應用：試卷，問卷等，無序串列：導航、側邊欄等，
<head>
<meta charset="UTF-8">
<title>串列</title>
</head>
<body>
<!--ol表示有序串列
應用：試卷，問答-->
<ol>
<li>Java</li>
<li>python</li>
<li>資料庫</li>
<li>網路</li>
</ol>
<!--ul表示無序串列
應用：導航，側邊欄-->
<ul>
<li>Java</li>
<li>python</li>
<li>資料庫</li>
<li>網路</li>
</ul>
<!--dl標簽
dt：串列名稱
dd：串列內容
應用：公司網站底部-->
<dl>
<dt>學科</dt>
<dd>python</dd>
<dd>Java</dd>
<dd>c</dd>
<dt>體育</dt>
<dd>籃球</dd>
<dd>足球</dd>
<dd>羽毛球</dd>
</dl>
</body>
</html>
代碼實作：
六、表格
表格就是日常生活中我們常見的一些表格，在excel中完成，這里用代碼實作一下，
表格：table，也可以進行跨行，跨列操作，相當于excel中的合并單元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格</title>
</head>
<body>
<!--表格table
行 tr
列 td-->
<table border="1px">
<tr>
<!--colspan 跨列 -->
<td colspan="4">1-1</td>
</tr>
<tr>
<!--rowspan跨行 -->
<td rowspan="4">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>
<table></table>
</html>
1
七、 媒體元素
就是可以播放視頻或者音頻，仔細想想其實就是寫好路徑就可,autoplay可以設定自動播放，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體元素</title>
</head>
<body>
<!--
src：資源路徑
controls 標簽控制開關
autoplay:自動播放
-->
<video src="https://www.cnblogs.com/pythonzhilian/resources/video/抖音.mp4" controls autoplay></video>
<audio src="https://www.cnblogs.com/pythonzhilian/resources/audio/Kim.T - 我是一只魚.mp3"controls autoplay></audio>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
八、 行內框架
行內框架就是在這個網頁可以嵌套其他網頁，這里選用百度舉個例子
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>行內框架</title>
</head>
<body>
<!--iframe 行內框架
src：地址
w h 寬度 高度-->
<iframe src="https://www.baidu.com" frameborder="0" width="1000px" height="800px"></iframe>
</body>
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
九、表單
這是網頁最常用的，我們通常登錄某網站就是用這個，寫一個注冊頁面，
重點：method：post，get提交方式
get方式提交：我們可以在url中看到我們提交的資訊，不安全，高效
post：比較安全，傳輸大檔案
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表單</title>
</head>
<body>
<h1>注冊</h1>
<!--表單form
action：表單提交的位置，可以是網站，也可以是一個請求處理地址
method：post，get提交方式
get方式提交：我們可以在url中看到我們提交的資訊，不安全，高效
post：比較安全，傳輸大檔案-->
<form action="1.我的第一個網頁.html" method="post">
<!-- 文本輸入框：input type="text"
value 默認初始值
maxlength最長能寫幾個字符
size 文本框的長度-->
<p>名字：<input type="text" name="username"></p>
<!--密碼框：input type="password" -->
<p>密碼：<input type="password" name="pwd"></p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
那如果用post方式提交，其實也是可以捕獲到輸入的資訊的，在頁面審查元素捕獲一下，就能看到輸入的資訊，如下圖，其實如果再用了加密的方式就看不到了，
本文首發于前端黑洞網，博客園同步跟新
代碼實作：
十、單選框多選框
單選框用radio，多選框用checkbox，如果默認選中，就加checked
<!--單選框標簽
input type=“radio”
value：單選框的值
name：表示組-->
<p>性別：
<input type="radio"value="https://www.cnblogs.com/pythonzhilian/p/boy" name="sex"/>男
<input type="radio"value="https://www.cnblogs.com/pythonzhilian/p/girl" name="sex"/>女
</p>
<!-- checkbox多選框
checked 默認選中-->
<p>愛好：
<input type="checkbox"value="https://www.cnblogs.com/pythonzhilian/p/游泳"name="1">游泳
<input type="checkbox"value="https://www.cnblogs.com/pythonzhilian/p/學習"name="hobby"checked>學習
<input type="checkbox"value="https://www.cnblogs.com/pythonzhilian/p/游戲"name="hobby">游戲
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
十一、 下拉串列框
<!-- option 下拉框 串列框
selected默認選中-->
<p>國家：
<select name="串列名稱" >
<option value="https://www.cnblogs.com/pythonzhilian/p/中國">中國</option>
<option value="https://www.cnblogs.com/pythonzhilian/p/法國" selected>法國</option>
<option value="https://www.cnblogs.com/pythonzhilian/p/美國">美國</option>
</select>
</p>
1
2
3
4
5
6
7
8
9
十二、文本域檔案域
文本域常用于我們輸入資訊時的備注，詳細等，檔案域可以用來上傳檔案
<!--textarea文本域 行 列 -->
<p>反饋：
<textarea name="textarea" id="" cols="30" rows="10">文本內容</textarea>
</p>
<!--file 檔案域 -->
<p>
<input type="file"name="files">
<input type="button"value="https://www.cnblogs.com/pythonzhilian/p/上傳"name="upload">
</p>
1
2
3
4
5
6
7
8
9
10
代碼實作;
十三、表單驗證
郵箱驗證，地址驗證，數字等，滑塊驗證主要用來調節聲音，還有我想到的是一些問卷里面滑動選擇滿意度等，到這里功能越來越詳細，如果哪個沒有按照規則，則提交不了，
submit：提交
reset：重置
<!--郵箱驗證 -->
<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="1">
</p>
<!--滑塊 input type=”range“-->
<p>音量：
<input type="range"name="voice"max="100"min="0"step="1">
</p>
<p>搜索：
<input type="search"name="search">
</p>
<p>
<input type="submit">
<input type="reset">
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
代碼實作：
還有一些功能 隱藏hidden，禁用disable，只讀 readonly
表單的初級驗證
placeholder 提示資訊 （在文本框中輸入的提示資訊，方便用戶可以知道這里填寫什么）
required 非空判斷 （是否為空）
pattern 正則運算式
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/270875.html
標籤：JavaScript