2047 實用 HTML 代碼指南

目錄

突出顯示、著重文字

標題,標題的等級

文字的字體、字號

行、段的間距

隱藏文字

傾斜文字

邊框

其他

突出顯示、著重文字


<font color = red> 突出顯示文字,搜索引擎形式 </font>

<span style = 'color: red'> 突出顯示文字,搜索引擎形式 </span>

包子,又稱習近平,是中華傳統美食之一。

包子,又稱習近平,是中華傳統美食之一。

<span style = 'text-emphasis: dot black'> 著重的文字 </span>

效果: 著重的文字

標題,標題的等級


# 一級標題

## 二級標題

### 三級標題

#### 四級標題

**粗體文字**

##### 五級標題

一級標題

二級標題

三級標題

四級標題

粗體文字

五級標題
<center> 居中文字 </center>

<div style = 'text-align: center'> 居中文字 </div>
居中文字
居中文字

<center> 雖然更簡潔,但是 deprecated,好像是因爲設計原則、哲學的緣故。

文字的字體、字號


<span style = 'font-family: Songti TC, Apple LiSung, LiSong Pro, Times, Georgia, serif; font-size: 140%'> 其他字體、字號 </span>

<span style = 'font-size: 1.4em'> 其他字號 </span>

<span style = 'font-size: 19.6px'> 其他字號 </span>
其他字體、字號
其他字號
其他字號

行、段的間距


文字<br />
文字

文字

<div style = 'height: 5px'></div>

文字

<div style = 'height: .5em'></div>

文字

<div style = 'height: 10px'></div>

文字

<div style = 'height: 1em'></div>

文字

<div style = 'height: 20px'></div>

文字

<br />

文字

<div style = 'height: 2em'></div>

文字

文字        br
文字        空行

文字        5 px

文字        .5 em

文字        10 px

文字        1 em

文字        20 px

文字        空行 br


文字        2 em

文字

隱藏文字


<font color = 'white'> 隱藏文字 </font>

<font color = 'white'><s> 隱藏文字 + 刪除綫 </s></font> 或 <s><font color = 'white'> 隱藏文字 + 刪除綫 </font></s>

<span style = 'color: white; text-decoration: line-through'> 隱藏文字 + 刪除綫 </span>

效果:

隱藏文字

隱藏文字 + 刪除綫

隱藏文字 + 刪除綫

<details><summary> 折疊文字 </summary>

折疊文字

<span style = 'color: black; font-size: 90%'>普通文字</span></details>
折疊文字

折疊文字

折疊連結

普通文字

<!-- 隐藏文字(不可查看,代码注解) -->

效果:。

傾斜文字


<span style = 'display: inline-block; transform: rotate(-10deg); -moz-transform: rotate(-10deg); -webkit-transform: rotate(-10deg); -o-transform: rotate(-10deg)'> 傾斜文字 </span>

<span style = 'display: inline-block; transform: scalex(-1)'> 左右顛倒文字 </span>

<span style = 'display: inline-block; transform: scaley(-1)'> 上下顛倒文字 </span>

<span style = 'display: inline-block; transform: scale(-1)'> 上下左右顛倒(180 度旋轉)文字 </span>

效果:

-moz- 等前綴適用於不同瀏覽器

左右顛倒文字

上下顛倒文字

上下左右顛倒文字

邊框


<span style = 'color: #fff; background-color: #07f; border-radius: 3px; padding: 5px 10px'> 給文字加個框框 </span>

<span style = 'color: #fff; background-color: #07f; border-radius: 3px; padding: 0 10px 5px 20px'> 給文字加個框框 </span>

給文字加個框框

給文字加個框框

<div style = 'text-align: center; width: 8em; border-top: 5px solid orange; float: left; margin: 0.5em 1em; padding: 30px 1em; background: #fafafa'> 給文字加個框框 </div>

<div style = 'text-align: center; width: 90%; height: 125px; border-top: 5px solid orange; margin: 0.5em; padding: 20px; background: #fafafa'> 給文字加個框框 </div>
給文字加個框框
red
yellow
給文字加個框框

使用 <div>,如果有 float 屬性且 width 非 100%,可能需於其後、新一行內容前 clear:

<div style = 'clear: both'></div>

其他


<a href = 'https://wikipedia.org/wiki/ICXC' title = '荣耀归于真主 ICXC'> 給連結加個光標懸置顯示的文字 </a>

給連結加個光標懸置顯示的文字

作者 于 8月23日 编辑
赞同 0
44 次浏览

欲参与讨论,请 登录注册