HTML常用标签

2018-12-02 本文已影响18人一只小前端

HTML的结构

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>
     /* 标题 */
    </title>
</head>
<body>
    <!-- 正文-->
</body>
</html>

HTML常用的标签

标题标签—h

总共有6级，依次从大到小。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>标题标签</title>
</head>
<body>
    <h1>我是h1标签</h1>
    <h2>我是h1标签</h2>
    <h3>我是h1标签</h3>
    <h4>我是h1标签</h4>
    <h5>我是h1标签</h5>
    <h6>我是h1标签</h6>
</body>
</html>

浏览器显示效果如下：

表单标签—input

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>表单标签</title>
</head>
<body>
    <input placeholder="我是占位文字"><br>
    <input value="我是默认文字"><br>
    <input type="date"><br>
    <input type="file"><br>
    <input type="color"><br>
    <input type="radio"><br>
    <input type="checkbox"><br>
</body>
</html>

为换行标签，type和value为input的属性，可以改变它的样式。显示效果如下：

段落标签—p

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>段落标签</title>
</head>
<body>
    <p>
        我是段落标签我是段落标签<br>
        我是段落标签我是段落标签我是段落标签
    </p>
</body>
</html>

显示效果如下：

超链接标签—a

比如说加载百度网页。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>超链接标签</title>
</head>
<body>
    <a href="http://www.baidu.com/" target="_blank">
       百度
    </a>
</body>
</html>

显示效果如下：直接点击文字跳转到百度页面，blank是在新的页面加载百度。如果href="#",就是表示为空链接，跳转到当前界面。

图像标签—img

在本地放一张图片，跟创建的html文件同级，直接加载图片。

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
    ![](img_01.jpg)
</body>
</html>

显示效果：

结合上面超链接标签，来实现点击图片跳转百度页面，如下代码所示：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>图像标签</title>
</head>
<body>
    <a href="http://www.520it.com/" target="_blank">
        ![](bd_logo1_31bdc765.png)
    </a>
    ![](img_01.jpg)
</body>
</html>

alt后面的文字，只有在图片加载失败的时候，才会出现，现在加载成功，显示效果如下：

列表标签

列表标签分为有序列表(ol)和无序列表(ul)。
代码如下：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>列表标签</title>
</head>
<body>
    <ul>
        <!--无序列表-->
        <li> 我是无序列表 </li>
        <li> 我是无序列表 </li>
        <li> 我是无序列表 </li>
        <li> 我是无序列表 </li>
        <li> 我是无序列表 </li>
    </ul>
        <!--有序列表-->
    <ol type="1">
        <li> 我是无序列表 </li>
        <li> 我是无序列表 </li>
        <li> 我是无序列表 </li>
        <li> 我是无序列表 </li>
        <li> 我是无序列表 </li>
    </ol>
</body>
</html>