「HTML+CSS」html修飾標簽介紹，為頁面元素添加獨立效果

篇文章繼續為大家介紹html常用修飾標簽介紹。我們今天主要說下樣式標簽、內容修飾標簽等的語法以及使用技巧。

1）樣式標簽

使用語法：文章內容

標簽是沒有語義的，它的作用就是為了設置單獨的樣式用的。如果現在我們想要修改一篇文章中的幾個字字體效果，為它設置和其它文字不同的樣式，所以這樣情況下就可以用到標簽了。比如我們設置字體顏色為藍色，并設置字號大小為30px，代碼如下圖所示：

代碼在瀏覽器中顯示的效果就如下圖所示：我們可以清楚的看到被span標簽包裹的文字內容已經變成了藍色，字體大小也變成了30px；

2）內容修飾標簽

內容修飾標簽有很多，這里我們簡單的來列舉一下標簽的名稱以及標簽的作用。

文字斜體標簽： 、

文字加粗標簽： 、

文字下標標簽：

文字上標標簽：

文字下劃線標簽： <ins></ins>

文字刪除線標簽： <del></del>

具體的代碼如下所示：

代碼在瀏覽器中顯示的效果就如下圖所示：每個被標簽包裹的內容都賦予了其獨立的效果。

好了以上就是我們所說的修飾標簽，每個標簽都有單獨的意義，在以后練習的時候可以自己多實踐一下，只有自己親自動手去寫了才能明白其中的含義以及效果。

附贈一句經典語錄：每一天，都要盡心盡力的工作，每一件小事情，都力爭高效的完成，不是為了看到老板的笑臉，而是為了自身不斷的進步。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

TML標簽：

所有內容都在<html></html>標簽之內；
<head></head>內放的是頭部信息，是對頁面的描述，不會直接顯示在頁面中。
<head></head>內的<title></title>中設置的是頁面的標題，<title></title>只能放在<head></head>中；
<body></body>是頁面的主體，大部分顯示內容都定義在這里。

HTML注釋：：

注釋不允許嵌套

html常用標簽:

h標簽（標題），HTML定義了<h1></h1>到<h6></h6>六個h標簽，分別表示不同大小的字體。h1最大，h6最小。
只是回車，是段落。前后會有比較大的空白，而 則沒有。
<center>居中顯示.
、粗體，、斜體。下劃線。
2下標，如：H2O
2上標，如：102
字體標簽，紅色。color（設置顏色） size（1-7） face（設置字體,設置字體是注意用戶計算機中必須有該字體才能正常顯示）
<hr> color size（厚度） width（長度） align=left/center/right （默認為劇中顯示）
<pre> 預格式化保持本色;
HTML特殊字符：<（小于號，less than）；>（大于號，greater than）； （空格）。
超鏈接：<a>標簽的一些常用屬性：href、title、target、name
插入圖片：<img src=“路徑”/>
列表：dl→(定義列表)，ul→(無序列表)， ol→(有序列表)。
表格：<table>；創建行：<tr>；創建單元格：<td>；表頁眉：<thead>；表主體：<tbody>；表頁腳：<tfoot>；表頭：<th>。
rowspan(合并行)、colspan（合并列）
<input>是主要的表單元素，type的可選值：submit（提交按鈕）、button（普通按鈕）、checkbox表單標簽：（復選框）、file（文件選擇框）、hidden（隱藏字段）、image（圖片按鈕）、password（密碼框）、radio（單選按鈕）、reset（重置按鈕）、text（文本框）。

meta標簽：（包括在head標簽中。主要用來描述頁面自身信息,元信息）

<meta name="keywords" content="C#學習資料,4k8k.net,.net開發,軟件開發,編程自學網"/>
<meta name="description" content="免費更新最新C#相關技術知識，主要包括：.net基礎,網頁前端,三層架構,SQL數據庫..."/>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />網頁編碼
<meta http-equiv="Refresh" content="3" />三秒鐘后刷新此網頁。
<meta http-equiv="Refresh" content="3;url=http://www.4k8k.net" />三秒鐘后重定向到新網頁。
<meta http-equiv="Cache-Control" content="no-cache" /> 禁止瀏覽器緩存頁面。
<meta name="名字" content="值" />關于網頁的描述信息。
<meta http-equiv="名字" content="值" />模擬http響應頭信息。

C#編程自學_做最好的.net自學資料站_更多文章請訪問：http://www.4k8k.net/

歡迎訂閱。

ss的標簽有很多，本篇文章為大家總結以下常用的一些標簽以及簡單說明這些標簽的作用。

（1） css的文字屬性標簽

文字顏色： color: #ffffff;

文字樣式： font-style: oblique;(偏斜體) italic;(斜體) normal;(正常)

字體大小：font-size:16px;

文字行高： line-height: 30px;

文字粗細： font-weight: bold;(粗體) lighter;(細體) normal;(正常)

文字修飾： text-decoration:line-through; (加刪除線)overline;(加頂線)underline;(加下劃線)none;(無修飾線)

對齊方式： text-align:right; (文字右對齊)left;(文字左對齊)center;(內部元素居中)justify;(文字分散對齊)

使用練習：我們隨機書寫一段文字，設置文字的顏色為紅色，字體樣式為斜體，字體大小為20px，行高為35px，字體加粗，加下劃線，并是文字居中對齊；那么我們的代碼就如下所示：

在網頁中的顯示效果就如下圖所示：

（2）css背景樣式

背景樣式：background:#f00; (紅色背景)background-image : url(/image/bg.gif); (背景圖片)background-repeat : repeat;(重復排列-網頁默認)background-repeat : no-repeat;(不重復排列)background-repeat : repeat-x; (在x軸重復排列)background-repeat : repeat-y; (在y軸重復排列)

（3）css邊框樣式

邊框樣式：border-top : 1px solid #f00; (上框線)border-bottom : 1px solid #f00; (下框線)border-left : 1px solid #f00; (左框線)border-right : 1px solid #f00; (右框線)border:1px solid #f00;(上下左右邊框)

其他框線樣式：solid(實線框)dotted(虛線框)double(雙線框)groove(立體內凸框)ridge(立體浮雕框)inset(凹框)outset(凸框)

（4）css內邊距以及外邊距屬性

內邊距樣式：padding-top:10px; (上邊框留空白)padding-right:10px;(右邊框留空白)padding-bottom:10px; (下邊框留空白)padding-left:10px;(左邊框留空白)

也可以簡寫成padding:10px 10px 10px 10px;(分別對應上右下左)padding:10px 10px;(上下、左右)padding:10px 10px 10px;(上、左右、下)

外邊距樣式：margin-top:10px; (上邊界留空白)margin-right:10px;(右邊界留空白)margin-bottom:10px; (下邊界留空白)margin-left:10px;(左邊界留空白)

也可以簡寫成margin:10px 10px 10px 10px;(分別對應上右下左)margin:10px 10px;(上下、左右)margin:10px 10px 10px;(上、左右、下)

使用練習：我們隨機書寫一段文字，設置文字的背景為灰色，邊框為紅色 2px 實線框，內邊距為10px，外邊距為10px；那么我們的代碼就如下所示：

在網頁中的顯示效果就如下圖所示：

對于css的常用標簽今天就先介紹到這里，大家在平時可以自己多加練習練習，熟練一下各個標簽的作用。

每日金句：有時候死扛下去總是會有機會的。喜歡我的文章的小伙伴記得關注一下哦，每天將為你更新最新知識。

在線咨詢

上一篇：html5復制黏貼上傳圖片
下一篇：前端程序員不可忽略的 11 個有用的 HTML 屬性

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商