溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹“HTML怎么實現展示的文字在瀏覽器窗口展示的一樣”的相關知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“HTML怎么實現展示的文字在瀏覽器窗口展示的一樣”文章能幫助大家解決問題。
1.HTML基礎標簽圖片常見代碼形式<img src="圖片路徑地址" alt="屬性名" title="占位符">常見的圖片格式為以下三種：.jpg（圖片有損壓縮，影響畫質）、.png（圖片無損壓縮、容積大、具有透明通道）、.gif（動圖）。圖片路徑地址分為本地圖片和網絡圖片，本地圖片中分為絕對路徑（從盤符開始算起）和相對路徑（從當前路徑算起），相對路徑屬于平級關系，如果圖片相對于上一級，表現形式為"../"在<img src="圖片路徑地址" alt="屬性名" title="占位符">中，alt="屬性名"是當圖片無法正常展示出來時顯示的文字，title="占位符"是鼠標移動到圖片上展示出來的提醒文字。
2.HTML基礎標簽文本分為這個段落<p></p>標題h2-h7，文本隨標簽數字的增大而減小，標題的展示代碼如下：
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 <h2>標題1</h2>
10 <h3>標題2</h3>
11 <h4>標題3</h4>
12 <h5>標題4</h5>
13 <h6>標題5</h6>
14 <h7>標題6</h7>
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 空格 <!--字符實體-->
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>,還有我們常說的書簽標記：錨點展示代碼形式如下
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>
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列數 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>男</td>
20 <td>1W</td>
21 </tr>
22 <tr>
23 <td>小林</td>
24 <td>男</td>
25 <td>1W</td>
26 </tr>
27 <tr>
28 <td>小影</td>
29 <td>女</td>
30 <td>1W</td>
31 </tr>
32 <tr>
33 <td colspan="3">工資合計</td>
34 <td>3W</td>
35 </tr>
36 </table>
37 </body>
38 </html>
關于“HTML怎么實現展示的文字在瀏覽器窗口展示的一樣”的內容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業相關的知識，可以關注億速云行業資訊頻道，小編每天都會為大家更新不同的知識點。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
