搭配环境:

1 下载vscode和chrome

2 装配vscode中的插件

chinese 中文简体
Debugger for Chrome 代码调试器
Auto Rename Tag 自动命名成对的HTML/XML标记
Auto Close Tag 自动添加HTML XML关闭标记
Auto Complete Tag 扩展包添加关闭标记全部重命名
HTML CSS Support 对css的支持HTML文档
HTML Snippets 完整HTML标记包含片段
javaScript（ES6）code snippets 语法字符中的javaScript 代码片段
Live Server 本地服务器与实时重新加载
Markdown Preview Enhanced 增强移植到vscode
markdownlint 样式检查
Matarial lcon Theme 文件图标
One Dark pro 标志性主题
prettier-Code formatter 使用更漂亮的代码

3. 装配chrome中的插件

AdBlocker-Adblock plus 拦截广告
CHarset 用于谷歌浏览器进行编码
Tampermonkey 用于破解某些网页的vip
Vue.js devtools 开发者工具
iGG谷歌访问助手
划词翻译
简悦-simpRead
lnfinlty 新标签页
page Ruler Redux 尺子专门测量网页大小
Just Color Picker 取色器

标签:

页面上看到的内容就是元素
元素是由标签描述，标签根据元素类型分：单标签和双标签,每一个元素的特征由属性来描述，描述的属性写到起始标签中
元素是由标签和属性共同进行描述的

//从大到小 除了设置文档标题之外，还可以用来划分页面结构
# 标题标签
## 标题标签
### 标题标签
#### 标题标签
##### 标题标签
###### 标题标签
//段落的插入
<P>段落标签</p>
//js的script标签
<script>const SITE = ""php中文网</script>
//链接标签
//href是跳转的地方，target是当前页面的跳转方式,_self是在当前页面跳转,_blank是在新的窗口打开新的页面
 <a href="https://www.php.cn/" target="_self">php中文网</a>
 <a href="https://www.php.cn/" target="_blank">php中文网</a>
 //内联框架
 //在指定的窗口打开 target中内联框架的name值
 <a href="https://www.baidu.com/" target="baidu">打开小度</a>
 //src是框架页面跳转的地址,srcdoc设置框架页面文字描述,width表示宽度,height表示高度
  <iframe srcdoc="<em>点击上面的:小度</em>" name="baidu" width="400"></iframe>

//锚点的使用,可以在当前页面任意跳转

 <a href="#footer">跳转到底部</a>
//创建锚点
//div是通用的容器标签，内部可以放任何类型的元素
 <div id="footer" style="margin-top: 1000px">俺是底部</div>
 <a href="#">回到顶部</a>

图片标签

 <img src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg" alt="web前端开发" width="200" />
 //img是图片标签名称，alt是当图片显示不出来的时候才显示，图片设置大小只需要设置一个,宽或高，另一个会自动缩比

总结:所有标签元素都通过body来显示

批改老师：天蓬老师

批改状态：合格

老师批语：