余晖落尽暮晚霞,黄昏迟暮远山寻
本站
当前位置:网站首页 > 编程知识 > 正文

HTML02 - 语义化标签(html5语义化标签)

xiyangw 2022-11-25 12:25 95 浏览 0 评论

一、语义化标签含义

语义化的标签,旨在让标签有自己的含义。

二、语义化标签的优势

  1. 代码结构清晰,方便阅读,有利于团队合作开发。
  2. 方便其他设备解析(如屏幕阅读器、盲人阅读器、移动设备)以语义的方式来渲染网页。
  3. 有利于搜索引擎优化(SEO)。

三、常见的语义化标签

<title>:页面主体内容。

<h>:h1~h6,分级标题,<h1> 与 <title> 协调有利于搜索引擎优化。

<ul>:无序列表。

<li>:有序列表。

<header>:页眉通常包括网站标志、主导航、全站链接以及搜索框。

<nav>:标记导航,仅对文档中重要的链接群使用。

<main>:页面主要内容,一个页面只能使用一次。如果是web应用,则包围其主要功能。

<article>:定义外部的内容,其中的内容独立于文档的其余部分。

<section>:定义文档中的节(section、区段)。比如章节、页眉、页脚或文档中的其他部分。

<aside>:定义其所处内容之外的内容。如侧栏、文章的一组链接、广告、友情链接、相关产品列表等。

<footer>:页脚,只有当父级是body时,才是整个页面的页脚。

<small>:呈现小号字体效果,指定细则,输入免责声明、注解、署名、版权。

<strong>:和 em 标签一样,用于强调文本,但它强调的程度更强一些。

<em>:将其中的文本表示为强调的内容,表现为斜体。

<mark>:使用黄色突出显示部分文本。

<figure>:规定独立的流内容(图像、图表、照片、代码等等)(默认有40px左右margin)。

<figcaption>:定义 figure 元素的标题,应该被置于 figure 元素的第一个或最后一个子元素的位置。

<cite>:表示所包含的文本对某个参考文献的引用,比如书籍或者杂志的标题。

<blockquoto>:长引用,块引用拥有它们自己的空间。

<q>:短引用(跨浏览器问题,尽量避免使用)。

<time>:datetime属性遵循特定格式,如果忽略此属性,文本内容必须是合法的日期或者时间格式。

<address>:作者、相关人士或组织的联系信息(电子邮件地址、指向联系信息页的链接)。

<del>:移除的内容。

<meter>:定义已知范围或分数值内的标量测量。(Internet Explorer 不支持 meter 标签)

四. 代码示例

    <!-- hgroup 标题用来为标题分组,可以将一组相关的标题同时放入到hgroup中 -->
    <hgroup>
         <h1>回乡偶书</h1>
         <h2>其二</h2>
    </hgroup>


    <!-- p标签    表示页面中一个段落 也是块元素 -->
    <p>在p标签的内容 表示为一个段落</p>


    <!-- 
    em标签 表示语调语气加重 
    行内元素 :不会独占一行的元素
    -->
    <p>今天天气<em>真</em>不错</p>


    <!-- strong 表示强调,重要内容 -->
    <p>你今天必须要<strong>完成作业</strong></p>


    鲁迅说
    <!-- blockquote 表示 引用长引用  块元素 -->
    <blockquote>
        我说过很多话 但我都不记得了
    </blockquote>


    <!-- q标签 表示短引用 为行内元素 -->
    子曰<q>温故而知新</q>


</body>


(部分标签)效果图


关联面试题:请简述下你对HTML语义化的理解?知道的可以在评论区留言![送心]

相关推荐

“三次握手,四次挥手”你真的懂吗?

记得刚毕业找工作面试的时候,经常会被问到:你知道“3次握手,4次挥手”吗?这时候我会“胸有成竹”地“背诵”前期准备好的“答案”,第一次怎么怎么,第二次……答完就没有下文了,面试官貌似也没有深入下去的意...

面试官问:三次握手与四次挥手是怎么完成的?

作者|饶全成来源|码农桃花源记得刚毕业找工作面试的时候,经常会被问到:你知道“3次握手,4次挥手”吗?这时候我会“胸有成竹”地“背诵”前期准备好的“答案”,第一次怎么怎么,第二次……答完就没有...

三次握手和四次挥手的高阶面试题,建议收藏

昨天村长的讲解,真是一语点醒,这样的解释胜过死记硬背。但对于学习者,如果不能有直观感受,可能还是觉得不接地气,今天介绍两个工具,一个是网络抓包工具Wireshark,一个是linux命令tcpdum...

三次握手和四次挥手到底是个什么鬼东西

之前总有是有面试官喜欢问,你知道什么是三次握手么?什么是四次挥手么?为什么握手需要三次,挥手需要四次呢?今天我们就来详细的聊一下这个。1.什么是TCPTCP协议,简单称呼一下的话,那就是传输控制协议,...

加深理解TCP的三次握手与四次挥手

在了解三次握手和四次挥手之前,先要知道TCP报文内部包含了那些东西。熟悉了解TCP报文对日后学习网络和排除方面有很大的帮助,所以,今天为了加深对三次握手的理解,从新去认识TCP报文格式。TCP报文格式...

三次握手 与 四次挥手_三次握手四次挥手大白话

三次握手:①首先Client端发送连接请求报文②Server段接受连接后回复ACK报文,并为这次连接分配资源。③Client端接收到ACK报文后也向Server段发生ACK报文...

动画讲解TCP的3次握手,4次挥手,让你一次看明白

专注于Java领域优质技术,欢迎关注作者:老钱占小狼博客TCP三次握手和四次挥手的问题在面试中是最为常见的考点之一。很多读者都知道三次和四次,但是如果问深入一点,他们往往都无法作出准确回答。本篇尝试...

linux下实现免密传输文件或登录到其他服务器

使用scp传输文件到其他服务器的时候,提示需要输密码,如下:[root@18csetup]#scpLINUX.X64_180000_db_home.zip192.168.133.120:/u0...

Linux如何通过salt免密SCP传输上百台机的脚本?看chatGPT的回答

如何通过salt免密SCP传输上百台机的shell脚本”,下面是chatGPT给出的结果。scp批量免密脚本给出的详细shell脚本如下:#!/bin/bash#源文件路径和目标路径SRC_...

Linux/Mac scp命令上传文件_将hdfs上的文件下载到本地的命令是

语法scp[可选参数]file_sourcefile_target参数说明:-1:强制scp命令使用协议ssh1-2:强制scp命令使用协议ssh2-4:强制scp命令只使用IPv4寻...

Linux常用功能——文件远程传输_linux 远程传输文件

scp是securecopy的简写,是linux系统下基于ssh登陆进行安全的远程文件拷贝命令,用于在Linux下进行远程拷贝文件的命令。和它类似的命令有cp,不过cp只是在本机进行拷贝不能跨服务器...

使用 scp 命令定时拉取服务器备份文件

我们的服务器,每周五必须要做下备份,但总是忘记执行备份这件事情,或者是服务器备份做了,但没有做异地备份。所以通过定时任务自动备份,备份成功之后,在其它服务器上面通过定时任务scp命令自动拉取备份文...

windows下最轻便的FTP/SCP文件管理器

这次推荐的工具叫做winscp,这个工具如果是IT从业人员,又是做服务端相关工作的话,可能无人不知,如果是刚入门,推荐立马上手试试。如果看了觉得有用,欢迎收藏、点赞、关注。官方网站:https://w...

我不是网管 - Linux中使用SCP命令安全复制文件

SCP是linux发行版中的命令行工具,用于通过网络安全地跨系统复制文件和目录。SCP代表安全复制,因为它使用ssh协议复制文件。拷贝时,scp命令建立ssh连接到远程系统。换句话说...

WinSCP软件双系统(Win-Linux)文件传输教程

WinSCP软件是windows下的一款使用ssh协议的开源图形化SFTP客户端,也就是一个文件传输的软件,它有什么优点吗,咱们嵌入式开发中经常会将windows中的文件复制到linux系统当中,比较...

取消回复欢迎 发表评论: