[03]HTML基础之行内标签
1.<ruby>
标签
显示东亚字符的发音(如中文,日文等),与<rp>
,<rt>
标签搭配。
//<ruby>为单个发音字符的容器,<rp>为不支持<ruby>标签时显示的内容,
//<rt>为字符的发音
<ruby>
中 <rp>(</rp> <rt>zhong</rt> <rp>)</rp>
文 <rp>(</rp> <rt>wen</rt> <rp>)</rp>
</ruby>
2.<em>
标签
表示局部内容的强调,表现为斜体字,与<i>
标签效果相同。
//强调小猫,强调的是哪种动物可爱
<em>小猫<em>是可爱的动物
//强调事实,强调“小猫是可爱的动物”这一事实
小猫<em>是<em>可爱的动物
尽管,标签与标签效果一致,但两者是有区别的。前者表示italic(斜体),后者表示emphasis(强调)。从语义化的角度来说,不建议使用标签。
3. <strong>
标签
表示全局内容的强调,表现为粗体字,与<b>
标签效果相同。
//`第一章`只是引用,“历史起源”才是文章的主题
第一章 <strong>历史起源</strong>
//有时候,也用来暗示用户优先查看内容
第一章 历史起源 <strong>第二章 文明起源<strong> 第三章 科技起源
虽然,<b>
标签与<strong>
标签效果一致,但两者是有却别的。前者表示bold(粗体),后者表示stronger emphasis(更强烈的强调)。从语义化的角度来说,不建议使用<b>
标签。
4. <ins>
标签
表示插入内容,表现为下划线,与<u>
标签效果相同。
//表示插入内容
滚滚长江东逝水,浪花<ins>淘尽</ins>英雄
尽管,<ins>
标签与<u>
标签效果一致,但两者是有区别的。前者表示underline(下划线),后者表示insert(插入)。从语义化的角度来说,不建议使用<i>
标签。
5. <del>
标签
表示删除内容,表现为中划线,与<s>
标签效果相同。
//表示删除内容
青山<del>仍旧</del>依旧在,几度夕阳红
尽管,<del>
标签与<s>
标签效果一致,但两者是有区别的。前者表示underline(下划线),后者表示delete(删除)。从语义化的角度来说,不建议使用<u>
标签。
6. <bdo>
标签
表示文字方向,如同把文字镜像后再显示;与<bdi>
相对,虽也表示文字方向,但如同把内容分块再镜像显示。
//正常文字显示
<p>123 456 789<p>
//bdo从右往左
<bdo dir="rtl">123 456 789</bdo>
//bdi从右往左
<bdi dir="rtl">123 456 789</bdi>
7.<sup>
标签
表示上标文本;与标签相对,后者表示下标文本。
//上标文本
2020<sup>2</sup> - 2019<sup>2</sup> = 4076362
//下标文本
Mg + ZnSO<sub>4</sub> = MgSO<sub>4</sub> + Zn
8. <small>
标签
表示旁注信息,如免责声明、注意事项、法律限制或版权声明等。
//表示某些辅助性的信息
康师傅酸菜牛肉面,酸爽好回味! <small>图片仅供参考,请以实物为准</small>
9. <mark>
标签
表示文本的标记,表现为黄色背景,突出强调的文本。
//突出显示某部分文本
绝弹博客,记录<mark>前端</mark>学习的个人博客
10. <hr>
标签(单标签)
表示分隔符(独占一行),表现为一条横线;而<br>
标签(单标签)表示换行符,<wbr>
标签(单标签)表示另一种换行符。
//如果第一行诗句末尾不加<br>标签,文本不会换行
题临安邸
<hr>
山外青山楼外楼,西湖歌舞几时休? <br>
暖风熏得游人醉,直把杭州作汴州。
//<wbr>标签适用于英文文本,当某个英文单词过长时,用来决定在哪处地方换行
this is verrrrrrrry <wbr> looooooooooooooong <wbr> text
11. <abbr>
标签
表示词句的缩写,表现为圆点下划线,鼠标悬浮时显示完整的名称;<dfn>
标签表示特殊术语或短语,表现为略微倾斜的文本。
//使用title属性表示完整的名称
<abbr title="HyperText Markup Language">HTML</abbr>是一门标记语言。
//不太作为口语出现的内容或有特定内涵的词语
<dfn title="深圳市腾讯科技有限公司">腾讯</dfn>是一家互联网公司。
12. <blockquote>
标签
表示较长的引用,表现为左右两侧缩进的文本;<q>
标签表示较短的引用,用cite属性表明引用来源(URL形式);<cite>
标签表示作品(比如书籍、歌曲、电影、电视节目、绘画、雕塑等等)的标题。
//cite属性标注引用的来源(URL形式)
<blockquote cite="http://theoldmanandthesea.com">人生来就不是为了被打败的,人能
够被毁灭,但是不能够被打败。man is not made for defeat, a man can be destoryed
but not defeated.--老人与海</blockquote>
//cite属性标注引用的来源(URL形式)
人生不过匆匆数十载,<q cite="http://litletime.com">一寸光阴一寸金<q>,珍惜当下,
不负青春不负年华。
//表示作品标题
<cite>中国神话史<cite>是袁珂先生的著作。
13. <code>
标签
表示代码;<samp>
标签表示计算机样本;<kbd>
标签表示键盘输入;<var>
标签表示变量,表现为斜体;<tt>
标签表示打印文本;
//代码
<code>console.log('hello,world')</code>
//计算机样本
字符序列 <samp>ae</samp> 可能会被转换为 æ 连字字符。
//键盘输入
按<kbd>ESC</kbd>键即可退出游戏。
//变量
let <var>countity</var> = <var>num</var> + 1;
//打印文本
<tt>打印文本</tt>
14. <time>
标签
表示时间,datetime
属性表示时间,pubdate
属性表示文档或<article>
元素的发布时间。
//表示节日或特殊事件的日期都可以
<time datetime="2019-12-25">今年圣诞节</time>公司发了福利。
//表示文章的发布事件,使用pubdate属性(布尔属性)
标题:HTML的通用行内标签有哪些? <time datetime="2019-12-22" pubdate>发布时间:
2019-12-22</time>
[03]HTML基础之行内标签的更多相关文章
- HTML基础知识(块级标签,行内标签,行内块标签)
块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内容撑开宽高! 其中还有一种结合两种模 ...
- css块级标签,行内标签,行内块标签的转换(2)
css块级标签,行内标签,行内块标签的转换 版权声明 本文原创作者:雨点的名字 作者博客地址:https://home.cnblogs.com/u/qdhxhz/ 在基础1中,我详细讲 ...
- 块级标签包含行内标签底部出现3px间隔的解决办法
当块级标签(如div)内包含了行内标签(如img),则外层元素与内层元素底部会出现3px的间隔: 代码如下: <!doctype html> <html lang="en& ...
- css块级标签、行内标签、行内块级标签
<html><head lang="en"> <meta charset="UTF-8"> <title>< ...
- html:常见行内标签,常见块级标签,常见自闭合标签
本文内容: 常见行内标签 常见块级标签 常见自闭合标签 首发日期:2018-02-12 修改: 2018-04-25:删除了不常用的标签 常见行内标签: 什么是行内标签: 行内标签就是在页面内只占据刚 ...
- div和span与块级和行内标签
<div>标签: 是一个区块容器标记,<div></div>之间是一个容器, 可以包含段落.表格.图片等各种HTML元素. <span>标签: 没有实际 ...
- HTML开发之(块级标签,行内标签,行内块标签)
显示模式的特性: 主要分为两大类: 块级元素:独占一行,对宽高的属性值生效:如果不给宽度,块级元素就默认为浏览器的宽度,即就是100%宽: 行内元素:可以多个标签存在一行,对宽高属性值不生效,完全靠内 ...
- html标签的显示模式(块级标签,行内标签,行内块标签)(转)
html标签的显示模式(块级标签,行内标签,行内块标签) 今天讲课的时候,讲到了html中的标签的显示模式,大致分为块级标签和行内标签.那么初学者在刚使用标签的时候会发现有些属性在一些标签上不起作 ...
- CSS(3)---块级标签、行内标签、行内块标签
块级标签.行内标签.行内块标签 html中的标签元素三种类型:块级标签.行内标签.行内块标签. 一.概述 1.块级标签 概念 每个块元素通常都会独自占据一整行或多整行,可以对其设置宽度.高度.对齐等属 ...
随机推荐
- SpringCloudStream学习(三)RabbitMQ中的惰性队列
从RabbitMQ 3.6.0之后,有了 Lazy Queues 的概念-一个会尽早的将队列中的内容移动到磁盘的队列,并且只有当消费者需要的时候,才会将它们加载到内存中 惰性队列设计的一个主要 ...
- HTTP接口测试
HTTP接口测试 1.1 get接口 请求URL http://api.nnzhp.cn/api/user/stu_info 请求方式 get 请求参数 参数名 必选 类型 说明 stu_name 是 ...
- 一分钟明白MySQL聚簇索引和非聚簇索引
MySQL的InnoDB索引数据结构是B+树,主键索引叶子节点的值存储的就是MySQL的数据行,普通索引的叶子节点的值存储的是主键值,这是了解聚簇索引和非聚簇索引的前提 什么是聚簇索引? 很简单记住一 ...
- Scala 中 Any 类源码
package scalaabstract class Any { def equals(that: Any): Boolean //值比较 def hashCode(): Int //hash值 d ...
- CF#214 C. Dima and Salad 01背包变形
C. Dima and Salad 题意 有n种水果,第i个水果有一个美味度ai和能量值bi,现在要选择部分水果做沙拉,假如此时选择了m个水果,要保证\(\frac{\sum_{i=1}^ma_i}{ ...
- mybatis collection的使用
Mybatis collection的使用 今天学习了mybatis中的collection使用,作为记录以后使用.首先看一下javabean的结构! public class Article { ...
- Azure B2C登录,react-web端实现,自定义登录页面ui
import React, { Component } from 'react'; import Particles from 'react-particles-js'; import { Form, ...
- html,body设置高度100%后底部有空白的bug
html,body{ //... height:100% } #app{ //... } #footbar{ position:absolute;bottom:0px;left:0px;right:0 ...
- Storm-jdbc-2讲 高级API及Trident
之前对Storm集成JDBC写了一个简单的demo,最近深度研究了下,代码如下 首先,先写一个抽象类,便于减少代码的重复性: import com.google.common.collect.List ...
- 【MySQL】大白话讲讲主从架构的几种搭配方式详解
话不多,直接上图: 主要来详细讲讲各个搭配 1>一主一从(成本最低): 并不是用来提高程序性能的,主要是用来做数据的热备(即如果master节点挂掉的话,slave节点能充当master节点), ...