您的位置 首页 php

小白学代码学习心得-前端开发环境准备,初识HTML

一、前端环境搭建

38af2803df174d569df553deb57ce0f6

Visual Studio Code

  • 安装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属性:

  • 规定在何处打开链接文档。
  1. _blank 跳转到新的页面,在新窗口打开
  2. _self( 默认值 ) 在相同的框架中打开链接文档;
  3. _parent 在父框架集中打开被链接文档;
  4. _top 在整个窗口中打开被链接文档;
  5. iframename 在指定窗口打开。
88a7a7de-20c7-4add-932a-9efb71e251ee

链接地址

代码案例:

 <!-- _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标签

  • 必须属性:
  1. src 图片的URL地址;
  2. alt 图片的描述信息。
  • 案例:
 <img src="#34; alt="百度一下" width="200">  
  • 备注:
    设置图片大小时,可以只设置宽度或者高度,另一个属性就会进行等比缩放,不需要同时设置。在实际开发中,一般在CSS中设置图片的样式,图片很少单独使用,基本都是用在链接中。

个人总结:有些代码看起来简单,但是自己上手起来真的是难,属于那种一看就会,一写就错,看来只能通过多写,多练才可以熟能生巧,这是个细活,急不得,要戒骄戒躁,平稳心态来面对这么多难题,加油!

7b2cbad8-5143-44c4-9ab5-89e1cdd879d6

文章来源:智云一二三科技

文章标题:小白学代码学习心得-前端开发环境准备,初识HTML

文章地址:https://www.zhihuclub.com/45156.shtml

关于作者: 智云科技

热门文章

网站地图