前端开发环境的搭建与HTML初体验

1、 下载编辑器VScode和浏览器chrome并配置

1.1、下载并配置编辑器VScode

vscode下载地址

VScode 常用插件

视频资料

1） 语音与格式化

序号	插件名称	描述
1	Chinese Language…	中文简体语音包
2	Prettier-Code Formatter	几乎支持所有前端代码的格式化
3	Simple icons	小巧实用的文件图标集合
4	One Dark Pro	个人非常喜欢的一款主题

---

2）html/css 相关

序号	插件名称	描述
1	Auto Close Tag	标签自动关闭
2	Auto Rename Tag	标签自动更名
3	Auto Complete Tag	标签自动完成
4	HTML CSS Support	自动补全样式表
5	HTML Snippets	html 代码片段
6	highlight matching tag	自动高亮显示结束括号/标签

---

3）js/vue 相关

序号	插件名称	描述
1	JavaScript(ES6) Code snippets	js/es6 代码片段
2	Vue	Vue 语法提示
3	Vue2 Snippets	Vue 代码片段
4	Vue-beautify	Vue 代码格式化

---

4）php/mysql 相关

序号	插件名称	描述
1	PHP Intelephense	代码提示与函数跳转…
2	PHP IntelliSense	代码智能感知（可选）
3	PHP DocBlocker	代码块注释（可选）
4	Format HTML in PHP	格式化 PHP 中的 html 代码
5	MySQL	MySQL 语法高亮

---

5）markdown 相关

序号	插件名称	描述
1	Markdown Rreview Enhanced	mardown 文件预览
2	Markdownlint	Markdown 语法检查器

---

6）效率相关

序号	插件名称	描述
1	Live Server	内置 web 服务器
2	Code Runner	支持常见的编程语言运行调试
3	Bracket pair colorizer	不同颜色表示不同层级括号
4	path intellisense	智能路径提示

---

---

. 如何配置 php 代码检查器

在 vscode 配置文件 settings.json 中添加

// 版本与路么替换成你当前系统中的php可执行文件路径与版本号即可
"intelephense.environment.phpVersion": "7.4.1",
 "php.validate.executablePath": "/Applications/MAMP/bin/php/php7.4.1/bin/php"

---

1.2、下载并配置浏览器chrome

chrome下载地址

Chrome 常用插件

序号	名称	描述
1	igg谷歌访问助手	提供谷歌搜索，gmail，Chrome Store,Android/Golang等
2	chrome-color-picker	一款 chrome 调试器风格的取色器插件
3	Page Ruler Redux	用于测量网站图片、元素像素大小的尺子
4	Separate Window	视频播放插件
5	Charset	修改网站的默认编码

---

2、HTML基础

2.1、标题和段落

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

<girl sex="female" sw="80,90,100" height="170" weight="200">女朋友</girl>

• html中的所有内容,如果想添加到html文档中,就必须要使用一个标签

<script>
   // js代码必须到一个script标签中
   const SITE = "php中文网";
</script>

2.1.1、标题

• HTML 标题（Heading）是通过<h1> - <h6> 标签来定义的

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<h3>这是标题 3</h3>
<h4>这是标题 4</h4>
<h5>这是标题 5</h5>
<h6>这是标题 6</h6>

这是标题 1

这是标题 2

这是标题 3

这是标题 4

这是标题 5

这是标题 6

---

2.1.2、段落

• \<p> 标签定义段落，\<p>元素会自动在其前后创建一些空白

<p>这是一个段落1。</p>
<p>这是一个段落2。</p>

这是一个段落1。
这是一个段落2。

---

2.2、链接与锚点

2.2.1、链接

• \<a> 标签定义超链接，用于从一个页面链接到另一个页面
• \<a> 元素最重要的属性是 href 属性，它指定链接的目标。

    <!-- _self: 跳转的新页面在当前窗口打开 -->
<a href="https://www.php.cn/" target="_self">php中文网</a>
    <!-- _blank: 跳转的新页面在新窗口打开 -->
<a href="https://www.php.cn/" target="_blank">php中文网</a>
    <!-- 在指定的窗口打开 target="iframt内联框架的name值" -->
<a href="https://www.baidu.com/" target="baidu">打开小度</a>
<iframe srcdoc="<em>点击上面的:小度</em>" name="baidu" width="400"></iframe>

2.2.2、锚点

    <!-- 使用锚点，可以实现在当前页面中的任决位置进行跳转   -->
<a href="#footer">跳转到底部</a>
    <!-- 创建锚点 -->
    <!-- div:通用的容器标签,内部可以放任何类型的元素 -->
    <!-- http://127.0.0.1:5500/1208/demo2.html#footer -->
<div id="footer" style="margin-top: 1000px">俺是底部</div>
<a href="#">回到顶部</a>

---

2.3、图片

• 在 HTML 中，图像由\<img> 标签定义。
• \<img> 是空标签，意思是说，它只包含属性，并且没有闭合标签。
• \<img> 标签有两个必需的属性：src 和 alt。
  • src 是图片地址
  • alt 是图片说明

<img src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg" alt="web前端开发" />
    <!-- 图片设置大小的时候,只需要设置一个，如宽度或高度，另一个会等比缩放 -->
<img src="https://img.php.cn/upload/course/000/000/001/5d24289c99b05106.jpg" alt="web前端开发" width="200" />
    <!-- css来设置大小，不要这样做
      图片单独很少用，用在链接中 -->

---