第 3 题:如何理解 HTML5 语义化?
什么是标签语义化?
- 提升代码可读性,便于团队开发和维护
为什么要标签语义化?
- 当网页去掉 CSS 样式时,页面能呈现出来清晰的结构
案例
不存在语义化
<div></div>
<div></div>
<div></div>
使用语义化
<header></header>
<main></main>
<footer></footer>
总结:从上面可以看出,一个页面里面放 3 个 div 别人也不知道这是啥意思。如果使用语义化标签就能清楚的知道分为 3 个模块顶部、中间、底部。
附加
此文章通过自媒体多平台发布,发布后不再进行维护,如对内容有任何异议可以到下方的 GitHub 中进行讨论
【持续维护/更新 500+前端面试题/笔记】https://github.com/noxussj/Interview-Questions/issues
【利用 THREE.JS 实现 3D 城市建模(珠海市)】https://3d.noxussj.top/
第 3 题:如何理解 HTML5 语义化?的更多相关文章
- 快速理解web语义化
什么是Web语义化 Web语义化是指使用恰当语义的html标签.class类名等内容,让页面具有良好的结构与含义,从而让人和机器都能快速理解网页内容.语义化的web页面一方面可以让机器在更少的人类干预 ...
- HTML5语义化元素
语义化元素:有意义的元素. 对语义化的理解: 正确的标签做正确的事情: HTML5语义化元素让页面内容结构化清晰: 便于开发人员阅读,理解,维护: 搜索引擎爬虫可以依赖语义化元素来确定上下文和每个关键 ...
- web标签语义化的理解_web语义化是什么意思
web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究 ...
- html5语义化标签使用规范
Html5添加了很多语义化标签,一个典型的html5页面结构可以如下安排 一.使用案例 1. 头部——header和nav标签 header头部,body下的直接子元素header一般用于放页面的介绍 ...
- Html5语义化标签详解及其兼容性处理
<header></header> 页眉 主要用于页面的头部的信息介绍,也可用于板块头部 <hgroup></hgroup> 页面上的一个标题组合 一个 ...
- html5语义化标签——回顾
html5 头部结构 <!doctype html> <meta charset=“utf-8”/> <header></header> 页眉 ...
- 【02】你是如何理解 HTML 语义化的,有什么好处
[02]你是如何理解 HTML 语义化的 01,语义化,就是通过HTML标签来表示页面包含的信息. 02,其中有HTML标签的语义化和CSS命名的语义化. 03,HTML标签语义化的的含义是: ...
- 第二季第十一天 html5语义化标签 css透明度
span不能设置宽高背景 HTML5语义化标签 <section>标签所包裹的是有一组相似的主题的内容,可以用这个标签来实现文章的章节.标签式对话框中的各种标签页等类似的功能. <s ...
- 说一说你对HTML5语义化的理解
本题地址:https://github.com/YvetteLau/Step-By-Step/issues/8 语义化意味着顾名思义,HTML5的语义化指的是合理使用语义化的标签来创建页面结构,如he ...
随机推荐
- 八、数据拟合分析seaborn
本文的主要目的是记住最主要的函数,具体的用法还得查API文档. 首先导入包: 1 %matplotlib inline 2 import numpy as np 3 import pandas as ...
- 前端基础——js数据类型及判断方法
一.数据类型 我们通常熟知的数据类型有六种,包括5种基本数据类型(Number, String, Boolean, Undefined, Null)和一种引用数据类型(Object).ES6又新增了一 ...
- vscode使用版本控制git commit unstaged时提示对话框的设置
使用 vscode 版本控制提交代码时,如果有 unstaged file,会有一个弹出框: 选择 always 或者 never ,这个框下次就不再弹出了. 如果你想让他再次出现,请去setting ...
- 无需会员将有道云笔记脑图转换xmind
我的烦恼 有道云笔记有脑图功能,我平时经常用到,之所以很少用到其他脑图工具,是因为我一直用有道云笔记写笔记.因此编辑脑图和查看脑图比较方便,但是需要将脑图导出的时候目前只支持图片和xmind,但是需要 ...
- PL/SQL连不上,报 ORA-12170:TNS 连接超时
排错步骤: 1.查看网络是否通畅 打开cmd, ping 数据库IP 2. 查看端口是否通畅 打开cmd,tnsping 数据库IP 如果piing不通,可能是防火墙问题 3.检查防火墙状态 #ser ...
- [Abp vNext 源码分析] - 20. 电子邮件与短信支持
一.简介 ABP vNext 使用 Volo.Abp.Sms 包和 Volo.Abp.Emailing 包将短信和电子邮件作为基础设施进行了抽象,开发人员仅需要在使用的时候注入 ISmsSender ...
- 【Azure 事件中心】在Service Bus Explorer工具种查看到EventHub数据在分区中的各种属性问题
问题描述 通过Service Bus Explorer工具,查看到Event Hub的属性值,从而产生的问题及讨论: Size in Bytes: 这个是表示当前分区可以存储的最大字节数吗? La ...
- 50、django工程(ajax)
50.1.ajax介绍: 1.ajax是在不跳转当前url地址的情况偷偷的往后台发送数据做增删改数据的操作,如果成功返回结果刷新当前页面,失败则提醒, 使用 id 或 name 属性. 2.模态对话框 ...
- [Usaco2018 Dec]Teamwork 题解
题目描述 题目描述 在Farmer John最喜欢的节日里,他想要给他的朋友们赠送一些礼物.由于他并不擅长包装礼物,他想要获得他的 奶牛们的帮助.你可能能够想到,奶牛们本身也不是很擅长包装礼物,而Fa ...
- 关于vim
全部删除:按esc后,然后dG全部复制:按esc后,然后ggyG全选高亮显示:按esc后,然后ggvG或者ggVG 在win中使用<C-a>是全选,如果需要在vim中使用<C-a&g ...