首页 > 网站 > WEB开发 > 正文

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>是行内元素,且是最简单的行内元素。关于块级、行内元素在最后讨论。块级元素、行内元素待更新中。。。。
发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表