美文网首页
html学习之路(二)- 行内标签

html学习之路(二)- 行内标签

作者: 绝弹 | 来源:发表于2018-11-07 22:34 被阅读0次
<!-- 文字格式 (34个) ,以下标签分类,仅方便个人记忆,并非官方给出,暂时先列出标签,以后再慢慢补上 - -->

<!-- 换行通用 - -->
<hr>  <!-- 5属性 -->
<br>
<wbr>
<span>行内标签</span>
<small>小号标签</small>

<!-- 文本方向- -->
<bdo>文字方向</bdo>    <!-- 1属性 -->
<bdi>文字方向</bdi>    <!-- 1属性 -->
<sup>上标标签</sup>
<sub>下标标签</sub>

<!-- 文本效果- -->
<time>定义时间</time>  <!-- 2属性 -->
<a>文本连接</a>        <!-- 7属性 -->
<abbr>文本缩写</abbr>  <!-- 1属性 -->
<dfn>文本定义</dfn>    <!-- 1属性 -->

<!-- 文字编辑 - -->
<ins>插入文本</ins>    <!-- 1属性 -->
<del>删除文本</del>    <!-- 1属性 -->
<u>标记文本</u>
<s>删除文本</s>

<!-- 文字强调- -->
<em>强调标签</em>
<strong>强调标签</strong>
<i>斜体标签</i>
<b>粗体标签</b>

<!-- 文本引用 - -->
<blockquote>块级引用</blockquote>  <!-- 1属性 -->
<q>内联引用</q>                    <!-- 1属性 -->
<cite>定义引用</cite>
<mark>内容标记</mark>

<!-- 文本代码 -->
<code>计算机代码</code>
<samp>计算机程序</samp>
<var>定义变量</var>
<kbd>键盘输入</kbd>

<!-- 文本发音 -->
<ruby>文本容器</ruby>
<rb>发音文字</rb>
<rp>不能展示</rp>
<rt>发音字符</rt>
<rtc>语义注解</rtc>

hr标签(块级标签)

说明:定义一条水平线,占据一行。
属性:(以下属性,已经过时,但依然可以使用)
1.align属性定义水平线的排列方向(默认居中):left,center,right。
2.color属性定义水平线的颜色:css支持的颜色写法。
3.noshade属性定义是否去除阴影:布尔值。
4.size属性定义水平线的高度:css支持的长度写法。
2.width属性定义水平线的宽度:css支持的长度写法。
用法:
<!-- 一条宽200px,高5px,天蓝,居左,没有阴影的水平线 -->
<hr width="200px" size="5px" color="sky-blue" align="left" noshade> 

br标签

说明:定义一个换行符号,强制换行。
属性:暂无
用法:
<!-- 通常,这段话显示在一行,加上<br>后,变成了两行 -->
<p>选择了路的方向<br>却未决定路途的终点</p>

wbr标签

说明:提供一个合适的换行地点,不强制换行。
属性:暂无
用法:
<!-- 一般用在英语句子换行,又不想拆分单词在两行的时候 -->
<p>这是一段话,当它无法全部显示在一行的时候,它会<wbr>根据wbr标签,选择<wbr>合适<wbr>的<wbr>换行地点</p>

span标签

说明:定义一个典型的行内元素,没有任何语义。
属性:暂无
用法:
<!-- 可以用来给行内某处地方设置特别的样式 -->
<p>一段话,没有什么<span>特别</span>的地方。</p>

a标签

说明:定义一个超链接,可以链接页内元素或其他网页。
属性:
1.download属性定义下载而不是导航url:文本值(下载文件名)。
2.href属性定义超链接地址:#锚点(内部),协议地址(外部)。
3.target属性定义何处打开超链接地址:_top,_parent,_self,_blank
4.hreflang属性定义导航地址的语言,仅作为提供建议。
5.ping属性定义PING POST请求,以空格分隔:url url url。
6.rel属性定义当前文档与超链接地址的关系,空格分隔:参考之前。
7.type属性定义超链接地址的类型:MIME类型。
用法:
<!-- 跳转到当前页面中id为main的元素 -->
<a href="#main">Jump to main</a>
<!-- 空白页面打开一个网页 -->
<a href="https://www.jianshu.com"  target="_blank">Jump to Jianshu</a>
<!-- 创建邮箱链接 -->
<a href="mailto:952222@163.com">Sent me email</a>
<!-- 创建电话链接 -->
<a href="tel:+8615900000000">Call me</a>
<!-- 创建下载链接 -->
<a download="demo.jpg" href="download/demo.jpg">Download Jpg</a>

small标签

说明:定义字体变小一号的文本(大->中->小)
属性:暂无
用法:
<!-- 相较于行内元素的字体大小,small标签会自降一号 -->
<p>这是一段普通的文本,<small>这是一段小一号的文本</small></p>

abbr标签

说明:定义一个缩写,可以提供一个完整的描述,默认带点线。
属性:title属性以提示框的形式表现全写(全局属性的title在这里有特别意义):文本值
用法:
<p>准备参加十二月的<abbr title="College English Test - 6">CET-6</abbr>考试</p>

dfn标签

说明:标记一个术语,值由内容,title属性,abbr标签title属性确定
属性:title属性以提示框的形式术语的值:文本值
用法:
<!-- 用法一:dnf带title -->
<p>世界由<dfn title="world wide web">www</dfn>组成</p>
<!-- 用法二:dnf带有title属性的abbr标签 -->
<p>世界由<dfn><abbr title="world wide web">www</abbr></dfn>组成</p>

bdo标签

说明:定义一段文字,双向覆盖文字排向。
属性:dir属性(其实也是全局属性)定义文本排列的方向:ltr,rtl。
用法:
<!-- 文字完全反着排列 -->
<bdo dir="right">这是一段从右往左排列的文字</bdo>

bdi标签

说明:定义一段文字,双向隔离文字拍向。
属性:dir属性(其实也是全局属性)定义文本排列的方向:ltr,rtl。
用法:
<!-- bdi内容会和p内容分开 -->
<p dir="rtl">一段从右往左的文字,但是<bdi>这句不是</bdi></p>

sup标签

说明:定义一段文字,以上标形式显示。
属性:暂无
用法:
<!-- 可以作为算数的平方符号使用 -->
<p>1024<sup>2</sup>+1024<sup>2</sup></p>

sub标签

说明:定义一段文字,以下标形式显示。
属性:暂无
用法:
<!-- 可以作为算数的标记使用 -->
<p>1024<sub>2</sub>+1024<sub>2</sub></p>

ins标签

说明:定义一段已经被插入的文本。
属性:
1.datetime属性定义修改的时间:有效的日期时间。
用法:
<!-- 示例 -->
<p>烟锁池塘柳,<ins datetime="2018-11-22">炮镇海棠楼</ins></p>

del标签

说明:定义一段已经被删除的文本。
属性:
1.datetime属性定义修改的时间:有效的日期时间。
用法:
<!-- 示例 -->
<p>烟锁池塘柳,<del datetime="2018-11-22">疱疹海棠喽</del> 炮镇海棠楼</p>

u标签

说明:定义一段有下划线的文本,并无特别意义,推荐ins标签。
属性:暂无
用法:
<!-- 示例 -->
<p>烟锁池塘柳,<u>炮镇海棠楼</u></p>

s标签

说明:定义一段有删除线的文本,并无特别意义,推荐del标签。
属性:暂无
用法:
<!-- 示例 -->
<p>烟锁池塘柳,<s>疱疹海棠喽</s> 炮镇海棠楼</p>

em标签

说明:定义一段强调文本,表明内容的着重点,显示效果与i标签相同。
属性:暂无
用法:
<!-- 强调动作是敲,而不是推,踹,踢之类的动作-->
<p>鸟宿池边树,僧<em>敲</em>月下门</p>

strong标签

说明:定义一段强调文本,表明内容的重要性,显示效果与b标签相同。
属性:暂无
用法:
<!-- 强调章节的标题内容,非常强烈的强调-->
<p>章节一:<strong>如何学习html</strong></p>

i标签

说明:定义斜体文字。
属性:暂无
用法:
<!-- 出于某些原因,需要和和其他内容区分开来 -->
<p>一段普通文字,<i>没有</i>什么特别的地方</p>

b标签

说明:定义粗体文字。
属性:暂无
用法:
<!-- 一般来说,加粗只是为了吸引用户的注意 -->
<p>一段普通文字,<b>没有</b>什么特别的地方</p>

blockquote标签(块级标签)

说明:定义一段块级引用,一般有缩进。
属性:
1.cite属性定义引用来源:url
用法:
<!-- 示例 -->
<blockquote >小楼昨夜又东风,故国不堪回首月明中。</blockquote>

q标签(块级标签)

说明:定义一段行内引用,一般没有缩进。
属性:
1.cite属性定义引用来源:url
用法:
<!-- 示例 -->
<p>古人云,<q>好记性不如烂笔头</q></q>

cite标签(块级标签)

说明:定义引用的来源,一般是作品什么的,配合blockquote标签使用。
属性:暂无
用法:
<!-- 示例 -->
<blockquote >春风得意马蹄疾,一日看尽长安花。 —— <cite>孟郊《登科后》<cite></blockquote>

mark标签

说明:定义一段标记文本,用于高亮显示,自带黄色背景色。
属性:暂无
用法:
<p>谁念<mark>西风</mark>独自凉,萧萧<mark>黄叶</mark>闭疏窗,沉思往事立残阳。</p>

code标签

说明:定义一段计算机代码,等宽字体
属性:暂无
用法
<!-- 简书的代码显示就是用的code标签 -->
<code>some example</code>

samp标签

说明:定义计算机程序的输出
属性:暂无
用法
<!-- 暂时还没有什么例子 -->
<samp>some example</samp>

var标签

说明:定义变量的名称,或由用户提供的值,默认斜体
属性:暂无
用法
<!-- 比如数学运算中x,y变量 -->
<p><var>x</var>=<var>y</var>+2</p>

kbd标签

说明:定义用户的键盘输入,默认monospace字体
属性:暂无
用法
<!-- 比如数学运算中x,y变量 -->
<p>按下以下键进入游戏:<kbd>enter</kbd></p>

time标签

说明:定义日期和时间(可包含时区)
属性:
1.datetime属性定义时间:标准日期格式
2.pubdate属性定义发布日期,一般表示文章发布日期:布尔值
用法
<!-- 在一篇文章中用pubdate表示该文章的发布时间 -->
<p>html学习之路(二)发布于<time datetime="2018-11-22 19:28" pubdate>星期四</time></p>

ruby标签

说明:定义东亚字符发音的容器(配合以下标签使用)
属性:暂无

rp标签

说明:定义不能使用ruby的注释,通常为圆括号
属性:暂无

rt标签

说明:定义字符的发音,在ruby标签内使用
属性:暂无

rb标签

说明:定义ruby标签内字符发音的范围
属性:暂无

rtc标签

说明:定义字符的语义注解
属性:暂无
用法:
<!-- 比如"汉字"的发音  -->
<ruby>
  <rb>汉</rb>   <rp>(</rp><rt>han</rt><rp>)</rp>
  <rb>字</rb>   <rp>(</rp><rt>zi</rt><rp>)</rp>
  <rtc>Chinese</rtc>
</ruby>

相关文章

  • html学习之路(二)- 行内标签

    hr标签(块级标签) br标签 wbr标签 span标签 a标签 small标签 abbr标签 dfn标签 bdo...

  • 快标签 和行内标签知识介绍

    HTML 块标签,行内标签,行内块标签以及之间的相互转换 +++++++++++++++++++++++...

  • HTML中块级元素和行内元素

    HTML标签CSS盒模型块级元素和行内元素的定义块级元素和行内元素的分类 1、 HTML标签 html标签定义: ...

  • html块标签、含样式的标签

    仅供学习,转载请注明出处 html块标签 1、 标签 块元素,表示一块内容,没有具体的语义。2、 标签 行内元...

  • CSS学习笔记2 元素、行高、三大特性、背景

    1. 块级元素 和 行内元素 和 行内块元素 HTML标签一般分为块标签和行内标签两种类型,它们也称为块元素和行内...

  • 2018-08-20html语义标签

    html块、含样式的标签 html块 1、div标签 块元素,表示一块内容,没有具体的语义。2、span标签 行内...

  • css第一弹

    请仔细看代码内的注释 行内元素与块状元素 html 标签 在不引用css的情况下分为两种标签 (行内标签, 块标签...

  • display几种样式的理解

    display几种样式的理解 在HTML标签中,存在着两种标签类型,即行内元素(或者说行内标签)和 块内元素(或者...

  • 标签类型

    前言 html标签有很多种类型,这里做一个梳理。 闭合标签,自闭合标签 块级元素,行内元素,行内块元素 可替换元素...

  • HTML5 新增标签

    HTML5新增标签 HTML5新增了27个标签元素,废除了16个标签元素,主要包括结构性标签、级块性标签、行内语义...

网友评论

      本文标题:html学习之路(二)- 行内标签

      本文链接:https://www.haomeiwen.com/subject/wohpxqtx.html