$2022.7.31$

学习进度

$html (上) \space 完成$

音频和视频

<audio>

格式: <audio controls src="/audios/bgm.mp3"></audio> 

注意 "controls" 需手动添加上去 , 不然没有播放框

格式 :

<audio controls>
    <source src="/audios/sound1.mp3" type="audio/mpeg" />
    <source src="/audios/sound2.mp3" type="audio/mpeg" />
</audio>

需要手打 , type="audio/mpeg" 需要记住 , 必须加

这种格式的好处就是当第一个音频无法播放时就会播放第二个

video

<video>

格式 : <video controls height="100" width="300" src="/videos/video1.mp4"></video>

controls 手动添加 , 一般需要添加 height , width元素(不然视频占面积很大)

但在音频中添加 height 和 width 元素貌似没用

格式 :

<video controls width="800">
    <source src="/videos/video1.mp4" type="video/mp4">
    <source src="/videos/video2.mp4" type="video/mp4">
</video>

注意可以加 width , height 元素 , 作用同上

同时注意 <video> <audio> 是行标签 , 后面加文字只能用 <span>

超链接

<a>

格式 : <a href="https://www.baidu.com"> 点这里 </a>

一定要有 htps:// ， "点这里" 链接的文字说明

加上 target="_blank" , 会在新窗口打开链接

例子 : <a href="https://www.baidu.com" target="_blank" > 点这里 </a>

技巧 :

1 : ! + enter 可以做到 html 代码格式的基本补全
2 : 用鼠标拖拽可以移动文件夹中的文件 (拖至下方空白处可以移除文件夹)

表单

作用 : 方便与后端的服务器交互 (用户名 , 邮箱 , 密码等等)

基本格式:

<form action="">

</form>

引号中既可以填写 后端函数 又可以 填写链接 ( 配合<button>转移到 )

比如课上例子 :

<form action="about.html">

 ...

</form>

把 about.html 放在同一文件夹中即可转移到

以下内容全部写在 <form> 里面

<label> 和 <input> 的配合 ( y总说 label 和 input 最好绑定写 , 哪怕可以用 placeholder 替代显示作用 )

input 常见 : <input type="text/number/email/password/radio">

其中 text , number , email , password 的用法差不多

举例

<form>
    <label for="username">用户名</label>
    <input type="text" , name="username" , id="username">
</form>

这里要说明 <label for="...">用户名</label> 引号中要填 id="" 的引号中的

name id 是一种属性 , name是网络传参的参数名 , id 是整个页面中元素的唯一引索

其他的常用属性有 : maxlength (限制输入的长度) , minlength (少于这个长度就会报错) , required (加上后必填)

placeholder( 显示效果 )


举个混合的例子

<form>
    <label for="username"></label>
    <input type="text" required placeholder="用户名" maxlength="5" minlength="3"  name="username" , id="username">
</form>


<radio> 的用法可能比较特殊

作用 : 起到多选 (多选一 , 多选多)

举例 : 在 cpp Java Python 中选一个

<br>
<label for="cpp">cpp</label>
<input type="radio" name="lang" value="cpp" id="cpp">

<br>
<label for="java">java</label>
<input type="radio" name="lang" value="java" id="java">

<br>
<label for="pathon">python</label>
<input type="radio" name="lang" value="python" id="python">

注意他们能在一组的原因是 name 相同


接下来讲 <textarea> ( 与 input 无关 )

就是评论区的框框

举例：

<br>
<label for="resume"></label>
<textarea placeholder="简介" name="resume" id="resume" cols="20" rows="10"></textarea>

注意 cols(行) , rows(列) 控制的是初始大小 , 它是可以调的.

接下来是 <select> 与 <option> 的配合

        <label for="language_select"> </label>
        <select name="language" id="language_select">
            <option value="请选择">请选择</option>
            <option value="cpp">cpp</option>
            <option value="Java">Java</option>
            <option value="Python">Python</option>
        </select>


value 的作用现在还没讲 , 试了一下把 value="" 引号内用去掉也没事


最后是 <button>

<button type="submit">提交</button>

提交按钮

列表

<ul> : 无序列表 <ol> 有序列表 , 两者都与 <li> 元素配合

举例 :

        <ul>
            <li>first</li>
            <li>second</li>
            <li>third</li>
        </ul>
        <ol>
            <li>first</li>
            <li>second</li>
            <li>third</li>
        </ol>

同时注意 <ol> <ul> 是可以嵌套使用的 , 效果类似于 一级目录 , 二级目录

        <ul>
            <li>
                知识点
                <ol>
                    <li><a href="https://www.baidu.com">ssh</a></li>
                </ol>
            </li>
        </ul>


 <li> 里面既可以套 <ol> , 又可以套 <a> , 可以套很多标签

还有一种不太常用的 <dl> 列表 , 与 <dd> , <dt> 配合

<dt> 表示不缩进 , <dd> 表示缩进

<dl>
    <dd>xxx</dd>
    <dt>xxx</dt>
</dl>