前端开发环境搭建，初识HTML
一、前端环境搭建
- 安装VSCode，Chrome
- 安装VS和Chrome插件
备注
- 以上两项均已完成
二、初识HTML
1.标题和段落
页面中看到的内容都是由元素组成的。元素是由标签描述，标签根据元素的类型分为双标签和单标签，每一个元素的特征由属性来描述，描述的属性写到起始标签中。
<h1>开会通知：下个月每人加薪1000元</h1><p>开会通知：下个月每人加薪1000元</p>
元素是由标签和属性共同描述的
<female sex="famale" sw="80, 90, 100" height="170" weight="200">女朋友</female>
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属性：
标签的 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="https://www.baidu.com/" 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 | 图片的URL地址 |
| alt | text | 图片的描述信息 |
- 案例：
<img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度一下" width="200">
- 备注：
设置图片的大小时，可以只设置宽度或者高度，另外一个属性就会等比缩放，不要同时设置。
在实际的开发过程中，一般都在CSS中设置图片的样式，图片很少单独使用，基本都是用在链接中。
