本文最后更新于8 天前，其中的信息可能已经过时，如有错误请发送邮件到1077511618@qq.com

HTML学习笔记

之前学习的示例，根据代码自行摸索吧~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>目前不知道要做什么</title>
</head>
<body>
    <h1>一级标题</h1>
    <strong>我也不知道要说什么</strong>
    <p>这是段落标签，一个段落。这是段落标签，一个段落。这是段落标签，一个段落。这是段落标签，一个段落。这是段落标签，一个段落。</p>
    <br>
    <ins>你干嘛?</ins>
    <img src=".idea/image/Hina.png" height="874" width="932" alt="天野阳菜" title="喜欢天野阳菜"/>

</body>
</html>

下面进入新学的部分~~~

音频标签

<audio src="音频文件的 URL" controls loop></audio>  //这里的controls是属性，仅打controls会在浏览器界面生成一个控制器用来控制音频的播放（浏览器一般默认关闭自动播放功能）
//可以只打controls的原因是因为类型和属性名相同（controls = "controls"）
//loop -> 设置循环播放
//还有一个属性：autoplay，可以设置自动播放

视频标签

<video src="视频文件的 URL" controls loop muted autoplay></video>
//注意！autoplay在有muted（静音播放属性）的时候才可以生效从而自动播放视频！！！

列表标签

列表有三种：
无序列表、有序列表、定义列表。

无序列表

<ul>
    <li>第一项</li>
    <li>第二项</li>
</ul>

ul–列表； li–例（列表条目）； li 标签独占一行
ul中只可以放li标签，而li标签中可以放很多标签

有序列表

<ol>
    <li>步骤一</li>
    <li>步骤二</li>
</ol>

有序列表会自动添加序号； ol标签中只能包含li标签

定义列表

<dl> 
    <dt>列表标题</dt>
    <dd>列表描述/详情</dd>
</dl>

dl — 定义列表； dt — 列表标题； dd — 列表描述/详情 ; dd标签和dt标签内容会相对自动缩进（可以用CSS来修改）

表格标签

<table border="1">    //整个表格(border属性添加边框线，1设置边框线的粗细为1像素)
    <tr>   //行（多少行就几个tr）
        <td></td>   //表头单元格（内容会自动加粗）
        <th></th>   //内容单元格
    </tr>
</table>

在网页中，表格默认没有边框线，需要使用border属性来为表格添加边框线

表格结构标签 — 让表格的结构语义更加清晰（给浏览器看的）

thead — 表格头部（表格头部内容）
tbody — 表格主体（主要内容区域）
tfoot — 表格底部（汇总信息区域）

合并单元格

步骤：明确合并的目标 — 保留最左最上的单元格（取值是数字，表示需要合并的单元格数量） — 删除其他单元格。
跨行合并：保留最上单元格，添加属性rowspan；
跨列合并：保留最左单元格，添加属性colspan。
看看示例：(可以自己运行一下看看效果哦~！)

<table border="1">    //整个表格(border属性添加边框线，1设置边框线的粗细为1像素)
    <tr>   //行（多少行就几个tr）
        <td>分数</td>   //表头单元格（内容会自动加粗）
        <th rowspan="2">100</th>   //内容单元格
        <th>200</th>
        <th>239</th>
    </tr>
    <tr>
        <td>分数2</td>
        <! -- <td>120</td> -- >  //删除单元格，直接注释掉就行！
        <th>189</th>
        <th>230</th>
    </tr>
</table>

表单

作用：收集用户信息；
使用场景：登陆界面、注册页面、搜索区域等。

input标签

其type属性不同，功能也不同！

<input type="属性值">

input 的属性：
text — 文本框，用于输入单行文本；
password — 密码框(自动把输入内容显示为·)；
radio — 单选框；
checkbox — 多选框；
file — 上传文件。

示例：

<body>
    账号：<input type="text">
    <br><br>
    密码：<input type="password">
    <br><br>
    记住此账号<input type="radio">
    <br><br>
    我同意协议1<input type="checkbox">
    我同意协议2<input type="checkbox">
    <br><br>
    上传文件<input type="file">
</body>

input标签占位文本

属性：placeholder

账号：<input type="text" placeholder="请输入用户账号">

单选框radio的相关属性

性别：
<input type="radio" name="gender">男  //不加name属性，会同时选中两个选项，无法实现单选功能！(name属性的内容可自定义,多选一的选项都要用一样的！！！)
<input type="radio" name="gender" checked>女 //添加了checked属性，就会设置为默认选中~！

上传文件-file的相关属性

上传文件：<input type="file" multiple>
//添加了multiple属性，就可以上传多个文件，不然默认一个文件

多选框的相关属性

多选框：<input type="checkbox" checked> //checked属性默认让选择框处于选中状态

下拉菜单

<body>
    城市：
    <select>    //下拉菜单整体
        <option>珠海</option>  //菜单中的单个选项
        <option>广州</option>
        <option>深圳</option>
        <option selected>茂名</option> //添加selected属性表示默认选中
    </select>
</body>

文本域标签

文本域：多行输入文本的表单控件

<body>
    <textarea name="" id="" cols="30" rows="10">文本域中的提示文字（如：请输入文本）</textarea>
</body>

cols & rows — 设置文本域大小，一般在CSS中设置。

文本框标签（Label）

<body>
    <input type="radio" id="man"> //添加一个表单单选框控件
    <label for="man">这是一个文本框</label>
    //设置label标签的for属性和表单控件标签的id属性值相同，就可以绑定这两个标签
</body>

技巧：可以用label标签绑定文字和表单控件的关系，增大表单控件的选中范围，提升用户体验。
更好的示例：

<input type="radio" id="man" name="gender"><label for="man">男</label>
<input type="radio" id="woman" name="gender"><label for="man">女</label>
//Or使用label标签包裹文字和表单控件
<label><input type="radio" name="gender">男</label>
<label><input type="radio" name="gender">女</label>

这样，鼠标选中选项框旁边的文字也可以进行选中啦！

按钮标签

<button type="">按钮</button>

type属性值：
submit — 提交按钮，点击后可以提交数据到后台（默认功能）；
reset — 重置按钮，点击后将表单控件恢复到默认值；
button — 普通按钮，默认没有功能，一般配合JS使用。
要让按钮的功能生效，需要form标签！！！
示例：

<body>
    <form action="">    //action属性：未来发送数据的地址。
        用户名：<input type="text">
        密码：<input type="password">
        <br><br>
        <button type="submit">提交</button>
        <button type="reset">重置</button>
        <button type="button">普通的按钮</button>
    </form>
</body>

无语义的布局标签

作用：布局网页（划分区域、独占内容……）

<div>div标签--独占一行</div>
<span>span标签--不换行</span>

字符实体标签

作用：在网页中显示预留字母。
这里展示常用的：
显示结果描述实体名称
——————————————————————————————————————
空格
< 小于号 <

          大于号         &gt;     
——————————————————————————————————————
如果在代码中敲键盘的空格，网页只会显示一个空格，要实现多个空格，就要使用字符实体！

超链接标签

示例：

<a href="#">超链接</a>