Web基础（从入门到项目实战）_飞道的博客

Web基础（从入门到项目实战）

2021-04-15 07:25 475人阅读评论(0)

文章目录

一、知识急救箱

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://blog.csdn.net/weixin_51047154/article/details/115621448

查看评论

飞道的博客

飞道的博客

个人资料

文章分类

文章存档

阅读排行

评论排行

推荐文章