第一天
目录
第一天
1、HTML定义
2、标签语法
3、HTML基本骨架
4、标签的关系
5、注释
6、排版标签
①标题标签
②段落标签
③换行和水平线标签
④文本格式化标签
7、图像标签
①基本使用
②属性
8、路径
①相对路径-从当前文件位置出发查找目标文件
②绝对路径-从盘符出发查找目标文件
9、超链接
10、多媒体标签
①音频标签
②视频标签
第二天
1、列表
①无序列表
②有序列表
③定义列表
2、表格
3.表单
①input 标签
②下拉菜单
③文本域
④label 标签
⑥无语义的布局标签
1、HTML定义
HTML超文本标记语言——HyperText Markup Language。
超文本是什么？ 链接
标记是什么？ 标记也叫标签，带尖括号的文本
2、标签语法
标签成对出现，中间包裹内容
<>里面放英文字母（标签名）
结束标签比开始标签多/
拓展
-
双标签：成对出现的标签
-
单标签：只有开始标签，没有结束标签
3、HTML基本骨架
HTML基本骨架是 网页模板。
html：整个网页
head：网页头部，存放给浏览器看的代码，例如CSS
body：网页主体，存放给用户看的代码，例如 图片、文字
title：网页标题
VS Code 快速生成骨架：
在HTML文件中，!(英文字符)配合Enter/Tab键。
4、标签的关系
作用：明确代码的书写位置
父子关系（嵌套关系）
兄弟关系（并列关系）
缩进：
-
向后缩进：Tab
-
向前缩进：Shift+Tab
5、注释
注释就是对代码的解释和说明，其目的是让人们能够更加轻松的了解代码。注释是编写程序时，写入程序给一共语句、程序段、函数等的解释或提示，能提高程序代码的可读性。
在编写HTML代码是，我们经常要在一些关键代码旁做一下注释，这样做的好处很多，比如：方便理解、方便查找或方便项目组里的其它程序员了解你的代码，而且可以方便你对自己代码进行修改。
<!--...-->注释标签用来在源文档中插入注释，注释不会在浏览器中显示。
VS Code 中，用Ctrl+/来添加/删除注释。
6、排版标签
①标题标签
一般用在新闻标题、文章标题、网页区域名称、产品名称等等。
标签名：h1~h6（双标签）
显示特点：
文字加粗
字号逐渐减小
独占一行（换行）
经验分享：
h1标签在一个网页中只能用一次（规范而不是规矩），用来放新闻标题或网页的logo。
h2~h6没有使用次数的限制。
②段落标签
标签名：p（双标签）
显示特点：
独占一行
段落之间存在间隙
③换行和水平线标签
-
换行：<br>(单标签)
-
水平线： <hr>（单标签）
④文本格式化标签
作用：为文本添加特殊格式，以突出重点。常见的文本格式：加粗、倾斜、下划线、删除线等。
strong、em、ins、del标签自带强调含义（语义）。
7、图像标签
①基本使用
作用：在网页中插入图片。
<img src="图片的URL">SRC用于指定图像的位置和名称，是<img>的必须属性。
URL，VS Code以./开头有提示功能。
②属性
| 属性 | 作用 | 说明 |
|---|---|---|
| alt | 替换文本 | 图片无法显示的时候显示的文字 |
| title | 提示文本 | 鼠标悬停在图片上面的时候有显示的文字 |
| width | 图片的宽度 | 值为数字，没有单位 |
| height | 图片的高度 | 值为数字，没有单位 |
8、路径
①相对路径-从当前文件位置出发查找目标文件
路径指的是查找文件时，从起点到终点经历的路线。
路径分类：
相对路径：从当前文件位置出发查找目标文件
绝对路径：从盘符出发查找目标文件
Windows电脑从盘符出发
Mac电脑从根目录出发
相对路径-从当前文件位置出发查找目标文件
-
/表示进入某个文件夹里面 + 文件夹名字/
<img src="./路径测试文件/测试·.jpg" alt=""> -
.表示当前文件所在文件夹 ./
-
..表示上一级文件夹 ../
<img src="../1.png" alt="">
②绝对路径-从盘符出发查找目标文件
-
Windows 电脑从盘符出发
-
Mac 电脑从根目录（/）出发
<img src="C:\">
-
Windows 默认是\，其他系统是 /，建议统一写为/
绝对路径一般用来访问非本计算机的图片
应用场景：友情链接
9、超链接
作用：点击跳转到其他页面。
\<a href="https://www.bilibili.com">跳转到哔哩哔哩</a>
href属性值是跳转地址，是超链接的必须属性。
target="_blank"可以在跳转的时候新建页面跳转。
开发初期不知道跳转地址，href属性值写#，表示空链接，不会跳转。
10、多媒体标签
①音频标签
<audio src="音频的URL"></audio>
常见属性
| 属性 | 作用 | 特殊说明 |
|---|---|---|
| src（必须属性） | 音频URL | 支持格式：MP3、Ogg、Wav |
| controls | 显示音频控制面板 | |
| loop | 循环播放 | |
| autoplay | 自动播放 | 为了提升用户体验，浏览器一般会禁用自动播放功能 |
②视频标签
<video src="视频的URL"></video>
| 属性 | 作用 | 特殊说明 |
|---|---|---|
| src（必须属性） | 视频URL | 支持格式：MP4、WebM、Ogg |
| controls | 显示视频控制面板 | |
| loop | 循环播放 | |
| muted | 静音播放 | |
| autoplay | 自动播放 | 为了提升用户体验，浏览器支持在静音状态自动播放功能 |
第二天
1、列表
作用：布局内容排列整齐的区域。
①无序列表
作用：布局排列整齐的不需要规定顺序的区域。
标签：ul 嵌套 li，ul 是无序列表，li 是列表条目。
<ul>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
......
</ul>注意事项：
ul 标签里只能包裹 li 标签
li 标签里面可以包裹任何内容
②有序列表
作用：布局排列整齐的需要规定顺序的区域。
标签：ol 嵌套 li，ol 是有序列表，li 是列表条目。
<ol>
<li>第一项</li>
<li>第二项</li>
<li>第三项</li>
......
</ol>注意事项：
ol 标签里只能包裹 li 标签
li 标签里面可以包裹任何内容
③定义列表
标签：dl 嵌套 dd，dl 是定义列表，dt 是定义列表的标题，dd 是定义列表的描述/详情。
<dl>
<dt>列表标题</dt>
<dd>列表描述/详情</dd>
......
</dl>注意事项：
dl 里面只能包含 dt 和 dd
dt 和 dd 里面可以包含任何内容
2、表格
基本用法
网页中的表格与 Excel 表格类似，用来展示数据。
标签：table 嵌套 tr ，tr 嵌套 td / th。
提示：在网页中，表格默认没有边框线，使用border属性可以为表格添加边框线。
结构标签
作用：用表格结构标签把内容划分区域，让表格结构更清晰，语义更清晰。（可以省略，为了分区更清晰，类似注释）
| 标签名 | 含义 | 特殊说明 |
|---|---|---|
| thead | 表格头部 | 表格头部内容 |
| tbody | 表格主题 | 主要内容区域 |
| tfoot | 表格底部 | 汇总信息区域 |
合并单元格
作用：将多个单元格合并成一个单元格，以合并同类信息。
步骤：
1.明确合并的目标
2.保留最左最上的单元格，添加属性（取值是数字，表示需要合并的单元格数量）
— 跨行合并，保留最上单元格，添加属性 rowspan
— 跨列合并，保留最左单元格，添加属性 colspan
3.删除其他单元格（同类信息的）
3、表单
作用：收集用户信息。
使用场景：
登录页面
注册页面
搜索区域
①input 标签
基本使用
input 标签 type 属性值不同，则功能不同。
<input type="...">
| type 属性值 | 说明 |
|---|---|
| text | 文本框，用于输入单行文本 |
| password | 密码框 |
| radio | 单选框 |
| checkbox | 多选框 |
| file | 上传文件 |
占位文本：
作用：提示信息
属性：placeholder =”提示信息“
单选框 - radio
常用属性：
| 属性名 | 作用 | 特殊说明 |
|---|---|---|
| name | 控件名称 | 控件分组，同组只能选中一个（单选功能） |
| checked | 默认选中 | 属性名和属性值相同，简写为一个单词 |
多选框 - checkbox（复选框）
默认选中：checked。
<input type="checkbox" checked> 内容
上传文件 - file
默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能。
<input type="file" multiple>
②下拉菜单
标签：select 嵌套 option，select 是下拉菜单整体，option 是下拉菜单的每一项。
<select>
<option>北京</option>
<option>上海</option>
<option>广州</option>
<option>深圳</option>
<option selected>天津</option>
</select>③文本域
作用：多行输入文本的表单控件。
标签：textarea 双标签。
<textarea>默认提示文字</textarea>
④label 标签
作用：网页中，某个标签的说明文本。
经验：用 label 标签绑定文字和表单控件的关系，增大表单控件的点击范围。
增大点击范围
-
写法一
-
label 标签只包裹内容，不包裹表单控件
-
设置 label 标签的 for 属性值和表单控件的 id 属性值相同
-
<input type="radio" id="man">
<label for="man">男</label>-
写法二
-
使用 label 标签包裹文字和表单控件，不需要属性
<label><input type="radio">女</label>
-
提示：支持 label 标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等。
⑤按钮 - button
<button type="">按钮</button>
type 属性值：
| type 属性值 | 说明 |
|---|---|
| submit | 提交按钮，点击后可以提交数据到后台（默认功能） |
| reset | 重置按钮，点击后将表单控件恢复默认值 |
| button | 普通按钮，默认没有功能，一般配合 JavaScript 使用 |
注意：想要使用按钮需要把按钮和所生效的范围用 form 表单区域包裹起来，action属性是发送数据的地址
⑥无语义的布局标签
-
作用：布局网页（划分网页区域，摆放内容）
-
div：独占一行
-
span：不换行
-
<div>div标签,独占一行</div> <span>span标签,不换行</span>
字符实体
作用：在网页中显示预留字符。
| 显示结果 | 描述 | 实体名称 |
|---|---|---|
| 空格 |  ； | |
| < | 小于号 | &it； |
| > | 大于号 | >； |
