学习笔记-html5-文本元素

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/tjzhuorui/article/details/75043001

html5里面规定了很多标签,很多标签也许没有什么实际的展示效果,但是他们都是从语义出发的,一方面使得css和js写起来更方便,另一方面也增加了阅读性。

先上一张笔者练习的效果图:


推荐一个网站可以快速查看元素的兼容性http://caniuse.com/,

附上代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>文本元素</title>
    <style>
        .container{
            box-shadow: 0 0 10px grey;
            padding:10px;
            margin: 10px;
        }

        h1{
            text-align: center;
        }

        table{
            width: 100%;
        }

        table tr td{
            padding: 5px;
        }

        table tr:nth-child(odd){
            background-color: lightgoldenrodyellow;
        }

        table tr:nth-child(even){
            background-color: lightgrey;
        }

    </style>
</head>
<body>
<div class="container">
    <h1>文本元素演示</h1>
    <table cellpadding="0" cellspacing="0">
        <tr>
            <td></td>
            <td></td>
            <td></td>
            <td>hello world</td>
            <td>你好</td>
        </tr>
        <tr>
            <td>b</td>
            <td>bold</td>
            <td>加粗,不强烈</td>
            <td><b>hello world</b></td>
            <td><b>你好</b></td>
        </tr>
        <tr>
            <td>strong</td>
            <td>bold</td>
            <td>加粗,语义上强调</td>
            <td><strong>hello world</strong></td>
            <td><strong>你好</strong></td>
        </tr>
        <tr>
            <td>br</td>
            <td>break</td>
            <td>换行</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>wbr</td>
            <td>word break</td>
            <td>软换行,当需要换行的时候,在此处换行</td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td>i</td>
            <td>italic</td>
            <td>斜体</td>
            <td><i>hello world</i></td>
            <td><i>你好</i></td>
        </tr>
        <tr>
            <td>em</td>
            <td>emphasized</td>
            <td>斜体,语义上有强调</td>
            <td><em>hello world</em></td>
            <td><em>你好</em></td>
        </tr>
        <tr>
            <td>s</td>
            <td>strikethrough</td>
            <td>删除线</td>
            <td><s>hello world</s></td>
            <td><s>你好</s></td>
        </tr>
        <tr>
            <td>del</td>
            <td>delete</td>
            <td>删除线,强调</td>
            <td><del>hello world</del></td>
            <td><del>你好</del></td>
        </tr>
        <tr>
            <td>u</td>
            <td>underlined</td>
            <td>下划线</td>
            <td><u>hello world</u></td>
            <td><u>你好</u></td>
        </tr>
        <tr>
            <td>ins</td>
            <td>inserted</td>
            <td>下划线,语义上表示插入</td>
            <td><ins>hello world</ins></td>
            <td><ins>你好</ins></td>
        </tr>
        <tr>
            <td>small</td>
            <td></td>
            <td></td>
            <td><small>hello world</small></td>
            <td><small>你好</small></td>
        </tr>
        <tr>
            <td>sup</td>
            <td>super-script</td>
            <td>上标</td>
            <td><sup>hello world</sup></td>
            <td><sup>你好</sup></td>
        </tr>
        <tr>
            <td>sub</td>
            <td>sub-script</td>
            <td>下标</td>
            <td><sub>hello world</sub></td>
            <td><sub>你好</sub></td>
        </tr>
        <tr>
            <td>code</td>
            <td></td>
            <td>代码,只有在lang=“en”时才有效果</td>
            <td><code>hello world</code></td>
            <td><code>你好</code></td>
        </tr>
        <tr>
            <td>var</td>
            <td></td>
            <td>变量</td>
            <td><var>hello world</var></td>
            <td><var>你好</var></td>
        </tr>
        <tr>
            <td>samp</td>
            <td>sample</td>
            <td></td>
            <td><samp>hello world</samp></td>
            <td><samp>你好</samp></td>
        </tr>
        <tr>
            <td>kbd</td>
            <td>keyboard</td>
            <td>键盘,输入</td>
            <td><kbd>hello world</kbd></td>
            <td><kbd>你好</kbd></td>
        </tr>
        <tr>
            <td>abbr</td>
            <td>abbreviation</td>
            <td>缩写词</td>
            <td><abbr>hello world</abbr></td>
            <td><abbr>你好</abbr></td>
        </tr>
        <tr>
            <td>dfn</td>
            <td>define</td>
            <td>定义,一般性倾斜</td>
            <td><dfn>hello world</dfn></td>
            <td><dfn>你好</dfn></td>
        </tr>
        <tr>
            <td>q</td>
            <td>quotation</td>
            <td>引用语</td>
            <td><q>hello world</q></td>
            <td><q>你好</q></td>
        </tr>
        <tr>
            <td>cite</td>
            <td>citation</td>
            <td>摘抄</td>
            <td><cite>hello world</cite></td>
            <td><cite>你好</cite></td>
        </tr>
        <tr>
            <td>ruby,rp,rt</td>
            <td>据说有语言历史由来</td>
            <td>语言元素,rp标签下,内容会不显示。但明显,各个浏览器对次功能的支持并不是很好。而且,布局对齐也会显得额外麻烦。</td>
            <td><ruby>
            </ruby></td>
            <td><ruby>你<rt><rp>(</rp>ni<rp>)</rp></rt>好<rt>hao</rt></ruby></td>
        </tr>
        <tr>
            <td>kdo</td>
            <td>但chrome上,似乎并没有效果</td>
            <td>文字方向</td>
            <td><kdo dir="rtl">hello world</kdo></td>
            <td><kdo dir="rtl">你好</kdo></td>
        </tr>
        <tr>
            <td>mark</td>
            <td></td>
            <td>上下文中突出显示,黄色背景,蓝色字体</td>
            <td><mark>hello world</mark></td>
            <td><mark>你好</mark></td>
        </tr>
        <tr>
            <td>time</td>
            <td></td>
            <td>时间,仅仅从语义上出发</td>
            <td><time>2017-07-07 07:10:15</time></td>
            <td><time>你好</time></td>
        </tr>
        <tr>
            <td>span</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>


    </table>
</div>

</body>
</html>




阅读更多

没有更多推荐了,返回首页