前端—新增的行内（inline）的语义元素

最新推荐文章于 2023-11-06 14:03:34 发布
最新推荐文章于 2023-11-06 14:03:34 发布
阅读量83 收藏
点赞数
文章标签： 前端 javascript html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Abcd6578787_/article/details/128352627
版权
本文介绍了HTML5中新增的四个行内语义元素：mark用于高亮文本，time表示日期和时间，meter表示度量，而progress则用于显示进程。这些元素提升了网页内容的语义性和可访问性，使得网页更符合现代Web标准。
摘要由CSDN通过智能技术生成

　新增的行内（inline）的语义元素

在HTML5中，新增了以下与行内的语义相关的元素。

mark元素

mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字。mark元素的一个比较典型的应用就是在搜索结果中向用户高亮显示搜索关键词。

HTML5中代码示例。
<mark>…</mark>

HTML4中代码示例。

<span>…</span>

　time元素

time元素表示日期或时间，也可以同时表示两者。

HTML5中代码示例。
<time>…</time>

HTML4中代码示例。
<span>…</span>

　meter元素

meter元素表示度量衡，仅用于已知最大值和最小值的度量。必须定义度量的范围，既可以在元素的文本中，也可以在min/max属性中定义。

HTML5中代码示例。

<meter>…</meter>
　progress元素

progress元素表示运行中的进程。可以使用progress元素来显示JavaScript中耗费时间的函数的进程。

HTML5中代码示例。
<progress>…</progress>

https://www.bilibili.com/video/BV1qL411u7eEicon-default.png?t=M85Bhttps://www.bilibili.com/video/BV1qL411u7eE
 

今天你学编程了吗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
H5新增的行内的语义元素
06-15 1906
一、mark元素 mark元素主要用来在视觉上向用户呈现那些需要突出显示或高亮显示的文字，其比较典型的应用就是在搜索结果中高亮显示搜索关键词。 HTML5中代码示例 HTML4中代码示例 二、time元素 time元素表示日期或时间，也可以同时表示两者。 HTML5中代码示例 HTML4中代码示例 三、meter元素 meter元素表示度量衡，仅仅用于已知最大
前端必考面试
12-15
行内元素有 a, b, span, img, input, select, strong 等，默认 display 属性值为 "inline"；块级元素有 div, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, p 等，默认 display 属性值为 "block"。 三、link 和 @import...
HTML5的语义元素
最新发布
corlin6688的博客
11-06 1634
figcaption> 标签定义 <figure> 元素的标题。HTML5提供新的语义元素来明确一个web页面的不同部分：<head>、<nav>、<section>、<article>、<aside>、<figcation>、<figure>、<footer>。<footer>元素应该包含它的包含元素。<nav>元素用于定义页面的导航链接部分区域，但是，不是所有的链接都需要包含在<nav>元素中。<figcaption>元素应该被置于 "figure" 元素的第一个或最后一个子元素的位置。
HTML基础之 新增语义标签和属性
u011863822的博客
03-14 1322
HTML5的新增特性主要是针对以前的不足，增加了一些新的标签，新的表单和新的表单属性等。 这些新的特性都有兼容问题，基本都是很需要IE9+以上的版本的浏览器才能支持，不过目前浏览器都是是高级版本了，所以使用问题不到，不想几年前那样了。当然也不会列出很多，而是简单列出常用的一些标签。 简单的说一下HTML5的新特性有什么？ 用户媒介回访的video和audio元素。 新的特殊内容元素，比如article,footer,header,nav,section等 新的表单控件，比如：calendar,date,t
6-2、选择器
鸵鸟
09-06 922
选择器
【HTML】H5中的语义元素
yy_bazinga的博客
03-03 448
语义元素语义元素header元素main元素footer元素nav元素aside元素article元素section元素说明 语义元素 语义= 意义 语义元素 = 有意义的元素 什么是语义元素? 一个语义元素能够清楚的描述其意义给浏览器和开发者。 无语义元素实例（无需考虑内容）: <div> 和 <span> ； 语义元素实例（清楚的定义了它的内容）: <form>、<table>、<img>。 header元素 header元素可以表示网页的头部
前端面试题
04-11
CSS中的display属性决定了元素的显示类型，例如block、inline、inline-block、none等，其中，block和inline是块级元素和行内元素的默认显示方式。visibility属性可以隐藏元素，但与display不同的是，隐藏的元素仍然...
java前端面试题
12-01
- **行内元素**（Inline Elements）：默认不会换行，可以设置`vertical-align`等属性。例如：`a`、`span`等。 - **块级元素**（Block Elements）：默认会独占一行，可以设置宽度、高度等属性。例如：`div`、`p`等。 ...
web前端面试题
05-22
- 行内元素与其他元素在同一行显示，而块级元素则独占一行。 - 行内元素可以设置 padding 和 margin，但 margin 的 top 和 bottom 仅影响其周围的元素。 **23. 什么是外边距重叠？重叠的结果是什么？** - 外边距...
HTML5新增5个行内语义元素（详解）
小柒的前端之旅
04-02 985
●mark mark元素表示页面中需要突出显示的文本。（相当于荧光笔在纸上标出的文字） 除mark元素之外，em和strong元素也可以突出显示文本。 <div> <mark>html5</mark>是用于取代 1999年所制定的<strong>html 4.01</strong&gt...
HTML5 结构性标签 行内语义性标签
weixin_30603633的博客
05-20 425
结构性标签: <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>旭宝爱吃鱼</title> </head> <body> <!--文章--> <articl...
H5常用的行内元素、块级元素、行内块元素以及它们之间的区别
qq_41627870的博客
02-12 5980
1、行内元素 （a）—— 标签定义链接 （b）—— 字体加粗 （br）—— 换行 （i）—— 斜体文本效果 （img）—— 在网页中嵌入图片 （input）—— 输入框 （span）—— 组合文档中的行内元素 （small）——呈现小号字体效果 （big）——呈现大号字体效果 （sub）—— 定义下标文本 （sup）—— 定义上标文本 2、块级元素 （div）—— 定义文档中的分区或节 （dl）—...
H5基础（2）-HTML5新的结构元素
zrr_rory的博客
09-04 368
1）HTML5的新结构标签 ①<section>：表示一段专题性的内容，一般会带有标题；<section> <h1>section是什么？</h1> <h2>一个新章节</h2> <article> <h2>关于section</h2> <p>section的介绍</p> ... </article>
H5新增的语义元素
weixin_73326146的博客
08-18 186
H5新增的语义元素
H5系列之常用的语义元素
weixin_30519071的博客
08-17 117
H5添加了几个新标签，带有语义化的标签，像我们的div 和 span 标签，你说他两能干嘛呢， 好像他两什么事都能干。举个例子，你家里的房子，有几个房间，如果不分房间的话，是不是你 今天睡这里，明天睡另外一间房间，后天再睡另外一间房间， 是不是很乱呢？ 的确是很乱，像我们的网页，比较复杂的网页，里面全都是用div来搭建，那怎么行呢，是不是有点分不清 这块区域是干嘛的， 那块区域是干嘛的...
H5 CSS基础一：行内元素和块元素
Quinn's blog ! I'm glad to be here!
07-16 4821
一、特点 块元素①、总是在新行上开始；②、高度，行高以及外边距和内边距都可控制；③、宽度缺省是它的容器的100%，除非设定一个宽度。④、它可以容纳内联元素和其他块元素 行内元素①、和其他元素都在一行上；②、高，行高及外边距和内边距不可改变；③、宽度就是它的文字或图片的宽度，不可改变④、内联元素只能容纳文本或者其他内联元素 二、常用块级元素：div , p , form, ul, li ,
HTML5 新增的语义化标签
前端攻城狮进阶之路
06-17 473
&lt;article&gt; 定义文章。&lt;aside&gt; 定义页面内容以外的内容。&lt;details&gt; 定义用户能够查看或隐藏的额外细节。&lt;figcaption&gt; 定义 &lt;figure&gt; 元素的标题。&lt;figure&gt; 规定自包含内容，比如图示、图表、照片、代码清单等。&lt;footer&gt; 定义文档或节的页脚。&lt;head
H5--新增标签之结构、块级、行内语义、交互
web_only_的博客
09-23 913
前言： HTML5增强了浏览器的原生功能，符合HTML5规范的浏览器功能将更加强大，减少了Web应用对插件的依赖。 主要目的为了让用户体验更好，让开发更加方便，另外W3C从推出HTML4.0到5.0之间共经历了17年。 本节主要介绍下H5标签改动相关知识点，新增了27个标签，废弃16个标签。 按照标签作用大致分类：功能性标签、结构性标签。 知识点科普： H5本质： H5是包括HTML、CSS...
HTML5新增语义元素
weixin_58139900的博客
10-04 425
目录 H5简介 新特性： 移除的元素（了解） H5现状 H5新增的语义元素 section article nav aside header footer H5新增语义元素兼容问题 解决方案 H5简介 HTML5是HTML最新的修订版本，具有新的元素，属性和行为。 HTML5规范于2014年10月29日由万维网联盟正式宣布。 随着移动化的进程，HTML5终将成为主流。 新特性： 新增语义化元素 新增表单相..
详解HTML中的块级与行内元素及其应用
3. **仅限行内**：行内元素只能包含其他行内元素，不能嵌套块级元素，这意味着它们更适合于小型的、非布局性的内容展示。 理解并熟练运用行内元素和块级元素对于创建响应式和有效的网页布局至关重要。通过合理地...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值