HTML5相关格式化，属性，链接与表格操作

我们初步了解了HTML5后，现在我们再进一步了解其相关的操作
格式化：

在这里插入图片描述
我们可以看到其作用，同时，我采用代码的形式输出：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>第二次</title>
</head>
<body>
    <b>欢迎来这里</b><br/>
    <big>大号字</big><br/>
    <em>着重文字</em><br/>
    <i>定义斜体字</i><br/>
    <small>定义小号字</small><br/>
    <strong>加重语气</strong><br/>
    大家<sub>定义上标字</sub>大家<br/>
    大家<sup>定义下标字</sup>大家<br/>
    哈哈哈<ins>定义插入字</ins><br/>
    <del>定义删除</del><br/>
    </body>
</html>

通过上述代码，不难发现，我将所写的东西都放在了<body></body>标签里面，我们之前了解过，下面我们看看具体在网页中实现是哪种样式：

在这里插入图片描述

网页中显示如上。具体操作，可以自行动手实践

属性：
在这里插入图片描述

如上，标签中可以使用属性来控制标签的相关信息：下面以我代码为实例：

<h1 align="center">标题</h1>
<a href="http://www.baidu.com" target="_blank">点我</a><br/>

如上，align 是规定h1里的东西位置在哪里，可以左右上下，在我这里，我规定的是居中。
target，在之前也说过，是指网页打开（重新打开一个网页，在此网页上更新打开）

class：是指规定元素的类名，
id：是指规元素的唯一id，在后面使用的话会比较方便
等等，一些属性，后面会慢慢了解到。

链接操作：
网页中我们经常会点击链接，下面我会介绍一些基本的链接操作：

在这里插入图片描述

1.文本链接：即我们的<a href="http://www.baidu.com" target="_blank">文本链接</a>在网页中，我们点击此文本即可跳转，稍后我会给出代码的显示结果.
2.图片链接：当我们点击一个图片时，即可跳转到相关链接，即为图片链接，图片链接也涉及到img标签属性，下面我给出我所学习的代码：

图片文字链接介绍：<br/>
<a href="http://www.baidu.com" target="_blank">
    <img src="1.jpg" width="100px" height="100px" alt="我的照片">
</a>
<br/>
<a name="tips">你好</a>
<a href="#tips">跳转到你好</a><br/>

在a标签里面，我们加入了img标签，同时定义了img标签的相关属性：width height alt，宽高文本属性。
即为设置了此图片的大小，同时，如果找不到此图片会显示 “我的照片”稍后给出显示成果。

<a name="tips">你好</a>
<a href="#tips">跳转到你好</a><br/>

而此代码则是一个跳转，当我们点击跳转到你好时，即会跳转到你好，就不需要我们再滚动页面了。
下面给出上述的相关图
在这里插入图片描述

当我们图片显示不了时：
在这里插入图片描述

表格：

表格的相关属性如下：
在这里插入图片描述

同理我给出我的相关代码，来一一讲解：

表格使用：<br/>
<table border="1">
    <caption>重要表格</caption>
    <tr>
        <th>单元</th>
        <th>单元</th>
        <th>单元</th>
    </tr>
    <tr>
        <td>1</td>
        <td>2</td>
        <td>3</td>
    </tr>
    <tr>
        <td>4</td>
        <td>5</td>
        <td>6</td>
    </tr>
</table>
<table border="1">
    <tr>
        <td>
            表格1
        </td>
        <td>
            表格2
        </td>
    </tr>
    <tr>
        <td>
            <ul>
                <li>一</li>
                <li>二</li>
                <li>三</li>
            </ul>
        </td>
        <td>
            数字
        </td>
    </tr>
</table><br/>
<table border="1" cellpadding="10" cellspacing="10" bgcolor="red">一个为边距 一个为间距
    <tr bgcolor="#7fffd4">
        <td>1</td>
        <td>1</td>
        <td>1</td>
    </tr>
    <tr>
        <td>2</td>
        <td>2</td>
        <td>2</td>
    </tr>
</table>

此代码显示成果如下：
在这里插入图片描述

不难看出，我创建了3个表格

<table border="1">  为给此表格创建了框，可以尝试改一下border的数值

<caption>重要表格</caption>

此标签是给表格增加了一个标题。

tr标签是指，行数，比如一个第三个单元格只有2行，所以只有2个tr标签，只要有几行就会出现几个tr标签，
td标签是表格里面的单元例如：

<tr>
        <td>
            表格1
        </td>
        <td>
            表格2
        </td>
    </tr>

即为：一行里面有2个单元格，分别为表格一和表格二，同时，可以尝试增加td标签，看看会产生什么效果。

<table border="1" cellpadding="10" cellspacing="10" bgcolor="red">设置了表格的一个边距一个间距的大小，同时使用bgcolor属性规定了表格的颜色，可以从我们显示成果中可以看出。

上述为HTML5相关格式化，属性，链接与表格操作的一些常用操作，当然也不是很全面，在后面我们会慢慢碰到更多的相关属性知识！

HTML5相关格式化，属性，链接与表格操作

猜你喜欢