您好,登錄后才能下訂單哦!
html5是由標簽組成的標記語言,本篇就介紹HTML5的部分標簽
html5保留的常用標簽
<!-- --> 定義HTML注釋 <html> HTML5文檔的根元素 <head> 定義HTML文檔的頭部頁面元素 <title> 定義HTML5的頁面標題 <body> 定義HTML5文檔的頁面主體部分 <style> 該元素用于引入樣式定義 <h2>到<h7> 定義標題一到標題六 <p> 段落標簽 <br> 換行標簽 <hr> 定義水平線 <div> 定義文檔中的塊 <span> 與div標簽基本相似,默認不會換行
代碼示例:
<!DOCTYPE html> <html> <meta charset="utf-8"><!--定義編碼方式--> <head> <title>標簽代碼示例</title> <head> <body> <h2>標題一</h2><!--標題標簽--> <h3>標題二</h3> <h4>標題三</h4> <h5>標題四</h5> <h6>標題五</h6> <h7>標題六</h7> <hr><!--輸出一條水平線--> <span>php</span><span>mysql</span><span>html</span><!--定義三個span標簽--> <br><!--換行標簽--> <div>php</div><div>mysql</div><div>html</div> <p>tomcat</p> </body> </html>
文本格式化標簽
這些元素讓文本在瀏覽器中呈現出特定的效果
<b> 定義粗體文本 <i> 定義斜體文本 <em> 定義強調文本 <strong> 定義粗體文本,與<b>標簽的作用和用法基本相同 <sup> 定義上標文本 <sub> 定義下標文本 <bdo> 定義文本的顯示方向,該標簽可以指定dir屬性,該屬性值只能是ltr或者是rtl
代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>文本格式化標簽</title> </head> <body> <span><b>加粗文本</b></span><br/> <span><i>斜體文本</i></span><br/> <span><b><i>粗斜體文本</i></b></span></br> <span><em>被強調的文本<em><span><br/> <big><span>大號字體文本</span></big><br/> <p><strong>加粗文本</strong></p><br/> <small><span>小號字體文本</span></small><br/> <div>普通文本<sup>上標文本</sup></div> <bdo dir="ltr">從左向右排列</bdo><br/> <bdo dir="rtl">從右向左排列</bdo><br/> </body> </html>
語義相關元素
html5保留了如下相關元素 <abbr> 用于表示一個縮寫 <address> 用于表示一個地址 <blockquote> 用于定義一段長的引用文本 <q>用于定義一段短的引用文本 <cite> 用于表示作品的標題 <code> 用于表示一段計算機代碼 <dfn> 用于定義一個專業術語 <del> 定義文檔中被刪除的文本 <ins> 定義文檔插入的文本 <pre> 預格式化標簽 <samp> 定義示范文本內容 <kbd> 定義鍵盤文本 <var> 用于表示一個變量
超鏈接和錨點
超鏈接<a.../>,該元素可以指定 id class style等核心屬性,也可以指定onclick等各種事件屬性,還可以指定如下三個重要屬性
href:指定超鏈接所關聯的另一個資源
target:指定使用框架集中的哪一個框架來裝載另一個資源,該屬性的屬性值可以是_self _blank _top _parent
<a href=" target="_blank" ">百度</a> <a href="#test">定位到test錨點</a> <a name="test"></a>
列表相關標簽
<ul> 定義無序列表 <ol> 定義有序列表 該元素可以指定如下三個屬性,start :指定列表項的起始數字 type :哪種類型 的編號 reversed 該屬性用于指定是否將排序反轉 (目前沒有瀏覽器支持該屬性) <li> 定義列表項目 <dl> 用于定義列表 <dt> 用于定義標題列表項 <dd> 用于定義普通列表項
代碼示例:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>列表相關標簽</title> </head> <body> <ul> <li>列表一</li> <li>列表二</li> <li>列表三</li> </ul> <ol start="2" type="I"> <li>列表一</li> <li>列表二</li> <li>列表三</li> </ol> <dl> <dt><dt> <dd><dd> <dd><dd> <dt><dt> <dd><dd> <dd><dd> <dl> </body> </html>
圖像相關標簽:
<img.../> src:該屬性指定圖片的所在的位置 alt:作為改圖片的提示信息 height:該圖片的的高度 width:該圖片的寬度 usemap="#mapname" <map.../> <map name=""> <area="" coords="" href=""> <area="" coords="" href=""> </map>
表格相關標簽:
<table> 用于定義表格 屬性:cellpadding :指定單元格內容和單元格邊框之間的間距 cellspacing :指定單元格之間的間距,該屬性可以是像素值也可以是百分比 width:表格的寬度 <caption> 定義表格標題 <tr> 定義表格行 <td> 定義單元格 <th> 定義表格頁眉的單元格 <tbody> 定義表格的主體 <thead> 定義表格的頭 <tfoot> 定義表格的腳 rowspan colspan 兩個屬性用于定義跨行跨列
框架相關元素:
<iframe src="" width ="" height="">
html5新增的通用屬性:
contentEditable屬性 該屬性設置為true,那么瀏覽器將允許開發者直接編輯該HTML元素里的內容,可以繼承,如果一 個HTML元素的父元素是可編輯的那么子元素默認也是可以編輯的 designMode 屬性 相當于一個全局的contentEditable屬性,如果把真個頁面的designMode屬性設置為on時,該頁面 上所有可支持contentEditabe都變成可編輯狀態 hidden屬性 hiddle設為true,就意味著瀏覽器不顯示該組件,瀏覽器也不會保留該組件所占用的空間,相當于 在CSS中設置display:none; spellcheck屬性 設置spellcheck="true"瀏覽器將會對輸入的文本內容執行輸入檢查
html5新增的常用元素:應用較少,略
html5頭部和元信息
<script>該元素用于包含JavaScript腳本 鏈接外部js<script type="text/javascript" src=""> <style>用于定義內部CSS樣式 <link>鏈接外部資源 鏈接外部CSS<link type="text/css" rel="stylesheet" href=""> <meta>定義HTML頁面的元數據 <mata charset="utf-8"> <mata http-equiv="refreash" content="2;URL="http://www.baidu.com">
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。