html5---排版标签

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>排版标签</title>
</head>
<body>
    <!--1.标题标签(块级标签h1~h6,h7~就是一个普通的文本)-->
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>
    <h4>四级标题</h4>
    <h5>五级标题</h5>
    <h6>六级标题</h6>
   <!-- <h7>我是标题</h7>
    <h100>我是标题</h100>-->
    普通文本
    <hr/>

    <!--2. 段落标签p-->
    <p>大江东去浪淘尽</p>
    <p>千古风流人物还看今朝</p>
    <hr/>

    <!--3. 换行标签<br/>-->
    hello <br/>你好
    <hr/>

    <!--4.预处理标签pre-->
    你好,上海&nbsp;&nbsp;&nbsp;你好,贵阳
    你好,济宁
    <!-- 结论:代码html中所有的多的空格和空行都被当做一个空格来处理-->
    <!-- 强制产产生空格需要使用硬空格 &nbsp; -->
    <pre>  <!--代码呈现格式与网页呈现一致-->
              静夜思
            作者:李白
    </pre>
    <hr/>

    <!--5.字体标签font(过时但可以使用)-->
    <font color="#87c" size="24px" face="楷体">上海</font>
    <!--px:像素意思-->

    <hr/>
    <!--6.加粗<b> 斜体<i>-->
    <b>加粗文本</b>
    <strong>加粗文本2</strong>
    <i>斜体</i>
    <em>强调斜体</em>
    <b><i>加粗斜体</i></b>

    <!--7.下划线<u>-->
    <u>下划线文本</u>

    <!--8. 上下标-->
    H<sub>2</sub>O &nbsp;
    y = x<sup>2</sup>+b
    <br/>
    <!--9.大于小于 3 > 5 写法不规范-->
    <b>3</b>&gt;<i>5</i> &nbsp;
    &gt; 大于  &lt; 小于
    版权所有<sup>&copy;</sup>
    注册商标<sup>&reg;</sup>
    贸易商标&trade;
    <bdo dir="ltr">abc</bdo>
    <bdo dir="rtl">abc</bdo>

    <!--10.span标签-->
    <span style="background-color: aquamarine">hello</span> word
    <span style="background-color: burlywood">hello</span> 上海
<!--总结:
    1.行级 : 不会自动换行(内容满一行才会自动换行)
    2.块级: 每个标签都只占一整行-->
</body>
</html>

















展开阅读全文

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