首頁 > html教程 > HTML熱點 閱讀：0更新時間：2020-12-20 09:49:18

HTML文本標記語言

< 上一頁IE8 正式版官方下載鏈接 web前端之HTML中的常見特殊符號 下一頁 >

html文本標記語言

  • HTML
    • HTML的基本結構
    • HTML中的注釋
    • HTML頭部的描述
    • HTML的文本標簽
    • HTML的格式化標簽
    • HTML的圖像標簽
    • HTML的超鏈接標簽
    • HTML的表格標簽
    • 總結

HTML

HTML是HyperText Mark-up Languages的首字母簡寫，其意思為超文本標記語言，是一種用于制作網頁語言，其中的內容都是由一個一個標簽組成

注意，HTML時一種標記語言，而不是一種編程語言

html文檔也叫做web文檔，說白了就是一個網頁，html文件的擴展名是.html或者.htm；html文件用編輯器打開顯示的是文本，用瀏覽器打開則會通過瀏覽器按照標簽描述的內容將文件渲染成網頁

HTML發展史的圖示如下

HTML的發展史視圖，該圖來源于網上
HTML的發展史視圖，該圖來源于網上

HTML的基本結構

(1)文件的擴展名為.html或者.htm

(2)文本結構包括“頭”部分(head)和“主體”部分(body)，其中“頭”部分提供關于網頁的信息，“主體”部分提供網頁的具體內容

(3)HTML是由標簽和內容組成，最外層要用…標簽將其包裹

(4)HTML的標簽有兩種：單標簽和雙標簽

  • 單標簽：
  • 雙標簽：<標簽名>…

(5)HTML的標簽規范：

  • 標簽名要小寫
  • 屬性名要用雙引號
  • 標簽要閉合
    注意當html文件不遵守規范時瀏覽器不會報錯，同時也會盡量的去解析，若是解析不成功則不會顯示該部分的網頁效果

模板示意如下：


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>這是一個html的模板示意title>
head>
<body>
body>
html>

其中就包含有“頭”部分和“主體”部分以及標簽的規范
用瀏覽器打開的示意圖為：

模板示意圖

HTML中的注釋

html代碼中，在需要對該部分代碼進行一定的說明時可以插入注釋，即是對代碼的解釋
格式為：

HTML頭部的描述

在該博客中使用的是MarkDown表格語法，由于該語法表格不能實現表格中單元格合并，所以要實現單元格的合并則不能使用該表格語法，但是MarkDown表格語法兼容HTML，則可以使用HTML中的

…

可參考鏈接Markdown表格合并單元格

元素/標簽說明/描述
</td><td>- 定義瀏覽器中的標題 </td></tr><tr><td>- 頁面被收藏夾收藏時顯示的內容</td></tr><tr><td>-顯示在搜索引擎結果中的頁面標題</td></tr><tr><td><base href="http://www.vocabbomb.com/"/></td><td>- 頁面上的所有鏈接規定默認地址或默認目標</td></tr><tr><td><link></td><td>- 標簽定義文檔與外部資源之間的關系</td></tr><tr><td><style></td><td>- 標簽用于為HTML文檔定義樣式信息</td></tr><tr><td><meta></td><td>- 提供關于HTML文檔的元數據</td></tr><tr><td> <script></td><td>- 定義客戶端的腳本</td></tr></tbody></table> <p>我們舉個例子使用一下幾個標簽：</p> <pre><code><span><!DOCTYPE html></span> <span><span><span><</span>html</span> <span>lang</span><span><span>=</span><span>"</span>en<span>"</span></span><span>></span></span> <span><span><span><</span>head</span><span>></span></span> <span><span><span><</span>meta</span> <span>charset</span><span><span>=</span><span>"</span>UTF-8<span>"</span></span><span>></span></span> <span><span><span><</span>meta</span> <span>name</span><span><span>=</span><span>"</span>viewport<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>width=device-width, initial-scale=1.0<span>"</span></span><span>></span></span> <span><span><span><</span>title</span><span>></span></span>舉個例子<span><span><span></</span>title</span><span>></span></span> <span><span><span><</span>style</span><span>></span></span><span> <span>h1</span><span>{<!-- --></span> <span>color</span><span>:</span> crimson<span>;</span> <span>margin</span><span>:</span> 0px auto<span>;</span> <span>}</span> </span><span><span><span></</span>style</span><span>></span></span> <span><span><span></</span>head</span><span>></span></span> <span><span><span><</span>body</span><span>></span></span> <span><span><span><</span>h1</span><span>></span></span>這是一個例子<span><span><span></</span>h1</span><span>></span></span> <span><span><span><</span>h2</span><span>></span></span>這是一個例子<span><span><span></</span>h2</span><span>></span></span> <span><span><span><</span>h3</span><span>></span></span>這是一個例子<span><span><span></</span>h3</span><span>></span></span> <span><span><span></</span>body</span><span>></span></span> <span><span><span></</span>html</span><span>></span></span> </code></pre> <p><em>其中有運用的之后所涉及的標簽內容，這里我們先不多做解釋</em><br /> 讓我們來看在瀏覽器打開之后的效果<br /> <img src="/d/file/htmljc/redian/2020-12-07/2b56cd90c2f292b0cf16eb8a73f4db11.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5NzE2MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="HTML文本標記語言" /></p> <p>我們能看到標題顯示的“舉個例子”這就是<title>標簽顯示出來的，有在<body>標簽中顯示的是具體內容</p> <h2>HTML的文本標簽</h2> <p>常用標簽表格：</p> <table><thead><tr><th>元素/標簽</th><th>說明/描述</th></tr></thead><tbody><tr><td><hn>…</hn></td><td>-標簽內的n的值為1~6，表示的是標簽不同格式的標題</td></tr><tr><td><i>…</i></td><td>-標簽表示的斜體</td></tr><tr><td><em>…</em></td><td>-標簽表示的是強調斜體 <mark>與<i>…</i>的區別是方便搜索</mark></td></tr><tr><td><b>…<b></td><td>-標簽表示的是加粗</td></tr><tr><td><strong>…<strong></td><td>-標簽表示的是強調加粗 <mark>與<strong>…<strong>的區別是方便搜索</mark></td></tr><tr><td><cite>…</cite></td><td>標簽表示作品標題的引用</td></tr><tr><td><sub>…</sub></td><td>標簽表示下標</td></tr><tr><td><sup>…</sup></td><td>標簽表示上標</td></tr><tr><td><del>…</del></td><td>標簽表示刪除線</td></tr></tbody></table> <p>我們來舉個例子：</p> <pre><code><span><!DOCTYPE html></span> <span><span><span><</span>html</span> <span>lang</span><span><span>=</span><span>"</span>en<span>"</span></span><span>></span></span> <span><span><span><</span>head</span><span>></span></span> <span><span><span><</span>meta</span> <span>charset</span><span><span>=</span><span>"</span>UTF-8<span>"</span></span><span>></span></span> <span><span><span><</span>meta</span> <span>name</span><span><span>=</span><span>"</span>viewport<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>width=device-width, initial-scale=1.0<span>"</span></span><span>></span></span> <span><span><span><</span>title</span><span>></span></span>舉個例子<span><span><span></</span>title</span><span>></span></span> <span><span><span><</span>style</span><span>></span></span><span> <span>h1</span><span>{<!-- --></span> <span>color</span><span>:</span> crimson<span>;</span> <span>margin</span><span>:</span> 0px auto<span>;</span> <span>}</span> </span><span><span><span></</span>style</span><span>></span></span> <span><span><span></</span>head</span><span>></span></span> <span><span><span><</span>body</span><span>></span></span> <span><span><span><</span>h1</span><span>></span></span> <span><span><span><</span>cite</span><span>></span></span>這是一個例子<span><span><span></</span>cite</span><span>></span></span> <span><span><span></</span>h1</span><span>></span></span> <span><span><span><</span>h2</span><span>></span></span> <span><span><span><</span>i</span><span>></span></span>這是一個例子<span><span><span></</span>i</span><span>></span></span> <span><span><span></</span>h2</span><span>></span></span> <span><span><span><</span>h3</span><span>></span></span> <span><span><span><</span>em</span><span>></span></span>這是一個例子<span><span><span></</span>em</span><span>></span></span> <span><span><span></</span>h3</span><span>></span></span> <span><span><span><</span>h4</span><span>></span></span> <span><span><span><</span>b</span><span>></span></span>這是一個例子<span><span><span></</span>b</span><span>></span></span> <span><span><span></</span>h4</span><span>></span></span> <span><span><span><</span>h5</span><span>></span></span> <span><span><span><</span>strong</span><span>></span></span>這是一個例子<span><span><span></</span>strong</span><span>></span></span> <span><span><span></</span>h5</span><span>></span></span> <span><span><span><</span>h6</span><span>></span></span> <span><span><span><</span>del</span><span>></span></span>這是一個例子<span><span><span></</span>del</span><span>></span></span> 這是一個例子 <span><span><span></</span>h6</span><span>></span></span> H<span><span><span><</span>sub</span><span>></span></span>2<span><span><span></</span>sub</span><span>></span></span>O 2<span><span><span><</span>sup</span><span>></span></span>10<span><span><span></</span>sup</span><span>></span></span>=1024 <span><span><span></</span>body</span><span>></span></span> <span><span><span></</span>html</span><span>></span></span> </code></pre> <p>讓我們來看在瀏覽器打開之后的效果<br /> <img src="/d/file/htmljc/redian/2020-12-07/dae25281953bf9565bf0e25c8337a265.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5NzE2MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="效果示意圖" /><br /> 這樣我們能很直觀的看到字體的變化</p> <h2>HTML的格式化標簽</h2> <p>常用的格式化標簽表格：</p> <table><thead><tr><th>元素/標簽</th><th>說明/描述</th></tr></thead><tbody><tr><td><br/></td><td>-<strong>單標簽</strong>，表示換行</td></tr><tr><td><p>…</p></td><td>-<strong>雙標簽</strong>，表示換段</td></tr><tr><td><hr/></td><td>-標簽表示水平分割線</td></tr><tr><td>…</td><td>-標簽常用于組合塊元素，以便通過CSS進行格式化</td></tr><tr><td><span>…<span/></td><td>-標簽用于包含的文本，可以使用CSS或者JavaScript對其進行定義樣式</td></tr></tbody></table> <p>常用的列表格式化標簽表格：</p> <table><thead><tr><th>元素/標簽</th><th>說明/描述</th></tr></thead><tbody><tr><td><ul>…</ul></td><td>-無序列表</td></tr><tr><td><ol>…</ol></td><td>-有序列表</td></tr><tr><td><li>…</li></td><td>-列表項</td></tr><tr><td><dl>…</dl></td><td>-自定義列表</td></tr><tr><td><dt>…</dt></td><td>-自定義列表頭</td></tr><tr><td><dd>…</dd></td><td>-自定義列表內容</td></tr></tbody></table> <p>在此處，我們來舉個例子</p> <pre><code><span><!DOCTYPE html></span> <span><span><span><</span>html</span> <span>lang</span><span><span>=</span><span>"</span>en<span>"</span></span><span>></span></span> <span><span><span><</span>head</span><span>></span></span> <span><span><span><</span>meta</span> <span>charset</span><span><span>=</span><span>"</span>UTF-8<span>"</span></span><span>></span></span> <span><span><span><</span>meta</span> <span>name</span><span><span>=</span><span>"</span>viewport<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>width=device-width, initial-scale=1.0<span>"</span></span><span>></span></span> <span><span><span><</span>title</span><span>></span></span>HTML格式化標簽<span><span><span></</span>title</span><span>></span></span> <span><span><span></</span>head</span><span>></span></span> <span><span><span><</span>body</span><span>></span></span> <span><span><span><</span>h1</span><span>></span></span>這是一個例子<span><span><span></</span>h1</span><span>></span></span> <span><span><span><</span>hr</span><span>/></span></span> <span><span><span><</span>div</span><span>></span></span> <span><span><span><</span>p</span><span>></span></span> <span><span><span><</span>ul</span><span>></span></span> <span><span><span><</span>li</span><span>></span></span> <span><span><span><</span>i</span><span>></span></span>例子1<span><span><span></</span>i</span><span>></span></span> <span><span><span></</span>li</span><span>></span></span> <span><span><span><</span>li</span><span>></span></span> <span><span><span><</span>strong</span><span>></span></span>例子2<span><span><span></</span>strong</span><span>></span></span> <span><span><span></</span>li</span><span>></span></span> <span><span><span><</span>li</span><span>></span></span> <span><span><span><</span>del</span><span>></span></span>例子3<span><span><span></</span>del</span><span>></span></span> <span><span><span></</span>li</span><span>></span></span> <span><span><span></</span>ul</span><span>></span></span> <span><span><span></</span>p</span><span>></span></span> <span><span><span><</span>p</span><span>></span></span> <span><span><span><</span>ol</span><span>></span></span> <span><span><span><</span>li</span><span>></span></span> <span><span><span><</span>i</span><span>></span></span>例子1<span><span><span></</span>i</span><span>></span></span> <span><span><span></</span>li</span><span>></span></span> <span><span><span><</span>li</span><span>></span></span> <span><span><span><</span>strong</span><span>></span></span>例子2<span><span><span></</span>strong</span><span>></span></span> <span><span><span></</span>li</span><span>></span></span> <span><span><span><</span>li</span><span>></span></span> <span><span><span><</span>del</span><span>></span></span>例子3<span><span><span></</span>del</span><span>></span></span> <span><span><span></</span>li</span><span>></span></span> <span><span><span></</span>ol</span><span>></span></span> <span><span><span></</span>p</span><span>></span></span> <span><span><span><</span>p</span><span>></span></span> <span><span><span><</span>dl</span><span>></span></span> <span><span><span><</span>dt</span><span>></span></span>舉個例子<span><span><span></</span>dt</span><span>></span></span> <span><span><span><</span>dd</span><span>></span></span> <span><span><span><</span>i</span><span>></span></span>例子1<span><span><span></</span>i</span><span>></span></span> <span><span><span></</span>dd</span><span>></span></span> <span><span><span><</span>dd</span><span>></span></span> <span><span><span><</span>strong</span><span>></span></span>例子2<span><span><span></</span>strong</span><span>></span></span> <span><span><span></</span>dd</span><span>></span></span> <span><span><span><</span>dd</span><span>></span></span> <span><span><span><</span>del</span><span>></span></span>例子3<span><span><span></</span>del</span><span>></span></span> <span><span><span></</span>dd</span><span>></span></span> <span><span><span></</span>dl</span><span>></span></span> <span><span><span></</span>p</span><span>></span></span> <span><span><span></</span>div</span><span>></span></span> <span><span><span></</span>body</span><span>></span></span> <span><span><span></</span>html</span><span>></span></span> </code></pre> <p>其中包含有有序列表，無序列表，以及自定義列表<br /> 讓我們通過瀏覽器來看看效果<br /> <img src="/d/file/htmljc/redian/2020-12-07/bc928b640c0c714f53e13c7573488896.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5NzE2MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="效果示意圖" /></p> <h2>HTML的圖像標簽</h2> <p>顧名思義可以明白該標簽的用法：就是在網頁中插入圖片<br /> 格式：<br /> <img/><br /> 其中，在內部可以添加屬性值：</p> <ul><li>src：圖片名以及url，即圖片的路徑</li><li>alt：圖片加載失敗時顯示出來的內容</li><li>title：文本提示屬性，即當鼠標放上去的時候顯示出來的內容</li><li>width：圖片的寬度</li><li>heigth：圖片的高度</li><li>border：圖片邊框線的粗細<br /> 我們舉個例子，首先呢，我從網上著都了一張明星的圖片，參考鏈接薛之謙<br /> 然后，我們將獲得的照片路徑放在src屬性中</li></ul> <pre><code><span><!DOCTYPE html></span> <span><span><span><</span>html</span> <span>lang</span><span><span>=</span><span>"</span>en<span>"</span></span><span>></span></span> <span><span><span><</span>head</span><span>></span></span> <span><span><span><</span>meta</span> <span>charset</span><span><span>=</span><span>"</span>UTF-8<span>"</span></span><span>></span></span> <span><span><span><</span>meta</span> <span>name</span><span><span>=</span><span>"</span>viewport<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>width=device-width, initial-scale=1.0<span>"</span></span><span>></span></span> <span><span><span><</span>title</span><span>></span></span>HTML的圖像標簽<span><span><span></</span>title</span><span>></span></span> <span><span><span></</span>head</span><span>></span></span> <span><span><span><</span>body</span><span>></span></span> <span><span><span><</span>div</span><span>></span></span> <span><span><span><</span>img</span> <span>src</span><span><span>=</span><span>"</span>https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=290326731,1417353297&fm=26&gp=0.jpg<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>薛之謙<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>薛之謙<span>"</span></span> <span>width</span><span><span>=</span><span>"</span>180px<span>"</span></span> <span>height</span><span><span>=</span><span>"</span>auto<span>"</span></span><span>/></span></span> <span><span><span></</span>div</span><span>></span></span> <span><span><span><</span>div</span><span>></span></span> <span><span><span><</span>img</span> <span>src</span><span><span>=</span><span>"</span><span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>薛之謙<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>薛之謙<span>"</span></span> <span>width</span><span><span>=</span><span>"</span>180px<span>"</span></span> <span>height</span><span><span>=</span><span>"</span>auto<span>"</span></span><span>/></span></span> <span><span><span></</span>div</span><span>></span></span> <span><span><span></</span>body</span><span>></span></span> <span><span><span></</span>html</span><span>></span></span> </code></pre> <p>在這里，一個img標簽有圖片連接路徑，另一個沒有，則沒有的那個會顯示出alt屬性的內容，同時，當我們的而鼠標放到圖片生靜置幾秒時會顯示出title的屬性值<br /> 讓我們來看看看瀏覽器的效果<br /> <img src="/d/file/htmljc/redian/2020-12-07/262798ee6ab9b18023dd6789426fef4f.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5NzE2MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="效果示意圖" /></p> <h2>HTML的超鏈接標簽</h2> <p>實現文字、圖片等進行的一個跳轉<br /> 格式：<br /> <a href=“目標鏈接的url”>…</a><br /> 其中該標簽的常用屬性：</p> <ul><li>href：表示目的鏈接的跳轉地址</li><li>target：表示鏈接的打開方式 <ul><li>_blank：新窗口</li><li>_parent：父窗口</li><li>_self：本窗口(默認)</li><li>_top：頂級窗口</li><li>framename：窗口名</li><li>title：文字屬性提示(詳情)</li></ul> </li></ul> <p>在這里呢，我又去找了個視頻的鏈接薛之謙–我好像在哪里見過你.mp4<br /> 然后呢我們利用這個鏈接進性實現超鏈接的內容</p> <pre><code><span><!DOCTYPE html></span> <span><span><span><</span>html</span> <span>lang</span><span><span>=</span><span>"</span>en<span>"</span></span><span>></span></span> <span><span><span><</span>head</span><span>></span></span> <span><span><span><</span>meta</span> <span>charset</span><span><span>=</span><span>"</span>UTF-8<span>"</span></span><span>></span></span> <span><span><span><</span>meta</span> <span>name</span><span><span>=</span><span>"</span>viewport<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>width=device-width, initial-scale=1.0<span>"</span></span><span>></span></span> <span><span><span><</span>title</span><span>></span></span>HTML的超鏈接標簽<span><span><span></</span>title</span><span>></span></span> <span><span><span></</span>head</span><span>></span></span> <span><span><span><</span>body</span><span>></span></span> <span><span><span><</span>div</span><span>></span></span> <span><span><span><</span>a</span> <span>href</span><span><span>=</span><span>"</span>http://fs.mv.web.kugou.com/202009191530/8884f1b5be27a4b5875f809c641c64be/G064/M04/0E/13/4IYBAFeRgaWAbVY4BtFrmZ8yaZU118.mp4<span>"</span></span> <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>薛之謙1<span>"</span></span><span>></span></span> <span><span><span><</span>img</span> <span>src</span><span><span>=</span><span>"</span>https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=290326731,1417353297&fm=26&gp=0.jpg<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>薛之謙<span>"</span></span><span>></span></span> <span><span><span></</span>a</span><span>></span></span> <span><span><span><</span>a</span> <span>href</span><span><span>=</span><span>"</span>http://fs.mv.web.kugou.com/202009191530/8884f1b5be27a4b5875f809c641c64be/G064/M04/0E/13/4IYBAFeRgaWAbVY4BtFrmZ8yaZU118.mp4<span>"</span></span> <span>target</span><span><span>=</span><span>"</span>_parent<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>薛之謙2<span>"</span></span><span>></span></span> <span><span><span><</span>img</span> <span>src</span><span><span>=</span><span>"</span>https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=290326731,1417353297&fm=26&gp=0.jpg<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>薛之謙<span>"</span></span><span>></span></span> <span><span><span></</span>a</span><span>></span></span> <span><span><span><</span>a</span> <span>href</span><span><span>=</span><span>"</span>http://fs.mv.web.kugou.com/202009191530/8884f1b5be27a4b5875f809c641c64be/G064/M04/0E/13/4IYBAFeRgaWAbVY4BtFrmZ8yaZU118.mp4<span>"</span></span> <span>target</span><span><span>=</span><span>"</span>_self<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>薛之謙3<span>"</span></span><span>></span></span> <span><span><span><</span>img</span> <span>src</span><span><span>=</span><span>"</span>https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=290326731,1417353297&fm=26&gp=0.jpg<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>薛之謙<span>"</span></span><span>></span></span> <span><span><span></</span>a</span><span>></span></span> <span><span><span><</span>a</span> <span>href</span><span><span>=</span><span>"</span>http://fs.mv.web.kugou.com/202009191530/8884f1b5be27a4b5875f809c641c64be/G064/M04/0E/13/4IYBAFeRgaWAbVY4BtFrmZ8yaZU118.mp4<span>"</span></span> <span>target</span><span><span>=</span><span>"</span>_top<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>薛之謙4<span>"</span></span><span>></span></span> <span><span><span><</span>img</span> <span>src</span><span><span>=</span><span>"</span>https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=290326731,1417353297&fm=26&gp=0.jpg<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>薛之謙<span>"</span></span><span>></span></span> <span><span><span></</span>a</span><span>></span></span> <span><span><span></</span>div</span><span>></span></span> <span><span><span></</span>body</span><span>></span></span> <span><span><span></</span>html</span><span>></span></span> </code></pre> <p>讓我們來看看在瀏覽器中的效果<br /> <img src="/d/file/htmljc/redian/2020-12-07/699736e7817cb0368fc5a31fff3a7d42.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5NzE2MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="效果示意圖" /><br /> 在這里我將照片作為一個超鏈接進行點開，同時我們可以對target的屬性進行實現<br /> <img src="/d/file/htmljc/redian/2020-12-07/3368b8d9e4ca322a0cf8184b915482b8.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5NzE2MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="效果示意圖" /><br /> <img src="/d/file/htmljc/redian/2020-12-07/7eb82ea28336bca148226bb9e2750082.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5NzE2MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="效果示意圖" /><br /> 在兩張圖中可以看到有在當前窗口打開的，和在新的窗口打開的</p> <h2>HTML的表格標簽</h2> <p>常用的表格標簽表格</p> <table><thead><tr><th>元素/標簽</th><th>說明/描述</th><th>常用屬性</th></tr></thead><tbody><tr><td><table>…</table></td><td>標簽表示定義表格</td><td>border、width、cellspacing、cellpadding</td></tr><tr><td><caption<…</caption></td><td>標簽表示定義表格標題</td><td>align</td></tr><tr><td><th>…</th></td><td>標簽表示定義表格的表頭</td><td>align、valign、bgcolor、rowspan、colspan、width、heigth</td></tr><tr><td><tr>…</tr></td><td>標簽表示表格的行</td><td>align、valign、bgcolor</td></tr><tr><td><td>…</td></td><td>標簽表示表格的單元格</td><td>align、valign、bgcolor、rowspan、colspan、width、heigth</td></tr><tr><td><thead>…</thead></td><td>標簽表示表格的頁眉</td><td>align、valign</td></tr><tr><td><tbody>…</tobdy></td><td>標簽表示表格的主體</td><td>align、valign</td></tr><tr><td><tfoot>…</tfoot></td><td>標簽表示表格的頁腳</td><td>align、valign</td></tr></tbody></table> <p>在這里，我從網上找了一些圖片的資源和一些視頻的資源進行表格的制作</p> <pre><code><span><!DOCTYPE html></span> <span><span><span><</span>html</span> <span>lang</span><span><span>=</span><span>"</span>en<span>"</span></span><span>></span></span> <span><span><span><</span>head</span><span>></span></span> <span><span><span><</span>meta</span> <span>charset</span><span><span>=</span><span>"</span>UTF-8<span>"</span></span><span>></span></span> <span><span><span><</span>meta</span> <span>name</span><span><span>=</span><span>"</span>viewport<span>"</span></span> <span>content</span><span><span>=</span><span>"</span>width=device-width, initial-scale=1.0<span>"</span></span><span>></span></span> <span><span><span><</span>title</span><span>></span></span>HTML的超鏈接標簽<span><span><span></</span>title</span><span>></span></span> <span><span><span><</span>style</span><span>></span></span><span> <span>img</span><span>{<!-- --></span> <span>width</span><span>:</span> 90%<span>;</span> <span>height</span><span>:</span> auto<span>;</span> <span>}</span> </span><span><span><span></</span>style</span><span>></span></span> <span><span><span></</span>head</span><span>></span></span> <span><span><span><</span>body</span><span>></span></span> <span><span><span><</span>div</span><span>></span></span> <span><span><span><</span>thead</span><span>></span></span>心有謙謙結<span><span><span></</span>thead</span><span>></span></span><span><span><span><</span>br</span><span>/></span></span> <span><span><span><</span>tbody</span><span>></span></span> <span><span><span><</span>table</span> <span>border</span><span><span>=</span><span>"</span>1<span>"</span></span><span>></span></span> <span><span><span><</span>tr</span><span>></span></span> <span><span><span><</span>td</span><span>></span></span> <span><span><span><</span>a</span> <span>href</span><span><span>=</span><span>"</span>http://fs.mv.web.kugou.com/202009191530/8884f1b5be27a4b5875f809c641c64be/G064/M04/0E/13/4IYBAFeRgaWAbVY4BtFrmZ8yaZU118.mp4<span>"</span></span> <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>薛之謙1<span>"</span></span><span>></span></span> <span><span><span><</span>img</span> <span>src</span><span><span>=</span><span>"</span>https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=290326731,1417353297&fm=26&gp=0.jpg<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>薛之謙<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>薛之謙1<span>"</span></span><span>></span></span> <span><span><span></</span>a</span><span>></span></span> <span><span><span></</span>td</span><span>></span></span> <span><span><span><</span>td</span><span>></span></span> <span><span><span><</span>a</span> <span>href</span><span><span>=</span><span>"</span>http://fs.mv.web.kugou.com/202009191603/19e1e86f007dd5916d5d9c401124b125/G126/M07/02/17/XpQEAFpgLMSABqqzBPe5OU7hfkM721.mp4<span>"</span></span> <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>薛之謙2<span>"</span></span><span>></span></span> <span><span><span><</span>img</span> <span>src</span><span><span>=</span><span>"</span>https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600512667171&di=d3db4bec367c5395de48a3a496c871d1&imgtype=0&src=http%3A%2F%2Fb-ssl.duitang.com%2Fuploads%2Fitem%2F201611%2F26%2F20161126200206_cnEWr.thumb.400_0.jpeg<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>薛之謙<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>薛之謙1<span>"</span></span><span>></span></span> <span><span><span></</span>a</span><span>></span></span> <span><span><span></</span>td</span><span>></span></span> <span><span><span></</span>tr</span><span>></span></span> <span><span><span><</span>tr</span><span>></span></span> <span><span><span><</span>td</span><span>></span></span> <span><span><span><</span>a</span> <span>href</span><span><span>=</span><span>"</span>http://fs.mv.web.kugou.com/202009191604/2f42a03a92cfa0d4c90c2fcbe9f8d08c/G095/M01/11/14/P5QEAFkVhhaAUcMqBUToPYopRjo628.mp4<span>"</span></span> <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>薛之謙3<span>"</span></span><span>></span></span> <span><span><span><</span>img</span> <span>src</span><span><span>=</span><span>"</span>https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1600512667170&di=b6a1d8f9abed8ca6ddab94b8494a2bec&imgtype=0&src=http%3A%2F%2Fn.sinaimg.cn%2Fsinacn16%2F735%2Fw499h236%2F20180721%2Ff890-hfqtahi3379592.jpg<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>薛之謙<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>薛之謙1<span>"</span></span><span>></span></span> <span><span><span></</span>a</span><span>></span></span> <span><span><span></</span>td</span><span>></span></span> <span><span><span><</span>td</span><span>></span></span> <span><span><span><</span>a</span> <span>href</span><span><span>=</span><span>"</span>http://fs.mv.web.kugou.com/202009191606/9bf4b58693c3713a09123f5609fa0ae3/G091/M00/0A/04/O5QEAFtrnTWAIoUeB3cYRkgTdGo190.mp4<span>"</span></span> <span>target</span><span><span>=</span><span>"</span>_blank<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>薛之謙4<span>"</span></span><span>></span></span> <span><span><span><</span>img</span> <span>src</span><span><span>=</span><span>"</span>https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=3704963114,1914319017&fm=26&gp=0.jpg<span>"</span></span> <span>alt</span><span><span>=</span><span>"</span>薛之謙<span>"</span></span> <span>title</span><span><span>=</span><span>"</span>薛之謙1<span>"</span></span><span>></span></span> <span><span><span></</span>a</span><span>></span></span> <span><span><span></</span>td</span><span>></span></span> <span><span><span></</span>tr</span><span>></span></span> <span><span><span></</span>table</span><span>></span></span> <span><span><span></</span>tbody</span><span>></span></span><span><span><span><</span>br</span><span>/></span></span> <span><span><span><</span>tfoot</span><span>></span></span>謝謝謙謙<span><span><span></</span>tfoot</span><span>></span></span> <span><span><span></</span>div</span><span>></span></span> <span><span><span></</span>body</span><span>></span></span> <span><span><span></</span>html</span><span>></span></span> </code></pre> <p>讓我們來看看瀏覽器中的效果<br /> <img src="/d/file/htmljc/redian/2020-12-07/01cdc55397cab47737547cda3a93f78a.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDI5NzE2MQ==,size_16,color_FFFFFF,t_70#pic_center" alt="效果示意圖" /></p> <p>圖中可以看到頁眉，頁腳，我們分別點開四張圖片時則會跳轉到不同的超鏈接，效果圖我就不再一一顯示出來了，可以自己去試試喲</p> <h2>總結</h2> <p>在本次學習的內容中，有了對前端進一步的理解，同時，對前端的一些標記也有了一定程度上的熟悉，這篇博客中還有許多的不足，等著大家對我的博客進行一定的補充[呲牙]，希望這篇文章對大家有幫助，最后呢，我在這里跑題一下[呲牙]，雖然我不是薛之謙的粉絲，但是我挺喜歡他的，嘿嘿嘿</p></div> <div class="pre-next-page clearfix"> <span class="pre left"><span class="icon"><</span> <span class="text-brief text-brief-pre">上一頁</span><a href='http://www.vocabbomb.com/htmljc/2518.html'>IE8 正式版官方下載鏈接</a></span> <span class="next right"><a href='http://www.vocabbomb.com/htmljc/2520.html'>web前端之HTML中的常見特殊符號</a> <span class="text-brief text-brief-next">下一頁</span> <span class="icon">></span></span> </div> <div id="ad-bottom-weixin" class="clearfix"> <div class="left" style="width: 535px;"> <p><span class="col-red">beylze編程學院</span>，一個分享編程知識和seo優化知識的網站。跟著beylze一起學習，每天都有進步。</p> <p>通俗易懂，深入淺出，一篇文章只講一個知識點。</p> <p>文章不深奧，不需要鉆研，在公交、在地鐵、在廁所都可以閱讀，隨時隨地漲姿勢。</p> <p>文章不涉及代碼，不燒腦細胞，人人都可以學習。</p> <p>當你決定關注beylze（公眾號：beylze），你已然超越了90%的其他從業者！</p> </div> </div> <div id="all-course" class="box-bottom"> <h4>所有教程</h4> <ul class="clearfix"> <li><a href="/mysql/">MySQL教程</a></li> <li><a href="/linux/">Linux教程</a></li> <li><a href="/shell/">Shell教程</a></li> <li><a href="/htmljc/">HTML教程</a></li> <li><a href="/XML/">XML教程</a></li> </div> <div id="nice-arcs" class="box-bottom"> <h4>相關文章</h4> <ul class="clearfix"> </ul> </div> <div id="nice-arcs" class="box-bottom"> <h4>優秀教程</h4> <ul class="clearfix"> </ul> </div> <div id="nice-arcs" class="box-bottom"> <h4>最新教程</h4> <ul class="clearfix"> <li><a href="http://www.vocabbomb.com/htmljc/2530.html" title="HTML5 video 詳解 屬性 事件 方法">HTML5 video 詳解 屬性 事件 方法</a></li> <li><a href="http://www.vocabbomb.com/htmljc/2529.html" title="爬蟲新寵requests_html 帶你甄別2019虛假大學">爬蟲新寵requests_html 帶你甄別2019虛假大學</a></li> <li><a href="http://www.vocabbomb.com/htmljc/2527.html" title="網易攝影推出html5開發的iPad APP">網易攝影推出html5開發的iPad APP</a></li> <li><a href="http://www.vocabbomb.com/htmljc/2528.html" title="基于 HTML5 Canvas 的工控機柜 U 位動態管理">基于 HTML5 Canvas 的工控機柜 U 位動態管理</a></li> <li><a href="http://www.vocabbomb.com/htmljc/2531.html" title="HTML CSS 貴美商城網頁布局">HTML CSS 貴美商城網頁布局</a></li> <li><a href="http://www.vocabbomb.com/htmljc/2526.html" title="HTML5大作《時之召喚》研發經驗分享">HTML5大作《時之召喚》研發經驗分享</a></li> <li><a href="http://www.vocabbomb.com/htmljc/2525.html" title="Google HTML5+Rock Music ：《The Wilderness Downtown》">Google HTML5+Rock Music ：《The Wilderness Downtown》</a></li> <li><a href="http://www.vocabbomb.com/htmljc/2524.html" title="用hml5實現留言功能">用hml5實現留言功能</a></li> <li><a href="http://www.vocabbomb.com/htmljc/2523.html" title="HTML側面導航欄">HTML側面導航欄</a></li> <li><a href="http://www.vocabbomb.com/htmljc/2522.html" title="利用html2canvas和vue-qr生成帶頭像二維碼的分享海報（二）">利用html2canvas和vue-qr生成帶頭像二維碼的分享海報（二）</a></li> </ul> </div> </div> </div> </div> <script type="text/javascript"> // 當前文章ID window.arcIdRaw = 't_' + 159; window.arcId = "2e86EhagtS/9dR79auEcCRhqBgxNerZLDvqNjqti5fiYfG7fauW8BA3LBg"; window.typeidChain = "159"; </script> <div id="footer" class="clearfix"> <div class="info left"> <p>精美而實用的網站，提供<a href="/linux/">Linux</a>、<a href="/shell/">Shell</a>、<a href="/mysql/">MySQL</a>、<a href="/htmljc/">HTML</a>、<a href="/XML/">XML</a>等教程。</p> <p>Copyright ?2019-2020 beylze.cn, <a href="http://www.vocabbomb.com/sitemap.xml" target="_blank">網站地圖</a></p> </div> <img class="right" src="http://www.vocabbomb.com/static/picture/logo_bottom.gif" alt="底部Logo" /> <span id="return-top"><b>↑</b></span> </div> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://#/hm.js?cfbec79c393a3a8120189719d2df9df0"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script type="text/javascript"> window.siteId = 4; window.cmsTemplets = "/templets/new"; window.cmsTempletsVer = "1.4.5"; </script> <script src="http://www.vocabbomb.com/static/js/jquery1.12.4.min.js"></script> <script src="http://www.vocabbomb.com/static/js/common.js"></script> <script src="http://www.vocabbomb.com/e/data/ecmseditor/third-party/SyntaxHighlighter/shCore.js"></script> <link href="http://www.vocabbomb.com/e/data/ecmseditor/third-party/SyntaxHighlighter/shCoreDefault.css" rel="stylesheet" /> <span style="display:none;"><script src="http://www.vocabbomb.com/static/js/z_stat.js" type="text/javascript" defer="defer" async="async"></script></span> <script> var _hmt = _hmt || []; (function() { var hm = document.createElement("script"); hm.src = "https://#/hm.js?cfbec79c393a3a8120189719d2df9df0"; var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(hm, s); })(); </script> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> <script type="text/javascript"> SyntaxHighlighter.highlight(); var editor_a = new baidu.editor.ui.Editor(); editor_a.render( 'myEditor' ); </script> <a href="http://www.vocabbomb.com/">国产亚洲欧美日韩</a> <script> (function(){ var bp = document.createElement('script'); var curProtocol = window.location.protocol.split(':')[0]; if (curProtocol === 'https') { bp.src = 'https://zz.bdstatic.com/linksubmit/push.js'; } else { bp.src = 'http://push.zhanzhang.baidu.com/push.js'; } var s = document.getElementsByTagName("script")[0]; s.parentNode.insertBefore(bp, s); })(); </script> </body> </html>