HTML5特性——语义化标签

最新推荐文章于 2022-11-20 21:31:46 发布
最新推荐文章于 2022-11-20 21:31:46 发布
阅读量235 收藏 1
点赞数 1
分类专栏： h5基础篇 文章标签： html5
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42000660/article/details/118857030
版权

一、语义化标签有哪些？有什么含义？

1、<header>...</header>    头部

2、<footer>...</footer>    尾部

3、<nav>...</nav>    导航

4、<article>...</article>    文章（通常指数据内容）

5、<aside>...</aside>    侧边栏

6、<main>...</main>    网页主体

7、<section>...</section>    区块、片段类似div容器

二、应用小案例

 代码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>语义化标签</title>
	</head>
	<style type="text/css">
		* {
			margin: 0px;
			padding: 0px;
		}
		header,footer{
			height: 60px;
			background-color: #808080;
			text-align: center;
			color: #fff;
			line-height: 60px;
		}
		main{
			background-color: #87CEEB;
			overflow: auto;
		}
		nav,section,aside {
			float: left;
			color: #fff;
			text-align: center;
			height: 500px;
		}
		nav{
			width: 20%;
			background-color: #87CEEB;
		}
		nav>a{
			display: block;
			background-color: #0999F8;
			padding: 10px;
			margin: 10px;
		}
		section{
			width: 50%;
			background-color: #b6f4b8;
		}
		section> article{
			overflow: auto;
		}
		section> article>p{
			margin: 10px;
			padding: 5px;
			background-color: #4cffac;
		}
		aside{
			background-color: #fbff9c;
			width: 30%;
		}
		aside>p{
			margin: 10px;
			padding: 10px;
			background-color: #ffff75;
		}
	</style>
	<body>
		<header class="mui-bar mui-bar-nav">
			Header
		</header>
		<main>
			<nav>
				<a href="#">LInk</a>
				<a href="#">LInk</a>
				<a href="#">LInk</a>
				<a href="#">LInk</a>
				<a href="#">LInk</a>
				<a href="#">LInk</a>
				<a href="#">LInk</a>
			</nav>
			<section>
				<article>
					<p>article</p>
					<p>article</p>
					<p>article</p>
					<p>article</p>
					<p>article</p>
					<p>article</p>
				</article>
				<article>
					<p>article</p>
					<p>article</p>
					<p>article</p>
					<p>article</p>
				</article>
				
			</section>
			<aside>
				<p>aside</p>
				<p>aside</p>
				<p>aside</p>
				<p>aside</p>
				<p>aside</p>
			</aside>
		</main>
		<footer>
			Footer
		</footer>
	</body>
</html>

codeLiuhy
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
语义化标签——HTML
01-08
语义化标签 在网页中HTML专门负责网页的结构 在使用html标签时，应关注的是标签的语义，而不是它的样式 标题标签 h1~h6(一共有六级标签) h1在网页中的重要性仅次于title，一般情况下一个页面只会有一个h1 一般情况下标题标签只会使用到h1~h3 标题标签都是块元素 块元素（Black element）：在页面中独占一行的元素 块元素： 在网页中一般通过块元素来对页面进行布局 行内元素： 行内元素主要用来包裹文字（使文字有特殊效果） 一般情况下会在块元素放行内元素，而不会在行内元素放块元素 p元素中不能放任何的块元素 浏览器在解析网页时，会自动对网页中不符合规范的
HTML5新特性之语义化标签
09-27
HTML5 只有一个简单的文档类型：<!DOCTYPE html>，表示浏览器会按照标准模式解析。今天小编给大家带来了HTML5新特性之语义化标签，感兴趣的朋友一起看看吧
HTML5-语义化标签
hjg的专栏
07-10 1856
HTML5发布新增了多个语义化标签，所谓语义化标签的意思就是使用含有具体意义的词语作为标签。 从网页的布局来说，一般会分成几个区域，如头部、地图、标题等等，在HTML5之前都是使用div、span添加不同的样式来区分。HTML5之后就对这块做了优化，使用了含有具体意义的词语来表示对应的布局模块。 语义化标签包括: 1.header 网页头部 2.nav 网页导航 3.footer 网页底部 4.
语义化标签
qq_43944285的博客
03-02 1181
语义化
语义化标签大全
qq_42241357的博客
09-19 843
语义化标签 什么是HTML语义化标签？常见HTML语义化标签大全 语义化的标签，旨在让标签有自己的含义。 一、什么是HTML语义化标签 语义化的标签，旨在让标签有自己的含义。 1 <p>一行文字</p> 2 <span>一行文字</span> 如上代码，p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签责没有独特的含义。 二、语义化标签的优势 代码结构清晰，方便阅读，有利于团队合作开发。 方便其他设备解析（如屏幕阅读器、盲
HTML5概述 - 语义化标签
前端队长Daotin
11-20 6257
一、HTML5 简介1、什么是 HTML5HTML5 不是一门新的语言，而是我们之前学习的 HTML 的第五次重大修改版本。2、HTML 的发展历史•超文本标记语言（第一版，不叫 HTML 1.0）——在 1993 年 6 月作为互联网工程工作小组（IETF）工作草案发布（并非标准）；•HTML 2.0——1995 年 11 月作为 RFC 1866 发布，在 RFC 2854 于 2000 年 ...
HTML5语义化标签
weixin_45977625的博客
09-20 539
HTML5新增的语义化标签主要有： <article>、<section>、<nav>、<aside>、<header>、<footer>、<time>等等… 优点： 为了在没有CSS的情况下，页面也能呈现出很好地内容结构、代码结构 比<div>标签有更加丰富的含义，方便开发与维护 方便搜索引擎能识别页面结构，有利于SEO 方便其他设备解析（如移动设备、盲人阅读器等） 有利于合作，遵守W3C标准 注意：
HTML系列之语义化标签（H5)
老__L的博客
02-12 2872
本文主要介绍address、article、aside、footer、header、nav、section标签。 以前布局，我们基本用 div 来做。div 对于搜索引擎来说，是没有语义的。
h5语义化标签
Almee211的博客
07-28 3030
一、H5的语法 1.内容类型（ContentType） HTML5的文件扩展符与内容类型保持不变，仍然为".html"或".htm" 2.DOCTYPE声明 <!DOCTYPE html>不区分大小写 3.指定字符集编码 <meta charset="UTF-8"> 4.可省略标记的元素不允许写结束标记的元素：br、col、embed、hr、img、input、link、meta 5.可以省略结束标记的元素： li、dt、dd、p、option...
H5语义化标签
weixin_46331416的博客
08-11 2474
什么是H5语义化标签？为啥什么要用H5语义化标签？H5语义化标签的优点和特性，H5常用语义化标签以及的相关使用
Html5 什么是语义化标签？ 常见的语义化标签有哪些？
热门推荐
m0_51273200的博客
09-16 1万+
h5 语义化标签的推出很好的解决了满屏的 div 布局，语义化顾名思义就是能让人一眼就看出来每一个标签的作用和含义，使用语义恰当的标签，使页面有良好的结构，页面元素有含义，能够让和搜索引擎都容易理解。一张图就可以清晰的展示语义化标签的作用，确实挺好，感觉像搭积木一样，一块一块的把整体搭建出来。 以下是常见的语义化标签及其作用 <header> <!--：页眉通常包括网站标志、主导航、全站链接以及搜索框。--><nav> ...
html5语义化标签以及使用标准
01-20
html5语义化标签 一、首先我们提出疑问，什么是语义化标签以及我们为什么要去使用它？ 在语义化标签出来之前，我们可以用div+css实现完全可以实现布局，为什么要多此一举呢？ 1）为了在没有CSS的情况下，页面也能...
详解HTML5常用的语义化标签
01-21
快速查询 article | aside | nav | section | header | footer 架构预览 nav 定义导航链接的部分 ... <li><a>Html5</a> article 定义文章 装载显示一个独立的文章内容，论坛帖子、新闻、博客文章、用户评论等，
什么是HTML语义化标签？常见HTML语义化标签大全，以及不同标签比较
任磊
06-17 4155
一、什么是HTML语义化标签 语义化的标签，旨在让标签有自己的含义。 <p>一行文字</p> <span>一行文字</span> 如上代码，p 标签与 span 标签都区别之一就是，p 标签的含义是：段落。而 span 标签责没有独特的含义。 二、语义化标签的优势 代码结构清晰，方便阅读，有利于团队合作开发。 方便其他设备解析（如屏幕阅读器、盲人阅读器、移动设备）以语义的方式来渲染网页。 有利于搜索引擎优化（SEO）。 三、常见的语义化标签 因此我们
什么是语义化标签，常见的语义化标签介绍
weixin_43183219的博客
01-09 1万+
语义化标签的释义以及好处，常见的语义化标签介绍
【前端】语义化标签详解
RogerQianpeng的博客
05-14 3692
1 语义，语义化，HTML HTML描述的是网页内容的含义，即，语义。 语义化HTML，就是用最恰当的HTML元素，标记内容。 语义化标签，也即，有含义的标签。 2 意义 提升可访问性和互操作性（内容对于借 助辅助技术的残障访问者是可访问的， 同时对于台式机、手机、平板电脑及 其他设备上的浏览器都是可访问的）。 提升搜索引擎优化（SEO）的效果。 使维护代码和添加样式变得容易。 （通常）使代码更少，页面加载更快。 3 常用语义化标签 h1~h6：heading，标题 p：paragraph，段落 em
HTML中的语义化标签
ct5211314的博客
09-05 6267
语义化标签可以理解为用于进行网页页面构建的标签，他们不会影响页面内容，只是对页面结构的规范话。
overFlow的含义与巧妙使用
qq_42000660的博客
07-17 7254
一、overFlow意义 overflow：容器（满的）溢出，它有以下取值： 1、visible（默认）溢出部分可见 2、hidden溢出部分隐藏 3、auto适当加入滚动条（当父元素高度固定，内容溢出，设置overflow: auto会出现滚动条） overflow-x和overflow-y也有这三种取值，分别代表水平或者垂直方向溢出的处理 二、实现案例 1、默认展示 2、当鼠标悬浮在某一卷时，其他的内容隐藏，该卷展开，效果如下： 3、代码 <!DOCT...
HTML5的新特性以及语义化标签
最新发布
06-13
HTML5中新增的语义化标签主要有以下几个： 1. <header>：定义文档或区域的页眉。 2. <nav>：定义导航链接的部分。 3. <article>：定义独立的文章内容。 4. <section>：定义文档中的一个区域。 5. <aside>：定义...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值