HTML常見標簽及其屬性一

HTML 為由一對尖括號(<>)所括起來的內容以特定含義. 這樣的標識稱為一個 標簽開始標簽可能包含一些信息,這些信息叫做元素的屬性,包括兩部分:

  1. 屬性名
  2. 屬性值
    (html5中一些元素可以只有元素名沒有元素值。它們的元素名類似“是非”,“有或沒有”,所以可以省略元素值)
    換行:<br/>
    注:
    1.多個br標簽可以連續使用,是用了多少br標簽就會換多少行
    2.由于HTML的作用就是用來給文本添加語義的,而br標簽的語義是另起一個段落換行,而在企業開發中一般情況下需要換行都是因為需另起一行段落,所以在企業開發中很少使用br標簽。

橫線:<hr/>

一、標題 h1~h6

<h1>h1</h1>
<h4>h4</h4>
<h6>h6</h6>

二、文本突出

mark:幾乎和內容無關,就是為了標示(匹配搜索項,拼寫錯誤等)
strong:表示強調標簽文本內容,不改變其含義
em:表示感情上的強調,增強了語氣

<mark>Text</mark>
<strong>Text</strong>
<em>Text</em>

三、段落和塊

<p>Text</p>
<div>Text</div>
  • 區別:
  1. div就是普通的塊標簽,多用于布局;p是語義化的段落標簽,用于文章分段
  2. div默認沒有邊距,p標簽為了表示文章分段,有默認的間距
  • 行內書寫
    <span>Text</span>
    使用 <span>來組合行內元素,以便通過樣式來格式化它們

四、IMG標簽

1.作用:告訴瀏覽器我們需要顯示一張圖片
2.img標簽格式:
<img src="xxx.jpg" alt="找不到圖片時顯示的內容"/>

  • 屬性:
  1. src:圖片地址
  2. alt: 英文alternate(交替)的縮寫,它的作用是用于告訴瀏覽器,當需要顯示的圖片顯示不出來時顯示出什么內容
  3. width/height:可以是像素值或者相對于父容器的百分比,兩個屬性僅設置一個,另外一個值會按相應等比縮放
  4. title:用于告訴瀏覽器,當鼠標懸停在圖片上時,需要彈出的描述框中顯示什么內容

五、a標簽

  1. a標簽的作用:用于控制頁面于頁面之間的跳轉
  2. a標簽的格式:<a href=" 指定需跳轉的目標界面 ">需要展現給用戶查看的內容</a>
<a target="_blank" >百度</a>
<a href="mailto:xxx@qq.com">聯系我們</a>
<a href="#menu1">聯系我們</a>
  • 補充
    1、target: 打開頁面方式
    2、_self: 在當前選項卡打開,替換當前頁面(默認)
    3、_blank:新的選項卡打開
    4、_parent:在父框架中打開
    5、_top: 在最頂層打開
    6、framename

注意點:

  1. a標簽不僅可以讓文字可以點擊,還可以讓圖片可能夠被點擊
  2. 一個a標簽必須有一個href屬性,否則a標簽不知道要跳轉到什么地方
  3. 如果通過a標簽的href屬性指定一個URL地址,那必須在地址前面加上http://https://
  4. a標簽的href屬性除了可以指定一個網絡地址以外,還可以指定一個本地地址

六、base標簽

base標簽就是專門用來統一指定當前網頁中所有的超鏈接(a標簽)如要如何打開
例:<base target="_blank">

注意點:

  1. base標簽必須寫在head標簽的開始標簽和結束標簽之間
  2. 如果即在base中指定了target又在a標簽中指定了target,那么瀏覽器會按照a標簽中指定的來執行

七、錨點

  1. 想要通過a標簽跳轉到指定的位置,那么必須告訴a標簽一個獨一無二的身份證號碼,這樣a標簽才能在當前界面中找到需要的跳轉目標位置
  2. 如何在HTML中的標簽綁定獨一無二的身份證呢?
    在HTML中,每一個標簽都有一個名稱叫做id屬性,這個屬性就是用來給標簽指定一個獨一無二的身份證號碼的
  3. 所以想要實現通過a標簽跳轉到指定的位置分兩步
  1. 給目標未知的標簽添加一個id屬性,然后指定一個獨一無二的值
  2. 告訴a標簽你需要跳轉到的目標標簽對應的獨一無二的身份證號碼是多少?

格式:

<a href="#center">跳到中間</a>
<h2 id="center">我是中間</h2>

****文章著作權歸饑人谷_Shirley和饑人谷所有,轉載須說明來源****

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 229,885評論 6 541
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 99,312評論 3 429
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事?!?“怎么了?”我有些...
    開封第一講書人閱讀 177,993評論 0 383
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 63,667評論 1 317
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 72,410評論 6 411
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 55,778評論 1 328
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,775評論 3 446
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,955評論 0 289
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 49,521評論 1 335
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 41,266評論 3 358
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 43,468評論 1 374
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,998評論 5 363
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 44,696評論 3 348
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 35,095評論 0 28
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 36,385評論 1 294
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 52,193評論 3 398
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 48,431評論 2 378

推薦閱讀更多精彩內容