HTML基礎教學之<span>標籤

這一小節解說<span>標籤，我們對<em>、<strong>、<span>這三個標籤總結：

# < ;em>和<strong>標籤是為了強調一段話中的關鍵字時使用，它們的語義是強調。
<span>標籤是沒有語意的，它的功能就是為了設定單獨的樣式用的。

如果現在我們想把上一段詩中的朝代和作者設定成red（red紅色），但注意不是為了強調這個，而只是想為它設定和其它文字不同的樣式（不想讓螢幕閱讀器對朝代和加重音讀出），所以這樣情況下就可以用到<span>標籤了。

如下面例子：

<!DOCTYPE HTML>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    </head>
<style>
span{
 color:red;   
}
</style>
    <body>
       <h1>水调歌头·丙辰中秋</h1>
<pre>
<span>朝代：宋代
作者：苏轼</span>
<strong>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</strong>

明月几时有，把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？
<em>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</em>
<pre>
    </body>
</html>

註：本節用到了CSS的知識，大家先作了解，等之後我們學習了CSS之後，就會理解了

繼續學習

新建檔案

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <style> span{ color:red; } </style> <body> <h1>水调歌头·丙辰中秋</h1> <pre> <span>朝代：宋代作者：苏轼</span> <strong>丙辰中秋，欢饮达旦，大醉，作此篇，兼怀子由。</strong> 明月几时有，把酒问青天。不知天上宫阙，今夕是何年。我欲乘风归去，又恐琼楼玉宇，高处不胜寒。起舞弄清影，何似在人间？ <em>转朱阁，低绮户，照无眠。不应有恨，何事长向别时圆？人有悲欢离合，月有阴晴圆缺，此事古难全。但愿人长久，千里共婵娟。</em> <pre> </body> </html>

重置程式碼

自動運行

提交

預覽 Clear