H5笔记——HTML常用的标签

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>

浏览器显示效果如下：

Paste_Image.png

表单标签—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的属性，可以改变它的样式。显示效果如下：

Paste_Image.png

段落标签—p

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

显示效果如下：

Paste_Image.png

超链接标签—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="#",就是表示为空链接，跳转到当前界面。

Paste_Image.png

图像标签—img

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

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

显示效果：

Paste_Image.png

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

<!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后面的文字，只有在图片加载失败的时候，才会出现，现在加载成功，显示效果如下：

Paste_Image.png

列表标签

列表标签分为有序列表(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>

显示效果：

Paste_Image.png

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

Paste_Image.png

最后编辑于：2017.12.05 07:14:41

©著作权归作者所有,转载或内容合作请联系作者
【社区内容提示】社区部分内容疑似由AI辅助生成，浏览时请结合常识与多方信息审慎甄别。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。

H5笔记——HTML常用的标签