html语义化标签和无语义化标签

2024-05-30 09:39:35

什么是HTML语义化标签

语义化的标签，旨在让标签有自己的含义，让浏览器认识这个标签所传达的信息，是干什么的有什么作用。
比如：h1标题标签的语义是用它来标识网页或其他部分最重要的标题。
然而span 标签责没有独特的含义。

常用的语义化标签

header元素
是HTML5中新增的语义化标签，用于定义文档的页眉（介绍信息）。
nav元素
定义页面的导航链接部分区域.

  <header><h1>这是标题</h1><nav><a>Home</a><a>Other</a><a>About</a></nav></header>

标题标签
双标签独占一行，从h1-h6字体大小逐渐减小，重要性依次降低，H1在一个页面只出现一次字体加粗、字体加大。外带介绍快捷创建的方式.

<!-- 快捷创建标签：h3*6  快速创建六个是h3的标题标签h$*6   快速创建h1到h6标题标签无内容h${我爱你中国}*6  快速创建h1到h6标题标签内容是：我爱你中国h${我爱你中国$}*6  快速创建h1到h6标题标签内容是：我爱你中国+数字（1-6）--><h1>我爱你中国1</h1><h2>我爱你中国2</h2><h3>我爱你中国3</h3><h4>我爱你中国4</h4><h5>我爱你中国5</h5><h6>我爱你中国6</h6>

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>

html语义化标签和无语义化标签相关推荐

微服务化之无状态化和容器化
文章转自网易云架构师刘超的个人微信公众号本文章为<互联网高并发微服务化架构实践>系列课程的第四篇前三篇为: 微服务化的基石–持续集成微服务的接入层设计与动静资源隔离微服务化的数据库 ...
常见的html行级元素及语义,HTML入门之——结构，常用标签及其属性，再加上语义化...
一,HTML简介(来源HTML百度百科) HTML:超文本标记语言,是指能够包含链接,图片,程序,视频等非文字元素的页面二,HTML,XML,XHTML之间有什么区别 HTML:超文本标记语言,语法 ...
浅谈html的语义化和一些简单优化,html标签语义化
1.什么是语义化? 必应网典的解释语义化是指用合理HTML标记以及其特有的属性去格式化文档内容.通俗地讲,语义化就是对数据和信息进行处理,使得机器可以理解. 语义化的(X)HTML文档有助于提升你的 ...
什么是HTML语义化标签？为什么要用H5语义化标签？HTML5语义化标签有哪些
对于大部分初学者来说,可能无法理解,明明在学习的时候,用div标签就能构成页面,为什么要用h5语义化标签?可能有一些前端工作者对HTML标签语义化的概念也不是很清楚,那么究竟什么是HTML语义化标 ...
HTML 字体标签图片标签列表标签链接标签 div span 语义化标签表格标签
文章目录 HTML 字体标签图片标签列表标签链接标签 div span 语义化标签表格标签 HTML 概念:是最基础的网页开发语言 Hyper text markup language 超文本 ...
html语义化有利于seo,HTML5语义化标签对SEO的影响
问:html5语义化标签对SEO有什么影响? 答:html5语义化标签不会对SEO造成重大的影响,它并不会影响你的网站排名以及抓取:语义化标签主要是为了让搜索引擎更加的懂你,更加的明白你的网站:不用h ...
html语义化有利于seo,HTML语义化和SEO优化
什么是HTML语义化比抖朋要插支一圈不者地? &l环行进端处触码通法果泉位可近境其行框理发t;基本上都是围绕着几个主要的标签,像标题(H1~H6).列表(li).强调(strong em)等等 ...
html语义化有哪些优点,语义化的HTML结构到底有什么好处？
相信大家都知道html和css,知道html结构和css表现分离,知道html语义化,这些都是这几年的热门关键字.语义化的html在国内也是一两年前才开始被追捧的,看看现在群里谈论的html结构,关于 ...
html中无语义的标签,HTML5 语义元素
HTML5 语义元素语义= 意义语义元素 = 有意义的元素什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者. 无语义元素实例: 和 - 无需考虑内容. 语义元素实例: , 浏 ...

最新文章

热门文章