Java學習——HTML詳解（下）

時間  2020-09-14
標籤 java 學習 html 詳解 欄目 Java 简体版
原文   原文鏈接

列表，表格，媒體元素

列表

image-20200825194337001

 
<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>列表學習</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>
     
 <!--自定義列表
     dl:標籤
     dt：列表名稱
     dd：列表選項
     用在網站底部較多
 -->
 <dl>
     <dt>學科</dt>
 ​
     <dd>java</dd>
     <dd>python</dd>
     <dd>運維</dd>
     <dd>前端</dd>
     <dd>c++</dd>
 ​
     <dt>位置</dt>
 ​
     <dd>西安</dd>
     <dd>鄭州</dd>
     <dd>合肥</dd>
     <dd>浙江</dd>
 </dl>
 </body>
 </html>

 

image-20200825213046094

表格標籤

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>表格學習</title>
 </head>
 <body>
 ​
 <!--表格table
 行：tr
 列：td
 border:邊框
 -->
 <table border="1px">
     <tr>
         <!--colspan  跨列，跨列時要將其餘列刪除-->
         <td colspan="3">學上成績</td>
     </tr>
     <tr>
         <!--rowspan  跨行，同上-->
         <td rowspan="2">小明</td>
         <td>語文</td>
         <td>100</td>
     </tr>
     <tr>
         <td>數學</td>
         <td>100</td>
     </tr>
     <tr>
         <td rowspan="2">小紅</td>
         <td>語文</td>
         <td>100</td>
     </tr>
     <tr>
         <td>數學</td>
         <td>100</td>
     </tr>
 </table>
 ​
 </body>
 </html>

 

image-20200825214407435

媒體元素

視頻：videohtml

音頻：audio前端

image-20200825220803597

 

頁面結構分析

image-20200825221206796

 
<header>
     <h2>網頁頭部</h2>
 </header>
 ​
 <section>
     <h2>網頁主體</h2>
 </section>
 ​
 <footer>
     <h2>網頁腳部</h2>
 </footer>

 

image-20200825222333354

iframe內聯框架

<!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>內聯框架學習</title>
 </head>
 <body>
 <!--iframe
 src:引用頁面地址
 name：框架標識名
 ​
 -->
 <iframe src="" name="hello" frameborder="0"
         width="500" height="500">
 </iframe>
 ​
 <a href="1.個人第一個網頁.html" target="hello">點擊跳轉到內框架打開</a>
 ​
 </body>
 </html>

 

image-20200825224305348

表單及表單應用

image-20200825225124531

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <title>登錄註冊</title>
 </head>
 <body>
 ​
 <h1>註冊</h1>
 ​
 <!--表單form
 ​
 action: 表單提交的位置，網站，請求處理地址
 method: post, get 提交方式
         get方式提交能夠在url中看到提交的信息，不安全
         post方式提交能夠在url中看不到提交的信息，安全，可傳輸大文件
 -->
 <form action="1.個人第一個網頁.html" method="get">
 ​
     <!--文本輸入框：input type="text"-->
     <p>帳號：<input type="text" name="username"></p>
     <!--密碼框：input type="password"-->
     <p>密碼：<input type="password" name="pwd"></p>
     <p>
         <input type="submit">
         <input type="reset">
     </p>
 ​
 </form></body>
 </html>

 

image-20200825230845146

表單元素

image-20200826113315767

單選框標籤java

 <!--單選框標籤
 input type="radio"
 value：單選框的值
 name：組，同樣的組才能之選一個
 -->
 <p>性別：
 <input type="radio" value="boy" name="sex">男
 <input type="radio" value="girl" name="sex">女
 </p>

 

image-20200826122241105

多選框標籤&按鈕python

 <!--多選框標籤
    input type="checkbox"
 -->
 <p>愛好：
     <input type="checkbox" value="sleep" name="hobby"/>睡覺
     <input type="checkbox" value="code" name="hobby"/>敲代碼
     <input type="checkbox" value="game" name="hobby"/>玩遊戲
     <input type="checkbox" value="read" name="hobby"/>讀書
 </p>
 ​
 <!--按鈕標籤
 input type="button"  普通按鈕
 input type="image"   圖片按鈕
 input type="submit"  提交按鈕
 input type="reset"   重置按鈕
 -->
 <p>按鈕：
     <input type="button" name="btn1" value="點擊變長">
     <input type="image" src="../resources/image/b.jpg">
 </p>

 

image-20200826180610780

下拉框c++

 <!--下拉框，
 selected 默認值
 列表框-->
 <p>國家：
     <select name="列表名稱">
         <option value="China">中國</option>
         <option value="France" selected>法國</option>
         <option value="USA">美國</option>
         <option value="US">英國</option>
     </select>
 </p>

 

image-20200826202020396

文本域&文件域安全

 <!--文本域
 textarea name="textarea"
 -->
 <p>反饋：
     <textarea name="textarea" cols="30" rows="10">請輸入</textarea>
 </p>
 ​
 <!--文件域
 input type="file"
 -->
 <p>
     <input type="file" name="files">
     <input type="button" value="上傳" name="upload">
 </p>

 

image-20200826183904827

驗證，滑塊和搜索框框架

<!--郵件驗證
 input type="email"
 -->
 <p>郵箱：
     <input type="email" name="emails">
 </p>
 <!--URL驗證
     input type="url"
 -->
 <p>URL：
     <input type="url" name="url">
 </p>
 <!--數字驗證
     input type="number"
  -->
 <p>數字：
     <input type="number" name="num" max="100" min="0" step="1">
 </p>
 ​
 <!--滑塊
 input type="range"
 -->
 <p>音量滑塊：
     <input type="range" name="voice" min="0" max="100">
 </p>
 ​
 <!--搜索框
 input type="search"
 -->
 <p>搜索：
     <input type="search" name="search">
 </p>

 

image-20200826185034753

表單的應用運維

 <p>密碼：<input type="password" name="pwd" hidden value="123456"></p>

 

image-20200826194636735

 <p>帳號：<input type="text" name="username" value="admin" readonly></p>

 

image-20200826194518839

 <input type="radio" value="boy" name="sex" disabled/>男

 

image-20200826194738959

 

表單初級驗證

image-20200826201349368

 
<p>帳號：<input type="text" name="username" placeholder="請輸入用戶名"></p>

 

image-20200826201420238

 <p>密碼：<input type="password" name="pwd" required></p>

 

image-20200826201500630

 
<p>自定義郵箱：
     <input type="text" name="diymail" pattern="/^([a-z0-9_\.-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/">
 </p>

 

image-20200826201544981

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