HTML詳解

来源:https://www.cnblogs.com/twq46/archive/2022/07/12/16471556.html
-Advertisement-
Play Games

一、初識HTML 初始基本標簽代碼解釋 點擊查看代碼 <!--DOCTYPE:告訴瀏覽器我們要使用什麼規範--> <!DOCTYPE html> <html lang="en"> <!--生成註釋快捷鍵Ctrl + / 或 command + /--> <!--head標簽代表網頁頭部--> <he ...


一、初識HTML


初始基本標簽代碼解釋

點擊查看代碼 
<!--DOCTYPE:告訴瀏覽器我們要使用什麼規範-->
<!DOCTYPE html>
<html lang="en">
<!--生成註釋快捷鍵Ctrl + / 或 command + /-->
<!--head標簽代表網頁頭部-->
<head>
    <!-- meta描述型標簽，它用來描述我們網站的一些信息-->
    <!--meta一般用來做SEO（漢譯為搜索引擎優化。是一種方式：利用搜索引擎的規則提高網站在有關搜索引擎內的自然排名）-->
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<!--body標簽表示網頁主體-->
<body>

</body>
</html>

二、基本標簽學習

1.標題標簽

點擊查看代碼 
<!--標題標簽-->
<h1>Twq一級標簽</h1>
<h2>Twq二級標簽</h2>
<h3>Twq三級標簽</h3>
<h4>Twq四級標簽</h4>
<h5>Twq五級標簽</h5>
<h6>Twq六級標簽</h6>
界面顯示圖

2.段落標簽

點擊查看代碼 
<!--段落標簽；生成快捷，打一個p然後按tab鍵會自動生成-->
<p>他叫我津漢公路可視對講</p>
<p>發斯蒂芬第三十</p>
<p>他啥發送到發送</p>
界面顯示圖

3.換行標簽

點擊查看代碼 
他叫我津漢公路可視對講<br>
發斯蒂芬第三十<br>
他啥發送到發送<br>
由下圖可以看出換行標簽和段落標簽的區別，段落標簽每一段之間會有空隙，但是換行標簽則沒有 瀏覽器頁面顯示圖

4 .水平線標簽

點擊查看代碼 
<!--水平線標簽-->
<hr/>

5 .粗體，加黑，斜體標簽

點擊查看代碼 
<!--粗體，加黑，斜體標簽-->
<strong>Twq Twq</strong>
<b>Twq1 Twq1 Twq 1</b>
<em>Ym Ym Ym</em>
運行結果圖

5 .特殊符號標簽

點擊查看代碼 
<!--特殊符號-->

&nbsp;<!--空格-->
&gt；<!--大於號-->
&lt；<!--小於號-->
&copy;<!--版權-->
運行結果圖


特殊符號記憶方式：先打一個&,然後隨便打一個字元，就可以找自己想要的字元

三、圖像標簽

四、超鏈接標簽

1.錨鏈接

點擊查看代碼 
<body>
<a name="top">頂部 </a>
<!--標題標簽-->
<h1>Twq一級標簽</h1>
<h2>Twq二級標簽</h2>
<h3>Twq三級標簽</h3>
<h4>Twq四級標簽</h4>
<h5>Twq五級標簽</h5>
<h6>Twq六級標簽</h6>

<!--段落標簽；生成快捷，打一個p然後按tab鍵會自動生成-->
<p>他叫我津漢公路可視對講</p>
<p>發斯蒂芬第三十</p>
<p>他啥發送到發送</p>
<!--水平線標簽-->
<hr/>
<!--換行標簽-->
他叫我津漢公路可視對講<br>
發斯蒂芬第三十<br>
他啥發送到發送<br>

<!--粗體，斜體標簽-->
<strong>Twq Twq</strong><br>
<b>Twq1 Twq1 Twq 1</b><br>
<!--<em>Ym Ym Ym</em><br>-->

<!--特殊符號-->

&nbsp;<!--空格--><br>
&gt;<!--大於號--><br>
&lt;<!--小於號--><br>
&copy;<!--版權--><br>
<!--錨標簽-->
<a href="#top">回到頂部</a>
</body>

五、列表標簽

點擊查看代碼 
<!--列表標簽-->
<!--有序標簽-->
<ol>
    <li>java</li>
    <li>python</li>
    <li>C</li>
    <li>C++</li>
</ol>
<hr>
<!--無序標簽-->
<ul>
    <li>java
        <ul>
            <li>Web</li>
            <li>網路</li>
            <li>多線程</li>
        </ul>
    </li>
    <li>python</li>
    <li>C</li>
    <li>C++</li>
</ul>
<hr>
<!--自定義標簽-->
<dl>
    <dt>學科</dt>
    <dd>java</dd>
    <dd>Python</dd>
    <dd>C</dd>
    <dd>C++</dd>
    <dt>關係</dt>
    <dd>家人</dd>
    <dd>親戚</dd>
    <dd>朋友</dd>
</dl>
運行結果圖

六、表格標簽

點擊查看代碼 
<!--表格標簽
tr 行
td 列
-->
<table border="2px">

    <tr >
        <!--colspan跨列合併-->
        <td colspan="3">學生成績</td>
    </tr>
    <tr >
        <!--rowspan跨行合併-->
        <td rowspan="2">Tang</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>
運行結果圖

七、媒體元素

八、頁面結構分析


運行結果圖

九、iframe內聯框架

點擊查看代碼 
<!--
src:地址
w-h:寬度和高度

-->
<iframe src="https://www.csdn.net/"  name = "hello" frameborder="0" width="500px" height="500px"></iframe>
<!--通過name欄位可以使內聯網站轉換到另一個網站-->
<a href="https://www.bilibili.com/" target="hello">點擊跳轉到B站</a>
運行結果圖

十、表單

點擊查看代碼 
<body>
<h1>登錄</h1>
<form action="iframe.html" method="get" target="_blank">
<!--
action:表單提交的位置，可以是網站，也可以是一個請求處理地址
method：post，get提交方式
    get提交：我們可以在瀏覽器url欄目中看到我們提交的信息，不安全，但是高效
    post：比較安全，傳輸大文件
value="請輸入名字" 預設輸出值
maxlength="8" 最長能寫幾個字元
size="30" 文本框的長度

-->
    <p>名字 <input type="text" name="username" placeholder="請輸入用戶名"></p>
    <p>密碼 <input type="password" name="pwd"></p>
    <p>
        <input type="submit">
        <input type="reset">
    </p>
</form>
</body>
運行結果圖

表單元素格式

（1）單選框

點擊查看代碼 
 <p>
<!--    input type="radio" 單選框
        value="boy" 單選框的值
        name="sex"  表示組，name值相同則表示同一個組，同一個組裡的選項只能選擇其中一個
         -->
        <input type="radio" value="boy" name="sex">男
        <input type="radio" value="girl" name="sex">女

    </p>
運行結果圖

（2）多選框和按鈕

點擊查看代碼 
    <!--多選框按鈕：checkbox
        name也表示分組，同樣的name表示在同一個組
         -->
    <p>愛好：
        <input type="checkbox" value="sleep" name="hobby">睡覺
        <!--  checked預設為選中狀態      -->
        <input type="checkbox" value="code" name="hobby" checked>打代碼
        <input type="checkbox" value="eating" name="hobby">吃飯
        <input type="checkbox" value="Game" name="hobby">游戲
    </p>
<!-- 按鈕  
 value:表示按鈕上的文字
 -->
    <p>
        <input type="button" value="點擊變小">
     <!-- 圖片按鈕-->
        <input type="image" src="../resource/Image/1.jpeg" height="50" width="50">
        

    </p>
運行結果圖

（3)下拉框

點擊查看代碼 
<!--下拉框-->
    <p>國家：
        <select name="列表名稱" id="">
            <option value="china">中國</option>
            <option value="japan">日本</option>
            <option value="us">美國</option>
        </select>

    </p>
運行結果圖

（4）文本域與文件域

點擊查看代碼 
<!--文本域-->
    <p>反饋：

        <textarea name="textarea" cols="30" rows="10">文本內容</textarea>
    </p>

    <!--文件域-->
    <p>
        <input type="file" name="files">
    </p>
運行結果圖

（5）郵箱、URL、數字驗證

點擊查看代碼 
<!--郵箱驗證：必須輸入正確的郵箱格式才可以-->
    <p>郵箱：
        <input type="email" name="main">
    </p>
    <!--URL驗證：必須輸入正確的URL格式才可以-->
    <p>URL
        <input type="url" name="url">
    </p>
    <!--數字驗證：必須輸入數值在0-100之間的數值才可以-->
    <p>商品數量：
        <input type="number" name="num" min="0" max="100" step="1">
    </p>

（6）滑塊&搜索框

點擊查看代碼 
 <!--滑塊-->
    <p>音量
        <input type="range" name="voice" min="0" max="100" step="2">
    </p>
    <!--搜索框-->
    <p>搜索
        <input type="search" name="serch">
    </p>
運行結果圖


表單的應用

表單的初級驗證


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

-Advertisement-
Play Games
更多相關文章
  • 不刷新頁面內容，改變瀏覽器訪問地址url
    瀏覽器改變url 1 改變瀏覽器訪問地址的方式 1-1 不刷新頁面內容，改變瀏覽器訪問地址url 1-1-1 query param location.search = '?page=2'; 1-1-2 hash window.location.hash = 'www.zhihu.com' 如果 原 ...
  • JavaScript詳解
    一、快速入門 1.JavaScript的兩種引入方式 方式一：直接在html裡面寫 目的：實現簡單的彈窗 點擊查看代碼 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <!--sc ...
  • XML入門介紹
    XML 簡介 什麼是 xml？ xml 是可擴展的標記性語言。 xml 的作用？ xml 的主要作用有： 1、用來保存數據，而且這些數據具有自我描述性 2、它還可以做為項目或者模塊的配置文件 3、還可以做為網路傳輸數據的格式（現在 JSON 為主）。 xml 語法 文檔聲明。 元素（標簽） xml ...
  • 分享一些關於聯調時處理數據結構的一些方法
    在我們進行前後端聯調時，往往會出現後端給到的數據在前端不能直接做渲染的情況 這個時候就需要處理後端返回的數據，轉換數據結構前端再做渲染操作 當然如果和後端關係好~也可以讓後端改成你想要的樣子 以下簡單介紹遇到過的情況和相應的處理 覺得有用的話也可以自行封裝成工具類 後端返回線性結構數據，需根據rol ...
  • sass 導入@import詳解
    @import ​ Sass 拓展了 @import 的功能，允許其導入 SCSS 或 Sass 文件。被導入的文件將合併編譯到同一個 CSS 文件中，另外，被導入的文件中所包含的變數或者混合指令 (mixin) 都可以在導入的文件中使用。 例如： public.scss $font-base-co ...
  • 利用雜訊構建美妙的 CSS 圖形
    在平時，我非常喜歡利用 CSS 去構建一些有意思的圖形。 我們首先來看一個簡單的例子。首先，假設我們實現一個 10x10 的格子： 此時，我們可以利用一些隨機效果，優化這個圖案。譬如，我們給它隨機添加不同的顏色： 雖然利用了隨機，隨機填充了每一個格子的顏色，看著有那麼點意思，但是這隻是一幅雜亂無章的 ...
  • Vue：簡單封裝axios，適用於大多數比較基礎的請求
    簡單的封裝一下axios請求，包含了請求前的處理，返回結果和請求異常處理 import axios from "axios"; import store from "../store.js"; //封裝axios axios.defaults.headers["Content-Type"] = "a ...
  • js快排（JavaScript快速排序演算法）- 前端面試
    本文簡介 點贊 + 收藏 + 關註 = 學會了 這次會使用css畫出一個格子背景。並且一步步分析如何實現~ 思路 直接給答案：通過2個相等的直角三角形拼接，形成一個正方形。 三角形可以使用 background-image 的漸變來實現。 html, body { margin: 0; width: ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類