首頁 web前端 html教學 Xhtml下不常用卻很有用的標籤_HTML/Xhtml_網頁製作

Xhtml下不常用卻很有用的標籤_HTML/Xhtml_網頁製作

May 16, 2016 pm 04:42 PM
xhtml 標籤

 Xhtml有許多不常用卻很有用的標籤。有的能事半功倍,有的能改進語義,有的則能提高易用性,我總結了一些,總結的原則是有用而且能用,就是大多數瀏覽器得支持,否則就不算「上上簽」了。只能望「簽」興嘆又有什麼用呢?
標籤
    效果: 標籤為頁面中所有連結指定預設連結位址或連結目標。有時候我們需要讓首頁的鏈接全部在新窗口中打開,我們一般會這樣寫鏈接,而使用這個標籤就能一下搞定了!
    屬性:
        Href:連結位址
        target:目標,而祂的值可以是使用這個模式中使用這個模式和使用這個模式,可以使用這個模式中可以使用這個模式中使用我來食用,他的值可以使用這個模式。最先是在163.com上發現的。
    用法:

<code class="html"><span class="tag"><head</span><span class="tag">></span><!&mdash;写在head标签之间--<span class="tag">> <br><span class="tag"><base</span><span class="aname"> href</span>=<span class="avalue">"http://www.qq.com/"</span> <span class="tag">/></span> <!&mdash;将默认链接定义为http://www.qq.com/--<span class="tag">> <br><span class="tag"><base</span><span class="aname"> target</span>=<span class="avalue">"_blank"</span> <span class="tag">/></span> <!&mdash;将默认链接目标定义为新窗口中打开--<span class="tag">> <br><span class="tag"></head></span></code><p><br><font size="4"><strong><caption>标签</strong></font><br>    <strong>作用:</strong>caption标签用来定义表格的标题,给表格定义一个标题,来说明这个表格是干什么的,岂不是很有“语义”,caption应该写在table之后,默认的样式是居中显示在表格的顶部。你可以通过css来改变它的样式。<br>    <strong>用法:</strong><br></p>
登入後複製
<code class="html"><span class="tag"><table</span><span class="aname"> width</span>=<span class="avalue">"200"</span><span class="aname"> border</span>=<span class="avalue">"1"</span> <span class="tag">></span> <br><span class="tag"><caption</span><span class="tag">></span> <span class="mlcom"><!--caption应该写在table之后--></span> <br>其实我是caption <br><span class="tag"></caption></span> <br><span class="tag"><tr</span><span class="tag">></span> <br><span class="tag"><td</span><span class="tag">></span><span class="entity"> </span><span class="tag"></td></span> <br><span class="tag"><td</span><span class="tag">></span><span class="entity"> </span><span class="tag"></td></span> <br><span class="tag"></tr></span> <br><span class="tag"><tr</span><span class="tag">></span> <br><span class="tag"><td</span><span class="tag">></span><span class="entity"> </span><span class="tag"></td></span> <br><span class="tag"><td</span><span class="tag">></span><span class="entity"> </span><span class="tag"></td></span> <br><span class="tag"></tr></span> <br><span class="tag"></table></span></code><p><br><font size="4"><strong><thead>标签、<tbody>标签、<tfoot>标签</strong></font><br>    作用:thead、tfoot 
以及 
tbody标签跟他们的名字那样,分别是表格的头部(很多人只是用th)、主题、和底部,他们能让表格更加语义化的同时,也能让我们更加方便的控制表格的表现。国外还有人用很变态地方法用这三个表其做出标题能跟随表格,或者tbody固定高度,多出的行数出现滚动条。有兴趣的可以搜素下或者是这做一下。<br>注意:<font color="#ff0000">如果您使用 thead、tfoot 以及 tbody 
元素,您就必须使用全部的元素。它们的出现次序是:thead、tfoot、tbody,这样浏览器就可以在收到所有数据前呈现页脚了。</font><br>    <strong>用法:</strong><br></p>
登入後複製
<code class="html"><span class="tag"><table</span><span class="aname"> border</span>=<span class="avalue">"1"</span><span class="tag">></span> <br><span class="tag"><thead</span><span class="tag">></span> <br><span class="tag"><tr</span><span class="tag">></span> <br><span class="tag"><th</span><span class="tag">></span>科目<span class="tag"></th></span> <br><span class="tag"><th</span><span class="tag">></span>分数<span class="tag"></th></span> <br><span class="tag"></tr></span> <br><span class="tag"></thead></span> <br><span class="tag"><tfoot</span><span class="tag">></span> <br><span class="tag"><tr</span><span class="tag">></span> <br><span class="tag"><td</span><span class="tag">></span>总分<span class="tag"></td></span> <br><span class="tag"><td</span><span class="tag">></span>159<span class="tag"></td></span> <br><span class="tag"></tr></span> <br><span class="tag"></tfoot></span> <br> <br><span class="tag"><tbody</span><span class="tag">></span> <br><span class="tag"><tr</span><span class="tag">></span> <br><span class="tag"><td</span><span class="tag">></span>语文<span class="tag"></td></span> <br><span class="tag"><td</span><span class="tag">></span>99<span class="tag"></td></span> <br><span class="tag"></tr></span> <br><span class="tag"><tr</span><span class="tag">></span> <br><span class="tag"><td</span><span class="tag">></span>数学<span class="tag"></td></span> <br><span class="tag"><td</span><span class="tag">></span>60<span class="tag"></td></span> <br><span class="tag"></tr></span> <br><span class="tag"></tbody></span> <br><span class="tag"></table></span></code><p><br><font size="4"><strong><fieldset>标签和<legend>标签</strong></font><br>    <strong>作用:</strong><fieldset>元素用来分类表单中的元素,而<legend>则能给这个组定义一个标题。你一定见过类似下面domo的布局吧!他们也可以通过css定义样式。<br>    <strong>用法:</strong><br></p>
登入後複製
<code class="html"><span class="tag"><form</span><span class="tag">></span> <br><span class="tag"><fieldset</span><span class="tag">></span> <br><span class="tag"><legend</span><span class="tag">></span>基本信息<span class="tag"></legend></span> <br>姓名: <span class="tag"><input</span><span class="aname"> type</span>=<span class="avalue">"text"</span> <span class="tag">/></span> <br>性别: <span class="tag"><input</span><span class="aname"> type</span>=<span class="avalue">"text"</span> <span class="tag">/></span> <br><span class="tag"></fieldset></span> <br><span class="tag"></form></span></code><p><br><font size="4"><strong><sub> 标签和<sup> 标签</strong></font><br>    作用:<sub> 
标签和<sub> 
标签分别是上标和下标,虽然他们在各个浏览器的表现不一样,你<br>同样可以使用css定义他们的样式。<br>    <strong>用法:</strong><br></p>
登入後複製
<code class="html">2<span class="tag"><sup</span><span class="tag">></span>我是上标<span class="tag"></sup></span> <br>2<span class="tag"><sub</span><span class="tag">></span>我是下标<span class="tag"></sub></span></code><p><br><font size="4"><strong><label>标签</strong></font><br>    <strong>作用:</strong>label 
标签的使用可以扩大表单的点击区域来改进表单的易用性。看看下面的用法:点击文字的时候相当于点击了单选控件,这样用户体验是不是会更好一些?<br>    <strong>用法:</strong><br></p>
登入後複製
<code class="html"><span class="tag"><form</span><span class="tag">></span> <br><span class="tag"><label</span><span class="aname"> for</span>=<span class="avalue">"nan"</span><span class="tag">></span>先生<span class="tag"></label></span> <br><span class="tag"><input</span><span class="aname"> type</span>=<span class="avalue">"radio"</span><span class="aname"> name</span>=<span class="avalue">"sex"</span><span class="aname"> id</span>=<span class="avalue">"nan"</span> <span class="tag">/></span> <br><span class="tag"><br</span> <span class="tag">/></span> <br><span class="tag"><label</span><span class="aname"> for</span>=<span class="avalue">"nv"</span><span class="tag">></span>女士<span class="tag"></label></span> <br><span class="tag"><input</span><span class="aname"> type</span>=<span class="avalue">"radio"</span><span class="aname"> name</span>=<span class="avalue">"sex"</span><span class="aname"> id</span>=<span class="avalue">"nv"</span> <span class="tag">/></span> <br><span class="tag"></form></span></code><br><font size="4"><strong><optgroup> 标签</strong></font><br>    <strong>作用:</strong><option></option> 
标签可以给select中的option进行分组,这在下拉项目很多的时候很有用,配合label标签给每组命名。你也可以像淘宝那样给每组用css定义不同的颜色。<br>    <strong>用法:</strong><br>
登入後複製
<code class="html"><span class="tag"><select</span><span class="tag">></span> <br><span class="tag"><optgroup</span><span class="aname"> label</span>=<span class="avalue">"自驾游"</span><span class="tag">></span> <span class="mlcom"><!--配合label标签给每组命名--></span> <br><span class="tag"><option</span><span class="tag">></span>省内<span class="tag"></option></span> <br><span class="tag"><option</span><span class="tag">></span>省外<span class="tag"></option></span> <br><span class="tag"></optgroup></span> <br><span class="tag"><optgroup</span><span class="aname"> label</span>=<span class="avalue">"旅行社"</span><span class="tag">></span> <br><span class="tag"><option</span><span class="tag">></span>省内<span class="tag"></option></span> <br><span class="tag"><option</span><span class="tag">></span>省外<span class="tag"></option></span> <br><span class="tag"><option</span><span class="tag">></span>国外<span class="tag"></option></span> <br><span class="tag"></optgroup></span> <br><span class="tag"></select></span></code><br>    你如果对更多的xhtml标签感兴趣,可以考虑看一看《HTML和XHTML权威指南》这本书,你也能在网上找到电子版的。我看过英文影印版的,虽然是英文但也不是太难看懂。<br>    你要是知道其他很有用的标签告诉我们吧!
登入後複製
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

記事本++7.3.1

記事本++7.3.1

好用且免費的程式碼編輯器

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

禪工作室 13.0.1

禪工作室 13.0.1

強大的PHP整合開發環境

Dreamweaver CS6

Dreamweaver CS6

視覺化網頁開發工具

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)

熱門話題

Java教學
1664
14
CakePHP 教程
1423
52
Laravel 教程
1317
25
PHP教程
1268
29
C# 教程
1244
24
如何在Chrome和Edge的所有選項卡中搜尋文本 如何在Chrome和Edge的所有選項卡中搜尋文本 Feb 19, 2024 am 11:30 AM

本教學向您展示如何在Windows的Chrome或Edge中找到所有開啟的標籤頁上的特定文字或短語。有沒有辦法在Chrome中所有開啟的標籤頁上進行文字搜尋?是的,您可以使用Chrome中的免費外部Web擴充功能在所有開啟的標籤上執行文字搜索,而無需手動切換標籤。一些擴充功能如TabSearch和Ctrl-FPlus可以幫助您輕鬆實現這項功能。如何在GoogleChrome的所有選項卡中搜尋文字? Ctrl-FPlus是一個免費的擴展,它方便用戶在瀏覽器視窗的所有標籤中搜尋特定的單字、短語或文字。這個擴

抖音標籤後面的時鐘是什麼?怎麼給抖音帳號打標籤呢? 抖音標籤後面的時鐘是什麼?怎麼給抖音帳號打標籤呢? Mar 24, 2024 pm 03:46 PM

在瀏覽抖音作品時,我們常常可以看到標籤後面有時鐘圖示。那麼,這個時鐘到底是什麼呢?本文將圍繞著「抖音標籤後面的時鐘是什麼」展開討論,希望為您的抖音使用提供一些有益的參考。一、抖音標籤後面的時鐘是什麼?抖音會推出一些熱門話題挑戰,用戶參與時會在標籤後看到一個時鐘圖標,這代表作品正在參與話題挑戰,並顯示挑戰的剩餘時間。對於一些具有時效性的內容,如假日、特殊活動等,抖音會在標籤後面附上時鐘圖標,提醒使用者該內容的有效期限。 3.熱門標籤:當某個標籤變得熱門時,抖音會在標籤後面加上時鐘圖標,表示這個標籤正

抖音怎麼帶標籤引流?平台什麼標籤最容易引流? 抖音怎麼帶標籤引流?平台什麼標籤最容易引流? Mar 22, 2024 am 10:28 AM

抖音作為一款備受歡迎的短影片社群平台,擁有龐大的使用者群體。對於抖音創作者來說,標籤引流是一種有效提升內容曝光度和吸引關注的方法。那麼,抖音怎麼帶標籤引流呢?本文將為您詳細解答這個問題,並介紹相關技巧。一、抖音怎麼帶標籤引流?發布影片時,請確保選擇與內容相關的標籤。這些標籤應涵蓋影片的主題和關鍵字,以便讓用戶透過標籤更容易找到您的影片。利用流行標籤是增加影片曝光的有效方法。研究當前熱門標籤和趨勢,將其巧妙地融入影片描述和標籤中。這些熱門標籤通常具有更高的曝光度,能夠吸引更多觀眾的注意。 3.標籤

深入了解HTML中的video元素 深入了解HTML中的video元素 Feb 24, 2024 pm 08:18 PM

HTML中video影片標籤詳解HTML5中的video標籤是一種用於在網頁上播放影片的標籤。它可以使用不同的格式來呈現視頻,例如MP4、WebM、Ogg等等。在本篇文章中,我們將詳細介紹video標籤的使用方法,並提供具體的程式碼範例。基本結構下面是video標籤的基本結構:

html5標籤head和header有什麼差別 html5標籤head和header有什麼差別 Jan 17, 2022 am 11:10 AM

區別:1、head標籤用於定義文檔頭部,它是所有頭部元素的容器,而header標籤用於定義文檔的頁眉(介紹資訊);2、瀏覽器都支援head標籤,而舊版本瀏覽器皆不支援header標籤,需要IE9+以上瀏覽器才能支援header標籤。

釘釘app外部聯絡人標籤怎麼刪除 釘釘app外部聯絡人標籤怎麼刪除 Feb 24, 2024 am 08:20 AM

釘釘app外部聯絡人標籤怎麼刪除?釘釘中是可以刪除外部聯絡人標籤的功能,但是多數小夥伴不知道釘釘外部聯絡人標籤如何的刪除,接下來就是小編為用戶帶來的釘釘app外部聯絡人標籤刪除方法圖文教學,有興趣的用戶快來一起看看吧!釘釘app外部聯絡人標籤怎麼刪除1、先開啟釘釘APP,主頁中點選如下圖所示的【管理】功能;2、然後進入到企業管理的介面,找到其中的【外部聯絡人】; 3.接著在外部聯絡人設定功能頁,選擇【標籤管理】服務;4、之後在聯絡人標籤主頁,選擇你需要刪除的標籤組類型;5、最後點選標籤組紅色

如何使用HTML和CSS實作一個具有固定導航選單的佈局 如何使用HTML和CSS實作一個具有固定導航選單的佈局 Oct 26, 2023 am 11:02 AM

如何使用HTML和CSS實現一個具有固定導航選單的佈局在現代網頁設計中,固定導航選單是常見的佈局之一。它可以使導航選單始終保持在頁面頂部或側邊,使用戶可以輕鬆瀏覽網頁內容。本文將介紹如何使用HTML和CSS實作一個具有固定導航選單的佈局,並提供具體的程式碼範例。首先,需要建立一個HTML結構來呈現網頁的內容和導覽選單。以下是一個簡單的範例

如何使用 Vue 實現標籤的輸入框? 如何使用 Vue 實現標籤的輸入框? Jun 25, 2023 am 11:54 AM

隨著Web應用的發展,標籤的輸入框越來越受歡迎。這種輸入框可以讓使用者更方便輸入數據,同時也方便使用者對已輸入的數據進行管理和搜尋。 Vue是一款非常強大的JavaScript框架,它可以幫助我們快速實現帶有標籤的輸入框。本文將介紹如何使用Vue實作標籤的輸入框。第一步:建立Vue實例首先,我們需要在頁面上建立Vue實例,程式碼如下:&l

See all articles