HTML部分标签使用

最新推荐文章于 2023-02-28 18:33:10 发布

元汐

最新推荐文章于 2023-02-28 18:33:10 发布

阅读量303

点赞数

文章标签： html5

本文链接：https://blog.csdn.net/simulatorwf/article/details/123967883

版权

一：引言

由于HTML中的标签对及其属性种类繁多，正常情况下我们无法全部记住，导致在构建网页的骨架时不可避免的翻阅文档，降低了开发效率。基于此，本文就HTML中主要使用的标签对及其属性做了简要介绍，同时展示了一些使用场景。

二：标签介绍

通常来讲，HTML对于网页开发者来讲是一种搭建网页结构的语言，因此，我们必须也只需关注HTML中标签对的语义，至于其在网页中是如何展示的，我们并不考虑。因此，下面我们介绍的标签对都将着重突出其语义的描述。

（1）meta标签

语义：meta标签主要用于设置网页中的一些元数据，目的是为了设置网页的基本信息，同时配合浏览器的搜索引擎，方便用户查询到到该网页。其常用的属性有①charset:指定网页的字符集，②name:指定数据的名称，③：content:指定数据的内容，通常配合name属性使用。
案例：

<html>
    <head>
        <meta charset="utf-8" name="keywords" content="html,css,javascript">
        <title>元数据</title>
    </head>
    <body>
        
    </body>
</html>

(2)段落标签

语义：html中的段落标签主要是指h1~h6的标题标签，用于标注段落在网页中的重要性，其中h1最重要，仅次于title标签，其余重要性依次递减，为块标签（即每一个标签标注的内容都会独占一行）.

(3)突出显示标签

语义：html中的语义标签主要指的是那些突出段落中某个字词的重要性的标签，主要有①em标签：行内元素（即标注内容不会独占一行），强调语音语调的加重。②strong标签：强调词语的重要性。
案例：

        <p>你<em>真的</em>很漂亮啊！</p>
        <p>是你叫<strong>夏洛</strong>啊！</p>
    </body>

（4）span和div

语义：span标签和div标签没有具体的语义，单纯的就是一个表示行内元素（span），一个表示块元素(div)

（5）列表

语义：html中的列表分为有序列表，无序列表以及定义列表（不常用）,有序列表是ol标签和li标签配合完完成，无序列表是ul标签和li标签配合使用。
案例：

   <body>
       <p>你<em>真的</em>很漂亮啊！</p>
       <p>是你叫<strong>夏洛</strong>啊！</p>
       <!-- 列表 -->
       <!-- 有序列表 -->
       <ul>
           <li>牛奶</li>
           <li>花生</li>
           <li>虫子</li>
       </ul>
       <!-- 无序列表 -->
       <ol>
           <li>葡萄</li>
           <li>水果</li>
           <li>老鹰</li>
       </ol>
   </body>

(6)超链接

语义：所谓的超链接就是通过一个标识符存放一个网页地址，用户点击该超链接可以跳转到其他网页或者当前网页的其他位置，使用a标签来实现。主要属性有href：存放需要跳转的地址
案例：

      <a href="http://www.baidu.com">超链接</a>

（值得注意的是，在使用相对路径时，./表示当前文件夹，…/表示当前文件夹所在的上一级目录）

（7）图片设置

语义：图片设置使用img标签，注意，该标签是自结束标签，使用src属性存放图片路径
案例：

       <img src="https://tse1-mm.cn.bing.net/th/id/R-C.4d9cd2e53dddfc238a06e750b73cd023?rik=MsMCKPGumufOyQ&riu=http%3a%2f%2fwww.desktx.com%2fd%2ffile%2fwallpaper%2fscenery%2f20170209%2fc2accfe637f86fb6f11949cb8651a09b.jpg&ehk=ia2TVXcow6ygWUVZ1yod5xH4aGd8565SYn6CRpxkNoo%3d&risl=&pid=ImgRaw&r=0" alt="">