<!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>是行內元素,且是最簡單的行內元素。關于塊級、行內元素在最后討論。塊級元素、行內元素待更新中。。。。
|
新聞熱點
疑難解答