超詳細html5登陸註冊頁面總結

時間  2021-03-31
標籤 html 前端 python web 正則表達式 數據庫 瀏覽器 安全 網絡 框架 欄目 HTML5 简体版
原文   原文鏈接

1、HTML5簡介
HTML是互聯網上應用最普遍的標記語言。HTML文件就是普通文本+HTML標記，而不一樣的HTML標記能表示不一樣的效果。html

HTML5優點
HTML5並非一種革新的的升級，而是一種向規範向習慣的妥協，所以HTML5並不會帶給開發者過多的衝擊，從HTML4到HTML5過渡會很是輕鬆。前端

HTML5解決了如下四點問題 ：python

解決跨瀏覽器問題
部標籤代替了原來的JavaScript
更明確的語義支持
加強了web應用程序和功能
2、個人第一個網頁
下面在ideal中先寫一個第一個網頁，測試一下環境是否搭建好。web

<!--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>

3、圖像標籤
image圖像 src：圖片地址，能夠選用相對路徑，也能夠選用絕對路徑，通常使用相對路徑，便於進行修改，或者發送給他人，每一個人的存儲路徑不一樣，絕對路徑就要進行修改，大大不便。 src和talt是必填項 。正則表達式

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>圖像標籤</title>
</head>
<body>數據庫

<!--放入圖像
src圖片地址 相對路徑 alt 報錯誤時提示信息
title 鼠標懸停時的文字-->
<img src="../resources/image/缺陷.png" alt="缺陷照片" title="懸停文字" width="300" height="300">
<a href="三、連接標籤.html#down">跳轉到底部</a>
</body>
</html>

4、連接標籤
在平常咱們常常能夠看到點擊這個連接，跳轉到另外一個界面，其實就是使用了連接標籤這個方法，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="1.個人第一個網頁.html" target="_blank">點我跳轉到頁面</a>
<br>
<a href="https://www.baidu.com" target="_self">點我跳轉到百度</a>
<br>
<a href="1.個人第一個網頁.html">
<img src="../resources/image/缺陷.png" alt="缺陷照片" title="懸停文字" width="300" height="300" >
</a>
<p></p>
<a href="1.個人第一個網頁.html">
<img src="../resources/image/缺陷.png" alt="缺陷照片" title="懸停文字" width="300" height="300" >
</a>
<p></p>
<a href="1.個人第一個網頁.html">
<img src="../resources/image/缺陷.png" alt="缺陷照片" title="懸停文字" width="300" height="300" >
</a><p></p>
<a href="1.個人第一個網頁.html">
<img src="../resources/image/缺陷.png" alt="缺陷照片" title="懸停文字" width="300" height="300" >
</a><p></p>
<a href="1.個人第一個網頁.html">
<img src="../resources/image/缺陷.png" alt="缺陷照片" title="懸停文字" width="300" height="300" >
</a>
<!--錨連接
一、須要一個錨標記
二、跳轉到標記
#-->
<a href="#top">回到頂部</a>
<a name="down">回到底部</a>
<!--功能性連接
郵件連接：mailto：-->
<a href="mailto：2240061437@qq.com">點擊聯繫我</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>
5、 列表
列表分爲有有序列表和無序列表，有序列表應用：試卷，問卷等。無序列表：導航、側邊欄等。安全

<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>

代碼實現：框架

 

6、表格
表格就是平常生活中咱們常見的一些表格，在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


7、 媒體元素
就是能夠播放視頻或者音頻，仔細想一想其實就是寫好路徑就可,autoplay能夠設置自動播放。

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>媒體元素</title>
</head>
<body>
<!--
src：資源路徑
controls 標籤控制開關
autoplay:自動播放
-->
<video src="../resources/video/抖音.mp4 " controls autoplay></video>
<audio src="../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
8、 內聯框架
內聯框架就是在這個網頁能夠嵌套其餘網頁，這裏選用百度舉個例子

<!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
9、表單
這是網頁最經常使用的，咱們一般登陸某網站就是用這個。寫一個註冊頁面。

重點：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方式提交，其實也是能夠捕獲到輸入的信息的，在頁面審查元素捕獲一下，就能看到輸入的信息，以下圖。其實若是再用了加密的方式就看不到了。

 

本文首發於前端黑洞網，博客園同步跟新

代碼實現：

 

10、單選框多選框
單選框用radio，多選框用checkbox，若是默認選中，就加checked

<!--單選框標籤
input type=「radio」
value：單選框的值
name：表示組-->
<p>性別：
<input type="radio"value="boy" name="sex"/>男
<input type="radio"value="girl" name="sex"/>女
</p>
<!-- checkbox多選框
checked 默認選中-->
<p>愛好：
<input type="checkbox"value="游泳"name="1">游泳
<input type="checkbox"value="學習"name="hobby"checked>學習
<input type="checkbox"value="遊戲"name="hobby">遊戲
</p>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
11、 下拉列表框
<!-- option 下拉框 列表框
selected默認選中-->
<p>國家：
<select name="列表名稱" >
<option value="中國">中國</option>
<option value="法國" selected>法國</option>
<option value="美國">美國</option>
</select>
</p>
1
2
3
4
5
6
7
8
9
12、文本域文件域
文本域經常使用於咱們輸入信息時的備註，詳細等，文件域能夠用來上傳文件

<!--textarea文本域 行 列 -->
<p>反饋：
<textarea name="textarea" id="" cols="30" rows="10">文本內容</textarea>

</p>
<!--file 文件域 -->
<p>
<input type="file"name="files">
<input type="button"value="上傳"name="upload">
</p>
1
2
3
4
5
6
7
8
9
10
代碼實現;

 

十3、表單驗證
郵箱驗證，地址驗證，數字等，滑塊驗證主要用來調節聲音，還有我想到的是一些問卷裏面滑動選擇滿意度等，到這裏功能愈來愈詳細，若是哪一個沒有按照規則，則提交不了。

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 正則表達式

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程