一、前端环境搭建
- 安装Visual Studio Code,Chrome(谷歌浏览器)
- 安装VS和Chrome插件
Visual Studio Code常用插件:
1.语言、格式化:
- Chinese Language Pack for Visual Studio Code 中文简体语音包
- Prettier-Code Formatter 几乎支持所有前端代码的格式化
- Simple icons小巧实用的文件图标集合
- One Dark Pro个人非常喜欢的一款主题
2.HTML/CSS插件:
- Auto Close Tag 标签自动关闭
- Auto Rename Tag 标签自动更名
- Auto Complete Tag 标签自动完成
- HTML CSS Support 自动补全样式表
- HTML Snippetshtml 代码片段
- highlight matching tag 自动高亮显示结束括号/标签
3.JS/Vue插件:
- JavaScript(ES6) Code snippets JS/ES6代码片段
- Vue Vue语法提示
- Vue2 Snippets Vue代码片段
- Vue-beautify Vue代码格式化
4.PHP/MySQL相关插件:
- PHP Intelephense 代码提示与函数跳转
- PHP IntelliSense 代码智能感知(可选)
- PHP DocBlocker代码块注释(可选)
- Format HTML in PHP格式化 PHP 中的 html 代码
- MySQL MySQL 语法高亮
5.MarkDown语法插件:
- Markdownlint Markdown 语法检查器
- Markdown Rreview Enhancedmardown 文件预览
6.提高工作效率的插件:
- Path Intellisense 智能路径提示
- Bracket Pair Colorizer 不同颜色表示不同层级括号
- Code Runner 支持常见的编程语言运行调试
- Live Server 内置 web 服务器
7.如何在VSCode中配置PHP代码检查器:在VSCode配置文件(setting.json)
// 版本与路径替换成系统中的php可执行文件路径与版本号"php.validate.executablePath": "E:/phpstudy_pro/Extensions/php/php7.3.4nts/php.exe","intelephense.environment.phpVersion": "7.3.4",
二、初识HTML
1.标题和段落
- 页面的内容均由元素组成;
- 元素是由标签来描述的,标签根据元素的类型分为单标签、双标签,每个元素的特征由属性来描述,需要将属性写到起始标签中。
<h1>开会通知:本周五进行大扫除</h1><p>开会通知:本周五进行大扫除</p>
- 元素是由标签和属性共同描述的;
<male sex="famale" sw="80, 90, 100" height="170" weight="200">男朋友</male>
- html中的所有内容,如果想要添加到html文档中,就必须要使用一个标签。
// JS代码必须写到一个script标签中<script> const SITE = "Hello World!";</script>
<?php// php代码必须放在一对php标签中echo "Hello World!";?>
<!-- 标题标签:除了设置文档标题之外,还可以用来划分页面结构的 --><h1>Hello World</h1><h2>Hello World</h2><h3>Hello World</h3><!-- 内容标签 <p></p> --><p>程序猿界有一句话:每一个程序猿都应该拥有一台MacBook Pro</p>
2.链接与锚点
- 链接标签 a标签-当今互联网的灵魂,实现了全球资源之间的共享
1.target属性:
- 规定在何处打开链接文档。
- _blank 跳转到新的页面,在新窗口打开
- _self( 默认值 ) 在相同的框架中打开链接文档;
- _parent 在父框架集中打开被链接文档;
- _top 在整个窗口中打开被链接文档;
- iframename 在指定窗口打开。
代码案例:
<!-- _self 当前窗口打开 --><a href="跳转目标" target="_self">Hello World</a><!-- _blank 跳转到新的页面,在新窗口打开 --><a href="跳转目标" target="_blank">Hello World</a><!-- 在指定窗口打开 target="iframe内联框架的name值" 此时a标签的target值需要跟iframe里的name值保持一致 --><a href="#34; target="baidu">打开百度</a><iframe srcdoc="点击上面的按钮打开百度" name="baidu" frameborder="0" width="600" height="500"></iframe>
- 注意:
使用target=”iframename”时,需要注意a标签的target值需要跟iframe的name值相等。
2.锚点
- 使用锚点可以实现在当前页面中的任意位置进行跳转。
<a href="#footer">跳转到底部</a><!-- 创建锚点 --><div id="footer" style="margin-top: 1000px;">This is footer</div>
- div:通用元素标签,内部可以放任意元素类型。
- 如何返回当前页面顶部?
直接将a标签的href值设置为#即可,如: <a href = “#”>回到顶部</a>。 - 备注:
vue.js、react等单页面应用,路由就是使用锚点实现的。
三、图片元素
如果我们想要在页面添加一张图片,可以使用img标签
- 必须属性:
- src 图片的URL地址;
- alt 图片的描述信息。
- 案例:
<img src="#34; alt="百度一下" width="200">
- 备注:
设置图片大小时,可以只设置宽度或者高度,另一个属性就会进行等比缩放,不需要同时设置。在实际开发中,一般在CSS中设置图片的样式,图片很少单独使用,基本都是用在链接中。
个人总结:有些代码看起来简单,但是自己上手起来真的是难,属于那种一看就会,一写就错,看来只能通过多写,多练才可以熟能生巧,这是个细活,急不得,要戒骄戒躁,平稳心态来面对这么多难题,加油!