“约见”面试官系列之常见面试题之第五十四篇之语义化标签(建议收藏)
目录
什么是语义元素?
为什么要语义化?
HTML5常用的语义元素
很多面试官会问:谈谈你对 HTML5语义化标签的理解。那么本篇博客专门解答一下这个问题。
什么是语义元素?
语义是指对一个词或者句子含义的正确解释。很多html标签也具有语义的意义,也就是说元素本身传达了关于标签所包含内容类型的一些信息。例如,当浏览器解析到<h1></h1>标签时,它将该标签解释为包含这一块内容的最重要的标题。h1标签的语义就是用它来标识特定网页或部分最重要的标题。
为什么要语义化?
- 代码结构: 使页面没有css的情况下,也能够呈现出很好的内容结构
- 有利于SEO: 爬虫依赖标签来确定关键字的权重,因此可以和搜索引擎建立良好的沟通,帮助爬虫抓取更多的有效信息
- 提升用户体验: 例如title、alt可以用于解释名称或者解释图片信息,以及label标签的灵活运用。
- 便于团队开发和维护: 语义化使得代码更具有可读性,让其他开发人员更加理解你的html结构,减少差异化。
- 方便其他设备解析: 如屏幕阅读器、盲人阅读器、移动设备等,以有意义的方式来渲染网页。
HTML5常用的语义元素
HTML5提供了新的语义元素来定义网页的不同部分,它们被称为“切片元素”,如图所示
大约有100多个HTML语义元素可供选择,以下是常用的语义元素
结构体 | 文本 | 一致 |
|
|
|
<h1>~<h6>元素
定义页面的标题,h1元素具有最高等级,h6元素具有最低的等级
<h1>top level heading</h1><section><h2>2nd level heading</h2><h3>3nd level heading</h3><h4>4th level heading</h4><h5>5th level heading</h5><h6>6th level heading</h6></section>
<header>元素
用于定义页面的介绍展示区域,通常包括网站logo、主导航、全站链接以及搜索框。也适合对页面内部一组介绍性或导航性内容进行标记。
<header><h1>HTML Reference</h1><nav><a>Home</a><a>About</a><a>Contact</a></nav></header>
<nav>元素
定义页面的导航链接部分区域,不是所有的链接都需要包含在<nav>中,除了页脚再次显示顶级全局导航、或者包含招聘信息等重要链接。
<nav><a>Home</a><a>About</a><a>Contact</a></nav>
<main>元素
定义页面的主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。
<main><h1>My blog test</h1><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p><p>etc.</p></main>
<article>元素
定义页面独立的内容,它可以有自己的header、footer、sections等,专注于单个主题的博客文章,报纸文章或网页文章。article可以嵌套article,只要里面的article与外面的是部分与整体的关系。
<article><header><h3><a href="">My blog post</a></h3></header><section><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p></section><footer><small>Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="">Code</a></small></footer></article>
<section>元素
元素用于标记文档的各个部分,例如长表单文章的章节或主要部分。
<section><h2>Section title</h2><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p></section>
<aside>元素
定义与主要内容相关的内容块。通常显示为侧边栏。
<aside><h3>About the author</h3><p>Frontend Designer from Bordeaux, currently working for Improbable in sunny London.</p></aside>
<footer>元素
定义文档的底部区域,通常包含文档的作者,著作权信息,链接的使用条款,联系信息等
<footer>COPYRIGHT@dingFY_Demi</footer>
<small>元素
为较不重要的内容定义小字体。如果被包围的字体已经是字体模型所支持的最小字号,那么 <small> 标签将不起任何作用。
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec viverra nec nulla vitae mollis.</p><small>Posted on <time datetime="2017-04-29T19:00">Apr 29</time> in <a href="/category/code">Code</a></small>
<strong>元素
把文本定义为语气更强的强调的内容,以表示内容的重要性。
HTML should only be used to write <strong>content</strong>, and keep CSS for <strong>styling</strong> the web page.
<em>元素
标记内容着重点(大量用于提升段落文本语义),通常呈现为斜体文字。
HTML should only be used to write <em>content</em>, and keep CSS for <em>styling</em> the web page.
<blockquote>元素
定义块引用,浏览器会在 blockquote 元素前后添加换行,并增加外边距。cite属性可用来规定引用的来源
<blockquote cite="https://en.wikiquote.org/wiki/Marie_Curie">Here is a long quotation here is a long quotation here is a long quotationhere is a long quotation here is a long quotation here is a long quotationhere is a long quotation here is a long quotation here is a long quotation.</blockquote>
<abbr>元素
解释缩写词。使用title属性可提供全称,只在第一次出现时使用就ok。
The <abbr title="People's Republic of China">PRC</abbr> was founded in 1949.
本面试题为前端常考面试题,后续有机会继续完善。我是歌谣,一个沉迷于故事的讲述者。
欢迎一起私信交流。
“睡服“面试官系列之各系列目录汇总(建议学习收藏)
“约见”面试官系列之常见面试题之第五十四篇之语义化标签(建议收藏)相关推荐
- “约见”面试官系列之常见面试题之第一百零四篇之vue优点(建议收藏)
vue的优点: 1.轻量级框架 只关注视图层,是一个构建数据的视图集合,大小只有几十kb Vue.js通过简洁的API提供高效的数据绑定和灵活的组件系统 2.简单易学 国人开发,中文文档,不存在语言障 ...
- “约见”面试官系列之常见面试题之第八十四篇之手写promise(建议收藏)
class Promise{constructor(excutor){this.value = '';this.reason = '';this.status = 'padding'this.onFu ...
- “约见”面试官系列之常见面试题之第七十四篇之v-if和v-for优先级(建议收藏)
永远不要把 v-if 和 v-for 同时用在同一个元素上. 一般我们在两种常见的情况下会倾向于这样做: 为了过滤一个列表中的项目 (比如 v-for="user in users" ...
- “约见”面试官系列之常见面试题之第六十四篇之call和apply区别(建议收藏)
call和apply用来调用函数,并用指定对象(第一个参数)替换函数的 this 值,同时用指定数组替换函数的参数.注:也可以不指定参数,此时只是单纯的调用函数,如:fun.call() 语法: fu ...
- “约见”面试官系列之常见面试题之第五十九篇之js中push(),pop(),unshift(),shift()的用法小结 (建议收藏)
1.push().pop()和unshift().shift() 这两组同为对数组的操作,并且会改变数组的本身的长度及内容. 不同的是 push().pop() 是从数组的尾部进行增减,unshift ...
- “约见”面试官系列之常见面试题之第五十八篇之join和split(建议收藏)
join() 方法用于把数组中的所有元素放入一个字符串.元素是通过指定的分隔符进行分隔的. <script>var a=new Array();a[0]="XHTML" ...
- “约见”面试官系列之常见面试题之第五十六篇之typeof返回的数据类型(建议收藏)
typeof 共返回6种数据格式: 1.object 2.undefined 3.string 4.number 5.boolean 6.function 特别注意Array和null返回的都是obj ...
- “约见”面试官系列之常见面试题之第五十二篇之标准模式和怪异模式(建议收藏)
在标准模式页面按照HTML,CSS的定义渲染,而在怪异模式就是浏览器为了兼容很早之前针对旧版本浏览器设计,并未严格遵循W3C标准而产生的一种页面渲染模式.浏览器基于页面中文件类型描述的存在以决定采用哪 ...
- “约见”面试官系列之常见面试题之第八十九篇之vue生命周期作用(建议收藏)
那么vue 生命周期有哪些阶段呢 一.创建 1.beforeCreate:这个阶段实例已经初始化,只是数据观察与事件机制尚未形成,不能获取DOM节点(没有data,没有el) 使用场景:因为此时dat ...
最新文章
- “智慧血联网平台”亮相军民融合技术装备博览会
- 黑客带来了病毒攻击软件还是文化?
- 搭建WEB服务详解(二)
- 阿里云 EDAS 3.0 助力唱鸭提升微服务幸福感
- ogm session_带有Hibernate OGM的NoSQL –第三部分:在WildFly上构建REST应用程序
- linux怎么使多条命令同时执行
- linux安装python2环境_Python基础手册 2 —— Python 环境搭建(Linux)
- jquery php联动,jQuery结合PHP+MySQL实现二级联动下拉列表[实例]
- 哥斯拉Godzilla Shell管理工具使用,马分析,特征分析(4K屏不好用,Webshell)
- 周鸿祎:不得不说的话
- matplotlib 设置水平线、垂直线
- shell逐行读取文件拼接Sql语句并访问数据库
- *第八周*数据结构实践项目二【建设链串算法库】
- 《深入实践Spring Boot》阅读笔记之二:分布式应用开发
- 【commons-beanutils专题】003- PropertyUtils 专题
- NB-IoT蜂窝窄带物联网概念
- CISCO路由器、交换机设备破解密码
- 基于JAVA银创科技有限公司人事信息系统计算机毕业设计源码+系统+数据库+lw文档+部署
- Flash数据读取和保存
- 【最近抖音上元宇宙虚拟项目七国争霸,直播互动游戏源码解析】
热门文章
- 记录一次bug解决过程:数据迁移
- Who is the best at Dataset X?
- enterFrame是什么意思?
- java索引ref_java – 如何使用jgit库将git HEAD指向特定的ref?
- 服务器上运行arp,服务器ARP病毒的特征及防护说明
- python基础代码的含义_Python基础学习篇
- 英特尔固态硬盘540s开卡_英特尔Z490主板绝配?技嘉PCIe 3.0 x8固态硬盘测试:6.5GB/s读速...
- Linux SD卡驱动开发(四) —— SD 控制器之真正的硬件操作
- Linux 字符设备驱动结构(二)—— 自动创建设备节点
- C语言日志操作类实例