HTML的语义化标签和无语义化标签怎么使用
这篇文章主要介绍“HTML的语义化标签和无语义化标签怎么使用”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“HTML的语义化标签和无语义化标签怎么使用”文章能帮助大家解决问题。
什么是HTML语义化标签
语义化的标签,旨在让标签有自己的含义,让浏览器认识这个标签所传达的信息,是干什么的有什么作用。 比如:h2标题标签的语义是用它来标识网页或其他部分最重要的标题。 然而span 标签责没有独特的含义。
常用的语义化标签
header元素
是HTML5中新增的语义化标签,用于定义文档的页眉(介绍信息)。
nav元素 定义页面的导航链接部分区域.
<header>
<h2>这是标题</h2>
<nav>
<a>Home</a>
<a>Other</a>
<a>About</a>
</nav>
</header>
标题标签
双标签独占一行,从h2-h7字体大小逐渐减小,重要性依次降低,H1在一个页面只出现一次字体加粗、字体加大。外带介绍快捷创建的方式.
<!--
快捷创建标签:
h4*6 快速创建六个是h4的标题标签
h$*6 快速创建h2到h7标题标签无内容
h${我爱你中国}*6 快速创建h2到h7标题标签内容是:我爱你中国
h${我爱你中国$}*6 快速创建h2到h7标题标签内容是:我爱你中国+数字(1-6)
-->
<h2>我爱你中国1</h2>
<h3>我爱你中国2</h3>
<h4>我爱你中国3</h4>
<h5>我爱你中国4</h5>
<h6>我爱你中国5</h6>
<h7>我爱你中国6</h7>
footer元素 定义文档的底部区域,著作权信息,使用条款,联系信息等
<footer>
定义文档的底部区域
</footer>
段落标签 p
<p>lorem</p>
lorem: 快速创建一段无意义文字 段落标签 p是独占一行双标签
<p>Lorem ipsum dolor consectetur voluptatem magni numquam aperiam.</p>
hr: 横线 单标签,独占一行 br:换行 单标签,不独占一行
<hr> <hr> <br><br> <hr>
以下的都是双标签、在一行展示
加粗 b、strong(强调语义)
倾斜 i 、em(强调语义)
下划线 u、ins(强调语义)
删除线 s、del(强调语义)
Lorem ipsum dolor sit<b>amet</b><strong>sit</strong>
<i>dolor</i>aaa<em>dolor</em> <u>ipsum</u><ins>ipsum</ins>
<s>Lorem</s><del>Lorem</del>
无语义化标签
div: 分区 结合css页面布局 双标签、独占一行
<div>
我是div标签
</div>
span: 文本标签 双标签、在一行展示
<span>我是span标签</span>
a 标签 用于控制页面之间跳转 a标签并不算是语义标签:他没有意义,只是一个链接。
<nav>
<a>Home</a>
<a>Other</a>
<a>About</a>
</nav>
相关内容
这些是最新的
热门排行
- THINKPHP5+GatewayWorker+Workerman 开发在线客服系统
- 在手机浏览器网页中点击链接跳转到微信界面的方法
- 尊云网站目录系统 ThinkPHP5网站分类目录程序 v2.2.221011
- CentOS 7安装shadowsock(一键安装脚本)
- AdminTemplate 基于LayUI 2.4.5实现的网站后台管理模板
- 用NW.js(node-webkit)开发多平台的桌面客户端
- PHP生成随机昵称/用户名
- THINKPHP5网站分类目录程序 尊云网站目录系统
- 织梦(DEDECMS)微信支付接口 微信插件
- 基于LayUI开发的 网站后台管理模板 BeginnerAdmin
- 响应式后台网站模板 - AMA.ADMIN
- layuiAdmin后台管理模板 Iframe版
- LayUI 1.0.9 升级 至 LayUI 2.1.4 方法
- 简洁清爽的会员中心模板
- jQuery幸运大转盘抽奖活动代码