HTML语义化标签

1.w3c网址(https://www.w3school.com.cn/tags/index.asp)不多说,读文档不失为一种学习的好方法

2.HTML5新加了很多语义化的标签,他们能更好的帮助我们在实际的开发中做出更高大上的HTML骨架(我认为😁)

3.正文开始🤭

    3.1_HTML <article> 标签

        这article标签从语义上来说就是:文章/报道,这个标签的作用就是在我们平常写一些左边菜单列右边文章说明的时候,可以用article包裹Ajax请求回来的HTML结构(个人理解:文章是我们每一个前端人做网址十有八九都会接触的东西,article包裹文章,总感觉要比class类名舒服一些)


虽说无甚差距,但是我个人觉得存在即合理,既然人家出了这个标签,就证明有人家存在的价值

    3.2_HTML <aside> 标签

        这aside标签从语义上来说就是:在一边(我理解就是侧边栏),我们平常进行网址布局的时候,不免会遇到左侧菜单列表右侧详细内容的需求,那么这个时候,我们就可以利用aside标签包裹菜单列表(个人理解:同3.1)


虽说无甚差距,但是用语义化标签的HTML结构我感觉更清晰,要比class类名命名的更通俗易懂些 ,更重要的是我觉得,aside标签就是用来包裹侧边栏的,我甚至能直接不看HTML页面的情况下想像到页面的样子,太美妙了

    3.3_HTML <em> <strong> <ins> <del>  标签

         这四个标签是我在平常开发中用的很多的四个标签,我认同所有的样式都应该由css控制,但是从实际开发的角度上来说,因为我在使用开发工具的时候喜欢两栏布局,即左边HTML右边js这样就有一个问题了,每当我要改动css的时候我就需要去菜单栏中找到对用的css,然后去修改,很麻烦有没有!如果是页面上很小的改动,我感觉用这四个标签更恰当一些,大家可以试想,满屏的class类名,虽说见名知义,但是看久了脑瓜疼有没有

            3.3.1_em标签,这个标签效果就是:倾斜文字有强调之意(使用地方:文章的作者,出处等...)

            3.3.2_strong标签,这个标签的效果就是:加粗文字

            3.3.3_ins标签,下划线

            3.3.4_del删除标签,中划线(使用地方:原始价格,<ins>$79</ins>)

3.4_HTML <footer> 标签(布局标签)

        这footer标签从语义上来说就是:页脚,这个标签在我们页面布局的时候都不用多说,贼好用,比类名footer要直观(个人感觉)

3.5_HTML <header> 标签(布局标签)

        这header标签从语义上来说就是:页头,这个标签在我们页面布局的时候都不用多说,贼好用,比类名header要直观(个人感觉)

3.6_HTML <main> 标签(布局标签)

        这main标签从语义上来说就是:主要的,这个标签在我们页面布局的时候都不用多说,贼好用,比类名main要直观(个人感觉)

        注意点:1-<main> 标签规定文档的主要内容。

                       2-<main> 元素中的内容对于文档来说应当是唯一的。它不应包含在文档中重复出现的内容,比如侧栏、导航栏、版权信息、站点标志或搜索表单。

3.7_HTML <mark> 标签

        这mark标签从语义上来说就是:记号笔,相信大家在学生时代一定用过记号笔,在书上涂涂画画,把书弄得花里胡哨的,嘻嘻,童年记忆啊,在我们开发中,我常用来标记高亮查询内容,有人可能会说,如果标记高亮的查询内容和mark默认样式不一样呢?改啊,写行内样式改改就行了!总比类名mark要舒服(个人感觉)

3.8_HTML <nav> 标签(布局标签)

        这nav标签从语义上来说就是:导航,这个标签在我们页面布局的时候直接用来放网站的导航,贼好用,比类名nav要直观(个人感觉)

3.9_HTML <section> 标签

       section从语义上来说:部分, 这个标签我通常用来替代类名.container/.content使用,但是感觉不是很恰当,看心情,不想写类名了就用section表签

3.10_效果对比

(图片一)用布局标签写的HTML结构


(图片二)用类名布局的HTML结构

我想不用我多说了吧,虽然图片一不必图片二省了代码,但是大家试想下,如果满屏幕都是class类名,大家会不会审美疲劳,审美疲劳会不会心情不爽,心情不爽会不会做出什么出人意料的事情,嘻嘻,开个玩笑,但是我真心感觉用布局标签要比class类名舒服,就好比我已经买了房子了,就没必要租房子了,是不是这个道理。2020年新年快到了,祝大家在新的一年里,感情顺利,学业顺利,工作顺利,大吉大利!

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成,浏览时请结合常识与多方信息审慎甄别。
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

友情链接更多精彩内容