一、基础认知
1、认识网页

2、五大浏览器

渲染引擎:
我们前端工程师常用的浏览器是谷歌浏览器
3、web标准
3.1 为什么需要web标准?

3.2web标准的构成

4、HTML、CSS、JavaScript 简单区分


二、HTML初体验
1、HTML的概念


- HTML标签在HTML的学习中起至关重要的部分,些许类似于C中的语句
- HTML通过标签来描述或改变网页中的文本、图片、音频、视频等
2、HTML骨架结构


3、VS Code 常用快捷键
快捷键还有许多,会在后续学习过程中陆续体验
4、VS的注释

5、标签的结构图

- 如上图中的 是双标签,作用域为双标签中包裹的内容
- 如上图中的
是单标签,自成一体,不需要配对便可以直接发挥作用
6、HTML标签的关系

注:书写代码时,要注意标签间的关系,比如兄弟关系的标签无法嵌套,会出现错误!
三、HTML标签学习

1、排版标签
1.1 标题标签

注:没有7级标题
1.2 段落标签

1.3 换行标签

1.4 水平线标签

2、文本格式化标签

左侧四个标签和左侧四个标签作用完全相同,不同的是strong、ins、em、del,表示的强调语义更强烈!
3、媒体标签
3.1、图片标签


图片标签介绍:

图片标签的 src 属性:
src可简单理解为图片的地址
图片标签的 alt 属性:

图片标签的 title 属性:

图片标签的 width 和 height 属性:

3.2、路径

路径可以理解为地址
绝对路径:

相对路径:

同级目录:

下级目录:

上级目录:

总结:

3.3 音频标签

3.4 视频标签

4、链接标签

4.1、链接标签的 href 属性 
4.2、链接标签的 target 属性

4.3 链接标签的显示特点

4.4 空链接

四、列表标签
1、标签的种类

2、无序列表

3、有序列表

4、自定义列表

五、表格标签
1、表格的基本标签

2、表格的相关属性

3、表格标题和表头单元格标签

4、表格的结构标签

5、合并单元格

六、表单标签
1、input系列标签

占位符(上面表单没有):


2、button按钮标签

3、select下拉菜单标签

4、textarea文本域标签

如下图:

5、label标签

七、语义化标签
1、没有语义的布局标签
- div
- span

2、有语义的布局标签

八、字符实体
1、HTML中的空格合并现象
2、常见字符实体

拿空格举例,想要有几个空格,就要有几个  
🧸欢迎您于百忙之中阅读这篇博客,📜希望这篇博客给您带来了一些帮助,祝您生活愉快!

