前端学习笔记-html基础(1)

1、音频标签audio

在页面中插入音频

<audio src="./music.mp3" concontrols></audio>

属性名	功能
src	音频的路径
controls	显示播放的控件
autoplay	自动播放（部分浏览器不支持）
loop	循环播放

        注意：音频标签目前支持三种格式：MP3、Wav、Ogg

---

2、视频标签

在页面中插入视频

<video src="./video.mp4" controls></video>

属性名	功能
src	视频路径
controls	显示播放的控件
autoplay	自动播放（谷歌浏览器需配合muted实现静音播放）
loop	循环播放

 

---

3、a链接标签的target属性

属性名：target

属性值：目标网页的打开方式

<a href="https://www.baidu.com/" target="_blank"></a>

取值	效果
-self	默认值，在当前窗口中跳转（覆盖原网页）
_blank	在新窗口中跳转（保留原网页）

---

4、无序列表

<ul>
    <li>榴莲</li>
    <li>香蕉</li>
    <li>苹果</li>
</ul>

        特点：列表的每一项前都默认显示圆点标识

        注意点：1、ul标签中只允许包含li标签

                       2、li标签可以包含任意内容

---

5、有序列表

<ol>
    <li>张三:100</li>
    <li>李四: 80</li>
</ol>

特点：列表的每一项前默认显示序号标识

---

6、自定义列表

<dl>
    <dt>帮助中心</dt>
    <dd>账户管理</dd>
    <dd>购物指南</dd>
</dl>

        特点：dd前会默认显示缩进效果

        注意：1、dl只能包含dt/dd标签

                   2、dt/dd标签可以包含任意内容

---

7、表格标签

标签名	说明
table	表格整体，可用于包裹多个tr
tr	表格每行，可用于包裹td
td	表格单元格，可用于包裹内容

注意：嵌套关系：table>tr>td

（1）表格标题和表头单元格标签

<table border="1">
    <caption><strong>学生成绩单</strong></caption>
    <tr>
        <!-- <td></td> -->
        <th>姓名</th>
        <th>成绩</th>
        <th>评语</th>
    </tr>
</table>

标签名	名称	说明
caption	表格大标题	表示表格整体大标题，默认在表格整体顶部居中位置显示
th	表头单元格	表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示

注意：1、caption标签写在table标签内部

           2、th标签写在tr标签内部（用于替换td标签）

（2）合并单元格

                1、明确合并哪几个单元格

                2、通过左上原则，确定保留谁删除谁

                        --上下合并，只保留最上的，删除其他

                        --左右合并，只保留最左的，删除其他

                3、给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）

属性名	属性值	说明
rowspan	合并单元格的个数	跨行合并，将多行的单元格垂直合并
colspan	合并单元格的个数	跨列合并，将多行的单元格水平合并

        

注意：不能跨结构标签合并（不能跨：thead、tbody、tfoot）

---

8、表单标签

（1）标签名：input

        --input可以通过type属性值的不同，展示不同效果

type属性值：

标签名	type属性值	说明
input	text	文本框，用于输入单行文本
input	password	密码框，用于输入密码
input	radio	单选框，用于多选一
input	checkbox	多选框，用于多选多
input	file	文件选择，用于上传文件
input	submit	提交按钮，用于提交，点击之后提交数据给后端服务器
input	reset	重置按钮，用于重置
input	button	普通按钮，默认无功能，之后配合js添加功能

 

（2）input系列标签-文本框

 <input type="text" placeholder="请输入用户名">

属性名	说明
placeholder	占位符，提示用户输入内容的文本

（3）input系列标签-单选框

type属性值：radio

常用属性：

属性名	说明
name	分组，有相同name属性值得单选框为一组，一组中同时只能有一个被选中
checked	默认选中

（4）input系列标签-文件选择

type属性值：file

常用属性：

属性名	说明
multiple	多文件选择

（5）select下拉菜单标签

                标签组成：

                        -- select标签：下拉菜单的整体

                        -- option标签：下拉菜单的每一项

                常见属性：

                        -- selected：下拉菜单的默认选中

（6）textarea文本域标签

                常见属性：

                        -- cols：规定文本域的可见宽度

                        -- rows：规定文本域内可见行数

（7）label标签

                场景：常用语绑定内容与表单标签的关系

使用方法①：

<input type="radio" name="sex" id="nan"> <label for="nan">男</label>

        1、使用label标签吧内容（如：文本）包裹起来

        2、在表单标签上添加id属性

        3、在label标签的for属性中设置对应的id属性值

使用方法②：

<label><input type="radio" name="sex"> 女</label>

        1、直接使用label标签把内容（如：文本）和表单标签一起包裹起来

        2、需要把label标签的for属性删除即可