HTML 元素标签语义化及使用场景
灵魂三问:
标签语义化是什么?
为什么要标签语义化?
标签语义化使用场景有哪些?
下面让我们跟着这三个问题来展开一下本文的内容。
一、标签语义化是什么?
标签语义化就是让元素标签做适当的事情。例如 p 标签就是代表文本,button 标签代表按钮,nav 标签代表导航等等。
二、为什么要标签语义化?
其实标签语义化是给浏览器和搜索引擎看的。没有人关心你写的 html 代码有没有正确的使用语义化,只有它们关心这件事情,是不是很暖心?
为什么浏览器关心?
DOM 的大部分内容具有隐式语义含义。 也就是说,DOM 采用的原生 html 元素能够被浏览器识别,并且可以预测其在各类平台上的工作方式。
例如用 div 实现的按钮和用原生 button 实现的按钮就有一些区别,在表单内 button 可以不用绑定 onclick 事件就可以提交表单内容,用 div 实现的按钮则不行。另外在浏览器中按 tab 键盘可以在 button 之间来回切换,而 div 则不可以。
还有 input 标签 type 属性,由于值的不同在手机上的表现也不同。例如 type="tel" 和 type="number" 弹出来的数字键盘是不一样的。
为什么搜索引擎关心?
搜索引擎的爬虫根据标签来确定上下文、关键字的权重,有利于 seo。
如果你觉得以上两点理由都不能打动你,从而正确的使用语义化,没有关系,使用 div 一把梭也是可以的。
三、标签语义化使用场景有哪些?
上面是一个比较常见的整体布局方式,其他布局类型其实都是万变不离其宗,逃不出这个使用框架(文末附上 HTML 源码)。
除了整体布局外,我们还要更细节一点,关注其他标签的使用方式。例如:
a 标签用于跳转。
h1 - h5 用于标题
b strong 用于强调
ul li 用于列表
...
这只是其中的一部分标签使用方式,更多的还得参考文档。
方便自己,方便他人,请正确使用语义化。
https://www.houdianzi.com/ vi设计公司
文中 DEMO 源码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>demo1</title>
<style>
html, body {
height: 100%;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
main {
height: calc(100% - 120px);
border: 1px solid blue;
}
header, footer {
height: 60px;;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid red;
}
header {
justify-content: flex-end;
}
ul {
display: flex;
align-items: center;
justify-content: space-around;
}
li {
list-style: none;
border: 1px solid orange;
height: 60px;
line-height: 60px;
width: 100px;
text-align: center;
}
main {
display: flex;
align-items: center;
justify-content: center;
}
aside {
width: 20%;
border: 1px solid #000;
height: 100%;
}
.right {
width: 80%;
height: 100%;
}
section {
height: 200px;
border: 1px solid green;
}
</style>
</head>
<body>
<header>
<nav>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</header>
<main>
<aside>
<p>这是一个侧边栏 aside</p>
</aside>
<div class="right">
<section>
<p>p1</p>
<p>p2</p>
</section>
<section>
<p>p3</p>
<p>p4</p>
</section>
</div>
</main>
<footer>
</footer>
</body>
</html>
原文地址:https://www.cnblogs.com/qianxiaox/p/15143866.html
- HTML 教程
- HTML 简介
- html div 标签介绍
- html span 标签介绍
- html a 超链接标签
- HTML Br换行标签介绍
- HTML P段落标签介绍
- HTML br与p标签区别
- Html H 标题标签
- html px em pt长度单位
- HTML form 标签
- HTML radio 单选框
- HTML B 加粗标签
- HTML strong加粗粗体标签
- HTML em 强调标签
- HTML i 斜体标签
- HTML u下划线标签
- HTML s 删除线标签
- Html img 图片标签
- Html上标注sup与下标注sub标签
- HTML nobr 禁止换行标签
- HTML hr 水平线标签
- HTML label 标签
- HTML input 标签
- HTML textarea 标签
- HTML select下拉列表标签
- HTML checkbox 多选框
- HTML font color 标签
- HTML iframe 框架标签
- HTML Table 表格
- HTML dl dt dd 标签
- HTML ol li有序列表标签
- HTML ul li 无序列表标签
- HTML 注释
- CSS 教程
- CSS 简介
- CSS 语法
- CSS Id 和 Class选择器
- CSS 样式的创建
- CSS background 背景介绍
- CSS 文本样式
- CSS font 字体
- CSS A 链接
- CSS ul ol列表样式
- CSS TABLE 样式
- CSS 框模型
- CSS border 边框
- CSS Outlines 轮廓
- CSS 外边距 Margin
- CSS Padding 内边距
- CSS 分组和嵌套选择器
- CSS 尺寸 (Dimension)
- CSS Display 属性
- CSS Position 定位
- CSS Float 浮动
- CSS 水平对齐(Horizontal Align)
- CSS 组合选择符
- CSS 伪类
- CSS 伪元素
- CSS 导航栏
- CSS 下拉菜单
- CSS 图片廊
- CSS 图像透明/不透明
- CSS sprite 图像拼合技术
- CSS 媒体类型
- CSS 属性选择器
- CSS 实例