HTML语义化的理解
语义化的主要目的:用正确的标签做正确的事情。
语义化验证方法:css裸奔--去掉css样式,然后看页面是否还具有很好的可读性。
语义化意义 / 优点:
1.让页面的内容结构化
2.利于浏览器解析和SEO搜索引擎优化。
3.提高代码的可维护和可重用性。
语义化内容:
1.标题语义化
2.图片语义化
3.表单语义化
4.表格语义化
图片语义化:
1.figcaption:图注文字
2.alt:给搜索引擎看
3.title:给用户看
<figure>
<img src="./01.jpg" alt="给搜索引擎用" title="给用户看">
<figcaption>741852963</figcaption>
</figure>
表单语义化:
1.label-for:增强鼠标的可用性
2.legend:表单组标题
3.fieldset:给表单分组
<form>
<fieldset>
<legend>表单组标题</legend>
<p>
<label for="name">名字:</label>
<input type="text" name="">
</p> </fieldset>
</form>
图片显示的方式:
1.使用img标签:HTML---> 搜索引擎优化
2.作为背景图:css --> 修饰页面
H5舍弃的标签:s、 u、 big、 center、 frame。
HTML语义化的理解的更多相关文章
- 对 HTML 语义化的理解
简述一下你对 HTML 语义化的理解? 用正确的标签做正确的事情. html 语义化让页面的内容结构化,结构更清晰,便于对浏览器.搜索引擎解析; 即使在没有样式 CSS 情况下也以一种文档格式显示,并 ...
- 【重构前端知识体系之HTML】讲讲对HTML5的一大特性——语义化的理解
[重构前端知识体系之HTML]讲讲对HTML5的一大特性--语义化的理解 引言 在讲什么是语义化之前,先看看语义化的背景. 在之前的文章中提到HTML最重要的特性,那就是标签.但是项目一大,标签多的看 ...
- 谈谈对HTML语义化的理解
什么是HTML语义化? HTML标签可以分为有语义的标签,和无语义的标签.比如table表示表格,form表示表单,a标签表示超链接,strong标签表强调.无语义标签典型的有<div>, ...
- 谈谈你对HTML语义化的理解。
1.什么是HTML语义化? 基本上都是围绕着几个主要的标签,像标题(h1-h6),列表(li),强调(strong em)等. 根据内容的语义化(内容结构化),选择合适的标签(代码语义化),便于开发者 ...
- web标签语义化的理解_web语义化是什么意思
web语义化是什么? Web语义化,使用语义恰当的标签,可以让页面具有良好的结构,页面元素具有良好的含义,从而让人和机器都能快速理解.语义化的web页面一方面可以让机器在更少的人类干预情况下收集并研究 ...
- 对html语义化的理解
所有人都知道html即超文本标记语言或超文本链接标示语言,是目前网络上应用最为广泛的语言,也是构成网页文档的主要语言. html标签中的大部分都是由"语义化"标签所担任 那么,它有 ...
- 说一说你对HTML5语义化的理解
本题地址:https://github.com/YvetteLau/Step-By-Step/issues/8 语义化意味着顾名思义,HTML5的语义化指的是合理使用语义化的标签来创建页面结构,如he ...
- 面试--html语义化的理解和作用
什么是HTML语义化 1.让开发者阅读和写出更优雅的代码2.让浏览器的爬虫和机器很好的解析 为什么要语义化 有利于seo方便其他设备监听 屏幕阅读设备 盲人阅读器方便团队协作开发 语义化元素 head ...
- 对HTML语义化的一些理解和记录
什么是HTML语义化 说HTML语义化就要先说说HTML到底负责的什么?下面摘自维基百科: 超文本标记语言(英语:HyperText Markup Language,简称:HTML)是一种用于创建网页 ...
随机推荐
- SAP MM 标准采购组织的分配对于寄售采购订单收货的影响
SAP MM 标准采购组织的分配对于寄售采购订单收货的影响 PO 4100004022 是一个寄售的采购订单, 采购组织是CSAS, 工厂代码SZSP.采购信息记录也是有的, MIGO试图对该采购订单 ...
- T-SQL语法基础
一.T-SQL语言的分类 DDL-数据定义语言 create-创建 alter-修改 drop-删除(针对对象) DML-数据操作语言 Insert-插入 update-更新 delete-删除(针对 ...
- 关于int main( int argc, char* argv[] ) 中arg和argv参数的解析及调试
https://blog.csdn.net/LYJ_viviani/article/details/51873961 https://stackoverflow.com/questions/30241 ...
- Android 开发之v4库冲突问题解决方案说明
问题背景 Android Studio 开发时使用到了 GSYVideoPlayer 开源的播放器框架,配置信息如下: implementation 'com.shuyu:GSYVideoPlayer ...
- 数组for循环查找范围
数组for循环查找范围,如果是判读是否在键值之间,如$array[$i],那么接邻的元素不能用$array[$i+1]或者$array[$i-1]只能用$array[$i++]
- .Net之Nopi Excel数据导出和批量导入功能
一.介绍NPOI和编写demo的原因 1.Npoi是什么: 它是一个专门用于读写Microsoft Office二进制和OOXML文件格式的.NET库,我们使用它能够轻松的实现对应数据的导入,导出功能 ...
- CSS Modules In Webpack
1)从形式上看,CSS Modules 是将CSS中的选择器转换为变量,然后在DOM中引用变量来引入样式. 2)从效果上看,CSS Modules 可以将CSS选择器名字转成随机字符串,保证选择器同名 ...
- ansible copy 模块的使用
copy copy 模块是将 ansible 管理主机上的文件拷贝上远程主机中,与 fetch 相反,如果目标路径不存在,则自动创建,如果 src 的目录带“/” 则复制该目录下的所有东西,如果 sr ...
- Android开发:Eclipse+OpenCV环境搭建
一.OpenCV预备: OpenCV是一个跨平台计算机视觉库,可以运行在Linux.Windows.Android和Mac OS操作系统上.它由一系列 C 函数和少量 C++ 类构成,同时提供了Pyt ...
- python进程和线程(六)
协程 协程,又称微线程,纤程.英文名Coroutine.顾名思义,协程是协作式的,也就是非抢占式的程序(线程是抢占式的).协程的关键字是yield,一看到这个就想到了生成器对不对?那就顺便回顾一下生成 ...