HTML<section>标签怎么用?
yanghs · · 1209 次点击 · · 开始浏览Section标签文档中的节(section、区段),即文档的各个部分,例如章节,页眉,页脚或任何其他部分;section标签将内容划分为section和子部分。当需要两个页眉或页脚或任何其他文档部分时,将使用section标记。
原文地址:HTML标签怎么用?
Section标签对相关内容的通用块进行了分组。section标签的主要优点是,它是语义元素,它描述了它对浏览器和开发人员的意义。
语法:
<section>
部分内容
</section>
Section标签用于分发内容,即分发部分和子部分。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Section标签</title>
</head>
<body>
<section>
<h1>第1节</h1>
<p>第1节内容</p>
</section>
<section>
<h1>第2节</h1>
<p>第2节内容</p>
</section>
<section>
<h1>第3节</h1>
<p>第3节内容</p>
</section>
</body>
</html>
效果图:
嵌套的Section标签
section标签可以嵌套。如果文本包含相同的font属性,则子节的字体大小小于section标签。section标签用于组织复杂文档。根据经验,该部分在逻辑上应出现在文档的大纲中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Section标签</title>
</head>
<body>
<section>
<h1>第1节</h1>
<p>第1节内容</p>
<section>
<h1>小节</h1>
<h1>小节</h1>
</section>
</section>
<section>
<h1>第1节</h1>
<p>第2节内容</p>
<section>
<h1>小节</h1>
<h1>小节</h1>
</section>
</section>
</body>
</html>
效果图:
浏览器支持
●くろまる Google chrome 6.0 及更高版本
●くろまる Internet Explorer 9.0 及更高版本
●くろまる Mozilla 4.0 及更高版本
●くろまる Safari 5.0 及更高版本
●くろまる opera 11.1 及更高版本
相关推荐:
有疑问加站长微信联系(非本文作者)
入群交流(和以上内容无关):加入Go大咖交流群,或添加微信:liuxiaoyan-s 备注:入群;或加QQ群:692541889
关注微信- 请尽量让自己的回复能够对别人有帮助
- 支持 Markdown 格式, **粗体**、~~删除线~~、
`单行代码` - 支持 @ 本站用户;支持表情(输入 : 提示),见 Emoji cheat sheet
- 图片支持拖拽、截图粘贴等方式上传
收入到我管理的专栏 新建专栏
Section标签文档中的节(section、区段),即文档的各个部分,例如章节,页眉,页脚或任何其他部分;section标签将内容划分为section和子部分。当需要两个页眉或页脚或任何其他文档部分时,将使用section标记。
原文地址:HTML标签怎么用?
Section标签对相关内容的通用块进行了分组。section标签的主要优点是,它是语义元素,它描述了它对浏览器和开发人员的意义。
语法:
<section>
部分内容
</section>
Section标签用于分发内容,即分发部分和子部分。
示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Section标签</title>
</head>
<body>
<section>
<h1>第1节</h1>
<p>第1节内容</p>
</section>
<section>
<h1>第2节</h1>
<p>第2节内容</p>
</section>
<section>
<h1>第3节</h1>
<p>第3节内容</p>
</section>
</body>
</html>
效果图:
嵌套的Section标签
section标签可以嵌套。如果文本包含相同的font属性,则子节的字体大小小于section标签。section标签用于组织复杂文档。根据经验,该部分在逻辑上应出现在文档的大纲中。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Section标签</title>
</head>
<body>
<section>
<h1>第1节</h1>
<p>第1节内容</p>
<section>
<h1>小节</h1>
<h1>小节</h1>
</section>
</section>
<section>
<h1>第1节</h1>
<p>第2节内容</p>
<section>
<h1>小节</h1>
<h1>小节</h1>
</section>
</section>
</body>
</html>
效果图:
浏览器支持
●くろまる Google chrome 6.0 及更高版本
●くろまる Internet Explorer 9.0 及更高版本
●くろまる Mozilla 4.0 及更高版本
●くろまる Safari 5.0 及更高版本
●くろまる opera 11.1 及更高版本
相关推荐: