Web前端小实验

最新推荐文章于 2024-09-06 22:20:29 发布
最新推荐文章于 2024-09-06 22:20:29 发布
阅读量89 收藏
点赞数
文章标签： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_74796680/article/details/131603155
版权

day1:跳转案例

<!DOCTYPE html>
<!--声明文档 html5  -->
<html lang="en">

<head>
    <meta charset="utf-8">
    <title>apple</title>
</head>

<body>
  <h1>欢迎您来到登录页</h1>
  <span>
    <a href="http://www.xianoupeng.com/" target="_blank">首页</a>
    <a href="https://www.baidu.com" target="_blank">列表页</a>
    <a href="https://developer.mozilla.org/zh-CN/" target="_blank">详情页</a>
    <a href="https://www.csdn.net/" target="_blank">登录页</a>
  </span>

</body>

</html>

运行结果

 day2：表单小实验

主要代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>理想对象</title>
</head>
<body>
  <h2>青春不常在，抓紧谈恋爱</h2>

      <form action="#">
      <thead>
          <tr>
              <th>性别</th>
              <th><input type="radio" name="gender" value="nan">男</th>
              <th><input type="radio" name="gender" value="nv">女<br /></th>
          </tr>
      </thead>
       
      <tr><span>生日</span></tr>
      
      <select name="jiguan" id="" placeholder="请输入用户名：">
      <span><option value="请选择年">请选择年</option></span>
      <span><option value="请选择年">2023</option></span>
     </select>
      
      <select name="" id="">
      <span> <option value="请选择月">请选择月份</option> </span>
      <span> <option value="请选择月">12月</option> </span>
      <span> <option value="请选择月">11月</option> </span>
      <span> <option value="请选择月">10月</option> </span>
      <span> <option value="请选择月">9月</option> </span>
      <span> <option value="请选择月">8月</option> </span>
      <span> <option value="请选择月">7月</option> </span>
      <span> <option value="请选择月">6月</option> </span>
      <span> <option value="请选择月">5月</option> </span>
      <span> <option value="请选择月">4月</option> </span>
      <span> <option value="请选择月">3月</option> </span>
      <span> <option value="请选择月">2月</option> </span>
      <span> <option value="请选择月">1月</option> </span>  
      </select>
     
      <select name="" id="">
      <span> <option value="请选择日">请选择日</option>
        <option value="请选择日">1日</option>
        <option value="请选择日">2日</option>
        <option value="请选择日">3日</option>
        <option value="请选择日">4日</option>
        <option value="请选择日">5日</option>
        <option value="请选择日">6日</option>
        <option value="请选择日">7日</option>
        <option value="请选择日">8日</option>
        <option value="请选择日">9日</option>
        <option value="请选择日">10日</option>
        <option value="请选择日">11日</option>
        <option value="请选择日">12日</option>
        <option value="请选择日">13日</option>
        <option value="请选择日">14日</option>
        <option value="请选择日">15日</option>
        <option value="请选择日">16日</option>
        <option value="请选择日">17日</option>
        <option value="请选择日">18日</option>
        <option value="请选择日">19日</option>
        <option value="请选择日">20日</option>
        <option value="请选择日">21日</option>
        <option value="请选择日">22日</option>
        <option value="请选择日">23日</option>
        <option value="请选择日">24日</option>
        <option value="请选择日">25日</option>
        <option value="请选择日">26日</option>
        <option value="请选择日">27日</option>
        <option value="请选择日">28日</option>
        <option value="请选择日">29日</option>
        <option value="请选择日">30日</option>
        <option value="请选择日">31日</option>
     </select><br />
       <table>
          <span>所在地区   <input type="text" name="user" value="" maxlength="6" placeholder="    具体位置"></span>
          <tbody>
          <tr>
                <span>
              <th>婚姻状况</th>
              <th><input type="radio" name="gender" value="yihun">未婚</th>
              <th><input type="radio" name="gender" value="weihun">已婚<br /></th>
              <th><input type="radio" name="gender" value="lihun">离婚<br /></th>
                </span><br />
          </tr>
         </tbody>
        </table>
         <table>
        学历<input type="text" name="user" value="" maxlength="6" placeholder="幼儿园"><br />
         
         <span>
         <tr>
          <th>喜欢的类型</th>
          <th><label><input type="checkbox" name="food">妩媚的</label></th>
          <th><label><input type="checkbox" name="food">可爱的</label</th>
          <th><label><input type="checkbox" name="food">小鲜肉</label></th>
          <th><label><input type="checkbox" name="food">老腊肉</label></th>
          <th><label><input type="checkbox" name="food">大帅比</label></th>
          <th><label><input type="checkbox" name="food">都喜欢</label></th>
         </tr>
         <tr>
            <th>自我介绍</th>
            <th> <textarea cols="20" rows="0" maxlength="200" placeholder=" 本人特征，爱好，性格等"></textarea><br /></th>
            </tr>
         </textarea><br />
         <tr>
            <th></th>
            <th><button type="submit">免费注册</button></th><br />
         </tr>
         <tr>
             <th></th>
             <th><label><input type="checkbox" name="food">我同意注册条款和会员加入标准</label></th>
         </tr>
         <tr>
            <th></th>
            <th><a href="http://www.xianoupeng.com/" target="_blank">我是会员，立即登录</a> </th>  
         </tr>
         <tr>
            <th></th\>
            <th> 
                <h3>我承诺</h3>
                <ul type="circle">
                <li>年满18岁，单身</li>
                <li>报着严肃的态度</li>
                <li>真诚寻找另一半</li>
                </ul> 
            </th> 
         </tr>
        </table>   
        </form>  
</body>
</html>

 运行结果：

 

肾透侧视攻城狮
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
Web前端 实验 实验三（1）.7z
11-19
实验的标题"Web前端 实验 实验三（1）.7z"表明这是一个关于Web前端开发的学习项目，可能是一个逐步指导或实战练习，旨在帮助学习者掌握网页制作的基本技能。 首先，HTML（HyperText Markup Language）是网页内容的...
web前端课程实验+期末大作业(vue)
08-02
在本项目中，我们关注的是"web前端课程实验+期末大作业(vue)"，这是一个基于Vue.js技术的前端开发实践项目。Vue.js是目前非常流行的一款轻量级、高性能的前端框架，它提供了丰富的功能和组件，使得构建复杂的单页...
web前端开发实验——1
qq_46476515的博客
10-15 1202
web前端开发应用作业 1
web前端开发实验——4
qq_46476515的博客
10-17 744
web前端开发实验——4
web前端开发实验——2
qq_46476515的博客
10-16 2017
web前端开发实验——2
web前端开发实验——3
qq_46476515的博客
10-16 1407
web前端开发实验——3
web前端开发实验——5
qq_46476515的博客
10-17 1117
web前端开发实验——5
web前端 校园网站设计
m0_74394367的博客
10-12 3063
web前端 校园网站设计
web前端实验一
Alfafar的博客
04-26 1900
1.应用html和css完成如图所示界面效果。内容相对于浏览器居中，图标见附件disc.jpg。 说明： ~内容相对于浏览器居中，图标见附件disc.jpg ~盒子边框1px solid #ccc，内边距20px ~文本字体颜色#122e67，文本高度30px <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Com
Web前端开发技术实验与实践——实训1
weixin_58243276的博客
03-12 2920
Web前端开发技术实验与实践——实训1
Web前端技术实验5.apple网站
昂昂焦爱学习的博客
09-19 757
Web前端实验5
web用css做网页实验报告,web前端技术实验报告实验二
weixin_36211941的博客
08-03 2200
《web前端技术实验报告实验二》由会员分享，可在线阅读，更多相关《web前端技术实验报告实验二(7页珍藏版)》请在装配图网上搜索。1、Web前端技术实验报告课程名称：Web 前端技术实验名称： css+div网页设计系别班级：计科系1306 班学生姓名：宋馨芳学生学号：2013100603指导老师：杨晓敏一、实验目的1 、掌握 CSS基本概念、 CSS类型及四种 CSS样式定义的方法2 、理解 D...
web前端开发技术储久良第三版答案
12-09
《Web前端开发技术储久良第三版答案》涵盖了前端开发领域的关键知识点，主要针对储久良教授编著的教材第三版中的习题和实验提供了详尽的解答。这本书旨在帮助学习者深入理解Web前端开发的核心概念和技术，通过解决...
Web前端开发技术（第2版）储久良课后实验材料及源代码
07-15
《Web前端开发技术（第2版）》是储久良教授编著的一本关于Web前端开发的教科书，此压缩包包含该书的课后实验材料与源代码，是学习Web前端技术的重要辅助资源。储久良教授在Web开发领域有着深厚的理论基础和丰富的...
web前端开发课后实验六答案
01-24
本书紧密结合互联网行业发展对Web前端开发工程师岗位的技术与能力的需求，详细介绍了HTML、CSS、DIV、JavaScript、DOM与BOM几大组成部分的基本语法和关键应用。内容编排结构合理，由浅入深、循序渐进地引导读者快速...
跨页面进行数据通讯
榴莲不好吃的专栏
09-02 499
Broadcast Channel API 允许在一个源的不同窗口、标签页或 iframe 之间进行通信。这是一种实时的通信机制，非常适合需要实时同步数据的场景。3.iframe 数据通讯 postMessage/message（可设置不同源数据通讯）1.使用 LocalStorage 或 SessionStorage（同源）// 检查消息来源，确保来自正确的源。// 检查消息来源，确保来自正确的源。'Hello 来自父亲的消息!'Hello 来自儿子的消息!// 忽略来自自身的消息。
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 444
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
WHAT - React 函数与 useMemo vs useCallback
weixin_58540586的博客
09-03 895
目录介绍`useMemo` 与 `useCallback` 的区别示例代码`useMemo` 示例`useCallback` 示例总结 介绍 在 React 中，useMemo 和 useCallback 是两个用于性能优化的钩子，尽管它们有些相似，但各自有不同的用途和应用场景。理解它们的区别和适用情况可以帮助你更有效地管理组件的性能和状态。 useMemo 与 useCallback 的区别 useMemo: 目的: 用于记忆化（缓存）计算结果。它接受一个计算函数和依赖项数组，只有当依赖项发生变化时
web开发
2301_76876837的博客
09-04 389
我们在访问的网站的时候，一般就是在浏览器的网址栏里输入，再敲个回车，我们就可以访问到我们想要的网站（比如京东）。这是为什么呢？我们访问的浏览器是一个程序，京东也是一个程序，只是京东在人家电脑上运行着，我们只是远程访问了人家的前端页面。我们根据下图来讲解一下web网站的工作流程：我们在浏览器输入我们想要查找的域名，回车（搜索）后，会到，前端服务器接受到请求后会把相对应的前端代码返回给浏览器，浏览器会自动解析前端代码（因为内置了解析引擎），展示出页面效果。前端代码里由一句代码会是访问。
HTML与Web前端开发工具基础实验全指南
《HTML实验指导书》是一份针对初学者设计的基础性与综合性实验教材，旨在帮助学习者深入理解和掌握Web前端技术基础。这份教程共分为两部分，涵盖了HTML、CSS和JavaScript的核心内容，以及相关工具的使用。 在第一...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值