445IT之家
首頁 運營策劃 推廣優化 網上賺錢 站長新聞 網站制作 站長雜談 網頁制作 服務器 編程 電腦相關 論壇
您現在的位置:首頁 >> 網頁制作 >> CSS教程 >> 內容

網頁設計技術基礎之HTML中文本的常用標簽及語義語法屬性介紹

時間:2019-3-9 9:20:29 點擊:

  核心提示:在網頁設計技術之Dreamweaver中文本的使用與編輯 一文中,我為大家介紹了DW軟件中輸入和編輯文本的基本方法,其中涉及到了一些HTML標簽,今天就來跟大家詳細聊一下HTML中與文本有關的常用的標簽,主要包括段落標簽p、換行標簽br、標題標簽hn、強調語義標簽strong和em、突出顯示標簽ma...

網頁設計技術之Dreamweaver中文本的使用與編輯 一文中,我為大家介紹了DW軟件中輸入和編輯文本的基本方法,其中涉及到了一些HTML標簽,今天就來跟大家詳細聊一下HTML中與文本有關的常用的標簽,主要包括段落標簽p、換行標簽br、標題標簽hn、強調語義標簽strong和em、突出顯示標簽mark、裝飾性標簽span,希望對大家了解HTML有一定的幫助,對進一步學習頁面編輯打好基礎。


1、段落標簽p

段落標簽的語法格式為:<p>段落文本</p>。被其標記的文本,默認會與上下文之間產生一行的間隔。通常情況下,我們在DW的設計視圖界面輸入一段文本后,按回車鍵,就會在該段文本的前后自動加上<p>和</p>,不需要專門書寫段落標簽。

 

將光標放在段落標簽的起始標簽的p后面,鍵入空格,就會出現該標簽的可用屬性,具體語法格式為<p 屬性名1=“屬性值1”屬性名2=“屬性值2 ……>文本</p>,其中常用的屬性是align和class:

 

align屬性中所說的“容器”,是指段落文本的外側對象,例如:段落是放在一個單元格中的,那么單元格就是該段落的容器,此時如果align="center",則段落文本是相對單元格居中顯示的。如果段落沒有放入任何對象內,則它所屬的容器就是頁面。如下圖,段落文本是相對頁面右對齊顯示:

 

class是指定段落所使用的類,這個類一般是CSS定義的樣式類。大家可能會說,難道文本不能設定顏色、大小等效果嗎?能!按照設計網頁的常規思路,有兩種方法,一是在頭部區域利用<style></style>標簽設定(見本文第5點內容);一種是利用CSS類,本文中先不涉及,后面的文章會詳細講解CSS樣式。

2、換行標簽br

換行標簽是個單標簽,一般使用/來結束標簽,即正確格式為<br />。它的功能就是換行,也就是說在想要換行的地方輸入一個<br />就OK了,該標簽沒有屬性,效果如下圖:

 

3、標題標簽hn

其中n=1~6。即"<h1>…</h1>"至"<h6>…</h6>",它們是DW預設好效果的標題文本,其預設效果為:

 

hn的常用屬性也是align和class,屬性值與p標簽中所講的一致。

4、強調語義標簽strong和em

所謂強調語義是指,一方面顯示加粗或傾斜效果,一方面加重語氣以更加吸引搜索引擎。<strong>文本</strong>是加粗文本,<em>文本</em>是傾斜文本。在語氣上,strong語氣較重,em語氣較輕。它們沒有屬性,效果如下:

 

5、突出顯示標簽mark

mark標簽是HTML5的新標簽,IE8以下的瀏覽器不解析該標簽。其語法格式為:<mark>文本</mark>。它是為文本設定了黃色背景,以突出顯示,效果如下。如果設計視圖看不到突出顯示效果,只要在瀏覽器中預覽該頁面就能看到了(本文所用瀏覽器為QQ瀏覽器)。

 

<mark>中不能直接修改背景顏色,要想修改突出顯示的背景色,需要在頭部區域設置<style>,例如想要將背景色改為淺藍色,其代碼為:

 

<style></style>是HTML的樣式標簽,其內部可以直接定義某個標簽的樣式。格式為:

 

例如,在<style></style>中同時設定了mark和p的樣式,效果為:

 

這里設定的屬性其實就是CSS的樣式屬性,所以常用的屬性及其解釋,將在后續講解CSS的文章中詳細介紹。

6、裝飾性標簽span

語法格式為<span>文本</span>,其功能是對文本進行裝飾。但是在<span>內部也無法設置效果類的屬性,也需要借助<style></style>標簽。例如,接上例,將“主頁”二字設置為紅底白字:

 


以上就是我為大家介紹的一些常用的文本類標簽。由于水平有限,難免存在不足之處。隨著學習的深入,大家將會對HTML標簽了解的越來越多。所以歡迎大家對本文內容進行補充,歡迎留言交流!如果覺得有用,歡迎收藏、轉發、點贊、關注^_^

作者:不詳 來源:網絡
  • 上一篇:與文本編排有關的CSS屬性設置
  • 下一篇:沒有了
  • 發表評論
    • 大名:
    • 內容:
    評論列表
  • 好站推薦
  • 笑死人不償命的笑話
  • 文章閱讀網
  • 關于愛情的句子
  • 好句子大全
  • 最新個性簽名
  • 英語作文帶翻譯
  • 傷心網
  • 汽車之家報價
  • 汽車之家論壇
  • 汽車改裝網
  • 汽車改裝網
  • 汽車銷量排行榜
  • SUV銷量排行榜
  • SUV銷量排行榜
  • 汽車排行榜
  • 本類推薦
    • 沒有
  • 網站介紹 | 投稿指南 | 廣告合作 | 聯系我們 | 又問必答
  • 445IT之家(www.lbegpf.tw) © 2019 版權所有 All Rights Reserved.
  • 冀ICP備:05024815號
  • Powered by 445IT之家
  • 内蒙古十一选五走势图下载