返回顶部
首页 > 资讯 > 前端开发 > node.js >从符号学的角度来看Html/CSS中的示例分析
  • 459
分享到

从符号学的角度来看Html/CSS中的示例分析

2024-04-02 19:04:59 459人浏览 八月长安
摘要

小编给大家分享一下从符号学的角度来看html/CSS中的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!CSS的好处是:H

小编给大家分享一下从符号学的角度来看html/CSS中的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!

CSS的好处是:HTML元素可以在不依赖class属性的情况下实现各种风格的样式化,文章试图证明class属性是过时的,不适合于布局,不用class可以训练我们创建更多可用,可重用的内容。

如果同一类型的两个元素属于出现在相同的上下文中,则它们是相似的 ,怎么办?

索绪尔对语言作为一个系统的理解基于两种基本关系; 范式和语段(聚合关系和组合关系):

范式

范式是是一组词 ,具有功能相似性但在含义上有细微或根本的差异。比如“螃蟹位于龙虾旁边”,“位于”这个词属于一种替代词的范式,还可以代指包括“休息于”和“蹲伏于”以及“站立于”,这是一种替代关系。

在英语中替换有一定的规则,动词不能用名词替换,就像在HTML中一样,内联元素(表示内联这样的动作动词)不能总是用块级元素(名词)替换。

语段

一个语段基本上是一个由范式选择组成的结构段。在英语中,句子,段落,章节和书籍都是语段。在HTML中,由您选择的元素组成的代码块可以被视为一种语段。

每个语段都有自己的语义系统,较小的语段可以属于较大的语段系统,就像一个段落可以属于一个章节,

用处?

索绪尔的语言模型可以识别或写出数TB的小说,小说,散文和戏剧,不必发明新词或重新定义旧词。如果这个模型对于诸如英语之类的自然语言来说已经足够好了,那么它对于诸如HTML之类的简单元语言来说已经足够好了。当然,随着时间的推移,新词会被创造出来,就像HTML规范中慢慢引入新元素一样,但这是通过仔细的审议和共识来完成的。class没有这样的授权过程。

索绪尔模型为我们提供了足够的优雅和发明空间,并禁止我们做出错误的选择。通过根据它们的内容和位置what and where来构造元素的样式从而组成我们文档,那么现在误导或混淆用户就变得极其困难,我们所做的只是使用CSS来显示页面的固有结构。

语境的重要性

从符号学的角度来看,也许两个相似的事物之间唯一真正的区别在于它们的背景:它们被发现的环境。英国本土人和法国本地人在基因上相似但在文化上有所不同。他们的国籍背景使他们以许多值得注意的方式不相同。

下面这段Html/CSS:

<font><i>// HTML:</i></font><font>

<article>
   <h2 <b>class</b>=</font><font>"main-title"</font><font>>Article Title</h2>
   <aside>
      <h2 <b>class</b>=</font><font>"main-title"</font><font>>Aside Title</h2>
   </aside>
</article>

</font><font><i>// CSS:</i></font><font>
.main-title {
   font-size:30px;
}
</font>

创造class类型为.main-title,我们创建了一个翻译器来帮助我们轻松地为所有顶级标题设置相似的样式。但是,我们示例中的两个标题h2并不相似,任何理解HTML5解析器的人都会知道,有一个标题h2属于aside组合,而另外一个标题h2直接属于article内,这两种关系哪个最重要?

直接属于article:
 

<article>
   <h2 <b>class</b>=<font>"main-title"</font><font>>Article Title</h2>
</font>

直接属于aside, aside属于article:

<article>
   <h2 <b>class</b>=<font>"main-title"</font><font>>Article Title</h2>
   <aside>
      <h2 <b>class</b>=</font><font>"main-title"</font><font>>Aside Title</h2>
</font>

解析器将把aside的h2标题视为仅仅是副标题,属于第一个标题之后的副标题。

这个例子中的class是多余的:我们可以使用h2 style属性来设置元素的样式如font-size: 30px。关键是如果我们根据上下文区分这两个元素,那么区分上下文的办法是使用 派生选择器 :aside h2,那么CSS将绑定到HTML的结构(aside h2是一种结构,h2属于小语段,aside属于大语段,h2小语段被包含在大语段aside中),并且元素的外观将与其计算的含义一致。

模块化和可移植性

使用Class属性的方法其实是一种面向对象方法,面向对象的方法是想让一个元素在任何地方都看起来一样,不受环境背景的影响,这如同一个英国人移民到其他国家,拒绝说当地语言,这是不恰当的。

我不认为CSS是面向对象的; 我认为它是面向接口的。CSS的目的不是让单个项目看起来像我们想要的那样,而是提供一个接口来样式化HTML文档,这些接口具有说服力和可读性。为了使接口具有最佳可理解性,所有组件应该礼貌地协同工作,并且应该尊重整体视觉结构,无论组件来自何处。

简而言之,我们的目标应该是真正区分样式和内容,允许内容在不同样式界面接口之间传播,但样式界面仍然不动。在任何格式正确的文档中,属性应该是表达内容来源的(class作为元素属性却不是表达内容来源,而是表达内容来源的类型)。

以上是“从符号学的角度来看Html/CSS中的示例分析”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注编程网node.js频道!

--结束END--

本文标题: 从符号学的角度来看Html/CSS中的示例分析

本文链接: https://lsjlt.com/news/68315.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • 从符号学的角度来看Html/CSS中的示例分析
    小编给大家分享一下从符号学的角度来看Html/CSS中的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!CSS的好处是:H...
    99+
    2024-04-02
  • css渐变使用角度的示例分析
    这篇文章将为大家详细讲解有关css渐变使用角度的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。     使用角度    ...
    99+
    2024-04-02
  • JVM系列之从汇编角度分析NullCheck的示例分析
    这篇文章主要介绍了JVM系列之从汇编角度分析NullCheck的示例分析,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。一个普通的virtual call我们来分析一下在方法中...
    99+
    2023-06-15
  • HTML中CSS样式的示例分析
    这篇文章给大家分享的是有关HTML中CSS样式的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。 实例 HTML中的样式 本例演示如何使用添加到 <head&g...
    99+
    2024-04-02
  • Java从JDK源码角度对Object进行的示例分析
    小编给大家分享一下Java从JDK源码角度对Object进行的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!Object是所有类的父类,也就是说java中...
    99+
    2023-05-30
    java object
  • css矩形对角线的示例分析
    小编给大家分享一下css矩形对角线的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!   这个网站满好的,可以常看看 ...
    99+
    2024-04-02
  • CSS符号属性和CSS背景样式的示例分析
    这篇文章给大家分享的是有关CSS符号属性和CSS背景样式的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。list-style-type:none; list-style-...
    99+
    2024-04-02
  • css定位html元素的示例分析
    这篇文章主要介绍css定位html元素的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!   定位值有五种类型:static(静态的)、relative(相对的)、fixed...
    99+
    2024-04-02
  • html中DOM的示例分析
    这篇文章给大家分享的是有关html中DOM的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一   DOM是什么DOM是HTML和XML文档的编程接口。它不同于把html源...
    99+
    2024-04-02
  • CSS中数学表达式calc()的示例分析
    这篇文章将为大家详细讲解有关CSS中数学表达式calc()的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。数学表达式calc()是CSS中的函数,主要用于数学运算...
    99+
    2024-04-02
  • Python-OpenCV深度学习的示例分析
    这篇文章将为大家详细讲解有关Python-OpenCV深度学习的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。1. 计算机视觉中的深度学习简介深度学习推动了计算机视觉领域的深刻变革,我们首先解释深...
    99+
    2023-06-22
  • C#无词尾符号的示例分析
    这篇文章将为大家详细讲解有关C#无词尾符号的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。C#的文法符号一个C#程序由一个或多个源文件组成。一个源文件是一个统一字符编码的字符的有序序列。源文件通常...
    99+
    2023-06-18
  • css中分组的示例分析
    小编给大家分享一下css中分组的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! 分组提供了一些有意思的选择。例如,下例...
    99+
    2024-04-02
  • CSS中BFC的示例分析
    这篇文章主要介绍CSS中BFC的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!一、什么是BFC(Block Formatting Context)写CSS样式时,对一个元素设...
    99+
    2024-04-02
  • css中margin的示例分析
    这篇文章将为大家详细讲解有关css中margin的示例分析,小编觉得挺实用的,因此分享给大家做个参考,希望大家阅读完这篇文章后可以有所收获。一、简介margin我们一般习惯的叫它外边距,分别可以设置四个方向...
    99+
    2024-04-02
  • CSS中position:absolute的示例分析
    这篇文章给大家分享的是有关CSS中position:absolute的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。一、绝对定位的特征绝对定位有着与浮动一样的特性,即包裹...
    99+
    2024-04-02
  • css中position:sticky的示例分析
    小编给大家分享一下css中position:sticky的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧! css po...
    99+
    2024-04-02
  • 字中划线CSS与HTML标签的示例分析
    这篇文章主要介绍字中划线CSS与HTML标签的示例分析,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完! 1、CSS属性单词和代码 单词:text-decoration 中划线值 ...
    99+
    2024-04-02
  • css中的position的示例分析
    小编给大家分享一下css中的position的示例分析,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!position,我们百度一...
    99+
    2024-04-02
  • CSS三角箭头应用实践的示例分析
    CSS三角箭头应用实践的示例分析 ,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。用CSS来制作无图片带箭头的DIV方框(此代码比较适合追求纯代...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作