一、HTML基础
(一)绪论
网页有五部分组成：文字、图片、音频、视频、超链接
五大浏览器：谷歌、IE、火狐、safari、Opera
Web标准：结构->HTML(页面元素和内容)、表现->CSS(页面样式)、行为->JavaScript(用户页面交互动态交互)
(二)html基础知识
html基础认知:1、VScode编辑器中输入英文感叹号!，出现html骨架
2、html的注释：快捷键Ctrl+/
3、html标签的组成：单标签<> , 双标签<></>
4、html标签的关系：嵌套
（1）html标签学习
排版标签
1.标题标签h1，有且只有1~6级标题
<h1>一级标题</h1>
<h2>二级标题</h2>
<h3>三级标题</h3>
<h4>四级标题</h4>
<h5>五级标题</h5>
<h6>六级标题</h6>
2.段落标签p，分段显示文本
<p>
江畔何人初见月，江月何年初照人。不要在个别的人和事上，寄托太多的希望，否则人迟早会失望，因为人和事的有限性，根本无法承受我们对无限希望的期待
</p>
<!-- Alt+Z 自动换行 -->
3.换行标签 br
<p>
江畔何人初见月，江月何年初照人。<br>不要在个别的人和事上，寄托太多的希望，<br>否则人迟早会失望，<br>因为人和事的有限性，<br>根本无法承受我们对无限希望的期待
</p>
4.分割线标签hr
<h1>这是分割线处</h1>
<hr>
<p>
江畔何人初见月，江月何年初照人。<br>不要在个别的人和事上，寄托太多的希望，<br>否则人迟早会失望，<br>因为人和事的有限性，<br>根本无法承受我们对无限希望的期待
</p>
文本格式化标签
1.加粗、删除线、斜体、下划线
| 标签 | 标签 | 说明 |
|---|---|---|
| b | strong | 加粗 |
| u | ins | 下划线 |
| i | em | 倾斜 |
| s | del | 删除线 |
<b>加粗</b>
<strong>加粗</strong>
<u>下划线</u>
<ins>下划线</ins>
<i>倾斜</i>
<em>倾斜</em>
<s>删除</s>
<del>删除</del>
媒体标签
1.图片标签img
* 路径：路径分为绝对路径、相对路径 （上级目录、同级目录、下级目录）
* 标签中可以有多个属性，用空格隔开
| 常见属性名 | 作用 |
|---|---|
| src | 图片路径、地址 |
| alt | 替换文本 |
| title | 鼠标悬停时显示文本 |
| width | 图片的宽，以1px为单位 |
| heihgt | 图片高，以1px为单位 |
<!-- 标签中可以有多个属性，用空格隔开 -->
<img src=" C:\Users\ikaros\Desktop\漫图\西宫硝子\62357661_p0.jpg" alt="加载错误" title="西宫硝子">
2.音频标签audio
- 音频只支持三种格式：MP3、WAV、Ogg
| 常见属性名 | 作用 |
|---|---|
| src | 音频路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放 |
| loop | 循环播放 |
<audio src="music\Want You - Erkki.R - 单曲 - 网易云音乐.m4a" controls autoplay loop></audio>
3.视频标签video
- 音频只支持三种格式：MP4、Webm、Ogg
<video src=""controls muted autoplay loop></video>
链接标签
链接标签：a
- href的值设为#表示空链接
<a href="https://www.bilibili.com/video/BV1Kg411T7t9/?p=20&spm_id_from=pageDriver&vd_source=475d52c1c9e04f0181802504eb57ae7a">跳转到B站</a>
| 常见属性名 | 作用 | 取值 |
|---|---|---|
| href | 跳转地址 | #（空链接），其他网页地址 |
| traget | 目标网页的打开形式 | _self:默认值，覆盖当前页面跳转； _black:保留当前页面跳转 |
不能被称作练习的小练习
代码：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>招聘网</title>
</head>
<body>
<audio src="music\Want You - Erkki.R - 单曲 - 网易云音乐.m4a" controls autoplay loop title="背景音乐"></audio>
<h1>腾讯招聘网</h1><hr>
<h2>职位描述</h2>
<p>每天坐办公室吃白饭</p>
<h2>岗位要求</h2>
<p>年满十八</p>
<p>双肾健康</p>
<p>活蹦乱跳、三餐正常、作息规律</p>
<h2>工作地址</h2>
<p>翻斗花园小区1栋101室 <a href="图片标签.html" target="_blank">点击查看详细</a></p>
<img src="image\62357661_p0.jpg" alt="" title="骗你的" width="500">
</body>
</html>
（2）列表
无序列表
标签组成：
| 标签名 | 作用 |
|---|---|
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序列表的每一项 |
<ul>
<li>无职转生</li>
<li>从零开始的异世界</li>
<li>夏洛特</li>
<li>天降之物</li>
<li>我的青春物语肯定有问题</li>
</ul>
有序列表
标签组成：
| 标签名 | 作用 |
|---|---|
| ol | 表示有序的整体，用于包裹li标签 |
| li | 表示有序列表的每一项 |
<ol>
<li>开花三星</li>
<li>开花四星</li>
<li>开花五星</li>
<li>开花六星</li>
</ol>
自定义列表
标签组成：嵌套关系：dl>dt>dd
| 标签名 | 作用 |
|---|---|
| dl | 自定义列表的整体，用于包裹dt dd标签 |
| dt | 自定义列表的主题 |
| dd | 自定义主题下的每一项内容 |
注意：
- dl标签下只允许包含dt、dd标签
- dt、dd标签可以包含任何内容
<dl>
<dt>日常
<dd>男子高中生的日常</dd>
<dd>女子高中生的日常</dd>
<dd>玉子市场</dd>
</dt>
</dl>
（3）表格
标签组成：嵌套关系：table>tr>td
| 标签名 | 作用 |
|---|---|
| table | 表格整体，包裹tr标签 |
| tr | 表格的行，包裹td |
| td | 表格的列 |
相关属性：
| 属性名 | 效果 |
|---|---|
| border | 边框宽度 |
| width | 表格宽度 |
| height | 表格高度 |
<table border="1" width="400" height="300">
<tr>
<td>番名</td>
<td>女主</td>
<td>男主</td>
</tr>
<tr>
<td>天降之物</td>
<td>伊卡洛斯</td>
<td>樱井智树</td>
</tr>
</table>
表格标题和表格单元格
标签：
| 标签名 | 作用 |
|---|---|
| caption | 表格名称，在表格上方居中显示 |
| th | 表头小标题，表格第一行，加粗居中显示 |
<table border="1" width="400" height="300">
<caption><strong>动漫推荐</strong></caption>
<tr>
<th>番名</th>
<th>女主</th>
<th>男主</td>
</tr>
<tr>
<td>天降之物</td>
<td>伊卡洛斯</td>
<td>樱井智树</td>
</tr>
表格的结构标签
标签：
| 标签名 | 作用 |
|---|---|
| thead | 表头 |
| tbody | 表的主体 |
| tfoot | 表尾 |
合并单元格
合并原则：上下合并保留上方单元格、左右合并保留左边单元格
属性：
| 属性名 | 属性值 | 作用 |
|---|---|---|
| rowspan | 合并单元格数 | 行合并 |
| colspan | 合并单元格数 | 列合并 |
- 只能合并同一个标签里的内容，不能跨标签合并
<table border="1">
<tr>
<td>姓名</td>
<td>分数</td>
</tr>
<tr>
<td>伊卡洛斯</td>
<td rowspan="2">100</td>
</tr>
<tr>
<td>妮姆芙</td>
</tr>
<tr>
<td colspan="2">很棒</td>
</tr>
</table>
（4）表单
input系列标签
input根据type属性值的不同会出现不同效果
| type属性值 | 作用 |
|---|---|
| text | 文本框，用于输入单行文本 |
| password | 密码框，输入密码加密不可见 |
| radio | 单选框，用于多选一情况下 |
| checkbox | 多选框，选择多个 |
| file | 文件选择，上传文件 |
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 按钮，配合js添加功能 |
1.type属性值：text、password
常用属性：placeholder
| 属性名 | 作用 |
|---|---|
| placeholder | 占位符，提示用户输入信息 |
2.type属性值：radio
常用属性：name、checked
| 属性名 | 作用 |
|---|---|
| name | 分组，当相同name属性值一组时，唯一选中 |
| checked | 默认选项 |
3.type属性值：file
常用属性：multiple
| 属性名 | 作用 |
|---|---|
| multiple | 多个文件选择 |
- value属性：赋值 ，value=“值”
button标签
button标签会根据type的不同值显示不同的按钮效果
| type属性值 | 作用 |
|---|---|
| submit | 提交按钮 |
| reset | 重置按钮 |
| button | 按钮，配合js添加功能 |
select下拉菜单标签
| 标签名 | 作用 |
|---|---|
| select | 下拉菜单的整体，包裹option标签 |
| option | 下拉菜单的每一项 |
| 常用属性 | 作用 |
|---|---|
| selected | 下拉菜单的默认选项 |
textarea文本域标签
标签名：textarea，可输入多行文本
label标签
标签名：label，常用语绑定包裹表单标签中的文本
（5）语义化标签
无语义化标签div、span
语义化的标签
| 标签名 | 语义 |
|---|---|
| header | 网页头部 |
| nav | 网页导航栏 |
| footer | 网页底部 |
| aside | 网页侧边栏 |
| section | 网页区块 |
| srticle | 网页文章 |
字符实体
*重点记空格： 
练习-表单注册页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>罗翔语录</title>
</head>
<body>
<h1>江畔何时初见月，江月何年初照人</h1><hr>
<form action="">
昵称:<input type="text" placeholder="请输入昵称">
<br><br>
性别:<label><input type="radio" name="sex" checked>男</label> <label><input type="radio" name="sex">女 </label>
<br><br>
所在城市:<select>
<option selected>北京</option>
<option>上海</option>
<option>杭州</option>
<option>长沙</option>
<option>深圳</option>
<option>广州</option>
<option>武汉</option>
<option>重庆</option>
<option>成都</option>
</select>
<br><br>
婚恋状况:<label><input type="radio" name="love" checked>单身</label>
<label><input type="radio" name="love">恋爱</label>
<label><input type="radio" name="love">未婚</label>
<label><input type="radio" name="love">已婚</label>
<br><br>
喜欢的类型: <label><input type="checkbox" checked>傲娇 </label>
<label><input type="checkbox" >温柔</label>
<label><input type="checkbox" >男子力&女子力</label>
<label><input type="checkbox" >小鲜肉</label>
<label><input type="checkbox" >小姐姐</label>
<label><input type="checkbox" >小哥哥</label>
<label><input type="checkbox" >病娇</label>
<label><input type="checkbox" >正太</label>
<label><input type="checkbox" >伪娘</label>
<label><input type="checkbox" >其他</label>
<br><br>
个人介绍:
<br><br>
<textarea width="500" height="500"></textarea>
<h3>我承诺</h3>
<ul>
<li>年满十八</li>
<li>态度认真 </li>
<li>真诚寻找另一半</li>
</ul>
<input type="checkbox" >我已阅读且同意所有条款
<br><br>
<button type="submit">提交注册</button>
<button type="reset">重置信息</button>
</form>
</body>
</html>
<label><input type="checkbox" >伪娘</label>
<label><input type="checkbox" >其他</label>
<br><br>
个人介绍:
<br><br>
<textarea width="500" height="500"></textarea>
<h3>我承诺</h3>
<ul>
<li>年满十八</li>
<li>态度认真 </li>
<li>真诚寻找另一半</li>
</ul>
<input type="checkbox" >我已阅读且同意所有条款
<br><br>
<button type="submit">提交注册</button>
<button type="reset">重置信息</button>
6534
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
