JavaWeb-html的基礎

来源:https://www.cnblogs.com/wht-de-bk/archive/2022/03/24/16051062.html
-Advertisement-
Play Games

html的基礎 html(超文本標記語言)，運行在瀏覽器端的靜態解釋型語言， JavaWeb基本概述 html的基本標簽 html html是解釋語言，瀏覽器容錯的，可以有錯誤，編譯器會自己解釋 網頁上看到的內容都是寫在裡面的 基本標簽 <!-- 1. html頁面中由一對標簽組成：<html></ ...


html的基礎

html(超文本標記語言)，運行在瀏覽器端的靜態解釋型語言，

JavaWeb基本概述

html的基本標簽

html

html是解釋語言，瀏覽器容錯的，可以有錯誤，編譯器會自己解釋

網頁上看到的內容都是寫在裡面的

基本標簽

<!--
1. html頁面中由一對標簽組成：<html></html>
   <html>:開始標簽
   </html>:結束標簽

2.<title>網頁的標題頁</title>

3.可以在<meta charset="字元集">設置編碼方式（寫在<head>...</head>之間）

4.<br/>:換行（開始標簽和結束標簽是同一個標簽時/寫在後面，表示單標簽）

5.<p>...</p>：表示段落標簽（自動換行，且間距變大）

6.<img src="...">：插入圖片（路徑是於當前html同文件的存放圖片文件名\圖片名字）
                   該圖片大小 在後面加 width="..."height="..."(寬、高)
                   alt:圖片的提示

7.路徑問題：相對路徑（如上）；絕對路徑：就是它的路徑

8.<h1>...</h1>:最多六個標題

9.列表
  -ol:有序列表
     type:顯示類型：A,a,1,I,i（預設1）
     start:從多少開始
  -ul:無序列表
     type：dis,circle,square

10.字體設置：<u></u>:下劃線
           <b></b>：加粗
           <i></i>?：斜體

11.下標：sub  上標：sup

12.<span>...</span>：可以對其中的字進行特殊的修飾

13.超鏈接:<a></a>
         href:鏈接的路徑
         target：_self本視窗 _blank在一個新視窗打開 _parent在父視窗打開 _top在頂層視窗打開

14.<div>...</div>:層(先瞭解)
-->

html實體

代碼實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"><!--字元集的設置-->
    <title>這是我的第一個網頁</title>
</head>
    
<body>
 hello world!<br/>你好，世界
<p>這裡是一個段落</p>
<p>這裡是第二個個段落</p>

<img src="photo\太原市徽.jpg" width="80"height="73" alt="這是一張圖片"/>

 <h1>標題一</h1>

 武林高手排行榜
<ol type = "I" start="3">
    <li>掃地僧</li>
    <li>蕭遠山</li>
    <li>慕容復</li>
    <li>虛竹</li>
    <li>阿紫</li>
</ol>
武林大會人員名單
<ul type="square">
   <li>喬峰</li>
   <li>阿朱</li>
   <li>馬夫人</li>
   <li>白世鏡</li>
</ul>

<u>你</u>喜歡吃<b>包子</b>還是<i>餃子</i>?<br>
氧氣化學是H<sub>2</sub>O<br>
X的平方是X<sup>2</sup><br>

<span>特殊修飾...</span>

<a href="http://www.baidu.com" target="_blank">百度一下</a>
</body>
</html>

代碼效果

html的table（表格）標簽

基本標簽

<!--
17.表格：table
      一個表格  <table></table>
         行          tr
         列          td(th:表頭)

     一些屬性（已經淘汰）
          border：表格邊框的設置
          width：表格寬度
          cellspacing:單元格間距
          cellpadding：單元格填充
     tr中的屬性 ：align => left/right/center(左對齊，右對齊，居中)
     rowspan:行合併
     colspan:列合併
-->

代碼實例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>表格標簽的學習</title>
</head>
    
<body>
    <table border="1" width="600" cellspacing="0" cellpadding="4">    表格的設置
        <tr align="center">
            <th>姓名</th>
            <th>門派</th>
            <th>成名絕技</th>
            <th>功力值</th>
        </tr>
        <tr align="center">
            <td>喬峰</td>
            <td>丐幫</td>
            <td>少林長拳</td>
            <td>5000</td>
        </tr>
        <tr align="center">
            <td>虛竹</td>
            <td>靈鷲宮</td>
            <td>北冥神功</td>
            <td>10000</td>
        </tr>
        <tr align="center">
            <td>掃地僧</td>
            <td>少林</td>
            <td>七十二項絕技</td>
            <td>未知</td>
        </tr>
    </table>
                                                                            第二個表格
<hr>
    <table border="1" width="600" cellspacing="0" cellpadding="4">
        <tr align="center">
            <th>名稱</th>
            <th>單價</th>
            <th>數量</th>
            <th>小計</th>
            <th>操作</th>
        </tr>
        <tr align="center">
            <td>蘋果</td>
            <td rowspan="2">5</td>         合併列
            <td>20</td>
            <td>100</td>
            <td><img src="photo/R-C.jpg" width="24" height="24"></td>         添加圖片
        </tr>
        <tr align="center">
            <td>菠蘿</td>

            <td>15</td>
            <td>60</td>
            <td><img src="photo/R-C.jpg" width="24" height="24"></td>
        </tr>
        <tr align="center">
            <td>西瓜</td>
            <td>3</td>
            <td>30</td>
            <td>120</td>
            <td><img src="photo/R-C.jpg" width="24" height="24"></td>
        </tr>
        <tr align="center">
            <td>總計</td>
            <td colspan="4">280</td>         合併行
        </tr>
    </table>

</body>
</html>

代碼效果

html的表單標簽

表單：是一個容器，承載要發送給伺服器的數據

文本框輸入的內容就是value的值

基本標簽

<!--
18.表單        form
19.<input type="text"/>:表示文本框，其中name屬性是必須要寫的，否則這個文本框的數據是不會發送給伺服器的

   <input type="password">:表示密碼框

   <input type="radio">：表示單選按鈕，name屬性值保持一直（保證互斥），checked預設選項

   <input type="checkbox">：表示覆選框，name屬性建議保持一致（伺服器獲取的是一個數組）

   select：表示下拉列表，每一個選項是option，value是屬性發送給伺服器的值，selected是預設選項

   textarea：表示多行文本框，value值就是開始結束標簽之間的內容

   <input type="submit" value="..."/>:表示提交按鈕

   <input type="reset" value="..."/>:表示重置按鈕

   <input type="button" value="..."/>:表示普通按鈕
-->

代碼實例

<!--Demo03的代碼-->
<!DOCTYPE html>
<html lang="en">
<!--表單-->
<head>
    <meta charset="UTF-8">
    <title>表單標簽的學習</title>
</head>
<body>
   <form action="Demo04.html" method="post">
       昵稱：<input type="text" name="nickName"/><br>
       密碼：<input type="password" name="Pwd"/><br>
       性別：<input type="radio" name="gender" value="male"/>男
            <input type="radio" name="gender" value="female" checked/>女<br>
       愛好：<input type="checkbox" name="hobby" value="basketball"/>籃球
            <input type="checkbox" name="hobby" value="football"/>足球
            <input type="checkbox" name="hobby" value="earth"/>地球<br>
       星座：<select name="star">
               <option value="白羊">白羊座</option>
               <option value="金牛" selected>金牛座</option>
               <option value="雙子">雙子座</option>
               <option value="天蝎">天蝎座</option>
               <option value="天秤">天秤座</option>
               <option value="射手">射手座</option>
               <option value="雙魚">雙魚座</option>
               <option value="摩羯">摩羯座</option>
               <option value="巨蟹">巨蟹座</option>
               <option value="水瓶">水瓶座</option>
               <option value="獅子">獅子座</option>
               <option value="處女">處女座</option>
            </select><br>
       備註：<textarea name="remark" rows="4" cols="40"></textarea><br>
       <input type="submit" value="註 冊"/>
       <input type="reset" value="重 置"/>
       <input type="button" value="普通按鈕"/>

   </form>

</body>
</html>

<!--Demo04的代碼-->
<!DOCTYPE html>
<html lang="en">
<head>
   
    <meta charset="UTF-8">
    <title>表單標簽的學習</title>
</head>
    
<body>
   <h1><font color="red">註冊成功</font></h1>

</body>
    
</html>

代碼效果

html-frameset-iframe標簽（已淘汰）

frameset標簽

frameset：無body標簽

<!--
20.frameset:表示頁面框架，已經淘汰，只瞭解，不用掌握
   frame：表示框架中具體頁面的應用
-->

代碼實例

<!DOCTYPE html>
<html lang="en">
<!--frameset-->
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
    
<frameset rows="20%,*" frameborder="no">  frameborder="no"：去邊框
    <frame src="frames/top.html"/>
    <frameset cols="15%,*",>
        <frame src="frames/left.html"/>
        <frameset rows="80%",*>
             <frame src="frames/main.html "/>
        </frameset>
    </frameset>
</frameset>
    
</html>

代碼效果

iframe標簽

<!--
21.iframe：在一個頁面嵌入子頁面
-->

代碼實例：

<!DOCTYPE html>
<html lang="en">
<!--iframe-->
<head>
    <meta charset="UTF-8">
    <title>iframe的測試</title>
</head>
    
<body>
   這是Demo06頁面的內容
   <iframe src="frames/top.html"/>
</body>
    
</html>

代碼效果：

小總結：

<!--

總結：
1.html是解釋型的標記語言：不區分大小寫
2.html，head，tilt，mete，body，br，p，hr，div，table，form，u，i，b，sup，sub，&nbsp;，span，ul，ol，   li，tr，th，td，h1-h6，input，select，textarea，img

2-1.html，head，tilt，mete，body，br，ul，ol，h1-h6，a，img，p，&nbsp;，div，span
2-2.table，tr，th，td
2-3.form(action="",method="post")，input type=”text,password,radio,checked,submit,button,reset“，select，textarea
...

-->

您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • Linux網路服務之部署YUM倉庫
    鏡像下載、功能變數名稱解析、時間同步請點擊 阿裡雲開源鏡像站 1 YUM簡介 1.1 YUM簡介 CentOS使用yum和dnf 解決rpm的包依賴關係。 YUM：rpm的前端程式，可解決軟體包相關依賴性，可在多個庫之間定位軟體包，up2date的替代工具，CentOS 8 使用dnf代替了yum，不過保留 ...
  • Centos7 找回root密碼
    在開機界面，按“e”進入編輯界面 按“e”進圖下圖界面後，找到開頭為“linux16”行，在行後面加入 “init=/bin/sh” 輸入後，按快捷鍵Ctrl+x 進入單用戶模式 然後再行最後輸入mount -o remount,rw / 註意各個空格有空格 回車 在新的一行後面輸入 passwd， ...
  • Linux02：Vim使用及賬號、磁碟、進程管理(狂神說）
    一、Vim編譯器 1.什麼是vim編譯器 Vim相當於vi的升級版 Vim是從 vi 發展出來的一個文本編輯器。代碼補完、編譯及錯誤跳轉等方便編程的功能特別豐富，在程式員中被廣泛使用。 簡單的來說， vi 是老式的字處理器，不過功能已經很齊全了，但是還是有可以進步的地方。 vim 則可以說是程式開發 ...
  • Redis最新超詳細版教程通俗易懂
    Redis最新超詳細版教程通俗易懂 一、Nosql概述 為什麼使用Nosql 1、單機Mysql時代 90年代,一個網站的訪問量一般不會太大，單個資料庫完全夠用。隨著用戶增多，網站出現以下問題 數據量增加到一定程度，單機資料庫就放不下了 數據的索引（B+ Tree）,一個機器記憶體也存放不下 訪問量變 ...
  • 金融App面臨安全風險？解鎖HMS Core安全檢測服務解決方案
    數字經濟時代，金融類App成為人們理財、購買證券股票以及辦理各項銀行業務的重要載體。科技驅動著金融行業的轉型升級，但在創新發展的同時，金融App面臨的安全風險類型與場景也在持續增加。如何更好地規避安全風險呢？小編給金融App的開發者們支幾招，幫您構建高效敏捷的應用安全能力。 金融App常見的安全風險 ...
  • 【HarmonyOS】【ARKUI】ets怎麼實現文件操作
    ets 怎麼實現文件操作？ 關於文件操作的我們可以學習HarmonyOS文件管理和Ability上下文 這兩篇文檔，我這邊實現”文件路徑讀取”、“文件寫入”“文件讀取”，“運行效果”四個方面實現，具體操作如下 1. 文件路徑讀取 參考context.getFilesDir來進行獲取文件路徑，代碼如下 ...
  • 精靈圖和字體圖標的概念
    一、精靈圖 概念：將網頁的所需要一些小背景圖像整合到一張大的圖片中，在css中利用"background-image"、"background-repeat"、"background-position"、"background-size"的組合找到需精靈圖。 “background-position ...
  • WebGL 的 Hello World
    本文整理自 div 俠於 凹凸 2022 年技術分享，簡單介紹了 WebGL 畫一個基礎圖形的流程，希望你瞭解之後，在使用 3d 渲染庫的時候可以少點迷糊。 四種常用的頁面繪圖工具 關於h5頁面的圖形繪製，我們大多談及的是這四種工具：html+css，svg、canvas2d、webgl。 html ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類