hmtl5--换行、表示输入和输出、标题引用、引文、定义和缩写

最新推荐文章于 2022-10-13 15:29:42 发布

RainMcCom

最新推荐文章于 2022-10-13 15:29:42 发布

阅读量657

点赞数

分类专栏： Html5学习文章标签： html5

本文链接：https://blog.csdn.net/RainMcCom/article/details/53141412

版权

Html5学习专栏收录该内容

5 篇文章 0 订阅

订阅专栏

有两个内容可以控制换行：br元素和wbr元素。

1.强制换行
br元素会引起一次换行，习惯样式是将内容转移到新行上。

<!DOCTYPE html>
<html>
<head>
    <title>aaa</title>  
</head>
<body>
   我从未爱过你，<br>怎么会想起你。
</body>
</html>

这里写图片描述

2.指明可以安全换行的建议位置
wbr是html5新增的元素，表示在长度超过浏览器窗口的内容适合在此换行，是否换行由服务器决定。wbr元素是对恰当位置进行换行的建议而已。

<!DOCTYPE html>
<html>
<head>
    <title>aaa</title>  
</head>
<body>
   Dou you know something about this? This is very long word: SuperLongLongLong<wbr>Card<wbr>Word.I like it.
</body>
</html>

这里写图片描述

有四个元素暴露了html的极客起源，它们是输入和输出。它们分别是：
code：代表计算机代码片段
var：在编程语境中表示变量，也可以表示一个供读者在想象中插入一个指定值的占位符
samp:表示程序或者计算机系统的输出
kbd:表示用户输入

<!DOCTYPE html>
<html>
<head>
    <title>aaa</title>  
</head>
<body>
   I like <var>fruits</var>.Let us look the code below:<br>
   <code>int a=5; int b=10; int c; cin>>c; cout<<(a+b+c);
   </code><br>
   Now,we input a number:<kbd>10</kbd>,then we get the result:<samp>25</samp>.
</body>
</html>

这里写图片描述

表示缩写
abbr元素用来表示缩写，其title属性表示的是该缩写代表的完整词语。

<!DOCTYPE html>
<html>
<head>
    <title>aaa</title>  
</head>
<body>
   I like watching <abbr title="National Basketball Assocation">NBA</abbr> games.
</body>
</html>

这里写图片描述
可以看到的是，将光标放在缩写内容上面，就会显示其完整含义。

定义术语
dfn元素表示定义中的术语。

<!DOCTYPE html>
<html>
<head>
    <title>aaa</title>  
</head>
<body>
    <p>
        The <dfn title="apple sample">apple</dfn> is a kind of fruit.
    </p>

</body>
</html>

这里写图片描述
如果dfn元素包含一个abbr元素，那么该缩写词就是要定义的术语。如果元素内容为文字并且没有title属性，那么文字内容就是要定义的术语。

引用来自他处的内容
q元素表示引用他处的内容。

<!DOCTYPE html>
<html>
<head>
    <title>aaa</title>  
</head>
<body>
    <p>
        <q cite="http://en.wikipedia.org/wiki/Apple">The
        <dfn title="apple">apple</dfn> is the pomaceous fruit of the apple tree,
        species Malus domestica in the rose famliy.</q>
    </p>
</body>
</html>

这里写图片描述

引用其它作品的标题
cite元素表示所引用作品的标题。

<!DOCTYPE html>
<html>
<head>
    <title>aaa</title>  
</head>
<body>
   My favourite book on fruit is:<cite>Fruit:Edible,Inedible,Incredible</cite>.
</body>
</html>