常用行内标签

原创于 2025-12-21 15:52:10 发布 · 361 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#java #开发语言

常用行内标签

strong标签和em标签

strong默认样式：加粗

em默认样式：使文本倾斜

语义：都是强调

面试题1：strong标签和em标签有什么区别？

相同点：都有强调语义的作用

不同点：strong是强调内容的，em是强调语气的

总结：由于二者都有强调作用，在实际开发中并不区分使用

b标签和i标签

语义：都没有语义

b标签默认样式：加粗

i标签默认样式：使文本倾斜

i标签还常常用于引入字体图标

面试题2：b标签、i标签和 strong标签、em标签之间的区别

相同点：b标签和strong标签默认样式都是加粗文本，i标签和em标签都是使文本倾斜

不同点：b标签和i标签都没有语义，而strong标签和em标签都有强调的语义

总结：在实际开发中，尽量使用有语义的标签(strong标签和em标签)

面试题3：title标签和h1标签有什么区别

相同点：二者的语义都比较重，可以帮助浏览器进行检索

不同点：title是浏览器标题栏的标题，h1是页面内容的标题

总结：因为二者的语义都比较重，所以在实际开发中需要慎重使用

span标签

没有默认样式没有语义

del标签

删除线标签

使用场景：商品降价打折

 <div>
     <p>
         <del>9999</del>998
     </p>
 
 </div>

a标签

默认样式：字体颜色有变化，字体文本有下划线

a的2个功能：

从一个页面跳到另一个页面

 <a href="https://www.baidu.com">跳转到百度</a>

当前页面的跳转(电梯导航)[，其实还有一个下载]

<body>
     <a href="#bottom">到底部</a>
 
     <a href="#center">到中间</a>
 
     <p id="top"></p>
 
     ……
     <p id="center"></p>
 
     ……
     <p id="bottom"></p>
 
 <a href="#top">返回顶部</a>
</body>

当前页面的跳转[只有页面有滚动条是可以使用]

步骤一：打标记(即添加id属性)

步骤二：设置href属性值# id名
 id属性值：
 
   不要以数字开头
 
   不要重复
 
   尽量不要写汉字

a的2个属性：

href：指向跳转的地址

地址：

 绝对路径：路径固定，不会随着当前文件的变化而变化
 
 如：[https://www.baidu.com](https://www.baidu.com) 不管在哪里点击此链接都会跳转到百度
 
 相对路径：路径地址不固定，会随html文件位置的变化而变化
 
   ./  要跳转的文件，在当前文件所在目录下
 
   ../ 要跳转的文件，在当前文件所在的上级目录下

target：跳转的打开方式

属性值：self(默认值)、blank

 <a href="https://www.baidu.com" target="_self"></a>==>在当前网页跳转到百度
 <a href="https://www.baidu.com" target="_blank"></a>==>新开一个网页并跳转到百度

一个补充：空链接写法

<a href='javascript:;'></a>==>正规写法

<a href="#"></a>==>非正规写法 会默认刷新页面

去除a链接字体默认样式

text-decoration: none;==>text-decoration属性(文本修饰) none清除样式

补充标签

hr标签：分割线

br标签强势换行

 <p>
   桃花三月春风暖， 相遇人海一瞬间。
   眉眼传情心意通， 携手共度岁月甜。
 </p>
 这样的运行结果肯定是在一行上的，但我又不想在外面再套一个盒子，里面用两个p标签，太麻烦了
 所以这个时候就可以使用强制换行标签br标签
 <p>
   桃花三月春风暖， 相遇人海一瞬间。<br>
   眉眼传情心意通， 携手共度岁月甜。<br>
 </p>