sup

    前端<sup><a href="http://www.baidu.com" target="_blank">[1]</a></sup>
    <br>
    10<sup>5</sup>
    <br>
    Na<sup>+</sup>

    H<sub>2</sub>SO<sub>4</sub>

sup英文：superscripted上标标签
sub英文：subscripted下标标签

英文全称最好背下来，逼格高，面试提一句
内联元素

span

    span 内联元素 inline element
    <span style="background-color: green;">123</span>

没有样式，内联元素

    <p>我是一个非常非常<span style="color: red;">牛</span><span style="color: blue;">X</span>的前端工程师</p>

可以给一行内的文字上颜色

    <p>我是一个非常非常<span id="niu" style="color: red;">牛</span><span style="color: blue;">X</span>的前端工程师</p>
    <script>
        var niu=document.getElementById('niu');
        console.log(niu.innerText);
    </script>

ol ul序列列表

ol有序列表 orderlist
ul无序列表 unorder list
序列列表

   <ol type="A">
        <!-- A如果超过26个就是AA AB a  i罗马数字 I罗马数字 1数字  
        -->
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ol>

   <ol type="a" start="c">
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ol>
    <ol type="1" start="10">
     start除了数字其它都不可以
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ol>

    <ol type="1" start="10" reversed="reversed">
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
        <li>123</li>
    </ol>

倒序如果超出10个，第11个就是负数

ul

    <ul type="disc">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <ul type="square">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <ul type="circle">
        <li>HTML</li>
        <li>CSS</li>
        <li>JavaScript</li>
    </ul>
    <!-- type="disc|square|circle" -->

type="disc|square|circle"

ol ul li 是块级元素

dl

definition list 定义列表
dt definition term
dd definition description

   <dl>
        <dt>
            <dd>我要成为WEB开发工程师</dd>
            <dd>我正在学习前端开发</dd>
        </dt>
    </dl>
    <dl>
        <dt>我的梦想</dt>
        <dd>我要成为WEB开发工程师我要成为WEB开发工程师</dd>
    </dl>

有样式的东西一般都不会用 比如下拉框select 更改默认的太麻烦了
自己封装

table

    table 表格 最早时表格是用来布局
    caption标题标签
    <table>
        <caption></caption>
    </table>

  table 表格 最早时表格是用来布局
    caption标题标签
    tr table header cell表头标签
    td table data cell单元格标签
    <table border="1" cellpadding="10" cellspacing="10">
        <caption>VIP班级学生联络表</caption>
        <tr>
            <th>ID</th>
            <th>姓名</th>
            <th>电话号码</th>
            <th>备注</th>
        </tr>
        <tr>
            <td>1</td>
            <td>东东</td>
            <td>13900000000</td>
            <td>班长</td>
        </tr>
        <tr>
            <td>1</td>
            <td>东东</td>
            <td>13900000000</td>
            <td>班长</td>
        </tr>
    </table>