黑马-HTML、CSS、Bootstrap笔记

P4 标签语法

1. HTML 定义：HTML 超文本标记语言--HyperText Markup Language

2. 超文本：链接
3. 标签：带尖括号的文本

P5 HTML基本骨架

1. HTML基本骨架是网页模板

2. html：整个网页
3. head：网页头部，存放给浏览器看的代码，例如css
4. body：网页主体，存放给用户看的代码，例如图片、文字
5. title：网页标题

 VS Code快速生成骨架：在HTML文件（.html）中，!（英文）配合Enter/Tab键

P6 标签的关系

1. 父子级（嵌套）
2. 兄弟级（并列）

P7 注释（代码说明）

1. VS Code注释快捷键：Ctrl + /

P8 标题标签h1-h6

1. h1-h6（标题标签）双标签
2. 显示特点：文字加粗、字号逐渐减小、独占一行（换行）
3. 经验分享：h1标签在一个网页中只能用一次，用来放新闻标题和网页的logo
4. h2-h6没有使用次数限制

P8 段落标签p

1. p（段落标签）双标签
2. 显示特点：独占一行、段落之前存在间隙

 P9 换行与水平线标签（br换行、hr水平线-单标签）

1. br换行、hr水平线（单标签）
2. 浏览器不识别代码中的Enter键换行

  P10 文本格式化标签

1. 重点：strong（加粗标签）、em（倾斜标签）、ins（下划线标签）、del（删除线标签）
2. b（加粗标签）、i（倾斜标签）、u（下划线标签）、s（删除线标签）
3. 作用：为文本添加特殊格式，以突出重点，常见的文本格式：加粗、倾斜、下划线、删除线等

  P11 图像标签（img）

1. img （图像标签）图像路径 src = “路径” 图片无法加载用于提示文字 alt =“提示文字”
2. 作用：在网页中插入网页

图像标签属性

1. alt替换文字：图片无法显示的时候显示的文字
2. title提示文本：鼠标悬停在图片上面的时候显示的文字
3. width图片宽度：值为数字，没有单位（了解）
4. height图片高度：值为数字，没有单位（了解）

P12 路径（绝对路径、相对路径）

1. 路径：指的是查找文件时，从起点到终点经历的路线
2. 路径分类：相对路径（从当前文件位置出发查找目标文件）、绝对路径（从盘符出发查找目标文件）
3. Windows电脑从盘符出发
4. Mac电脑从根目录出发

相对路径：从当前文件位置出发查找目标文件

1. / 表示进入某文件夹里面  文件夹名字/
2. . 表示当前文件所在文件夹  ./

P13 超链接标签（a）

1. 作用：点击跳转到其他页面
2. href属性值是跳转地址，是超链接的必须属性
3. target跳转方式：_blank新窗口跳转页面、_self默认窗口

P14 音频、视频标签（audio、video）

1. 作用：在网页插入音频、视频
2. 常见属性：
3. src（必须属性）作用：音频URL，支持：MP3、Ogg、Wav
4. controls 显示音频控制面板
5. loop 循环播放
6. autoplay 自动播放（为了提升用户体验、浏览器一般会禁用自动播放功能）

 视频标签：video

1. 作用：在网页插入视频
2. 常见属性：
3. src（必须属性）作用：音频URL，支持：MP3、Ogg、Wav
4. controls 显示视频控制面板
5. loop 循环播放
6. muted 静音播放
7. autoplay 自动播放（为了提升用户体验、浏览器支持在静音状态自动播放）

P18 列表标签（无序ul、有序ol、自定义列表dl）

有序列表（ul）

1. 无序列表作用：布局排列整齐的不需要规定顺序的区域 
2. 标签：ul 嵌套 li ，ul是无序列表，li是列表条目
3. 注意事项：ul标签里面只能包含li标签
4. li标签里面可以包含任何内容（标签）

有序列表（ol） 

1. 作用：布局排列整齐的需要规定顺序的区域
2. 标签：ol 嵌套 li，ol 是有序列表，li 是列表条目
3. 注意事项：ol标签里面只能包含li标签
4. li标签里面可以包含任何内容（标签）

 自定义列表（dl自定义列表、dt自定义列表标题、dd定义列表的描述、详情）

1. 标签：dl 嵌套 dt 和 dd，dl是自定义列表，dt 是自定义列表的标题，dd 是自定义列表的描述、详情
2. 注意事项：dl 里面只能包含 dt 和 dd
3. dt 和 dd里面可以包含任何内容（标签）

P19 表格标签（table表格、tr行、th表头单元格、td内容单元格）

1. 作用：网页中的表格与Excel表格类似，用于展示数据
2. 标签：table 嵌套 tr ，tr 嵌套 td、th（table表格、tr行、th表头、td表格内容）
3. 提示：在网页中，表格默认没有边框线。使用border属性可以为表格添加边框线

 表格结构标签（了解）

1. 作用：用表格标签把内容划分区域，让表格结构更清晰，语义更清晰
2. 标签：thead表格头部（表格头部内容）、tbody表格主题（主要内容区域）、tfoot表格底部（汇总信息区域）

 P20 合并单元格（跨行rowspan、跨列colspan合并）

1. 作用：将多个单元格合并成一个单元格，以合并同类信息
2. 合并步骤：
3. 明确合并的目标
4. 保留最左最上的单元格，添加属性（取值是数字、表示需要合并的单元格数量）
5. 跨行合并：保留最上单元格，添加属性：rowspan
6. 跨列合并：保留最左单元格，添加属性：colspan
7. 删除其他单元格

 P21 表单（input）

1. 作用：收集用户信息
2. 使用场景：登录页面、注册页面、搜索区域
3. input标签type属性不同，则功能不同
4. type属性：text文本框（用于输入单行文本）、password密码框、radio单选框、checkbox多选框、file上传文件

input标签占位文本属性（placeholder）

1. 作用：提示信息（文本框和密码框使用）
2. 标签：placeholder

 input标签单选框属性（radio）

1. 常用属性：
2. name 控件名称（控件分组同组只能选择一个【单选功能】）
3. checkbox 默认选中（属性名和属性值相同，简写为一个单词）

 input标签上传文件属性（file） 

1. 默认情况下，文件上传表单控件只能上传一个文件，添加multiple属性可以实现文件多选功能

  input标签多选框属性（checkbox） 

1. 多选框也叫复选框，默认选中checkbox

P22 下拉菜单 （select 嵌套 option，select是下拉菜单整体，option是下拉菜单的每一项）

1. select 嵌套 option，select是下拉菜单整体，option是下拉菜单的每一项，selected默认选中

P23 文本域标签（textarea）

1. 作用：多行输入文本的表单控件
2. 标签：textarea双标签，中间放提示文字
3. 注意：右下角有拖拽功能，未来都会禁用的，工作中，用css设置尺寸

 P24 label标签

1. 作用：网页中，某个标签的说明文本
2. 经验：用label标签绑定文字和表单控件的关系，增大表单控件的点击范围

label标签增大点击范围写法

1. 写法一：label标签只包裹内容，不包含表单控件
2. 设置label标签的for属性值和表单控件的id属性相同
3. 写法二：使用label标签包含文字和表单控件，不需要属性
4. 提示：支持label标签增大点击范围的表单控件：文本框、密码框、上传文件、单选框、多选框、下拉菜单、文本域等等

P25 按钮（button）

1. 标签：button双标签
2. type属性值：
3. submit提交按钮，点击后可以提交数据到后台（默认功能）
4. reset重置按钮，点击后将表单控件恢复默认值
5. button普通按钮，默认没有功能，一般配合JavaScript使用

P26 无语义的布局标签（div、span标签和字符实体）

1. 作用：布局网页（划分网页区域、摆放内容）
2. div：独占一行
3. span：不换行

 字符实体

1. 作用：在网页中显示预留字符
2. 实体名称： ，显示内容：空格
3. 实体名词：&lt;，显示内容：<
4. 实体名词：&gt;，显示内容：>

P31 CSS引入方式（内部样式表-学习使用、外部样式表-开发使用、行内样式-配合JavaScript使用）

1. 内部样式--学习使用：css代码写在style标签里面
2. 外部样式--开发使用：css