整合營銷服務商

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

          免費咨詢熱線:

          HTML網頁制作常用標簽及說明-前端開發入門

          篇文章我們介紹了怎么創建一個最基本的網頁,這篇我們介紹一下經常被使用的標簽及用途。

          顯示在瀏覽器中的內容都要添加在基本模板中的body標簽的中間,這點一定要記住??!

          下面的body標簽中各個標簽,我做了解釋說明,大概了解各個標簽長什么樣子,能記住就更好了。

          下面的HTML代碼可以直接復制到你的網頁中(創建HTML文件的方法上篇文章有介紹)

          <!DOCTYPE html>

          <html lang="en">

          <head>

          <meta charset="UTF-8">

          <meta name="viewport" content="width=device-width, initial-scale=1.0">

          <title>這里是網頁的標題,你看到在哪里顯示的了嗎?——橙先生</title>

          </head>

          <body>


          <div>div標簽可以理解為是個空盒子,什么都能裝下</div>


          <!-- img標簽用來插入圖片,src="圖片路徑",alt屬性可選,用來描述圖片, <img src="圖片路徑" alt="圖片的說明(可選)"> -->

          這是一張圖片,注意這里的img標簽形式,這是個單標簽

          <img src="圖片地址" alt="圖片的說明(可選)">


          <!-- a標簽用來添加超鏈接 ,target="_blank"屬性用來點擊鏈接后跳轉到新的瀏覽器頁簽 href="需要跳轉到的網址或是文件"-->

          <a href="需要跳轉到的網址或是文件,如" target="_blank">這個是文字的鏈接,也可以在其他內容上添加(比如圖片)</a>


          <!-- p標簽用來填入文字 -->

          <p>在這里填入文字</p>

          <p>在這里填入文字</p>


          <!-- span標簽用來添加文字等,屬于行內元素 -->

          <span>在這里添加你想要的內容</span><span>!!!!!!這里是另外一段內容</span>


          <!-- 這里說說塊元素和行內元素,像上面的P標簽就是塊元素,它獨占一行, span標簽就是行內元素,可以在一行中顯示多個span標簽內容 -->


          <!-- br標簽用來換行 -->

          <br>


          <!-- h1至h6是有固定大小的標題/文字標簽 -->

          <h1>這是h1里的內容</h1>

          <h2>這是h2里的內容</h2>

          <h3>這是h3里的內容</h3>

          <h4>這是h4里的內容</h4>

          <h5>這是h5里的內容</h5>

          <h6>這是h6里的內容</h6>


          <!-- ul 和li是固定的搭配,是無序列表,可以有N個li -->

          <ul>

          <li>這里是無序列表1</li>

          <li>這里是無序列表2</li>

          <li>這里是無序列表3</li>

          </ul>


          <!-- ol 和li是固定的搭配,是有序列表,可以有N個li -->

          <ol>

          <li>這里是有序列表1</li>

          <li>這里是有序列表2</li>

          </ol>


          <!-- table 、tr 和 td是固定搭配 :table是表格,tr是表格里的行,td是表格里的列, 表格里可以有N行 N列-->

          <table>

          <tr>

          <td>表格中第一行的第1列</td>

          <td>表格中第一行的第2列</td>

          </tr>

          <tr>

          <td>表格中第二行的第1列</td>

          <td>表格中第二行的第2列</td>

          <td>表格中第二行的第3列</td>

          </tr>

          </table>

          ?

          </body>

          </html>

          上面的內容已經大致了解了吧?下一篇我們將介紹各種常用到的樣式,讓各個標簽更加的美觀。記得關注一下哦!

          帶有兩個輸入字段和相關標記的簡單 HTML 表單:

          <form action="demo_form.asp">

          <label for="male">Male</label>

          <input type="radio" name="sex" id="male" value="male"><br>

          <label for="female">Female</label>

          <input type="radio" name="sex" id="female" value="female"><br>

          <input type="submit" value="提交">

          </form>


          瀏覽器支持

          目前大多數瀏覽器支持 <label> 標簽。


          標簽定義及使用說明

          <label> 標簽為 input 元素定義標注(標記)。

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

          <label> 標簽的 for 屬性應當與相關元素的 id 屬性相同。


          提示和注釋

          提示:"for" 屬性可把 label 綁定到另外一個元素。請把 "for" 屬性的值設置為相關元素的 id 屬性的值。


          HTML 4.01 與 HTML5之間的差異

          "form" 屬性是 HTML5 的新屬性。


          屬性

          New:HTML5 新屬性。

          屬性描述
          forelement_id規定 label 與哪個表單元素綁定。
          formNewform_id規定 label 字段所屬的一個或多個表單。

          全局屬性

          <label> 標簽支持全局屬性,查看完整屬性表 HTML全局屬性。


          事件屬性

          <label> 標簽支持所有 HTML事件屬性。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!

          以下代碼標記了一個段落:

          <p>這是一個段落。</p>


          瀏覽器支持

          目前大多數瀏覽器支持 <p>標簽。


          標簽定義及使用說明

          <p> 標簽定義段落。

          <p>元素會自動在其前后創建一些空白。瀏覽器會自動添加這些空間,您也可以在樣式表中規定。


          在HTML 4.01 與 HTML5中的差異

          HTML 4.01中標簽的 align 屬性已經廢棄,HTML5不支持該屬性。


          屬性

          屬性描述
          alignleftrightcenterjustifyHTML5不支持。 HTML 4.01已廢棄。 不贊成使用。請使用樣式取代它。 規定段落中文本的對齊方式。

          全局屬性

          <p> 標簽支持全局屬性,查看完整屬性表 HTML全局屬性。


          事件屬性

          <p> 標簽支持所有 HTML事件屬性。

          如您還有不明白的可以在下面與我留言或是與我探討QQ群308855039,我們一起飛!


          主站蜘蛛池模板: 色噜噜一区二区三区| 日韩欧美一区二区三区免费观看| 国产福利一区二区三区视频在线| 日韩一区二区免费视频| 国产福利电影一区二区三区,亚洲国模精品一区| 日本精品高清一区二区| 激情久久av一区av二区av三区| 中文字幕一区二区免费| 国产一区二区三区露脸| 无码中文字幕一区二区三区| 无码少妇精品一区二区免费动态| www亚洲精品少妇裸乳一区二区| 亚洲国产高清在线精品一区| 国偷自产av一区二区三区| 日本一区二区高清不卡| 欧美激情一区二区三区成人| 亚洲一区二区三区免费观看| 亚洲国产一区国产亚洲| 一区二区三区国产| 中文字幕精品无码一区二区| 视频在线一区二区三区| 国产成人综合亚洲一区| 国内精品视频一区二区八戒| 麻豆精品人妻一区二区三区蜜桃| 国产吧一区在线视频| 亚洲一区二区免费视频| 人妻体内射精一区二区三四| 久久se精品一区二区| 亚洲日韩精品无码一区二区三区| 亚洲午夜日韩高清一区| 红杏亚洲影院一区二区三区| а天堂中文最新一区二区三区| 日韩一区二区三区在线精品| 视频一区在线免费观看| 一区二区免费国产在线观看| 一区二区三区福利视频| A国产一区二区免费入口| 国模吧无码一区二区三区| 国产精久久一区二区三区| 99久久精品国产高清一区二区| 国产在线精品一区二区夜色|