Java web前端（HTML)

學習HtML之前我們先了解一下什麼是前端？
1.前端的開發流程

2.B/S軟件的結構
JavaEE項目
客戶端：瀏覽器
服務端：WEB服務器

3.什麼是W3C標準？

結構化標準（XHTML、HTML）
表現標準（CSS）
行爲標準（Dom、ECMAScript標準==> JavaScript）

注意：很多瀏覽器還停留在ES5規範上，但是開發人都使用的是ES6規範

1.什麼是HTML(超文本標記語言）

html全稱：Hyper Text Markup Language(超文本標記語言)

超級文本標記語言是標準通用標記語言（SGML）下的一個應用，也是一種規   範，一種標準，它通過標記符號來標記要顯示的網頁中的各個部分。
網頁文件本身是一種文本文件，通過在文本文件中添加標記符。
可以告訴瀏覽器如何顯示其中的內容（如：文字如何處理，畫面如何安排，圖片如何顯示等）。 
瀏覽器按順序閱讀網頁文件，然後根據標記符解釋和顯示其標記的內容，對書寫出錯的標記將不指出其錯誤，且不停止其解釋執行過程，編制者只能通過顯示效果來分析出錯原因和出錯部位。但需要注意的是，對於不同的瀏覽器，對同一標記符可能會有不完全相同的解釋，因而可能會有不同的顯示效果。

2.HTML的結構分析

<!DOCTYPE html>
<html lang="en"><!--整個html的開始>
     <!--頭部-->
    <head>
        <meta charset="UTF-8"> <!--meta是元信息，charset表示的是當前的頁面類型>
        <!--網站關鍵字描述-->
        <meta name="keywords" content="愛學習">
        <!--網站的描述-->
        <meta name="description" content="學Java">
        <title>愛學習愛JAVA</title>   <!--title標題的標記>
    </head>
     <!--主體  Ctrl+/ -->
    <body>
        <!--GUI-->
        <h1>hello，world</h1>
        <!--音頻、視頻、....新的標籤：側邊欄、頂部導航欄！-->
    </body>
</html>

注意：Java文件是需要先編譯，再由java虛擬機跑起來。但Html 文件它不需要編譯，直接由瀏覽器進行解析執行。

3.HTML的基本標籤

單標籤：<標籤名>封裝的數據</標籤名>
雙標籤：<標籤名> …封裝的數據…</標籤名>

注意：雙標籤必須關閉。
(1)標題標籤：

<!--標題標籤  h1 + tab鍵 -->
<h1>一級標題</h1>
<h2>一級標題</h2>
<h3>一級標題</h3>
<h4>一級標題</h4>
<h5>一級標題</h5>
<h6>一級標題</h6>

(2)段落標籤

<p>愛學習，學習使你快樂</p>

(3)換行標籤

<br/>

(4)水平線標籤

<hr/>

(5)字體樣式標籤

<strong>馬雲 （阿里巴巴集團創始人）</strong><!--粗體樣式-->
<p>
    <em>馬雲，男，漢族</em> <br>   <!--斜體樣式-->
    <em>現擔任日本軟銀董事</em>  <br>
    <em>1988年畢業於杭州師範學院外語系</em>  <br>
    <em>....</em>  <br>
</p>

(6)特殊符號標籤

<!--空格 &-->
<p>愛學習 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;愛Java</p>
<!--大於小於號-->
&gt;
&lt;
<!--版權符號-->
&copy; 版權所有：恆哥
<!--萬能的公式  &  ;-->
&phone;

(7)圖像標籤

<!--
src： 資源圖片 ： 圖片的路徑
alt： 圖片加載失敗，表示圖片的問題，也即圖片描述
title： 鼠標放在圖片上的懸浮提示
width： 寬
height：高
-->
<img src="../statics/images/tx.jpg" alt="頭像圖片" title="愛Java" width="1000" height="1000">

注意：圖片格式png 會有瀏覽器兼容問題，一般使用 .jpg .gif多一點。

4.超鏈接

跳轉網站鏈接：表示從一個地方跳轉到另外一個地方

<a href="https://www.baidu.com/" target="_self">百度</a>
href：要跳轉地址
target： 目標打開的窗口，在自己這個當前頁面打開，還是在新的頁面打開
    _self : 在自己的窗口打開
    _blank： 在新窗口中打開

圖片類型超鏈接：

<a href="https://www.baidu.com/" target="_self">
    <img src="../statics/images/bd.png">
</a>

點擊發送郵件鏈接：

<a href="mailto:[email protected]">聯繫我們</a>

錨鏈接用於頁面間指定位置跳轉：快速定位目錄

(1)可以用於同一頁面
錨點:標記跳轉的位置

<!--標記A-->
<a name="markerA">A</a>

跳轉到錨點

<a href="#markerA">A</a> <br>

(2)可以用於不同的頁面

<a href="https://www.cnblogs.com/TankXiao/p/9154085.html#dutte">D</a>

5.塊元素、行內元素

塊元素：無論內容多少，都是獨佔一行的。

<!--塊元素-->
<p>我是P標籤</p>
<h1>我是H1標籤</h1>

行內元素：只根據內容的長度來擴展。

<!--行內元素-->
<a href="">我是a鏈接</a>
<strong>粗體</strong>
<em>斜體</em>

6.列表

(1)無序列表
用於：導航，側邊欄新聞，在文章中，一般會使用它來排列。

<ul>
    <li>語文</li>
    <li>數學</li>
    <li>英語</li>
    <li>Java</li>
</ul>

(2)有序列表
用於：問答試卷、測試題…卷子，或者需要排序的，微博熱搜，榜單。

<ol>
    <li>====</li>
    <li>====</li>
    <li>====</li>
    <li>====</li>
</ol>

(3)自定義列表
用於：網站的底部，用於標記項

<dl>
    <dt>水果</dt>
    <dd>蘋果</dd>
    <dd>香蕉</dd>
    <dd>葡萄</dd>
</dl>

7.表格

(1)普通表格

<!--表格標籤table
border="1px" 邊框屬性
-->
<table border="1px">
    <!--行和列-->
    <!--第一行 tr,列 td-->
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>
</table>

(2)跨列表格

<table border="1px">
    <tr>
        <!--實現跨列colspan 對應的值:就是要跨幾列-->
        <td colspan="2">學生成績</td>    
    </tr>
    <tr>
        <td>語文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>數學</td>
        <td>100</td>
    </tr>
</table>

(3)跨行表格

<table border="1px">
    <tr>
        <!--rowspan 所跨的行數-->
        <td rowspan="2">張三</td>
        <td>語文</td>
        <td>100</td>
    </tr>
    <tr>
        <td>數學</td>
        <td>100</td>
    </tr>
</table>

8.音頻和視頻

(1)音頻audio

<audio src="../statics/audio/ab410f7bbbb0955e7ae476ae89527a5d.m4a" autoplay controls>
</audio>

(2)視頻video

<video src="../statics/video/china.mp4" controls autoplay></video>

src：視頻的路徑
controls: 提供播放按鈕，進度條、下載按鈕、全屏按鈕、音量控制
autoplay：自動播放
loop: 循環播放

9.表單

(1)表單結構：

action:提交的地址
method:提交的方式：

post：參數不可見、安全，大小沒有限制（表單提交常用方式post）
get：攜帶參數，參數可以在url中看到，不安全，大小有限

<form action="test.html" method="post">
表單的元素
</form>

(2)表單元素

文本框

<p>
<!--文本框 type="text"
value ：文本框默認的初始值
size： 文本框的長度
maxlength： 文本框的最大輸入長度
-->
    <input type="text" name="username" value="用戶名" size="30" maxlength="20">
</p>

密碼框

<input type="password" name="pwd" size="20">
</p>

單選按鈕

value：表單提交的值
name：名字相同，則自動分組，必須要分組
checked：默認選中
disabled：禁用

<p>
    <input type="radio" value="男" name="sex" checked>男
    <input type="radio" value="女" name="sex" disabled>女
</p>

注意事項：默認沒有值，需要再input type=“radio” 後增加單選框的屬性

多選按鈕

<p>
    <input type="checkbox" name="hobby" value="code">敲代碼
    <input type="checkbox" name="hobby" value="music" checked>聽音樂
    <input type="checkbox" name="hobby" value="girl" disabled>女孩
</p>

注意事項：默認沒有值，需要再input type=“checkbox” 後增加多選框的屬性
下拉列表框 select-option

select
name：組件名字必填
size: 顯示的數量，默認爲1

option：選項
value 必填
option標籤中間寫下拉框的值
selected：默認選中

<select name="科目">
   <option value="1"></option>
   <option value="2">數學</option>
   <option value="3" selected>英語</option>
   <option value="4">英語</option>
   <option value="5">英語</option>
</select>

按鈕

<p>
    <!--提交-->
    <input type="submit" value="登錄">
    <!--重置--使用-->
    <input type="reset" value="清空">
    <!--普通按鈕：一般後來我們會和javascript結合使用，點擊按鈕xxx-->
    <input type="button" value="點我">
    <!--圖片按鈕
        type="image"
    -->
    <input type="image" src="../statics/images/bd.png">
</p>

文本域

<textarea name="textarea" cols="10" rows="10">
</textarea>

文件域

<form action="test.html" method="get" enctype="multipart/form-data">
    <input type="file" name="video">
</form>

郵箱驗證

郵箱：<input type="email" name="email">

網址驗證

 url：<input type="url" name="url">

滑塊（可調節）默認0到100

<input type="range" name="range" min="0" max="1000" step="2">

數字

數字：<input type="number" min="0" max="100" step="10">

搜索框（帶關閉按鈕）

<input type="search" name="search">

(3)表單的應用

隱藏域

<input type="hidden" name="count" value="10">

只讀和禁用

<input type="text" name="username" readonly>
<input type="password" name="pwd" disabled>

標註

<p>
    <!--通過 for="name" 來鏈接到 表單中的指定ID -->
    <label for="name">用戶名： </label>
    <input type="text" name="username"  id="name">
</p>

內聯框架

<iframe name="mainFrame"></iframe>
<a href="https://www.baidu.com/" target="mainFrame">點擊顯示</a>

初級表單驗證
默認提示

<!--placeholder="必須是url格式" 默認提示，告訴用戶應該這麼做-->
用戶名：
<input type="url" name="username" placeholder="必須是url格式">

必填

     <!--required必須要填寫這個字段-->
    密碼： <input type="password" name="pwd" required>

正則表達式

手機號碼： <input type="password" name="tel" required pattern="^1[358]\d{9}">

10.網頁結構規範

頁面的頭部
頁面的主體
頁面的尾部

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<!--這些標籤都是一些行業規範-->
<header>
    我是頭部
</header>

<nav>導航欄</nav>

<aside>側邊欄</aside>

<article>文章主題</article>

<section> 獨立區域 </section>

<footer>
    我是尾部
</footer>

</body>
</html>

Java web前端（HTML)

1.什麼是HTML(超文本標記語言）

2.HTML的結構分析

3.HTML的基本標籤

4.超鏈接

錨鏈接用於頁面間指定位置跳轉：快速定位目錄

5.塊元素、行內元素

6.列表

7.表格

8.音頻和視頻

9.表單

(1)表單結構：

(2)表單元素

(3)表單的應用

10.網頁結構規範

SQL優化-20231016

Java語言基礎（2）

Java選擇結構-if語句，switch語句詳解

Java語言基礎(數組冒泡排序，選擇排序等，二分法）

JavaWeb詳解之JSP

JavaWeb詳解之（MVC三層架構，過濾器filter，session監聽器）

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結

Java web前端（HTML)

1.什麼是HTML(超文本標記語言）

2.HTML的結構分析

3.HTML的基本標籤

4.超鏈接

錨鏈接用於頁面間指定位置跳轉 ： 快速定位目錄

5.塊元素、行內元素

6.列表

7.表格

8.音頻和視頻

9.表單

(1)表單結構：

(2)表單元素

(3)表單的應用

10.網頁結構規範

錨鏈接用於頁面間指定位置跳轉：快速定位目錄