前端開(kāi)發(fā)環(huán)境搭建，初識(shí)HTML

一、前端環(huán)境搭建

• 安裝VSCode，Chrome
• 安裝VS和Chrome插件

備注

• 以上兩項(xiàng)均已完成

二、初識(shí)HTML

1.標(biāo)題和段落

• 頁(yè)面中看到的內(nèi)容都是由元素組成的。

• 元素是由標(biāo)簽描述，標(biāo)簽根據(jù)元素的類型分為雙標(biāo)簽和單標(biāo)簽，每一個(gè)元素的特征由屬性來(lái)描述，描述的屬性寫(xiě)到起始標(biāo)簽中。

<h1>開(kāi)會(huì)通知：下個(gè)月每人加薪1000元</h1>
<p>開(kāi)會(huì)通知：下個(gè)月每人加薪1000元</p>

• 元素是由標(biāo)簽和屬性共同描述的

<female sex="famale" sw="80, 90, 100" height="170" weight="200">女朋友</female>

• html中的所有內(nèi)容，如果想要添加到html文檔中，就必須要使用一個(gè)標(biāo)簽

// JS代碼必須寫(xiě)到一個(gè)script標(biāo)簽中
<script>
    const SITE = "Hello World！";
</script>

<?php
// php代碼必須放在一對(duì)php標(biāo)簽中
    echo "Hello World！";
?>

<!-- 標(biāo)題標(biāo)簽：除了設(shè)置文檔標(biāo)題之外，還可以用來(lái)劃分頁(yè)面結(jié)構(gòu)的 -->
<h1>Hello World</h1>
<h2>Hello World</h2>
<h3>Hello World</h3>
<!-- 內(nèi)容標(biāo)簽 <p></p> -->
<p>程序猿界有一句話：每一個(gè)程序猿都應(yīng)該擁有一臺(tái)MacBook Pro</p>

2.鏈接與錨點(diǎn)

• 鏈接標(biāo)簽 a標(biāo)簽-當(dāng)今互聯(lián)網(wǎng)的靈魂，實(shí)現(xiàn)了全球資源之間的共享

1.target屬性：

• 標(biāo)簽的 target 屬性規(guī)定在何處打開(kāi)鏈接文檔。

<!-- _self 當(dāng)前窗口打開(kāi) -->
<a href="跳轉(zhuǎn)目標(biāo)" target="_self">Hello World</a>
<!-- _blank 跳轉(zhuǎn)到新的頁(yè)面，在新窗口打開(kāi) -->
<a href="跳轉(zhuǎn)目標(biāo)" target="_blank">Hello World</a>
<!-- 在指定窗口打開(kāi) target="iframe內(nèi)聯(lián)框架的name值" 此時(shí)a標(biāo)簽的target值需要跟iframe里的name值保持一致 -->
<a href="https://www.baidu.com/" target="baidu">打開(kāi)百度</a>
<iframe srcdoc="點(diǎn)擊上面的按鈕打開(kāi)百度" name="baidu" frameborder="0" width="600" height="500"></iframe>

• 注意：
  **使用target="iframename"時(shí)，需要注意a標(biāo)簽的target值需要跟iframe內(nèi)的name屬性值相等**

2.錨點(diǎn)

• 使用錨點(diǎn)可以實(shí)現(xiàn)在當(dāng)前頁(yè)面中的任意位置進(jìn)行跳轉(zhuǎn)

<a href="#footer">跳轉(zhuǎn)到底部</a>
<!-- 創(chuàng)建錨點(diǎn) -->
<div id="footer" style="margin-top: 1000px;">This is footer</div>

• div：通用元素標(biāo)簽，內(nèi)部可以放任意元素類型

• 如何返回當(dāng)前頁(yè)面頂部？
  直接將a標(biāo)簽的href值設(shè)置為#即可，如：

  <a href="#">回到頂部</a>

• 備注：
  vue.js、react等單頁(yè)面應(yīng)用，路由就是使用錨點(diǎn)實(shí)現(xiàn)的

三、圖片元素

如果我們想要在頁(yè)面添加一張圖片，可以使用img標(biāo)簽

• 必須屬性

• 案例：

  <img src="https://www.baidu.com/img/PCtm_d9c8750bed0b3c7d089fa7d55720d6cf.png" alt="百度一下" width="200">

• 備注：
  設(shè)置圖片的大小時(shí)，可以只設(shè)置寬度或者高度，另外一個(gè)屬性就會(huì)等比縮放，不要同時(shí)設(shè)置。
  在實(shí)際的開(kāi)發(fā)過(guò)程中，一般都在CSS中設(shè)置圖片的樣式，圖片很少單獨(dú)使用，基本都是用在鏈接中。

批改老師：天蓬老師

批改狀態(tài)：合格

老師批語(yǔ)：