首页 > 其他分享 >前端技术对html的内联元素的学习

前端技术对html的内联元素的学习

时间:2024-11-12 18:09:57浏览次数:1  
标签:gt 示例 标签 前端 lt html 90% 内联 文本

内联元素


目录

字体元素

斜体字

同样,<em><i>标签默认情况下均以斜体显示标签中的文本,但是<em>标签具有强调的语义,用来表示标签中的内容很重要,而<i>标签仅仅用于定义斜体文本。

示例代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>&lt;em&gt;和&lt;i&gt;标签演示</title>
</head>
<body>
    <p>当您决定使用C语言中文网,您已经超越了 <em>90%</em> 的程序员,请记住网址 <i>http://c.biancheng.net/</i>。</p>
</body>
</html>

同上例一样,给90%添加 标签是为了强调C语言中文网带来的震撼效果,而给网址添加 标签仅仅是为了引起读者的注意。

运行结果如下图所示:

图2: 标签示例

根据 HTML5 的规范,标题应该用<h1>~<h6>标签定义,被强调的文本应该用<em>标签定义,重要的文本应该用<strong>标签定义,被标记的或者高亮显示的文本应该用<mark>标签定义等等,类似这样的规范还有很多

粗体字

默认情况下,<strong><b>标签都可以使文本以粗体展示标签中的文本,但是<strong>标签的语义是标签中的内容具有很高的重要性,而<b>标签的语义仅仅是加粗文本以引起读者的注意,并没有特殊的意思。

示例代码如下所示:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>&lt;strong&gt;和&lt;b&gt;标签演示</title>
</head>
<body>
    <p>当您决定使用C语言中文网,您已经超越了 <strong>90%</strong> 的程序员,请记住网址 <b>http://c.biancheng.net/</b>。</p>
</body>
</html>

此处给90%添加 标签是为了强调C语言中文网的重要性,以及它带来的震撼效果;而给网址添加 标签仅仅是为了视觉上的加粗效果,这样能引起读者的注意。

运行结果如下图所示:

图1: 标签示例

标签:gt,示例,标签,前端,lt,html,90%,内联,文本
From: https://www.cnblogs.com/BingBing-8888/p/18542394

相关文章

  • 前端构建工具对比
    工具特性解析1.Webpack输入输出灵活:支持单文件和多文件输入输出,可以进行复杂的模块化输出,并且支持全目录结构。文件捆绑和格式支持:具有强大的捆绑功能,并支持ESM、CJS、UMD等模块格式输出。CSS和资源处理:具备强大的CSS预编译和资源处理能力,并支持插件扩展以进行图片、......
  • html\css 网页立体转动盒子效果
    效果实现 转动方块效果练练手的代码,可能含有可以优化的地方,斟酌自取<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metaname="viewport"content="width=device-width,initial-scale=1.0">......
  • 前端防抖和节流
    国外大佬关于防抖和节流的详细介绍DavidCorbacho'sarticle防抖和节流的作用是对前端的性能优化防抖debounce说明:单位时间内,频繁触发事件,只执行最后一次使用场景:搜索框搜索输入,手机号、邮箱验证输入检测类似王者中的回城案例:resize事件监听窗口变化<script>c......
  • Freemarker模板 jar!/BOOT-INF/classes!/**.html
    需求:发送邮件,邮件内容通过Freemaker模板生成,如下代码:Configurationconfiguration=newConfiguration(Configuration.getVersion());configuration.setDefaultEncoding("utf-8");/**加载模板目录**///这个方法在IDEA跑是OK的Filefile=ResourceUtils.getFile("clas......
  • [转贴]在前端如何玩转 Word 文档
    在日常工作中,大部分人都会使用MicrosoftOfficeWord、WPS或macOSPages等文字处理程序进行Word文档处理。除了使用上述的文字处理程序之外,对于Word文档来说,还有其他的处理方式么?答案是有的。接下来阿宝哥将介绍在前端如何玩转Word文档,阅读本文之后,你将了解以下内容:M......
  • vue前端利用ofd.js实现ofd类型在线预览
    1.安装:npmiofd.js2.axios封装注意事项,responseType:'arraybuffer'//电子证件照exportfunctiongetXkzOriginal(data){returnreq({url:'/bigdata/getXkzOriginal',method:'POST',params:data,res......
  • 前端日期格式转换
    1.获取当前年月日时分秒constdate=newDate();constyear=date.getFullYear();constmonth=(date.getMonth()+1).toString().padStart(2,'0');//JavaScript的月份是从0开始的,所以需要加1constday=date.getDate();consthours=date.getH......
  • 基于Java+SpringBoot+Vue+HTML5人职匹配推荐系统(源码+LW+调试文档+讲解等)/人职匹配/
    博主介绍......
  • 基于Java+SpringBoot+Vue+HTML5的网上商城系统(源码+LW+调试文档+讲解等)/网上商城系
    博主介绍......
  • Html中标签文字对齐的样式
    Html中标签文字对齐的样式已4个字的长度为例就规定x=4/*2个字样式*/l2{/*((x-y)/(y-1))x为最大字数y为显示字数*/letter-spacing:2em;/*需要使内容相对居中*/margin-left:2em;/*因为右边会自动计算出个长度2em不......