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

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

1.1、下载并配置编辑器VScode

vscode下载地址

VScode 常用插件

视频资料

1） 语音与格式化

2）html/css 相关

3）js/vue 相关

4）php/mysql 相关

5）markdown 相关

6）效率相关

. 如何配置 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 常用插件

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