本篇笔记转载于视频：
https://www.bilibili.com/video/BV1Kg411T7t9?p=1&vd_source=8b44b88b9fdd1350491c685b5874d6da
目录
一、网页的形成
前端代码开发——浏览器解析、渲染代码——呈现web页面
主要浏览器：
IE(Edge)、Chrome、Firefox、Safari（苹果自带）、Opera（较少见）
浏览器内核不同、或者渲染引擎不同
Safari(Webkit)、Chrome/Opera/Edge(Blink 其属于Webkit分支，Blink兼容Webkit)——目前国内
浏览器一般都采用Webkit/Blink
二、web标准
| 构成 | 语言 | 说明 |
| 结构 | HTML | 页面元素和内容 |
| 表现 | CSS | 网页元素的外观和位置等页面样式（如颜色、大小等） |
| 行为 | JavaScript | 网页模型的定义与页面交互等 |
三、HTML
它不是编程语言，是一种标记语言
超文本标记语言：专门用于网页开发的语言，主要通过HTML标签对网页中的文本，图片，音频，视频等内容进行描述
常用文本标签
1、标题标签：六个等级标签<h1></h1>...
2.段落和换行标签 <p></p> <br> 【换行】 <hr>【分割线】
3.文本格式化标签 <strong></strong>【加粗】
<ins></ins>【下划线】insert
<del></del>【删除线】
<em></em>【倾斜】emphasize
媒体标签
1、图片标签:
图片标签的属性
| 属性 | 属性值 | 说明 |
| src | 图片路径 | 必须属性 |
| alt | 文本 | 替换文本，图片显示失败时显示(为了提高SEO及适配屏幕阅读器,建议都把alt写上) |
| title | 文本 | 提示文本，鼠标悬停在图片上，显示的提示文字 |
| width | 像素 | 设置图像的宽度（了解，后面通过CSS设置） |
| height | 像素 | 设置图像的高度（了解，后面通过CSS设置） |
| border | 像素 | 设置图像的边框粗细（了解，后面通过CSS设置） |
2、路径
相对路径：以引用文件所在位置为参考基础
| 相对路径分类 | 符号 | 说明 |
| 同级 | ./ | <img src="./baidu.png">或者<img src="baidu.png"> |
| 下级 | / | <img src="image/baidu.png"> |
| 上级 | ../ | <img src="../image/baidu.png"> |
绝对路径：指目录下的绝对位置，直接到达目的位置，通常从盘符开始的路径
3、音频标签
支持mp3、Wav、Ogg格式
<audio src="../audio/sky.mp3" controls></audio>| 属性名 | 功能 |
| src | 音频的路径 |
| controls | 显示播放的控件 |
| autoplay | 自动播放（部分浏览器不支持） |
| loop | 循环播放 |
4、视频标签
支持MP4、WebM、Ogg格式
属性与上述音频标签一致，其中区别在autoplay上：Google中需配合muted实现静音播放
<video src="../video/山水之间-许嵩.mp4" controls autoplay muted loop></video>5、链接标签
用于点击之后，从一个页面跳转到另一个页面，称a标签/超链接
<a href="./Study_demo.html" target="_blank">Castle in the Sky</a>Target属性
描述目标网页的打开形式
| 取值 | 效果 |
| _self | 默认值，在当前窗口中跳转（覆盖原网页） |
| _blank | 在新窗口中跳转（保留原网页） |
列表标签
实现网页中列表结构的搭建
列表的应用场景：无序列表、有序列表、自定义列表
无序列表
在网页中表示一组无顺序之分的列表，如：新闻列表
标签组成：
| 标签名 | 说明 |
| ul | 表示无序列表的整体，用于包裹li标签 |
| li | 表示无序列表的每一项，用于包含每一行的内容 |
显示特点：列表的每一项前默认显示圆点标识
注意点：
ul标签中只允许包含li标签
li标签可以包含任意内容
有序列表
在网页中表示一组有顺序之分的列表
显示特点：列表的每一项前默认显示序号标识
其他与上述无序列表相同
无序列表
在网页的底部导航中通常会使用自定义列表实现
自定义列表
| 标签名 | 说明 |
| dl | 表示自定义列表整体，用于包裹dt/dd标签 |
| dt | 表示自定义列表的主题 |
| dd | 表示自定义列表的针对主题的每一项内容 |
显示特点：dd前会默认显示缩进效果
注意点：
dl标签中只允许包含dt/dd标签
dt/dd标签可以包含任意内容
表格标签
在网页中以行+列的单元格的方式整齐展示和数据
| 标签名 | 说明 |
| table | 表格整体，可用于包裹多个tr |
| tr | 表格每行，可用于包裹td |
| td | 表格单元格，可用于包裹内容 |
1、表格相关属性
| 属性名 | 属性值 | 效果 |
| border | 数字 | 边框宽度 |
| width | 数字 | 表格宽度 |
| height | 数字 | 表格高度 |
2、表格标题和表头单元格标签
在场景中表示整体大标题和一列小标题
| 标签名 | 名称 | 说明 |
| caption | 表格大标题 | 表示表格整体大标题，默认在表格整体顶部居中位置显示 |
| th | 表头单元格 | 表示一列小标题，通常用于表格第一行，默认内部文字加粗并居中显示 |
注意点：
caption标签书写在table标签内部
th标签书写在table标签内部（用于替换td标签）
3、表格的结构标签
让表格的内容结构分组，突出表格的不同部分（头部、主体、底部），使语义更加清晰，方便后期css美化
| 标签名 | 名称 |
| thead | 表格头部 |
| tbody | 表格主体 |
| tfoot | 表格底部 |
注意点：
表格结构标签内部用于包裹tr标签
4、合并单元格
合并单元格步骤：
1.明确合并哪几个单元格
2.通过左上原则，确定保留谁删除谁
上下合并-只保留最上的，删除其他
左右合并-只保留最左的，删除其他
3.给保留的单元格设置：跨行合并（rowspan）或者跨列合并（colspan）
| 属性名 | 属性值 | 说明 |
| rowspan | 合并单元格的个数 | 跨行合并，将多行的单元格垂直合并 |
| colspan | 合并单元格的个数 | 跨列合并，将多列的单元格水平合并 |
注意点：
只有同一个结构标签中的单元格才能合并，不能跨结构标签合并（不能跨：thead/tbody/tfoot）
表单标签
1、input系列标签
在网页中显示收集用户信息的表单效果，如：登录页、注册页
标签名：input
input标签可以通过type属性值的不同，展示不同的效果
| 标签名 | type属性值 | 说明 |
| input | text | 文本框，用于输入单行文本 |
| input | password | 密码框，用于输入密码 |
| input | radio | 单选框，用于多选一 |
| input | checkbox | 多选框，用于多选多 |
| input | file | 文件选择，用于之后上传文件 |
| input | submit | 提交按钮，用于提交 |
| input | reset | 重置按钮，用于重置 |
| input | button | 普通按钮，默认无功能，之后配合js添加功能 |
type=text
常用属性：
| 属性名 | 说明 |
| placeholder | 占位符。提示用户输入内容的文本 |
type=radio
在网页中显示多选一的单选表单控件
常用属性
| 属性名 | 说明 |
| name | 分组，有相同name属性值的单选框为一组，一组中同时只能由一个被选中 |
| checked | 默认选中 |
注意点：
name属性对于单选框有分组功能
有相同name属性值的单选框为一组，一组中只能同时有一个被选中
type=file
常用属性
| 属性名 | 说明 |
| multiple | 所有文件选择 |
type=submit/reset/button
type属性值：
| 标签名 | type属性值 | 说明 |
| input | submit | 提交按钮。点击提交之后提交数据给后端服务器 |
| input | reset | 重置按钮。点击之后恢复表单默认值 |
| input | button | 普通按钮。默认无功能，之后配合js添加功能 |
注意点：
如果需要实现以上按钮功能，需要配合form标签（表单域）使用
form使用方法：用form标签把表单标签一起包裹起来即可
2、button按钮标签
在网页中显示用户点击的按钮
type属性值（同input的按钮系列）
| 标签名 | type属性值 | 说明 |
| button | submit | 提交按钮。点击提交之后提交数据给后端服务器 |
| button | reset | 重置按钮。点击之后恢复表单默认值 |
| button | button | 普通按钮。默认无功能，之后配合js添加功能 |
注意点：
谷歌浏览器中button默认是提交按钮
button标签是双标签，更便于包裹其他内容：文字、图片等
3、select下拉菜单标签
在场景中提供多个选项的下拉菜单表单控件
标签组成：
select标签：下拉菜单的整体
option标签：下拉菜单的每一项
常见属性：
selected:下拉菜单的默认选中
4、textarea文本域标签
在网页中提供可输入多行文本的表单控件
常见属性：
cols:规定了文本域内可见宽度
rows:规定了文本域内可见行数
注意点：
右下角可以拖拽改变大小
实际开发时针对于样式效果推荐用css设置
5、label标签
常用于绑定内容与表单标签的关系
使用方法①：
1.使用label标签把内容包裹起来
2.在表单标签上添加id属性
3.在label标签的for属性中设置对应的id属性值
使用方法②：
1.直接使用label标签把内容和表单标签一起包裹起来
2.需要把label标签的for属性删除即可
语义化标签
没有语义的布局标签div和span
场景：实际开发网页时会大量频繁的使用到div和span这两个没语义的布局标签
div标签：一行只显示一个（独占一行）
span标签：一行可以显示多个
字符实体
能通过字符实体在网页中显示特殊符号
一般只需要记住空格
| 实体名称 | |
| 空格 | |
四、VS Code 常用快捷键
在帮助的编辑器操场中又说明
Ctrl+Shift+L ——选择相同字母的文字
Ctrl+Space——智能提示（由于和Windows热键重合，将其改成了Tab+Space）
Alt+up/down——移动行lianlian
shift+alt+down——复制且向下移一行
在项目中，index.html一般是首页，可以先打开预览
1699
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
