ror突进-html基础

div / span 的不同

div是在页面上划分一个几何区域,这里区域内可以任意包含元素,各div之间也可以按照各种格式进行排列,通常都是用来将页面元素物理分组的。

<div>
    <div>1</div>
    <div>2</div>
</div>

span是个行内区域,它对应的是行内类似文字元素而不是一个几何区域,它受行元素本身的影响,通常用来在行内插入小符号或者其他特殊标识用。

<p>这是第<span>1</span>章</p>

class 与 id 的不同

class和id都是用来给html元素打标签的,打好标签之后就可以用css找到它并通过锚定标签的方式来修饰该html元素。

这两个不同之处在于,同一个class标签是可以给多个html元素打上的,比如一串div都可以用一个class标签来标识,当锚定这个标识对应的也是一大串div;而一个id却只能一次对应一个html元素,不能重复打,如果重复了也会只锚定第一个,用id来标签操作角度更加精准。

比如class可以:

<div class="tag1">1</div>
<div class="tag1">2</div>

而id只能:

<div id="tag1">1</div>
<div id="tag2">2</div>

而如果即便id重复的话,也只会标识到头一个,第二个是无效的

<div id="tag1">1</div>
<div id="tag1">2</div>

p 与 br 的不同

p是个段落标签,内部都是文字,不同的p之间是被分隔的;而br是个回车跳行,用在段落内部外部都行。

如何使用 table 排版

table表单就像正常的二维表一样,有横列和纵列,还有表头

横列标签是tr,纵列标签是td,表头是th

比如两行三列无表头:

<table>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>    
</table>

效果如下:

1-1 1-2 1-3
2-1 2-2 2-3

如果加上表头:

<table>
    <tr>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>    
</table>

效果就成了

1 2 3
1-1 1-2 1-3
2-1 2-2 2-3

也可以纵列加表头

<table>
    <tr>
        <th>#</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>
    <tr>
        <th>-</th>
        <td>1-1</td>
        <td>1-2</td>
        <td>1-3</td>
    </tr>
    <tr>
        <th>-</th>
        <td>2-1</td>
        <td>2-2</td>
        <td>2-3</td>
    </tr>    
</table>

效果

# 1 2 3
- 1-1 1-2 1-3
- 2-1 2-2 2-3