整合營銷服務商

          電腦端+手機端+微信端=數據同步管理

          免費咨詢熱線:

          html基礎必備-必需標記,前端小白一看就會

          需HTML標記

          有四組必需的HTML標記來構成每個HTML文件的基本結構:

          • <html></html>
          • <head></head>
          • <title></title>
          • <body></body>

          定義 - <html> </html>

          標記html定義一個網頁文檔。它標識了HTML文檔的開始和結束。所有其他標記必須位于html標記之間。

          頁眉/頭部 - <head> </head>

          標記head包含關于文檔的信息,這些信息不會出現在實際頁面上,例如文檔的標題、作者、使用的樣式表以及元標記。

          標題 - <title> </title>

          標記title標記定義網頁在web瀏覽器標題欄中的標題。標題必須出現在head標記之間。

          正文 - <body> </body>

          標記body包含頁面上的所有信息和其他可見內容。所有圖像、鏈接和純文本必須位于<body>和</body>標記之間。

          這四個標記很特別。每個只能有一組,并且它們必須按照下面示例中的正確順序排列。

          例子

          下面是一個基本的html文檔。請注意,所有內容都在html標記之間,標題出現在文檔的頭部,而正文位于頭部之后:

          瀏覽器顯示內容如下所示:

          .注釋標記(<!--…-->)

          語法: <!--注釋內容-->

          2.文件標記(<html>…</html>)

          語法: <html>…</html>

          說明:<html>這對標記是HTML文件的標記。<html>處于文件的最前面,表示HTML文件的開始。即瀏覽器從<html>標記開始解釋,直到遇到</html>標記為止。

          3.文件頭標記(<head>…</head>)

          語法: <head>…</head>

          說明:

          ①由head這組標記定義的元素中,并不放置網頁的任何內容,是放置關于這份HTML文件的信息。就是說,它并不屬于HTML文件的主體,它包含文件的標題、編碼方式和URL等。這些信息大部分用于提供索引、辨認或其他應用。

          ②這對標記在HTML文件中并不是必需的。如果某個HTML文件并不需要提供相關信息,則可省略<head>標記。

          4.文件標題標記(<title>…</title>)

          語法: <title>文件標題文字</title>

          說明:此標記用于設定HTML文件的標題名稱,它將顯示在瀏覽器的標題欄中。

          注意:<title>標記用于<head>標記中。但如果HTML文件中沒有使用<head>標記,則<title>標記仍然起作用。

          5.文件主體標記(<body>…</body>)

          語法: <body>…</body>

          說明:

          ①由<body>標記所建立的元素是HTML文件的內容主體,也是HTML文件的重點所在。HTML文件中要顯示在網頁上的所有內容,也都放置在這個元素中。

          ②<body>具有一些特殊的屬性,可以設定背景及字符顏色等。

          TML是一種標記語言,描繪文檔如何格式化,如使用什么字體等。使用標記語言,而不是顯式的標記,可以在寫瀏覽器時更方便:瀏覽器只要能理解這些標記命令就行。這種方式以所見即所得的系統相反,如WORD,它用隱含的嵌入標記保存文件,并用于以后再生。asp網站教程以下介紹HTML語言。

          在HTML文件中嵌入標記命令,并使之標準化,使Web瀏覽器能夠讀并再格式化任何Web頁,這點非常重要,因為頁面可能在1024*768、24顯示器上產生,而要在640*480、8位色下顯示。在Web上無法使用所見即所得的字處理器,因為它們內部的標記語言沒有標準化,而且也不能在不同尺寸的不同顯示環境下再次格式化。但是,字處理器的文本通常可以保存為HTML格式。

          Web頁由頭和體構成,以<HTML>和</HTML>標記括起來。頭在<HEAD>和</HEAD>中,體在<BODY>和</BODY>中,標記中的命令叫directive。大多數標記都是這種格式:即以<SOMETHING>標記某事的開始,以</SOMETHING>標記該事的結束。標記大小寫均可。

          HTML忽略多余的空格和回車,因此不能用空行來分開段落,必須用顯式的標記。

          一些標記攜帶參數,如: <IMG SRC=”abc” ALT=”foobar”>

          其中參數SRC等于abc,ALT等于foobar,由于參數是命名的,所以順序無關緊要。

          1、創建基本的網頁

          請看下面這段語句:

          <!-- I am ignored by everybody -->

          <HTML>

          <HEAD>

          <TITLE> Less Minimal </TITLE>

          </HEAD>

          <BODY>

          Hello World!

          </BODY>

          </HTML>

          如果在瀏覽器中顯示這個網頁,將會顯示“Hello, world!”。由<TITLE>及</TITLE>標記包含的文本只出現在網絡瀏覽器的標題欄上,而不在網頁上出現。〈BODY〉標記表明了你的HTML文件的主體部分,所有需要在的瀏覽器上顯示的文本及標記都應該被放置在這里。例如,Hello World! 被放置在此。標記<!……>被用來在文件中加入注釋,這些注釋并不在主頁上顯示出來。

          基本的常用標記:

          <BR> 能顯示多行文本,但它不是一個容器標記,就是說,并不需要類似</BR>的符號。

          被稱為段落標記,因為用它來創建段落,與<BR>相比,兩行之間會有較多的空格。缺省情況下,<P>使文本在屏幕上左對齊,因此你不需要在你HTML文件中使用<P ALIGN="LEFT">。

          <PRE> 假如你有一些文本讓它們在屏幕上精確的顯示出來,或是你想讓每個輸 入的空格正如您所料的那樣顯示,可以將文本放入其中。但是當在瀏覽顯示處于<PRE>標記中的文本時,這些文本顯示出來非常難看,不易閱讀。因此,盡可能不要使用它。這樣使用低分辨率屏幕的用戶將會減少麻煩。

          <HR> 用來建立水平分隔線――用來在屏幕上分割文本的水平線。例如:<HR WIDTH=”640”>或<HR WIDTH=”100%”>。

          <FONT> 用來定義字體,它具有三個屬性:SIZE、COLOR和FACE。其中FACE,可以指定文本的字體,例如<FONT FACE=”Courier”>。

          <H(1-6)> 加入標題。通過給標記指定不同的數字來規定他們的大小,有6種大小的標題。例如由<H1>包含的文字在在瀏覽器上顯示是最大的,而由<H^>包含的文字顯示出來最小。

          使文字以黑體顯示。

          讓文字以斜體顯示。

          加下劃線。原則上不要去使用<U>標記,通常網頁中帶下劃線的文字表示這是一個超連接,使用<U>會給用戶帶來困惑。

          加刪除線。

          <A> 用來建立一個超文本定位器。如<A HREF=http://www.hotwired.com> HotWired </A>,瀏覽器上顯示出的HotWired帶有一道下劃線,這就告訴用戶這是一個超連接,如果用鼠標點擊這個字符,那么HotWired網點的主頁就會在你的瀏覽器上顯示出來。也可以用圖象來建立連接,如:<A HREF=”http://www.yahoo.com”><IMG SRC=”myimage.gif”></A>

          2、創建表單(form)

          要建立一個交互式的網點,需要使用HTML表單,它可以收集參觀你網點的用戶提供的信息,并對此作出反應。使用表單,可以建立類似復選框、單選按鈕及文本框的控件。

          掌握表單的使用對高效的Active Server Pages編程是必需的。ASP腳本的一個主要功能是對HTML表單中輸入的信息進行處理,因此,表單是ASP應用程序中主要的用戶接口。

          要建立HTML表單,可以使用<FORM>標記,它是一個容器標記,包含其它表單元素并在它的屬性中指明對于此表單中收集的信息應怎樣處理。需要注意:

          1)要知道表單何時輸入信息完畢,需要加入一個表單元素:submit按鈕。

          2)必須通過<FORM>的ACTION屬性來通知表單怎樣處理這些信息。ACTION屬性決定了窗體對輸入的信息將會采取何種方式處理。通常是處理程序名。

          3)<FORM>的METHOD屬性指明窗體信息通過什么方式送出。通常為POST。

          4)正如在文件主體中使用HTML標記一樣,也可以在<FORM>標記中使用幾乎所有的HTML標記。

          基本的表單元素有:

          1)文本框:用<INPUT>標記來建立,一般需要包含NAME屬性。下面的例子包含了兩個名為text1和text2的文本框:

          <HTML>

          <HEAD>

          <TITLE> Simple Form </TITLE>

          </HEAD>

          <BODY >

          <FORM ACTION=“somedirectory/mypage.asp” METHOD=“POST”>

          <INPUT NAME=“text1” TYPE=“text”>

          <INPUT NAME=“text2”>

          <INPUT TYPE=SUBMIT VALUE=”Submit Me!”>

          </FORM>

          </BODY>

          </HTML>

          也可以使用<INPUT>的VALUE屬性來指定在用戶輸入前缺省狀態下文本框中顯示的文字。例如,假設你有一個文本框,讓用戶在其中輸入他的國別,你預計你的大部分用戶都是美國人,你可以使用下面的語句將缺省國別設為美國:

          <INPUT NAME=“country” VALUE=“USA”>

          當你顯示這個后的HTML文件時,出現了一個具有Submit Me!文字的按鈕,用鼠標點擊這個Submit Me!按鈕,你就表明你已經在這個文本框中輸入完信息了。這就通知瀏覽器它應該對輸入的信息進行處理。

          2)按鈕。在HTML窗體中典型使用的按鈕有三種:

          第一種是Submit按鈕,當你點擊Submit按鈕時,窗體由<FORM>的ACTION屬性所指定的程序進行處理;Submit按鈕的用法如下所示:

          <INPUT TYPE=SUBMIT VALUE=“Do it!”> VALUE屬性的值決定了在按鈕上顯示的文字。

          第二種是圖形按鈕,與Submit按鈕的效果幾乎是一樣的,然而這種類型的按鈕顯示出來是一幅圖象,而不是一個難看的灰色矩形框,如

          <INPUT TYPE=IMAGE SRC=“myimage.gif” BORDER=0>

          應當把BORDER屬性的值設為零,來隱藏在諸如Netscape Navigator這樣的瀏覽器上顯示時,會出現在圖象周圍的黑框。

          最后一種按鈕類型是reset按鈕。當用戶點擊reset按鈕后,所有的窗體內容都恢復到它們初始的值。例如,沒有缺省值的文本框將被清空,而用VALUE屬性指定了值的將回到初始的特定值。與Submit按鈕的情況一樣,通過VALUE屬性指定顯示在reset按鈕上的文字。如:

          <INPUT TYPE=RESET VALUE=“Clear Me!”>

          窗體用戶點擊標有Clear Me!的按鈕后,所有窗體值都被清除并回到初始狀態的值。

          3)密碼框:假設想讓用戶在參觀你的網點之前先進行注冊,使用通常的文本框,你可以建立一個HTML窗體來獲得用戶的名字和密碼,但是你不想讓用戶在輸入他們的密碼時,有人在他們的背后偷看。要保護用戶的密碼,就要使用密碼輸入框。密碼框的工作原理與文本框類似,只是當信息輸入時是隱藏的。如:

          <FORM ACTION=“somedirectory/mypage.asp” METHOD=“POST”>

          Please enter your name and password:

          <BR> Name: <INPUT NAME=“username”>

          <BR> Password: <INPUT NAME=“password” TYPE=PASSWORD>

          <INPUT TYPE=SUBMIT VALUE=“Continue”>

          </FORM>

          當上例的HTML文件在網絡瀏覽器上顯示時,你可以在密碼框中輸入文字,就如同在一般的文本框中輸入一樣。然而,所有輸入的文字都被隱藏了(通常是*號)。

          4)復選框:可用一個名字來建立多個復選框來收集信息。例如,你想知道參觀你網點的人是如何發現它的,而且你想提供用戶發現你網點的各種可能途徑,你可以使用下列的HTML代碼:

          <FORM ACTION=“somedirectory/mypage.asp” METHOD=“POST”>

          <BR> How did you find out about this web site?

          <BR> Magazine: <INPUT NAME=“discover” TYPE=CHECKBOX VALUE=“Magazine”>

          <BR> Search Engine: <INPUT NAME=“discover”TYPE=CHECKBOX VALUE=“Search”>

          <BR> Friend: <INPUT NAME=“discover” TYPE=CHECKBOX VALUE=“Friend”>

          <BR> <INPUT TYPE=SUBMIT VALUE=“Submit Me!”>

          </FORM>

          5)單選按鈕:你可以在多個值之間進行選擇,然而與復選框不同,用戶一次只能選擇一個單選按鈕。例如,假設你需要知道瀏覽你網頁的人的性別,你就可以使用單選按鈕來讓用戶選擇他們的性別。下面的例子說明了怎樣去做:

          <FORM ACTION=“somedirectory/mypage.asp” METHOD=“POST”>

          <BR> Please indicate your sex:

          <BR> Male: <INPUT NAME=“sex” TYPE=RADIO VALUE=“male”>

          <BR> Female: <INPUT NAME=“sex” TYPE=RADIO VALUE=“female”>

          <BR> <INPUT TYPE=SUBMIT VALUE=“Submit Me!”>

          </FORM>

          6)下拉式列表框:顯示一個選擇菜單,可以用來代替復選框和單選按鈕。使用<SELECT>和<OPTION>標識符來建立一個下拉式列表框,象下面的例子:

          <FORM ACTION=“somedirectory/mypage.asp” METHOD=“POST”>

          <BR> Please indicate your sex:

          <BR> <SELECT NAME=“sex”>

          <OPTION VALUE=“Is Male”>Male

          <OPTION VALUE=“Is Female”>Female

          </SELECT>

          <INPUT TYPE=SUBMIT VALUE=“Submit Me!”>

          </FORM>

          <SELECT>的SIZE屬性可以將一個下拉式列表框轉變成一個滾動列表框,SIZE屬性指定了一次在屏幕上可顯示多少選項。

          建立表格

          由三個標記共同完成的<TABLE>、<TR>和<TD>。

          <TABLE>的BORDER屬性在表格周圍顯示一個邊框,可以通過為BORDER屬性設置不同的值來改變邊界的寬度。顯然,如果不使用BORDER屬性,顯示出來的表格就沒有邊界。

          <TR>標記為表格添加一行。

          <TD>標記用來包含實際的表格數據。可以將<TD>看作表格的列標記,表格可以根據需要設置許多列。<TD>標識符可以包含任意可在HTML文件主體中出現的標識符。例如,<TD>可以包含圖象、超鏈接和窗體,甚至它還可以包含其它表格。

          建立表格時,一般你應當先建立行,然后在行中建立列。

          例如,要建立一個許多城市及其區域編碼的表格,可以使用下面的方法實現:

          <TABLE BORDER=1>

          <TR>

          <TD> Boston </TD>

          <TD> 617 </TD>

          </TR>

          <TR>

          <TD> Modesto </TD>

          <TD> 209 </TD>

          </TR>

          <TR>

          <TD> San Francisco </TD>

          <TD> 415 </TD>

          </TR>

          </TABLE>

          在此例中,<TR>用來建立三個行,每一行對應一個城市;每一行又用<TD>標識符建立了兩列,用來存放城市名及其編碼。

          使用窗口和框架

          框架可以看作是窗口中的不同區域,一個瀏覽器窗口可以根據你的需要分成任意多的框架,一個單個的框架也可以分成其它多個框架,即所謂的嵌套框架。

          要在瀏覽器窗口中建立框架,必須創建一個特殊的HTML文件稱作frameset文件。frameset文件本身并不在網絡瀏覽器中出現,它只是指明其它的網頁是怎樣顯示在瀏覽器中的。下面是一個簡單的frameset文件的例子:

          <FRAMESET ROWS=“100%” COLS=“50%,50%”>

          <FRAME SRC=“mypage1.cfm”>

          <FRAME SRC=“mypage2.cfm”>

          </FRAMESET>

          當這個frameset文件讀入瀏覽器中時,瀏覽器會顯示兩個HTML文件mypage1.cfm和mypage2.cfm,它們都是普通的HTML文件,frameset文件通知瀏覽器這兩個文件應當分別顯示在兩個框架中。

          <FRAMESET>標識符指定了框架在瀏覽器窗口中顯示的方式,這個標識符將瀏覽器窗口分成多行和多列。在此例中,瀏覽器窗口被分成一行和兩列,屬性ROWS=“100%”,使框架具有整個瀏覽器窗口的高度;屬性COLS=“50%,50%”使框架分成兩列,每列都具有窗口寬度的一半。

          本文是成都網站建設公司、成都網站設計制作公司、成都APP開發公司、成都響應式網站建設、成都VR全景制作-桔子科技公司為您整理!


          主站蜘蛛池模板: 久久一区二区三区99| 亚洲第一区在线观看| 全国精品一区二区在线观看| 国产一区二区女内射| 国产精品一区二区电影| 福利一区二区三区视频在线观看| 国产日韩视频一区| 日韩成人无码一区二区三区| 日韩精品一区二区三区大桥未久| www亚洲精品少妇裸乳一区二区 | 亚州AV综合色区无码一区| 丰满少妇内射一区| 91国在线啪精品一区| 国产日韩高清一区二区三区| 精品一区中文字幕| 天码av无码一区二区三区四区| 国产精品久久久久久一区二区三区 | 日本在线视频一区二区三区| 亚洲国产一区在线观看| 久久精品一区二区三区资源网| 日韩精品一区二区三区影院| 日本精品啪啪一区二区三区| 国产情侣一区二区| 夜夜高潮夜夜爽夜夜爱爱一区| 无码国产精品一区二区免费式影视| 色欲综合一区二区三区| 亚洲美女一区二区三区| 一区一区三区产品乱码| 麻豆精品人妻一区二区三区蜜桃| 无码人妻精品一区二区三区久久久 | 国产一区三区二区中文在线| 久久99久久无码毛片一区二区| 一区二区三区四区在线视频| 国产一区在线电影| 能在线观看的一区二区三区| 春暖花开亚洲性无区一区二区| 国产一区美女视频| а天堂中文最新一区二区三区| 亚洲国产成人久久一区久久| 亚洲日本一区二区三区在线不卡| 精品一区二区三区水蜜桃|