Web基礎（從入門到專案實戰）-有解無憂

文章目錄

- 一、知識急救箱
- - 1.知識框架
  - - a. HTML
    - - 內容元素
        表單元素
        功能元素
        其他元素
    - b. CSS
    - - CSS選擇器
        CSS文本樣式
        CSS單位與顏色值
        CSS字體與文本、段落樣式控制
        背景顏色與背景圖
        邊框與輪廓
        定位與盒子模型
        彈性盒子
        轉換過渡與影片
    - c. Javascript
    - - 從HTML檔案樹中獲取元素節點
        創建新的元素節點
        將元素節點插入到檔案中指定的位置
        從檔案中洗掉一個節點
        為瀏覽器及檔案物件系結事件
        獲取屬性節點并能根據要求修改屬性的值
        獲取文本節點，改變文本節點的值
        其他常用瀏覽器宿主物件、方法的使用
  - 2.知識精講
  - - a.HTML
    - b.CSS
    - c.Javascript
- 二、實戰演練
- - 1.CSS+HTML
  - - 實戰1：創建一個自動播放音樂的可編輯隔行換色表格
    - - a.效果展示
      - b.參考代碼
    - 實戰2：模擬網頁中的一個小模塊兒
    - - a.效果展示
      - b.參考代碼
    - 實戰3：制作一個登陸界面
    - - a.效果展示
      - b.參考代碼
  - 2.Javascript
  - - 創建一個可隨時添加洗掉員工資訊的表格
    - - a.效果展示
      - b.參考代碼
- 三、學到了嗎？
- - - 實戰1：
    - - 1.HTML標簽的靈活應用
      - 2.音頻的引入
    - 實戰2、3：
    - - 1.CSS盒子模型的靈活應用
      - a.樣式的設定：
        b.盒子的嵌套：
      - 2.圖片的引入
    - 實戰4：
    - - 1.JS獲取用戶輸入
      - 2.元素節點的獲取、創建、插入、洗掉
      - a.獲取:
        b.創建：
        c.插入：
        d.洗掉：
      - 3.為檔案物件系結事件

一、知識急救箱

1.知識框架

a. HTML

掌握 HTML5使用方法，能正確理解 HTML標簽語意

內容元素

表單元素

功能元素

其他元素

b. CSS

掌握CSS（CSS3）使用方法，能正確的使用CSS完成頁面樣式設計與布局操作

CSS選擇器

CSS文本樣式

CSS單位與顏色值

CSS字體與文本、段落樣式控制

背景顏色與背景圖

邊框與輪廓

定位與盒子模型

彈性盒子

轉換過渡與影片

c. Javascript

DOM與BOM編程

從HTML檔案樹中獲取元素節點

創建新的元素節點

將元素節點插入到檔案中指定的位置

從檔案中洗掉一個節點

為瀏覽器及檔案物件系結事件

獲取屬性節點并能根據要求修改屬性的值

獲取文本節點，改變文本節點的值

其他常用瀏覽器宿主物件、方法的使用

2.知識精講

a.HTML

html基礎知識
html基礎知識精講

b.CSS

css基礎知識
css基礎知識精講

c.Javascript

Javascript基礎知識
Javascript基礎知識精講
##########建議大家將基礎知識與基礎知識精講配套使用###########

二、實戰演練

請大家先根據題目自己嘗試，也許你們做的更棒呦！

1.CSS+HTML

實戰1：創建一個自動播放音樂的可編輯隔行換色表格

a.效果展示

在這里插入圖片描述

b.參考代碼

引入音頻檔案
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>動態隔行換色表格</title>
  <!--引入音頻-->
  <audio src="./img/她踏上了旅程).mp3"  autoplay="autoplay" > </audio>
</head>
<!--用 CSS設定表格樣式-->
<style>
  td{
    margin: 0px auto;
    width: 140px;
    height: 50px;
  }
  table{
    margin: 0px auto;
  }
  body{
    background-color: #FFF0F5;
  }
  .title{
    color: #8B0000	;
    background-color: #b3d4fc;
    width:325px;
    margin:0px auto;
  }

</style>
<body>
<!--用 HTML創建一個表格-->
<table border="1">
  <tr bgcolor="#FA8072">
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>

  </tr>
  <tr bgcolor="#F4A460">
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>

  </tr>
  <tr bgcolor="#FFF68F">
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>

  </tr>
  <tr bgcolor="#CAFF70	">
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>

  </tr>
  <tr bgcolor="#C1FFC1">
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>

  </tr>
  <tr bgcolor="#E0FFFF	">
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>

  </tr>
  <tr bgcolor="#EED2EE">
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>
    <td contenteditable="true"></td>

  </tr>
  <div class="title">
    <h1>My&nbsp&nbsp&nbspWeekday&nbsp&nbsp&nbspPlan</h1>
  </div>

</table>
</body>
</html>

@該表格的背景音樂是她踏上了旅程希望大家可以開心的Make a weekday plan 開啟下一周的旅程！！！

實戰2：模擬網頁中的一個小模塊兒

a.效果展示

在這里插入圖片描述

b.參考代碼

引入圖片
在這里插入圖片描述

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<link rel=”stylesheet” href=”./css/reset.css>
<!--通過CSS設定網頁樣式-->
<style>

  *{
    margin: 0;
    padding: 0;
  }
  body{
    background-color: lightpink;
  }
  .carton-wrapper{
    width:264px;
    height:432px;
    margin:50px auto;
    background-color: white;
    border-top: 1px solid #dddddd;
  }
  .cartoon-title
  {
    display: inline-block;
    height:40px;
    font-size: 20px;
    border-top: 1px red solid;
  }
  .cartoon-title a{
    color: #561241;
    text-decoration: none;
  }
  .photo-title{
    margin-top: -25px;
    margin-left: 80px;
    color: white;
  }
  .cartoon-img
  {
    height: 220px;
  }
  .cartoon-list
  {
    margin-top: 15px;
  }
  li
  {
    margin-bottom: 15px;
    margin-left: 15px;
    font-size: 14px;
    color:#cccccc;

  }
  li a{
    color: #666666;
  }
  li a:hover{
    color: hotpink;
  }
</style>
<body>
<!--創建動漫串列的外側容器-->
<div class="carton-wrapper">
  <h2 class="cartoon-title">
    <a href="#">動漫</a>
  </h2>
  <!--創建一個圖片容器-->
  <div class="cartoon-img">
    <a href="#">
      <img src="./img/狼與香辛料.png" height="200">
      <h4 class="photo-title">
        I love you
      </h4>
    </a>
  </div>
  <div class="cartoon-list">
    <!--創建串列-->
    <ul>
      <li>
        <a href="#">相知相守才是莫大的幸福</a>
      </li>
      <li>
        <a href="#">動人的點點滴滴</a>
      </li>
      <li>
        <a href="#">培養你的與眾不同</a>
      </li>
      <li>
        <a href="#">少年，祝愿你有一個浪漫的前程</a>
      </li>

    </ul>
  </div>
</div>
</body>
</html>

實戰3：制作一個登陸界面

a.效果展示

在這里插入圖片描述

b.參考代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>登錄界面</title>
</head>

<style>
  #login-box{
    width: 300px;
    height:230px;
    margin:0px auto;
    margin-top:15% ;
    text-align: center;
    background-color: #00000070;
    padding:20px 50px;
    color:white;
    border-radius: 8px;
  }
  #login-box.form{
    margin-top: 50px;
  }
  #login-box.form.item{
    margin-top: 15px;
  }
   input{
    width:200px;
    font-size: 18px;
    border:0;
    border-bottom: 2px solid #ffffff;
    padding:5px 10px;
    background: #ffffff00;
    color:#ffffff;
  }
  button{
    margin-top: 15px;
    width: 180px;
    height:30px;
    background-image: linear-gradient(to right, #b8cbb8 0%, #b8cbb8 0%, #b465da 0%, #cf6cc9 33%, #ee609c 66%, #ee609c 100%);
    border-radius: 15px;
    border:0px;
    color:white;
    font-weight: 700;
  }
  body{
    background: url("img/bg.jpeg");
    background-repeat: no-repeat;
    background-size:100%;
  }
</style>
<body >
<div id="login-box">
  <h1>login</h1>
  <div class="form">
    <div class="item">
      <i></i>
      <input type="text"placeholder="username">
    </div>
    <div class="item">
      <i></i>
      <input type="text"placeholder="password">
    </div>
  </div>
  <button>Login</button>
</div>
</body>
</html>

2.Javascript

創建一個可隨時添加洗掉員工資訊的表格

a.效果展示

輸入員工資訊
在這里插入圖片描述
點擊提交

點擊洗掉
在這里插入圖片描述
如果點擊洗掉回到第一張圖效果，點擊取消保持現有樣式不變

b.參考代碼

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>員工資訊表格</title>
</head>
<script type="text/javascript">
    window.οnlοad=function () {
        /*獲取所有的元素節點a*/
        let allA=document.getElementsByTagName("a");
        /*為所有的超鏈接系結單機回應函式*/
        for (let i=0;i<allA.length;i++){
            allA[i].οnclick=function () {
                let tr=this.parentNode.parentNode;
                let name=tr.getElementsByTagName("td")[0].innerHTML;
                let con=confirm("確認洗掉"+name+"嗎？")
                if(con)
                {
                    tr.parentNode.removeChild(tr);
                }
            }
        }
        let  addEmpButton=document.getElementById("addEmpButton");
        /*為submit按鈕系結單機回應函式*/
        addEmpButton.οnclick=function () {
            /*獲取用戶輸入的內容*/
            let name = document.getElementById("empName").value;
            let email = document.getElementById("email").value;
            let salary = document.getElementById("salary").value;
            /*創建一個tr節點*/
            let tr = document.createElement("tr");
            /*創建四個td節點*/
            let nameTd = document.createElement("td");
            let emailTd = document.createElement("td");
            let salaryTd = document.createElement("td");
            let aTd = document.createElement("td");
            /*創建一個超鏈接*/
            let a = document.createElement("a");
            /*創建四個文本節點*/
            let nameText = document.createTextNode(name);
            let emailText = document.createTextNode(email);
            let salaryText = document.createTextNode(salary);
            let deText = document.createTextNode( " \u00A0\u00A0\u00A0\u00A0 delete");
            a.href = "javascript:;"
            /*將文本節點添加到td標簽中*/
            nameTd.appendChild(nameText);
            emailTd.appendChild(emailText);
            salaryTd.appendChild(salaryText);
            aTd.appendChild(a);
            a.appendChild(deText);
            /*將td標簽添加到tr標簽中*/
            tr.appendChild(nameTd);
            tr.appendChild(emailTd);
            tr.appendChild(salaryTd);
            tr.appendChild(aTd);
            /*將tr標簽添加到table中*/
            let employeeTable = document.getElementById("employeeTable");
            employeeTable.appendChild(tr);
            /*為新創建的a標簽系結單機回應函式*/
            for (let i=0;i<allA.length;i++){
                allA[i].οnclick=function () {
                    let tr=this.parentNode.parentNode;
                    let name=tr.getElementsByTagName("td")[0].innerHTML;
                    let con=confirm("確認洗掉"+name+"嗎？")
                    if(con)
                    {
                        tr.parentNode.removeChild(tr);
                    }
                }
            }
        }
    }
</script>
<style>
  th{
    width:100px;
    height:30px;
  }
  td{
    width:100px;
    height:30px;
  }
  #formDiv{
    border:black 1px solid;
    width:300px;
    height:200px;
    margin:10px auto;
    padding: 10px;
  }
  #employeeTable{
    margin: 100px auto;
  }
  tr a{
    text-decoration: none;
  }
</style>

<body>
<table id="employeeTable" border="1px">
  <tr>
    <th>name</th>
    <th>email</th>
    <th>salary</th>
    <th>&nbsp</th>
  </tr>
  <tr>
    <td>Tom</td>
    <td></td>
    <td></td>
    <td><a href="#">&nbsp&nbsp&nbsp&nbsp delete</a></td>
  </tr>
  <tr>
    <td>Bill</td>
    <td></td>
    <td></td>
    <td><a href="#">&nbsp&nbsp&nbsp&nbsp delete</a></td>
  </tr>
  <tr>
    <td>Bob</td>
    <td></td>
    <td></td>
    <td><a href="#">&nbsp&nbsp&nbsp&nbsp delete</a></td>
</table>
<div id="formDiv">
  <h4>添加新員工</h4>
  <table>
    <tr>
      <td class="word">name:</td>
      <td class="inp">
        <input type="text" name="empName" id="empName">
      </td>
    </tr>
    <tr>
      <td class="word">email:</td>
      <td class="inp">
        <input type="text" name="email" id="email">
      </td>
    </tr>
    <tr>
      <td class="word">salary:</td>
      <td class="inp">
        <input type="text" name="salary" id="salary">
      </td>
    </tr>
    <tr>
      <td colspan="2" align="center">
        <button id="addEmpButton" value="abc">
          Submit
        </button>
      </td>
    </tr>
  </table>
</div>
</body>
</html>

三、學到了嗎？

實戰1：

1.HTML標簽的靈活應用

建議大家下載zeal檔案來查看各標簽的使用方法

2.音頻的引入

在這里插入圖片描述

實戰2、3：

1.CSS盒子模型的靈活應用

a.樣式的設定：

在這里插入圖片描述

b.盒子的嵌套：

在這里插入圖片描述

2.圖片的引入

在這里插入圖片描述

實戰4：

1.JS獲取用戶輸入

let name = document.getElementById(“empName”).value;

2.元素節點的獲取、創建、插入、洗掉

a.獲取:

document.getElementsByTagName(“a”)；
document.getElementById(“addEmpButton”);

b.創建：

document.createElement(“td”);
document.createTextNode(name);

c.插入：

tr.appendChild(nameTd);

d.洗掉：

tr.parentNode.removeChild(tr);

3.為檔案物件系結事件

allA[i].οnclick=function (){}

@最后給大家分享一個視頻無論是你得過去，還是你的缺陷，都無法抹去你的未來希望大家不被過去牽絆，在未來的日子里披荊斬棘，乘風破浪！！！

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/275810.html

標籤：其他

上一篇：死磕javascript的手寫面試題

下一篇：九、HTML5 新增

Web基礎（從入門到專案實戰）

文章目錄

一 、知識急救箱

1.知識框架

a. HTML

內容元素

表單元素

功能元素

其他元素

b. CSS

CSS選擇器

CSS文本樣式

CSS單位與顏色值

CSS字體與文本、段落樣式控制

背景顏色與背景圖

邊框與輪廓

定位與盒子模型

彈性盒子

轉換過渡與影片

c. Javascript

從HTML檔案樹中獲取元素節點

創建新的元素節點

將元素節點插入到檔案中指定的位置

從檔案中洗掉一個節點

為瀏覽器及檔案物件系結事件

獲取屬性節點并能根據要求修改屬性的值

獲取文本節點，改變文本節點的值

其他常用瀏覽器宿主物件、方法的使用

2.知識精講

a.HTML

b.CSS

c.Javascript

二、實戰演練

1.CSS+HTML

實戰1：創建一個自動播放音樂的可編輯隔行換色表格

a.效果展示

b.參考代碼

實戰2：模擬網頁中的一個小模塊兒

a.效果展示

b.參考代碼

實戰3：制作一個登陸界面

a.效果展示

b.參考代碼

2.Javascript

創建一個可隨時添加洗掉員工資訊的表格

a.效果展示

b.參考代碼

三、學到了嗎？

實戰1：

1.HTML標簽的靈活應用

2.音頻的引入

實戰2、3：

1.CSS盒子模型的靈活應用

a.樣式的設定：

b.盒子的嵌套：

2.圖片的引入

實戰4：

1.JS獲取用戶輸入

2.元素節點的獲取、創建、插入、洗掉

a.獲取:

b.創建：

c.插入：

d.洗掉：

3.為檔案物件系結事件

一、知識急救箱