HTML標籤

標籤的定義

Html語言,它的全名應該是:超文本標記語言 (Hyper Text Markup Language)。

如同它的名字所描述的,Html並不是一種編程語言,而是一種標記語言 (markup language)。一般來說,標記語言通常可以分成三類:標識性的、過程性的及描述性的。

Html是目前相對來說使用率極高的一種描述性標記語言,描述性標記語言,它的標籤本身作用就是向解釋器描述標籤內所包含的內容的類型。而正是因爲這個原因,現今所有的搜索引擎,它們在對頁面做查找時,一般都是按標籤檢索,這也是爲什麼之前的搜索引擎無法檢索到table標籤中的其它內容的原因。

語義化Html標籤,其最主要的目的,是讓你的頁面對於搜索引擎來說更加友好,同時也能讓你的網頁在出現一些問題時可以方便地閱讀並找到問題所在,更容易書寫Css代碼。一個結構佈局清晰,標籤使用合理的網頁也能讓你的後期維護更加方便。


元信息標籤屬性有兩種:name和http-equiv,用法如下:

<!--設置頁面關鍵字--><meta name="keywords" content="(關鍵字,方便檢索,)html,mate"/>
<!--
設置頁面描述信息--><meta name="description" content="(對網頁的描述,方便檢索)頭部信息測試"/>
<!--
設置編輯軟件的描述--><meta name="generator" content="編輯軟件的名稱,hbuilder"/>
<!--
作者姓名描述--><meta name="author" content="(作者名字)冀瑞康"/>
<!--
設置搜索方式的限制-->
<!--name=robots
時,content的四個值all(能搜索當前網頁,及其鏈接網頁)、index(能搜索當前網頁)、nofollow(不能搜索當前網頁鏈接的網頁)、noindex(不能搜索當前網頁)、none(不能搜索當前網頁及其鏈接的網頁)-->
<meta name="robots"content="all" />

<!--設子網頁文字及語言--><!--方式一--><metahttp-equiv="content-type" content="text/html;charset=cp1250" />
<!--
方式二--><metahttp-equiv="content-language" content="utf-8" />
<!--
設置網頁的定時跳轉--><!--<meta http-equiv="refresh"content="跳轉時間,url=鏈接地址" />--><metahttp-equiv="refresh" content = "30000000,url=http://www.baidu.com"/>
<!--
設置有效期限,過了有效期必須從服務器重新調用--><meta http-equiv="expires" content="Fri,29March 2016 9:41:06 GMT" />
<!--
禁止從緩存中調用:以保證數據是最新的--><meta http-equiv="Cache-Control"content="no-cache" /><meta http-equiv="Pragma"content="no-cache" />
<!--
刪除過期的cookie--><!--到指定的時間刪除,content中寫的是時間--><meta http-equiv="set-cookie"content="Fri,29 March 2016 9:41:06 GMT" />
<!--
強制打開新窗口--><!--很多瀏覽器沒有這個屬性,慎用--><metahttp-equiv="windows-target" content="_top" />
<!--
設置網頁的過渡效果--><!--content=" revealtrans(duration=持續時間,transition=效果編號)"慎用,有的瀏覽器不支持--><meta http-equiv="Page-Enter" content="revealtrans(duration=4,transition=21)" />


標題文字h1-h6,一個頁面有且只有一個h1,寫多了搜索引擎會找不到頁面真正的標題。特定的語義有不同的標籤:

<!--粗體斜體下劃線--><strong>粗體</strong>,<em>斜體</em>,<u>下劃線</u><!--上標、下標-->a<sub>1</sub>=X<sup>3</sup>
<!--
刪除文字--><strike>刪除文字</strike><s>刪除文字</s>普通樣式:
<br />i have a dream !!!!<br />

等寬樣式:
<br /><code>i have a dream!!!!</code><br />

<samp>i have a dream!</samp>

普通的文字放在p中就好<!--段落格式--><p>欲窮千里目,更上一層樓</p>

<!--換行標記--><br />

<!--pre:保留原始排版方式-->
<!--
居中對齊標誌--><center>居中對齊</center>
<!--
向右縮進標誌--><blockquote>錦瑟無端五十弦</blockquote><blockquote><blockquote>一弦一柱思華年</blockquote></blockquote>

網頁中的文字設置:
<!--face
:設置文字字體-->
<!--size
:字號大小是17,或者-1-7,都是參考正常標準設置的-->
<!--color
:設置文字顏色-->
<font face="
楷體" size="7" color="#CCCCCC">欲窮千里目</font>

3.4 列表標籤

列表分成有序列表、無序列表、自定義列表。列表的屬性有start、type等。可以嵌套。
<!--
無序列表-->
<ul ><li>
入門模式</li><li>初級模式</li><li>中級模式</li></ul>
<!--
有序列表,type是顯示的類型-->
<ol type="a"><li>
入門模式</li><li>初級模式</li><li>中級模式</li></ol>
<ol type="I"><li>
入門模式</li><li>初級模式</li><li>中級模式</li></ol>
<!--
有序列表的起始數值start-->
<ol type="I" start="6"><li>
入門模式</li><li>初級模式</li><li>中級模式</li></ol>
<!--
定義列表標記-->
<dl><dt>
名詞1</dt><dd>解釋</dd><dt>名詞2</dt><dd>解釋</dd></dl>
<!--
菜單標記-->
<menu><li>
無序列表</li><li>有序列表</li>  </menu>
<!--
目錄列表-->
<dir><li>
目錄列表1</li><li>目錄列表2</li></dir>
<!--
嵌套列表-->
<dl><dt>
贈孟浩然</dt><dd>作者:李白</dd><dd>詩體:五言律詩</dd><dd>吾愛孟夫子,風流天下聞</dd><dt>蜀相</dt><dd>作者:杜甫</dd><dd>詩體:七言律詩</dd><dd>
出師未捷身先死,長使英雄淚滿襟</dd></dl>
<font face="
微軟雅黑"size="4" color="darkblue">輕鬆一刻:心理測試</font>
<ul>
<li><font face="
微軟雅黑"size="2" ></font>問題1:你喜歡紅色還是綠色:</li>
</ul>
<ol type="a">
<li>
紅色</li>
<li>
黑色</li>
</ol>
</body>
</html>

3.5 超鏈接標籤

超鏈接標籤<a><a/>是最常用到的五個html標籤之一,超鏈接最好使用相對路徑。超鏈接中可以嵌套文字,實現文本超鏈接,可以嵌套圖片,實現圖片超鏈接,可以嵌套任何div。超鏈接的必寫屬性href=“某個路徑”,最好使用相對路徑,不要使用絕對路徑。target屬性規定跳向的窗口,_parent:再上一級窗口中打開,_blank:新建一個窗口打開,_self:在同一個窗口中打開,_top:在瀏覽器的整個窗口中打開,會忽略所有框架。href中出現#時表示訪問頁面中的某一部分,如下:

<!--鏈接到同一頁面的書籤-->
<a href="#sectionA">
一、    瞭解需求</a>&nbsp;&nbsp;
<a href="#sectionB">
二、切圖</a>&nbsp;&nbsp;
鏈接到不同頁面的書籤<br />
<a href="href2.html#sectionA">
一、    瞭解需求</a>&nbsp;&nbsp;
<a href="href2.html#sectionB">
二、切圖</a>&nbsp;&nbsp;<br />

<a name="sectionA">一、    瞭解需求</a><br/>

*******

<hr size="4" />
<a name="sectionB">
二、切圖</a><br />

*****

除此之外,還可以用超鏈接實現發郵件、文件下載等。

<!--外部鏈接-->
<!--http/ftp/telent/mailto-->

<br />
<!--下載文件-->
<a href="../Floder/tz.txt">
下載文件</a><br />
<!--
腳本鏈接,僅對ie有效-->
<ahref="javascript:window.close()">
關閉窗口</a><br />
<!--
空鏈接-->
<a href="#">
空鏈接</a>

3.6 圖像

首先來看基本屬性:

<!--src:地址,width:長,height;邊框:border;水平間距:hspace;垂直間距:vapace-alt:圖像的提示文字-->
<img src="../img/HBuilder.png"width="200" height="300" border="3"hspace="30" vspace="100"/>

着重看一下圖像的對齊方式:

bottom:把圖像的底部和同行文本的底部對齊

middle:把圖像的中部和同行的中部對齊

top:把圖像的頂部和文本或圖像的最高部分對齊

texttop:把圖像的頂部和同行中最高的文本頂部對齊

absmiddle:把圖像的中部和同行中最大項的中部對齊

absbottom:把圖像的底部和同行中最大項的中部對齊

baseline:把圖像的底部和文本的基準對齊

left:使圖像和左邊界對齊

right:使圖像和右邊界對齊

如何讓圖像居中,請參考頁面的佈局。

在圖像上建立熱點區域:

<!--建立熱點區域-->
<!--shape:
形狀,coords:座標-->
<!--shape
rect矩形區域,座標lefttoprightbottom-->
<!--shape
circle圓形區域,座標:center-xcenter-ytadius(半徑)-->
<!--shape:poly
多邊形,座標:順時針或者逆時針的xy的值-->
<img src="../img/tjmap.jpg"usemap="tjsmap"/>

<map name="tjsmap">
<area shape="circle"coords="10010030" href="../ListFloder/list.html" />
</map>

3.7 表單

<form></form>標籤用來創建一個表單,form的屬性中處理程序action和傳送方法method是必不可少的。

action:屬性值是程序或腳本的一個url,定義處理表單的數據腳本或程序;

name:給表單命名,不同的表單此值要有所區別;

method:定義處理程序從表單中獲得信息的方式,決定表單收集的數據以什麼方式發送到服務器。傳送方式有post和get兩種,get將表單數據與url一起發送,發送速度快,但是長度有限制;post沒有長度的限制,客戶端會通知服務器來讀取數據,缺點是速度比較慢;

enctype:編碼方式,屬性值有三種,text/plain:以純文本的形式傳送,application/x-www-form-urlencoded:默認的編碼形式,multipart/form-data:MIME編碼,上傳文件的表單必須選擇該項;

target:目標顯示方式,屬性值同於超鏈接的。

input是最常用的控制標籤,常見的文本域、按鈕等都能通過input來實現。Input的type值如下:

text:文字字段,password:密碼域,radio:單選按鈕,checkbox:複選框,button:不同按鈕,submit:提交按鈕,reset:重置按鈕,image:圖形域,也稱爲圖像按鈕,hidden:隱藏域,不在頁面上顯示,只將內容傳遞到服務器,file:文件域。

text和password都有如下三個屬性:

size:文本框在頁面中顯示的長度,以字符爲單位;

maxlength:文本框中最多可輸入的字符數;

value:文本框中的默認值

radio和checkbox,需要注意name名相同的表示一系列的,radio只可單選,checkbox可多選。checked表示被選上。

button與submit的不同之處在於,button需要添加屬性值οnclick=“處理程序”,submit不需要設置onclick屬性,在單擊時可實現表單內容的提交。

列表/菜單標記:

<!--name:菜單和列表的名稱,size:大小,multiple:多選,value:選項值,selected:默認選項-->

              <select id="myselect" size="5" multiple="multiple">

                     <option value="">北京</option>

                     <option>天津</option>

                     <option selected="selected">河北</option>

                     <option>山東</option>

              </select>

文本域標記:

<!--name="文本域名稱" value="文本域默認值"rows="行數" cols="列數"-->

<textarea name="文本域名稱" value="文本域默認值"rows="3" cols="10"></textarea>

3.8 表格

基本格式(必寫標籤):

<table>

         <thead>

                   <tr><th>..</th><th>..</th></tr>

                   <tr>…</tr>

                   …

</thead>

<tbody>

         <tr><td>..</td><td>..</td></tr>

         <tr>…</tr>

         …

</tbody>

</table>

一個表由<table>開始, </table>結束,表的內容由 <tr>,<th>和<td>定義。<tr>說明表的一個行,表有多少行就有多少個<tr>;<th>說明表的列數和相應欄目的名稱,有多少個欄就有多少個<th>;<td>則填充由<tr>和<th>組成的表格。表格、單元格的大小,表格邊框的寬度、顏色,單元格邊框的顏色都可以控制。表格的水平擺放位置是用align="#" 屬性說明的,#爲left(左對齊), right(右對齊), center(居中)。水平對齊方式,用align="#"屬性說明,#爲left(左對齊), right(右對齊), center(居中);垂直對齊方式,用valign="#"屬性說明,#爲top(上對齊), bottom(下對齊), middle(居中)。表格的背景色、背景圖片,單元格的背景色、背景圖片可變。cellspacing屬性用來指定表格各單元格之間的空隙。此屬性的參數值是數字,表示單元格間隙所佔的像素點數。 表格屬性colspan、rowspan

橫跨兩列的單元格 colspan = 2

姓名

電話

Bill Gates

555 77 854

555 77 855

橫跨兩行的單元格 rowspan = 2

姓名

Bill Gates

電話

555 77 854

555 77 855

 

3.9 層標記div

div:爲頁面分塊

span:div的子集,和div一樣,無意義

iframe:在瀏覽器中嵌套子窗口,鑑於Ajax實現了異步加載,此標籤慎用,一般跨域時才用。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章