HTML5之样式/节标签

最新推荐文章于 2020-11-16 11:10:17 发布

Programmer.杨

最新推荐文章于 2020-11-16 11:10:17 发布

阅读量995

点赞数

分类专栏：前端技术-HTML 文章标签： header footer article section 标签

本文链接：https://blog.csdn.net/YWB88888888/article/details/102616891

版权

前端技术-HTML 专栏收录该内容

15 篇文章 0 订阅

订阅专栏

<section>标签

类别：
         容器级标签
说明：
         section用作一段有专题性的内容，一般在它里面会带有标题。 section典型的应用场景应该是文章的章节、标签对话框中的标签页、或者论文中有编号的部分。section标签用于对网站或应用程序中页面上的内容进行分块，section标签的作用是对页面上的内容进行分块，或者说对文章进行分段；一个section标签通常由内容及其标题组成，通常不推荐为那些没有标题的内容使用section标签
全局属性： 支持
事件属性： 支持
注意：
         1.不要将section标签用作设置样式的页面容器，那是div标签的工作。
         2.如果article标签、aside标签或nav标签更符合使用条件，不要使用section标签。
         3.不要为没有标题的内容区块使用section标签。

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>HTML节/样式标签学习</title>
	
	<style type="text/css">
		#warp {
			border: solid 1px;
			width: 1800px;
			height: 600px;
			float: left;
		}
		#leftBar {
			border: solid 1px;
			width: 198px;
			height: 600px;
			float: left;
		}
		#content {
			border: solid 1px;
			width: 1598px;
			height: 600px;
			float: left;
		}
		#comment {
			border: solid 1px;
			width: 1800px;
			float: left;
		}
		.leftTitle {
			margin: 30px 0 10px 50px;
		}
	</style>
</head>
<body>
	<div id="warp">
		<aside id="leftBar">
		<dl>
		<dd class="leftTitle">文章一</dd>
		<dd class="leftTitle">文章二</dd>
		<dd class="leftTitle">文章三</dd>
		</dl>
		</aside>
	
		<article id="content">
			<header>
				<hgroup>
					<h3>Internet Explorer 9</h3>
					<h5>更极速的浏览器</h5>
				</hgroup>
				<p><time datetime="2011-03-15"></time></p>
			</header>
		
			<section>
				<h4>章节一</h4>
				<p>章节一的内容...</p>
			</section>
			
			<section>
				<h4>章节二</h4>
				<p>章节二的内容...</p>
			</section>
			
			<footer>
				<h4>文章相关信息</h4>
				<address>
					Author : ...<br/>
					Tel : ...<br/>
				</address>
				<p>
					CreateTime : ...<br/>
					CopyRight : ...<br/>
				</p>
			</footer>
		</article>
	</div>

	<div id="comment">
		<h3>评论区：</h3>
		<article>
			<header>
				<h5>发表者：Tom</h5>
			</header>
			<p>这篇文章很不错啊，顶一下！</p>
			<footer>
				<p><time datetime="2019-10-14">发布于：一小时前</time></p>
			</footer>
		</article>
	
		<article>
			<header>
				<h5>发表者：Jerry</h5>
			</header>
			<p>这篇文章太垃圾啦！一点都不好看，IE是浏览器中的BUG！</p>
			<footer>
				<p><time datetime="2019-10-14">发布于：两小时前</time></p>
			</footer>
		</article>
	</div>
</body>
</html>

<div>标签

类别：
         容器级标签
作用：
         用来定义HTML文档中一个分隔区块或者一个区域部分，常用于组合块级标签，以便通过CSS来对这些标签进行格式化从而布局网页
说明：
         他没有具体语义，在默认情况下，浏览器通常会在<div>标签前后放置一个换行符。可以通过使用CSS使之改变
全局属性： 支持
事件属性： 支持

div模板布局示例:

<!DOCTYPE html>
<html>
<head> 
	<meta charset="utf-8"> 
	<title>节/样式标签学习</title> 
</head>
<body>
	<div id="container" style="width: 500px">
		<div id="header" style="background-color: #FFA500;">
			<h1 style="margin-bottom: 0;">网页标题</h1>
		</div>

		<div id="menu" style="background-color: #FFD700; height: 200px; width: 100px; float: left;">
			<b>菜单</b><br>
			内容一<br>
			内容二<br>
			内容三
		</div>

		<div id="content" style="background-color: #EEEEEE; height: 200px; width: 400px; float: left;">
			主体内容
		</div>

		<div id="footer" style="background-color: #FFA500; clear: both; text-align: center;">
			版权 © ...
		</div>
	</div>
</body>
</html>

关于div、article、section的总结：
在HTML5中，article标签可以看成是一种特殊类型的section标签，它比section标签更强调独立性。即section标签强调分段或分块，而article强调独立性。具体来说，如果一块内容相对来说比较独立的、完整的时候，应该使用article标签，但是如果你想将一块内容分成几段的时候，应该使用section标签。另外，在HTML5中，div标签变成了一种容器，当使用CSS样式的时候，可以对这个容器进行一个总体的CSS样式的套用。

<span>标签

类别：
         文本级标签
作用：
         它提供了一种将文本的一部分或者文档的一部分独立出来的方式，通过控制该标签进而控制这些独立内容的表现、行为等
说明：
         在默认情况下span标签内的文本显示效果与普通文本并无差异。它没有固定的格式表现。当对它应用样式时，它才会产生视觉上的变化
全局属性： 支持
事件属性： 支持

<span style="border: solid 1px;">大家好</span>
<span style="border: solid 1px;">我是...</span>

代码示例：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
	<meta charset="UTF-8">
	<title>节/样式标签学习</title>
	
	<style type="text/css">
		#warp {
			border: solid 1px;
			width: 1800px;
			height: 600px;
			float: left;
		}
		#leftBar {
			border: solid 1px;
			width: 198px;
			height: 600px;
			float: left;
		}
		#content {
			border: solid 1px;
			width: 1598px;
			height: 600px;
			float: left;
		}
		#comment {
			border: solid 1px;
			width: 1800px;
			height: 300px;
			float: left;
		}
	</style>
</head>
<body>
	<div id="warp">
		<aside id="leftBar"></aside>
		<article id="content"></article>
	</div>
	<div id="comment"></div>
</body>
</html>