HTML标签1

辰羽

已于 2022-09-08 14:59:10 修改

阅读量182

点赞数

分类专栏： # 前端文章标签： html5

于 2022-04-15 18:13:38 首次发布

本文链接：https://blog.csdn.net/yuandfeng/article/details/124200939

版权

前端专栏收录该内容

2 篇文章 0 订阅

订阅专栏

Java知识点总结：想看的可以从这里进入

HTML

1、基础知识

1.1、简介

超文本标记语言（英语：HyperText Markup Language，简称：HTML）是一种用于创建网页的标准标记语言(HTML 不是一种编程语言，而是一种标记语言)。由一套标签组成，运行在浏览器上，由浏览器来解析。
在这里插入图片描述

2、基础标签

2.1、文本类型标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <section>
        <h1> 
            1、<abbr title="HyperText Markup Language">HTML</abbr> 
        </h1>
        <p>第一段内容 <time>9:30</time> </p>
        <p>
            <b>加粗</b>
            <i>斜体</i>
            <sup>下标</sup>
            <u>下划线</u>
            <sub>上标</sub>
            <del>错误</del>
            <ins>修改</ins>
            <mark>重要</mark>
        </p>
        <p>
            <bdo dir="rtl">从右向左显示</bdo>
        </p>
        <p>
            <q>短引用</q>
        </p>
        <blockquote>
            整个过程都是 Java 虚拟机独立的，也就是说，在一个平台上序列化的对象可以在另一个完全不同的平台上反序列化该对象。所以序列化的意义就是实现对象的持久存储、或网络传输。如果要实现序列化类需要实现 Serializable 接口，它是一个空的接口，起到对类进行标记的作用。。
        </blockquote>
        <h2>1.1、二级标题</h2>
        <span>显示内容</span>
        <small>小内容</small>
    </section>
    
    <section title="第二块">
        <h1>2、一级标题</h1>
        <p>第一段内容</p>
        <h2>2.1、二级标题</h2>
        <span>显示内容</span>
        <small>小内容</small>
    </section>
</body>
</html>

在这里插入图片描述

2.2、链接

2.2.1、超链接

在这里插入图片描述

2.2.2、link

在这里插入图片描述

2.3、图像、音频类

2.3.1、图片

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>图片</title>
</head>
<body>
    <img src="d:/mydata/a.jpg" alt="请刷新" height="500px" width="800px">
    
    <img src="d:/mydata/b.jpg" height="300px" width="500px" alt="请刷新">
    
    <img src="" alt="无法显示，请刷新">
</body>
</html>

在这里插入图片描述

2.3.2、音频

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>音频</title>
</head>
<body>
    海阔天空
    <audio src="d:/mydata/海阔天空.mp3" controls></audio>
</body>
</html>

在这里插入图片描述

2.3.3、视频

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>视频</title>
</head>
<body>
    海阔天空
    <video src="d:/mydata/海阔天空.mp4" controls height="600px" width="1000px" ></video>
</body>
</html>

在这里插入图片描述

2.4、功能类标签

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
   <details open>
       <summary>折叠标题1</summary>
       <p>这里是折叠起来的内容</p>
   </details>
   <details>
       <summary>折叠标题2</summary>
       <p>这里是折叠起来的内容</p>
   </details>
    <hr/>    <!--分割线 -->
    
    <span>不会换行，加br标签进行换行</span>
    <br/>  
    <span>br换行了</span>
    <hr/>
    
    进度条
    <progress value="50" max="100" ></progress>
    <hr/>
    度量衡
    <meter value="50" min="0" max="100">2 out of 10</meter>
    
</body>
</html>