1、常用标签

2019-02-20 本文已影响0人 calvinbj

一、常用标签

（一）、字体及字符实体

语法：<i></i> |<em></em>
说明：倾斜标记

语法：<b></b> |<strong></strong>
说明：加粗标记

语法：<u></u> 
说明：下划线标记

语法：<br /> 
说明：空标记，用来设置字体换行

语法：<hr /> 
说明：空标记，用做水平线

语法：<p></p> 
说明：段落标记，标识一个段落（段落与段落之间有段间距）

（二）、字符实体

常见的有：


&nbsp;       //不换行空格

&lt;         //左尖括号

&gt;         //右尖括号

&copy;       © //备案中的图标

（三）、常用元素

<div></div>      块元素

<span></span>    行内元素，可以是某一小段文本，也可以是某一个字。

（四）、列表元素

1、无序列表

语法：

 <ul>
      <li>列表项内容</li>
      <li>列表项内容</li>
      <li>列表项内容</li>
      .............
</ul>

每一个列表项内容前面都有一个项目符号.png

2、有序列表

语法：

<ol>
      <li>列表项内容</li>
      <li>列表项内容</li>
      <li>列表项内容</li>
      .............
</ol>

每一个列表项内容前面都有一个有序符号.png

3、自定义列表

语法：

<dl>
      <dt>名词</dt>
      <dd>解释</dd>
      <dd>解释</dd>
      .............
</dl>

自定义列表.png

（五）、超链接

语法：

<a href="目标文件路径及全称/连接地址URL" alt="替换文本" title="提示文本">文字</a>

例子：

<a href="http://www.1000phone.com">北京千锋互联网科技公司</a>

文字变成蓝颜色，点击浏览之后变成紫色，同时出现提示文本“千锋教育”.png

（六）、图像

语法：

<img src="目标文件路径及全称" alt="图片替换文本" title="图片标题">

例如：

<img src="images/1.jpg" alt="图片示例" title="图片标题" />

title显示图片标题.png

当你的图片路径写错或者找不到这个图片时，alt中的文字显示提示，如“图片示例”.png

二、表格元素

1、语法：

<table>
        <tr>
            <td></td>
            <td></td>
        </tr>
</table>

说明：一对tr表示一行；一对td表示一列（单元格）

行列.png

表格的相关属性.png

示例：

<table width="600" height="300" border="1" bordercolor="#f00">//#f00表示红色
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

下图， width="600" height="300" border="1" bordercolor="#f00"

红色边框.png

3、表格其他属性

表格其他属性.png

3.1cellspacing

<table width="600" height="300" border="1" bordercolor="#f00" cellspacing="10">
        <tr>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>

这里的cellspacing单元格空间为10个像素，如下图。

单元格空间为10个像素点.png

这里的cellspacing单元格空间也可以为0个像素，两个单元格的边框紧挨在一起，需要注意这里的两根边框线并没有消失，如下图。

单元格空间为0个像素点.png

3.2cellpadding

1、这里先将宽度和高度去掉，表格自适应文字。代码和结果如下。

<table border="1" bordercolor="#f00" cellspacing="0" >
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
        </tr>
    </table>

表格自适应文字.png

2、添加cellpadding

<table border="1" bordercolor="#f00" cellspacing="0" cellpadding="30">
        <tr>
            <td>第一行第一列</td>
            <td>第一行第二列</td>
        </tr>
        <tr>
            <td>第二行第一列</td>
            <td>第二行第二列</td>
        </tr>
    </table>

如下图，cellpadding为30个像素点，结果增加单元格和文字之间的间隙。（cell为单元格，padding为内边距的意思，合在一起就是单元格和文字之间的间隙。）

cellpadding为30个像素点.png

3、align和valign

align是水平对齐方式，默认是左对齐。
valign是垂直对齐方式，默认是中间对齐（居中）。
如下图：

align和valign默认对齐方式.png

align属性值有left、center、right。

valign属性值有top、middle、bottom。代码和效果如下：

<table width="600" height="300" border="1" bordercolor="#f00" cellspacing="0" >
        <tr>
            <td align="left">第一行第一列</td>
            <td align="center">第一行第二列</td>
            <td align="right">第一行第三列</td>
        </tr>
        <tr>
            <td valign="top">第二行第一列</td>
            <td valign="middle">第二行第二列</td>
            <td valign="bottom">第二行第三列</td>
        </tr>
    </table>

align和valign效果.png

变化前代码：

<table width="600" height="300" border="1" cellspacing="0" >
        <tr>
            <td>1-1</td>
            <td>1-2</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
        </tr>
    </table>

变化前效果：

变化前效果.png

4、colspan和rowspan

colspan:合并第一行两个单元格

<table width="600" height="300" border="1" cellspacing="0" >
        <tr>
            <td colspan="2">1-1</td>
        </tr>
        <tr>
            <td>2-1</td>
            <td>2-2</td>
        </tr>
    </table>

colspan添加后效果图：

colspan添加后效果.png

rowspan:合并第一列两个单元格

<table width="600" height="300" border="1" cellspacing="0" >
        <tr>
            <td rowspan="2">1-1</td>
            <td>1-2</td>
        </tr>
        <tr>
            <td>2-2</td>
        </tr>
    </table>

合并第一列两个单元格.png