HTML标签之样式/节类标签

最新推荐文章于 2024-02-10 05:15:00 发布

「已注销」

最新推荐文章于 2024-02-10 05:15:00 发布

阅读量528

点赞数 2

分类专栏： HTML学习笔记

本文链接：https://blog.csdn.net/h15882065951/article/details/54920471

版权

HTML学习笔记专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<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>是行内元素，且是最简单的行内元素。关于块级、行内元素在最后讨论。

块级元素、行内元素待更新中。。。。

「已注销」

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
HTML标签之样式/节类标签

标签标签定义HTML文档的样式信息，在元素中，可以规定浏览器如何呈现HTML文档，常用属性：type--规定样式表的MIME类型，一般浏览器默认为type="text/css" style p {color: red;} 通过样式表改变此行文本为红色。效果如下：
复制链接

扫一扫