HTML5新增的5个语义标签

最新推荐文章于 2024-04-21 04:09:33 发布
最新推荐文章于 2024-04-21 04:09:33 发布
阅读量960 收藏
点赞数
分类专栏： HTML5 文章标签： HTML5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/a732894380/article/details/83341339
版权 
<!--main是主体内容 分为主体内容左和主体内容右 article是文章内容
	新增的语义标签IE兼容性不好，360用极速模式能打开，谷歌正常使用
-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>语义化标签</title>
		<style type="text/css">
			*{
				margin: 0px;
				padding: 0px;
			}
			header{
				width: 100%;
				height: 100px;
				background-color: red;
			}
			nav{
				width: 100%;
				height: 36px;
				background-color: green;
			}
			main{
				width: 100%;
				height: 500px;
				background-color: gray;
			}
			main > article{
				width: 75%;
				height: 100%;
				background-color: blue;
				float: left;
			}
			main > aside{
				width: 20%;
				height: 100%;
				background-color: brown;
				float: right;
			}
			footer{
				width: 100%;
				height: 80px;
				background-color: coral;
			
			}
			
		</style>
	</head>
	<body>
		<header>我是头部</header>
		<nav>我是导航</nav>
		<main>
			<article>
				<p>发布时间<time>2018年10月24日</time></p>
				<h1>我是文章的标题</h1>
				<p>p1</p>
	   			<p>p2</p>
	  			<p>p3</p>
			</article>
			<aside>这是右边</aside>
		</main>
		<footer>这是页脚</footer>
	</body>
</html>
恬静的男子
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML5新增的语义化标签
begin_glory的博客
01-31 3933
一、HTML5新增的语义化标签 1.<header>头部标签 2.<nav>导航标签 3.<content>内容标签 4.<section>定义文档某个区域 5.<aside>侧边栏标签 6.<footer>尾部标签 定义这些语义化标签的目的是为了简化代码，不需要整个网页都用div标签定义再class，可以直接写<header></header>。并且这些语义化标签可读性更强，看到这个标签就知道是哪个部分。 注意
html5新语义化标签
weixin_46048542的博客
08-16 1314
link标签最常见的用途是链接样式表。 <html> <head> <link rel="stylesheet" type="text/css" href="/html/csstest1.css" > </head> <body> <h1>我通过外部样式表进行格式化。</h1> <p>我也一样！</p> </body> </html> header页眉 footer页脚 ma
什么是HTML语义化标签？常见HTML语义化标签大全，以及不同标签比较
最新发布
2401_84097964的博客
04-21 627
总结来说，面试成功=基础知识+项目经验+表达技巧+运气。我们无法控制运气，但是我们可以在别的地方花更多时间，每个环节都提前做好准备。面试一方面是为了找到工作，升职加薪，另一方面也是对于自我能力的考察。能够面试成功不仅仅是来自面试前的临时抱佛脚，更重要的是在平时学习和工作中不断积累和坚持，把每个知识点、每一次项目开发、每次遇到的难点知识，做好积累，实践和总结。点击这里领取Web前端开发经典面试题。
HTML5 语义元素
qq_35892775的博客
10-15 465
语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者。 无语义 元素实例: &lt;div&gt; 和 &lt;span&gt; - 无需考虑内容. 语义元素实例: &lt;form&gt;, &lt;table&gt;, and &lt;img&gt; - 清楚的定义了它的内容. &lt;section&gt; 元素 &l...
HTML系列之语义化标签（H5)
老__L的博客
02-12 4267
本文主要介绍address、article、aside、footer、header、nav、section标签。 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。
13-html5新增的语义标签.html
09-11
13-html5新增的语义标签.html
HTML5新增的语义标签.ppt
07-02
HTML5新增的语义标签.ppt
HTML5新特性之语义化标签
09-27
HTML5新增了一系列语义化标签，如`<article>`用于定义独立的内容区块，`<section>`用于划分页面的区域，`<aside>`通常用于侧边栏内容，`<hgroup>`用于组合多个标题，`<header>`和`<footer>`分别表示页面的头部和尾部...
关于HTML5语义标签的实践(blog页面)
09-27
HTML5语义标签是现代网页设计的关键组成部分，它们旨在提高网页内容的可读性、可访问性和结构化。在HTML5中，新的语义标签被引入以替代或补充传统非语义化的标签，帮助开发者更好地描述页面内容的结构。本文将深入...
详解HTML5新增标签
09-28
相较于之前的HTML4.01和XHTML1.0，HTML5引入了一系列新的标签，这些标签更具有语义化，使得网页内容的结构更加清晰，同时也提高了网页的可访问性和可读性。 首先，`<header>` 标签用于定义页面或区域的头部，通常...
HTML第十次课堂笔记（新增语义化标签）
m0_59248606的博客
03-14 1044
一.HTML5是什么 HTML5是一个新的网络标准，现在仍处于发展阶段。目标是取代现有的HTML4.01和XHTML1.0 标准。它希望能够减少互联网富应用（RIA)对Flash、Silverlight、JavaFX等的依赖，并且提供更多能有效增强网络应用的API。 html5中新增的语义化标签可以分为两大类：块元素标签和内联元素标签。 ...
html5新增语义化标签
m0_65912225的博客
04-24 198
html5新增语义化标签
HTML5第一次作业--网页架构搭建
liuyingshudian的博客
03-05 1573
HTML5第一次作业--网页架构搭建 作业任务：结合课堂讲授的知识，利用HTML5新增的结构化语义标签搭建一个包含页眉、页脚和主题内容部分的网页架构，要求主体内容部分为四行三列。同时在距离页眉底部5px出添加一个包含5个以上导航条的导航栏，同时要求点击导航条会有跳转（可以使空跳转）【导航栏内容不限】 最终效果： 代码如下： ...
浅谈html语义化标签,Html5新增语义化标签
anang1264的博客
02-04 211
　　Html语义化标签,Html5新增语义化标签 自己在学习的期间,整理了下html关于语义化标签的一些知识,列的不是很全. 希望大家有新的见解可以给我留言,我会补充上去,谢谢大家 1.什么是语义化标签? 那么什么叫做语义化呢，说的通俗点就是：明白每个标签的用途（在什么情况下我可以使用这个标签才合理）比如， 网页上的文章的标题就可以用标题标签，网页上的各个栏目的栏目名称也可以使...
HTML5前端学习总结：新增的HTML5语义标签
weixin_33813128的博客
10-22 87
在学习的HTML5语义时候，我觉得这个标签设置很便于理解；以下是新增的语义标签还有一些新标签：&lt; title&gt;&lt;/title&gt;：简短、描述性、唯一（提升搜索引擎排名）。 &lt;hn&gt;&lt;/hn&gt;：h1~h6分级标题，用于创建页面信息的层级关系。 &lt;header&gt;&lt;/header&gt;：页眉通常包括网站标志、主导航、全站链接以及搜索框。 ...
HTML基础之 新增语义标签和属性
u011863822的博客
03-14 1306
HTML5的新增特性主要是针对以前的不足，增加了一些新的标签，新的表单和新的表单属性等。 这些新的特性都有兼容问题，基本都是很需要IE9+以上的版本的浏览器才能支持，不过目前浏览器都是是高级版本了，所以使用问题不到，不想几年前那样了。当然也不会列出很多，而是简单列出常用的一些标签。 简单的说一下HTML5的新特性有什么？ 用户媒介回访的video和audio元素。 新的特殊内容元素，比如article,footer,header,nav,section等 新的表单控件，比如：calendar,date,t
HTML5新增的语义化标签（常用）及解释
weixin_44022064的博客
09-09 1913
HTML5中新的语义元素 许多现有网站都包含以下HTML代码： <div id=”nav”>, <div class=”header”>, 或者 <div id=”footer”>, 来指明导航链接, 头部, 以及尾部. HTML5 提供了新的语义元素来明确一个Web页面的不同部分: <header> <nav> &...
HTML5新增语义元素
Flora的博客
12-13 633
<selection>  <selection>是一个“通用文档”。可以使用<selection>将文档标记为HTML，或者还可以包围HTML。但<selection>并不是一个通用容器，<div>才是。另外，只有对元素分组来指定样式时才使用<div>。 <article>  <article>是一个自包含的内容块，适用于博客文章和新闻。 <header>  <header>放在<sectio
HTML5新增语义化结构标签
06-09
是的，HTML5引入了许多新的语义化结构标签，这些标签包括： 1. `<header>`：定义文档或节的页眉。 2. `<nav>`：定义导航链接的部分。 3. `<section>`：定义文档中的节。 4. `<article>`：定义文档中的独立自包含...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值