当前位置: 首页 » 代码 » HTML » HTML常用标签一

HTML常用标签一

发布时间:2018-04-23

HTML 代码

热度:124

一、文本类标签

1.段落 <p>

代码示例:

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

网页效果:

image

QA:如何让一段文字居中?

代码示例:

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

页面效果:

image

QA:如何让一段文字换行?

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

代码示例:

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

页面效果:

image

关于<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>

页面效果:
image

标题很重要

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

3.内容 <span>

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

代码示例:

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

页面效果:
image

4.有序列表

代码示例:

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

页面效果:
image

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

代码示例:

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

页面效果:
image

==常用的有序列表属性:==
image

5.无序列表

代码示例:

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

页面效果:
image

常用的无序列表属性:
image

二、图片<img />

代码示例:

<img src="图片地址" alt="图片提示文字"/>

页面效果:

image

属性解释:

src :图片地址,可以是网络地址,类似:http://hawklu-upyun.test.upcdn.net/blogImg/2018/04/b798abe6e1b1318ee36b0dcb3fb9e4d3-1.png可以是本地地址,类似 ../image/logo.png,本地地址可以使用绝对路径或相对路径,==一般建议使用相对路径==

alt:图片异常(图片丢失或应用路径错误)时显示的提示文字

三、超级链接<a>

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

代码示例:

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

页面效果:

点击前

image

属性解释:

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

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

image

四、表格<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>

页面效果:

image

备注:
上述代码中,为了使表格能够清晰可见,设置了表格属性 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>

页面效果:

image

(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>

页面效果:

image

(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>

页面效果:

image

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>

页面效果:

image

其他表格内的标签

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

表格标题caption 表格页眉 thead 格页脚 tfoot 表格主题 tbody 等等
用法详见w3school:http://www.w3school.com.cn/html/html_tables.asp
image

去顶部