【一、前端开发基础】HTML+CSS基础

学习笔记：
基于黑马前端视频学习的CSS3笔记
黑马前端学习笔记
查看某个前端技术是否兼容浏览器版本

HTML

VScode

1、Open In Default Browser =》 Alt+B
2、注释：Ctrl + /
3、查看 =》自动换行（Alt+Z）
4、往后缩进：shift+tab
5、快速复制粘贴：shift+alt+↓

常用标签

1、

~

，标题标签。
2、段落标签，

，特点是段落之间存在间隙。独占一行。
3、换行标签：
，水平线标签

---

4、文本格式化标签：

5、图片标签

【注意点】①title属性既可以用于图片标签，还可以用于其他标签。
②如果只设置width或height中的一个，另一个没设置的会自动等比例缩放。
【img标签有行内块元素的特点，但是在Chrome调试工具里面显示是inline】
6、音频标签：

7、视频标签 ，属性和音频标签一样。autoplay 自动播放（谷歌浏览器中需要配合muted实现静音播放）
8、超链接标签：
取值：①_self 默认值，在当前窗口中跳转，覆盖原网页。
②_blank 在新窗口中跳转（保留原网页）。

绝对+相对路径

列表和表格

9、列表标签：①无序列表

，ul标签中只允许包含li标签。
②有序列表：

，ol标签中只允许包含li标签。
③自定义列表：
【显示特点】dd前面会默认显示缩进效果（除去缩进需要用到css）。
dl标签中只允许包含dt/dd标签。dt/dd标签中可以包含任意内容。
10、表格标签：table（表格整体，可以包裹多个tr） > tr（表格每行，可以用于包裹td） > td（表格单元格，可以用于包裹内容）
【表格的属性】border、width、height（实际开发时针对于样式效果推荐用css）
【表格标题和表头单元格标签】

用法：

11、表格的结构标签：

12、合并单元格：①跨行合并（垂直合并）；②跨列合并（水平合并）

表单标签

input

【占位符】在网页中显示输入单行文本的表单空间。Type属性值：text；常用属性：placeholder
【控制placeholder的样式】

【单选功能默认选中】

【上传文件时选中多个文件】

button

重置

下拉菜单

文本域

label标签

语义化标签

1、没有语义化的标签： 2、有语义化的标签：（以下标签在做手机端的时候用的比较多）

字符实体

网页与网站、SEO

网页与网站的关系

骨架结构标签

SEO三大标签