HTML常用标签

一、文本类标签

1.段落 <p>

代码示例：

<p>这是一段段落文字</p>

网页效果：

QA：如何让一段文字居中？

代码示例：

<p align="center">这是一段段落文字</p>

页面效果：

align属性值参考：

属性值	说明
left	文字左对齐
center	文字居中对齐
right	文字右对齐

QA：如何让一段文字换行？

在需要换行的内容里后面添加换行标签<br/>

代码示例：

<p align="center">这是一段<br/>段落文字</p>

页面效果：

关于<br/>

<br /> 元素是一个空的 HTML 元素。由于关闭标签没有任何意义，因此它没有结束标签。

2.标题<h1><h2><h3><h4><h5><h6>

代码示例：

<h1>这是1号标题</h1>
<h2>这是2号标题</h2>
<h3>这是3号标题</h3>
<h4>这是4号标题</h4>
<h5>这是5号标题</h5>
<h6>这是6号标题</h6>

页面效果：

标题很重要

请确保将标题标签只用于标题。不要仅仅是为了产生粗体或大号的文本而使用标题。
搜索引擎使用标题为您的网页的结构和内容编制索引。
因为用户可以通过标题来快速浏览您的网页，所以用标题来呈现文档结构是很重要的。
应该将 h1 用作主标题（最重要的），其后是 h2（次重要的），再其次是 h3，以此类推。

3.内容 <span>

<span> 标签被用来组合文档中的行内元素

代码示例：

<span>这是文字内容</span>
<span>这是另外的文字内容</span>

页面效果：

4.有序列表

代码示例：

<ol>
    <li>香蕉</li>
    <li>苹果</li>
    <li>橘子</li>
</ol>

页面效果：

QA:列表序号可不可倒序？

代码示例：

<ol reversed="reversed">
    <li>香蕉</li>
    <li>苹果</li>
    <li>橘子</li>
</ol>

页面效果：

==常用的有序列表属性：==

5.无序列表

代码示例：

<ul>
    <li>奔驰</li>
    <li>宝马</li>
    <li>奥迪</li>
</ul>

页面效果：

常用的无序列表属性：

二、图片<img />

代码示例：

<img src="https://ss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/logo/bd_logo1_31bdc765.png" alt="图片提示文字"/>

页面效果：

属性解释：

src ：图片地址，可以是网络地址，类似：http://test.hawklu.com/youdaoImg/img.png可以是本地地址，类似 ../image/logo.png ，本地地址可以使用绝对路径或相对路径，==一般建议使用相对路径==

alt ：图片异常（图片丢失或应用路径错误）时显示的提示文字

三、超级链接 <a>

超级链接，几乎所有的网页上都有超级链接，通常用于从一个网页跳转到另一个网页。也可以用于页面内的定位。

代码示例：

<a href="https://www.baidu.com">这是一个超级链接</a>

页面效果：

点击前

属性解释：

href ：要跳转的目标地址，通常网络地址，类似：http://www.baidu.com

target ：目标地址的打开方式，可以是新窗体打开，也可以覆盖自身

四、表格 <table>

常见表格，通常用来处理数据。

---

代码示例：

<table border="1">
    <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>

页面效果：

备注：
上述代码中，为了使表格能够清晰可见，设置了表格属性 border="1" ，表示单元格边框宽度为1

---

如果要实现无边框表格，可以使用下面代码：

<table border="1">
    <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）单元格列合并（横向合并）

在需要合并的收个单元格添加属性 colspan="2" 然后删除被合并的单元格。

属性值为要合并的列数

代码示例：

<table border="1">
    <tr>
        <td colspan="2">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>

页面效果：

（2）单元格行合并（纵向向合并）

在需要合并的收个单元格添加属性 rowspan="2" 然后删除被合并的单元格。

属性值为要合并的行数

代码示例：

<table border="1">
    <tr>
        <td rowspan="2">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>

页面效果：

QA：如何去掉单元格之间的空白？

AS：默认表格的单元格之间都有2px的空白，如果想去掉空白，可以在table开始标记中设置属性 cellspacing="0"

代码示例：

<table border="1" cellspacing="0">
    <tr>
        <td rowspan="2">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>

页面效果：

其他表格内的标签

除了<tr>和<td> 表格内常用的还有其他标签,