<!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>是行内元素,且是最简单的行内元素。关于块级、行内元素在最后讨论。块级元素、行内元素待更新中。。。。
新闻热点
疑难解答