HTML5+CSS3 从入门到精通（1）

张小阳__

已于 2022-05-14 16:13:26 修改

阅读量875

点赞数 1

分类专栏： Web前端从入门到精通文章标签： html5 前端 css3 web

于 2022-05-14 16:00:04 首次发布

本文链接：https://blog.csdn.net/m0_62845290/article/details/124762361

版权

Web前端从入门到精通专栏收录该内容

2 篇文章 1 订阅

订阅专栏

什么是HTML？

HTML的全称为超文本标记语言（Hyper Text Markup Language），是一种标记语言。

HTML的特点：

1. 简易性

2. 可扩展性

3. 平台无关性

4. 通用性

HTML的基本结构

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    
</body>
</html>

文档声明

doc 即 document(文档、文件）

type 即类型

 文档声明(doctype)
-文档声明用来告诉浏览器当前网页的版本  html5的文档声明

<!doctype html>
<!Doctype HTML>

根元素

根元素，一个页面最多只能一个，并且该元素是所有其他元素的父元素或祖先元素。

html的根标签（元素），网页中的所有内容都要写根元素的里边

<html>

</html>

书写语言

lang属性: 即language，表示该元素内部使用的文字是使用哪一种自然语言书写而成的。

en代表English

<html lang="en">

其它补充：

cmn-hans 表示普通话

cmn：中国大陆官方用语即普通话

han：汉语

s：simple

hans：简体汉语

zh-Cn 表示简体中文（现已不用）

<head> </head>

文档头，文档头内部的内容，不会显示到网页上。好比就像人的头脑中想的东西一样，是看不到的。

主要用来帮助浏览器或搜索引擎来解析网页。

<head>

</head>

charset（字符集）

指定网页内容编码，统一的编码在其它地方使用就不会出现乱码。

meta标签用来设置网页的元数据，这里meta用来设置网页的字符集，避免乱码问题。

UTF-8

万国码将全世界的文字全部融合起来，使用它就可以识别全世界的文字

UTF-8是 Unicode编码的一个版本。

    <meta charset="UTF-8">

补充：

中国 - GB2312 即国标

台湾 - GBK 即国标扩展

附加信息

<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">

第一个：是为了适配手机端

第二个：适配ie浏览器使用ie浏览器时内核用edge

<title> </title>

网页标题

title中的内容会显示在浏览器的标题栏，搜索引擎会主要根据title中的内容来判断网页的主要内容。

<title>

</title>

<body> </body>

body是html的子元素，表示网页的主体，网页中所有的可见内容都应该写在body里

<body>

</body>

初识HTML

HTML的注释

<--! 注释内容 -->

注意：注释不能嵌套

vscode的注释快捷键： CTRL+ /

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <--! 这是一段注释语句 -->
</body>
</html>

实体

在网页中编写的多个空格默认情况会自动被浏览器解析为一个空格
在HTML中有些时候，我们不能直接书写一些特殊符号
比如:多个连续的空格，比如字母两侧的大于和小于号
- 如果我们需要在网页中书写这些特殊的符号，则需要使用html中的实体（转义字符）实体的语法:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    &nbsp;  <!-- 空格 -->
    &lt;    <!-- 小于号 -->
    &gt;    <!-- 大于号 -->
</body>
</html>

补充：

推荐一个HTML的实体工具

实体字符

语义化标签

为什么需要语义化？

1. 为了搜索引擎优化（SEO）

2. 为了让浏览器理解网页

每一个HTML元素都有具体的含义例如：

a元素：代表超链接

p元素：表示段落，即paragraphs

h1元素：一级标题

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <h1>你好，我是h1标题</h1>
    <a href="">这是个可以点击的超链接</a>
    <p>这是个段落</p>
</body>
</html>

注意：

选择什么元素(标签)，取决于内容的含义，而不是显示出的效果，显示的效果都是css的功劳。

语义化元素，取决于内容的含义，而不是显示出的效果。

自结束标签

像img、input 这种只有开头，没有结尾的就是自结束标签。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="" alt="">
    <input type="text">
</body>
</html>

块元素(block element)

即会独占一行的元素

独占一行
可以设置宽度，高度，margin，padding
宽度默认所在容器的宽度

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 常见的块元素 -->
    <h1>标题1</h1>
    <h2>标题2</h2>
    <h3>标题3</h3>
    <h4>标题4</h4>
    <h5>标题5</h5>
    <h6>标题6</h6>
    <p>这是个段落</p>
    <blockquote>长引用</blockquote>
    <q>短引用</q>
    <div>我是div块元素</div>
    <ul>
        <li>我是无序列表</li>
    </ul>

    <ol>
        <li>我是有序列表1</li>
        <li>我是有序列表2</li>
    </ol>

</body>
</html>

行内元素(inline element)

即在页面中不会独占一行的元素

与其他行内元素并排
设置宽高无效
默认的宽度就是文本内容的宽度
水平方向的 padding 和 margin 属性可以使用

例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 常见的行内元素 -->
    <strong>我是strong标签</strong>
    <em>我是em标签</em>
    <b>我是b标签</b>
    <i>我是i标签</i>
    <span>我是sapn</span>
    <a href="">超链接1</a>
    <a href="">超链接2</a>
</body>
</html>

行内块级元素

即既可以设置宽高，又不独占一行的元素

默认的宽度就是本身内容的宽度
宽度，高度，行高，内边距，外边距都可以设置

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <!-- 常见的行内块元素 -->
    <img src="./小米首页/img/logo-mi2.png" width="50px" alt="">  <!-- 图片标签 -->
    <input type="text">  <!-- 文本框 -->
</body>
</html>

总结：

1. —般情况下会在块元素中放行内元素，而不会在行内元素中放块元素

2. 块元素中基本上什么都能放
3. p元素中不能放任何的块元素

标题标签

标题标签都是块元素 h1 - h6

使用vscode的快捷键，即可轻松生成代码

hgroup

hgroup标签用来为标题分组，可以将一组相关的标题同时放入到hgroup

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <hgroup>
        <h1>hello</h1>
        <h2>world</h2>
    </hgroup>
</body>
</html>

em 和 strong

em标签用于表示语音语调的一个加重
strong表示强调，重要内容

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>document</title>
</head>
<body>
    <em>你好啊！</em>
    <br>   <!-- br表示换行 -->
    <strong>今天的工作你必须完成！</strong>
</body>
</html>

blockquote 和 q

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>01</title>
</head>
<body>
    <!-- 表示长引用 -->
    <blockquote>子曰：</blockquote>
    <!-- 表示短引用，会自动为句子 加上双引号 -->
    <q>学而时习之，不亦说乎？有朋自远方来，不亦乐乎？人不知而不愠，不亦君子乎？</q>
</body>
</html>

div 与 span

div没有语义，就用来表示一个区块，目前来讲div还是我们主要的布局元素
span行内元素，没有任何的语义，一般用于在网页中选中文字

其余补充：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>  </title>
</head>
<body>
    <header></header>
    <main></main>
    <footer></footer>
    <nav></nav>
    <aside></aside>
    <article></article>
    <section></section>
</body>
</html>

header表示网页的头部
main表示网页的主体部分(一个页面中只会有一个main)

footer表示网页的底部
nav表示网页中的导航
aside和主体相关的其他内容（侧边栏)

article表示一个独立的文章
section表示一个独立的区块，上边的标签都不能表示时使用 section

列表

无序列表（用的最多）

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
</head>

<body>
    <ul>
        <li>第一行</li>
        <li>第二行</li>
        <li>第三行</li>
    </ul>
</body>

</html>

也是可以相互嵌套的：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
</head>
<body>
    <ul>
        <li>第一行</li>
        <li>第二行</li>
        <li>
            第三行
            <ul>
                <li>
                    嵌套1
                    <ul>
                        <li>嵌套2</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</body>
</html>

有序列表

vscode快捷键，轻松生成：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
</head>

<body>
    <ol>
        <li>我是第1行</li>
        <li>我是第2行</li>
        <li>我是第3行</li>
        <li>我是第4行</li>
    </ol>
</body>

</html>

定义列表

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
</head>

<body>
    <dl>
        <dt>定义名字</dt>
        <dd>定义1</dd>
        <dd>定义2</dd>
        <dd>定义3</dd>
    </dl>
</body>

</html>

超链接

超链接可以让我们从一个页面跳转到其他页面，或者是当前页面的其他的位置。

(超链接是也是一个行内元素，在a标签中可以嵌套除它自身外的任何元素)

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
</head>

<body>
    <a href="https://www.baidu.com/">这是百度的超链接</a>

    <!-- 跳转至 新的窗口加载页面 -->
    <a href="https://www.baidu.com/" target="_blank">这是百度的超链接</a>
    <!-- 在当前窗口加载 -->
    <a href="https://www.baidu.com/" target="_self">这是百度的超链接</a>

</body>

</html>

href 指定跳转的目标路径
- 值可以是一个外部网站的地址

- 也可以写一个内部页面的地址

lorem (乱数假文）

可以生成一段文本（用于测试）

超链接其它用法

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
</head>

<!-- 为页面设置一个高度(内联样式) -->
<body style="height:1500px">
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    
    <!-- 当超链接在最后的时候，点击便可跳回至顶部
         # 代表空链接，是超链接的占位符 -->
    <a href="#">点击返回顶部</a>
</body>

</html>

页面跳转

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
</head>

<!-- 为页面设置一个高度(内联样式) -->
<body style="height:1500px">
    <a href="#mid">点击跳转至文本中间</a>
    <a href="#bottom">点击跳转至文本最后</a>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <--! 只需加个id选择器，进行跳转即可，后面会讲到选择器 -->
    <p id="mid">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    <p id="bottom">Lorem ipsum dolor sit amet consectetur adipisicing elit. Consectetur ab neque placeat maiores porro animi deleniti ad dolore iusto, repellat, vel iste distinctio eligendi officia est, excepturi dolor. Earum, aperiam?</p>
    
    <!-- 当超链接在最后的时候，点击便可跳回至顶部
         # 代表空链接 -->
    <a href="#">点击返回顶部</a>
</body>

</html>

图片的格式

jpeg (jpg)
        -支持的颜色比较丰富，不支持透明效果，不支持动图，一般用来显示照片
gif
        -支持的颜色比较少，支持简单透明，支持动图
png
        -支持的颜色丰富，支持复杂透明，不支持动图（专为网页而生)

webp
        -这种格式是谷歌推出的专门用来表示网页中的图片的一种格式，它具备其他图片格式的所有优点，而且文件还特别的小
        -缺点:兼容性不好

base64
将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片

一般都是一些需要和网页一起加载的图片才会使用base64

img

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
</head>

<body>
    <!-- src属性指定的是外部图片的路径（路径规则和超链接是一样的) -->
    <!-- alt图片的描述，这个描述默认情况下不会显示，有些浏览器会图片无法加载时显示 -->
    <img src="图片路径" alt="">
</body>

</html>

内联框架

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
</head>

<body>
    <!-- 内联框架，用于向当前页面中引入一个其他页面
        src指定要引入的网页的路径
        frameborder指定内联框架的边框  1代表有边框，0代表无边框
        width 表示宽度
        height 表示高度
    -->
    <iframe src="https://www.runoob.com/" width="500px" height="700px" frameborder="0"></iframe>
</body>

</html>

音视频播放

可用属性：

controls 用户可控是否允许用户控制播放

autoplay 自动播放

- 如果设置了autoplay则音乐在打开页面时会自动播放
但是目前来讲大部分浏览器都不会自动对音乐进行播放

loop 循环播放音乐是否循环播放

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
</head>

<body>
    <!-- 音频 -->
    <audio controls autoplay loop src="音频路径">

    </audio>

    <!-- 视频 -->
    <video controls src="视频路径">

    </video>
</body>

</html>

但为了兼容较老的浏览器，需写多个格式：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title> </title>
</head>

<body>
    <!-- 音频 -->
    <audio controls autoplay>
        <source src="音频路径.mp3">
        <source src="音频路径.ogg"> <!-- 可以对那些不支持mp3的浏览器使用.ogg来适配 -->
        <embed src="音频路径.mp3" type="audio/mp3"> <!-- embed可以兼容IE8以下的版本 -->
    </audio>

    <!-- 视频 -->
    <video controls>
        <source src="视频路径.mp4">
        <source src="视频路径.webm"> <!-- webm是谷歌提供的视听媒体文件格式 -->
        <embed src="视频路径.mp4" type="video/mp4">
    </video>
</body>

</html>