在vscode上面新建文件: 
文章图片
如何快速编写HTML模板? 
文章图片
下图就是操作之后的默认页面模板:
文章图片
开发者工具 通过开发者工具可以观察到页面的基本结构
鼠标右键--->审查元素
文章图片
文章图片
标签
1.注释标签------>
文章图片
文章图片
2.标题标签
文章图片
文章图片
【JAVAEE|JAVAEE----HTML】
3.段落标签--------->.....
文章图片
在和
之间输入lorem加tab键,可以生成一个随机的比较长的字符串
4.换行标签------>
在HTML中如果自己手动换行是会被忽略的,因此如果想要换行就需要用到
换行标签是一个单标签(只有开始标签,没有结束标签)
转义字符 在HTML中如果直接打空格,是会被忽略掉的,HTML会把多个空格合并成一个空格
因此如果需要多个空格,就需要用到转义字符
除了空格,像< > & 等这些特殊符号也需要使用转义字符
文章图片
文章图片
格式化标签 
文章图片
文章图片
图片标签 :img
img标签是个单标签(不需要结束标签)
img标签必须带有src属性,src属性表示图片的路径
img标签的其他属性:
文章图片
文章图片
我们需要知道这其中的目录结构:
1.相对路径:以html所在位置为基准,找到图片的位置
(1)同级路径:直接写文件名即可(或./)
(2)下一级路径:图片在和html同级的文件夹下面
举个例子:图片1.jpg在image文件夹下,image文件夹和html同级,因此写成---->image/1.jpg
(3)上一级路径:图片和放有html的文件同级
举个例子:html在image文件夹下,图片1.jpg和image文件夹同级,因此写成----->../1.jpg
2.绝对路径:一个完整的磁盘路径或者网络路径
(1)磁盘路径:从(C:或D:开始一直到图片的路径)
(2)网络路径:就是在网上查找一个图片,右键"复制图片地址",然后把这个地址放到src=""中
超链接标签:a 超链接标签必须具备href,它表示点击后会跳转到哪个页面
超链接标签是行内元素
链接的几种形式:
1.外部链接:href引用其他网站的地址
文章图片
2.内部链接:网站内部页面之间的链接
1.html和2.html是同级关系
文章图片
3.空链接:在开发阶段有的链接具体的地址还不确定,就可以使用#在href中占位
文章图片
4.下载链接:href对应的路径是一个普通文件(不是html之类的),就会出发下载操作
文章图片
5.网页元素链接:可以给图片等任何元素添加链接,点击图片等元素就可以实现跳转的效果
文章图片
6.锚点链接:可以快速定位到页面中的某个位置
文章图片
表格标签
表格标签是一组标签 
文章图片
表格标签中的一些属性
文章图片
文章图片
合并单元格 
文章图片
要写在td标签中
文章图片
列表标签 1.无序列表(重要)--------->ul 和li
文章图片
2.有序列表(用的不多)-------->ol和li
文章图片
3.自定义列表(重要)--------->dl(总标签),dt(小标签),dd(围绕标签来说明)
文章图片
表单标签
表单标签分成两个部分:
1.表单域:包含表单元素的区域,重点是form标签
2.表单控件:输入框,提交按钮等,重点是input标签
(1)input标签 
文章图片
具体看下不同的type:
a.文本框
文章图片
b.密码框
文章图片
c.单选框
文章图片
d.复选框(checkbox)
文章图片
e.普通按钮(button)
文章图片
f.提交按钮(submit)
文章图片
g.清空按钮(reset)
文章图片
h. 选择文件(file)
文章图片
(2)label标签
label标签是搭配 input 使用的.
label标签的属性---->for 属性: 指定当前 label 和哪个相同 id 的 input 标签对应.
举个例子:
文章图片
(3)select标签(下拉菜单)
option 中定义 selected="selected" 表示默认选中
文章图片
(4)textarea 标签
多行编辑框
文章图片
无语义标签----->div & span 
文章图片
可以理解为:
div和span 就是两个盒子. 用于网页布局
div 是独占一行的, 是一个大盒子.
span 不独占一行, 是一个小盒子.
文章图片
下面是两个综合案例
案例一:展示简历信息 PDF上有,同时我也有些html文件,在电脑上可以看
案例二:填写简历信息PDF上有,同时我也有些html文件,在电脑上可以看
有不会的标签啊啥的可以查这个 
文章图片
推荐阅读
- JAVAEE|JAVAEE---网络编程3 针对面试
- 本篇还玩“障眼法”，一文解读HTML内联框架Iframes。
- javaee|JVM——运行时数据区、双亲委派模型、垃圾回收算法、垃圾收集器、Java内存模型
- vue.js|加载页面全局设置spinning
- javascript|jQuery插件
- 前台vue|vue 实现多个视频播放 vue-video-player
- html|学成在线官网首页完整版（含psd源文件）
- 前端|刷题，巩固基础的好方法
- 前端|flex布局