HTML標簽之樣式/節類標簽

2024-04-27 15:12:53

字體：大中小

來源：轉載

供稿：網友

<style>標簽

<style>標簽定義HTML文檔的樣式信息，在<style>元素中，可以規定瀏覽器如何呈現HTML文檔，常用屬性：type--規定樣式表的MIME類型，一般瀏覽器默認為type="text/CSS"

<!DOCTYPE html><html lang="zh">  <head>    <meta charset="utf-8">	<title>style</title>  </head>  <style> <!-- type="text/css"瀏覽器默認 可以省略 -->    p {color: red;}  </style>  <body>    	<p>通過樣式表改變此行文本為紅色。</p>	  </body></html>效果如下：注：因為<style>元素的type="text/css"是瀏覽器默認的，建議省略。<div>標簽
<div>標簽定義文檔中的一個分隔區或者一個區域部分。通常用于與其它元素結合通過CSS進行頁面布局。是頁面布局常用的標簽。
<!DOCTYPE html><html lang="zh">  <head>    <meta charset="utf-8">	<title>div</title>  </head>  <body>    	<div id="top">	  這是頭部	</div>	<div id="footer">	  這是底部	</div>	  </body></html><span>標簽<span>標簽對文檔中的行內元素進行組合，它提供了一種將文本或文檔獨立出來的方式，它沒有固定的格式表現，可通過CSS改變其顯示方式。<!DOCTYPE html><html lang="zh">  <head>    <meta charset="utf-8">	<title>span</title>  </head>  <body>    	<span>行內元素</span>	  </body></html><details>標簽<details>標簽定義了用戶可見或隱藏的補充細節，<details>元素中的內容默認是隱藏的，可通過給予open屬性顯示。常與<summary>元素一起用。<summary>元素提供了可見的標題。<!DOCTYPE html><html lang="zh">  <head>    <meta charset="utf-8">	<title>details summary</title>  </head>  <body>    	<details open>	  <summary>可見內容標題</summary>	  <p>補充細節1</p>	  <p>補充細節2</p>	  <p>補充細節3</p>	  <span>補充細節4<span>	</details>		<p>這段內容不會被隱藏</p>	  </body></html>隱藏狀態的效果是：當點擊"可見內容標題"部分時：隱藏部分顯示出來<div>是塊級元素，且是最簡單的塊級元素，<span>是行內元素，且是最簡單的行內元素。關于塊級、行內元素在最后討論。塊級元素、行內元素待更新中。。。。