静态网页知识总结补充

表单

1. 表单元素内存在必填项的输入框

<input id="name" placeholder="姓名" required>
//required：必填

2. 数字输入框定义min和max属性的范围

<input id="number" type="number" placeholder="数字" value="2" min="2" max="80" step="1">
//范围为2~80，增加减少按钮每次变化为1

视频

嵌入式视频播放区域

<iframe id="video" name="video" src="https://www.bilibili.com/bangumi/play/ep34489?spm_id_from=333.337.0.0"></iframe>
//嵌入式视频播放区域使用iframe标签

导航栏和链接

1. 导航栏：nav元素
2. 锚点链接跳转

<a class="nav-link" href="#Introduction">Introduction</a>
//href链接到页面中id为Introduction的区域，点击导航头部的a标签即可跳转

媒体查询

@media screen and (min-width:800px) {

    #main-doc {
        padding-left: 400px;
    }

    #navbar {
        position: fixed;
        left: 0px;
        width: 380px;
        height: 100%;
        border: 2px solid black;
        border-top: 0;
    }

    .navul {
        border-top: 1px solid black;
        height: 100%;
    }
}
//当屏幕大小变为800px或更宽时将一些元素的属性改变

菜鸟教程的讲解：https://www.runoob.com/css3/css3-mediaqueries.html