html5知识点补充—mark元素的使用

最新推荐文章于 2022-02-11 18:55:55 发布

转载最新推荐文章于 2022-02-11 18:55:55 发布 · 172 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000003495813

本文介绍了如何在文档中使用mark元素实现特定文本的高亮显示，以增强阅读体验。在搜索页面中，关键字通过mark元素突出显示，帮助用户快速定位关键信息。

使用mark元素高亮文本

利用mark元素，文档作者可以高亮显示文档中的某些文本以达到醒目的效果。

如果用户在站点进行搜索，搜索页面中的关键字可以高亮显示。这时，就可以很好的利用到mark元素。不选用strong或者em元素的原因是，我们并非想要强调这些关键字，而仅仅是为用户提供高亮效果。示例如下：

<p>Pellentesque habitant morbi tristique senectus et netus
 <mark>Vestibulum tortor quam</mark>,feugita vitae.</p>

在chrome上呈现的效果如下图所示：

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34221036

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

mark元素的使用

酷小亚

09-25

768

mark元素的主要功能是在文本中高亮显示某些字符，以引起用户注意。效果图：代码如下： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>mark元素的使用</title> </head> <body> <h3>小苹果</h3> <p>我种下一颗<mark>种子</mark>,

HTML5的mark元素

I hava a dream

04-25

1941

mark元素主要用来呈现需要突出或高亮显示的文字。mark元素的典型应用是在搜索结果中向用户高亮显示搜索关键词。其使用方法与和有相似之处，但相比而言，HTML5新增mark元素在突出显示时，更加随意与灵活。具体代码如下： <!-- 作者：wenzhilanyu@126.com 时间：2016-04-25 描

参与评论您还未登录，请先登录后发表或查看评论

HTML5 Mark元素详解

weixin_30619101的博客

06-19

760

什么是mark元素 mark元素表示页面中需要突出显示或高亮显示的，对于当前用户具有参考作用的一段文字。通常在引用原文时使用mark元素，目的是引起读者的注意。mark元素是对原文内容有补充作用的一个元素，他应该用在一段原文作者不认为重要的，但是现在为了与原文作者不相关的其他目的而需要突出显示或者高亮显示的文字上面。mark元素最主要的目的就是吸引当前用户的注意。 mark元素除了高亮显示之外...

HTML mark元素

歪脖先生的博客

04-09

1492

mark元素mark元素定义一个标记文本，其主要功能是在文本中高亮显示某个或某几个字符，旨在引起用户的特别注意。如：<p>I also have some <mark>kitten</mark>s … adopt a <mark>kitten</mark>.</p>默认情况下，浏览器对 mark元素中的文本添加了黄色背景，来高...

HTML5基础-Mark标签高亮显示文本

weixin_30768661的博客

11-17

871

1、mark标签使用 <mark></mark> 2、mark作用使用mark标签元素，可以高亮显示文档中的文字以达到醒目的效果。 3、mark使用代码 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset=utf-8"/>...

HTML5与css3知识点

m0_64337756的博客

12-15

956

一、 THML5介绍 1.1 HTML5 html经过了第5次重大改版,增加了一些语义化的标签高版本浏览器支持,ie9以下不支持, 特点：html5是向下兼容的,原来html4的标签仍然可以用 1.2 HTML5新增的新特性结构语义化标签多媒体标签智能表单 canvas绘图 SVG绘图二、结构语义化标签 1.header : 表示页面中一个内容区块或整个页面的标题, 通常可以用来包含logo 搜索框标题 2.nav : 划分导航区域

HTML5知识点总结

yalisada的博客

04-11

151

html5 知识梳理

HTML5知识整理

qq_45493915的博客

04-27

303

HTML5知识点（一）初识HTML5（二）HTML5常用的语义化和结构元素（三）HTML5图形绘画标签canvas（四）HTML5矢量图形SVG（五）HTML5媒体播放常用标签（六）HTML5新增input类型（七）HTML5常用的表单属性（八）Web本地储存（一）初识HTML5 什么是HTML5 HTML5 是HTML的最新版本，它是W3C与WHATWG合作的结果。HTML5继承了原先HTML...

基础HTML5网页知识

Once_day的回忆

02-11

599

本文章简要总结了HTML5的大部分标签，以供学习查询之用！

JVM高频面试基本问题与知识点整理

热门推荐

张彦峰的博客

01-16

86万+

JVM高频面试基本问题与知识点整理

HTML5标签使用与开发文档手册

本文档将详细介绍HTML5的核心知识点，涵盖其标签、属性、语义化和API等方面的使用。 ### HTML5标签基础知识 HTML5在原有HTML标签的基础上引入了新的标签，增加了对多媒体内容和离线应用的支持，并对原有标签进行了...

HTML5andCSS3面试题大全

donglize521521的博客

03-08

6207

文章目录1.CSS引入(1)有哪些引入方式？通过link和@import引入有什么区别？（* ）(2)Style 标签写在 body 后和 body 前有什么区别？(3)什么是 FOUC(Flash of Unstyled Content)？如何来避免 FOUC2.CSS选择器(1) CSS选择器种类(2)CSS选择器的优先级3.CSS伪类和伪元素4.CSS盒模型4.有哪些方式（CSS）可以隐藏页面元素？4.**em\px\rem区别？****5.块级元素水平居中的方法？** 1.CSS引入 (1)有哪些引

HTML5编程指南：马克·皮格里姆版

书中详细讲解了以下几个关键知识点： 1. **结构元素**：HTML5引入了新的结构元素，如, , , , 和等，这些元素有助于提高网页的语义化，使得内容更易于理解和解析。 2. **多媒体支持**：HTML5支持内建的音频和视频...

优化调度基于改进遗传算法的公交车调度排班优化的研究与实现（Matlab代码实现）

12-01

【优化调度】基于改进遗传算法的公交车调度排班优化的研究与实现（Matlab代码实现）内容概要：本文围绕“基于改进遗传算法的公交车调度排班优化”展开研究，利用Matlab实现算法仿真与优化过程。文章重点介绍如何通过改进遗传算法（如引入精英策略、变异优化等）提升传统算法在公交调度这一复杂多目标优化问题中的性能，解决发车频率、线路分配、司机排班及运营成本之间的平衡问题。研究涵盖了实际调度中的多重约束条件，包括时段客流波动、车辆数量限制、工作时长合规性等，并通过仿真实验验证改进算法在收敛速度、解的质量和稳定性方面的优越性。; 适合人群：具备一定Matlab编程基础和优化算法知识的研究生、科研人员及从事公共交通系统规划与智能调度的工程技术人员。; 使用场景及目标：①应用于城市公交系统排班优化，提升运营效率并降低人力与能源成本；②作为智能交通系统（ITS）中调度模块的技术参考；③为遗传算法在实际工程问题中的改进与应用提供案例支撑。; 阅读建议：建议读者结合文中Matlab代码进行实践操作，重点关注算法改进策略的设计逻辑与调度模型的构建方式，同时可尝试将算法扩展至其他交通调度场景以深化理解。

中国臭氧站点数据集(2024).zip

12-01

1. station_2024.csv —— 全国地面站点位置信息 2. O3_data_2024.csv —— 全国 O₃ 小时浓度数据

（64页PPT）某著名企业集团年会活动策划方案.ppt

最新发布

12-01

（64页PPT）某著名企业集团年会活动策划方案.ppt

【嵌入式系统】基于GCC优化与组件裁剪的固件瘦身方法：面向STM32/ESP32/nRF52平台的低资源部署方案设计

12-01

内容概要：本文系统介绍了嵌入式固件裁剪与优化的实战方法，重点围绕编译器级优化（如GCC的-Os、-flto、--gc-sections等选项）、主流芯片平台（STM32、ESP32、nRF52）的具体瘦身流程以及工具链实践展开。通过对比不同优化配置下的固件大小、执行效率和编译时间，验证了-Os结合LTO与段裁剪可显著减小体积，同时提供了HAL库裁剪、启动文件优化、分区表调整、调试信息移除等关键操作步骤，最终实现固件体积大幅缩减。; 适合人群：具备嵌入式开发经验的工程师，尤其是从事MCU固件开发、资源受限设备优化及相关技术研究的1-3年工作经验人员；熟悉C/C++语言及基本编译链接原理者更佳；使用场景及目标：①在存储空间紧张的嵌入式设备中最大化压缩固件体积；②提升代码执行效率并合理平衡调试能力；③掌握跨平台（STM32/ESP32/nRF52）固件优化通用方法论；阅读建议：建议结合具体项目实践文中优化策略，逐步应用编译器选项、组件裁剪与链接脚本修改，并借助size、objdump、strip等工具分析优化效果，注意避免过度优化带来的稳定性风险。

STM32实现PT100测温系统V4.0（4针OLED显示）

12-01

提供了基于STM32微控制器的PT100测温系统完整解决方案。PT100是一种常见的铂电阻温度检测器，广泛应用于工业温度测量领域。此项目实现了利用STM32精确采集PT100电阻值变化，进而转换并显示当前温度的功能。特别地，本系统通过4针OLED显示屏直观展示温度数据，提高了现场观察的便捷性和系统的可读性。版本说明版本: V4.0 更新日期: [请插入具体日期] 核心处理器: STM32系列（具体型号请参考源代码）显示模块: 4针OLED显示屏功能特点: 高精度PT100温度采集实时温度数据显示 OLED屏幕友好界面设计稳定的软件架构，易于扩展和修改目录结构仓库大致包含以下目录结构： . ├── Src # 源代码文件夹 │ ├── main.c # 主程序文件 │ └── ... # 其他相关源文件 ├── Inc # 头文件文件夹 │ ├── main.h # 主头文件 │ └── ... # 其余头文件 ├── Documentation # 文档资料 │ └── 用户手册.pdf # 项目使用指南 ├── Libraries # 第三方库或自定义库 │ └── OLED # OLED驱动库 └── STM32_project # IAR/Keil等开发环境工程文件 ├── STM32xxxxx.uvprojx # 开发工具工程文件 └── ... # 工程相关配置文件快速上手硬件准备：确保你

ComfyUI/Qwen Wan2.2 FMLF 三帧一致性人物视频生成

12-01

文件编号：c0176 ComfyUI使用教程、开发指导、资源下载： https://datayang.blog.youkuaiyun.com/article/details/145220524 AIGC工具平台Tauri+Django开源ComfyUI项目介绍和使用 https://datayang.blog.youkuaiyun.com/article/details/146316250 更多工具介绍项目源码搭建介绍：《我的AI工具箱Tauri+Django开源git项目介绍和使用》https://datayang.blog.youkuaiyun.com/article/details/146156817 图形桌面工具使用教程：《我的AI工具箱Tauri+Django环境开发，支持局域网使用》https://datayang.blog.youkuaiyun.com/article/details/141897697