HTML基礎標籤——一直標題重複率太高，強迫症看着是真難受

原創 雪… 2020-06-21 15:12

title

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSDN闖關</title>
</head>
<body>

</body>
</html>

在這裏插入圖片描述

標題與段落

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>2.標題與段落</title>
</head>
<body>
<h1>一級標題h1</h1>
<h2>二級標題h2</h2>
<h3>三級標題h3</h3>
<h4>四級標題h4</h4>
<h5>五級標題h5</h5>
<h6>六級標題h6</h6>

<p>段落標籤p</p>
</body>
</html>

在這裏插入圖片描述

水平線與換行符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>3.水平線與換行符</title>
</head>
<body>
水平線：hr
<hr/>
換行符：br
<hr/>
csdn1
csdn2
<br/>
csdn3
</body>
</html>

在這裏插入圖片描述

常見的轉義符

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>4.常見的轉義符</title>
</head>
<body>
    空格：&nbsp;
    大於號：&gt;
    小於號：&lt;
</body>
</html>

在這裏插入圖片描述

鏈接

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>5.鏈接</title>
</head>
<body>
<!--
    a標籤
        href:   超鏈接地址
        target="_self"       本窗口訪問（默認）
        target="_blank"      新窗口訪問
-->
<a href="//www.baidu.com">點擊我，本窗口將訪問百度</a>
<a href="//www.baidu.com" target="_blank">點擊我，新窗口將訪問百度</a>
</body>
</html>

在這裏插入圖片描述

圖片標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>6.圖片標籤</title>
</head>
<body>
<!--
    img標籤：
        src     圖片的地址
        alt     如果圖片加載異常，顯示的文字
-->

    <img src="CSDN.jpg" alt="如果圖片加載失敗，顯示的文字">
    <img src="csdn.pngxxxx" alt="如果圖片加載失敗，顯示的文字">
</body>
</html>

在這裏插入圖片描述

表格標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>7.表格標籤</title>
</head>
<body>
<!--
    table標籤：
            border      邊框
            width       寬度
            tr          行
            th          表頭
            td          普通列
-->
    <table border="1px" width="300px">
        <tr>
            <th>表頭th</th>
            <th>表頭th</th>
        </tr>
        <tr>
            <td>普通列td</td>
            <td>普通列td</td>
        </tr>
    </table>
</body>
</html>

在這裏插入圖片描述

列表

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>8.列表</title>
</head>
<body>
<!--
    ul      無序列表
    ol      有序列表
    li      列表項
-->
    <ul>
        <li>無序列表項1</li>
        <li>無序列表項2</li>
    </ul>
    <ol>
        <li>有序列表項1</li>
        <li>有序列表項2</li>
    </ol>
</body>
</html>

在這裏插入圖片描述

常見的無意義標籤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>9.常見的無意義標籤</title>
</head>
<body>
<!--
    div     佔用整行
    span    不佔用整行，長度取決於內部元素的長度
-->
    <div>div標籤</div>
    <div>div標籤</div>
    <span>span標籤</span>
    <span>span標籤</span>
</body>
</html>

在這裏插入圖片描述

表單

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.表單1</title>
</head>
<body>
<!--
    input標籤：
            1.文本框   type="text"
            2.密碼框   type="password"
            3.單選框   type="radio"
            4.複選框   type="checkbox"
            5.文件框   type="file"
            6.按鈕    type="button"
            7.提交    type="submit"
            8.重置    type="reset"
-->
    <form action="#" method="post" enctype="multipart/form-data">
        1.用戶名（文本框text）：
            <input type="text" name="username">
        <hr/>
        2.密碼（密碼框password）：
            <input type="password" name="password">
        <hr/>
        3.性別（單選框radio）：
            男<input type="radio" name="gender" value="0">
            女<input type="radio" name="gender" value="1">
        <hr/>
        4.愛好（複選框checkbox）：
            學web<input type="checkbox" name="hobby" value="web">
            學爬蟲<input type="checkbox" name="hobby" value="spider">
        <hr/>
        5.上傳頭像（文件框file）：
            <input type="file" name="img">
        <hr/>
        6.按鈕（button）：
            <input type="button" value="空按鈕">
        <hr/>
        7.提交（submit）:
            <input type="submit" value="提交按鈕">
        <hr/>
        8.重置（reset）：
            <input type="reset" value="重置按鈕">


    </form>
</body>
</html>

在這裏插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>10.表單2</title>
</head>
<body>
<!--
    下拉框：select和option
    大文本：textarea
            cols    列數
            rows    行數
-->
    <form action="#" method="post" enctype="multipart/form-data">
        <select name="year">
            <option value="2019">顯示在下拉框的信息</option>
            <option value="2018">2018</option>
        </select>
        <textarea name="comment" cols="30" rows="10"></textarea>

    </form>
</body>
</html>

在這裏插入圖片描述

發表評論
所有評論
還沒有人評論，想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章

Haskell 實現京東優惠券爬取的詳細步驟解析

在當今的電商行業中，優惠券活動是吸引用戶的一種重要方式。京東作爲中國領先的電商平臺之一，其優惠券活動頻繁且多樣，爲用戶提供了豐富的購物體驗。然而，想要及時獲取最新的京東優惠券信息並非易事，尤其是在優惠券數量龐大的情況下。爲了解決這一問題，

原創 2024-04-28 23:27:18

Java word通過html設置樣式（Spire Docx）

  Java  word通過html設置樣式（Spire Docx） <dependencies>   <!-- Apache POI dependency for Word --> <dependency>

原創 2024-04-26 23:42:09

使用JavaScript日曆小部件和DHTMLX Gantt的應用場景（一）

DHTMLX Suite UI 組件庫允許您更快地構建跨平臺、跨瀏覽器 Web 和移動應用程序。它包括一組豐富的即用式 HTML5 組件，這些組件可以輕鬆組合到單個應用程序界面中。 DHTMLX Gantt是用於跨瀏覽器和跨平臺應用程序的功

原創 2024-04-26 11:35:57

6個實例帶你解讀TinyVue 組件庫跨框架技術

本文分享自華爲雲社區《6個實例帶你解讀TinyVue 組件庫跨框架技術》，作者： 華爲雲社區精選。 在DTSE Tech Talk 《 手把手教你實現mini版TinyVue組件庫 》的主題直播中，華爲雲前端開發DTSE技術佈道師阿健老師給

原創 2024-04-26 10:33:20

從零開始學架構V2-架構設計流程-2

一、架構設計流程 架構的設計的是爲了降低整體的複雜性，那麼架構設計的第一步就是熟悉業務，識別其中的核心訴求，僅考慮技術的話就是識別複雜度。 1.1 識別複雜度 架構的複雜度主要來源於第一節中介紹的“高性能”“高可用”“可擴展”等幾個方面，實

原創 2024-04-25 23:56:26

使用前端技術創建 QR 碼生成器 API

前言 QR碼（Quick Response Code）是一種二維碼，於1994年開發。它能快速存儲和識別數據，包含黑白方塊圖案，常用於掃描獲取信息。QR碼具有高容錯性和快速讀取的優點，廣泛應用於廣告、支付、物流等領域。通過掃描QR碼，用戶可

原創 2024-04-25 22:23:53

前端面試題 - 元素的innerText outerText innerHTML的區別？

前端面試題 - 元素的innerText outerText innerHTML的區別？ innerText和outerText取值都是對象起始和結束標籤內部的文本內容。但是在設置的時候，outerText會把該標籤也替換掉。 inner

原創 2024-04-25 11:51:02

前端面試題 - 在HTML5中DOCTYPE的作用是什麼？標準與兼容模式（混雜模式）各有什麼區別？

前端面試題 - 在HTML5中DOCTYPE的作用是什麼？標準與兼容模式（混雜模式）各有什麼區別？ DOCTYPE（文檔類型聲明）是一種在HTML文檔中使用的標記，用於告訴瀏覽器使用哪個HTML版本解析文檔。它的作用是確保瀏覽器正確地渲染和

原創 2024-04-25 11:51:01

前端面試題 - script 標籤中 defer 和 async 的區別？

前端面試題 - script 標籤中 defer 和 async 的區別？   <script> ：會阻礙 HTML 解析，只有下載好並執行完腳本纔會繼續解析 HTML。 <script async> ：解析 HTML 過程中進行腳

原創 2024-04-24 23:51:12

DataGear 5.0.0 發佈，數據可視化分析平臺

DataGear 企業版 1.1.0 已發佈，歡迎瞭解試用！ http://datagear.tech/pro/ DataGear 5.0.0 發佈，核心功能重構，新增圖表追加更新模式，具體更新內容如下： 重構：【圖表數據集】概念和設計

原創 2024-04-24 21:42:05

利用HttpClient庫下載螞蜂窩圖片

前言 網絡爬蟲技術作爲互聯網數據獲取的重要工具，在各行各業都有着廣泛的應用。而在本文中，我們將利用Java中的HttpClient庫，通過編寫一個簡單而有效的網絡爬蟲程序，實現下載螞蜂窩網站的圖片的功能。通過這個例子，我們不僅可以學習如

原創 2024-04-23 23:24:51

如何從根本上避免釣魚--安全意識的重要性

一、什麼是網絡釣魚（Phishing） “網絡釣魚 （Phishing）攻擊者利用欺騙性的電子郵件和僞造的 Web 站點來進行網絡詐騙活動，受騙者往往會泄露自己的私人資料，如信用卡號、銀行卡賬戶、身份證號等內容。詐騙者通常會將自己僞裝成網

原創 2024-04-23 23:16:04

RAG 修煉手冊｜如何評估 RAG 應用？

如果你是一名用戶，擁有兩個不同的 RAG 應用，如何評判哪個更好？對於開發者而言，如何定量迭代提升你的 RAG 應用的性能？ 顯然，無論對於用戶還是開發者而言，準確評估 RAG 應用的性能都十分重要。然而，簡單的幾個例子對比並不能全面衡量

原創 2024-04-23 21:20:22

一次Redis訪問超時的“捉蟲”之旅

01    引言 作爲後端開發人員，對Redis肯定不陌生，它是一款基於內存的數據庫，讀寫速度非常快。在愛奇藝海外後端的項目中，我們也廣泛使用Redis，主要用於緩存、消

原創 2024-04-23 13:04:36

【Stringboot+Netty4】Springboot集成Netty4實現聊天室功能

需求：站內聊天的實現。 分析過程：1、websocket實現的功能簡單，缺點在多人的情況下效率會幾何數降低。                   2、Netty4比Netty5更穩定，測試發現Netty5暫時不穩定，內存處理不如Netty4

原創 2024-04-23 11:37:35