前端开发环境搭建，初识HTML

前端开发环境搭建，初识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中设置图片的样式，图片很少单独使用，基本都是用在链接中。