关于HTML的语义化标签和无语义化标签

什么是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语义化无语义化标签内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 如何学习html的各种标签

    如何学习html的各种标签

    head标签学习 网页标题标签 <title>HTML学习</title> <!-- 告诉浏览器我们需要什么标题来显示页 --> 编码格式标签 <meta charset="utf-8" /> <!-- H5网页解析编码标签 --> <meta http-equiv="content-type" content="text/html; charset=utf-8"><!

  • vue在html标签{{}}中调用函数的方法总结及对比

    目录 一.问题 1)实现上述需求:有两种方式 2)两种实现方式对比: 二.解决方法(在html渲染时调用函数) 1.定义处理函数 2.引入处理函数,在data中定义函数,在html中使用 3.效果 4.优化 三.总结 一.问题 1.在html中对数据中的某一个标签是根据标签的类型书写的,值写在了{{}}中,希望显示的时候对值做某种细节处理. 例如:我的需求:后端返回姓名.年龄.出生日期.学历等组成的一个数组,出生日期要保存为带有时分秒的,但是显示时不需要时分秒. 1)实现上述需求:有两种方式 a

  • vue parseHTML函数解析器遇到结束标签

    目录 引言 match函数匹配正则endTag 关键 parseEndTag 函数代码 总结parseEndTag 函数作用 handleStartTag函数后续 最后更新 stack 栈以及 lastTag 引言 承接上篇 parseHTML 函数源码解析拿到返回值后的处理 接下来我们将会讲解当 textEnd === 0 解析器遇到结束标签,parse 结束标签的代码如下: // End tag: var endTagMatch = html.match(endTag); if (endTa

  • 详解如何用Java去除HTML标签

    目录 使用正则表达式 正则测试删除标签1 正则测试删除标签2 使用Jsoup 使用HTMLCleaner 总结 在我平时的工作中,偶尔会用 Java 做一些解析HTML的工作.有的时候我需要删除所有的HTML标签,只保留纯文字内容.这个问题在做过一些爬虫工作的朋友来说很简单.下面来说说,我们平时使用到的集中解析的方法. 使用正则表达式 通过爬虫爬到的HTML内容,从程序角度来讲,就是一个字符串.我们可以对其按照纯文本处理的方式来处理. 我们在做文本处理的时候,第一个想到的就是正则表达式.从一个字

  • HTML常用标签超详细整理

     <h2>HTML概述</h2> <h3>1.1 什么是HTML</h3> <p>HTML是做网站的.Web开发.互联网生态开发(PC端+移动端+微应用) 目前我们使用的都是HTML5,支持传统的PC端开发,还支持移动端开发还支持微应用开发,从而替换了部分传统的移动端开发技术</p> <h3>1.2  HTML概念</h3> <p>HTML:Hyper Text Markup Language,超文

  • React动态更改html标签的实现方式

    目录 如何动态更改html标签 Vue的实现方式 React的实现方式 React修改标签页名 方法 如何动态更改html标签 比如有这样的一个需求,子组件通过父组件传递过来的props,来动态显示<h1>到<h6>标签,可以先不管react,考虑下vue如何实现呢? Vue的实现方式 父组件 <template>     <div>         <Son :tagSize="1"/>     </div> &

  • Pycharm 如何设置HTML文件自动补全代码或标签

    Pycharm 如何设置HTML文件自动补全代码或标签

    在使用Pycharm编写Django模板时,要用到一些特殊的格式,比如 {{ - }},{% if %}等等,如果不设置Pycharm,只能一个符号一个符号的输入. 现在教大家如何设置自动补全这些东西. 1.首先,打开Pycharm的Files–>Settings–>Editor–>Live Templates 点击最右边的添加按钮,选择Live Template 2.添加标签 Abbreviation 处添加标签,比如 if Description 是描述这个标签用途的,随便写. Te

  • 正则表达式从HTML中匹配img标签的图片地址

    正则表达式从HTML中匹配img标签的图片地址

    目录 前言 分析 正则表达式 总结 前言 有玩过爬虫的人应该都有过在又臭又长的HTML中找寻信息的经历,虽然有各种工具和各种框架可以辅助查找,但是解析HTML的规则也是人想的,制定规则也是十分麻烦的.恰好在个人的项目中,需要从某个网站中爬取图片,好在需求比较简单,所以试着使用正则表达式来解决. 分析 每个网站中展示图片的地方,无非就是img标签或者style中background-image和background,先解决img标签中的图片.首先,地址在标签的src属性之中,所以找寻src的位置是

  • 关于HTML的语义化标签和无语义化标签

    什么是HTML语义化标签 语义化的标签,旨在让标签有自己的含义,让浏览器认识这个标签所传达的信息,是干什么的有什么作用. 比如:h1标题标签的语义是用它来标识网页或其他部分最重要的标题. 然而span 标签责没有独特的含义. 常用的语义化标签 header元素 是HTML5中新增的语义化标签,用于定义文档的页眉(介绍信息). nav元素 定义页面的导航链接部分区域. <header> <h1>这是标题</h1> <nav> <a>Home<

  • Java中的线程同步与ThreadLocal无锁化线程封闭实现

    Synchronized关键字 Java语言的关键字,当它用来修饰一个方法或者一个代码块的时候,能够保证在同一时刻最多只有一个线程执行该段代码. 当两个并发线程访问同一个对象object中的这个synchronized(this)同步代码块时,一个时间内只能有一个线程得到执行.另一个线程必须等待当前线程执行完这个代码块以后才能执行该代码块. 然而,当一个线程访问object的一个synchronized(this)同步代码块时,另一个线程仍然可以访问该object中的非synchronized(

  • Vue中component标签解决项目组件化操作

    一. 啰嗦几句 在vue项目组件化的过程中,遇到了一些问题,什么问题呢?就是在做一个多功能,多可用,多兼容的大组件的时候,发现在这个组件内部,实现了太多的if.for逻辑,包括大量的html元素,虽然说每段功能块都有批注,但是体积还是比较庞大,最近有些需求,需要将页面上的一大块筛选功能剥离开,形成单独的组件,统一数据渲染,统一组件管理,且这些功能无论是样式,或者是从结构来说,差异性都很大,所以考虑了以下几种开发方式: 1. 大容量单组件开发,渲染和传入的数据使用各种type.ctype判断 2.

  • 浏览器切换到其他标签页或最小化js定时器是否准时测试

    浏览器切换到其他标签页或最小化js定时器是否准时测试

    目录 前言 浏览器可见和不可见状态 setInterval setTimeout requestAnimationFrame 总结 如何解决 前言 这是我最近开发碰到的一个问题,本文是我测试出来的实践结果,供大家参考. 关于js定时器,setInterval和setTimeout,作为我们日常开发经常使用到的方法,大家一定非常熟悉.比如下面一个例子: setInterval(() => { console.log('1'); }, 500); 作为刚学前端没多久的新人也能知道,这段代码就是每过5

  • javascript实现函数柯里化与反柯里化过程解析

    函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第一个参数)的函数,并返回接受剩余的参数而且返回结果的新函数的技术.其由数学家Haskell Brooks Curry提出,并以curry命名. 概念往往都是干涩且难懂的,让我们用人话来解释就是:如果我们不确定这个函数有多少个参数,我们可以先给它传入一个参数,然后通过JS闭包(如若不懂JS闭包,请先学

  • 怎样用Javascript实现函数柯里化与反柯里化

    函数柯里化(黑人问号脸)???Currying(黑人问号脸)???妥妥的中式翻译既视感:下面来一起看看究竟什么是函数柯里化: 维基百科的解释是:把接收多个参数的函数变换成接收一个单一参数(最初函数的第一个参数)的函数,并返回接受剩余的参数而且返回结果的新函数的技术.其由数学家Haskell Brooks Curry提出,并以curry命名. 概念往往都是干涩且难懂的,让我们用人话来解释就是:如果我们不确定这个函数有多少个参数,我们可以先给它传入一个参数,然后通过JS闭包(如若不懂JS闭包,请先学

  • wordpress自定义标签云与随机获取标签的方法详解

    wp_tag_cloud() 函数的作用是用来标签云的,可以根据每个标签所关联的文章次数来定义字体大小.标签排序等属性.从 2.8 版本开始,添加了 分类法(taxonomy)参数,这就意味着,除了 标签(tags)以外,还可以将 分类(Categories) 或其他 自定义分类法(Custom Taxonomies)作为"云"显示. 用法 <?php wp_tag_cloud( $args ); ?> 默认用法 <?php $args = array( 'small

  • resultMap标签中里的collection标签详解

    resultMap标签中里的collection标签详解

    目录 resultMap标签中的collection标签 collection(一对多) collection标签中各属性的说明 resultMap标签中的collection标签 collection(一对多) 元素的作用和association元素的作用差不多一样,事实上,它们非常类似,也是映射到JavaBean的某个“复杂类型” 属性,只不过这个属性是一个集合列表,即JavaBean内部嵌套一个复杂数据类型(集合).和使用association元素一样,我们使用嵌套查询, 或者从连接中嵌套

  • 比较详细的Asp伪静态化方法及Asp静态化探讨

    目前,各大搜索引擎如google.百度.雅虎已经对动态页面诸如asp,php有着不错的支持了,只要动态页面后面的参数不要太长,如控制在3个参数内,页面内容做点优化,各大搜索对该类页面收录甚至不比静态html页面差,我有个全站是asp页的网站,其收录及排名远远超过了很多静态页的网站. 当然,任何网站,结构再好,如果没有内容作为支撑的话,最终还是留不住用户.搜索引擎的发展速度,已经不是当初几乎不能收录动态页面的水平了,各大搜索都在全力发展自己的索引技术,一般的动态页面在它们那里已经是能够轻易的纳入麾

  • HTML5视频播放标签video和音频播放标签audio标签的正确用法

    如何嵌入视频和音频 在网页里嵌入HTML5音频播放器和视频播放器的方法非常简单: <video src="//www.jb51.net/~j/theora_testsuite/320x240.ogg" controls autoplay loop> Your browser does not support the <code>video</code> element. </video> 上面这个例子显示了如何播放一个视频文件,并露出视频

随机推荐