Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537 Warning: error_log(/data/www/wwwroot/hmttv.cn/caches/error_log.php): failed to open stream: Permission denied in /data/www/wwwroot/hmttv.cn/phpcms/libs/functions/global.func.php on line 537
鏈接允許你通過單擊鏈接文本從一個頁面跳到另一個頁面,還可以跳轉到同一頁面上的其他位置(稱為片段)、你網站的不同部分或跳轉到別的網站。
link標記有兩個主要部分:用戶可以點擊的文本,以及點擊鏈接時訪問的網址。<a>和</a>標記之間是鏈接文本,通常以藍色顯示,并由瀏覽器加下劃線。href=“url”部分是網址,可以通過多種方式設置url:
鏈接到同一個網頁上的其他地方,如頁面下方的其他部分或章節,跳轉到這些部分通常是有用的,稱為鏈接到片段,瀏覽器將自動嘗試滾動到頁面該部分。
片段首先需要在網頁的某個地方定義,方法是給它們一個名稱,例如<a name=“fragment_name”>,然后使用hash(#)字符創建指向該片段的鏈接:<a href=“#fragment_name”>鏈接</a>。要鏈接到另一個頁面上的片段,只需將片段名稱附加到地址,例如:href=“example.html#fragment_name".
你可能并不總是希望為了鏈接到某個頁面并將其加載到當前窗口上。這就是target屬性派上用場的地方。通過設置target=“_BLANK”,把頁面將加載到一個新窗口(或新選項卡)。類似地,“_self”、“_parent”或“_top”將分別在當前窗口、父窗口(與框架一起使用)或頂層窗口中打開鏈接。
通過在<a>和</a>標記之間放置一個圖像標記,可以將圖像轉換為鏈接,單擊該圖像后將加載引用的頁面。你可能會注意到,當鏈接文本變為下劃線時,圖像得到一個藍色邊框。這可以通過設置圖像的border=“0”屬性或使用css來解決。
mailto符號鏈接是一種特殊的鏈接,它指示瀏覽器使用默認的電子郵件程序編寫郵件并發送到指定的地址,注意的是該操作不會自動發送任何電子郵件。
谷歌統計,全球有700多種編程語言,是不是聽上去很聳人聽聞?!現今,各種框架和各種編程語言一直是你方唱罷我登場,來來往往。
而對于HTML,不管你習慣與否,它始終在那。無論選擇哪種框架或后端語言,所有Web開發人員都必須躲不開使用HTML。個人認為,即使是實現相同的功能,最好還是使用HTML編寫,而非JS,盡管我也承認編寫HTML可能顯得比較“重體力”,而且很無聊。
HTML有如此廣泛的用途和“堅強的生命力”,仍有開發人員所不太知曉的標簽和屬性。以下是您應該了解的5個HTML標記和屬性:
懶加載避免加載瀏覽器上那些不需要去即可加載的圖像,而是當向下滑動頁面或接近圖像時,圖像才開始加載。
換句話說,當用戶下滑頁面時加載圖像,呈現他們,否則不做加載。懶加載圖像可以幫助提高網站性能和響應速度。
這可以通過HTML輕松實現,所要做的就是將loading= “lazy”屬性添加到圖像文件中。
添加屬性后,我們的圖片元素會是這樣:
<img src="image.png" loading="lazy" alt="…" width="200" height="200">
通過使用Google的Lighthouse工具,你可以get到相關的一些技巧。
相關地址:https://developers.google.com/web/tools/lighthouse/
用戶在做搜索錄入時,如果能夠拿到相關的輸入內容推薦,應該會提升使用體驗。
如今,輸入補全推薦功能是相當普遍的,你可以在天貓、頭條、抖音等太多平臺見到。你可以通過JS添加輸入補全推薦,方法是在輸入字段上設置事件偵聽,這樣能夠把搜索到的詞條與預定義推薦進行匹配。
但是,通過HTML也可以使用<datalist>標簽顯示一組預定義的補足推薦,需要注意下,此標記的ID屬性必須與輸入字段列表屬性相同。
<label for="country">Choose your country from the list:</label>
<input list="countries" name="country" id="country">
<datalist id="countries">
<option value="UK">
<option value="Germany">
<option value="USA">
<option value="Japan">
<option value="India">
</datalist>
你是否曾經遇到圖像無法按預期縮放的情況?我是遇到過的,譬如當我要使用大圖,同時把它顯示為縮略圖時,很可能會發生這種情況。
更改viewport width時,你會注意到某些圖像未按預期縮放。幸運的是,HTML通過使用<picture>標記使開發人員很容易地解決這個問題,該標記允許你添加適合不同寬度的多個圖像,而不必單個縮放。
如下所示:
<picture>
<source media="(min-width:768px)" srcset="med_flag.jpg">
<source media="(min-width:495px)" srcset="small_flower.jpg">
<img src="high_flag.jpg" alt="Flags" style="width:auto;">
</picture>
如你看到的,我們指定了必須顯示特定圖像的最小寬度。
這個標簽和<audio>和<video>標簽非常相似。
在創建網站索引或站點地圖的時候,這應該算是我最喜歡的標簽之一。
如果我們有很多錨標簽重定向到某個URL,并且所有URL都以相同的base address開頭時,這個標簽應該非常有用。
例如,如果我要指定zhang san和wang er的微博handles的URL,則URL的開頭會相同,而其后是它們各自的ID。通常,我必須將鏈接與相同的域名一起粘貼兩次。
不過,HTML有一個<base> tag,這使我可以設置基本URL的標記,如下所示:
<head>
<base href="https://www.weibo.com/" target="_blank">
</head>
<body>
<img src="zhangsan" alt="Zhang San">
<a href="wanger">Wang Er</a>
</body>
上面的代碼將生成一個圖像重定向到“ https://www.weibo.com/zhangsan”和一個錨標記重定向到“ https://www.weibo.com/wanger”。
這個<base> tab應該要么是具有“href”或是所提供對象的屬性。
如果要把用戶重定向到另一個頁面,那么是可以用純HTML來輕松實現的。
過往你打開某些網站的時,可能注意到了這個功能:彈出“你會在5秒鐘內被重定向”。
你是可以通過<meta> tab,并對它進行設置http-equiv= “refresh”從而使用它。
<meta http-equiv="refresh" content="4; URL='https://google.com' />
在此,content屬性指定重定向發生的秒數。
HTML加CSS是很強大,我們其實是可以僅使用它們兩就構建出像樣的網站的,只要你足夠沉浸于其中,不斷學習。
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全景制作-桔子科技公司為您整理!
*請認真填寫需求信息,我們會在24小時內與您取得聯系。