HTML基礎標簽圖片文本超鏈接列表表格介紹

来源:https://www.cnblogs.com/dhnblog/archive/2020/02/11/12297501.html
-Advertisement-
Play Games

1.HTML基礎標簽圖片常見代碼形式<img src="圖片路徑地址" alt="屬性名" title="占位符">常見的圖片格式為以下三種：.jpg（圖片有損壓縮，影響畫質）、.png（圖片無損壓縮、容積大、具有透明通道）、.gif（動圖）。圖片路徑地址分為本地圖片和網路圖片，本地圖片中分為絕對路 ...


1.HTML基礎標簽圖片常見代碼形式<img src="圖片路徑地址" alt="屬性名" title="占位符">常見的圖片格式為以下三種：.jpg（圖片有損壓縮，影響畫質）、.png（圖片無損壓縮、容積大、具有透明通道）、.gif（動圖）。圖片路徑地址分為本地圖片和網路圖片，本地圖片中分為絕對路徑（從盤符開始算起）和相對路徑（從當前路徑算起），相對路徑屬於平級關係，如果圖片相對於上一級，表現形式為"../"在<img src="圖片路徑地址" alt="屬性名" title="占位符">中，alt="屬性名"是當圖片無法正常展示出來時顯示的文字，title="占位符"是滑鼠移動到圖片上展示出來的提醒文字。 2.HTML基礎標簽文本分為這個段落<p></p>標題h1-h6，文本隨標簽數字的增大而減小，標題的展示代碼如下： 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>HTML基礎標簽文本</title>
 7 </head>
 8 <body>
 9     <h1>標題1</h1>
10     <h2>標題2</h2>
11     <h3>標題3</h3>
12     <h4>標題4</h4>
13     <h5>標題5</h5>
14     <h6>標題6</h6>   
15 </body>
16 </html>

 在這裡不得不說的是瀏覽器的機制：針對空格、回車、table鍵，只要在字元之間（何謂字元，類似<p>我是字元</p>就是在這個標簽之間的文字），瀏覽器就會強制的轉換為一個空格；如果沒有在字元之間，則會直接清空，當然我們在編輯器中的排列添加的空格是為了排版的需要！如果想要排版展示的文字和在瀏覽器視窗展示的一樣，我們應該怎麼辦？常見代碼如下：

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>HTML基礎標簽文本</title>
 7 </head>
 8 <body>
 9     換行<br>
10     <hr>下劃線
11     空格&nbsp;   <!--字元實體-->
12     文本格式化標簽：
13     <strong>文本加粗</strong>
14     <em>斜體</em>
15     <del>刪除線</del>
16 </body>
17 </html>
3.html基礎標簽超鏈接,常見形式為<a href="#">文本</a>,在href="#"裡面，這個#可以替換為任何網址，如果不寫就為空，用#表示。點擊鏈接的文本，鏈接的網址打開形式分為當前視窗和新視窗打開，展示代碼為<a href="http://www.dhnblog.com/" target="_blank">新視窗打開</a>,<a href="http://www.dhnblog.com/" target="_self">當前視窗打開</a>,還有我們常說的書簽標記：錨點展示代碼形式如下 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<br><a name="br">1</a>
<br>2
<br>3
<br>4
<br>5
<br>6
<br>7
<br>8
<br>9
<br>10
<br>11
<br>12
<br>13
<br>14
<br>15
<br>16
<br>17
<br>18
<br>19
<br>20
<br>21
<br>22
<br>23
<br>24
<br>25
<br>26
<br>27
<br>28
<br>29
<br>30
<br>31
<br>32
<br>33
<br>34
<br>35
<br>36
<br>37
<br>38
<br>39
<br>40
<br>41
<br>42
<br>43
<br>44
<br>45
<br>46
<br>47
<br>48
<br>49
<br>50
<br>51
<br>52
<br>53
<br>54
<br>55
<br>56
<br>57
<br>58
<br>59
<br>60
<br>61
<br>62
<br>63
<br>64
<br>65
<br>66
<br>67
<br><a href="#br">68點擊跳轉到1</a>
<br>69
<br>70
<br>71
<br>72
<br>73
<br>74
<br>75
<br>76
<br>77
<br>78
<br>79
<br>80
<br>81
<br>82
<br>83
<br>84
<br>85
<br>86
<br>87
<br>88
<br>89
<br>90
<br>91
<br>92
<br>93
<br>94
<br>95
<br>96
<br>97
<br>98
<br>99
<br>100   
</body>
</html>
View Code

 <a name="br">1</a> <a href="#br">68點擊跳轉1</a>或者也可以這樣寫:<a id="br">1</a><a href="#br">68點擊跳轉1</a>,除此之外，預設的<a href="#">點擊返回頂部</a>

  1 <!DOCTYPE html>
  2 <html lang="en">
  3 <head>
  4     <meta charset="UTF-8">
  5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6     <title>Document</title>
  7 </head>
  8 <body>
  9 <br><a id="br">1</a>
 10 <br>2
 11 <br>3
 12 <br>4
 13 <br>5
 14 <br>6
 15 <br>7
 16 <br>8
 17 <br>9
 18 <br>10
 19 <br>11
 20 <br>12
 21 <br>13
 22 <br>14
 23 <br>15
 24 <br>16
 25 <br>17
 26 <br>18
 27 <br>19
 28 <br>20
 29 <br>21
 30 <br>22
 31 <br>23
 32 <br>24
 33 <br>25
 34 <br>26
 35 <br>27
 36 <br>28
 37 <br>29
 38 <br>30
 39 <br>31
 40 <br>32
 41 <br>33
 42 <br>34
 43 <br>35
 44 <br>36
 45 <br>37
 46 <br>38
 47 <br>39
 48 <br>40
 49 <br>41
 50 <br>42
 51 <br>43
 52 <br>44
 53 <br>45
 54 <br>46
 55 <br>47
 56 <br>48
 57 <br>49
 58 <br>50
 59 <br>51
 60 <br>52
 61 <br>53
 62 <br>54
 63 <br>55
 64 <br>56
 65 <br>57
 66 <br>58
 67 <br>59
 68 <br>60
 69 <br>61
 70 <br>62
 71 <br>63
 72 <br>64
 73 <br>65
 74 <br>66
 75 <br>67
 76 <br><a href="#br">68</a>
 77 <br>69
 78 <br>70
 79 <br>71
 80 <br>72
 81 <br>73
 82 <br>74
 83 <br>75
 84 <br>76
 85 <br>77
 86 <br>78
 87 <br>79
 88 <br>80
 89 <br>81
 90 <br>82
 91 <br>83
 92 <br>84
 93 <br>85
 94 <br>86
 95 <br>87
 96 <br>88
 97 <br>89
 98 <br>90
 99 <br>91
100 <br>92
101 <br>93
102 <br>94
103 <br>95
104 <br>96
105 <br>97
106 <br>98
107 <br>99
108 <br>100   
109 </body>
110 </html>
View Code

 

4.html基礎標簽列表分為無序列表，有序列表，自定義列表，字面意思理解就是有無順序的區別，代碼展示形式如下： 
 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>html基礎標簽列表</title>
 7 </head>
 8 <body>
 9     <!-- 無線列表type="circle"定義列表前展示的樣式，現在基本用的是style="list-style: ;"-->
10     <ul type="circle">
11         <li>1</li>
12         <li>2</li>
13         <li>3</li>
14         <li>4</li>
15     </ul>
16     <!-- 有序列表 -->
17     <ol style="list-style: square;">
18         <li>1</li>
19         <li>2</li>
20         <li>3</li>
21         <li>4</li>
22     </ol>
23     <!-- 自定義列表  -->
24     <dl>
25         <dt>
26             <dd>文本</dd>
27         </dt>
28     </dl>
29 </body>
30 </html>

 5.html基礎標簽表格<table>包含若幹行<tr>，行裡面包含若幹個單元格,單元格的標題是<th>內容為<td>，在表格中最重要的2個是合併行或者列，而colspan=""代表的是單元格可橫跨列數rowspan=""代表的是可橫跨行數，展示代碼如下:

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta name="viewport" content="width=device-width, initial-scale=1.0">
 6     <title>html基礎標簽</title>
 7 </head>
 8 <body>
 9     <table border="1"><!--邊框為1px-->
10         <caption>colspan列數&nbsp;rowspan行數</caption><!--表格頭部標題-->
11         <tr>
12             <th rowspan="4">部門</th>
13             <th>姓名</th>
14             <th>性別</th>
15             <th>工資</th>
16         </tr>
17         <tr>
18             <td>小明</td>
19             <td>男</
您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JS簡易計算器的實現，以及代碼的優化
    用JS實現簡易計算器 首先創建結構和樣式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1 ...
  • Ajax工作原理及優缺點
    1. Ajax是什麼？ 全稱是 asynchronous javascript and xml，是已有技術的組合，主要用來實現客戶端與伺服器端的非同步通信效果（無需重新載入整個網頁的情況下），實現頁面的局部刷新。 通過在後臺與伺服器進行少量數據交換，AJAX 可以使網頁實現非同步更新，用於創建快速動態網 ...
  • html基本標簽表單實現交互原理，單選框，覆選框，下拉框介紹
    表單是什麼？表單是前端和伺服器做交互的一種機制，表單收集用戶輸入信息，之後發送或者提交給伺服器。用戶在輸入的信息稱之為內容，內容的文本分為普通和密碼型，用戶通過單選框、覆選框、下拉框（也就是下拉菜單）完成內容信息輸入，最後通過提交按鈕發送給伺服器！這裡要講到瀏覽器怎麼發送給伺服器？涉及到http協議... ...
  • JS中函數的本質，定義、調用，以及函數的參數和返回值
    要用面向對象的方式去編程，而不要用面向過程的方式去編程 對象是各種類型的數據的集合，可以是數字、字元串、數組、函數、對象…… 對象中的內容以鍵值對方式進行存儲 對象要賦值給一個變數 var cat={ "name":"喵1", "age":4, "family":["喵爸","喵媽"], "spea ...
  • 開源netcore前後端分離,前端服務端渲染方案
    SPA單頁面應用容器 開源地址： https://github.com/yuzd/Spa 功能介紹 前端應用開發完後打包後自助上傳部署發佈 配合服務端腳本(javascript)實現服務端業務邏輯編寫渲染SSR功能 可以快速回滾到上一個版本 可以設置環境變數供SSR功能使用 服務端腳本提供執行日誌 ...
  • JavaScript運動_封裝模板(支持鏈式運動、完美運動)
    最近自學到了JS運動部分，自己整理了一些js模板，望採納。 1.支持鏈式運動的模板： 先解釋一下函數中的幾個參數含義： 1）obj: 要操作的對象 2）target: 屬性要到達的目標值 3）attr: 要操作的屬性值 4）callback: 回調函數 註：調用函數時，回調函數可不寫 2.支持完美運 ...
  • JS高階編程技巧--惰性函數
    在vue、react等框架大量應用之前，我們需要使用jQuery或者原生js來操作dom寫代碼，在用原生js進行事件綁定時，我們可以應用DOM2級綁定事件的方法，即：元素.addEventListener()，因為相容性，還有： 元素.attachEvent()。所以我們需要封裝成一個方法： fun ...
  • 【轉】JS 的 new 到底是乾什麼的？
    原文：https://zhuanlan.zhihu.com/p/23987456?refer=study-fe 大部分講 new 的文章會從面向對象的思路講起，但是我始終認為，在解釋一個事物的時候，不應該引入另一個更複雜的事物。 今天我從「省代碼」的角度來講 new。 想象我們在製作一個策略類戰爭游 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類