1.3 HTML基础知识（二）

最新推荐文章于 2024-11-09 17:11:29 发布

dxt_snow

最新推荐文章于 2024-11-09 17:11:29 发布

阅读量378

点赞数

分类专栏： HTML&CSS 文章标签： html 列表超链接图片音视频

本文链接：https://blog.csdn.net/qq_37665301/article/details/107193693

版权

HTML&CSS 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

1.3 HTML基础知识（二）

列表

三种标签。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>列表</title>
    </head>
    <body>
    <!--
        在html中有三种列表：
            1.有序列表
            2.无序列表
            3.定义列表
        有序列表：使用ol标签来创建有序列表
            使用li表示列表项
        无序列表：使用ul标签来创建无序列表
            使用li表示列表项
        定义列表：使用dl标签来创建定义列表
            使用dt来表示定义的内容
            使用dd来对内容进行解释说明
            一个dt可以对应多个dd
        列表之间可以互相嵌套
    -->
    <ol>
        <li>小学</li>
        <li>初中</li>
        <li>高中</li>
    </ol>
    <ul>
        <li>语文</li>
        <li>数学</li>
        <li>英语</li>
    </ul>
    <dl>
        <dt>html</dt>
        <dd>超文本标记语言</dd>
    </dl>
    <ul>
        <li>
            aa
            <ul>
                <li>aa-1</li>
                <li>aa-2</li>
            </ul>
        </li>
    </ul>
    </body>
</html>

超链接

超文本标记语言中的超指的就是超链接。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>超链接标签</title>
    </head>
    <body>
    <!--
        超链接可以让我们从一个页面跳转到其它页面，
            或者当前页面的其它位置
        超链接标签使用 a 来定义
            属性：
                href: 指定跳转的目标路径
                    - 值可以是一个外部网站的地址
                    - 也可以是一个内部页面的地址

        超链接是行内元素，在a标签中可以嵌套除它自己的任何元素（包括块元素）
    -->
        <a href="https://www.baidu.com">百度</a>
        <br>
        <a href="./index01.html">示例</a>
        <br>
    <!--
        超链接更多属性：
            target:用来指定超链接打开的位置
                可选值：
                    _self：默认值，在当前页面中打开超链接
                    _blank：在一个新的页面中打开超链接
    -->
        <a href="./index09.html" target="_self">超链接</a>
        <br>
        <a href="./index09.html" target="_blank">超链接</a>
        <br>
    <!--
        可以使用 javascript:; 来作为href的属性值，此时点击此超链接
            什么也不会发生
    -->
        <a href="javascript:;">空的超链接</a>
        <br>
        <a href="#bottom">跳到底部</a>
    <!--
        可以直接将超链接的href属性设置为#，这样点击超链接以后
            页面不会发生跳转，而使转到当前页面的顶部的位置。
        
        可以跳转到页面的指定位置，只需要将href的属性值设置为 #+对应位置
            标签的id属性值

        id属性：（唯一不重复）
            - 每一个标签都可以添加一个id属性
            - id属性就是标签的唯一标识，同一个网页中不能出现重复的id属性
    -->
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <br><br><br><br><br><br><br><br><br><br><br><br><br>
        <a id="bottom" href="#">回到顶部</a>

    </body>
</html>

相对路径

./和. ./的使用方法。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>相对路径</title>
    </head>
    <body>
    <!--
        当我们需要跳转一个服务器内部的页面时，一般我们都会使用相对路径，
            相对路径都会使用.或..开头
                ./
                ../
            ./可以省略，如果不写./也不写../则就相当于写了./
        ./表示当前文件所在的目录（当前html文件所在的文件夹路径）
        
        ../表示当前文件所在目录的上一级目录
    -->
    </body>
</html>

图片

自结束标签；src和alt属性。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>图片标签</title>
    </head>
    <body>
    <!--
        图片标签 用于向当前页面中引入一个外部图片
            img标签是一个自结束标签
            img属于替换元素，介于块元素与行内元素之间
            属性：
                src -- 指定外部图片的路径(本地图片 或 网络图片)
                    url指定网络上的一个资源
                alt -- 对图片的描述
                    描述默认情况下不显示，当图片无法加载时显示
                    搜索引擎会根据alt中的内容来识别图片，否则搜索引擎无法识别图片
                width -- 图片的宽度（单位是色素）
                height -- 图片的高度
                    当宽度和高度只改变一个时，另一个会等比例改变
        图片格式：
            jpeg(jpg)
                - 颜色丰富，不支持透明效果，不支持动图
                - 一般用来显示图片
            gif
                - 颜色较少，支持简单透明，支持动图
                - 颜色单一的图片，动图
            png
                - 颜色丰富，支持复杂透明，不支持动图
            webp
                - 谷歌新推出的专门用于网页中的图片的一种格式
                - 具有其他格式的所有优点
                - 缺点：兼容性差
        
        效果一样，用小的
        效果不一样，用效果好的
    
        base64:
            - 将图片使用base64编码，这样可以将图片转换为字符，通过字符的形式来引入图片
            - 一般都是一些需要和网页一起加载的图片才会使用
            - 图片加载速度快（不需要通过地址访问图片资源）
    -->
    <img src="E:/图片/ditu.jpg" alt="地图">
    </body>
</html>

内联框架

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>内联框架</title>
    </head>
    <body>
    <!--
        内联框架（iframe）：用于向当前页面中引入其他页面
            属于替换元素
            属性：
                src 指定引入网页的路径
                width
                height
                frameborder 是否有边框（0：没有 1：有）
    -->  
        <iframe src="https://www.qq.com" width="300" height="400" frameborder="0"></iframe>
    </body>
</html>

音视频标签

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>音视频标签</title>
    </head>
    <body>
    <!--
        audio标签用来向页面中引入一个外部的音频文件
            属于替换元素
        音视频文件引入时，默认情况下不允许用户自己控制播放停止
        audio属性：
            controls 是否允许用户控制播放，不用赋值
            autoplay 是否自动播放
                - 如果设置了autoplay, 则音乐在打开页面时会自动播放
                    但目前大部分浏览器不会自动对音乐进行自动播放
            loop 是否循环播放
    -->
        <audio src="E:/KuGou/ARE U READY.mp3" controls loop></audio>
        <br>
    <!--
        除了使用src来指定外部文件的路径以外，还可以通过source来指定文件
        source可指定多个音频源文件，如果第一个不可使用会自动向后选择
    -->
        <audio controls>
            可以显示标签
            <source src="E:/KuGou/ARE U READY.mp3">
            <source src="E:/KuGou/ARE U READY.mp3">
        </audio>
        <br>
    <!--
        video标签用来向网页中引入一个视频
            使用方式和audio基本上是一样的
    -->
    <video src="" controls></video>
    </body>
</html>

文档流

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>文档流</title>
        <style>
            
            .box1{
                background-color: red;
            }
            span{
                background-color: #bfa;
            }
        </style>
    </head>
    <body>
        <!--
            文档流（normal flow）
                - 网页是一个层级结构
                - 通过CSS为每一层设计样式，用户只能看到最上面的一层
                - 最底层 被称为 文档流，文档流是网页的基础
                    我们所创建的元素默认都是在文档流中进行排列
                - 对于我们来说元素主要有两个状态
                    在文档流中
                    不在文档流中（脱离文档流）
                - 元素在 文档流 中有什么特点
                    - 块元素
                        - 块元素会独占一行（不论多宽），自上向下排列
                        - 默认宽度是父元素的宽度（会把父元素充满）
                        - 默认高度是被内容（子元素）撑开
                    - 行内元素
                        - 行内元素不会独占一行
                        - 行内元素在页面中自左向右水平排列
                        - 如果一行之中不能容纳下所有的行内元素，则元素会
                            自动换到第二行继续自左向右排列。
                        - 行内元素的默认宽度和默认高度都是被内容撑开
        -->
        <div class="box1">我是div1</div>
        <div class="box2">我是div2</div>
        <span>我是span1</span>
        <span>我是span2</span>
    </body>
</html>