基础认知
认识网页
问题1：网页由哪些部分组成？
文字、图片、音频、视频、超链接
问题2：我们看到的网页背后本质是什么？
前端程序员写的代码
问题3：前端的代码是通过什么软件转换成用户眼中的页面的？
通过浏览器转化（解析和渲染）成用户看到的网页
常见的五大浏览器
IE浏览器、火狐浏览器（Firefox）、谷歌浏览器（Chrome）、Safari浏览器、欧朋浏览器（Opera）
前端工程师常用的是谷歌浏览器
web标准
让不同的浏览器按照相同的标准显示结果，让展示的效果统一
web标准的三个构成 ：
结构 ： html 页面元素
样式 ： css 页面样式
行为 ：JavaScript 页面交互的动态效果
Web标准要求页面实现：结构、表现、行为三层分离
HTML的中文译名叫做超文本标记语言
HTML中是通过HTML标签来对网页中的文本、图片、音频、视频等内容进行描述的
页面固定结构
html页面固定结构包括
整体、头部、标题、主体
html标签：网页的整体
head标签：网页的头部
body标签：网页的身体
title标签：网页的标题
<!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>Document</title> // 标题
</head>
<body> // 主体
</body>
</html>
前端开发工具 VS Code
开发工具有很多： Visual Studio Code 、 Webstorm 、 Sublime 、Dreamweaver、 Hbuilder
前端开发神器：VS Code → 速度快、体积小、插件多
vs code 的基本快捷键
<!-- !+输入 快捷框架 -->
<!-- ctrl+s 快捷保存 -->
<!-- alt+b 快捷查看网页 -->
<!-- ctrl+x 剪切 ctrl+c 复制 ctrl+v 粘贴 -->
<!-- ctrl+/ 注释快捷键 -->浏览器执行代码时会忽略所有的注释，主要用来帮助开发人员理解代码
<!-- ctrl+a 全选 -->
html标签的构成，属性和关系
html标签由单标签和双标签组成 ，双标签分为开始标签和结束标签，单标签只要一个标签
html标签的属性
1.标签的属性写在开始标签内部
2.标签上可以同时存在多个属性
3.属性之间以空格隔开
4.标签名与属性之间必须以空格隔开
5.属性之间没有顺序之分
html标签的关系
父子关系（嵌套关系）
兄弟关系（并列关系）
<body>
<p>这是一个双标签</p>
<br /><!-- 这是一个单标签 -->
<p class="pink one" style="color: red">标签的属性写在开始标签里</p>
<!-- 可以写多个属性,同一个属性的值用空格隔开 -->
<!-- 同一个标签有多个类名，可以用空格隔开，style有多个样式，用分号隔开-->
<!-- 标签关系 -->
<p>
<span>和p标签是父子关系</span>
<span>和span标签是并列关系</span>
</p>
</body>
html标签
排版标签
标题标签 h1 - h6
段落标签 p
换行标签 br
水平线标签 hr
<h1>这是一个标题标签</h1>
<h2>这是一个标题标签</h2>
<h3>这是一个标题标签</h3>
<h4>这是一个标题标签</h4>
<h5>这是一个标题标签</h5>
<h6>这是一个标题标签</h6>
<!-- h1~h6是标题标签 字体加粗 独占一行 h1到h6字体从大到小-->
<p>这是一个段落标签</p>
<!-- 独占一行 段落之间有间隙 p标签和h标签是块级元素-->
<br>
<!-- 强制换行标签 -->
<hr>
<!-- 水平线标签 在页面中显示一条水平线-->
文本格式化标签
加粗、下划线、倾斜、删除线
<strong>加粗</strong>
<em>倾斜</em>
<ins>下划线</ins>
<del>删除线</del>
<!-- 上面这四个标签语义更强烈，建议使用 -->
<b>加粗</b>
<i>倾斜</i>
<u>下划线</u>
<s>删除线</s>
<!-- 行内元素 -->
媒体标签
图片标签
路径
音频标签
视频标签
<img src="./微信图片_20220316222540.jpg" alt="这是一张照片" title="这是一片云" width="300px">
<!-- img是图片标签 src是图片的路径 alt是图片未加载出来时显示的 title是鼠标悬停在图片上显示的 -->
<!-- width是宽度 height是高度 -->
<!-- 如果只设置width或height中的一个，另一个没设置的会自动等比例缩放（此时图片不会变形） -->
<!-- 如果同时设置了width和height两个，若设置不当此时图片可能会变形 -->
<!-- 路径分为绝对路径和相对路径 -->
<!-- 绝对路径有两种 一种是以盘符开头 还有一种是完整的网络地址 -->
<!-- 相对路径有三种 分别是上级目录 同级目录 下级目录 -->
<!-- 同级目录 ./+文件名 -->
<!-- 上级目录 ../+文件名 有多少上级就写多少个../ -->
<!-- 下级目录 ./文件夹/文件名 -->
<br>
<br>
<audio src="./video.mp4" controls autoplay loop></audio>
<!-- audio 是音频标签 controls是显示播放的控件 部分浏览器不支持 -->
<!-- autoplay 是自动播放标签 loop是循环播放标签 -->
<!-- 音频标签目前支持三种格式：MP3、Wav、Ogg -->
<br><br>
<video src="./video.mp4" controls autoplay loop></video>
<!-- video是视频标签 -->
<!-- 视频标签目前支持三种格式：MP4 、WebM 、Ogg -->
链接标签
a标签 或者说超链接 点击之后跳转到另一个页面
<a href="#" target="_blank">这是一个链接</a>
<!-- a标签是一个链接标签 href=网址 -->
<!-- a标签默认文字有下划线 -->
<!-- a标签从未点击过，默认文字显示蓝色 -->
<!-- a标签点击过之后，文字显示为紫色（清除浏览器历史记录可恢复蓝色） -->
<!-- target是目标网页的打开形式 有两种-->
<!-- _self是默认当前网页打开 -->
<!-- _blank在新窗口跳转并保留原网页 -->
<!-- #代表空链接 -->
<!-- 双标签，内部可以包裹内容 -->
列表标签
无序列表
<ul>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<li>无序列表</li>
<!-- ul标签中只允许包含li标签 li标签可以包含任意内容，包括ul标签 -->
<!-- 列表前默认自带黑色小圆点 -->
</ul>
有序列表
<ol>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<li>有序列表</li>
<!-- 列表的每一项前默认显示序号标识 -->
<!-- ol标签中只允许包含li标签 li标签可以包含任意内容 -->
</ol>
自定义列表
<dl>
<!-- dl是列表的整体 -->
<dt>自定义列表主题</dt>
<dd>自定义列表每一项</dd>
<dd>自定义列表每一项</dd>
<dd>自定义列表每一项</dd>
<!-- dl标签中只允许包含dt/dd标签 dt/dd标签可以包含任意内容 -->
<!-- dd前会默认显示缩进效果 -->
<!-- dd和dt是并列关系 -->
<!-- 无序列表最常用，有序列表偶尔用，自定义列表底部导航用 -->
</dl>
表格标签
注意点：
caption标签书写在table标签内部
th标签书写在tr标签内部（用于替换td标签）
<table border="3" width="400px" height="400px">
<!-- table代表整个表格 border代表表格的边框宽度 -->
<!-- table>tr>td tr代表行 td代表单元格 -->
<caption>
<h2>这是一个表格</h2>
</caption>
<!-- caption是指表格标题，默认表格顶部居中 -->
<thead>
<tr>
<th>标签</th>
<th>标签</th>
<th>标签</th>
<th>标签</th>
<!-- th是指表头单元格 文字加粗并居中显示 th代替td-->
</tr>
</thead>
<!-- thead代表表格的头部 -->
<tbody>
<tr>
<td>第一行</td>
<td rowspan="2">第一行和第二行</td>
<td>第一行</td>
<td>第一行</td>
</tr>
<tr>
<td>第二行</td>
<td>第二行</td>
<td>第二行</td>
</tr>
</tbody>
<!-- tbody代表表格的主体 -->
<tfoot>
<tr>
<td>底部</td>
<td colspan="3">底部</td>
</tr>
</tfoot>
<!-- tfoot代表表格的底部 -->
</table>
<!-- rowspan 和 colspen 在有tbody和tfoot的情况下，只能影响对应区域的合并 -->
合并单元格
rowspan：跨行合并→垂直方向合并 上下合并→只保留最上的，删除其他
colspan：跨列合并→水平方向合并 左右合并→只保留最左的，删除其他
属性值为合并单元格的个数
表单标签
input标签和button标签
input标签可以通过type属性值的不同，展示不同效果
type = ‘’text‘’ 的常用属性
placeholder 占位符，提示用户输入内容的文本
value属性：用户输入的内容，提交之后会发送给后端服务器 ，如果提前设置好了，则是内容的默认值
name属性：当前控件的含义，提交之后可以告诉后端发送过去的数据是什么含义
后端接收到数据的格式是：name的属性值 = value的属性值
text 文本框，用于输入单行文本
password 密码框用于输入密码暗文 常用属性 placeholder
radio 单选框，用于多选一
常用属性 checked 默认选中 单选框只能设置一个， name 分组 同一个name默认为一组，一组只有一个同时被选中
checkbox 多选框，用于多选多 常用属性 checked 默认选中
file 文件选择，用于之后上传文件 常用属性 multiple 多文件选择
如果需要实现以下按钮功能，需要配合form标签使用
form使用方法：用form标签把表单标签一起包裹起来即可
button标签常用属性
submit 提交按钮，用于提交
reset 重置按钮用于重置
button 普通按钮，默认无功能，之后配合js添加功能
谷歌浏览器中button默认是提交按钮
button标签是双标签，更便于包裹其他内容：文字、图片等
select下拉菜单标签
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性： selected：下拉菜单的默认选中
textarea文本域标签
常见属性：
cols：规定了文本域内可见宽度
rows：规定了文本域内可见行数
注意点：
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用CSS设置
label标签
使用方法①：
使用label标签把内容（如：文本）包裹起来
在表单标签上添加id属性
在label标签的for属性中设置对应的id属性值
使用方法②：
直接使用label标签把内容（如：文本）和表单标签一起包裹起来
需要把label标签的for属性删除即可
<form>
昵称：<input type="text" placeholder="请输入你的昵称" /> <br /><br />
<!-- form指的是表单 -->
<!-- input是指表单标签 type是属性值 -->
<!-- text 文本 placeholder是占位符 -->
密码：<input type="password" placeholder="请输入你的密码" />
<!-- password是指密码暗文输入 -->
<br /><br />
性别：
<label><input type="radio" name="gender" />男 </label>
<label><input type="radio" name="gender" />女</label>
<label><input type="radio" name="gender" checked />保密</label>
<!-- label是绑定标签 -->
<!-- 使用label标签把内容（如：文本）包裹起来，在表单标签上添加id属性，在label标签的for属性中设置对应的id属性值 -->
<!-- 直接使用label标签把内容（如：文本）和表单标签一起包裹起来，需要把label标签的for属性删除即可 -->
<!-- radio是单选 name设置单选互斥 checked是默认选中 -->
<br /><br />
喜欢的类型:
<label><input type="checkbox" />性感</label>
<label><input type="checkbox" checked />温柔</label>
<label><input type="checkbox" checked />可爱</label>
<label><input type="checkbox" />御姐</label>
<label><input type="checkbox" />萝莉</label>
<!-- checkbox是多选 -->
<br /><br />
城市：
<select>
<option>北京</option>
<option>上海</option>
<option selected>深圳</option>
<option>广州</option>
</select>
<!-- select是下拉框 option是每一项 selected是指默认选中 -->
<br />
<br />
自我介绍：
<br /><br />
<textarea cols="40" rows="10"></textarea>
<!-- textarea是文本域 cols是每行字符数 rows是行数 -->
<br /><br />
<input type="file" multiple />
<!-- file是指文件上传 mutiple是多文件上传 -->
<br /><br />
<input type="submit" />
<!-- submit是提交 -->
<br /><br />
<input type="reset" />
<!-- reset是重置 -->
<br /><br />
<input type="button" value="这是一个普通按钮" />
<br /><br />
<button>
<img src="./微信图片_20220325211732.png" width="100p;x" />
</button>
<!-- button第二种用法 双标签 可以包含图片 -->
<!-- header：网页头部 -->
<!-- nav：网页导航 -->
<!-- footer：网页底部 -->
<!-- aside：网页侧边栏 -->
<!-- section：网页区块 -->
<!-- article：网页文章 -->
<!-- 字符实体： 空格 >大于号 <小于号 -->
</form>
语义化标签
没有语义的布局标签-div和span
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
常见的有语义的布局标签
header：网页头部
nav：网页导航
footer：网页底部
aside：网页侧边栏
section：网页区块
article：网页文章
字符实体
HTML的空格合并现象
如果在html代码中同时并列出现多个空格、换行、缩进等，最终浏览器只会解析出一个空格
常见字符实体
空格
> 大于号
< 小于号
