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。
<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来设置大小，不要这样做 图片单独很少用，用在链接中 -->
