当前位置：主页 > 查看内容

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

发布时间：2021-06-25 00:00| 有 位朋友查看

简介：文章目录 一 、知识急救箱 1.知识框架 a. HTML 内容元素 表单元素 功能元素 其他元素 b. CSS CSS选择器 CSS文本样式 CSS单位与颜色值 CSS字体与文本、段落样式控制 背景颜色与背景图 边框与轮廓 定位与盒子模型 弹性盒子 转换过渡与动画 c. Javascript 从HTM……

文章目录

一 、知识急救箱

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
本站部分内容转载于网络，版权归原作者所有，转载之目的在于传播更多优秀技术内容，如有侵权请联系QQ/微信：153890879删除，谢谢！
上一篇：九、HTML5 新增 下一篇：前端----高度塌陷及解决办法(最详细解)

推荐图文

  • 周排行
  • 月排行
  • 总排行

随机推荐