整合營銷服務商

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

          免費咨詢熱線:

          網頁前端設計-06Html基礎-段落標簽和水平分割線

          <script src="https://lf3-cdn-tos.bytescm.com/obj/cdn-static-resource/tt_player/tt.player.js?v=20160723"></script>

          標題標簽

          h1-h6 塊元素 獨立成行 行間距

          屬性 align屬性left center right

          也沒有color屬性,需要用的話需要嵌套

          水平分割線標簽hr

          有color屬性

          size屬性高度

          width屬性寬度

          align屬性對齊方式 默認居中

          html文本格式化:文章主要講解HTML文本格式化相關的一些知識點:如何使用一些HTML標簽來進行基本的格式化,

          例如使用<p>標簽包裹段落,<strong>標簽加粗文本等。需要注意的是,在進行HTML文本格式化時,應遵循語義化的原則,盡可能地使用具有明確含義的標簽來描述內容,而不是僅僅為了樣式而使用標簽。



          標題和段落

          HTML提供了六個級別的標題,從<h1>到<h6>。

          <h1>標記用于頁面上最重要的標題,而<h6>標記用于最不重要的標題。 以下是如何使用<h1>標記創建頂級標題的示例:

          <h1>This is a top-level heading.</h1>
          

          要用HTML創建一個段落,可以使用<p>標記。 段落的實際內容將被放置在開始和結束<p>標簽之間,如下所示:

          <p>This is a paragraph of text.</p>
          

          粗體和斜體

          要使HTML中的文本加粗,可以使用<strong>標記或<b>標記。

          這兩個標記都用于指示所包含的文本應以粗體顯示。

          這兩個標簽的區別在于,<strong>用于表示文本非常重要,而<b>用于表示出于風格目的,文本只是粗體。

          以下是如何使用<strong>標記將文本加粗的示例:

          <p><strong>This text is bold.</strong></p>
          

          要使HTML中的文本變為斜體,可以使用<em>標記或<i>標記。 這兩個標記都用于指示所包含的文本應以斜體顯示。

          這兩個標簽之間的差異類似于<strong>和<b>之間的差異<em>用于表示文本是強調的,而<i>用于表示出于風格目的,文本只是斜體。

          以下是如何使用<em>標記使文本變為斜體的示例:

          <p><em>This text is italic.</em></p>
          

          下劃線和刪除線

          要在HTML中給文本加下劃線,可以使用值為underline的CSS文本裝飾屬性。下面是一個例子:

          <p style="text-decoration: underline;">This text is underlined.</p>
          

          要在HTML中創建刪除線文本,可以使用值為line-through的CSS文本裝飾屬性。下面是一個例子:

          <p style="text-decoration: line-through;">This text has a strikethrough.</p>
          

          超鏈接

          您可以使用<a>標記在HTML中創建超鏈接。href屬性指定鏈接應指向的URL。以下是一個示例:

          <a href="https://www.example.com">This is a hyperlink.</a>
          

          圖像標簽

          對于圖像,可以使用<img>標記。src屬性指定圖像文件的URL,alt屬性為看不到圖像的用戶提供替代文本。下面是一個例子:

          <img src="path/to/image.jpg" alt="This is an image.">
          

          列表標簽

          對于列表,HTML提供了幾個標記,包括用于無序列表的<ul>和用于有序列表的<ol>。下面是一個無序列表的例子:

          <ul>
            <li>Item 1</li>
            <li>Item 2</li>
            <li>Item 3</li>
          </ul>
          

          下面是一個有序列表的例子:

          <ol>
            <li>First item</li>
            <li>Second item</li>
            <li>Third item</li>
          </ol>
          

          表格標簽

          您可以使用<table>標記。在表中,可以使用<tr>標記定義行,使用<td>標記定義每行中的單元格。下面是一個例子:

          <table>
            <tr>
              <td>Row 1, Column 1</td>
              <td>Row 1, Column 2</td>
            </tr>
            <tr>
              <td>Row 2, Column 1</td>
              <td>Row 2, Column 2</td>
            </tr>
          </table>

          總結

          以上就是今天要講的內容,本文簡單介紹了HTML的文本格式化知識點,更多內容可以查看THTML官方文檔

          如果覺得有用,歡迎明天再來,繼續合集的下一篇文章學習
          遇到問題,私信我!!~~

          人在51RGB網學習HTML+CSS基礎課程,記錄一些文字,方便自己回憶,也希望對大家有所幫助

          基礎框架

          <!DOCTYPE HTML>

          <html>

          <head>

          <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

          <title>標題標簽</title>

          </head>

          <body>

          <h1>了不起的蓋茨比</h1>

          <p>《了不起的蓋茨比》為那個奢靡年代的縮影。蓋茨比懷揣著對"美國夢"的期翼,投身到那個年代的燈紅酒綠之中,卻在名利場中看盡世態炎涼,以及浮華背后一切終將逝去的空虛悵惘。1925年《了不起的蓋茨比》問世。

          </p>

          </body>

          </html>

          了解HTML的代碼注釋

          什么是代碼注釋?代碼注釋的作用是幫助程序員標注代碼的用途,過一段時間后再看你所編寫的代碼,就能很快想起這段代碼的用途。代碼注釋不僅方便程序員自己回憶起以前代碼的用途,還可以幫助其他程序員很快的讀懂你的程序的功能,方便多人合作開發網頁代碼。

          語法:

          <!--注釋文字 -->

          認識標簽<head>

          文檔的頭部描述了文檔的各種屬性和信息,包括文檔的標題等。絕大多數文檔頭部包含的數據都不會真正作為內容顯示給讀者。

          <head> <title>...</title> <meta> <link> <style>...</style> <script>...</script></head>

          <title>標簽

          在<title>和<title>標簽之間的文字內容是網頁的標題信息,它會出現在瀏覽器的標題欄中。網頁的title標簽用于告訴用戶和搜索引擎這個網頁的主要內容是什么,搜索引擎可以通過網頁標題,迅速的判斷出網頁的主題。每個網頁的內容都是不同的,每個網頁都應該有一個獨一無二的title。

          例如:

          <head> <title>helloworld</title></head>

          <title>標簽的內容“hello world”會在瀏覽器中的標題欄上顯示出來,如下圖所示

          <body>標簽,網頁上顯示的內容放在這里

          在網頁上要展示出來的頁面內容一定要放在body標簽中。如下圖是一個新聞文章的網頁。

          開始學習<p>標簽,添加段落

          如果想在網頁上顯示文章,這時就需要<p>標簽了,把文章的段落放到<p>標簽中。

          語法:<p>段落文本</p>

          注意一段文字一個<p>標簽,如在一篇新聞文章中有3段文字,就要把這3個段落分別放到3個<p>標簽中。如下圖所示。

          了解<hx(1-6)>標簽,為你的網頁添加標題

          文章的段落用<p>標簽,那么文章的標題用什么標簽呢?在本節我們將使用<hx>標簽來制作文章的標題。標題標簽一共有6個,h1、h2、h3、h4、h5、h6分別為一級標題、二級標題、三級標題、四級標題、五級標題、六級標題。并且依據重要性遞減。<h1>是最高的等級。

          語法:<hx>標題文本</hx> x:1-6

          注意:因為h1標簽在網頁中比較重要,所以一般h1標簽被用在網站名稱上。騰訊網站就是這樣做的。如:<h1>騰訊網</h1>

          h1-h6標簽的默認樣式:

          標簽代碼:

          在瀏覽器中顯示的樣式:

          加入強調語氣,使用<strong>和<em>標簽

          有了段落又有了標題,現在如果想在一段話中特別強調某幾個文字,這時候就可以用到<em>或<strong>標簽但兩者在強調的語氣上有區別:

          • <em>表示強調,在瀏覽器中<em>默認用斜體表示

          • <strong>表示更強烈的強調,在瀏覽器中<strong>用粗體表示。

          • 兩個標簽相比,目前國內前端程序員更喜歡使用<strong>表示強調。

          在瀏覽器中默認樣式是有區別的:

          瀏覽器中的樣子,如下圖。

          語法:

          <em>需要強調的文本</em>

          <strong>需要強調的文本</strong>

          栗子:

          在網上商城中,某產品的打折后的價格是需要強調的。如下圖。

          代碼實現:

          使用<span>標簽為文字設置單獨樣式

          語法:<span>文本</span>

          我們對<em>、<strong>、<span>這三個標簽進行一下總結:

          1. <em>和<strong>標簽是為了強調一段話中的關鍵字時使用,它們的語義是強調。

          2. <span>標簽是沒有語義的,它的作用就是為了設置單獨的樣式用的。

          如果現在我們想把上一小節的第一段話“美國夢”三個字設置成blue(藍色),但注意不是為了強調“美國夢”,而只是想為它設置和其它文字不同的樣式(并不想讓屏幕閱讀器對“美國夢”這三個字加重音讀出),所以這樣情況下就可以用到<span>標簽了。如下面例子:

          <p>1922年的春天,一個想要成名名叫<em>尼克?卡拉威</em>(托比?馬奎爾TobeyMaguire飾)的作家, 離開了美國中西部,來到了紐約。那是一個道德感漸失,爵士樂流行,走私為王,<strong>股票</strong>飛漲的時代。 為了追尋他的<span>美國夢</span>,他搬入紐約附近一海灣居住。</p>

          我們如果想設置“美國夢”三個字設置成blue(藍色),只需要在<style>標簽中加入:

          span{color:blue; }

          css部分,以后會聊,你能大概明白span就是能干單獨設置樣式的活,就ok了

          <q>標簽,短文本引用

          想在你的html中加一段引用嗎?比如在你的網頁的文章里想引用某個作家的一句詩,這樣會使你的文章更加出彩,那么<q>標簽是你所需要的。

          語法:<q>引用文本</q>

          <p>最初知道莊子,是從一首詩<q>莊生曉夢迷蝴蝶。望帝春心托杜鵑

          </q>開始的。雖然當時不知道是什么意思,只是覺得詩句挺特別。

          后來才明白這個典故出自是莊子的《逍遙游》,《逍遙游》代表了莊子思想的最高境界,是對世俗社會的功名利祿及自己的舍棄。

          </p>

          講解:

          1. 在上面的例子中,“莊生曉夢迷蝴蝶。望帝春心托杜鵑。” 這是一句詩歌,出自晚唐詩人李商隱的《錦瑟》 。因為不是作者自己的文字,所以需要使用實現引用。

          2. 注意要引用的文本不用加雙引號,瀏覽器會對q標簽自動添加雙引號。

          下圖是代碼顯示結果:

          注意這里用標簽的真正關鍵點不是它的默認樣式雙引號(如果這樣我們不如自己在鍵盤上輸入雙引號就行了),而是它的語義:引用別人的話。

          <blockquote>標簽,長文本引用

          <blockquote>的作用也是引用別人的文本。但它是對長文本的引用,如在文章中引入大段某知名作家的文字,這時需要這個標簽。

          等等,上一節<q>標簽不是也是對文本的引用嗎?不要忘記<q>標簽是對簡短文本的引用,比如說引用一句話就用到<q>標簽。

          如想在我的文章中引用李白《關山月》中的詩句,因為引用文本比較長,所以使用

          <blockquote>。

          語法:<blockquote>引用文本</blockquote>

          如下面例子:

          <blockquote> 明月出天山,蒼茫云海間。長風幾萬里,吹度玉門關。漢下白登道,胡窺青海灣。由來征戰地,不見有人還。戍客望邊色,思歸多苦顏。高樓當此夜,嘆息未應閑。 </blockquote>

          瀏覽器對<blockquote>標簽的解析是縮進樣式。如下圖所示:

          使用<br>標簽分行顯示文本

          例子,我們想讓一首詩顯示得更美觀些,如顯示下面效果:

          怎么可以讓每一句詩詞后面加入一個折行呢?那就可以用到<br />標簽了,在需要加回車換行的地方加入<br />,<br />標簽作用相當于word文檔中的回車。

          代碼改為:

          <h2>《詠桂》</h2> <p>暗淡輕黃體性柔,<br/>情疏跡遠只香留。<br/>何須淺碧深紅色,<br/>自是花中第一流。

          詩文在瀏覽器中顯示為:

          為你的網頁中添加一些空格

          在html代碼中輸入空格、回車都是沒有作用的。要想輸入空格,必須寫入。不要忘了那個分號

          在html代碼中輸入空格是不起作用的,如下代碼。

          在瀏覽中顯示,還是沒有空格效果。

          輸入空格的正確方法:

          在瀏覽器中的顯示出來的空格效果。如下圖所示。

          認識<hr>標簽,添加水平橫線

          在信息展示時,有時會需要加一些用于分隔的橫線,這樣會使文章看起來整齊些。如下圖所示:

          語法:

          • html4.01版本<hr>

          • xhtml1.0版本<hr />注意:

          • <hr />標簽和<br />標簽一樣也是一個空標簽,所以只有一個開始標簽,沒有結束標簽。

          • <hr />標簽的在瀏覽器中的默認樣式線條比較粗,顏色為灰色,可能有些人覺得這種樣式不美觀,沒有關系,這些外在樣式在我們以后學習了css樣式表之后,都可以對其修改。

          • 大家注意,現在一般使用 xhtml1.0 的版本(其它標簽也是),這種版本比較規范。

          <address>標簽,為網頁加入地址信息

          一般網頁中會有一些網站的聯系地址信息需要在網頁中展示出來,這些聯系地址信息如公司的地址就可以<address>標簽。也可以定義一個地址(比如電子郵件地址)、簽名或者文檔的作者身份。栗子:

          <address>本文的作者:<ahref="mailto:zhaoliangsyn@163.com">zhaolion</a></address>

          想加入一行代碼嗎?使用<code>標簽

          在介紹語言技術的網站中,避免不了在網頁中顯示一些計算機專業的編程代碼,當代碼為一行代碼時,你就可以使用<code>標簽了,如下面例子:

          <code>var i = a + b;</code>

          注意:在文章中一般如果要插入多行代碼時不能使用<code>標簽了。如果是多行代碼,可以使用<pre>標簽。

          使用<pre>標簽為你的網頁加入大段代碼

          在上節中介紹加入一行代碼的標簽為<code>,但是在大多數情況下是需要加入大段代碼的,如下圖:

          怎么辦?不會是每一代碼都加入一個<code>標簽吧,沒有這么復雜,這時候就可以使用<pre>標簽。

          語法:<pre>語言代碼段</pre>

          <pre>標簽的主要作用:預格式化的文本。被包圍在 pre 元素中的文本通常會保留空格和換行符。如下代碼:

          <pre> varmessage="歡迎"; for(vari=1;i<=10;i++) { alert(message); } </pre>

          在瀏覽器中的顯示結果為:

          在上面的例子中可以看到代碼中的空格,換行符都保留下來。如果用以前的方法,回車需要輸入<br>簽,空格需要輸入

          注意:<pre>標簽不只是為顯示計算機的源代碼時用的,在你需要在網頁中預顯示格式時都可以使用它,只是<pre>標簽的一個常見應用就是用來展示計算機的源代碼。

          使用<ul>,添加新聞信息列表

          在瀏覽網頁時,你會發現網頁上有很多信息的列表,如新聞列表、圖片列表,如下圖所示。

          這些列表就可以使用ul-li標簽來完成。ul-li是沒有前后順序的信息列表。

          語法:

          <ul> <li>信息</li> <li>信息</li> ......</ul>

          舉例:

          <ul> <li>精彩少年</li> <li>美麗突然出現</li> <li>觸動心靈的旋律</li></ul>

          ul-li在網頁中顯示的默認樣式一般為:每項li前都自帶一個圓點,如下圖所示:

          使用<ol>,添加順序列表

          如果想在網頁中展示有前后順序的信息列表,怎么辦呢?如,當當網上的書籍熱賣排行榜,如下圖所示。這類信息展示就可以使用<ol>標簽來制作有序列表來展示。

          語法:

          <ol> <li>信息</li> <li>信息</li> ......</ol>

          舉例:

          下面是一個熱點課程下載排行榜:

          <ol> <li>前端開發面試心法</li> <li>零基礎學習html</li> <li>JavaScript全攻略</li></ol>

          <ol>在網頁中顯示的默認樣式一般為:每項<li>前都自帶一個序號,序號默認從1開始,如下圖所示:

          初識div

          認識div在排版中的作用

          在網頁制作過程過中,可以把一些獨立的邏輯部分劃分出來,放在一個<div>標簽中,這個<div>標簽的作用就相當于一個容器。

          語法:<div>…</div>

          確定邏輯部分:

          什么是邏輯部分?它是頁面上相互關聯的一組元素。如網頁中的獨立的欄目版塊,就是一個典型的邏輯部分。如下圖所示:圖中用紅色邊框標出的部分就是一個邏輯部分,就可以使用<div>標簽作為容器。

          給div命名,使邏輯更加清晰

          在上一小節中,我們把一些標簽放進<div>里,劃分出一個獨立的邏輯部分。為了使邏輯更加清晰,我們可以為這一個獨立的邏輯部分設置一個名稱,用id屬性來為<div>提供唯一的名稱,這個就像我們每個人都有一個身份證號,這個身份證號是唯一標識我們的身份的,也是必須唯一的。

          如下兩圖進行比較,如果設計師把兩個圖給你,哪個圖你看上去能更快的理解呢?是不是右邊的那幅圖呢。

          語法:<div id="版塊名稱">…</div>

          table標簽,認識網頁上的表格

          table標簽 = 我們平時看到到表格

          有時候我們需要在網頁上展示一些數據,如某公司想在網頁上展示公司的庫存清單。如下表:

          想在網頁上展示上述表格效果可以使用以下代碼:

          創建表格的四個元素:table、tbody、tr、th、td

          1. <table>…</table>:整個表格以<table>標記開始、</table>標記結束。

          2. <tbody>…</tbody>:當表格內容非常多時,表格會下載一點顯示一點,但如果加上<tbody>標簽后,這個表格就要等表格內容全部下載完才會顯示。

          3. <tr>…</tr>:表格的一行,所以有幾對tr 表格就有幾行。

          4. <td>…</td>:表格的一個單元格,一行中包含幾對<td>...</td>,說明一行中就有幾列。

          5. <th>…</th>:表格的頭部的一個單元格,表格表頭。

          6. 表格中列的個數,取決于一行中數據單元格的個數。

          上述代碼在瀏覽器中顯示的默認的樣式為:

          總結:

          1. table表格在沒有添加css樣式之前,在瀏覽器中顯示是沒有表格線的

          2. 表頭,也就是th標簽中的文本默認為粗體并且居中顯示

          用css樣式,為表格加入邊框

          Table 表格在沒有添加 css 樣式之前,是沒有邊框的。這樣不便于我們后期合并單元格知識點的講解,所以在這一節中我們為表格添加一些樣式,為它添加邊框。代碼中加入:

          <styletype="text/css">tabletrtd,th{border:1pxsolid#000;}</style>

          上述代碼是用 css 樣式代碼,為th,td單元格添加粗細為一個像素的黑色邊框。

          結果窗口顯示出結果樣式:

          caption標簽,為表格添加標題和摘要

          表格還是需要添加一些標簽進行優化,可以添加標題和摘要。代碼如下

          摘要摘要的內容是不會在瀏覽器中顯示出來的。它的作用是增加表格的可讀性(語義化),使搜索引擎更好的讀懂表格內容,還可以使屏幕閱讀器更好的幫助特殊用戶讀取表格內容。

          語法:<table summary="表格簡介文本">

          標題用以描述表格內容,標題的顯示位置:表格上方。語法:

          <table> <caption>標題文本</caption> <tr> <td>…</td> <td>…</td> …</tr>…</table>

          初識<a>標簽

          使用<a>標簽,鏈接到另一個頁面

          使用<a>標簽可實現超鏈接,它在網頁制作中可以說是無處不在,只要有鏈接的地方,就會有這個標簽。

          語法 :<a href="目標網址" title="鼠標滑過顯示的文本">鏈接顯示的文本</a>

          例如:<a title="點擊進入我的博客">click here!</a>

          上面例子作用是單擊click here!文字,網頁鏈接到http://www.zhaolion.com這個網頁。

          title屬性的作用,鼠標滑過鏈接文字時會顯示這個屬性的文本內容。這個屬性在實際網頁開發中作用很大,主要方便搜索引擎了解鏈接地址的內容(語義化更友好)

          提醒

          還有一個有趣的現象不知道小伙伴們發現了沒有,只要為文本加入a標簽后,文字的顏色就會自動變為藍色(被點擊過的文本顏色為紫色),顏色很難看吧,不過沒有關系后面我們學習了css樣子就可以設置過來(a{color:#000}),后面會詳細講解。

          在新建瀏覽器窗口中打開鏈接

          <a>標簽在默認情況下,鏈接的網頁是在當前瀏覽器窗口中打開,有時我們需要在新的瀏覽器窗口中打開。只需要添加一個屬性target="_blank"

          如下代碼:

          <a href="目標網址" target="_blank">click here!</a>

          使用mailto在網頁中鏈接Email地址

          <a>標簽還有一個作用是可以鏈接Email地址,使用mailto能讓訪問者便捷向網站管理者發送電子郵件。我們還可以利用mailto做許多其它事情。下面一一進行講解,請看詳細圖示:

          提醒:如果mailto后面同時有多個參數的話,第一個參數必須以“?”開頭,后面的參數每一個都以“&”分隔。

          下面是一個完整的實例: 在瀏覽器中顯示的一個發送按鈕

          點擊鏈接會打開電子郵件應用,并自動填寫收件人等設置好的信息,如下圖:

          認識<img>標簽,為網頁插入圖片

          在網頁的制作中為使網頁炫麗美觀,肯定是缺少不了圖片,可以使用<img>標簽來插入圖片。語法:[站外圖片上傳中……(48)]

          舉例:<img src = "myimage.gif" alt = "My Image" title = "My Image" />

          講解:

          1. src:標識圖像的位置;

          2. alt:指定圖像的描述性文本,當圖像不可見時(下載不成功時),可看到該屬性指定的文本;

          3. title:提供在圖像可見時對圖像的描述(鼠標滑過圖片時顯示的文本);

          4. 圖像可以是GIF,PNG,JPEG格式的圖像文件。

          認識表單

          使用表單標簽,與用戶交互

          網站怎樣與用戶進行交互?答案是使用HTML表單(form)。表單是可以把瀏覽者輸入的數據傳送到服務器端,這樣服務器端程序就可以處理表單傳過來的數據。

          語法:<form method="傳送方式" action="服務器文件">

          講解:

          1. <form>:<form>標簽是成對出現的,以<form>開始,以</form>結束。

          2. action :瀏覽者輸入的數據被傳送到的地方,比如一個PHP頁面(save.php)。

          3. method : 數據傳送的方式(get/post)。

            <formmethod="post"action="save.php"> <labelfor="username">用戶名:</label> <inputtype="text"name="username"/> <labelfor="pass">密碼:</label> <inputtype="password"name="pass"/> </form>

          注意

          1. 所有表單控件(文本框、文本域、按鈕、單選框、復選框等)都必須放在<form></form>標簽之間(否則用戶輸入的信息可提交不到服務器上哦!)。

          2. method:post/get的區別這一部分內容屬于后端程序員考慮的問題。感興趣的小伙伴可以問谷哥

          文本輸入框、密碼輸入框

          當用戶要在表單中鍵入字母、數字等內容時,就會用到文本輸入框。文本框也可以轉化為密碼輸入框。

          語法:

          <form> <inputtype="text/password"name="名稱"value="文本"/></form>
          1. type:

          • 當type="text"時,輸入框為文本輸入框;

          • 當type="password"時, 輸入框為密碼輸入框。

          name:為文本框命名,以備后臺程序ASP 、PHP使用。

          value:為文本輸入框設置默認值。(一般起到提示作用)

          舉例:

          <form> 姓名:<inputtype="text"name="myName"> <br/> 密碼:<inputtype="password"name="pass"></form>

          在瀏覽器中顯示的結果:

          文本域,支持多行文本輸入

          當用戶需要在表單中輸入大段文字時,需要用到文本輸入域。

          語法:<textarea rows="行數" cols="列數">文本</textarea>

          1. <textarea>標簽是成對出現的,以<textarea>開始,以</textarea>結束。

          2. cols :多行輸入域的列數。

          3. rows :多行輸入域的行數。

          4. 在<textarea></textarea>標簽之間可以輸入默認值。

          舉例:

          <formmethod="post"action="save.php"> <label>聯系我們</label> <textareacols="50"rows="10">在這里輸入內容...</textarea></form>

          在瀏覽器中顯示結果:

          使用單選框、復選框,讓用戶選擇

          在使用表單設計調查表時,為了減少用戶的操作,使用選擇框是一個好主意,html中有兩種選擇框,即單選框和復選框,兩者的區別是單選框中的選項用戶只能選擇一項,而復選框中用戶可以任意選擇多項,甚至全選。請看下面的例子:語法:<input type="radio/checkbox" value="值" name="名稱" checked="checked"/>

          1. type:

          • 當 type="radio" 時,控件為單選框

          • 當 type="checkbox" 時,控件為復選框

          value:提交數據到服務器的值(后臺程序PHP使用)

          name:為控件命名,以備后臺程序 ASP、PHP 使用

          checked:當設置 checked="checked" 時,該選項被默認選中

          如下面代碼:

          在瀏覽器中顯示的結果:

          注意:同一組的單選按鈕,name 取值一定要一致,比如上面例子為同一個名稱“radioLove”,這樣同一組的單選按鈕才可以起到單選的作用。

          使用下拉列表框,節省空間

          下拉列表在網頁中也常會用到,它可以有效的節省網頁空間。既可以單選、又可以多選。如下代碼:

          講解:

          value:

          selected="selected":設置selected="selected"屬性,則該選項就被默認選中。

          使用下拉列表框進行多選

          下拉列表也可以進行多選操作,在<select>標簽中設置multiple="multiple"屬性,就可以實現多選功能,在 widows 操作系統下,進行多選時按下Ctrl鍵同時進行單擊(在 Mac下使用 Command +單擊),可以選擇多個選項。如下代碼:

          在瀏覽器中顯示的結果:

          使用提交按鈕,提交數據

          在表單中有兩種按鈕可以使用,分別為:提交按鈕、重置。這一小節講解提交按鈕:當用戶需要提交表單信息到服務器時,需要用到提交按鈕。語法:<input type="submit" value="提交">

          1. type:只有當type值設置為submit時,按鈕才有提交作用

          2. value:按鈕上顯示的文字

          舉例:

          在瀏覽器中顯示的結果:

          使用重置按鈕,重置表單信息

          當用戶需要重置表單信息到初始時的狀態時,比如用戶輸入“用戶名”后,發現書寫有誤,可以使用重置按鈕使輸入框恢復到初始狀態。只需要把type設置為"reset"就可以。語法:<input type="reset" value="重置">

          1. type:只有當type值設置為reset時,按鈕才有重置作用

          2. value:按鈕上顯示的文字

          舉例:

          在瀏覽器中顯示的結果:

          輸入賬號

          單擊重置按鈕

          form表單中的label標簽

          小伙伴們,你們在前面學習表單各種控件的時候,有沒有發現一個標簽--label,這一小節就來揭曉它的作用。

          label標簽不會向用戶呈現任何特殊效果,它的作用是為鼠標用戶改進了可用性。如果你在 label 標簽內點擊文本,就會觸發此控件。就是說,當用戶單擊選中該label標簽時,瀏覽器就會自動將焦點轉到和標簽相關的表單控件上(就自動選中和該label標簽相關連的表單控件上)。

          語法:<label for="控件id名稱">

          注意標簽的 for 屬性中的值應當與相關控件的 id 屬性值一定要相同。這樣你會在點慢跑標簽,即使沒有點checkbox 也能選中

          例子:

          <form> <a>你對什么運動感興趣:</a><br/> <labelfor="1">慢跑</label><inputtype="checkbox"name="manpao"id="1"><br/> <labelfor="2">登山</label><inputtype="checkbox"name="dengshan"id="2"><br/> <labelfor="3">籃球</label><inputtype="checkbox"name="lanqiu"id="3"><br/></form>

          限時!!免費送Dreamweaver、js等前端教程


          主站蜘蛛池模板: 亚洲AV噜噜一区二区三区| 一区二区国产在线观看| 亚洲av成人一区二区三区观看在线 | 亚洲综合在线成人一区| 香蕉视频一区二区| 日韩精品无码一区二区中文字幕| 色一情一乱一伦一区二区三区日本 | 久久精品无码一区二区app| 亚洲无圣光一区二区| 一区二区三区人妻无码| 无码人妻久久一区二区三区免费丨 | 色噜噜狠狠一区二区三区果冻| 亚洲爆乳无码一区二区三区 | 91精品一区二区三区在线观看| 久久久久国产一区二区| 国产一区二区三区高清视频| 国产嫖妓一区二区三区无码| 日韩一区二区三区无码影院| 国产在线一区二区三区在线| 亚洲AV成人精品一区二区三区| 日韩av片无码一区二区不卡电影| 国产色情一区二区三区在线播放| 一区二区手机视频| 视频一区二区在线播放| 国产精品资源一区二区| 波多野结衣一区视频在线| 日本不卡一区二区三区| 一区二区三区视频在线| 男女久久久国产一区二区三区| 精品日产一区二区三区手机| 久久精品国产一区二区三| 国产成人高清精品一区二区三区| 中文字幕一区二区三区永久| 国产婷婷色一区二区三区| 中文字幕精品无码一区二区 | 中文人妻无码一区二区三区| 一区二区三区在线观看中文字幕| 久久国产精品免费一区| 久久一区二区明星换脸| 亚洲综合色一区二区三区小说| 国产成人精品一区二三区 |