tft每日頭條

 > 生活

 > web前端标簽教程

web前端标簽教程

生活 更新时间:2025-02-23 20:50:38

在HTML文件中,有些标簽會被經常用到,可能有人覺得太基礎,就不認真對待,但是我可以負責任的告訴你,越基礎的往往越重要。這次重點學一學标題、段落和鍊接等基礎标簽。

為了不重複粘貼HTML代碼,咱們來個約定,除了第一次出現完整的HTML文件的頁面結構之外,之後隻現新增的标簽内容,你自己将新的内容,添加到HTML文件中,進行效果驗證。

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>第3個HTML文件</title> </head> <body> <!--這是一個完整的HTML頁面結構,常用标簽放在這個注釋後面即可--> </body> </html>

3.1 标題<h1>~

在HTML中,标題從一級到六級,對應标簽為<h1>到<h6>,字體逐步變小。屬性為align(對齊方式),屬性值為left(左對齊,默認)、right(右對齊)和center(居中對齊)。

<h1 align="center">一級标題</h1> <h2 align="center">二級标題</h2> <h3>三級标題</h3> <h4 align="left">四級标題</h4> <h5 align="right">五級标題</h5> <h6 align="right">六級标題</h6>

輸出結果

web前端标簽教程(第3天16天搞定前端)1

3.2 段落<p>

<p> 标簽定義段落。浏覽器解析到<p>标簽時,會自動在其前後創建一些空白。<p>标簽的屬性也是align。其實為了HTML文件統一布局,很少會用align來指定位置,大多數是用CSS統一指定。

<p>老陳說編程,除了說編程,</p> <p>還有程序員的愛情與友情,</p> <p>那是不可能的。</p>

輸出結果

web前端标簽教程(第3天16天搞定前端)2

3.3 水平線和換行

在網頁發的文字多時,好多人習慣性會使用分割線。在HTML,用<hr/>單标簽就可以實現分割線。而換行,則用<br/>标簽。<hr>标簽屬性有表示位置的align、高度的的size和寬度width三個屬性,其中size和width的單位是像素,但如果用到這些屬性的話,推薦用CSS。

<hr size="1"/> 小舅子要結婚了,丈母娘跟我借了10萬塊錢做彩禮,結果婚事談崩了。<br/> 今天公司急用錢,我向丈母娘要那10萬塊錢。<br/> 丈母娘說:借你這10萬塊錢是幹啥用的?<br/> 我說:給小舅子結婚用啊!<br/> 丈母娘說:那婚結成了嗎?<br/> 我說:沒結成。<br/> 丈母娘大聲罵道:婚都沒結成你還有臉來要錢!<br/> 突然感覺丈母娘這話說的沒什麼毛病啊! <hr size="1"/>

輸出結果

web前端标簽教程(第3天16天搞定前端)3

3.4 列表<ul>和<ol>

無序列表<ul>标簽,可用粗體圓點标記一個項目的列表;有序列表<ol>标簽使用數字進行标記,而列表項用<li>标簽實現。有關列表的屬性,不是被H5抛棄,就是不被推薦,所以......。

<p> 程序員最喜歡做的三件事 <ul> <li>編程</li> <li>開發</li> <li>敲代碼</li> </ul> 程序員最喜歡的三個美女 <ol> <li>潘金蓮</li> <li>楊貴妃</li> <li>楊八妹</li> </ol> </p>

輸出結果

web前端标簽教程(第3天16天搞定前端)4

3.5 超鍊接<a>

<a>标簽定義超鍊接,用于從一個頁面鍊接到另一個頁面。最重要的屬性是 href和target, href指定鍊接的目标(網頁地址),target指定打開窗口的模式,_blank:打開新窗口,_parent:在父窗口中打開,_self:默認,當前頁面跳轉,_top:在當前窗體打開鍊接,并替換當前的整個窗體。

在沒點擊鍊接之前,你先看一下鍊接内容的字體顔色,點擊鍊接之後,你再看一下,你就會發現,鍊接内容的顔色會有所變化。

(1) 未被訪問的鍊接帶有下劃線而且是藍色的;

(2) 已被訪問的鍊接帶有下劃線而且是紫色的;

(3) 活動鍊接帶有下劃線而且是紅色的。

<a href="demo1.html">去到老陳說HTML的第1個Demo中</a>

輸出結果

web前端标簽教程(第3天16天搞定前端)5

web前端标簽教程(第3天16天搞定前端)6

好了,有關html基礎标簽的内容,老陳講完了,如果覺得對你有所幫助,希望老鐵能轉發點贊,讓更多的人看到這篇文章。你的轉發和點贊,就是對老陳繼續創作和分享最大的鼓勵。

一個當了10年技術總監的老家夥,分享多年的編程經驗。想學編程的朋友,可關注今日頭條:老陳說編程。分享Python,前端(小程序)、App和嵌入式方面的幹貨。關注我,沒錯的。

#前端##HTML##程序員##編程##CSS#

,

更多精彩资讯请关注tft每日頭條,我们将持续为您更新最新资讯!

查看全部

相关生活资讯推荐

热门生活资讯推荐

网友关注

Copyright 2023-2025 - www.tftnews.com All Rights Reserved