HTML常用标签

作者: 一只小前端 | 来源:发表于2018-12-02 15:31 被阅读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>

显示效果：

有序列表的type还可以等于A、I、a、i。
无序列表的type还可以设置为circle。

网友评论

本文标题：HTML常用标签

本文链接：https://www.haomeiwen.com/subject/asbjcqtx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！